ARTESCA-13972 // Migration to React 18

refactor: update imports to use ShellHooksContext for authentication

refactor: replace useAuth imports with useShellHooks for improved context management

refactor: replace history.push with navigate for improved routing consistency

fix: correct typo in workflows route and adjust account creation routes for consistency

refactor: update type definitions to use React 18 JSX runtime and improve context imports

refactor: replace history.replace with navigate for improved routing consistency

refactor: replace history.location with useLocation for improved routing consistency

fix useBasenameAndRelativeNavigate

refactor: update routing links to use basePath for consistency and improve navigation

refactor: update import paths for IconHelp and adjust route paths for improved consistency

feat: add QueryClientProvider and enhance routing with accountName parameter; update mocks and improve navigation consistency

refactor: update imports for QueryClientProvider and enhance routing consistency with basePath in navigation links

refactor: update import for QueryClientProvider in VeeamWelcomeModal test file to enhance consistency with other components

refactor: remove unused RemoteKeys type definition, update imports to use useShellHooks for authentication, and enhance routing consistency with useLocation and useBasenameRelativeNavigate

refactor: update imports from 'react-router-dom' to 'react-router' for improved consistency across components and enhance routing practices

refactor: streamline routing and import practices across components; remove console.log, enhance test consistency, and update path definitions for improved clarity

refactor: enhance test structure and consistency by updating imports, utilizing NewWrapper for rendering, and improving component interactions across various LocationDetails tests

refactor: update test implementations to use screen and container for element queries, enhance rendering with NewWrapper, and improve consistency in LocationDetails and Properties tests

refactor: streamline test implementations by replacing deprecated element queries with container queries, enhance consistency in LocationDetails tests, and improve error handling in action dispatch tests

refactor: update imports in multiple components to include JSX for improved type support and consistency across the application

refactor: update imports across multiple components to include JSX for improved type support and consistency in the application

refactor: update path matching in InternalRoutes to enforce strict matching, and add JSX imports in Breadcrumb and storageOptions for improved type support and consistency

refactor: enhance LocationDetailsNFS tests by updating imports, improving element queries for better consistency, and ensuring proper rendering with NewWrapper; removed deprecated value checks in favor of presence checks

refactor: enhance locations tests by adding ShellHooksProvider for improved context management, updating imports for mock utilities, and ensuring proper promise handling for asynchronous operations

refactor: enhance InternalRoutes path matching by adding support for properties and specific bucket names, improving route handling and consistency across account-related routes

feat: add new account management routes and update navigation paths for user and policy creation

refactor: update path properties in AttachmentTabs to use empty string instead of pathname for improved clarity and consistency in tab navigation

refactor: streamline test implementations by updating imports, enhancing element queries, and improving asynchronous handling across multiple test files

fix: handle optional messages in networkActivity reducer and update test case for ReauthDialog

refactor: update useShellHooks import to use @scality/module-federation

fix: update retrieveConfiguration call in CertificateDownloadButton

refactor: enhance jest setup with mockShellAlerts and mockShellHooks

chore: update @scality/core-ui to version 0.155.0 and @scality/module-federation to version 1.4.0

refactor: update useBasenameRelativeNavigate import to use @scality/module-federation

refactor: remove unused ShellHooksContext and update jest timeouts to 18 seconds for improved test reliability

refactor: update @scality/module-federation mock to use actual router's useNavigate

refactor: update test cases in Attachments.test.tsx for clarity and consistency; modify HeaderButtons and Breadcrumb components to improve pathname matching

refactor: enhance routing consistency by updating bucket navigation paths and internal route matching for account-related routes

refactor: reorganize imports and streamline routing in AccountContent and Breadcrumb components for improved consistency and clarity

.gitignore

@@ -12,3 +12,4 @@ coverage
 .DS_Store
 
 build
+build_ts/

@mf-types/shell/App.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/FederatedApp';
+export { default } from './compiled-types/src/FederatedApp';

@mf-types/shell/compiled-types/src/FederatedApp.d.ts

@@ -1,67 +1,13 @@
 import React from 'react';
 import { QueryClient } from 'react-query';
-import { NotificationCenterContextType } from './NotificationCenterProvider';
-import { useAuthConfig } from './auth/AuthConfigProvider';
-import { useAuth } from './auth/AuthProvider';
+import { ShellAlerts, ShellHooks } from './hooks/useShellHooks';
 import './index.css';
