diff --git a/shell-ui/package-lock.json b/shell-ui/package-lock.json index b46e2ff0d1..e583b5ad82 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": "0.155.0", - "@scality/module-federation": "^1.4.0", + "@scality/module-federation": "^1.4.1", "downshift": "^8.0.0", "history": "^5.3.0", "jest-environment-jsdom": "^29.7.0", @@ -4253,9 +4253,9 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "node_modules/@scality/module-federation": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@scality/module-federation/-/module-federation-1.4.0.tgz", - "integrity": "sha512-oG2ga13gsW3HPj9rxWgMApj0HC2zAmzW1+vVHtXCOKCGRNfHPyyAXjVOAAfyF87915PE4XLyZt5XGI5dB3nEig==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@scality/module-federation/-/module-federation-1.4.1.tgz", + "integrity": "sha512-1kM65y7UJigKCvHzb8FWV4Kl/MhRd+8ErCiMkd24UumCAQ1lZtWsLFe4VyIZkCNzumUi5LWJLUK+UpzkCTNBIA==", "dependencies": { "react-router": "^7.0.1" }, diff --git a/shell-ui/package.json b/shell-ui/package.json index 91f3899da2..f99250b60f 100644 --- a/shell-ui/package.json +++ b/shell-ui/package.json @@ -46,7 +46,7 @@ }, "dependencies": { "@scality/core-ui": "0.155.0", - "@scality/module-federation": "^1.4.0", + "@scality/module-federation": "^1.4.1", "downshift": "^8.0.0", "history": "^5.3.0", "jest-environment-jsdom": "^29.7.0", diff --git a/shell-ui/src/FederatedApp.tsx b/shell-ui/src/FederatedApp.tsx index ef819f23ac..816990eceb 100644 --- a/shell-ui/src/FederatedApp.tsx +++ b/shell-ui/src/FederatedApp.tsx @@ -8,10 +8,17 @@ import { FederatedComponentProps, SolutionUI, } from '@scality/module-federation'; -import React, { useEffect, useMemo } from 'react'; +import React, { + useEffect, + useLayoutEffect, + useMemo, + useTransition, + useRef, + useState, +} from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { QueryClient } from 'react-query'; -import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import { BrowserRouter, Route, Routes, useLocation } from 'react-router'; import { loadShare } from '@module-federation/enhanced/runtime'; import { useQuery } from 'react-query'; @@ -229,6 +236,9 @@ function InternalApp() { loadShareModule('@scality/module-federation'), ]); }, + refetchOnWindowFocus: false, + refetchOnMount: false, + refetchOnReconnect: false, }); return ( diff --git a/shell-ui/src/navbar/NavBar.tsx b/shell-ui/src/navbar/NavBar.tsx index 0b21d7a4a6..e291e359bd 100644 --- a/shell-ui/src/navbar/NavBar.tsx +++ b/shell-ui/src/navbar/NavBar.tsx @@ -122,30 +122,6 @@ const Link = ({ ); }; -function prefetch(url: string) { - return new Promise((resolve, reject) => { - const existingElement = [ - ...(document.head?.querySelectorAll('script') || []), - // @ts-expect-error - FIXME when you are working on it - ].find((scriptElement) => scriptElement.attributes.src?.value === url); - - if (existingElement) { - // @ts-expect-error - FIXME when you are working on it - resolve(); - } - - const script = document.createElement('script'); - script.src = url; - script.async = true; - script.onload = (evt) => { - script.setAttribute('data-loaded', 'true'); - resolve(evt); - }; - script.onerror = reject; - document.head?.appendChild(script); - }); -} - export const useNavbarLinksToActions = ( links: TypeLink[], ): { @@ -154,8 +130,8 @@ export const useNavbarLinksToActions = ( }[] => { const location = useLocation(); const doesRouteMatch = useCallback( - (path: RouteProps) => { - return matchPath(path.path + '*', location.pathname); + ({ path, exact }: { path: string; exact: boolean }) => { + return matchPath(path + (exact ? '' : '*'), location.pathname); }, [location], ); @@ -181,6 +157,7 @@ export const useNavbarLinksToActions = ( .find((link) => link.view.isFederated ? doesRouteMatch({ + exact: link.view.view.exact, path: link.view.view.activeIfMatches ? new RegExp( link.view.app.appHistoryBasePath + diff --git a/shell-ui/src/navbar/NavbarUpdaterComponents.tsx b/shell-ui/src/navbar/NavbarUpdaterComponents.tsx index f77279b816..43276cc7ca 100644 --- a/shell-ui/src/navbar/NavbarUpdaterComponents.tsx +++ b/shell-ui/src/navbar/NavbarUpdaterComponents.tsx @@ -9,6 +9,12 @@ import { useConfigRetriever } from '../initFederation/ConfigurationProviders'; import { useDeployedApps } from '../initFederation/UIListProvider'; import { useNotificationCenter } from '../useNotificationCenter'; import { useNavbar } from './navbarHooks'; +import { + ShellAlerts, + shellAlerts, + ShellHooks, + shellHooks, +} from '../hooks/useShellHooks'; export const NavbarUpdaterComponents = () => { const deployedApps = useDeployedApps(); @@ -41,7 +47,16 @@ export const NavbarUpdaterComponents = () => { {componentsToFederate.map((component, index) => { return ( - <>}> + { + console.error( + 'error while loading navbar updater component', + component, + props, + ); + return <>; + }} + > { unPublishNotification: unPublish, isFirstTimeLogin: firstTimeLogin, userData, + shellHooks, + shellAlerts, }} /> diff --git a/ui/package-lock.json b/ui/package-lock.json index e54fdec5f8..a94659cea3 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -13,7 +13,7 @@ "@js-temporal/polyfill": "^0.4.4", "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721", "@scality/core-ui": "0.155.0", - "@scality/module-federation": "^1.4.0", + "@scality/module-federation": "^1.4.1", "axios": "^0.21.1", "formik": "2.2.5", "jsonpath": "^1.1.1", @@ -5347,9 +5347,9 @@ } }, "node_modules/@scality/module-federation": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@scality/module-federation/-/module-federation-1.4.0.tgz", - "integrity": "sha512-oG2ga13gsW3HPj9rxWgMApj0HC2zAmzW1+vVHtXCOKCGRNfHPyyAXjVOAAfyF87915PE4XLyZt5XGI5dB3nEig==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@scality/module-federation/-/module-federation-1.4.1.tgz", + "integrity": "sha512-1kM65y7UJigKCvHzb8FWV4Kl/MhRd+8ErCiMkd24UumCAQ1lZtWsLFe4VyIZkCNzumUi5LWJLUK+UpzkCTNBIA==", "dependencies": { "react-router": "^7.0.1" }, @@ -31150,9 +31150,9 @@ } }, "@scality/module-federation": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@scality/module-federation/-/module-federation-1.4.0.tgz", - "integrity": "sha512-oG2ga13gsW3HPj9rxWgMApj0HC2zAmzW1+vVHtXCOKCGRNfHPyyAXjVOAAfyF87915PE4XLyZt5XGI5dB3nEig==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@scality/module-federation/-/module-federation-1.4.1.tgz", + "integrity": "sha512-1kM65y7UJigKCvHzb8FWV4Kl/MhRd+8ErCiMkd24UumCAQ1lZtWsLFe4VyIZkCNzumUi5LWJLUK+UpzkCTNBIA==", "requires": { "react-router": "^7.0.1" } diff --git a/ui/package.json b/ui/package.json index b3887601df..b6cc460239 100644 --- a/ui/package.json +++ b/ui/package.json @@ -8,7 +8,7 @@ "@js-temporal/polyfill": "^0.4.4", "@kubernetes/client-node": "github:scality/kubernetes-client-javascript.git#browser-0.10.4-64-ge7c6721", "@scality/core-ui": "0.155.0", - "@scality/module-federation": "^1.4.0", + "@scality/module-federation": "^1.4.1", "axios": "^0.21.1", "formik": "2.2.5", "jsonpath": "^1.1.1", diff --git a/ui/src/containers/DashboardPage.tsx b/ui/src/containers/DashboardPage.tsx index 369cdceeb4..a149151fac 100644 --- a/ui/src/containers/DashboardPage.tsx +++ b/ui/src/containers/DashboardPage.tsx @@ -9,7 +9,6 @@ import DashboardServices from '../components/DashboardServices'; import DashboardGlobalHealth from '../components/DashboardGlobalHealth'; import TimespanSelector from './TimespanSelector'; import DashboardNetwork from '../components/DashboardNetwork'; -import { Outlet } from 'react-router'; const DashboardGrid = styled.div` display: grid;