From 6f080b2849b43e465824de289ef2af908d33733a Mon Sep 17 00:00:00 2001
From: David Ormsbee <dave@axim.org>
Date: Mon, 2 Oct 2023 11:53:39 -0400
Subject: [PATCH 1/2] fix: make Tutor-MFE config compatible with React Router
 v6

As part of the React Router v5 -> v6 upgrade, history was no longer
being passed in. This broke the Tutor deployment method of MFEs, which
puts all the MFEs in a common server and uses different top-level dirs
to separate them.

The fix for this is to pass in an explicit basename to the Router.
---
 src/initialize.js         | 20 ++++++++++++++++++++
 src/react/AppProvider.jsx |  3 ++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/initialize.js b/src/initialize.js
index 36527b8eb..5e3ad240f 100644
--- a/src/initialize.js
+++ b/src/initialize.js
@@ -102,6 +102,26 @@ export const history = (typeof window !== 'undefined')
     basename: getPath(getConfig().PUBLIC_PATH),
   }) : createMemoryHistory();
 
+/**
+ * The string basename that is the root directory of this MFE.
+ *
+ * In devstack, this should always just return an empty string, because each MFE is in its own
+ * server/domain.
+ *
+ * In Tutor, all MFEs are deployed to a common server, each under a different top-level directory.
+ * The basename is the root path for a given MFE, e.g. "/library-authoring". It is set by tutor-mfe
+ * as an ENV variable in the Docker file, and we read it here from that configuration so that it
+ * can be passed into a Router later.
+ *
+ * By convention, our basenames do not have a trailing slash. So it's "/library-authoring", and not
+ * "/library-authoring/". Our configuration is inconsistent on this, so this function always strips
+ * off the trailing slash from any value entered in configuration.
+ */
+export function basename() {
+  const configBasename = getPath(getConfig().PUBLIC_PATH);
+  return configBasename.endsWith('/') ? configBasename.slice(0, -1) : configBasename;
+}
+
 /**
  * The default handler for the initialization lifecycle's `initError` phase.  Logs the error to the
  * LoggingService using `logError`
diff --git a/src/react/AppProvider.jsx b/src/react/AppProvider.jsx
index 4743fdfa0..6d430bf39 100644
--- a/src/react/AppProvider.jsx
+++ b/src/react/AppProvider.jsx
@@ -16,6 +16,7 @@ import {
   IntlProvider,
   LOCALE_CHANGED,
 } from '../i18n';
+import { basename } from '../initialize';
 
 /**
  * A wrapper component for React-based micro-frontends to initialize a number of common data/
@@ -72,7 +73,7 @@ export default function AppProvider({ store, children, wrapWithRouter }) {
         >
           <OptionalReduxProvider store={store}>
             {wrapWithRouter ? (
-              <Router>
+              <Router basename={basename()}>
                 {children}
               </Router>
             ) : children}

From 64f353933cb30440684419feba9400cd54e762c8 Mon Sep 17 00:00:00 2001
From: David Ormsbee <dave@axim.org>
Date: Tue, 3 Oct 2023 13:59:33 -0400
Subject: [PATCH 2/2] fix: remove slash trimming and rely on proper tutor-mfe
 config

---
 src/initialize.js         | 12 ++----------
 src/react/AppProvider.jsx |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/initialize.js b/src/initialize.js
index 5e3ad240f..2c7223595 100644
--- a/src/initialize.js
+++ b/src/initialize.js
@@ -105,22 +105,14 @@ export const history = (typeof window !== 'undefined')
 /**
  * The string basename that is the root directory of this MFE.
  *
- * In devstack, this should always just return an empty string, because each MFE is in its own
- * server/domain.
+ * In devstack, this should always just return "/", because each MFE is in its own server/domain.
  *
  * In Tutor, all MFEs are deployed to a common server, each under a different top-level directory.
  * The basename is the root path for a given MFE, e.g. "/library-authoring". It is set by tutor-mfe
  * as an ENV variable in the Docker file, and we read it here from that configuration so that it
  * can be passed into a Router later.
- *
- * By convention, our basenames do not have a trailing slash. So it's "/library-authoring", and not
- * "/library-authoring/". Our configuration is inconsistent on this, so this function always strips
- * off the trailing slash from any value entered in configuration.
  */
-export function basename() {
-  const configBasename = getPath(getConfig().PUBLIC_PATH);
-  return configBasename.endsWith('/') ? configBasename.slice(0, -1) : configBasename;
-}
+export const basename = getPath(getConfig().PUBLIC_PATH);
 
 /**
  * The default handler for the initialization lifecycle's `initError` phase.  Logs the error to the
diff --git a/src/react/AppProvider.jsx b/src/react/AppProvider.jsx
index 6d430bf39..a2ccd8bb1 100644
--- a/src/react/AppProvider.jsx
+++ b/src/react/AppProvider.jsx
@@ -73,7 +73,7 @@ export default function AppProvider({ store, children, wrapWithRouter }) {
         >
           <OptionalReduxProvider store={store}>
             {wrapWithRouter ? (
-              <Router basename={basename()}>
+              <Router basename={basename}>
                 {children}
               </Router>
             ) : children}