MGMT-17147: Update openshift-assisted/ui-lib to react-router-dom v6 (#…

…2636) * Setup the router compatibility package * Use useNavigate instead of useHistory * Migrate /ocm and /common to compat Routes * Migrate /cim to compat routes * Remove old react-router-dom package --------- Co-authored-by: Montse Ortega <ammont82@users.noreply.github.com>
openshift-assisted · Aug 1, 2024 · e9d8aa9 · e9d8aa9
1 parent 37748f4
commit e9d8aa9
Show file tree

Hide file tree

Showing 29 changed files with 151 additions and 123 deletions.
diff --git a/apps/assisted-ui/package.json b/apps/assisted-ui/package.json
@@ -22,6 +22,7 @@
     "react-monaco-editor": "^0.51.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^5.3.3",
+    "react-router-dom-v5-compat": "^6.21.2",
     "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",

diff --git a/apps/assisted-ui/src/components/App.tsx b/apps/assisted-ui/src/components/App.tsx
@@ -1,19 +1,22 @@
 import type React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { CompatRouter, Route } from 'react-router-dom-v5-compat';
 import { Page } from '@patternfly/react-core';
 import * as OCM from '@openshift-assisted/ui-lib/ocm';
 import { Header } from './Header';
 import '../i18n';
 
-const { HostsClusterDetailTabMock, Routes, Features, Config } = OCM;
+const { HostsClusterDetailTabMock, UILibRoutes, Features, Config } = OCM;
 window.__app__ = { OCM };
 
 export const App: React.FC = () => (
   <BrowserRouter basename={Config.routeBasePath}>
-    <Page header={<Header />} isManagedSidebar defaultManagedSidebarIsOpen={false}>
-      <Routes allEnabledFeatures={Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES}>
-        <Route path={'/day2-flow-mock'} component={HostsClusterDetailTabMock} />
-      </Routes>
-    </Page>
+    <CompatRouter>
+      <Page header={<Header />} isManagedSidebar defaultManagedSidebarIsOpen={false}>
+        <UILibRoutes allEnabledFeatures={Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES}>
+          <Route path={'/day2-flow-mock'} element={<HostsClusterDetailTabMock />} />
+        </UILibRoutes>
+      </Page>
+    </CompatRouter>
   </BrowserRouter>
 );
diff --git a/libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx b/libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, AlertVariant, List, ListComponent, ListItem } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { CpuArchitecture } from '../../../common';

