jupyterhub · yuvipanda · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,15 +1,11 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "jquery": true,
-        "jest/globals": true,
-    },
-    "extends": [
-        "eslint:recommended",
-    ],
-    "parser": "@babel/eslint-parser",
-    "plugins": [
-        "jest",
-    ],
-    "rules": {},
+  env: {
+    browser: true,
+    jquery: true,
+    "jest/globals": true,
+  },
+  extends: ["eslint:recommended"],
+  parser: "@babel/eslint-parser",
+  plugins: ["jest"],
+  rules: {},
 };
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -58,7 +58,6 @@ repos:
           # separate run of pre-commit where we configure a line spacing of 4
           # for these file formats.
           - html
-          - javascript
 
   # Misc autoformatting and linting
   - repo: https://github.com/pre-commit/pre-commit-hooks

diff --git a/binderhub/static/js/index.js b/binderhub/static/js/index.js
@@ -1,50 +1,58 @@
 /* If this file gets over 200 lines of code long (not counting docs / comments), start using a framework
-*/
-import ClipboardJS from 'clipboard';
-import 'event-source-polyfill';
+ */
+import ClipboardJS from "clipboard";
+import "event-source-polyfill";
 
-import { BinderRepository } from '@jupyterhub/binderhub-client';
-import { updatePathText } from './src/path';
-import { nextHelpText } from './src/loading';
-import { updateFavicon } from './src/favicon';
+import { BinderRepository } from "@jupyterhub/binderhub-client";
+import { updatePathText } from "./src/path";
+import { nextHelpText } from "./src/loading";
+import { updateFavicon } from "./src/favicon";
 
-import 'xterm/css/xterm.css';
+import "xterm/css/xterm.css";
 
 // Include just the bootstrap components we use
-import 'bootstrap/js/dropdown';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/css/bootstrap-theme.min.css';
-
-import '../index.css';
-import { setUpLog } from './src/log';
-import { updateUrls } from './src/urls';
-import { BASE_URL } from './src/constants';
-import { getBuildFormValues } from './src/form';
-import { updateRepoText } from './src/repo';
+import "bootstrap/js/dropdown";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/css/bootstrap-theme.min.css";
 
