Skip to content

Commit

Permalink
ARTESCA-13969 // Migration to React 18
Browse files Browse the repository at this point in the history 
ARTESCA-13969 // Migration to React 18

refactor: update NotificationCenter styles and improve test assertions

refactor: migrate to React 18's createRoot for rendering

refactor: implement external store for WebFingers context and update related hooks

refactor: remove console logs and simplify state update logic in WebFingersStore

refactor: update dependencies to React 18 and related packages

Add ShellHooksProvider and integrate shell hooks into FederableApp

Add shell hooks integration and update useAlerts function to accept optional filters

Pass shellHooks and shellAlerts as props to FederatedComponent in ProtectedFederatedRoute

Add @types/react-router-dom to package.json

Refactor to useShellHooks for improved context integration across components

Refactor context creation to eliminate reliance on window.shellContexts

Update module-federation dependency and enhance shell hooks integration in FederatedApp

Update @scality/module-federation dependency to latest version

refactor: update history management and fix type errors across components
  • Loading branch information
@hervedombya
hervedombya committed Nov 27, 2024
1 parent 14a55a3 commit 7129943
Show file tree
Hide file tree
Showing 59 changed files with 1,381 additions and 1,304 deletions.
495 changes: 206 additions & 289 deletions shell-ui/package-lock.json
View file

Large diffs are not rendered by default.

