@openshift-assisted/ui-lib 5.0.0-cim → 5.0.1-cim

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -1,17 +1,75 @@
 import React from 'react';
+import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
-import { genericTableRowKey } from '../../../../common';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { genericTableRowKey, selectAllOlmOperators } from '../../../../common';
+import { useStateSafely } from '../../../../common/hooks';
+import { Bundle, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { TableSummaryExpandable } from './TableSummaryExpandable';
 import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
+import BundleService from '../../../services/BundleService';
+
+const fetchBundles = async (
+  openshiftVersion: string,
+  cpuArchitecture: string,
+  platformType: string,
+): Promise<Bundle[]> => {
+  try {
+    return await BundleService.listBundles(
+      openshiftVersion,
+      cpuArchitecture,
+      platformType,
+      undefined,
+    );
+  } catch (_e) {
+    return [] as Bundle[];
+  }
+};
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
   const { byKey: opSpecs } = useOperatorSpecs();
+  const selectedBundles = cluster.operatorBundles || [];
+  const [bundleTitlesById, setBundleTitlesById] = useStateSafely<Record<string, string>>({});
+  const hasFetchedBundles = React.useRef(false);
+  const hasSelectedBundles = selectedBundles.length > 0;
+  React.useEffect(() => {
+    if (!hasFetchedBundles.current && hasSelectedBundles) {
+      hasFetchedBundles.current = true;
+      void (async () => {
+        const bundles = await fetchBundles(
+          cluster.openshiftVersion || '',
+          cluster.cpuArchitecture || '',
+          cluster.platform?.type || '',
+        );
+        const titlesById = Object.fromEntries(
+          bundles
+            .filter((bundle) => !!bundle.id && !!bundle.title)
+            .map((bundle) => [bundle.id, bundle.title]),
+        ) as Record<string, string>;
+        setBundleTitlesById(titlesById);
+      })();
+    }
+  }, [
+    cluster.cpuArchitecture,
+    cluster.openshiftVersion,
+    cluster.platform?.type,
+    hasSelectedBundles,
+    setBundleTitlesById,
+  ]);
+
+  const bundleRows = selectedBundles.map((bundle) => ({
+    rowId: `bundle-${bundle.id}`,
+    cells: [
+      {
+        title: bundleTitlesById[bundle.id] || bundle.id,
+        props: { 'data-testid': `bundle-${bundle.id}` },
+      },
+    ],
+  }));
 
   const rows = React.useMemo(
     () =>
-      cluster.monitoredOperators
-        ?.filter(({ name }) => !!name && !!opSpecs[name])
+      selectAllOlmOperators(cluster)
+        .filter(({ name }) => !!name && !!opSpecs[name])
         .map((op) => {
           const opId = op.name as string;
           return {
@@ -25,33 +83,65 @@ export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
             ],
           };
         }),
-    [cluster.monitoredOperators, opSpecs],
+    [cluster, opSpecs],
   );
 