+import "../index.css";
+import { setUpLog } from "./src/log";
+import { updateUrls } from "./src/urls";
+import { BASE_URL } from "./src/constants";
+import { getBuildFormValues } from "./src/form";
+import { updateRepoText } from "./src/repo";
 
 function build(providerSpec, log, fitAddon, path, pathType) {
   updateFavicon(BASE_URL + "favicon_building.ico");
   // split provider prefix off of providerSpec
-  const spec = providerSpec.slice(providerSpec.indexOf('/') + 1);
+  const spec = providerSpec.slice(providerSpec.indexOf("/") + 1);
   // Update the text of the loading page if it exists
-  if ($('div#loader-text').length > 0) {
-    $('div#loader-text p.launching').text("Starting repository: " + decodeURIComponent(spec))
+  if ($("div#loader-text").length > 0) {
+    $("div#loader-text p.launching").text(
+      "Starting repository: " + decodeURIComponent(spec),
+    );
   }
 
-  $('#build-progress .progress-bar').addClass('hidden');
+  $("#build-progress .progress-bar").addClass("hidden");
   log.clear();
 
-  $('.on-build').removeClass('hidden');
+  $(".on-build").removeClass("hidden");
 
-  const buildToken = $("#build-token").data('token');
+  const buildToken = $("#build-token").data("token");
   // If BASE_URL is absolute, use that as the base for build endpoint URL.
   // Else, first resolve BASE_URL relative to current URL, then use *that* as the
   // base for the build endpoint url.
-  const buildEndpointUrl = new URL("build", new URL(BASE_URL, window.location.href));
-  const image = new BinderRepository(providerSpec, buildEndpointUrl, buildToken);
-
-  image.onStateChange('*', function(data) {
+  const buildEndpointUrl = new URL(
+    "build",
+    new URL(BASE_URL, window.location.href),
+  );
+  const image = new BinderRepository(
+    providerSpec,
+    buildEndpointUrl,
+    buildToken,
+  );
+
+  image.onStateChange("*", function (data) {
     if (data.message !== undefined) {
       log.writeAndStore(data.message);
       fitAddon.fit();
@@ -53,111 +61,127 @@ function build(providerSpec, log, fitAddon, path, pathType) {
     }
   });
 
-  image.onStateChange('waiting', function() {
-    $('#phase-waiting').removeClass('hidden');
+  image.onStateChange("waiting", function () {
+    $("#phase-waiting").removeClass("hidden");
   });
 
-  image.onStateChange('building', function() {
-    $('#phase-building').removeClass('hidden');
+  image.onStateChange("building", function () {
+    $("#phase-building").removeClass("hidden");
     log.show();
   });
 
-  image.onStateChange('pushing', function() {
-    $('#phase-pushing').removeClass('hidden');
+  image.onStateChange("pushing", function () {
+    $("#phase-pushing").removeClass("hidden");
   });
 
-  image.onStateChange('failed', function() {
-    $('#build-progress .progress-bar').addClass('hidden');
-    $('#phase-failed').removeClass('hidden');
+  image.onStateChange("failed", function () {
+    $("#build-progress .progress-bar").addClass("hidden");
+    $("#phase-failed").removeClass("hidden");
 
     $("#loader").addClass("paused");
 
     // If we fail for any reason, show an error message and logs
     updateFavicon(BASE_URL + "favicon_fail.ico");
     log.show();
-    if ($('div#loader-text').length > 0) {
-      $('#loader').addClass("error");
-      $('div#loader-text p.launching').html('Error loading ' + spec + '!<br /> See logs below for details.');
+    if ($("div#loader-text").length > 0) {
+      $("#loader").addClass("error");
+      $("div#loader-text p.launching").html(
+        "Error loading " + spec + "!<br /> See logs below for details.",
+      );
     }
     image.close();
   });
 
-  image.onStateChange('built', function() {
-    $('#phase-already-built').removeClass('hidden');
-    $('#phase-launching').removeClass('hidden');
+  image.onStateChange("built", function () {
+    $("#phase-already-built").removeClass("hidden");
+    $("#phase-launching").removeClass("hidden");
     updateFavicon(BASE_URL + "favicon_success.ico");
   });
 
-  image.onStateChange('ready', function(data) {
+  image.onStateChange("ready", function (data) {
     image.close();
     // If data.url is an absolute URL, it'll be used. Else, it'll be interpreted
     // relative to current page's URL.
     const serverUrl = new URL(data.url, window.location.href);
     // user server is ready, redirect to there
-    window.location.href = image.getFullRedirectURL(serverUrl, data.token, path, pathType);
+    window.location.href = image.getFullRedirectURL(
+      serverUrl,
+      data.token,
+      path,
+      pathType,
+    );
   });
 
   image.fetch();
   return image;
 }
 
 function indexMain() {
-    const [log, fitAddon] = setUpLog();
+  const [log, fitAddon] = setUpLog();
 
-    // setup badge dropdown and default values.
-    updateUrls();
+  // setup badge dropdown and default values.
+  updateUrls();
 
-    $("#provider_prefix_sel li").click(function(event){
-      event.preventDefault();
+  $("#provider_prefix_sel li").click(function (event) {
+    event.preventDefault();
 
-      $("#provider_prefix-selected").text($(this).text());
-      $("#provider_prefix").val($(this).attr("value"));
-      updateRepoText();
-      updateUrls();
-    });
+    $("#provider_prefix-selected").text($(this).text());
+    $("#provider_prefix").val($(this).attr("value"));
+    updateRepoText();
+    updateUrls();
+  });
 
-    $("#url-or-file-btn").find("a").click(function (evt) {
+  $("#url-or-file-btn")
+    .find("a")
+    .click(function (evt) {
       evt.preventDefault();
 
       $("#url-or-file-selected").text($(this).text());
       updatePathText();
       updateUrls();
     });
-    updatePathText();
-    updateRepoText();
+  updatePathText();
+  updateRepoText();
 
-    $('#repository').on('keyup paste change', function() {updateUrls();});
+  $("#repository").on("keyup paste change", function () {
+    updateUrls();
+  });
 
-    $('#ref').on('keyup paste change', function() {updateUrls();});
+  $("#ref").on("keyup paste change", function () {
+    updateUrls();
+  });
 
-    $('#filepath').on('keyup paste change', function() {updateUrls();});
+  $("#filepath").on("keyup paste change", function () {
+    updateUrls();
+  });
 
-    $('#toggle-badge-snippet').on('click', function() {
-        const badgeSnippets = $('#badge-snippets');
-        if (badgeSnippets.hasClass('hidden')) {
-            badgeSnippets.removeClass('hidden');
-            $("#badge-snippet-caret").removeClass("glyphicon-triangle-right");
-            $("#badge-snippet-caret").addClass("glyphicon-triangle-bottom");
-        } else {
-            badgeSnippets.addClass('hidden');
-            $("#badge-snippet-caret").removeClass("glyphicon-triangle-bottom");
-            $("#badge-snippet-caret").addClass("glyphicon-triangle-right");
-        }
+  $("#toggle-badge-snippet").on("click", function () {
+    const badgeSnippets = $("#badge-snippets");
+    if (badgeSnippets.hasClass("hidden")) {
+      badgeSnippets.removeClass("hidden");
+      $("#badge-snippet-caret").removeClass("glyphicon-triangle-right");
+      $("#badge-snippet-caret").addClass("glyphicon-triangle-bottom");
+    } else {
+      badgeSnippets.addClass("hidden");
+      $("#badge-snippet-caret").removeClass("glyphicon-triangle-bottom");
+      $("#badge-snippet-caret").addClass("glyphicon-triangle-right");
+    }
 
-        return false;
-    });
+    return false;
+  });
 
-    $('#build-form').submit(function() {
-        const formValues = getBuildFormValues();
-        updateUrls(formValues);
-        build(
-          formValues.providerPrefix + '/' + formValues.repo + '/' + formValues.ref,
-          log, fitAddon,
-          formValues.path,
-          formValues.pathType
-        );
-        return false;
-    });
+  $("#build-form").submit(function () {
+    const formValues = getBuildFormValues();
+    updateUrls(formValues);
+    build(
+      formValues.providerPrefix + "/" + formValues.repo + "/" + formValues.ref,
+      log,
+      fitAddon,
+      formValues.path,
+      formValues.pathType,
+    );
+    return false;
+  });
 }
 
 function loadingMain(providerSpec) {
@@ -167,32 +191,32 @@ function loadingMain(providerSpec) {
   // that is good because it is the real value and '/'s will be trimmed in `launch`
   const params = new URL(location.href).searchParams;
   let pathType, path;
-  path = params.get('urlpath');
+  path = params.get("urlpath");
   if (path) {
-    pathType = 'url';
+    pathType = "url";
   } else {
-    path = params.get('labpath');
+    path = params.get("labpath");
     if (path) {
-      pathType = 'lab';
+      pathType = "lab";
     } else {
-      path = params.get('filepath');
+      path = params.get("filepath");
       if (path) {
-        pathType = 'file';
+        pathType = "file";
       }
     }
   }
   build(providerSpec, log, fitAddon, path, pathType);
 
   // Looping through help text every few seconds
-  const launchMessageInterval = 6 * 1000
+  const launchMessageInterval = 6 * 1000;
   setInterval(nextHelpText, launchMessageInterval);
 
   // If we have a long launch, add a class so we display a long launch msg
-  const launchTimeout = 120 * 1000
+  const launchTimeout = 120 * 1000;
   setTimeout(() => {
-    $('div#loader-links p.text-center').addClass("longLaunch");
+    $("div#loader-links p.text-center").addClass("longLaunch");
     nextHelpText();
-  }, launchTimeout)
+  }, launchTimeout);
 
   return false;
 }
@@ -202,6 +226,6 @@ window.loadingMain = loadingMain;
 window.indexMain = indexMain;
 
 // Load the clipboard after the page loads so it can find the buttons it needs
-window.onload = function() {
-  new ClipboardJS('.clipboard');
+window.onload = function () {
+  new ClipboardJS(".clipboard");
 };
diff --git a/binderhub/static/js/src/badge.js b/binderhub/static/js/src/badge.js
@@ -7,10 +7,9 @@ export function makeBadgeMarkup(badgeBaseUrl, baseUrl, url, syntax) {
     badgeImageUrl = window.location.origin + baseUrl + "badge_logo.svg";
   }
 
-  if (syntax === 'markdown') {
+  if (syntax === "markdown") {
     return "[![Binder](" + badgeImageUrl + ")](" + url + ")";
-  } else if (syntax === 'rst') {
+  } else if (syntax === "rst") {
     return ".. image:: " + badgeImageUrl + "\n :target: " + url;
-
   }
 }
diff --git a/binderhub/static/js/src/constants.js b/binderhub/static/js/src/constants.js
@@ -1,3 +1,2 @@
-
-export const BASE_URL = $('#base-url').data().url;
-export const BADGE_BASE_URL = $('#badge-base-url').data().url;
+export const BASE_URL = $("#base-url").data().url;
+export const BADGE_BASE_URL = $("#badge-base-url").data().url;
diff --git a/binderhub/static/js/src/favicon.js b/binderhub/static/js/src/favicon.js
@@ -4,14 +4,14 @@
  * @param {String} href Path to Favicon to use
  */
 function updateFavicon(href) {
-    let link = document.querySelector("link[rel*='icon']");
-    if(!link) {
-        link = document.createElement('link');
-        document.getElementsByTagName('head')[0].appendChild(link);
-    }
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = href;
+  let link = document.querySelector("link[rel*='icon']");
+  if (!link) {
+    link = document.createElement("link");
+    document.getElementsByTagName("head")[0].appendChild(link);
+  }
+  link.type = "image/x-icon";
+  link.rel = "shortcut icon";
+  link.href = href;
 }
 
 export { updateFavicon };