diff --git a/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx b/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { sortable, expandable, breakWord } from '@patternfly/react-table';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 import {
   HostsTableActions,

diff --git a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import {

diff --git a/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx b/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx
@@ -16,7 +16,7 @@ import { AddHostDropdownProps } from './types';
 import './AddHostDropdown.css';
 import { PopoverIcon } from '../../../common';
 import { Trans } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 type ModalType = 'iso' | 'bmc' | 'yaml' | 'ipxe' | undefined;
 

diff --git a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Alert,
   AlertVariant,
@@ -26,7 +26,7 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
   assistedServiceDeploymentUrl,
 }) => {
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [hideSuccess, setHideSuccess] = React.useState(true);
 
   React.useEffect(
@@ -68,7 +68,7 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
       variant={ButtonVariant.link}
       isInline
       key="assisted-service-deployment"
-      onClick={() => history.push(assistedServiceDeploymentUrl)}
+      onClick={() => navigate(assistedServiceDeploymentUrl)}
     >
       {t('ai:Troubleshoot in the assisted service deployment')} <ExternalLinkAltIcon />
     </Button>

diff --git a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Alert, AlertActionLink, AlertVariant } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
@@ -10,7 +10,7 @@ export const CimStorageMissingAlert: React.FC<{
   storageOperatorUrl: string;
 }> = ({ docStorageUrl, storageOperatorUrl }) => {
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const contentWorkaround = (
     <>
@@ -20,10 +20,7 @@ export const CimStorageMissingAlert: React.FC<{
   );
 
   const actionLinks: React.ReactNode[] = [
-    <AlertActionLink
-      key="install-storage-operator"
-      onClick={() => history.push(storageOperatorUrl)}
-    >
+    <AlertActionLink key="install-storage-operator" onClick={() => navigate(storageOperatorUrl)}>
       {t('ai:Install storage operator')}
     </AlertActionLink>,
     <AlertActionLink key="storage-class" onClick={() => window.open(docStorageUrl, '_blank')}>

diff --git a/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx b/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { sortable } from '@patternfly/react-table';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import {

diff --git a/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx b/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import {
   ButtonVariant,
   EmptyState,
@@ -9,7 +8,6 @@ import {
   PageSectionVariants,
   Title,
 } from '@patternfly/react-core';
-import { HostsClusterDetailTabProps } from './types';
 import {
   OcmCpuArchitecture,
   STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
@@ -43,9 +41,7 @@ const getCluster = (type: string) => {
   }
 };
 
-export const HostsClusterDetailTabMock: React.FC<
-  RouteComponentProps & HostsClusterDetailTabProps
-> = () => {
+export const HostsClusterDetailTabMock = () => {
   const [tabShown, setTabShown] = React.useState<string>('');
   const [isMocked, setIsMocked] = React.useState<boolean>(false);
 

diff --git a/libs/ui-lib/lib/ocm/components/Routes.tsx b/libs/ui-lib/lib/ocm/components/Routes.tsx
@@ -1,29 +1,33 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate, Outlet } from 'react-router-dom-v5-compat';
 import { Clusters, ClusterPage, NewClusterPage } from './clusters';
 import type { FeatureListType } from '../../common/features/featureGate';
-import { routeBasePath } from '../config';
 import { AssistedUILibVersion } from './ui';
 import { storeDay1 } from '../store';
 import { useFeatureDetection } from '../hooks/use-feature-detection';
 
-export const Routes: React.FC<{ allEnabledFeatures: FeatureListType }> = ({
+export const UILibRoutes = ({
   allEnabledFeatures,
   children,
+}: {
+  allEnabledFeatures: FeatureListType;
+  children: React.ReactNode;
 }) => {
   useFeatureDetection(allEnabledFeatures);
 
   return (
     <Provider store={storeDay1}>
       <AssistedUILibVersion />
-      <Switch>
-        <Route path={`${routeBasePath}/clusters/~new`} component={NewClusterPage} />
-        <Route path={`${routeBasePath}/clusters/:clusterId`} component={ClusterPage} />
-        <Route path={`${routeBasePath}/clusters`} component={Clusters} />
+      <Routes>
+        <Route path="clusters" element={<Outlet />}>
+          <Route path="~new" element={<NewClusterPage />} />
+          <Route path=":clusterId" element={<ClusterPage />} />
+          <Route index element={<Clusters />} />
+        </Route>
         {children}
-        <Redirect to={`${routeBasePath}/clusters`} />
-      </Switch>
+        <Route path="*" element={<Navigate to="clusters" />} />
+      </Routes>
     </Provider>
   );
 };
diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Card, CardBody, CardHeader, Title } from '@patternfly/react-core';
 import { storeDay1 } from '../../store';
-import { OCM_CLUSTER_LIST_LINK } from '../../config';
 import {
   AlertsContextProvider,
   AssistedInstallerOCMPermissionTypesListType,
@@ -62,7 +61,7 @@ const ClusterLoadFailed = ({ clusterId, error }: { clusterId: Cluster['id']; err
         <ErrorState
           title="Failed to fetch the cluster"
           fetchData={fetchCluster}
-          actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+          actions={[<BackButton key={'cancel'} to={'..'} />]}
           content={error}
         />
       </CardBody>
@@ -80,7 +79,7 @@ const LoadingDefaultConfigFailedCard = () => (
     <CardBody>
       <ErrorState
         title="Failed to retrieve the default configuration"
-        actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+        actions={[<BackButton key={'cancel'} to={'..'} />]}
       />
     </CardBody>
   </Card>

diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Stack,
   StackItem,
@@ -40,7 +40,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
   const isSNOExpansionAllowed =
     featureSupportLevelContext.isFeatureSupported('SINGLE_NODE_EXPANSION');
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
-  const history = useHistory();
+  const navigate = useNavigate();
   const canAddHosts =
     (!isSNO(cluster) || isSNOExpansionAllowed) && cluster.status === 'installed' && !isInOcm;
 
@@ -49,13 +49,13 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       try {
         const { data } = await ClustersAPI.allowAddHosts(cluster.id);
         updateCluster(data);
-        history.push(`${routeBasePath}/clusters/${cluster.id}`);
+        navigate(`${routeBasePath}/clusters/${cluster.id}`);
       } catch (e) {
         handleApiError(e);
       }
     };
     void doItAsync();
-  }, [cluster.id, history]);
+  }, [cluster.id, navigate]);
 
   return (
     <Stack hasGutter>
@@ -112,7 +112,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
           {!isSingleClusterFeatureEnabled && (
             <ToolbarButton
               variant={ButtonVariant.link}
-              onClick={() => history.push(`${routeBasePath}/clusters`)}
+              onClick={() => navigate('..')}
               id={getClusterDetailId('button-back-to-all-clusters')}
             >
               Back to all clusters

diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetails.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetails.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
 import { useAlerts, LoadingState, ClusterWizardStep, ErrorState } from '../../../common';
 import { usePullSecret } from '../../hooks';
@@ -10,7 +10,6 @@ import { canNextClusterDetails, ClusterWizardFlowStateNew } from './wizardTransi
 import { useOpenshiftVersions, useManagedDomains, useUsedClusterNames } from '../../hooks';
 import ClusterDetailsForm from './ClusterDetailsForm';
 import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { routeBasePath } from '../../config';
 import {
   ClusterDetailsUpdateParams,
   ClustersService,
@@ -28,7 +27,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   const clusterWizardContext = useClusterWizardContext();
   const managedDomains = useManagedDomains();
   const { addAlert, clearAlerts } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const { usedClusterNames } = useUsedClusterNames(cluster?.id || '');
   const pullSecret = usePullSecret();
@@ -69,7 +68,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       clearAlerts();
       try {
         const cluster = await ClustersService.create(params);
-        history.push(`${routeBasePath}/clusters/${cluster.id}`, ClusterWizardFlowStateNew);
+        navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
       } catch (e) {
         handleApiError(e, () =>
@@ -80,7 +79,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, history, addAlert, dispatch],
+    [clearAlerts, navigate, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { Grid, GridItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';

diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardContext';
 import {
   ClusterWizardFlowStateType,
@@ -91,7 +91,8 @@ const ClusterWizardContextProvider = ({
   const [wizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
-  const { state: locationState } = useLocation<ClusterWizardFlowStateType>();
+  const location = useLocation();
+  const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
     uiSettings,
     updateUISettings,

diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Alert, AlertGroup, AlertVariant } from '@patternfly/react-core';
 import {
   WizardFooter,
@@ -9,7 +9,6 @@ import {
   clusterFieldLabels,
   selectClusterValidationsInfo,
 } from '../../../common';
-import { routeBasePath } from '../../config';
 import { wizardStepsValidationsMap } from './wizardTransition';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ClusterWizardStepValidationsAlert from '../../../common/components/clusterWizard/ClusterWizardStepValidationsAlert';
@@ -79,12 +78,9 @@ const ClusterWizardFooter = ({
   ...rest
 }: ClusterWizardFooterProps) => {
   const { alerts } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const handleCancel = React.useCallback(
-    () => history.push(`${routeBasePath}/clusters/`),
-    [history],
-  );
+  const handleCancel = React.useCallback(() => navigate('..'), [navigate]);
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/Operators.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/Operators.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
 import {
   ClusterWizardStep,
@@ -42,7 +42,7 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
   const clusterWizardContext = useClusterWizardContext();
   const isAutoSaveRunning = useFormikAutoSave();
   const { errors, touched, isSubmitting, isValid } = useFormikContext<OperatorsValues>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { pathname } = useLocation();
 
   const isNextDisabled =
@@ -53,7 +53,9 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
     !canNextOperators({ cluster });
 
   const handleNext = () => {
-    history.replace(pathname, undefined);
+    if (window.location.pathname.indexOf('assisted-installer') > -1) {
+      navigate(pathname, { state: undefined, replace: true });
+    }
     clusterWizardContext.moveNext();
   };