From ac3b3f11c19d81642b77c2e37ac90ea9d5eff883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Herv=C3=A9=20Dombya?= <135591453+hervedombya@users.noreply.github.com> Date: Tue, 26 Nov 2024 18:22:41 +0100 Subject: [PATCH] Update module-federation dependency and enhance shell hooks integration in FederatedApp --- shell-ui/package-lock.json | 15 ++++++++++++--- shell-ui/package.json | 2 +- shell-ui/src/FederatedApp.tsx | 22 +++++++++++++++++----- shell-ui/src/hooks/useShellHooks.ts | 4 ++-- ui/src/FederableApp.tsx | 10 ++-------- ui/src/ShellHooksContext.tsx | 5 +++-- ui/src/containers/AlertProvider.tsx | 8 ++++---- ui/src/hooks.tsx | 1 - 8 files changed, 41 insertions(+), 26 deletions(-) diff --git a/shell-ui/package-lock.json b/shell-ui/package-lock.json index 2055ff608f..a1821d87ef 100644 --- a/shell-ui/package-lock.json +++ b/shell-ui/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "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", @@ -4226,8 +4226,8 @@ }, "node_modules/@scality/module-federation": { "version": "1.3.4", - "resolved": "git+ssh://git@github.com/scality/module-federation.git#129815715e9fc7cb7cbe4417f536679183c49725", - "integrity": "sha512-BnFlO8QpnXH231dILZHh+xEgOUhwKi3k+2LyHsbGbAEzMniZaIM4nc0l4vJfdEJNW2hyKxy9pD0iWhowW/0vKA==", + "resolved": "git+ssh://git@github.com/scality/module-federation.git#c571388783a2a51ae3bf5d36ae66753c8b014bb5", + "integrity": "sha512-lrpXm7Skkq/CtGQRI563pSelewbeNaBBbs3J4zzCiheb0H2fSs6JF6lqQHQjL9A0HRVjfnArotXlF8E8JzVtnw==", "license": "SEE LICENSE IN LICENSE", "peerDependencies": { "react": "^18.3.1", @@ -16733,6 +16733,15 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, + "node_modules/terser/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/terser/node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", diff --git a/shell-ui/package.json b/shell-ui/package.json index 84c699ddd6..fef007e7f3 100644 --- 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 index 25d541bad7..60c7619353 100644 --- 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({ diff --git a/shell-ui/src/hooks/useShellHooks.ts b/shell-ui/src/hooks/useShellHooks.ts index 56b5c1c43a..fc2643f590 100644 --- 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 index 074bdff63b..60003f3fb9 100644 --- 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({ 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 ( ; -export type ShellAlerts = ReturnType; +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 index b45381a8bc..940edabd2e 100644 --- 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, '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 index cb63d88e7e..c810c21681 100644 --- 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