-import { useConfigRetriever, useConfig, useDiscoveredViews, useLinkOpener, BuildtimeWebFinger, RuntimeWebFinger } from './initFederation/ConfigurationProviders';
-import { useShellConfig } from './initFederation/ShellConfigProvider';
-import { useShellThemeSelector } from './initFederation/ShellThemeSelectorProvider';
-import { useDeployedApps } from './initFederation/UIListProvider';
-import { 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 { UseQueryResult } from 'react-query';
 export declare const queryClient: 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;
-        };
-    };
+export type FederatedAppProps = {
+    shellHooks: ShellHooks;
+    shellAlerts: ShellAlerts;
 };
-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'];
-    }
-}
 export declare function WithInitFederationProviders({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
-export default function App(): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export default function App(): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/NotificationCenterProvider.d.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch } from 'react';
+import { Dispatch, FC, ReactNode } from 'react';
 export type Notification = {
     id: string;
     title: string;
@@ -14,7 +14,10 @@ export type NotificationCenterContextType = {
     notifications: InternalNotification[];
     dispatch: Dispatch<NotificationCenterActions>;
 };
-export declare const NotificationCenterContext: React.Context<NotificationCenterContextType>;
+export declare const NotificationCenterContext: import("react").Context<NotificationCenterContextType>;
+type NotificationCenterProviderProps = {
+    children: ReactNode;
+};
 export declare enum NotificationActionType {
     PUBLISH = 0,
     UNPUBLISH = 1,
@@ -29,7 +32,5 @@ export type NotificationCenterActions = {
 } | {
     type: NotificationActionType.READ_ALL;
 };
-declare const NotificationCenterProvider: ({ children }: {
-    children: any;
-}) => JSX.Element;
+declare const NotificationCenterProvider: FC<NotificationCenterProviderProps>;
 export default NotificationCenterProvider;

@mf-types/shell/compiled-types/src/QueryClientProvider.d.ts

@@ -0,0 +1,6 @@
+import { QueryClient } from 'react-query';
+export declare const QueryClientProvider: React.ComponentType<{
+    client: QueryClient;
+    contextSharing?: boolean;
+    children?: React.ReactNode;
+}>;

@mf-types/shell/compiled-types/src/alerts/AlertProvider.d.ts

@@ -9,4 +9,4 @@ import React from 'react';
 export default function AlertProvider({ alertManagerUrl, children, }: {
     alertManagerUrl: string;
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/alerts/alertContext.d.ts

@@ -1 +1 @@
-export declare const AlertContext: any;
+export declare const AlertContext: import("react").Context<any>;

@mf-types/shell/compiled-types/src/alerts/alertHooks.d.ts

@@ -23,4 +23,4 @@ export declare const useHighestSeverityAlerts: (filters: FilterLabels) => Alert[
  *
  * @returns react query result
  */
-export declare function useAlerts(filters: FilterLabels): any;
+export declare function useAlerts(filters?: FilterLabels): any;

@mf-types/shell/compiled-types/src/auth/AuthConfigProvider.d.ts

@@ -6,4 +6,4 @@ export declare const useAuthConfig: () => {
 };
 export declare function AuthConfigProvider({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/auth/AuthProvider.d.ts

@@ -2,7 +2,7 @@ import { User } from 'oidc-client-ts';
 import React from 'react';
 export declare function AuthProvider({ children }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export type UserData = {
     token: string;
     username: string;

@mf-types/shell/compiled-types/src/auth/FirstTimeLoginProvider.d.ts

@@ -4,4 +4,4 @@ export declare const useFirstTimeLogin: () => {
 };
 export declare function FirstTimeLoginProvider({ children, }: {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/hooks/useShellHooks.d.ts

@@ -0,0 +1,47 @@
+import { useNotificationCenter } from '../useNotificationCenter';
+import { useAlerts, getPlatformAlertSelectors, getNodesAlertSelectors, getVolumesAlertSelectors, getNetworksAlertSelectors, getServicesAlertSelectors, getK8SMasterAlertSelectors, getBootstrapAlertSelectors, getMonitoringAlertSelectors, getAlertingAlertSelectors, getLoggingAlertSelectors, getDashboardingAlertSelectors, getIngressControllerAlertSelectors, getAuthenticationAlertSelectors, useHighestSeverityAlerts } from '../alerts';
+import AlertProvider from '../alerts/AlertProvider';
+import { useAuthConfig } from '../auth/AuthConfigProvider';
+import { useAuth } from '../auth/AuthProvider';
+import { useConfig, useConfigRetriever, useDiscoveredViews, useLinkOpener } from '../initFederation/ConfigurationProviders';
+import { useShellConfig } from '../initFederation/ShellConfigProvider';
+import { useShellThemeSelector } from '../initFederation/ShellThemeSelectorProvider';
+import { useDeployedApps } from '../initFederation/UIListProvider';
+import { useLanguage } from '../navbar/lang';
+export type 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;
+    useNotificationCenter: typeof useNotificationCenter;
+};
+export type ShellAlerts = {
+    AlertsProvider: typeof AlertProvider;
+    alertHooks: {
+        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;
+    };
+};
+export declare const shellHooks: ShellHooks;
+export declare const shellAlerts: ShellAlerts;

@mf-types/shell/compiled-types/src/initFederation/ConfigurationProviders.d.ts

@@ -1,6 +1,7 @@
 import { IconName } from '@scality/core-ui/dist/components/icon/Icon.component';
 import { SolutionUI } from '@scality/module-federation';
 import React from 'react';
+import { UseQueryResult } from 'react-query';
 export type OAuth2ProxyConfig = {
     kind: 'OAuth2Proxy';
 };
@@ -90,6 +91,10 @@ export type NonFederatedView = {
     icon?: IconName;
 };
 export type ViewDefinition = FederatedView | NonFederatedView;
+export declare function useWebFingersStore(): {
+    state: UseQueryResult<BuildtimeWebFinger | RuntimeWebFinger<Record<string, unknown>>, unknown>[];
+    updateWebFingersState: (newState: UseQueryResult<BuildtimeWebFinger | RuntimeWebFinger<Record<string, unknown>>, unknown>[]) => void;
+};
 export declare function useDiscoveredViews(): ViewDefinition[];
 export declare const useLinkOpener: () => {
     openLink: (to: {
@@ -105,4 +110,4 @@ export declare const useLinkOpener: () => {
 };
 export declare const ConfigurationProvider: ({ children, }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/initFederation/ShellConfigProvider.d.ts

@@ -51,5 +51,5 @@ export declare const useShellConfig: () => ShellConfig;
 export declare const ShellConfigProvider: ({ shellConfigUrl, children }: {
     shellConfigUrl: any;
     children: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

@mf-types/shell/compiled-types/src/initFederation/ShellHistoryProvider.d.ts

@@ -1,4 +1,4 @@
-export declare const useShellHistory: () => import("history").History<unknown>;
+export declare const useShellHistory: () => import("react-router").NavigateFunction;
 export declare const ShellHistoryProvider: ({ children }: {
     children: any;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/initFederation/ShellThemeSelectorProvider.d.ts

@@ -13,5 +13,5 @@ export declare function useShellThemeSelector(): ThemeContextValues;
 export declare function ShellThemeSelectorProvider({ children, }: {
     children: (theme: CoreUITheme, themeName: ThemeMode) => React.ReactNode;
     onThemeChanged?: (evt: CustomEvent) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

@mf-types/shell/compiled-types/src/initFederation/UIListProvider.d.ts

@@ -13,4 +13,4 @@ export declare const useDeployedApps: (selectors?: {
 export declare const UIListProvider: ({ children, discoveryURL, }: {
     children: React.ReactNode;
     discoveryURL: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/InstanceName.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { UserData } from '../auth/AuthProvider';
-export declare const InstanceNameProvider: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+export declare const InstanceNameProvider: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
 export declare const useInstanceName: () => string;
 export declare const useInstanceNameAdapter: () => {
     remoteEntryUrl: string;
@@ -14,5 +14,5 @@ export declare const _InternalInstanceName: ({ moduleExports, }: {
             setInstanceName: (userData: UserData | undefined, name: string) => Promise<void>;
         };
     };
-}) => JSX.Element;
-export declare const InstanceName: () => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const InstanceName: () => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/NavBar.d.ts

@@ -3,7 +3,7 @@ import { ViewDefinition } from '../initFederation/ConfigurationProviders';
 import type { Link as TypeLink } from './navbarHooks';
 export declare const LoadingNavbar: ({ logo }: {
     logo: string;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useNavbarLinksToActions: (links: TypeLink[]) => {
     link: TypeLink;
     selected: boolean;
@@ -17,4 +17,4 @@ export declare const Navbar: ({ logo, canChangeLanguage, canChangeTheme, childre
     canChangeTheme?: boolean;
     providerLogout?: boolean;
     children?: React.ReactNode;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/NavbarUpdaterComponents.d.ts

@@ -1 +1 @@
-export declare const NavbarUpdaterComponents: () => JSX.Element;
+export declare const NavbarUpdaterComponents: () => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/NotificationCenter.d.ts

@@ -1,2 +1,2 @@
-declare const NotificationCenter: () => JSX.Element;
+declare const NotificationCenter: () => import("react/jsx-runtime").JSX.Element;
 export default NotificationCenter;

@mf-types/shell/compiled-types/src/navbar/SleepingNotificationBell.d.ts

@@ -1 +1 @@
-export declare const SleepingNotificationBell: () => JSX.Element;
+export declare const SleepingNotificationBell: () => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/index.d.ts

@@ -3,4 +3,4 @@ import './library';
 export type SolutionsNavbarProps = {
     children?: React.ReactNode;
 };
-export declare const SolutionsNavbar: ({ children }: SolutionsNavbarProps) => JSX.Element;
+export declare const SolutionsNavbar: ({ children }: SolutionsNavbarProps) => import("react/jsx-runtime").JSX.Element;

@mf-types/shell/compiled-types/src/navbar/lang.d.ts

@@ -10,5 +10,5 @@ export declare function LanguageProvider({ children, canChangeLanguage, onLangua
     children: React.ReactNode;
     canChangeLanguage?: boolean;
     onLanguageChanged?: (evt: CustomEvent) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

@mf-types/shell/compiled-types/src/navbar/navbarContext.d.ts

@@ -1,2 +1,3 @@
+import type { Navbar } from './navbarHooks';
 import './navbarHooks';
-export declare const NavbarContext: any;
+export declare const NavbarContext: import("react").Context<Navbar>;

@mf-types/shell/lang.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/navbar/lang';
+export { default } from './compiled-types/src/navbar/lang';

@mf-types/shell/useNotificationCenter.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/src/useNotificationCenter';
+export { default } from './compiled-types/src/useNotificationCenter';

build_ts/.dev-server/compiled-types/src/react/ShellHooksContext.d.ts

@@ -0,0 +1,2 @@
+import { NavigateOptions, To } from 'react-router';
+export declare const useBasenameRelativeNavigate: () => (to: To, options?: NavigateOptions) => void | Promise<void>;

jestSetupAfterEnv.tsx

@@ -1,13 +1,13 @@
 import '@testing-library/jest-dom';
 import fetch from 'node-fetch';
-import { queryClient } from './src/react/utils/testUtil';
+import {
+  mockShellAlerts,
+  mockShellHooks,
+  queryClient,
+} from './src/react/utils/testUtil';
 
-import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import 'core-js/stable';
 
-Enzyme.configure({ adapter: new Adapter() });
-
 window.fetch = (url, ...rest) =>
   //@ts-expect-error fix this when you are working on it
   fetch(/^https?:/.test(url) ? url : new URL(url, 'http://localhost'), ...rest);
@@ -47,9 +47,6 @@ const shellHooks = {
   }),
 };
 
-// @ts-expect-error The type is wrong because we only mock what we need for the test
-window.shellHooks = shellHooks;
-
 // When testing that the upload api is effectively called
 // we are getting this error from MSW
 // error: TypeError [NetworkingError]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Blob
@@ -169,3 +166,17 @@ jest.mock('./src/react/next-architecture/ui/XCoreLibraryProvider', () => {
 });
 
 jest.mock('@module-federation/enhanced/runtime', () => {}, { virtual: true });
+
+jest.mock('@scality/module-federation', () => {
+  const router = jest.requireActual('react-router');
+  return {
+    useCurrentApp: () => ({
+      name: 'zenko-ui',
+      appHistoryBasePath: '',
+    }),
+    ShellHooksProvider: ({ children }) => <>{children}</>,
+    useShellHooks: () => mockShellHooks,
+    useShellAlerts: () => mockShellAlerts,
+    useBasenameRelativeNavigate: router.useNavigate,
+  };
+});