@openshift-assisted/ui-lib 2.54.2 → 2.55.1

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/customManifestsValidationSchema.tsx

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
+import { CustomManifestValues } from '../data/dataTypes';
 import {
   getMaxFileSizeMessage,
   validateFileSize,
@@ -62,7 +62,7 @@ const INCORRECT_FILENAME =
 const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
 
 export const getFormViewManifestsValidationSchema = (t: TFunction) =>
-  Yup.object<ManifestFormData>({
+  Yup.object({
     manifests: Yup.array<CustomManifestValues>()
       .of(
         Yup.object({

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

@@ -6,13 +6,16 @@ import {
   canBeDualStack,
   CpuArchitecture,
   DUAL_STACK,
+  getIPv6FromDualstack,
   HostSubnets,
   isAdvNetworkConf,
   isSNO,
   NetworkConfigurationValues,
+  NO_SUBNET_SET,
   selectApiVip,
   selectIngressVip,
 } from '../../../../common';
+import { Address6 } from 'ip-address';
 import {
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
@@ -36,6 +39,7 @@ import {
 } from '@openshift-assisted/types/assisted-installer-service';
 import useSupportLevelsAPI from '../../../hooks/useSupportLevelsAPI';
 import { isOciPlatformType } from '../../utils';
+import { useFeature } from '../../../hooks/use-feature';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   hostSubnets: HostSubnets;
@@ -122,6 +126,33 @@ const getManagedNetworkingState = (
   };
 };
 
+type DefaultNetworkSettings = NetworkConfigurationProps['defaultNetworkSettings'];
+
+const getNetworkDefaultsByFamily = (
+  settings: DefaultNetworkSettings,
+  isDualStack: boolean,
+  isIPv6: boolean,
+) => {
+  if (isDualStack) {
+    return {
+      clusterNetworkDefaults: settings.clusterNetworksDualstack,
+      serviceNetworkDefaults: settings.serviceNetworksDualstack,
+    };
+  }
+  if (isIPv6) {
+    const ipv6Cluster = getIPv6FromDualstack(settings.clusterNetworksDualstack);
+    const ipv6Service = getIPv6FromDualstack(settings.serviceNetworksDualstack);
+    return {
+      clusterNetworkDefaults: ipv6Cluster ? [ipv6Cluster] : settings.clusterNetworksIpv4,
+      serviceNetworkDefaults: ipv6Service ? [ipv6Service] : settings.serviceNetworksIpv4,
+    };
+  }
+  return {
+    clusterNetworkDefaults: settings.clusterNetworksIpv4,
+    serviceNetworkDefaults: settings.serviceNetworksIpv4,
+  };
+};
+
 const NetworkConfiguration = ({
   cluster,
   hostSubnets,
@@ -136,8 +167,10 @@ const NetworkConfiguration = ({
     cluster.platform?.type,
   );
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const { setFieldValue, values, validateField } = useFormikContext<NetworkConfigurationValues>();
+  const { setFieldValue, values, validateField, validateForm } =
+    useFormikContext<NetworkConfigurationValues>();
 
+  const isSingleClusterFeature = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const isSNOCluster = isSNO(cluster);
   const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
   const isDualStack = values.stackType === DUAL_STACK;
@@ -177,30 +210,18 @@ const NetworkConfiguration = ({
       setAdvanced(checked);
 
       if (!checked) {
-        setFieldValue(
-          'clusterNetworks',
-          isDualStack
-            ? defaultNetworkSettings.clusterNetworksDualstack
-            : defaultNetworkSettings.clusterNetworksIpv4,
-          true,
-        );
-        setFieldValue(
-          'serviceNetworks',
-          isDualStack
-            ? defaultNetworkSettings.serviceNetworksDualstack
-            : defaultNetworkSettings.serviceNetworksIpv4,
-          true,
+        const primaryCidr = values.machineNetworks?.[0]?.cidr;
+        const isIPv6Stack = !!primaryCidr && Address6.isValid(primaryCidr);
+        const { clusterNetworkDefaults, serviceNetworkDefaults } = getNetworkDefaultsByFamily(
+          defaultNetworkSettings,
+          isDualStack,
+          isIPv6Stack,
         );
+        setFieldValue('clusterNetworks', clusterNetworkDefaults, true);
+        setFieldValue('serviceNetworks', serviceNetworkDefaults, true);
       }
     },
-    [
-      setFieldValue,
-      isDualStack,
-      defaultNetworkSettings.clusterNetworksDualstack,
-      defaultNetworkSettings.clusterNetworksIpv4,
-      defaultNetworkSettings.serviceNetworksDualstack,
-      defaultNetworkSettings.serviceNetworksIpv4,
-    ],
+    [setFieldValue, isDualStack, values.machineNetworks, defaultNetworkSettings],
   );
 
   React.useEffect(() => {
@@ -209,6 +230,47 @@ const NetworkConfiguration = ({
     }
   }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
 
+  React.useEffect(() => {
+    if (!isSingleClusterFeature || isViewerMode || isDualStack || isAdvanced) {
+      return;
+    }
+    const primaryCidr = values.machineNetworks?.[0]?.cidr;
+    if (!primaryCidr || primaryCidr === NO_SUBNET_SET) {
+      return;
+    }
+    const isIPv6 = Address6.isValid(primaryCidr);
+    const currentClusterCidr = values.clusterNetworks?.[0]?.cidr;
+    const clusterIsIPv6 = currentClusterCidr ? Address6.isValid(currentClusterCidr) : null;
+
+    if (clusterIsIPv6 === isIPv6) {
+      return;
+    }
+
+    const { clusterNetworkDefaults, serviceNetworkDefaults } = getNetworkDefaultsByFamily(
+      defaultNetworkSettings,
+      false,
+      isIPv6,
+    );
+    if (clusterNetworkDefaults) {
+      setFieldValue('clusterNetworks', clusterNetworkDefaults);
+    }
+    if (serviceNetworkDefaults) {
+      setFieldValue('serviceNetworks', serviceNetworkDefaults);
+    }
+    void validateForm();
+  }, [
+    isSingleClusterFeature,
+    isViewerMode,
+    isDualStack,
+    isAdvanced,
+    values.machineNetworks,
+    values.clusterNetworks,
+    defaultNetworkSettings,
+    setFieldValue,
+    validateForm,
+    cluster.id,
+  ]);
+
   const managedNetworkingState = React.useMemo(
     () =>
       getManagedNetworkingState(
@@ -252,6 +314,7 @@ const NetworkConfiguration = ({
             hostSubnets={hostSubnets}
             defaultNetworkValues={defaultNetworkSettings}
             isViewerMode={isViewerMode}
+            allowSingleStackIPv6={isSingleClusterFeature}
           />
         </StackItem>
       )}
@@ -277,6 +340,7 @@ const NetworkConfiguration = ({
             }
             openshiftVersion={cluster.openshiftVersion}
             isViewerMode={isViewerMode}
+            allowSingleStackIPv6={isSingleClusterFeature}
           />
         </StackItem>
       )}

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -9,7 +9,7 @@ import {
   getFormikErrorFields,
   getHostSubnets,
   HostSubnets,
-  SINGLE_STACK,
+  DUAL_STACK,
   isSNO,
   LoadingState,
   NetworkConfigurationValues,
@@ -262,7 +262,7 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
         if (values.vipDhcpAllocation) {
           delete params.apiVips;
           delete params.ingressVips;
-        } else if (values.stackType === SINGLE_STACK) {
+        } else if (values.stackType !== DUAL_STACK) {
           // The API will rebuild the default machineNetwork
           params.machineNetworks = [];
         }

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -1,8 +1,11 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
+import { Address6 } from 'ip-address';
 import {
   clusterNetworksValidationSchema,
   dualStackValidationSchema,
+  getIPv6FromDualstack,
+  isPrimaryIPv6,
   HostSubnets,
   isDualStack,
   isSNO,
@@ -10,6 +13,7 @@ import {
   NetworkConfigurationValues,
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
+  IPv6ValidationSchema,
   sshPublicKeyValidationSchema,
   SINGLE_STACK,
   DUAL_STACK,
@@ -36,6 +40,38 @@ export const getNetworkInitialValues = (
 ): NetworkConfigurationValues => {
   const isSNOCluster = isSNO(cluster);
   const isDualStackType = isDualStack(cluster);
+  const primaryMachineNetworkCidr = cluster.machineNetworks?.[0]?.cidr;
+  const isIPv6OnlyStack =
+    !isDualStackType && !!primaryMachineNetworkCidr && Address6.isValid(primaryMachineNetworkCidr);
+
+  const getStackType = (): NetworkConfigurationValues['stackType'] => {
+    if (isDualStackType) return DUAL_STACK;
+    return SINGLE_STACK;
+  };
+
+  const getDefaultClusterNetworks = () => {
+    if (isDualStackType) return defaultNetworkValues.clusterNetworksDualstack;
+    if (isIPv6OnlyStack) {
+      const ipv6Entry = getIPv6FromDualstack(defaultNetworkValues.clusterNetworksDualstack);
+      return ipv6Entry ? [{ ...ipv6Entry, clusterId: cluster?.id }] : undefined;
+    }
+    return defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
+      ...network,
+      clusterId: cluster?.id,
+    }));
+  };
+
+  const getDefaultServiceNetworks = () => {
+    if (isDualStackType) return defaultNetworkValues.serviceNetworksDualstack;
+    if (isIPv6OnlyStack) {
+      const ipv6Entry = getIPv6FromDualstack(defaultNetworkValues.serviceNetworksDualstack);
+      return ipv6Entry ? [{ ...ipv6Entry, clusterId: cluster?.id }] : undefined;
+    }
+    return defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
+      ...network,
+      clusterId: cluster?.id,
+    }));
+  };
 
   return {
     apiVips: cluster.apiVips,
@@ -50,23 +86,9 @@ export const getNetworkInitialValues = (
         : 'clusterManaged',
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
     machineNetworks: cluster.machineNetworks || [],
-    stackType: isDualStackType ? DUAL_STACK : SINGLE_STACK,
-    clusterNetworks:
-      cluster.clusterNetworks ||
-      (isDualStackType
-        ? defaultNetworkValues.clusterNetworksDualstack
-        : defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
-            ...network,
-            clusterId: cluster?.id,
-          }))),
-    serviceNetworks:
-      cluster.serviceNetworks ||
-      (isDualStackType
-        ? defaultNetworkValues.serviceNetworksDualstack
-        : defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
-            ...network,
-            clusterId: cluster?.id,
-          }))),
+    stackType: getStackType(),
+    clusterNetworks: cluster.clusterNetworks || getDefaultClusterNetworks(),
+    serviceNetworks: cluster.serviceNetworks || getDefaultServiceNetworks(),
   };
 };
 
@@ -87,7 +109,12 @@ export const getNetworkConfigurationValidationSchema = (
           : machineNetworksValidationSchema.when('stackType', {
               is: (stackType: NetworkConfigurationValues['stackType']) =>
                 stackType === SINGLE_STACK,
-              then: () => machineNetworksValidationSchema.concat(IPv4ValidationSchema),
+              then: () => {
+                if (isPrimaryIPv6(values.machineNetworks)) {
+                  return machineNetworksValidationSchema.concat(IPv6ValidationSchema);
+                }
+                return machineNetworksValidationSchema.concat(IPv4ValidationSchema);
+              },
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
@@ -97,13 +124,23 @@ export const getNetworkConfigurationValidationSchema = (
             }),
       clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === SINGLE_STACK,
-        then: (schema) => schema.concat(IPv4ValidationSchema),
+        then: (schema) => {
+          if (isPrimaryIPv6(values.machineNetworks)) {
+            return schema.concat(IPv6ValidationSchema);
+          }
+          return schema.concat(IPv4ValidationSchema);
+        },
         otherwise: (schema) =>
           schema.concat(dualStackValidationSchema('cluster network', t, openshiftVersion)),
       }),
       serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === SINGLE_STACK,
-        then: (schema) => schema.concat(IPv4ValidationSchema),
+        then: (schema) => {
+          if (isPrimaryIPv6(values.machineNetworks)) {
+            return schema.concat(IPv6ValidationSchema);
+          }
+          return schema.concat(IPv4ValidationSchema);
+        },
         otherwise: (schema) =>
           schema.concat(dualStackValidationSchema('service network', t, openshiftVersion)),
       }),

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

@@ -8,6 +8,7 @@ import {
   useTranslation,
 } from '../../../../common';
 import { getManagementType, getStackTypeLabel } from './utils';
+import { useFeature } from '../../../hooks/use-feature';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type ReviewTableRowsType = {
@@ -17,6 +18,7 @@ type ReviewTableRowsType = {
 
 export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
   const { t } = useTranslation();
+  const isSingleClusterFeature = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const rows = React.useMemo(() => {
     const networkRows = [
       {
@@ -34,7 +36,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Stack type', colSpan: 2 },
           {
-            title: getStackTypeLabel(cluster),
+            title: getStackTypeLabel(cluster, isSingleClusterFeature),
             props: { 'data-testid': 'stack-type', colSpan: 2 },
           },
         ],
@@ -125,7 +127,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
       });
 
     return networkRows;
-  }, [cluster]);
+  }, [cluster, isSingleClusterFeature]);
 
   const rowsAdvanced = React.useMemo(() => {
     return [

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

@@ -5,8 +5,11 @@ import { Cluster, DiskEncryption } from '@openshift-assisted/types/assisted-inst
 export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
   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/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/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,
@@ -89,7 +89,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
           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/ClusterWizardContext.tsx

@@ -3,6 +3,7 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { UISettingsValues } from '../../../common';
+import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -18,6 +19,10 @@ export type ClusterWizardContextType = {
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
+  disconnectedCluster?: Cluster;
+  setDisconnectedCluster: (cluster: Cluster | undefined) => void;
+  disconnectedInfraEnv?: InfraEnv;
+  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

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,
@@ -88,6 +88,8 @@ const ClusterWizardContextProvider = ({
   const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedCluster, setDisconnectedCluster] = React.useState<Cluster | undefined>();
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>();
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -228,6 +230,10 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedCluster,
+      setDisconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
@@ -240,6 +246,9 @@ const ClusterWizardContextProvider = ({
     updateUISettings,
     installDisconnected,
     connectedWizardStepIds,
+    disconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

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

@@ -4,6 +4,7 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { useInfraEnv } from '../../hooks';
 import { CpuArchitecture } from '../../../common/types';
@@ -13,6 +14,8 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraE
   switch (currentStepId) {
     case 'disconnected-review':
       return <ReviewStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     case 'disconnected-basic':
       return <BasicStep />;
     default:

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import {
@@ -74,7 +74,7 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
 
   const handleNext = () => {
     if (window.location.pathname.indexOf('assisted-installer') > -1) {
-      navigate(pathname, { state: undefined, replace: true });
+      void navigate(pathname, { state: undefined, replace: true });
     }
     clusterWizardContext.moveNext();
   };

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,6 +14,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
+  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [