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

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

@@ -1,23 +1,2 @@
-import { FC, ReactNode } from 'react';
-import { NavigateOptions, To } from 'react-router-dom';
-import { ShellAlerts, ShellHooks } from 'shell/compiled-types/src/hooks/useShellHooks';
-type Listener = () => void;
-export declare const shellHooksStore: {
-    getShellHooks: () => any;
-    subscribe: (listener: Listener) => () => void;
-    setShellHooks: (newHooks: ShellHooks) => void;
-};
-export declare const shellAlertsStore: {
-    getShellAlerts: () => any;
-    subscribe: (listener: Listener) => () => void;
-    setShellAlerts: (newAlerts: ShellAlerts) => void;
-};
-export declare const useShellHooks: () => ShellHooks;
-export declare const useShellAlerts: () => ShellAlerts;
-export declare const ShellHooksProvider: FC<{
-    shellHooks: ShellHooks;
-    shellAlerts: ShellAlerts;
-    children: ReactNode;
-}>;
+import { NavigateOptions, To } from 'react-router';
 export declare const useBasenameRelativeNavigate: () => (to: To, options?: NavigateOptions) => void | Promise<void>;
-export {};

package.json

@@ -69,7 +69,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
     "@scality/core-ui": "git+https://github.com/scality/core-ui#feature/ARTESCA-13970",
-    "@scality/module-federation": "git+https://github.com/scality/module-federation#b78866fd7429ba2dd1bdd0fd75b25b6097803880",
+    "@scality/module-federation": "git+https://github.com/scality/module-federation#0395e64598165d4156a55b94194d21e70e1cc608",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",
     "@types/react-window": "^1.8.5",

src/js/mutations.ts

@@ -10,7 +10,7 @@ import { TagSetItem } from '../types/s3';
 import { notFalsyTypeGuard } from '../types/typeGuards';
 import { MULTIPART_UPLOAD } from './S3Client';
 import { EndpointV1 } from './managementClient/api';
-import { useShellHooks } from '../react/ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 export const useWaitForRunningConfigurationVersionToBeUpdated = () => {
   const managementClient = useManagementClient();

src/react/DataServiceRoleProvider.tsx

