@openshift-assisted/ui-lib 2.55.1 → 2.55.3

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

@@ -10,7 +10,6 @@ import {
   isStepAfter,
 } from './wizardTransition';
 import { HostsNetworkConfigurationType } from '../../services';
-import { defaultWizardSteps, staticIpFormViewSubSteps } from './constants';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { getStaticIpInfo } from '../clusterConfiguration/staticIp/data/fromInfraEnv';
 import { AssistedInstallerOCMPermissionTypesListType, useAlerts } from '../../../common';
@@ -21,57 +20,7 @@ import { AlertVariant } from '@patternfly/react-core';
 import { useFeature } from '../../hooks/use-feature';
 import { isThirdPartyCNI } from '../../../common/types/networkType';
 import { isOciPlatformType } from '../utils';
-
-const addStepToClusterWizard = (
-  wizardStepIds: ClusterWizardStepsType[],
-  addAfterStep: ClusterWizardStepsType,
-  itemsToAdd: ClusterWizardStepsType[],
-) => {
-  const stepsIds = [...wizardStepIds];
-  const referencePosition = stepsIds.findIndex((step) => step === addAfterStep);
-  const found = wizardStepIds.filter((step) => step === itemsToAdd[0]);
-  if (referencePosition !== -1 && found.length === 0) {
-    stepsIds.splice(referencePosition + 1, 0, ...itemsToAdd);
-  }
-  return stepsIds;
-};
-
-const removeStepFromClusterWizard = (
-  wizardStepIds: ClusterWizardStepsType[],
-  itemToRemove: ClusterWizardStepsType,
-  numberItemsToRemove: number,
-) => {
-  const stepsIds = [...wizardStepIds];
-  const position = stepsIds.findIndex((step) => step === itemToRemove);
-  if (position !== -1) {
-    stepsIds.splice(position, numberItemsToRemove);
-  }
-  return stepsIds;
-};
-
-const getWizardStepIds = (
-  wizardStepIds: ClusterWizardStepsType[] | undefined,
-  staticIpView?: StaticIpView | 'dhcp-selected',
-
-  isSingleClusterFeatureEnabled?: boolean,
-): ClusterWizardStepsType[] => {
-  let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...defaultWizardSteps];
-  if (staticIpView === StaticIpView.YAML) {
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'cluster-details', ['static-ip-yaml-view']);
-  } else if (staticIpView === StaticIpView.FORM) {
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-yaml-view', 1);
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'cluster-details', staticIpFormViewSubSteps);
-  } else if (staticIpView === 'dhcp-selected') {
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
-  }
-
-  if (isSingleClusterFeatureEnabled && !stepsCopy.includes('credentials-download')) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'custom-manifests', ['credentials-download']);
-  }
-
-  return stepsCopy;
-};
+import { getDisconnectedWizardStepIds, getWizardStepIds } from './utils';
 
 const ClusterWizardContextProvider = ({
   children,
@@ -90,6 +39,8 @@ const ClusterWizardContextProvider = ({
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
   const [disconnectedCluster, setDisconnectedCluster] = React.useState<Cluster | undefined>();
   const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>();
+  const [disconnectedWizardStepIds, setDisconnectedWizardStepIds] =
+    React.useState<ClusterWizardStepsType[]>(disconnectedSteps);
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -101,7 +52,7 @@ const ClusterWizardContextProvider = ({
   const { clearAlerts, addAlert, alerts } = useAlerts();
   const setClusterPermissions = useSetClusterPermissions();
 
-  const wizardStepIds = installDisconnected ? disconnectedSteps : connectedWizardStepIds;
+  const wizardStepIds = installDisconnected ? disconnectedWizardStepIds : connectedWizardStepIds;
 
   React.useEffect(() => {
     if (!UISettingsLoading) {
@@ -159,17 +110,26 @@ const ClusterWizardContextProvider = ({
 
     const handleMoveFromStaticIp = () => {
       //if static ip view change wasn't persisted, moving from static ip step should change the wizard steps to match the view in the infra env
-      const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
-      if (!staticIpInfo) {
-        throw `Wizard step is currently ${currentStepId}, but no static ip info is defined`;
+      if (installDisconnected) {
+        const staticIpInfo = disconnectedInfraEnv
+          ? getStaticIpInfo(disconnectedInfraEnv)
+          : undefined;
+        if (!staticIpInfo) {
+          throw `Wizard step is currently ${currentStepId}, but no static ip info is defined`;
+        }
+        setDisconnectedWizardStepIds(getDisconnectedWizardStepIds(staticIpInfo.view));
+      } else {
+        const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
+        if (!staticIpInfo) {
+          throw `Wizard step is currently ${currentStepId}, but no static ip info is defined`;
+        }
+        const newStepIds = getWizardStepIds(
+          wizardStepIds,
+          staticIpInfo.view,
+          isSingleClusterFeatureEnabled,
+        );
+        setWizardStepIds(newStepIds);
       }
-
-      const newStepIds = getWizardStepIds(
-        wizardStepIds,
-        staticIpInfo.view,
-        isSingleClusterFeatureEnabled,
-      );
-      setWizardStepIds(newStepIds);
     };
 
     const onSetCurrentStepId = (stepId: ClusterWizardStepsType) => {
@@ -201,17 +161,33 @@ const ClusterWizardContextProvider = ({
         } else {
           setCurrentStepId('static-ip-network-wide-configurations');
         }
-        setWizardStepIds(getWizardStepIds(wizardStepIds, view, isSingleClusterFeatureEnabled));
+        if (installDisconnected) {
+          setDisconnectedWizardStepIds(getDisconnectedWizardStepIds(view));
+        } else {
+          setWizardStepIds(getWizardStepIds(wizardStepIds, view, isSingleClusterFeatureEnabled));
+        }
       },
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
-        if (type === HostsNetworkConfigurationType.STATIC) {
-          setWizardStepIds(
-            getWizardStepIds(wizardStepIds, StaticIpView.FORM, isSingleClusterFeatureEnabled),
-          );
+        if (installDisconnected) {
+          if (type === HostsNetworkConfigurationType.STATIC) {
+            const staticIpInfo = disconnectedInfraEnv
+              ? getStaticIpInfo(disconnectedInfraEnv)
+              : undefined;
+            const view = staticIpInfo?.view ?? StaticIpView.FORM;
+            setDisconnectedWizardStepIds(getDisconnectedWizardStepIds(view));
+          } else {
+            setDisconnectedWizardStepIds(getDisconnectedWizardStepIds('dhcp-selected'));
+          }
         } else {
-          setWizardStepIds(
-            getWizardStepIds(wizardStepIds, 'dhcp-selected', isSingleClusterFeatureEnabled),
-          );
+          if (type === HostsNetworkConfigurationType.STATIC) {
+            const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
+            const view = staticIpInfo?.view ?? StaticIpView.FORM;
+            setWizardStepIds(getWizardStepIds(wizardStepIds, view, isSingleClusterFeatureEnabled));
+          } else {
+            setWizardStepIds(
+              getWizardStepIds(wizardStepIds, 'dhcp-selected', isSingleClusterFeatureEnabled),
+            );
+          }
         }
       },
       wizardStepIds: wizardStepIds,
@@ -225,6 +201,7 @@ const ClusterWizardContextProvider = ({
       setInstallDisconnected: (enabled: boolean) => {
         setInstallDisconnected(enabled);
         if (enabled) {
+          setDisconnectedWizardStepIds(disconnectedSteps);
           onSetCurrentStepId(disconnectedSteps[0]);
         } else {
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);

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

@@ -13,6 +13,30 @@ import { staticIpFormViewSubSteps, wizardStepNames } from './constants';
 import WizardNavItem from '../../../common/components/ui/WizardNavItem';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
+export type WizardNavEntry = {
+  stepId: ClusterWizardStepsType;
+  visualNumber: number;
+  isStaticIpFormGroup: boolean;
+};
+
+export const getWizardNavEntries = (wizardStepIds: ClusterWizardStepsType[]): WizardNavEntry[] => {
+  const entries: WizardNavEntry[] = [];
+  let i = 0;
+  let visualNumber = 1;
+  while (i < wizardStepIds.length) {
+    const stepId = wizardStepIds[i];
+    if (stepId === 'static-ip-network-wide-configurations') {
+      entries.push({ stepId, visualNumber, isStaticIpFormGroup: true });
+      i += 2;
+    } else {
+      entries.push({ stepId, visualNumber, isStaticIpFormGroup: false });
+      i += 1;
+    }
+    visualNumber += 1;
+  }
+  return entries;
+};
+
 const isStepValid = (stepId: ClusterWizardStepsType, cluster?: Cluster): boolean => {
   if (!cluster) {
     return true;
@@ -48,7 +72,11 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
     return stepId === 'cluster-details' ? false : isStepIdxAfterCurrent(idx);
   };
 
-  const getNavItem = (idx: number, stepId: ClusterWizardStepsType): ReactNode => {
+  const getNavItem = (
+    idx: number,
+    stepId: ClusterWizardStepsType,
+    visualNumber: number,
+  ): ReactNode => {
     return (
       <WizardNavItem
         stepIndex={idx}
@@ -60,11 +88,12 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         isDisabled={isStepDisabled(idx, stepId)}
         isValid={() => isStepValid(stepId, cluster)}
         data-testid={`cluster-wizard-nav-item-${stepId}`}
+        style={{ '--cluster-wizard-step-number': `"${visualNumber}"` } as React.CSSProperties}
       />
     );
   };
 
-  const getStaticIpFormViewNavItem = (idx: number): ReactNode => {
+  const getStaticIpFormViewNavItem = (idx: number, visualNumber: number): ReactNode => {
     return (
       <WizardNavItem
         stepIndex={idx}
@@ -74,13 +103,14 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
         data-testid={`cluster-wizard-nav-item-static-network-configuration-form-view`}
+        style={{ '--cluster-wizard-step-number': `"${visualNumber}"` } as React.CSSProperties}
       >
         <WizardNav
           isInnerList
           data-testid="cluster-wizard-nav-item-static-network-configuration-form-view-inner-list"
         >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
-            return getNavItem(idx + subIdx, stepId);
+            return getNavItem(idx + subIdx, stepId, visualNumber);
           })}
         </WizardNav>
       </WizardNavItem>
@@ -88,20 +118,13 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
   };
 
   const getWizardNavItems = (): ReactNode[] => {
-    const navItems: ReactNode[] = [];
-    let i = 0;
-    while (i < clusterWizardContext.wizardStepIds.length) {
-      const stepId = clusterWizardContext.wizardStepIds[i];
-      if (stepId !== 'static-ip-network-wide-configurations') {
-        navItems.push(getNavItem(i, stepId));
-        i += 1;
-      } else {
-        navItems.push(getStaticIpFormViewNavItem(i));
-        //skip iteration on form view sub steps
-        i += 2;
+    return getWizardNavEntries(clusterWizardContext.wizardStepIds).map((entry) => {
+      const idx = clusterWizardContext.wizardStepIds.indexOf(entry.stepId);
+      if (entry.isStaticIpFormGroup) {
+        return getStaticIpFormViewNavItem(idx, entry.visualNumber);
       }
-    }
-    return navItems;
+      return getNavItem(idx, entry.stepId, entry.visualNumber);
+    });
   };
 
   return <WizardNav data-testid="cluster-wizard-nav">{getWizardNavItems()}</WizardNav>;

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

@@ -5,6 +5,7 @@ import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
 import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
+import DisconnectedStaticIp from './disconnected/DisconnectedStaticIp';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { useInfraEnv } from '../../hooks';
 import { CpuArchitecture } from '../../../common/types';
@@ -18,6 +19,10 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraE
       return <OptionalConfigurationsStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'static-ip-yaml-view':
+    case 'static-ip-network-wide-configurations':
+    case 'static-ip-host-configurations':
+      return <DisconnectedStaticIp />;
     default:
       return <ClusterDetails infraEnv={infraEnv} />;
   }

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

@@ -23,7 +23,7 @@ const getInitialFormStateProps = () => {
     isEmpty: true,
   };
 };
-const StaticIp: React.FC<StaticIpProps & { cluster: Cluster }> = ({
+const StaticIp: React.FC<StaticIpProps & { cluster?: Cluster }> = ({
   cluster,
   infraEnv,
   updateInfraEnv,

package/lib/ocm/components/clusterWizard/_wizardTransition.test.ts

@@ -8,7 +8,15 @@ import {
   Validation as HostValidation,
 } from '../../../common/types/hosts';
 
-import { canNextClusterDetails, canNextHostDiscovery, canNextStorage } from './wizardTransition';
+import {
+  canNextClusterDetails,
+  canNextHostDiscovery,
+  canNextStorage,
+  disconnectedSteps,
+} from './wizardTransition';
+import { getWizardNavEntries } from './ClusterWizardNavigation';
+import { getDisconnectedWizardStepIds } from './utils';
+import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const clusterBase: Cluster = {
@@ -441,3 +449,54 @@ describe('OCM wizard transition of Storage', () => {
     expect(canNextStorage({ cluster })).toBe(true);
   });
 });
+
+describe('Disconnected wizard step ids', () => {
+  test('starts with the three base disconnected steps', () => {
+    expect(getDisconnectedWizardStepIds()).toEqual(disconnectedSteps);
+    expect(getDisconnectedWizardStepIds('dhcp-selected')).toEqual(disconnectedSteps);
+  });
+
+  test('inserts static IP form steps and removes them again for DHCP', () => {
+    const withStatic = getDisconnectedWizardStepIds(StaticIpView.FORM);
+    expect(withStatic).toEqual([
+      'disconnected-basic',
+      'disconnected-optional-configurations',
+      'static-ip-network-wide-configurations',
+      'static-ip-host-configurations',
+      'disconnected-review',
+    ]);
+    expect(getDisconnectedWizardStepIds('dhcp-selected')).toEqual(disconnectedSteps);
+  });
+
+  test('inserts the YAML static IP step', () => {
+    expect(getDisconnectedWizardStepIds(StaticIpView.YAML)).toEqual([
+      'disconnected-basic',
+      'disconnected-optional-configurations',
+      'static-ip-yaml-view',
+      'disconnected-review',
+    ]);
+  });
+});
+
+describe('Wizard nav visual numbers', () => {
+  test('numbers review as 3 when static IP steps are absent', () => {
+    const entries = getWizardNavEntries(disconnectedSteps);
+    expect(entries.map((entry) => [entry.stepId, entry.visualNumber])).toEqual([
+      ['disconnected-basic', 1],
+      ['disconnected-optional-configurations', 2],
+      ['disconnected-review', 3],
+    ]);
+  });
+
+  test('keeps a single number for form-view static IP and numbers review as 4', () => {
+    const entries = getWizardNavEntries(getDisconnectedWizardStepIds(StaticIpView.FORM));
+    expect(
+      entries.map((entry) => [entry.stepId, entry.visualNumber, entry.isStaticIpFormGroup]),
+    ).toEqual([
+      ['disconnected-basic', 1, false],
+      ['disconnected-optional-configurations', 2, false],
+      ['static-ip-network-wide-configurations', 3, true],
+      ['disconnected-review', 4, false],
+    ]);
+  });
+});

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ClusterWizardStep, TechnologyPreview, StaticTextField } from '../../../../common';
+import { ClusterWizardStep, StaticTextField } from '../../../../common';
 import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
@@ -7,7 +7,7 @@ import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
 
-export const DISCONNECTED_OPENSHIFT_VERSION = '4.21';
+export const DISCONNECTED_OPENSHIFT_VERSION = '4.22.13';
 
 const BasicStep = () => {
   const { moveNext } = useClusterWizardContext();
@@ -24,7 +24,6 @@ const BasicStep = () => {
           </GridItem>
           <GridItem>
             <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-              <TechnologyPreview />
               <InstallDisconnectedSwitch />
               <span>I'm installing on a disconnected/air-gapped/secured environment</span>
             </Flex>

package/lib/ocm/components/clusterWizard/disconnected/DisconnectedStaticIp.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InfraEnvUpdateParams } from '@openshift-assisted/types/assisted-installer-service';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import { InfraEnvsAPI } from '../../../services/apis';
+import StaticIp from '../StaticIp';
+
+export const DisconnectedStaticIp: React.FC = () => {
+  const { disconnectedInfraEnv, setDisconnectedInfraEnv } = useClusterWizardContext();
+
+  const updateInfraEnv = React.useCallback(
+    async (params: InfraEnvUpdateParams) => {
+      if (!disconnectedInfraEnv?.id) {
+        throw new Error('No disconnected infraEnv available');
+      }
+      const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, params);
+      setDisconnectedInfraEnv(updatedInfraEnv);
+      return updatedInfraEnv;
+    },
+    [disconnectedInfraEnv, setDisconnectedInfraEnv],
+  );
+
+  if (!disconnectedInfraEnv) {
+    return null;
+  }
+
+  return <StaticIp infraEnv={disconnectedInfraEnv} updateInfraEnv={updateInfraEnv} />;
+};
+
+export default DisconnectedStaticIp;

package/lib/ocm/components/clusterWizard/disconnected/OptionalConfigurationsStep.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import { AlertVariant } from '@patternfly/react-core';
-import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import { AlertVariant, Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import {
+  HostStaticNetworkConfig,
+  InfraEnv,
+  InfraEnvUpdateParams,
+  ImageType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterWizardStep,
   PullSecret,
@@ -14,15 +19,21 @@ import {
   sshPublicKeyValidationSchema,
   useAlerts,
   useTranslation,
+  InputField,
+  ipValidationSchema,
+  getFormikErrorFields,
 } from '../../../../common';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { InfraEnvsAPI, ClustersAPI } from '../../../services/apis';
-import { ImageType } from '@openshift-assisted/types/assisted-installer-service';
 import usePullSecret from '../../../hooks/usePullSecret';
 import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
+import { HostsNetworkConfigurationControlGroup } from '../../clusterConfiguration/HostsNetworkConfigurationControlGroup';
+import { HostsNetworkConfigurationType } from '../../../services/types';
+import { getDummyInfraEnvField } from '../../clusterConfiguration/staticIp/data/dummyData';
+import { getStaticNetworkConfig } from '../../clusterConfiguration/staticIp/data/fromInfraEnv';
 
 const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
 const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
@@ -30,6 +41,8 @@ const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
 type OptionalConfigurationsValues = {
   sshPublicKey: string;
   pullSecret: string;
+  rendezvousIp: string;
+  hostsNetworkConfigurationType: HostsNetworkConfigurationType;
 };
 
 type OptionalConfigurationsFormProps = {
@@ -42,7 +55,8 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
   isSubmitting,
 }) => {
   const { moveBack } = useClusterWizardContext();
-  const { isValid, submitForm } = useFormikContext<OptionalConfigurationsValues>();
+  const { isValid, submitForm, errors, touched } = useFormikContext<OptionalConfigurationsValues>();
+  const errorFields = getFormikErrorFields(errors, touched);
 
   return (
     <ClusterWizardStep
@@ -53,6 +67,7 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
           onBack={moveBack}
           isSubmitting={isSubmitting}
           isNextDisabled={!isValid}
+          errorFields={errorFields}
         />
       }
     >
@@ -63,8 +78,15 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
           </GridItem>
           <GridItem>
             <Form id="wizard-cluster-optional-config__form">
+              <InputField
+                label="Rendezvous IP"
+                name="rendezvousIp"
+                helperText="The IP address that hosts will use to communicate with the bootstrap node during installation."
+                maxLength={45}
+              />
               <UploadSSH />
               {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+              <HostsNetworkConfigurationControlGroup clusterExists={false} isDisabled={false} />
             </Form>
           </GridItem>
         </Grid>
@@ -73,6 +95,29 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
   );
 };
 
+const getStaticNetworkConfigUpdate = (
+  values: OptionalConfigurationsValues,
+  infraEnv: InfraEnv | undefined,
+): HostStaticNetworkConfig[] => {
+  if (values.hostsNetworkConfigurationType === HostsNetworkConfigurationType.DHCP) {
+    return [];
+  }
+  // Static IP selected — resend existing config, or seed with dummy if none exists yet.
+  if (!infraEnv?.staticNetworkConfig) {
+    return getDummyInfraEnvField();
+  }
+  return getStaticNetworkConfig(infraEnv) ?? getDummyInfraEnvField();
+};
+
+const buildInfraEnvUpdateParams = (
+  values: OptionalConfigurationsValues,
+  disconnectedInfraEnv: InfraEnv | undefined,
+): InfraEnvUpdateParams => ({
+  sshAuthorizedKey: values.sshPublicKey,
+  rendezvousIp: values.rendezvousIp,
+  staticNetworkConfig: getStaticNetworkConfigUpdate(values, disconnectedInfraEnv),
+});
+
 const OptionalConfigurationsStep = () => {
   const { t } = useTranslation();
   const {
@@ -91,6 +136,9 @@ const OptionalConfigurationsStep = () => {
       Yup.object({
         sshPublicKey: sshPublicKeyValidationSchema(t),
         pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
+        rendezvousIp: Yup.string()
+          .max(45, 'IP address must be at most 45 characters')
+          .concat(ipValidationSchema(t)),
       }),
     [t],
   );
@@ -98,6 +146,10 @@ const OptionalConfigurationsStep = () => {
   const initialValues: OptionalConfigurationsValues = {
     sshPublicKey: disconnectedInfraEnv?.sshAuthorizedKey ?? '',
     pullSecret: defaultPullSecret ?? '',
+    rendezvousIp: disconnectedInfraEnv?.rendezvousIp ?? '',
+    hostsNetworkConfigurationType: disconnectedInfraEnv?.staticNetworkConfig
+      ? HostsNetworkConfigurationType.STATIC
+      : HostsNetworkConfigurationType.DHCP,
   };
 
   const handleNext = React.useCallback(
@@ -107,12 +159,9 @@ const OptionalConfigurationsStep = () => {
       try {
         const pullSecretToUse = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
 
-        if (disconnectedCluster?.id && disconnectedInfraEnv?.id) {
-          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, {
-            sshAuthorizedKey: values.sshPublicKey,
-          });
-          setDisconnectedInfraEnv(updatedInfraEnv);
-        } else {
+        let infraEnvToUse: InfraEnv | undefined = disconnectedInfraEnv;
+
+        if (!disconnectedCluster?.id || !infraEnvToUse?.id) {
           const { data: cluster } = await ClustersAPI.registerDisconnected({
             name: DISCONNECTED_CLUSTER_NAME,
             openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
@@ -126,10 +175,22 @@ const OptionalConfigurationsStep = () => {
             imageType: DISCONNECTED_IMAGE_TYPE,
             openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
             sshAuthorizedKey: values.sshPublicKey || undefined,
+            rendezvousIp: values.rendezvousIp || undefined,
+            staticNetworkConfig:
+              values.hostsNetworkConfigurationType === HostsNetworkConfigurationType.STATIC
+                ? getDummyInfraEnvField()
+                : undefined,
           });
-          setDisconnectedInfraEnv(createdInfraEnv);
+          infraEnvToUse = createdInfraEnv;
+        } else {
+          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(
+            infraEnvToUse.id,
+            buildInfraEnvUpdateParams(values, infraEnvToUse),
+          );
+          infraEnvToUse = updatedInfraEnv;
         }
 
+        setDisconnectedInfraEnv(infraEnvToUse);
         moveNext();
       } catch (error) {
         handleApiError(error, () => {
@@ -158,7 +219,6 @@ const OptionalConfigurationsStep = () => {
   return (
     <Formik<OptionalConfigurationsValues>
       initialValues={initialValues}
-      enableReinitialize
       validationSchema={validationSchema}
       onSubmit={(values) => void handleNext(values)}
     >