Rewrite the frontend

.eslintrc.js

@@ -1,14 +1,48 @@
 module.exports = {
   env: {
     browser: true,
-    jquery: true,
-    node: true,
-    es6: true,
-    "jest/globals": true,
-  },
-  extends: ["eslint:recommended"],
-  ignorePatterns: ["**/dist"],
-  parser: "@babel/eslint-parser",
-  plugins: ["jest"],
-  rules: {},
+    es2021: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  ignorePatterns: ["dist"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+    {
+      files: ["**/*.test.js", "**/*.test.jsx"],
+      env: {
+        jest: true,
+        node: true,
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-react": "off",
+    // Temporarily turn off prop-types
+    "react/prop-types": "off",
+    "no-unused-vars": ["error", { args: "after-used" }],
+  },
+  ignorePatterns: [
+    "jupyterhub_fancy_profiles/static/*.js",
+    "webpack.config.js",
+    "babel.config.js",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
 };

.github/workflows/test.yml

@@ -173,6 +173,9 @@ jobs:
           pip install --no-binary pycurl -r dev-requirements.txt -r helm-chart/images/binderhub/requirements.txt
           pip install -e .
 
+      - name: Install Playwright browser
+        run: playwright install firefox
+
       - name: Install JupyterHub chart for main tests
         if: matrix.test == 'main'
         run: |
@@ -434,6 +437,9 @@ jobs:
           pip install ".[pycurl]" --no-binary pycurl
           pip install -e ".[pycurl]" --no-binary pycurl
 
+      - name: Install Playwright browser
+        run: playwright install firefox
+
       - name: Setup JupyterHub NPM dependencies
         run: npm install -g configurable-http-proxy
 

.gitignore

@@ -81,6 +81,7 @@ coverage.xml
 *.py,cover
 .hypothesis/
 .pytest_cache/
+coverage
 
 # Translations
 *.mo

babel.config.json

@@ -1,3 +1,6 @@
 {
-  "presets": ["@babel/preset-env"]
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
 }

binderhub/app.py

@@ -42,15 +42,15 @@
 )
 from traitlets.config import Application
 
-from .base import AboutHandler, Custom404, VersionHandler
+from .base import VersionHandler
 from .build import BuildExecutor, KubernetesBuildExecutor, KubernetesCleaner
 from .builder import BuildHandler
-from .config import ConfigHandler
 from .events import EventLog
+from .handlers.repoproviders import RepoProvidersHandlers
 from .health import HealthHandler, KubernetesHealthHandler
 from .launcher import Launcher
 from .log import log_request
-from .main import LegacyRedirectHandler, MainHandler, ParameterizedMainHandler
+from .main import LegacyRedirectHandler, RepoLaunchUIHandler, UIHandler
 from .metrics import MetricsHandler
 from .quota import KubernetesLaunchQuota, LaunchQuota
 from .ratelimit import RateLimiter
@@ -107,6 +107,11 @@ def _log_level(self):
         None,
         allow_none=True,
         help="""
+        ..deprecated::
+
+        No longer supported. If you want to use Google Analytics, use :attr:`extra_footer_scripts`
+        to load JS from Google Analytics.
+
         The Google Analytics code to use on the main page.
 
         Note that we'll respect Do Not Track settings, despite the fact that GA does not.
@@ -118,6 +123,11 @@ def _log_level(self):
     google_analytics_domain = Unicode(
         "auto",
         help="""
+        ..deprecated::
+
+        No longer supported. If you want to use Google Analytics, use :attr:`extra_footer_scripts`
+        to load JS from Google Analytics.
+
         The Google Analytics domain to use on the main page.
 
         By default this is set to 'auto', which sets it up for current domain and all
@@ -126,6 +136,13 @@ def _log_level(self):
         config=True,
     )
 
+    @observe("google_analytics_domain", "google_analytics_code")
+    def _google_analytics_deprecation(self, change):
+        if change.new:
+            raise ValueError(
+                f"Setting {change.owner.__class__.__name__}.{change.name} is no longer supported. Use {change.owner.__class__.__name__}.extra_footer_scripts to load Google Analytics JS directly"
+            )
+
     about_message = Unicode(
         "",
         help="""
@@ -785,7 +802,6 @@ def _template_path_default(self):
             - /versions
             - /build/([^/]+)/(.+)
             - /health
-            - /_config
             - /* -> shows a 404 page
         """,
         config=True,
@@ -931,8 +947,6 @@ def initialize(self, *args, **kwargs):
                 "registry": registry,
                 "traitlets_config": self.config,
                 "traitlets_parent": self,
-                "google_analytics_code": self.google_analytics_code,
-                "google_analytics_domain": self.google_analytics_domain,
                 "about_message": self.about_message,
                 "banner_message": self.banner_message,
                 "extra_footer_scripts": self.extra_footer_scripts,
@@ -961,15 +975,23 @@ def initialize(self, *args, **kwargs):
             (r"/versions", VersionHandler),
             (r"/build/([^/]+)/(.+)", BuildHandler),
             (r"/health", self.health_handler_class, {"hub_url": self.hub_url_local}),
-            (r"/_config", ConfigHandler),
+            (r"/api/repoproviders", RepoProvidersHandlers),
         ]
         if not self.enable_api_only_mode:
             # In API only mode the endpoints in the list below
-            # are unregistered as they don't make sense in a API only scenario
+            # are not registered since they are primarily about providing UI
+
+            for provider_id in self.repo_providers:
+                # Register launchable URLs for all our repo providers
+                # These render social previews, but otherwise redirect to UIHandler
+                handlers += [
+                    (
+                        rf"/v2/({provider_id})/(.+)",
+                        RepoLaunchUIHandler,
+                        {"repo_provider": self.repo_providers[provider_id]},
+                    )
+                ]
             handlers += [
-                (r"/about", AboutHandler),
-                (r"/v2/([^/]+)/(.+)", ParameterizedMainHandler),
-                (r"/", MainHandler),
                 (r"/repo/([^/]+)/([^/]+)(/.*)?", LegacyRedirectHandler),
                 # for backward-compatible mybinder.org badge URLs
                 # /assets/images/badge.svg
@@ -1036,9 +1058,8 @@ def initialize(self, *args, **kwargs):
                         )
                     },
                 ),
