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
  • Loading branch information
@hervedombya
hervedombya committed Nov 26, 2024
1 parent 14a55a3 commit 8915ae1
Show file tree
Hide file tree
Showing 29 changed files with 878 additions and 845 deletions.
367 changes: 123 additions & 244 deletions shell-ui/package-lock.json
View file

Large diffs are not rendered by default.

25 changes: 13 additions & 12 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",
"styled-components": "^5.3.11",
"typescript": "^5.6.3"
}
}
148 changes: 21 additions & 127 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 @@ -12,61 +13,35 @@ 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 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
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
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);
2 changes: 1 addition & 1 deletion shell-ui/src/alerts/alertHooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ 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) {
Expand Down
12 changes: 5 additions & 7 deletions shell-ui/src/auth/useFirstTimeLogin.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useFirstTimeLogin } from './FirstTimeLoginProvider';
import { wrapper } from '../navbar/index.spec';
import { configurationHandlers } from '../FederatedApp.spec';
import { setupServer } from 'msw/node';
import { waitFor } from '@testing-library/react';

const server = setupServer(...configurationHandlers);

Expand All @@ -28,14 +29,11 @@ describe('useFirstTimeLogin hook', () => {

it('should return firstTimeLogin as true if the user is logging in for the first time', async () => {
//S
const { result, waitForNextUpdate } = renderHook(
() => useFirstTimeLogin(),
{ wrapper },
);
//E
await waitForNextUpdate();
const { result } = renderHook(() => useFirstTimeLogin(), { wrapper });
//V
expect(result.current.firstTimeLogin).toEqual(true);
await waitFor(() => {
expect(result.current.firstTimeLogin).toEqual(true);
});
});

it('should return firstTimeLogin as false if the user is NOT logging in for the first time', async () => {
Expand Down
Loading

0 comments on commit 8915ae1

Please sign in to comment.