ARTESCA-13969 // Migration to React 18

shell-ui/package.json

@@ -22,14 +22,16 @@
     "@rspack/core": "^0.7.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.1.1",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.0.10",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
+    "@types/history": "^5.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.2.0",
-    "@types/styled-components": "^5.1.26",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "fs-extra": "^10.0.0",
@@ -39,24 +41,25 @@
     "jest-preview": "^0.3.1",
     "msw": "0.36.8",
     "node-fetch": "^2.6.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.3.1",
     "ts-node": "^10.9.2"
   },
   "dependencies": {
-    "@scality/core-ui": "0.151.0",
-    "@scality/module-federation": "^1.3.4",
+    "@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",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.2",
     "react-intl": "^5.15.3",
     "react-query": "^3.34.0",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
-    "styled-components": "^5.2.1",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0",
+    "styled-components": "^5.3.11",
     "typescript": "^5.6.3"
   }
 }

shell-ui/src/FederatedApp.tsx

@@ -1,72 +1,54 @@
 import { CoreUiThemeProvider } from '@scality/core-ui/dist/components/coreuithemeprovider/CoreUiThemeProvider';
 import { ErrorPage500 } from '@scality/core-ui/dist/components/error-pages/ErrorPage500.component';
+import { Loader } from '@scality/core-ui/dist/components/loader/Loader.component';
 import { ScrollbarWrapper } from '@scality/core-ui/dist/components/scrollbarwrapper/ScrollbarWrapper.component';
 import { ToastProvider } from '@scality/core-ui/dist/components/toast/ToastProvider';
 import {
   FederatedComponent,
   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 { Route, Router, Switch } from 'react-router-dom';
-import { Loader } from '@scality/core-ui/dist/components/loader/Loader.component';
+import {
+  BrowserRouter,
+  Route,
+  Routes,
+  Router,
+  unstable_HistoryRouter as HistoryRouter,
+} from 'react-router-dom';
 
-import NotificationCenterProvider, {
-  NotificationCenterContextType,
-} from './NotificationCenterProvider';
+import { loadShare } from '@module-federation/enhanced/runtime';
+import { useQuery } from 'react-query';
+import NotificationCenterProvider from './NotificationCenterProvider';
 import { AuthConfigProvider, useAuthConfig } from './auth/AuthConfigProvider';
 import { AuthProvider, useAuth } from './auth/AuthProvider';
 import { FirstTimeLoginProvider } from './auth/FirstTimeLoginProvider';
+import {
+  ShellAlerts,
+  shellAlerts,
+  ShellHooks,
+  shellHooks,
+} from './hooks/useShellHooks';
 import './index.css';
 import {
   ConfigurationProvider,
   FederatedView,
   useConfigRetriever,
-  useConfig,
   useDiscoveredViews,
-  useLinkOpener,
-  BuildtimeWebFinger,
-  RuntimeWebFinger,
 } from './initFederation/ConfigurationProviders';
 import {
   ShellConfigProvider,
   useShellConfig,
 } from './initFederation/ShellConfigProvider';
 import { ShellHistoryProvider } from './initFederation/ShellHistoryProvider';
-import {
-  ShellThemeSelectorProvider,
-  useShellThemeSelector,
-} from './initFederation/ShellThemeSelectorProvider';
-import {
-  UIListProvider,
-  useDeployedApps,
-} from './initFederation/UIListProvider';
+import { ShellThemeSelectorProvider } from './initFederation/ShellThemeSelectorProvider';
+import { UIListProvider } from './initFederation/UIListProvider';
 import { SolutionsNavbar } from './navbar';
 import { LanguageProvider, useLanguage } from './navbar/lang';
-import AlertProvider from './alerts/AlertProvider';
-import {
-  getAlertingAlertSelectors,
-  getAuthenticationAlertSelectors,
-  getBootstrapAlertSelectors,
-  getDashboardingAlertSelectors,
-  getIngressControllerAlertSelectors,
-  getK8SMasterAlertSelectors,
-  getLoggingAlertSelectors,
-  getMonitoringAlertSelectors,
-  getNetworksAlertSelectors,
-  getNodesAlertSelectors,
-  getPlatformAlertSelectors,
-  getServicesAlertSelectors,
-  getVolumesAlertSelectors,
-  useAlerts,
-  useHighestSeverityAlerts,
-} from './alerts';
-import { useHistory } from 'react-router';
-import { useQuery, UseQueryResult } from 'react-query';
-import { loadShare } from '@module-federation/enhanced/runtime';
+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.
@@ -86,95 +68,9 @@ const loadShareModule =
 
 export const queryClient = new QueryClient();
 
-export type ShellTypes = {
-  shellHooks: {
-    useAuthConfig: typeof useAuthConfig;
-    useAuth: typeof useAuth;
-    useConfigRetriever: typeof useConfigRetriever;
-    useDiscoveredViews: typeof useDiscoveredViews;
-    useShellConfig: typeof useShellConfig;
-    useLanguage: typeof useLanguage;
-    useConfig: typeof useConfig;
-    useLinkOpener: typeof useLinkOpener;
-    useDeployedApps: typeof useDeployedApps;
-    useShellThemeSelector: typeof useShellThemeSelector;
-  };
-  shellAlerts: {
-    AlertsProvider: typeof AlertProvider;
-    hooks: {
-      useAlerts: typeof useAlerts;
-      useHighestSeverityAlerts: typeof useHighestSeverityAlerts;
-    };
-    alertSelectors: {
-      getPlatformAlertSelectors: typeof getPlatformAlertSelectors;
-      getNodesAlertSelectors: typeof getNodesAlertSelectors;
-      getVolumesAlertSelectors: typeof getVolumesAlertSelectors;
-      getNetworksAlertSelectors: typeof getNetworksAlertSelectors;
-      getServicesAlertSelectors: typeof getServicesAlertSelectors;
-      getK8SMasterAlertSelectors: typeof getK8SMasterAlertSelectors;
-      getBootstrapAlertSelectors: typeof getBootstrapAlertSelectors;
-      getMonitoringAlertSelectors: typeof getMonitoringAlertSelectors;
-      getAlertingAlertSelectors: typeof getAlertingAlertSelectors;
-      getLoggingAlertSelectors: typeof getLoggingAlertSelectors;
-      getDashboardingAlertSelectors: typeof getDashboardingAlertSelectors;
-      getIngressControllerAlertSelectors: typeof getIngressControllerAlertSelectors;
-      getAuthenticationAlertSelectors: typeof getAuthenticationAlertSelectors;
-    };
-  };
-};
-
-declare global {
-  interface Window {
-    shellContexts: {
-      ShellHistoryContext: React.Context<ReturnType<typeof useHistory> | null>;
-      NotificationContext: React.Context<null | NotificationCenterContextType>;
-      WebFingersContext: React.Context<
-        | null
-        | UseQueryResult<
-            BuildtimeWebFinger | RuntimeWebFinger<Record<string, unknown>>,
-            unknown
-          >[]
-      >;
-    };
-    shellHooks: ShellTypes['shellHooks'];
-    shellAlerts: ShellTypes['shellAlerts'];
-  }
-}
-
-window.shellHooks = {
-  useAuthConfig,
-  useAuth,
-  useConfigRetriever,
-  useDiscoveredViews,
-  useShellConfig,
-  useLanguage,
-  useConfig,
-  useLinkOpener: useLinkOpener,
-  useDeployedApps: useDeployedApps,
-  useShellThemeSelector: useShellThemeSelector,
-};
-
-window.shellAlerts = {
-  AlertsProvider: AlertProvider,
-  hooks: {
-    useAlerts: useAlerts,
-    useHighestSeverityAlerts: useHighestSeverityAlerts,
-  },
-  alertSelectors: {
-    getPlatformAlertSelectors: getPlatformAlertSelectors,
-    getNodesAlertSelectors: getNodesAlertSelectors,
-    getVolumesAlertSelectors: getVolumesAlertSelectors,
-    getNetworksAlertSelectors: getNetworksAlertSelectors,
-    getServicesAlertSelectors: getServicesAlertSelectors,
-    getK8SMasterAlertSelectors: getK8SMasterAlertSelectors,
-    getBootstrapAlertSelectors: getBootstrapAlertSelectors,
-    getMonitoringAlertSelectors: getMonitoringAlertSelectors,
-    getAlertingAlertSelectors: getAlertingAlertSelectors,
-    getLoggingAlertSelectors: getLoggingAlertSelectors,
-    getDashboardingAlertSelectors: getDashboardingAlertSelectors,
-    getIngressControllerAlertSelectors: getIngressControllerAlertSelectors,
-    getAuthenticationAlertSelectors: getAuthenticationAlertSelectors,
-  },
+export type FederatedAppProps = {
+  shellHooks: ShellHooks;
+  shellAlerts: ShellAlerts;
 };
 
 function FederatedRoute({
@@ -230,6 +126,11 @@ function ProtectedFederatedRoute({
   const { userData } = useAuth();
   const { retrieveConfiguration } = useConfigRetriever();
 
+  const federatedAppProps: FederatedAppProps = {
+    shellHooks,
+    shellAlerts,
+  };
+
   if (
     userData &&
     (groups?.some((group) => userData.groups.includes(group)) ?? true)
@@ -242,7 +143,7 @@ function ProtectedFederatedRoute({
       <FederatedComponent
         url={`${app.url}${appBuildConfig?.spec.remoteEntryPath}?version=${app.version}`}
         module={module}
-        props={{}}
+        props={federatedAppProps}
         scope={scope}
         app={app}
       />
@@ -255,6 +156,7 @@ function ProtectedFederatedRoute({
 function InternalRouter() {
   const discoveredViews = useDiscoveredViews();
   const { retrieveConfiguration } = useConfigRetriever();
+
   const routes = useMemo(
     () =>
       (
@@ -287,52 +189,39 @@ function InternalRouter() {
           exact: view.exact,
           strict: view.strict,
           sensitive: view.sensitive,
-          component: () => {
-            const federatedAppHistory = useMemo(
-              () =>
-                createBrowserHistory({
-                  basename: app.appHistoryBasePath,
-                }),
-              [],
-            );
-            return (
-              <Router history={federatedAppHistory} 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}
-                />
-              </Router>
-            );
-          },
+          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 (
-    <>
-      <Switch>
-        {routes.map((route) => (
-          <Route key={route.path} {...route} />
-        ))}
-      </Switch>
-    </>
+    <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 () => {
@@ -349,7 +238,7 @@ function InternalApp() {
   });
 
   return (
-    <Router history={history}>
+    <BrowserRouter>
       <ShellHistoryProvider>
         <FirstTimeLoginProvider>
           <NotificationCenterProvider>
@@ -365,7 +254,7 @@ function InternalApp() {
           </NotificationCenterProvider>
         </FirstTimeLoginProvider>
       </ShellHistoryProvider>
-    </Router>
+    </BrowserRouter>
   );
 }
 
@@ -391,6 +280,7 @@ const AppProviderWrapper = () => {
   return (
     <ErrorBoundary
       FallbackComponent={({ error }) => {
+        console.log('error', error);
         if ('en' in error && 'fr' in error) {
           return (
             <ErrorPage500