Update module-federation dependency and enhance shell hooks integrati…

…on in FederatedApp
scality · Nov 26, 2024 · ac3b3f1 · ac3b3f1
1 parent aff3a7a
commit ac3b3f1
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 26 deletions.
diff --git a/shell-ui/package-lock.json b/shell-ui/package-lock.json
diff --git a/shell-ui/package.json b/shell-ui/package.json
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@scality/core-ui": "git+https://github.com/scality/core-ui#bf0c36da657737f47dabe310bb1a20c136877970",
-    "@scality/module-federation": "git+https://github.com/scality/module-federation#129815715e9fc7cb7cbe4417f536679183c49725",
+    "@scality/module-federation": "git+https://github.com/scality/module-federation#c571388783a2a51ae3bf5d36ae66753c8b014bb5",
     "downshift": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "oidc-client-ts": "^3.0.1",

diff --git a/shell-ui/src/FederatedApp.tsx b/shell-ui/src/FederatedApp.tsx
@@ -20,7 +20,12 @@ import NotificationCenterProvider from './NotificationCenterProvider';
 import { AuthConfigProvider, useAuthConfig } from './auth/AuthConfigProvider';
 import { AuthProvider, useAuth } from './auth/AuthProvider';
 import { FirstTimeLoginProvider } from './auth/FirstTimeLoginProvider';
-import { shellAlerts, shellHooks } from './hooks/useShellHooks';
+import {
+  ShellAlerts,
+  shellAlerts,
+  ShellHooks,
+  shellHooks,
+} from './hooks/useShellHooks';
 import './index.css';
 import {
   ConfigurationProvider,
@@ -56,6 +61,11 @@ const loadShareModule =
 
 export const queryClient = new QueryClient();
 
+export type FederatedAppProps = {
+  shellHooks: ShellHooks;
+  shellAlerts: ShellAlerts;
+};
+
 function FederatedRoute({
   url,
   scope,
@@ -109,6 +119,11 @@ function ProtectedFederatedRoute({
   const { userData } = useAuth();
   const { retrieveConfiguration } = useConfigRetriever();
 
+  const federatedAppProps: FederatedAppProps = {
+    shellHooks,
+    shellAlerts,
+  };
+
   if (
     userData &&
     (groups?.some((group) => userData.groups.includes(group)) ?? true)
@@ -121,10 +136,7 @@ function ProtectedFederatedRoute({
       <FederatedComponent
         url={`${app.url}${appBuildConfig?.spec.remoteEntryPath}?version=${app.version}`}
         module={module}
-        props={{
-          shellHooks,
-          shellAlerts,
-        }}
+        props={federatedAppProps}
         scope={scope}
         app={app}
       />

diff --git a/shell-ui/src/hooks/useShellHooks.ts b/shell-ui/src/hooks/useShellHooks.ts
@@ -29,7 +29,7 @@ import { useShellThemeSelector } from '../initFederation/ShellThemeSelectorProvi
 import { useDeployedApps } from '../initFederation/UIListProvider';
 import { useLanguage } from '../navbar/lang';
 
-type ShellHooks = {
+export type ShellHooks = {
   useAuthConfig: typeof useAuthConfig;
   useAuth: typeof useAuth;
   useConfigRetriever: typeof useConfigRetriever;
@@ -42,7 +42,7 @@ type ShellHooks = {
   useShellThemeSelector: typeof useShellThemeSelector;
 };
 
-type ShellAlerts = {
+export type ShellAlerts = {
   AlertsProvider: typeof AlertProvider;
   alertHooks: {
     useAlerts: typeof useAlerts;

diff --git a/ui/src/FederableApp.tsx b/ui/src/FederableApp.tsx
@@ -89,7 +89,7 @@ type Config = {
 export const useConfig = () => {
   const { name } = useCurrentApp();
   const { useConfig } = useShellHooks();
-  const runtimeConfiguration = useConfig({
+  const runtimeConfiguration = useConfig<Config>({
     configType: 'run',
     name,
   });
@@ -133,13 +133,7 @@ export const AppConfigProvider = ({
   );
 };
 
-interface FederableAppProps {
-  children?: ReactNode;
-  shellHooks: any;
-  shellAlerts: any;
-}
-
-export default function FederableApp(props: FederableAppProps) {
+export default function FederableApp(props) {
   return (
     <ShellHooksProvider
       shellHooks={props.shellHooks}

diff --git a/ui/src/ShellHooksContext.tsx b/ui/src/ShellHooksContext.tsx
@@ -1,7 +1,8 @@
 import { FC, ReactNode, useMemo, useSyncExternalStore } from 'react';
+import { ShellTypes } from '../@mf-types/shell/compiled-types/src/FederatedApp';
 
-export type ShellHooks = ReturnType<any>;
-export type ShellAlerts = ReturnType<any>;
+export type ShellHooks = ShellTypes['shellHooks'];
+export type ShellAlerts = ShellTypes['shellAlerts'];
 
 type Listener = () => void;
 

diff --git a/ui/src/containers/AlertProvider.tsx b/ui/src/containers/AlertProvider.tsx
@@ -9,12 +9,12 @@ export type Status = 'healthy' | 'warning' | 'critical';
 export const useAlerts = (
   filters?: FilterLabels,
 ): Omit<QueryObserverResult<Alert[]>, 'data'> & { alerts?: Alert[] } => {
-  const { alertHooks } = useShellAlerts();
-  return alertHooks.useAlerts(filters);
+  const { hooks } = useShellAlerts();
+  return hooks.useAlerts(filters);
 };
 export const useHighestSeverityAlerts = (filters: FilterLabels) => {
-  const { alertHooks } = useShellAlerts();
-  return alertHooks.useHighestSeverityAlerts(filters);
+  const { hooks } = useShellAlerts();
+  return hooks.useHighestSeverityAlerts(filters);
 };
 export const useAlertLibrary = () => {
   const { alertSelectors } = useShellAlerts();

diff --git a/ui/src/hooks.tsx b/ui/src/hooks.tsx
@@ -115,7 +115,6 @@ export const MetricsTimeSpanProvider = ({
   );
 };
 export const useVolumesWithAlerts = (nodeName?: string) => {
-  // @ts-expect-error - FIXME when you are working on it
   const { alerts } = useAlerts();
   const volumeListData = useTypedSelector((state) =>
     // @ts-expect-error - FIXME when you are working on it