+                (r"/.*", UIHandler),
             ]
-        # This needs to be the last handler in the list, because it needs to match "everything else"
-        handlers.append((r".*", Custom404))
         handlers = self.add_url_prefix(self.base_url, handlers)
         if self.extra_static_path:
             handlers.insert(

binderhub/base.py

@@ -2,7 +2,6 @@
 
 import json
 import urllib.parse
-from http.client import responses
 
 import jwt
 from jupyterhub.services.auth import HubOAuth, HubOAuthenticated
@@ -204,47 +203,10 @@ def extract_message(self, exc_info):
         except Exception:
             return ""
 
-    def write_error(self, status_code, **kwargs):
-        exc_info = kwargs.get("exc_info")
-        message = ""
-        status_message = responses.get(status_code, "Unknown HTTP Error")
-        if exc_info:
-            message = self.extract_message(exc_info)
-
-        self.render_template(
-            "error.html",
-            status_code=status_code,
-            status_message=status_message,
-            message=message,
-        )
-
     def options(self, *args, **kwargs):
         pass
 
 
-class Custom404(BaseHandler):
-    """Raise a 404 error, rendering the error.html template"""
-
-    def prepare(self):
-        raise web.HTTPError(404)
-
-
-class AboutHandler(BaseHandler):
-    """Serve the about page"""
-
-    async def get(self):
-        self.render_template(
-            "about.html",
-            base_url=self.settings["base_url"],
-            submit=False,
-            binder_version=binder_version,
-            message=self.settings["about_message"],
-            google_analytics_code=self.settings["google_analytics_code"],
-            google_analytics_domain=self.settings["google_analytics_domain"],
-            extra_footer_scripts=self.settings["extra_footer_scripts"],
-        )
-
-
 class VersionHandler(BaseHandler):
     """Serve information about versions running"""
 

binderhub/handlers/repoproviders.py

@@ -0,0 +1,15 @@
+import json
+
+from ..base import BaseHandler
+
+
+class RepoProvidersHandlers(BaseHandler):
+    """Serve config"""
+
+    async def get(self):
+        config = [
+            repo_provider_class.display_config
+            for repo_provider_class in self.settings["repo_providers"].values()
+        ]
+        self.set_header("Content-type", "application/json")
+        self.write(json.dumps(config))