Memory routing to fix JupyterLab extension

.env.example

@@ -20,6 +20,7 @@ REACT_APP_STYLE_TYPE=green-accent
 REACT_APP_CONTEXT=webapp
 REACT_APP_SHOW_AUTH_BUTTON=true
 REACT_APP_LOGOUT_PAGE_URL=http://localhost:8080/conda-store/logout?next=/
+REACT_APP_ROUTER_TYPE=browser
 
 # If you want to use a version other than the pinned conda-store-server version
 # Set the CONDA_STORE_SERVER_VERSION to the package version that you want

src/App.tsx

@@ -1,15 +1,19 @@
 import { ThemeProvider } from "@mui/material";
 import React from "react";
 import { Provider } from "react-redux";
-import { RouterProvider } from "react-router-dom";
-
+import {
+  RouterProvider,
+  createBrowserRouter,
+  createMemoryRouter
+} from "react-router-dom";
 import {
   IPreferences,
   PrefContext,
   prefDefault,
   prefGlobal
 } from "./preferences";
-import { router } from "./routes";
+import { routes } from "./routes";
+
 import { store } from "./store";
 import { condaStoreTheme, grayscaleTheme } from "./theme";
 
@@ -64,6 +68,11 @@ export class App<
   // }
 
   render(): React.ReactNode {
+    const router =
+      this.state.pref.routerType === "memory"
+        ? createMemoryRouter(routes, { initialEntries: ["/"] })
+        : createBrowserRouter(routes);
+
     return (
       <PrefContext.Provider value={this.state.pref}>
         <ThemeProvider

src/preferences.tsx

@@ -8,6 +8,13 @@ export interface IPreferences {
   styleType: string;
   showAuthButton: boolean;
   logoutUrl: string;
+
+  // routerType - Should the app use the browser's history API for routing, or
+  // should app routes be handled internally in memory? This is needed for the
+  // JupyterLab extension because when conda-store-ui is embedded in JupyterLab,
+  // the URL routes in the browser address bar are for JupyterLab, not for
+  // conda-store-ui.
+  routerType: "browser" | "memory";
 }
 
 const { condaStoreConfig = {} } =
@@ -49,7 +56,12 @@ export const prefDefault: Readonly<IPreferences> = {
   logoutUrl:
     process.env.REACT_APP_LOGOUT_PAGE_URL ??
     condaStoreConfig.REACT_APP_LOGOUT_PAGE_URL ??
-    "http://localhost:8080/conda-store/logout?next=/"
+    "http://localhost:8080/conda-store/logout?next=/",
+
+  routerType:
+    process.env.REACT_APP_ROUTER_TYPE ??
+    condaStoreConfig.REACT_APP_ROUTER_TYPE ??
+    "browser"
 };
 
 export class Preferences implements IPreferences {
@@ -85,6 +97,10 @@ export class Preferences implements IPreferences {
     return this._logoutUrl;
   }
 
+  get routerType() {
+    return this._routerType;
+  }
+
   set(pref: IPreferences) {
     this._apiUrl = pref.apiUrl;
     this._authMethod = pref.authMethod;
@@ -93,6 +109,7 @@ export class Preferences implements IPreferences {
     this._styleType = pref.styleType;
     this._showAuthButton = pref.showAuthButton;
     this._logoutUrl = pref.logoutUrl;
+    this._routerType = pref.routerType;
   }
 
   private _apiUrl: IPreferences["apiUrl"];
@@ -102,6 +119,7 @@ export class Preferences implements IPreferences {
   private _styleType: IPreferences["styleType"];
   private _showAuthButton: IPreferences["showAuthButton"];
   private _logoutUrl: IPreferences["logoutUrl"];
+  private _routerType: IPreferences["routerType"];
 }
 
 export const prefGlobal = new Preferences();

src/routes.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { createBrowserRouter } from "react-router-dom";
 
 import { PageLayout } from "./layouts";
 import { EnvironmentDetails } from "./features/environmentDetails";
@@ -8,7 +7,8 @@ import { EnvironmentCreate } from "./features/environmentCreate";
 /**
  * Define URL routes for the single page app
  */
-export const router = createBrowserRouter([
+
+export const routes = [
   {
     path: "/",
     element: <PageLayout />,
@@ -23,4 +23,4 @@ export const router = createBrowserRouter([
       }
     ]
   }
-]);
+];