ui: Fix react18 navigation migration issues

Author: JBWatenbergScality

shell-ui/package-lock.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/package.json

@@ -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/FederatedApp.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>

shell-ui/src/navbar/NavbarUpdaterComponents.tsx

@@ -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/package-lock.json

@@ -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;