@openshift-assisted/ui-lib 2.11.3-cim → 2.12.1-cim

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -20,7 +20,12 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
-import { CpuArchitecture, LabelValue } from '../../../common';
+import {
+  architectureData,
+  CpuArchitecture,
+  LabelValue,
+  SupportedCpuArchitecture,
+} from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -160,7 +165,8 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:CPU architecture')}</DescriptionListTerm>
               <DescriptionListDescription>
-                {infraEnv.spec?.cpuArchitecture ?? CpuArchitecture.x86}
+                {architectureData[infraEnv.spec?.cpuArchitecture as SupportedCpuArchitecture]
+                  .label ?? CpuArchitecture.x86}
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -48,6 +48,7 @@ import './infra-env.css';
 import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
+import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 
 export type EnvironmentStepFormValues = {
   name: string;
@@ -60,7 +61,10 @@ export type EnvironmentStepFormValues = {
   enableProxy: boolean;
   labels: string[];
   networkType: 'dhcp' | 'static';
-  cpuArchitecture: CpuArchitecture;
+  cpuArchitecture: Extract<
+    CpuArchitecture,
+    CpuArchitecture.x86 | CpuArchitecture.ARM | CpuArchitecture.s390x
+  >;
   enableNtpSources: boolean;
   additionalNtpSources: string;
 };
@@ -136,6 +140,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
     setFieldValue('sshPublicKey', sshPublicKey);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pullSecret, sshPublicKey]);
+
   return (
     <Stack hasGutter>
       <StackItem>
@@ -216,27 +221,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
               </FlexItem>
             </Flex>
           </FormGroup>
-          <FormGroup fieldId="cpuArchitecture" label={t('ai:CPU architecture')}>
-            <Flex justifyContent={{ default: 'justifyContentFlexStart' }}>
-              <FlexItem>
-                <RadioField
-                  name="cpuArchitecture"
-                  id="x86_64"
-                  value="x86_64"
-                  label={t('ai:x86_64')}
-                />
-              </FlexItem>
-              <FlexItem spacer={{ default: 'spacer4xl' }} />
-              <FlexItem>
-                <RadioField
-                  name="cpuArchitecture"
-                  id="arm64"
-                  value="arm64"
-                  label={<>{t('ai:arm64')}&nbsp;</>}
-                />
-              </FlexItem>
-            </Flex>
-          </FormGroup>
+          <CpuArchitectureDropdown />
           <RichInputField
             label={t('ai:Location')}
             name="location"

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -105,9 +105,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
         <SearchInput
           placeholder={t('ai:Find by hostname')}
           value={hostnameFilter}
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          onChange={setHostnameFilter}
+          onChange={(_e, value) => setHostnameFilter(value)}
           onClear={() => setHostnameFilter(undefined)}
         />
       </ToolbarItem>

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import {
+  architectureData,
+  CpuArchitecture,
+  getFieldId,
+  StaticField,
+  SupportedCpuArchitecture,
+} from '../../../common';
+import { useField } from 'formik';
+import { useFormikHelpers } from '../../../common/hooks/useFormikHelpers';
+
+const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean }) => {
+  const { t } = useTranslation();
+  const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture>('cpuArchitecture');
+  const [cpuArchOpen, setCpuArchOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
+  const { setValue: setUserManagedNetworking } = useFormikHelpers<boolean>('userManagedNetworking');
+
+  const onCpuArchSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+    const val = e?.currentTarget.id as SupportedCpuArchitecture;
+    setValue(val);
+    setUserManagedNetworking(val === CpuArchitecture.s390x);
+
+    setCpuArchOpen(false);
+  };
+
+  return !isDisabled ? (
+    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} required>
+      <Dropdown
+        toggle={
+          <DropdownToggle onToggle={() => setCpuArchOpen(!cpuArchOpen)} className="pf-u-w-100">
+            {value ? architectureData[value].label : t('ai:CPU architecture')}
+          </DropdownToggle>
+        }
+        name="cpuArchitecture"
+        isOpen={cpuArchOpen}
+        onSelect={onCpuArchSelect}
+        dropdownItems={[
+          <DropdownItem
+            key={'x86_64'}
+            id="x86_64"
+            description={architectureData['x86_64'].description}
+          >
+            {architectureData['x86_64'].label}
+          </DropdownItem>,
+          <DropdownItem
+            key={'arm64'}
+            id="arm64"
+            description={architectureData['arm64'].description}
+          >
+            {architectureData['arm64'].label}
+          </DropdownItem>,
+          <DropdownItem
+            key={'s390x'}
+            id="s390x"
+            description={architectureData['s390x'].description}
+          >
+            {architectureData['s390x'].label}
+          </DropdownItem>,
+        ]}
+        className="pf-u-w-100"
+      />
+    </FormGroup>
+  ) : (
+    <StaticField name={'cpuArchitecture'} label={t('ai:CPU architecture')} isRequired>
+      {architectureData[value].label}
+    </StaticField>
+  );
+};
+
+export default CpuArchitectureDropdown;

