Bugfix/react18 navigation issues

shell-ui/package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@scality/core-ui": "0.155.0",
-    "@scality/module-federation": "^1.4.0",
+    "@scality/module-federation": "^1.4.1",
     "downshift": "^8.0.0",
     "history": "^5.3.0",
     "jest-environment-jsdom": "^29.7.0",

shell-ui/src/FederatedApp.tsx

@@ -8,10 +8,17 @@ import {
   FederatedComponentProps,
   SolutionUI,
 } from '@scality/module-federation';
-import React, { useEffect, useMemo } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useTransition,
+  useRef,
+  useState,
+} from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { QueryClient } from 'react-query';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, useLocation } from 'react-router';
 
 import { loadShare } from '@module-federation/enhanced/runtime';
 import { useQuery } from 'react-query';
@@ -229,6 +236,9 @@ function InternalApp() {
         loadShareModule('@scality/module-federation'),
       ]);
     },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
   });
 
   return (

shell-ui/src/navbar/NavBar.tsx

@@ -122,30 +122,6 @@ const Link = ({
   );
 };
 
-function prefetch(url: string) {
-  return new Promise((resolve, reject) => {
-    const existingElement = [
-      ...(document.head?.querySelectorAll('script') || []),
-      // @ts-expect-error - FIXME when you are working on it
-    ].find((scriptElement) => scriptElement.attributes.src?.value === url);
-
-    if (existingElement) {
-      // @ts-expect-error - FIXME when you are working on it
-      resolve();
-    }
-
-    const script = document.createElement('script');
-    script.src = url;
-    script.async = true;
-    script.onload = (evt) => {
-      script.setAttribute('data-loaded', 'true');
-      resolve(evt);
-    };
-    script.onerror = reject;
-    document.head?.appendChild(script);
-  });
-}
-
 export const useNavbarLinksToActions = (
   links: TypeLink[],
 ): {
@@ -154,8 +130,8 @@ export const useNavbarLinksToActions = (
 }[] => {
   const location = useLocation();
   const doesRouteMatch = useCallback(
-    (path: RouteProps) => {
-      return matchPath(path.path + '*', location.pathname);
+    ({ path, exact }: { path: string; exact: boolean }) => {
+      return matchPath(path + (exact ? '' : '*'), location.pathname);
     },
     [location],
   );
@@ -181,6 +157,7 @@ export const useNavbarLinksToActions = (
     .find((link) =>
       link.view.isFederated
         ? doesRouteMatch({
+            exact: link.view.view.exact,
             path: link.view.view.activeIfMatches
               ? new RegExp(
                   link.view.app.appHistoryBasePath +

shell-ui/src/navbar/NavbarUpdaterComponents.tsx

@@ -9,6 +9,12 @@ import { useConfigRetriever } from '../initFederation/ConfigurationProviders';
 import { useDeployedApps } from '../initFederation/UIListProvider';
 import { useNotificationCenter } from '../useNotificationCenter';
 import { useNavbar } from './navbarHooks';
+import {
+  ShellAlerts,
+  shellAlerts,
+  ShellHooks,
+  shellHooks,
+} from '../hooks/useShellHooks';
 
 export const NavbarUpdaterComponents = () => {
   const deployedApps = useDeployedApps();
@@ -41,7 +47,16 @@ export const NavbarUpdaterComponents = () => {
       {componentsToFederate.map((component, index) => {
         return (
           <Fragment key={index}>
-            <ErrorBoundary FallbackComponent={() => <></>}>
+            <ErrorBoundary
+              FallbackComponent={(props) => {
+                console.error(
+                  'error while loading navbar updater component',
+                  component,
+                  props,
+                );
+                return <></>;
+              }}
+            >
               <FederatedComponent
                 key={component.module}
                 url={`${component.app.url}${component.remoteEntryPath}?version=${component.app.version}`}
@@ -54,6 +69,8 @@ export const NavbarUpdaterComponents = () => {
                   unPublishNotification: unPublish,
                   isFirstTimeLogin: firstTimeLogin,
                   userData,
+                  shellHooks,
+                  shellAlerts,
                 }}
               />
             </ErrorBoundary>

ui/package.json

@@ -8,7 +8,7 @@
     "@js-temporal/polyfill": "^0.4.4",
     "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721",
     "@scality/core-ui": "0.155.0",
-    "@scality/module-federation": "^1.4.0",
+    "@scality/module-federation": "^1.4.1",
     "axios": "^0.21.1",
     "formik": "2.2.5",
     "jsonpath": "^1.1.1",

ui/src/containers/DashboardPage.tsx

@@ -9,7 +9,6 @@ import DashboardServices from '../components/DashboardServices';
 import DashboardGlobalHealth from '../components/DashboardGlobalHealth';
 import TimespanSelector from './TimespanSelector';
 import DashboardNetwork from '../components/DashboardNetwork';
-import { Outlet } from 'react-router';
 
 const DashboardGrid = styled.div`
   display: grid;