From 0cb7011b83f3b1fa4303f1896d183d5f4366a6a4 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Mon, 21 Oct 2024 06:30:43 -0400
Subject: [PATCH] Add config option REACT_APP_URL_BASENAME (#431)

* Add config option REACT_APP_URL_BASENAME

* update preferences class
---
 .env.example        |  5 +++++
 src/App.tsx         |  6 ++++--
 src/preferences.tsx | 17 ++++++++++++++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/.env.example b/.env.example
index 2ae183ae..06203a2f 100644
--- a/.env.example
+++ b/.env.example
@@ -22,6 +22,11 @@ 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 need to mount the React app at some URL path other than "/". This value
+# is passed directly to React Router, see:
+# https://reactrouter.com/en/main/routers/create-browser-router#optsbasename
+# REACT_APP_URL_BASENAME="/conda-store"
+
 # 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
 # CONDA_STORE_SERVER_VERSION="2024.3.1"
diff --git a/src/App.tsx b/src/App.tsx
index e62cec36..7d534c14 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -68,10 +68,12 @@ export class App<
   // }
 
   render(): React.ReactNode {
+    const { routerType, urlBasename: basename } = this.state.pref;
+
     const router =
-      this.state.pref.routerType === "memory"
+      routerType === "memory"
         ? createMemoryRouter(routes, { initialEntries: ["/"] })
-        : createBrowserRouter(routes);
+        : createBrowserRouter(routes, { basename });
 
     return (
       <PrefContext.Provider value={this.state.pref}>
diff --git a/src/preferences.tsx b/src/preferences.tsx
index 34d0ba94..6365c40c 100644
--- a/src/preferences.tsx
+++ b/src/preferences.tsx
@@ -15,6 +15,10 @@ export interface IPreferences {
   // the URL routes in the browser address bar are for JupyterLab, not for
   // conda-store-ui.
   routerType: "browser" | "memory";
+
+  // urlBasename - Defaults to "/" but can be changed if the app needs to be
+  // mounted at a different URL path, such as "/conda-store"
+  urlBasename: string;
 }
 
 const { condaStoreConfig = {} } =
@@ -61,7 +65,12 @@ export const prefDefault: Readonly<IPreferences> = {
   routerType:
     process.env.REACT_APP_ROUTER_TYPE ??
     condaStoreConfig.REACT_APP_ROUTER_TYPE ??
-    "browser"
+    "browser",
+
+  urlBasename:
+    process.env.REACT_APP_URL_BASENAME ??
+    condaStoreConfig.REACT_APP_URL_BASENAME ??
+    "/"
 };
 
 export class Preferences implements IPreferences {
@@ -101,6 +110,10 @@ export class Preferences implements IPreferences {
     return this._routerType;
   }
 
+  get urlBasename() {
+    return this._urlBasename;
+  }
+
   set(pref: IPreferences) {
     this._apiUrl = pref.apiUrl;
     this._authMethod = pref.authMethod;
@@ -110,6 +123,7 @@ export class Preferences implements IPreferences {
     this._showAuthButton = pref.showAuthButton;
     this._logoutUrl = pref.logoutUrl;
     this._routerType = pref.routerType;
+    this._urlBasename = pref.urlBasename;
   }
 
   private _apiUrl: IPreferences["apiUrl"];
@@ -120,6 +134,7 @@ export class Preferences implements IPreferences {
   private _showAuthButton: IPreferences["showAuthButton"];
   private _logoutUrl: IPreferences["logoutUrl"];
   private _routerType: IPreferences["routerType"];
+  private _urlBasename: IPreferences["urlBasename"];
 }
 
 export const prefGlobal = new Preferences();