-  if (!rows?.length) {
+  if (!rows?.length && selectedBundles.length === 0) {
     return null;
   }
 
   return (
-    <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
-      <Table
-        variant={TableVariant.compact}
-        borders={false}
-        aria-label={'Operators review table'}
-        className="review-table"
-      >
-        <Tbody>
-          {rows.map((row, i) => (
-            <Tr key={genericTableRowKey(row.rowId)}>
-              {row.cells.map((cell, j) => (
-                <Td key={`cell-${i}-${j}`} {...cell.props}>
-                  {cell.title}
-                </Td>
+    <TableSummaryExpandable title={'Bundles and operators'} id={'operators-expandable'}>
+      {bundleRows.length > 0 && (
+        <>
+          <Title headingLevel="h4" size="md" className="pf-v6-u-mb-sm">
+            Bundles ({bundleRows.length})
+          </Title>
+          <Table
+            variant={TableVariant.compact}
+            borders={false}
+            aria-label={'Bundles review table'}
+            className="review-table pf-v6-u-mb-md"
+          >
+            <Tbody>
+              {bundleRows.map((row, i) => (
+                <Tr key={genericTableRowKey(row.rowId)}>
+                  {row.cells.map((cell, j) => (
+                    <Td key={`bundle-cell-${i}-${j}`} {...cell.props}>
+                      {cell.title}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </>
+      )}
+      {rows.length > 0 && (
+        <>
+          <Title headingLevel="h4" size="md" className="pf-v6-u-mb-sm">
+            Operators ({rows.length})
+          </Title>
+          <Table
+            variant={TableVariant.compact}
+            borders={false}
+            aria-label={'Operators review table'}
+            className="review-table"
+          >
+            <Tbody>
+              {rows.map((row, i) => (
+                <Tr key={genericTableRowKey(row.rowId)}>
+                  {row.cells.map((cell, j) => (
+                    <Td key={`cell-${i}-${j}`} {...cell.props}>
+                      {cell.title}
+                    </Td>
+                  ))}
+                </Tr>
               ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+            </Tbody>
+          </Table>
+        </>
+      )}
     </TableSummaryExpandable>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -19,10 +19,7 @@ import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
 import PlatformIntegrationNote from '../platformIntegration/PlatformIntegrationNote';
 import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { ListManifestsExtended } from '../manifestsConfiguration/data/dataTypes';
-
-const userProvidedManifests = (manifests: ListManifestsExtended | undefined) =>
-  (manifests ?? []).filter((m) => m.manifestSource !== 'system');
+import { userProvidedManifests } from '../manifestsConfiguration/components/utils';
 
 export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
   const { customManifests } = useClusterCustomManifests(cluster.id, false);

package/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.css

@@ -0,0 +1,3 @@
+.pf-v6-c-expandable-section:not(.pf-m-expanded) {
+  --pf-v6-c-expandable-section__content--MaxHeight: 0;
+}

package/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ExpandableSection, Content } from '@patternfly/react-core';
+import './TableSummaryExpandable.css';
 
 export const TableSummaryExpandable = ({
   title,
@@ -20,7 +21,6 @@ export const TableSummaryExpandable = ({
       id={id ? id : title}
     >
       {children}
-      <br />
     </ExpandableSection>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/utils.test.ts

@@ -169,6 +169,47 @@ describe('getStackTypeLabel', () => {
     });
   });
 
+  describe('with isSingleClusterFeature=true', () => {
+    test('returns "Single stack" for IPv4 single-stack cluster', () => {
+      const cluster = createCluster({
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+      });
+
+      expect(getStackTypeLabel(cluster, true)).toBe('Single stack');
+    });
+
+    test('returns "Single stack" for IPv6 single-stack cluster', () => {
+      const cluster = createCluster({
+        machineNetworks: [createMachineNetwork('2001:db8::/64')],
+        clusterNetworks: [createClusterNetwork('fd01::/48', 64)],
+        serviceNetworks: [createServiceNetwork('fd02::/112')],
+      });
+
+      expect(getStackTypeLabel(cluster, true)).toBe('Single stack');
+    });
+
+    test('still returns "Dual-stack" for dual-stack cluster', () => {
+      const cluster = createCluster({
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster, true)).toBe('Dual-stack');
+    });
+  });
+
   describe('edge cases', () => {
     test('handles undefined openshiftVersion', () => {
       const cluster = createCluster({

package/lib/ocm/components/clusterConfiguration/review/utils.tsx

@@ -3,10 +3,13 @@ import { isDualStack } from '../../../../common';
 import { Cluster, DiskEncryption } from '@openshift-assisted/types/assisted-installer-service';
 
 export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
-  userManagedNetworking ? 'User-Managed networking' : 'Cluster-managed networking';
+  userManagedNetworking ? 'User-managed networking' : 'Cluster-managed networking';
 
-export const getStackTypeLabel = (cluster: Cluster): string =>
-  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
+export const getStackTypeLabel = (cluster: Cluster, isSingleClusterFeature = false): string => {
+  if (isDualStack(cluster)) return 'Dual-stack';
+  if (isSingleClusterFeature) return 'Single stack';
+  return 'IPv4';
+};
 
 export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
   let diskEncryptionType = null;

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.tsx

@@ -8,6 +8,8 @@ import { useErrorMonitor } from '../../../../../common/components/ErrorHandling/
 import { getApiErrorMessage } from '../../../../../common/api';
 import { StaticIpFormProps } from './propTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
+import { useFeature } from '../../../../hooks/use-feature';
+import { getStaticNetworkConfig } from '../data/fromInfraEnv';
 
 /** Reports form state and triggers save on every value change (useFormikAutoSave) */
 const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
@@ -69,7 +71,14 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
   const { clearAlerts, addAlert } = useAlerts();
   const { captureException } = useErrorMonitor();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const initialValues = showEmptyValues ? getEmptyValues() : getInitialValues(infraEnv);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const prefillFromInfraEnv = isSingleClusterFeatureEnabled && !!getStaticNetworkConfig(infraEnv);
+  const initialValues = React.useMemo(() => {
+    if (showEmptyValues && !prefillFromInfraEnv) {
+      return getEmptyValues();
+    }
+    return getInitialValues(infraEnv);
+  }, [showEmptyValues, prefillFromInfraEnv, infraEnv, getInitialValues, getEmptyValues]);
 
   const handleSubmit = async (values: StaticIpFormValues) => {
     clearAlerts();

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -9,7 +9,8 @@ import {
 } from '@patternfly/react-core';
 import { StaticIpInfo, StaticIpView } from '../data/dataTypes';
 import StaticIpViewRadioGroup from './StaticIpViewRadioGroup';
-import { getStaticIpInfo } from '../data/fromInfraEnv';
+import { getStaticIpInfo, getStaticNetworkConfig } from '../data/fromInfraEnv';
+import { useFeature } from '../../../../hooks/use-feature';
 import { StaticIpFormState, StaticIpPageProps, StaticIpViewProps } from './propTypes';
 import { YamlView } from './YamlView/YamlView';
 import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
@@ -34,6 +35,8 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   onFormStateChange: onFormStateChangeParent,
 }) => {
   const clusterWizardContext = useClusterWizardContext();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const prefillFromInfraEnv = isSingleClusterFeatureEnabled && !!getStaticNetworkConfig(infraEnv);
   const [confirmOnChangeView, setConfirmOnChangeView] = React.useState<boolean>(false);
   const [viewChanged, setViewChanged] = React.useState<boolean>(false);
 
@@ -45,10 +48,10 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     [clusterWizardContext],
   );
 
-  const initialStaticIpInfo = React.useMemo<StaticIpInfo | undefined>(() => {
-    return getStaticIpInfo(infraEnv);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const initialStaticIpInfo = React.useMemo<StaticIpInfo | undefined>(
+    () => getStaticIpInfo(infraEnv),
+    [infraEnv],
+  );
 
   const onFormStateChange = React.useCallback(
     (formState: StaticIpFormState) => {
@@ -65,7 +68,7 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     onFormStateChange,
     infraEnv,
     updateInfraEnv,
-    showEmptyValues: viewChanged,
+    showEmptyValues: viewChanged && !prefillFromInfraEnv,
   };
 
   const content = (() => {

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataToInfraEnvField.ts

@@ -73,6 +73,7 @@ const getNmstateObject = (
       realProtocolConfigs[protocolVersion] = getNmstateProtocolConfig(
         hostIp,
         getPrefixLength(networkWide, protocolVersion),
+        protocolVersion,
       );
       if (networkWide.useVlan && networkWide.vlanId) {
         if (bondType && hasBondsConfigured) {
@@ -94,6 +95,7 @@ const getNmstateObject = (
         [protocolVersion]: getNmstateProtocolConfig(
           DUMMY_NMSTATE_ADDRESSES[protocolVersion].ip,
           DUMMY_NMSTATE_ADDRESSES[protocolVersion].prefixLength,
+          protocolVersion,
         ),
       };
       nicName = getDummyNicName(protocolVersion);

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateTypes.ts

@@ -15,6 +15,7 @@ export type NmstateProtocolConfig = {
   address: NmstateAddress[];
   enabled: boolean;
   dhcp: boolean;
+  autoconf?: boolean;
 };
 
 export type NmstateProtocolConfigs = {

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateYaml.ts

@@ -80,6 +80,7 @@ export const getProtocolType = (comments: string[]): StaticProtocolType | null =
 export const getNmstateProtocolConfig = (
   ipAddress: string,
   prefixLength: number,
+  protocolVersion?: ProtocolVersion,
 ): NmstateProtocolConfig => {
   return {
     address: [
@@ -90,6 +91,7 @@ export const getNmstateProtocolConfig = (
     ],
     enabled: true,
     dhcp: false,
+    ...(protocolVersion === ProtocolVersion.ipv6 && { autoconf: false }),
   };
 };
 

package/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx

@@ -33,7 +33,7 @@ import {
   unstable_HistoryRouter as HistoryRouter,
   HistoryRouterProps,
   BrowserRouter,
-} from 'react-router-dom-v5-compat';
+} from 'react-router';
 
 type AssistedInstallerDetailCardProps = {
   aiClusterId: string;

package/lib/ocm/components/clusterDetail/ClusterDetail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import { Stack, StackItem, Content, ButtonVariant, GridItem, Grid } from '@patternfly/react-core';
 import { ToolbarButton, Alerts, getEnabledHosts, selectOlmOperators, isSNO } from '../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -41,7 +41,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       try {
         const { data } = await ClustersAPI.allowAddHosts(cluster.id);
         updateCluster(data);
-        navigate(`${routeBasePath}/clusters/${cluster.id}`);
+        void navigate(`${routeBasePath}/clusters/${cluster.id}`);
       } catch (e) {
         handleApiError(e);
       }
@@ -102,7 +102,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
           {!isSingleClusterFeatureEnabled && (
             <ToolbarButton
               variant={ButtonVariant.link}
-              onClick={() => navigate('..')}
+              onClick={() => void navigate('..')}
               id={getClusterDetailId('button-back-to-all-clusters')}
             >
               Back to all clusters

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.tsx

@@ -7,13 +7,15 @@ import {
   RenderIf,
   canOpenConsole,
 } from '../../../common';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 import { canAbortInstallation } from '../clusters/utils';
 import { onFetchEvents } from '../fetching/fetchEvents';
 import ViewClusterEventsButton from '../../../common/components/ui/ViewClusterEventsButton';
-import { LaunchOpenshiftConsoleButton } from '../../../common/components/clusterDetail/ConsoleModal';
+import { ToolbarButton } from '../../../common/components/ui/Toolbar';
 import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 import './ClusterDetailsButtonGroup.css';
 
@@ -24,6 +26,30 @@ type ClusterDetailsButtonGroupProps = {
   showKubeConfig?: boolean;
 };
 
+const LaunchOpenshiftConsoleButton: React.FC<{
+  consoleUrl?: string;
+  isDisabled: boolean;
+  id?: string;
+}> = ({ consoleUrl, isDisabled, id }) => {
+  const { t } = useTranslation();
+  return (
+    <ToolbarButton
+      variant={ButtonVariant.primary}
+      component="a"
+      href={consoleUrl}
+      target="_blank"
+      rel="noopener"
+      isDisabled={isDisabled}
+      icon={<ExternalLinkAltIcon />}
+      iconPosition="right"
+      id={id}
+      data-testid={id}
+    >
+      {t('ai:Launch OpenShift Console')}
+    </ToolbarButton>
+  );
+};
+
 const getID = (suffix: string) => `cluster-detail-${suffix}`;
 
 const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
@@ -60,7 +86,6 @@ const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
         <FlexItem>
           <LaunchOpenshiftConsoleButton
             isDisabled={false}
-            cluster={cluster}
             consoleUrl={credentials?.consoleUrl}
             id={getID('button-launch-console')}
           />

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router';
 import { useDispatch } from 'react-redux';
 import {
   useAlerts,
@@ -24,7 +24,6 @@ import {
   UISettingService,
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-import BundleService from '../../services/BundleService';
 import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsProps = {
@@ -80,28 +79,17 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
-        //For Assisted Migration we need the LVMs operator and also the virtualization bundle operators
+        // For Assisted Migration we need LVM as standalone and the virtualization bundle.
         if (isAssistedMigration) {
           params.olmOperators = [{ name: 'lvm' }];
-          const selectedBundle = (
-            await BundleService.listBundles(
-              params.openshiftVersion,
-              params.cpuArchitecture,
-              params.platform?.type,
-            )
-          ).find((b) => b.id === 'virtualization');
-          const virtOperators = selectedBundle?.operators;
-          params.olmOperators = [
-            ...params.olmOperators,
-            ...(virtOperators ? virtOperators.map((op) => ({ name: op })) : []),
-          ];
+          params.operatorBundles = [{ id: 'virtualization', optionalOperators: [] }];
         }
         const cluster = await ClustersService.create(
           params,
           isAssistedMigration,
           isSingleClusterFeatureEnabled,
         );
-        navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
+        void navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
         if (isAssistedMigration) {
           try {

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-v5-compat';
+import { useLocation } from 'react-router';
 import { Flex, 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-v5-compat';
+import { useLocation } from 'react-router';
 import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardContext';
 import {
   ClusterWizardFlowStateType,
@@ -66,8 +66,8 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
   }
 
-  if (isSingleClusterFeatureEnabled) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
+  if (isSingleClusterFeatureEnabled && !stepsCopy.includes('credentials-download')) {
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'custom-manifests', ['credentials-download']);
   }
 
   return stepsCopy;
@@ -116,13 +116,11 @@ const ClusterWizardContextProvider = ({
         locationState,
         staticIpInfo,
         cluster?.status,
-        cluster?.hosts,
-        customManifestsStepNeedsToBeFilled,
+        cluster,
       );
       const firstStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo?.view,
-
         isSingleClusterFeatureEnabled,
       );
 
@@ -150,7 +148,7 @@ const ClusterWizardContextProvider = ({
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uiSettings, UISettingsLoading, UISettingsError]);
+  }, [uiSettings, UISettingsLoading, UISettingsError, isSingleClusterFeatureEnabled]);
 
   const contextValue = React.useMemo<ClusterWizardContextType | null>(() => {
     if (!wizardStepIds || !currentStepId) {
@@ -167,7 +165,6 @@ const ClusterWizardContextProvider = ({
       const newStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo.view,
-
         isSingleClusterFeatureEnabled,
       );
       setWizardStepIds(newStepIds);
@@ -207,12 +204,7 @@ const ClusterWizardContextProvider = ({
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
         if (type === HostsNetworkConfigurationType.STATIC) {
           setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              StaticIpView.FORM,
-
-              isSingleClusterFeatureEnabled,
-            ),
+            getWizardStepIds(wizardStepIds, StaticIpView.FORM, isSingleClusterFeatureEnabled),
           );
         } else {
           setWizardStepIds(

package/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import { Alert, AlertGroup, AlertVariant } from '@patternfly/react-core';
 import {
   WizardFooter,

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -5,24 +5,28 @@ import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
 import { ClusterWizardStepsType } from './wizardTransition';
+import { useInfraEnv } from '../../hooks';
+import { CpuArchitecture } from '../../../common/types';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
-const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
+const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraEnv) => {
   switch (currentStepId) {
     case 'disconnected-review':
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
     default:
-      return <ClusterDetails />;
+      return <ClusterDetails infraEnv={infraEnv} />;
   }
 };
 
 const NewClusterWizard: React.FC = () => {
+  const { infraEnv } = useInfraEnv('', CpuArchitecture.USE_DAY1_ARCHITECTURE);
   const { currentStepId } = useClusterWizardContext();
 
   return (
     <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
-      {getCurrentStep(currentStepId)}
+      {getCurrentStep(currentStepId, infraEnv)}
     </div>
   );
 };