@openshift-assisted/ui-lib 2.50.1 → 2.51.0

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 { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -12,14 +13,14 @@ export type ClusterWizardContextType = {
   wizardStepIds: ClusterWizardStepsType[];
   onUpdateStaticIpView(view: StaticIpView): void;
   onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void;
-  setCustomManifestsStep(addCustomManifest: boolean): void;
-  customManifestsStep: boolean;
   wizardPerPage: number;
   setWizardPerPage: (perPage: number) => void;
   updateUISettings: (data: UISettingsValues) => Promise<void>;
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
+  disconnectedInfraEnv?: InfraEnv;
+  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

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

@@ -19,6 +19,7 @@ import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-
 import { useUISettings } from '../../hooks';
 import { AlertVariant } from '@patternfly/react-core';
 import { useFeature } from '../../hooks/use-feature';
+import { isOciPlatformType, isThirdPartyCNI } from '../utils';
 
 const addStepToClusterWizard = (
   wizardStepIds: ClusterWizardStepsType[],
@@ -50,7 +51,7 @@ const removeStepFromClusterWizard = (
 const getWizardStepIds = (
   wizardStepIds: ClusterWizardStepsType[] | undefined,
   staticIpView?: StaticIpView | 'dhcp-selected',
-  customManifestsStep?: boolean,
+
   isSingleClusterFeatureEnabled?: boolean,
 ): ClusterWizardStepsType[] => {
   let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...defaultWizardSteps];
@@ -64,11 +65,6 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
   }
 
-  if (customManifestsStep) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['custom-manifests']);
-  } else {
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'custom-manifests', 1);
-  }
   if (isSingleClusterFeatureEnabled) {
     stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
   }
@@ -76,6 +72,33 @@ const getWizardStepIds = (
   return stepsCopy;
 };
 