29 changes: 15 additions & 14 deletions shell-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,15 @@
"@rspack/core": "^0.7.5",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/react-hooks": "^5.1.1",
"@testing-library/react": "^15.0.7",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^13.0.10",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.13",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.2.0",
"@types/styled-components": "^5.1.26",
"@types/react-router-dom": "^5.3.3",
"@types/react-test-renderer": "^18.3.0",
"@types/styled-components": "^5.1.34",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"fs-extra": "^10.0.0",
Expand All @@ -39,24 +40,24 @@
"jest-preview": "^0.3.1",
"msw": "0.36.8",
"node-fetch": "^2.6.1",
"react-test-renderer": "^17.0.2",
"react-test-renderer": "^18.3.1",
"ts-node": "^10.9.2"
},
"dependencies": {
"@scality/core-ui": "0.151.0",
"@scality/module-federation": "^1.3.4",
"@scality/core-ui": "git+https://github.com/scality/core-ui#bf0c36da657737f47dabe310bb1a20c136877970",
"@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",
"oidc-react": "^3.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-error-boundary": "^4.0.2",
"react-intl": "^5.15.3",
"react-query": "^3.34.0",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"styled-components": "^5.2.1",
"react-router": "^6.28.0",
"react-router-dom": "^6.28.0",
"styled-components": "^5.3.11",
"typescript": "^5.6.3"
}
}
162 changes: 28 additions & 134 deletions shell-ui/src/FederatedApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { CoreUiThemeProvider } from '@scality/core-ui/dist/components/coreuithemeprovider/CoreUiThemeProvider';
import { ErrorPage500 } from '@scality/core-ui/dist/components/error-pages/ErrorPage500.component';
import { Loader } from '@scality/core-ui/dist/components/loader/Loader.component';
import { ScrollbarWrapper } from '@scality/core-ui/dist/components/scrollbarwrapper/ScrollbarWrapper.component';
import { ToastProvider } from '@scality/core-ui/dist/components/toast/ToastProvider';
import {
Expand All @@ -11,62 +12,36 @@ import { createBrowserHistory } from 'history';
import React, { useEffect, useMemo } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { QueryClient, QueryClientProvider } from 'react-query';
import { Route, Router, Switch } from 'react-router-dom';
import { Loader } from '@scality/core-ui/dist/components/loader/Loader.component';
import { BrowserRouter, Route, Router, Routes } from 'react-router-dom';

import NotificationCenterProvider, {
NotificationCenterContextType,
} from './NotificationCenterProvider';
import { loadShare } from '@module-federation/enhanced/runtime';
import { useQuery } from 'react-query';
import NotificationCenterProvider from './NotificationCenterProvider';
import { AuthConfigProvider, useAuthConfig } from './auth/AuthConfigProvider';
import { AuthProvider, useAuth } from './auth/AuthProvider';
import { FirstTimeLoginProvider } from './auth/FirstTimeLoginProvider';
import {
ShellAlerts,
shellAlerts,
ShellHooks,
shellHooks,
} from './hooks/useShellHooks';
import './index.css';
import {
ConfigurationProvider,
FederatedView,
useConfigRetriever,
useConfig,
useDiscoveredViews,
useLinkOpener,
BuildtimeWebFinger,
RuntimeWebFinger,
} from './initFederation/ConfigurationProviders';
import {
ShellConfigProvider,
useShellConfig,
} from './initFederation/ShellConfigProvider';
import { ShellHistoryProvider } from './initFederation/ShellHistoryProvider';
import {
ShellThemeSelectorProvider,
useShellThemeSelector,
} from './initFederation/ShellThemeSelectorProvider';
import {
UIListProvider,
useDeployedApps,
} from './initFederation/UIListProvider';
import { ShellThemeSelectorProvider } from './initFederation/ShellThemeSelectorProvider';
import { UIListProvider } from './initFederation/UIListProvider';
import { SolutionsNavbar } from './navbar';
import { LanguageProvider, 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 { useQuery, UseQueryResult } from 'react-query';
import { loadShare } from '@module-federation/enhanced/runtime';

/**
* This is a mock function to replace the real loadShare function when running tests.
Expand All @@ -86,95 +61,9 @@ const loadShareModule =

export const queryClient = new 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;
};
};
};

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'];
}
}

window.shellHooks = {
useAuthConfig,
useAuth,
useConfigRetriever,
useDiscoveredViews,
useShellConfig,
useLanguage,
useConfig,
useLinkOpener: useLinkOpener,
useDeployedApps: useDeployedApps,
useShellThemeSelector: useShellThemeSelector,
};

window.shellAlerts = {
AlertsProvider: AlertProvider,
hooks: {
useAlerts: useAlerts,
useHighestSeverityAlerts: useHighestSeverityAlerts,
},
alertSelectors: {
getPlatformAlertSelectors: getPlatformAlertSelectors,
getNodesAlertSelectors: getNodesAlertSelectors,
getVolumesAlertSelectors: getVolumesAlertSelectors,
getNetworksAlertSelectors: getNetworksAlertSelectors,
getServicesAlertSelectors: getServicesAlertSelectors,
getK8SMasterAlertSelectors: getK8SMasterAlertSelectors,
getBootstrapAlertSelectors: getBootstrapAlertSelectors,
getMonitoringAlertSelectors: getMonitoringAlertSelectors,
getAlertingAlertSelectors: getAlertingAlertSelectors,
getLoggingAlertSelectors: getLoggingAlertSelectors,
getDashboardingAlertSelectors: getDashboardingAlertSelectors,
getIngressControllerAlertSelectors: getIngressControllerAlertSelectors,
getAuthenticationAlertSelectors: getAuthenticationAlertSelectors,
},
export type FederatedAppProps = {
shellHooks: ShellHooks;
shellAlerts: ShellAlerts;
};

function FederatedRoute({
Expand Down Expand Up @@ -230,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)
Expand All @@ -242,7 +136,7 @@ function ProtectedFederatedRoute({
<FederatedComponent
url={`${app.url}${appBuildConfig?.spec.remoteEntryPath}?version=${app.version}`}
module={module}
props={{}}
props={federatedAppProps}
scope={scope}
app={app}
/>
Expand Down Expand Up @@ -296,7 +190,7 @@ function InternalRouter() {
[],
);
return (
<Router history={federatedAppHistory} key={app.name}>
<BrowserRouter key={app.name}>
<FederatedRoute
url={
app.url +
Expand All @@ -310,19 +204,19 @@ function InternalRouter() {
app={app}
groups={groups}
/>
</Router>
</BrowserRouter>
);
},
})),
[JSON.stringify(discoveredViews)],
);
return (
<>
<Switch>
<Routes>
{routes.map((route) => (
<Route key={route.path} {...route} />
))}
</Switch>
</Routes>
</>
);
}
Expand All @@ -349,7 +243,7 @@ function InternalApp() {
});

return (
<Router history={history}>
<BrowserRouter>
<ShellHistoryProvider>
<FirstTimeLoginProvider>
<NotificationCenterProvider>
Expand All @@ -365,7 +259,7 @@ function InternalApp() {
</NotificationCenterProvider>
</FirstTimeLoginProvider>
</ShellHistoryProvider>
</Router>
</BrowserRouter>
);
}

Expand Down
20 changes: 9 additions & 11 deletions shell-ui/src/NotificationCenterProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Dispatch, createContext, useReducer } from 'react';
import { Dispatch, FC, ReactNode, createContext, useReducer } from 'react';

export type Notification = {
id: string;
Expand All @@ -18,16 +18,12 @@ export type NotificationCenterContextType = {
dispatch: Dispatch<NotificationCenterActions>;
};

if (!window.shellContexts) {
//@ts-ignore
window.shellContexts = {};
}
if (!window.shellContexts.NotificationContext) {
window.shellContexts.NotificationContext =
createContext<NotificationCenterContextType | null>(null);
}
export const NotificationCenterContext =
window.shellContexts.NotificationContext;
createContext<NotificationCenterContextType | null>(null);

type NotificationCenterProviderProps = {
children: ReactNode;
};

export enum NotificationActionType {
PUBLISH,
Expand All @@ -50,7 +46,9 @@ export type NotificationCenterActions =

const LOCAL_STORAGE_NOTIFICATION_PREFIX = 'notification-center__';

const NotificationCenterProvider = ({ children }) => {
const NotificationCenterProvider: FC<NotificationCenterProviderProps> = ({
children,
}) => {
const notificationReducer = (
state: InternalNotification[],
action: NotificationCenterActions,
Expand Down
1 change: 0 additions & 1 deletion shell-ui/src/alerts/Alerts.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,6 @@ describe('alerts', () => {
);

//E
// @ts-expect-error - FIXME when you are working on it
const { result, waitForNextUpdate } = renderHook(() => useAlerts(), {
wrapper,
});
Expand Down
14 changes: 1 addition & 13 deletions shell-ui/src/alerts/alertContext.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,3 @@
import { createContext } from 'react';

if (!window.shellContexts) {
// @ts-expect-error - FIXME when you are working on it
window.shellContexts = {};
}

// @ts-expect-error - FIXME when you are working on it
if (!window.shellContexts.AlertContext) {
// @ts-expect-error - FIXME when you are working on it
window.shellContexts.AlertContext = createContext(null);
}

// @ts-expect-error - FIXME when you are working on it
export const AlertContext = window.shellContexts.AlertContext;
export const AlertContext = createContext(null);
4 changes: 1 addition & 3 deletions shell-ui/src/alerts/alertHooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,16 +90,14 @@ export const useHighestSeverityAlerts = (filters: FilterLabels): Alert[] => {
*
* @returns react query result
*/
export function useAlerts(filters: FilterLabels) {
export function useAlerts(filters?: FilterLabels) {
const query = useContext(AlertContext);

if (!query) {
throw new Error(
'The useAlerts hook can only be used within AlertProvider.',
);
// @ts-expect-error - FIXME when you are working on it
} else if (query.status === 'success') {
// @ts-expect-error - FIXME when you are working on it
const newQuery = { ...query, alerts: filterAlerts(query.data, filters) };
delete newQuery.data;
return newQuery;
Expand Down
Loading

0 comments on commit 7129943

Please sign in to comment.