@@ -12,7 +12,7 @@ import {
 import Loader from './ui-elements/Loader';
 import { PromiseResult } from 'aws-sdk/lib/request';
 import { AWSError, STS } from 'aws-sdk';
-import { useShellHooks } from './ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 export const _DataServiceRoleContext = createContext<null | {
   role: { roleArn: string };

src/react/FederableApp.tsx

@@ -13,10 +13,8 @@ import ZenkoUI from './ZenkoUI';
 import React, { useEffect, useMemo } from 'react';
 import { XCoreLibraryProvider } from './next-architecture/ui/XCoreLibraryProvider';
 import zenkoUIReducer from './reducers';
-import {
-  ShellHooksProvider,
-  useBasenameRelativeNavigate,
-} from './ShellHooksContext';
+import { useBasenameRelativeNavigate } from './ShellHooksContext';
+import { ShellHooksProvider } from '@scality/module-federation';
 
 //@ts-expect-error fix this when you are working on it
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

src/react/ShellHooksContext.tsx

@@ -1,104 +1,5 @@
 import { useCurrentApp } from '@scality/module-federation';
-import { FC, ReactNode, useMemo, useSyncExternalStore } from 'react';
 import { NavigateOptions, To, useNavigate } from 'react-router';
-import {
-  ShellAlerts,
-  ShellHooks,
-} from 'shell/compiled-types/src/hooks/useShellHooks';
-
-type Listener = () => void;
-
-const createShellHooksStore = () => {
-  let shellHooks: ShellHooks | null = null;
-
-  const listeners: Set<Listener> = new Set();
-
-  return {
-    getShellHooks: () => shellHooks,
-
-    subscribe: (listener: Listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-
-    setShellHooks: (newHooks: ShellHooks) => {
-      if (shellHooks !== newHooks) {
-        shellHooks = newHooks;
-        listeners.forEach((listener) => listener());
-      }
-    },
-  };
-};
-
-const createShellAlertsStore = () => {
-  let shellAlerts: ShellAlerts | null = null;
-  const listeners: Set<Listener> = new Set();
-
-  return {
-    getShellAlerts: () => shellAlerts,
-
-    subscribe: (listener: Listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-
-    setShellAlerts: (newAlerts: ShellAlerts) => {
-      if (shellAlerts !== newAlerts) {
-        shellAlerts = newAlerts;
-        listeners.forEach((listener) => listener());
-      }
-    },
-  };
-};
-
-export const shellHooksStore = createShellHooksStore();
-export const shellAlertsStore = createShellAlertsStore();
-
-export const useShellHooks = (): ShellHooks => {
-  const hooks = useSyncExternalStore(
-    shellHooksStore.subscribe,
-    shellHooksStore.getShellHooks,
-  );
-
-  if (!hooks) {
-    throw new Error(
-      'useShellHooks must be used within a ShellHooksProvider and initialized with valid hooks.',
-    );
-  }
-
-  return hooks;
-};
-
-export const useShellAlerts = (): ShellAlerts => {
-  const alerts = useSyncExternalStore(
-    shellAlertsStore.subscribe,
-    shellAlertsStore.getShellAlerts,
-  );
-
-  if (!alerts) {
-    throw new Error(
-      'useShellAlerts must be used within a ShellHooksProvider and initialized with valid alerts.',
-    );
-  }
-
-  return alerts;
-};
-
-export const ShellHooksProvider: FC<{
-  shellHooks: ShellHooks;
-  shellAlerts: ShellAlerts;
-  children: ReactNode;
-}> = ({ shellHooks, shellAlerts, children }) => {
-  useMemo(() => {
-    shellHooksStore.setShellHooks(shellHooks);
-    shellAlertsStore.setShellAlerts(shellAlerts);
-  }, [shellHooks, shellAlerts]);
-  return <>{children}</>;
-};
 
 export const useBasenameRelativeNavigate = () => {
   const originalNavigate = useNavigate();

src/react/ZenkoUI.tsx

@@ -9,7 +9,7 @@ import Loader from './ui-elements/Loader';
 import Routes from './Routes';
 import { loadAppConfig } from './actions';
 import { useConfig } from './next-architecture/ui/ConfigProvider';
-import { useShellHooks } from './ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 function ZenkoUI() {
   const isConfigLoaded = useSelector(

src/react/account/details/properties/AccountInfo.tsx

@@ -25,10 +25,8 @@ import Table, * as T from '../../../ui-elements/TableKeyValue';
 import { useAuthGroups, useRolePathName } from '../../../utils/hooks';
 import { removeRoleArnStored } from '../../../utils/localStorage';
 import SecretKeyModal from './SecretKeyModal';
-import {
-  useBasenameRelativeNavigate,
-  useShellHooks,
-} from '../../../ShellHooksContext';
+import { useBasenameRelativeNavigate } from '../../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 const TableContainer = styled.div`
   display: flex;

src/react/endpoint/DeleteEndpoint.tsx

@@ -9,7 +9,7 @@ import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/Ac
 import { useInstanceId } from '../next-architecture/ui/AuthProvider';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
 import * as T from '../ui-elements/Table';
-import { useShellHooks } from '../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 export const DeleteEndpoint = ({
   hostname,

src/react/locations/LocationEditor.tsx

@@ -39,10 +39,8 @@ import {
   newLocationForm,
 } from './utils';
 import { Loader as LoaderCoreUI } from '@scality/core-ui';
-import {
-  useBasenameRelativeNavigate,
-  useShellHooks,
-} from '../ShellHooksContext';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 //Temporary hack waiting for the layout
 const StyledForm = styled(Form)`

src/react/locations/LocationsList.tsx

@@ -40,11 +40,9 @@ import { PauseAndResume } from './PauseAndResume';
 import { getLocationDeletionBlocker } from './utils';
 import styled from 'styled-components';
 import { TableHeaderWrapper } from '../ui-elements/Table';
-import {
-  useBasenameRelativeNavigate,
-  useShellHooks,
-} from '../ShellHooksContext';
+import { useBasenameRelativeNavigate } from '../ShellHooksContext';
 import { useConfig } from '../next-architecture/ui/ConfigProvider';
+import { useShellHooks } from '@scality/module-federation';
 
 const ActionButtons = ({
   rowValues,

src/react/locations/PauseAndResume.tsx

@@ -10,7 +10,7 @@ import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.comp
 import { useInstanceId } from '../next-architecture/ui/AuthProvider';
 import { handleClientError } from '../actions';
 import { ApiError } from '../../types/actions';
-import { useShellHooks } from '../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 export const PauseAndResume = ({ locationName }: { locationName: string }) => {
   const [isPollingEnabled, setIsPollingEnabled] = useState(false);

src/react/next-architecture/domain/business/locations.test.tsx

@@ -24,7 +24,7 @@ import {
   WrapperAsStorageManager,
 } from '../../../utils/testUtil';
 import { QueryClientProvider } from '../../../../QueryClientProvider';
-import { ShellHooksProvider } from '../../../ShellHooksContext';
+import { ShellHooksProvider } from '@scality/module-federation';
 
 const defaultUsedCapacity = {
   status: 'success' as const,
@@ -57,7 +57,6 @@ const Wrapper = ({ children }: PropsWithChildren<Record<string, never>>) => {
   return (
     <WrapperAsStorageManager isStorageManager={true}>
       <ShellHooksProvider
-        //@ts-expect-error
         shellHooks={mockShellHooks}
         shellAlerts={mockShellAlerts}
       >

src/react/next-architecture/ui/AccountsLocationsEndpointsAdapterProvider.tsx

@@ -3,7 +3,7 @@ import { IAccountsLocationsEndpointsAdapter } from '../adapters/accounts-locatio
 import { PensieveAccountsLocationsAdapter } from '../adapters/accounts-locations/PensieveAccountsLocationsAdapter';
 import { useInstanceId } from './AuthProvider';
 import { useConfig } from './ConfigProvider';
-import { useShellHooks } from '../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 const _AccountsLocationsEndpointsAdapterContext = createContext<null | {
   accountsLocationsEndpointsAdapter: IAccountsLocationsEndpointsAdapter;

src/react/next-architecture/ui/AlertProvider.tsx

@@ -4,7 +4,7 @@ import {
   FilterLabels,
 } from 'shell/compiled-types/src/alerts/services/alertUtils';
 import { useXcoreRuntimeConfig } from './ConfigProvider';
-import { useShellAlerts } from '../../ShellHooksContext';
+import { useShellAlerts } from '@scality/module-federation';
 
 export const highestAlertToStatus = (alerts?: Alert[]): string => {
   return (alerts?.[0] && alerts[0].severity) || 'healthy';

src/react/next-architecture/ui/AuthProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 import { AuthUser } from '../../../types/auth';
-import { useShellHooks } from '../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 //exported for testing purposes only
 // TO BE DELETED

src/react/next-architecture/ui/CertificateDownloadButton.tsx

@@ -1,5 +1,5 @@
 import { FederatedComponent } from '@scality/module-federation';
-import { useShellHooks } from '../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 export const CertificateDownloadButton = () => {
   const { useDeployedApps, useConfigRetriever } = useShellHooks();

src/react/next-architecture/ui/ConfigProvider.tsx

@@ -5,14 +5,14 @@ import {
   RuntimeWebFinger,
 } from 'shell/moduleFederation/ConfigurationProvider';
 import { AppConfig } from '../../../types/entities';
-import { useShellHooks } from '../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 export const _ConfigContext = createContext<AppConfig | null>(null);
 
 export function useConfig(): AppConfig {
   const { name } = useCurrentApp();
   const { useConfig } = useShellHooks();
-  return useConfig<AppConfig>({
+  return useConfig({
     configType: 'run',
     name,
   }).spec.selfConfiguration;
@@ -45,14 +45,13 @@ export function useXcoreRuntimeConfig(): RuntimeWebFinger<XCoreRuntimeConfig> |
   const instances = useDeployedXcoreInstances();
 
   if (instances.length) {
-    return retrieveConfiguration<XCoreRuntimeConfig>({
+    return retrieveConfiguration({
       configType: 'run',
       name: instances[0].name,
     });
-  } else {
-    console.log('There is no Xcore instance deployed yet.');
-    return null;
   }
+  console.log('There is no Xcore instance deployed yet.');
+  return null;
 }
 
 export function useXcoreBuildtimeConfig(): BuildtimeWebFinger | null {
@@ -61,14 +60,13 @@ export function useXcoreBuildtimeConfig(): BuildtimeWebFinger | null {
   const instances = useDeployedXcoreInstances();
 
   if (instances.length) {
-    return retrieveConfiguration<'build'>({
+    return retrieveConfiguration({
       configType: 'build',
       name: instances[0].name,
     });
-  } else {
-    console.log('There is no Xcore instance deployed yet.');
-    return null;
   }
+  console.log('There is no Xcore instance deployed yet.');
+  return null;
 }
 
 // FIXME this is a temporary (hopefully) solution to get the Grafana URL
@@ -82,13 +80,12 @@ export function useGrafanaURL() {
 
   if (instances.length) {
     const baseUrl = new URL(instances[0].url).origin;
-    const runTimeConfig = retrieveConfiguration<Config>({
+    const runTimeConfig = retrieveConfiguration({
       configType: 'run',
       name: instances[0].name,
     });
     return baseUrl + runTimeConfig.spec.selfConfiguration.url_grafana;
-  } else {
-    console.log('There is no Metalk8s instance deployed yet.');
-    return '';
   }
+  console.log('There is no Metalk8s instance deployed yet.');
+  return '';
 }

src/react/next-architecture/ui/LocationAdapterProvider.tsx

@@ -3,7 +3,7 @@ import { ILocationsAdapter } from '../adapters/accounts-locations/ILocationsAdap
 import { PensieveAccountsLocationsAdapter } from '../adapters/accounts-locations/PensieveAccountsLocationsAdapter';
 import { useInstanceId } from './AuthProvider';
 import { useConfig } from './ConfigProvider';
-import { useShellHooks } from '../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 const _LocationAdapterContext = createContext<null | {
   locationAdapter: ILocationsAdapter;

src/react/next-architecture/ui/MetricsAdapterProvider.tsx

@@ -3,7 +3,7 @@ import { PensieveMetricsAdapter } from '../adapters/metrics/PensieveMetricsAdapt
 import { IMetricsAdapter } from '../adapters/metrics/IMetricsAdapter';
 import { useInstanceId } from './AuthProvider';
 import { useConfig } from './ConfigProvider';
-import { useShellHooks } from '../../ShellHooksContext';
+import { useShellHooks } from '@scality/module-federation';
 
 const _MetricsAdapterContext = createContext<null | {
   metricsAdapter: IMetricsAdapter;