Add routing support and refactor PrivateRoute component

scality · Dec 2, 2024 · fcfd42e · fcfd42e
1 parent 7129943
commit fcfd42e
Show file tree

Hide file tree

Showing 13 changed files with 309 additions and 371 deletions.
diff --git a/shell-ui/package-lock.json b/shell-ui/package-lock.json
diff --git a/shell-ui/package.json b/shell-ui/package.json
@@ -25,6 +25,7 @@
     "@testing-library/react": "^15.0.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.0.10",
+    "@types/history": "^5.0.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
@@ -44,9 +45,10 @@
     "ts-node": "^10.9.2"
   },
   "dependencies": {
-    "@scality/core-ui": "git+https://github.com/scality/core-ui#bf0c36da657737f47dabe310bb1a20c136877970",
+    "@scality/core-ui": "git+https://github.com/scality/core-ui#33e22729ee7317f5afecb79f06b4f873dc3e376d",
     "@scality/module-federation": "git+https://github.com/scality/module-federation#c571388783a2a51ae3bf5d36ae66753c8b014bb5",
     "downshift": "^8.0.0",
+    "history": "^5.3.0",
     "jest-environment-jsdom": "^29.7.0",
     "oidc-client-ts": "^3.0.1",
     "oidc-react": "^3.2.2",

diff --git a/shell-ui/src/FederatedApp.tsx b/shell-ui/src/FederatedApp.tsx
@@ -8,11 +8,16 @@ import {
   FederatedComponentProps,
   SolutionUI,
 } from '@scality/module-federation';
-import { createBrowserHistory } from 'history';
 import React, { useEffect, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { BrowserRouter, Route, Router, Routes } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Route,
+  Routes,
+  Router,
+  unstable_HistoryRouter as HistoryRouter,
+} from 'react-router-dom';
 
 import { loadShare } from '@module-federation/enhanced/runtime';
 import { useQuery } from 'react-query';
@@ -42,6 +47,8 @@ import { ShellThemeSelectorProvider } from './initFederation/ShellThemeSelectorP
 import { UIListProvider } from './initFederation/UIListProvider';
 import { SolutionsNavbar } from './navbar';
 import { LanguageProvider, useLanguage } from './navbar/lang';
+import { createBrowserHistory } from 'history';
+import { Navbar as CoreUINavbar } from '@scality/core-ui/dist/components/navbar/Navbar.component';
 
 /**
  * This is a mock function to replace the real loadShare function when running tests.
@@ -149,6 +156,7 @@ function ProtectedFederatedRoute({
 function InternalRouter() {
   const discoveredViews = useDiscoveredViews();
   const { retrieveConfiguration } = useConfigRetriever();
+
   const routes = useMemo(
     () =>
       (
@@ -181,52 +189,39 @@ function InternalRouter() {
           exact: view.exact,
           strict: view.strict,
           sensitive: view.sensitive,
-          component: () => {
-            const federatedAppHistory = useMemo(
-              () =>
-                createBrowserHistory({
-                  basename: app.appHistoryBasePath,
-                }),
-              [],
-            );
-            return (
-              <BrowserRouter key={app.name}>
-                <FederatedRoute
-                  url={
-                    app.url +
-                    retrieveConfiguration<'build'>({
-                      configType: 'build',
-                      name: app.name,
-                    })?.spec.remoteEntryPath
-                  }
-                  module={view.module}
-                  scope={view.scope}
-                  app={app}
-                  groups={groups}
-                />
-              </BrowserRouter>
-            );
-          },
+          element: (
+            <FederatedRoute
+              url={
+                app.url +
+                retrieveConfiguration<'build'>({
+                  configType: 'build',
+                  name: app.name,
+                })?.spec.remoteEntryPath
+              }
+              module={view.module}
+              scope={view.scope}
+              app={app}
+              groups={groups}
+            />
+          ),
         })),
     [JSON.stringify(discoveredViews)],
   );
+
   return (
-    <>
-      <Routes>
-        {routes.map((route) => (
-          <Route key={route.path} {...route} />
-        ))}
-      </Routes>
-    </>
+    <Routes>
+      {routes.map((route) => (
+        <Route
+          key={route.path}
+          path={`${route.path}*`}
+          element={route.element}
+        />
+      ))}
+    </Routes>
   );
 }
 
 function InternalApp() {
-  const history = useMemo(() => {
-    const history = createBrowserHistory({});
-    return history;
-  }, []);
-
   const { status } = useQuery({
     queryKey: ['load-share-deps'],
     queryFn: async () => {
@@ -285,6 +280,7 @@ const AppProviderWrapper = () => {
   return (
     <ErrorBoundary
       FallbackComponent={({ error }) => {
+        console.log('error', error);
         if ('en' in error && 'fr' in error) {
           return (
             <ErrorPage500

diff --git a/shell-ui/src/index.tsx b/shell-ui/src/index.tsx
@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import App from './FederatedApp';
+import { BrowserRouter } from 'react-router-dom';
 
 const rootElement = document.getElementById('app');