+// Same logic as getWizardStepIds but for disconnected flow
+// Adds static IP steps after 'disconnected-optional-configurations' instead of 'cluster-details'
+const getDisconnectedWizardStepIds = (
+  wizardStepIds: ClusterWizardStepsType[] | undefined,
+  staticIpView?: StaticIpView | 'dhcp-selected',
+): ClusterWizardStepsType[] => {
+  let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...disconnectedSteps];
+  if (staticIpView === StaticIpView.YAML) {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'disconnected-optional-configurations', [
+      'static-ip-yaml-view',
+    ]);
+  } else if (staticIpView === StaticIpView.FORM) {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-yaml-view', 1);
+    stepsCopy = addStepToClusterWizard(
+      stepsCopy,
+      'disconnected-optional-configurations',
+      staticIpFormViewSubSteps,
+    );
+  } else if (staticIpView === 'dhcp-selected') {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-yaml-view', 1);
+  }
+
+  return stepsCopy;
+};
+
 const ClusterWizardContextProvider = ({
   children,
   cluster,
@@ -89,9 +112,13 @@ const ClusterWizardContextProvider = ({
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const [currentStepId, setCurrentStepId] = React.useState<ClusterWizardStepsType>();
   const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
+  const [disconnectedWizardStepIds, setDisconnectedWizardStepIds] =
+    React.useState<ClusterWizardStepsType[]>(disconnectedSteps);
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
-  const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>(
+    infraEnv,
+  );
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -103,15 +130,18 @@ const ClusterWizardContextProvider = ({
   const { clearAlerts, addAlert, alerts } = useAlerts();
   const setClusterPermissions = useSetClusterPermissions();
 
-  const wizardStepIds = installDisconnected ? disconnectedSteps : connectedWizardStepIds;
+  const wizardStepIds = installDisconnected ? disconnectedWizardStepIds : connectedWizardStepIds;
 
   React.useEffect(() => {
     if (!UISettingsLoading) {
       const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
-      const customManifestsStepEnabled = !!uiSettings?.addCustomManifests;
-      const customManifestsStepNeedsToBeFilled = !!(
-        uiSettings?.addCustomManifests && !uiSettings?.customManifestsAdded
-      );
+      let customManifestsRequired = false;
+      if (cluster) {
+        customManifestsRequired =
+          isThirdPartyCNI(cluster.networkType) || isOciPlatformType(cluster);
+      }
+      const customManifestsStepNeedsToBeFilled =
+        customManifestsRequired && !uiSettings?.customManifestsAdded;
 
       const requiredStepId = getClusterWizardFirstStep(
         locationState,
@@ -120,11 +150,10 @@ const ClusterWizardContextProvider = ({
         cluster?.hosts,
         customManifestsStepNeedsToBeFilled,
       );
-
       const firstStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo?.view,
-        customManifestsStepEnabled,
+
         isSingleClusterFeatureEnabled,
       );
 
@@ -138,7 +167,6 @@ const ClusterWizardContextProvider = ({
 
       setWizardStepIds(firstStepIds);
       setClusterPermissions(cluster, permissions);
-      setCustomManifestsStep(!!uiSettings?.addCustomManifests);
     }
 
     if (
@@ -162,17 +190,29 @@ 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;
+      const currentInfraEnv = installDisconnected ? disconnectedInfraEnv : infraEnv;
+      const staticIpInfo = currentInfraEnv ? getStaticIpInfo(currentInfraEnv) : undefined;
       if (!staticIpInfo) {
         throw `Wizard step is currently ${currentStepId}, but no static ip info is defined`;
       }
-      const newStepIds = getWizardStepIds(
-        wizardStepIds,
-        staticIpInfo.view,
-        customManifestsStep,
-        isSingleClusterFeatureEnabled,
-      );
-      setWizardStepIds(newStepIds);
+
+      if (installDisconnected) {
+        // For disconnected wizard, update wizard steps directly (same pattern as connected)
+        const newStepIds = getDisconnectedWizardStepIds(
+          disconnectedWizardStepIds,
+          staticIpInfo.view,
+        );
+        setDisconnectedWizardStepIds(newStepIds);
+      } else {
+        // For connected wizard, update wizard steps directly
+        const newStepIds = getWizardStepIds(
+          wizardStepIds,
+          staticIpInfo.view,
+
+          isSingleClusterFeatureEnabled,
+        );
+        setWizardStepIds(newStepIds);
+      }
     };
 
     const onSetCurrentStepId = (stepId: ClusterWizardStepsType) => {
@@ -183,18 +223,6 @@ const ClusterWizardContextProvider = ({
       setCurrentStepId(stepId);
     };
 
-    const onSetAddCustomManifestsStep = (addCustomManifest: boolean) => {
-      setCustomManifestsStep(addCustomManifest);
-      setWizardStepIds(
-        getWizardStepIds(
-          wizardStepIds,
-          undefined,
-          addCustomManifest,
-          isSingleClusterFeatureEnabled,
-        ),
-      );
-    };
-
     return {
       moveBack(): void {
         clearAlerts();
@@ -216,36 +244,48 @@ const ClusterWizardContextProvider = ({
         } else {
           setCurrentStepId('static-ip-network-wide-configurations');
         }
-        setWizardStepIds(
-          getWizardStepIds(wizardStepIds, view, customManifestsStep, isSingleClusterFeatureEnabled),
-        );
+        if (installDisconnected) {
+          // For disconnected wizard, update wizard steps (same pattern as connected)
+          setDisconnectedWizardStepIds(
+            getDisconnectedWizardStepIds(disconnectedWizardStepIds, view),
+          );
+        } else {
+          setWizardStepIds(getWizardStepIds(wizardStepIds, view, isSingleClusterFeatureEnabled));
+        }
       },
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
-        if (type === HostsNetworkConfigurationType.STATIC) {
-          setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              StaticIpView.FORM,
-              customManifestsStep,
-              isSingleClusterFeatureEnabled,
-            ),
-          );
+        if (installDisconnected) {
+          // For disconnected wizard, update wizard steps (same pattern as connected)
+          if (type === HostsNetworkConfigurationType.STATIC) {
+            setDisconnectedWizardStepIds(
+              getDisconnectedWizardStepIds(disconnectedWizardStepIds, StaticIpView.FORM),
+            );
+          } else {
+            setDisconnectedWizardStepIds(
+              getDisconnectedWizardStepIds(disconnectedWizardStepIds, 'dhcp-selected'),
+            );
+          }
         } else {
-          setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              'dhcp-selected',
-              customManifestsStep,
-              isSingleClusterFeatureEnabled,
-            ),
-          );
+          // For connected wizard, update wizard steps directly
+          if (type === HostsNetworkConfigurationType.STATIC) {
+            setWizardStepIds(
+              getWizardStepIds(
+                wizardStepIds,
+                StaticIpView.FORM,
+
+                isSingleClusterFeatureEnabled,
+              ),
+            );
+          } else {
+            setWizardStepIds(
+              getWizardStepIds(wizardStepIds, 'dhcp-selected', isSingleClusterFeatureEnabled),
+            );
+          }
         }
       },
       wizardStepIds: wizardStepIds,
       currentStepId,
       setCurrentStepId: onSetCurrentStepId,
-      customManifestsStep,
-      setCustomManifestsStep: onSetAddCustomManifestsStep,
       wizardPerPage,
       setWizardPerPage,
       uiSettings,
@@ -259,20 +299,22 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
     currentStepId,
     infraEnv,
-    customManifestsStep,
     wizardPerPage,
     isSingleClusterFeatureEnabled,
     clearAlerts,
     uiSettings,
     updateUISettings,
     installDisconnected,
-    setInstallDisconnected,
     connectedWizardStepIds,
+    disconnectedWizardStepIds,
+    disconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

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

@@ -17,6 +17,8 @@ import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
+import ClustersService from '../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../common/api';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -71,6 +73,7 @@ type ClusterWizardFooterProps = WizardFooterGenericProps & {
   errorFields?: string[];
   alertTitle?: string;
   alertContent?: string | null;
+  disconnectedClusterId?: string;
 };
 
 const ClusterWizardFooter = ({
@@ -80,19 +83,37 @@ const ClusterWizardFooter = ({
   alertTitle,
   alertContent,
   onCancel,
+  disconnectedClusterId,
   ...rest
 }: ClusterWizardFooterProps) => {
-  const { alerts } = useAlerts();
+  const { alerts, addAlert } = useAlerts();
   const navigate = useNavigate();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { currentStepId } = useClusterWizardContext();
   const { resetSingleClusterDialog } = useModalDialogsContext();
+  const { setDisconnectedInfraEnv } = useClusterWizardContext();
 
-  const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
+  const handleCancel = React.useCallback(async () => {
+    if (disconnectedClusterId) {
+      try {
+        await ClustersService.remove(disconnectedClusterId);
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to remove cluster',
+            message: getApiErrorMessage(e),
+          }),
+        );
+      }
+    }
+    setDisconnectedInfraEnv(undefined);
+    navigate('/cluster-list');
+  }, [navigate, setDisconnectedInfraEnv, addAlert, disconnectedClusterId]);
 
-  const handleReset = React.useCallback(() => {
-    resetSingleClusterDialog.open({ cluster });
-  }, [resetSingleClusterDialog, cluster]);
+  const handleReset = React.useCallback(
+    () => resetSingleClusterDialog.open({ cluster }),
+    [resetSingleClusterDialog, cluster],
+  );
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

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

@@ -4,7 +4,10 @@ import ClusterDetails from './ClusterDetails';
 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 { ModalDialogsContextProvider } from '../hosts/ModalDialogsContext';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
   switch (currentStepId) {
@@ -12,6 +15,12 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
+    case 'static-ip-yaml-view':
+    case 'static-ip-network-wide-configurations':
+    case 'static-ip-host-configurations':
+      return <DisconnectedStaticIp />;
     default:
       return <ClusterDetails />;
   }
@@ -20,9 +29,11 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
 const NewClusterWizard: React.FC = () => {
   const { currentStepId } = useClusterWizardContext();
   return (
-    <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
-      {getCurrentStep(currentStepId)}
-    </div>
+    <ModalDialogsContextProvider>
+      <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
+        {getCurrentStep(currentStepId)}
+      </div>
+    </ModalDialogsContextProvider>
   );
 };
 

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[] = [
@@ -22,6 +23,7 @@ export const defaultWizardSteps: ClusterWizardStepsType[] = [
   'host-discovery',
   'storage',
   'networking',
+  'custom-manifests',
   'review',
 ];
 

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

@@ -7,61 +7,162 @@ import {
   StaticTextField,
   useTranslation,
 } from '../../../../common';
-import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
+import { Flex, Grid, GridItem, Form, Content, Spinner } from '@patternfly/react-core';
 import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
-import { Formik } from 'formik';
+import { Formik, useFormikContext } from 'formik';
+import ClustersService from '../../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
+import { ClusterWizardFlowStateNew } from '../wizardTransition';
+import { useLocation, useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { AxiosResponse } from 'axios';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import OcmOpenShiftVersionSelect from '../../clusterConfiguration/OcmOpenShiftVersionSelect';
 
-const BasicStep = () => {
+type BasicStepFormikValues = {
+  openshiftVersion: string;
+  customOpenshiftSelect: string | null;
+};
+
+const BasicStepForm = () => {
+  const { clusterId } = useParams<{ clusterId: string }>();
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [cluster, setCluster] = React.useState<Cluster>();
+
+  const { values } = useFormikContext<BasicStepFormikValues>();
   const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
+  const { addAlert } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPath = location.pathname;
+
+  React.useEffect(() => {
+    if (!clusterId) {
+      setIsLoading(false);
+    } else {
+      void (async () => {
+        setIsLoading(true);
+        try {
+          setCluster(await ClustersService.get(clusterId));
+        } catch (error) {
+          handleApiError(error, () => {
+            addAlert({
+              title: 'Failed to fetch disconnected cluster',
+              message: getApiErrorMessage(error),
+              variant: AlertVariant.danger,
+            });
+          });
+        } finally {
+          setIsLoading(false);
+        }
+      })();
+    }
+  }, [clusterId, addAlert]);
+
+  const createCluster = async () => {
+    try {
+      setIsSubmitting(true);
+      // Create cluster only - infraEnv will be created in OptionalConfigurationsStep
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { data: disconnectedCluster }: AxiosResponse<Cluster> =
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        await ClustersService.registerDisconnected({
+          name: 'disconnected-cluster',
+          openshiftVersion: values.openshiftVersion,
+        });
+      navigate(`${currentPath}/${disconnectedCluster.id}`, {
+        state: ClusterWizardFlowStateNew,
+      });
+      moveNext();
+    } catch (error: unknown) {
+      handleApiError(error, () => {
+        addAlert({
+          title: 'Failed to create disconnected cluster',
+          message: getApiErrorMessage(error),
+          variant: AlertVariant.danger,
+        });
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   return (
-    <Formik
-      initialValues={{}}
-      onSubmit={() => {
-        // nothing to do
-      }}
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => {
+            clusterId ? moveNext() : void createCluster();
+          }}
+          isSubmitting={isSubmitting}
+          isNextDisabled={isLoading || (cluster ? false : !values.openshiftVersion)}
+          disconnectedClusterId={clusterId}
+        />
+      }
     >
-      <ClusterWizardStep
-        navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
-      >
-        <WithErrorBoundary title="Failed to load Basic step">
-          <Grid hasGutter>
-            <GridItem>
-              <Content component="h2">Basic information</Content>
-            </GridItem>
-            <GridItem>
-              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                <TechnologyPreview />
-                <InstallDisconnectedSwitch />
-                <span>
-                  {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                </span>
-              </Flex>
-            </GridItem>
-            <GridItem>
-              <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
+      <WithErrorBoundary title="Failed to load Basic step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Basic information</Content>
+          </GridItem>
+          <GridItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+              <TechnologyPreview />
+              <InstallDisconnectedSwitch isDisabled={!!clusterId} />
+              <span>{t("ai:I'm installing on a disconnected/air-gapped/secured environment")}</span>
+            </Flex>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-basic-info__form">
+              {isLoading ? (
+                <Spinner />
+              ) : cluster ? (
+                <OcmOpenShiftVersion
+                  openshiftVersion={cluster.openshiftVersion || ''}
+                  withPreviewText
+                  withMultiText
+                >
                   <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
                     <span data-ouia-id="openshift-releases-link">
                       {t('ai:Learn more about OpenShift releases')}
                     </span>
                   </ExternalLink>
                 </OcmOpenShiftVersion>
-                <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
-                  x86_64
-                </StaticTextField>
-              </Form>
-            </GridItem>
-          </Grid>
-        </WithErrorBoundary>
-      </ClusterWizardStep>
+              ) : (
+                <OcmOpenShiftVersionSelect minVersionAllowed={4021} />
+              )}
+              <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
+                x86_64
+              </StaticTextField>
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+const BasicStep = () => {
+  return (
+    <Formik<BasicStepFormikValues>
+      initialValues={{
+        openshiftVersion: '',
+        customOpenshiftSelect: null,
+      }}
+      onSubmit={() => {
+        // nothing to do
+      }}
+    >
+      <BasicStepForm />
     </Formik>
   );
 };