package/lib/cim/components/helpers/agentStatus.tsx

@@ -42,6 +42,11 @@ export const bmhStatus = (t: TFunction): HostStatus<string> => ({
     title: t('ai:Pending'),
     category: 'Bare Metal Host related',
   },
+  'externally provisioned': {
+    key: 'externally provisioned',
+    title: t('ai:Externally provisioned'),
+    category: 'Bare Metal Host related',
+  },
 });
 
 export const agentStatus = (t: TFunction): HostStatus<string> => ({

package/lib/cim/components/helpers/clusterDeployment.ts

@@ -234,5 +234,12 @@ export const getClusterDeploymentCpuArchitecture = (
     arch = clusterDeployment.metadata?.annotations?.[CPU_ARCHITECTURE_ANNOTATION_KEY];
   }
 
-  return arch === CpuArchitecture.ARM ? CpuArchitecture.ARM : CpuArchitecture.x86;
+  switch (arch) {
+    case CpuArchitecture.ARM:
+      return CpuArchitecture.ARM;
+    case CpuArchitecture.s390x:
+      return CpuArchitecture.s390x;
+    default:
+      return CpuArchitecture.x86;
+  }
 };

package/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>

package/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')}>

package/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 {

package/lib/cim/types/k8s/infra-env-k8s-resource.ts

@@ -23,7 +23,7 @@ export type InfraEnvK8sResource = K8sResourceCommon & {
     };
     nmStateConfigLabelSelector?: Selector;
     additionalNTPSources?: string[];
-    cpuArchitecture?: 'x86_64' | 'arm64';
+    cpuArchitecture?: 'x86_64' | 'arm64' | 's390x';
   };
   status?: {
     agentLabelSelector?: Selector;

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -76,6 +76,7 @@ export const getClusterDetailsInitialValues = ({
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'none',
+    userManagedNetworking: cluster?.userManagedNetworking || false,
   };
 };
 

package/lib/common/components/clusterWizard/types.ts

@@ -31,6 +31,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
+  userManagedNetworking: boolean;
 };
 
 export type HostsValidationsProps<S extends string, V extends string[]> = {

package/lib/common/components/hosts/utils.ts

@@ -211,8 +211,10 @@ export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefin
 
   const fuse = new Fuse(hostsWithHostname, {
     ignoreLocation: true,
+    threshold: 0.3,
     keys: ['hostname'],
   });
+
   return fuse.search(hostnameFilter).map(({ item }) => item.host);
 };
 

package/lib/common/types/cpuArchitecture.ts

@@ -2,6 +2,12 @@ import { ArchitectureSupportLevelId } from '@openshift-assisted/types/assisted-i
 
 export type ClusterCpuArchitecture = 'x86_64' | 'aarch64' | 'arm64' | 'ppc64le' | 's390x' | 'multi';
 
+export type CpuArchitectureItem = {
+  description: string;
+  featureSupportLevelId?: ArchitectureSupportLevelId;
+  label: string;
+};
+
 export enum CpuArchitecture {
   x86 = 'x86_64',
   ARM = 'arm64',
@@ -43,6 +49,28 @@ export const getAllCpuArchitectures = (): SupportedCpuArchitecture[] => [
   CpuArchitecture.s390x,
 ];
 
+export const architectureData: Record<SupportedCpuArchitecture, CpuArchitectureItem> = {
+  [CpuArchitecture.x86]: {
+    description: '',
+    label: 'x86_64',
+  },
+  [CpuArchitecture.ARM]: {
+    description: 'Some features may not be available',
+    featureSupportLevelId: 'ARM64_ARCHITECTURE',
+    label: 'Arm64',
+  },
+  [CpuArchitecture.ppc64le]: {
+    description: 'Some features may not be available',
+    featureSupportLevelId: 'PPC64LE_ARCHITECTURE',
+    label: 'IBM Power (ppc64le)',
+  },
+  [CpuArchitecture.s390x]: {
+    description: 'Some features may not be available',
+    featureSupportLevelId: 'S390X_ARCHITECTURE',
+    label: 'IBM Z (s390x)',
+  },
+};
+
 export const getSupportedCpuArchitectures = (
   cpuArchitectures: CpuArchitecture[],
   day1CpuArchitecture?: SupportedCpuArchitecture,

package/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);
 

package/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>
   );
 };

package/lib/ocm/components/clusterConfiguration/CpuArchitectureDropdown.tsx

@@ -11,17 +11,14 @@ import {
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
+  architectureData,
   CpuArchitecture,
   FeatureId,
   getDefaultCpuArchitecture,
   getFieldId,
   SupportedCpuArchitecture,
 } from '../../../common';
-import {
-  ArchitectureSupportLevelId,
-  Cluster,
-  PlatformType,
-} from '@openshift-assisted/types/assisted-installer-service';
+import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
@@ -29,34 +26,6 @@ import {
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
 import { ExternalPlaformIds, ExternalPlatformLabels } from './platformIntegration/constants';
 
-export type CpuArchitectureItem = {
-  description: string;
-  featureSupportLevelId?: ArchitectureSupportLevelId;
-  label: string;
-};
-
-export const architectureData: Record<SupportedCpuArchitecture, CpuArchitectureItem> = {
-  [CpuArchitecture.x86]: {
-    description: '',
-    label: 'x86_64',
-  },
-  [CpuArchitecture.ARM]: {
-    description: 'Some features may not be available',
-    featureSupportLevelId: 'ARM64_ARCHITECTURE',
-    label: 'Arm64',
-  },
-  [CpuArchitecture.ppc64le]: {
-    description: 'Some features may not be available',
-    featureSupportLevelId: 'PPC64LE_ARCHITECTURE',
-    label: 'IBM Power (ppc64le)',
-  },
-  [CpuArchitecture.s390x]: {
-    description: 'Some features may not be available',
-    featureSupportLevelId: 'S390X_ARCHITECTURE',
-    label: 'IBM Z (s390x)',
-  },
-};
-
 const INPUT_NAME = 'cpuArchitecture';
 const fieldId = getFieldId(INPUT_NAME, 'input');
 

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -14,6 +14,7 @@ import {
   StaticTextField,
   getSupportedCpuArchitectures,
   SupportedCpuArchitecture,
+  architectureData,
 } from '../../../common';
 import DiskEncryptionControlGroup from '../../../common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -21,10 +22,7 @@ import { OcmRichInputField } from '../ui/OcmFormFields';
 import OcmOpenShiftVersion from './OcmOpenShiftVersion';
 import OcmOpenShiftVersionSelect from './OcmOpenShiftVersionSelect';
 import CustomManifestCheckbox from './CustomManifestCheckbox';
-import CpuArchitectureDropdown, {
-  architectureData,
-  CpuArchitectureItem,
-} from './CpuArchitectureDropdown';
+import CpuArchitectureDropdown from './CpuArchitectureDropdown';
 import { OcmBaseDomainField } from './OcmBaseDomainField';
 import OcmSNOControlGroup from './OcmSNOControlGroup';
 import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
@@ -80,9 +78,8 @@ export const OcmClusterDetailsFormFields = ({
     () => getSupportedCpuArchitectures(cpuArchitecturesByVersionImage),
     [cpuArchitecturesByVersionImage],
   );
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const cpuArchitecture = (architectureData[values.cpuArchitecture] as CpuArchitectureItem).label;
+  const cpuArchitecture =
+    architectureData[values.cpuArchitecture as SupportedCpuArchitecture].label;
 
   const featureSupportLevelContext = useNewFeatureSupportLevel();
 

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -16,6 +16,7 @@ import {
   CpuArchitecture,
   FeatureId,
   SupportedCpuArchitecture,
+  architectureData,
   getFieldId,
 } from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
@@ -25,7 +26,6 @@ import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
-import { architectureData } from '../CpuArchitectureDropdown';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 
 const INPUT_NAME = 'platform';

package/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>

package/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

package/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} />;

package/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';

package/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,