@openshift-assisted/ui-lib 2.56.1 → 2.56.3

package/lib/ocm/components/wizard/clusterWizardContext/ClusterWizardContextProvider.tsx

@@ -1,76 +1,26 @@
 import React, { PropsWithChildren } from 'react';
 import { useLocation } from 'react-router';
-import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardContext';
+import { AlertVariant } from '@patternfly/react-core';
+import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
+
+import { useAlerts, AssistedInstallerOCMPermissionTypesListType } from '../../../../common';
+import { isThirdPartyCNI } from '../../../../common/types/networkType';
+import { useFeature, useUISettings } from '../../../hooks';
+import useSetClusterPermissions from '../../../hooks/useSetClusterPermissions';
+import { HostsNetworkConfigurationType } from '../../../services';
+import { isOciPlatformType } from '../../utils';
+import { StaticIpView } from '../steps/staticIp/data/dataTypes';
+import { getStaticIpInfo } from '../steps/staticIp/data/fromInfraEnv';
 import {
-  ClusterWizardFlowStateType,
   ClusterWizardStepsType,
+  ClusterWizardFlowStateType,
   disconnectedSteps,
   getClusterWizardFirstStep,
-  isStaticIpStep,
   isStepAfter,
-} from '../utils/wizardTransition';
-import { HostsNetworkConfigurationType } from '../../../services';
-import { defaultWizardSteps, staticIpFormViewSubSteps } from '../constants';
-import { AssistedInstallerOCMPermissionTypesListType, useAlerts } from '../../../../common';
-import useSetClusterPermissions from '../../../hooks/useSetClusterPermissions';
-import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-import { useUISettings } from '../../../hooks';
-import { AlertVariant } from '@patternfly/react-core';
-import { useFeature } from '../../../hooks/use-feature';
-import { isThirdPartyCNI } from '../../../../common/types/networkType';
-import { isOciPlatformType } from '../../utils';
-import { StaticIpView, getStaticIpInfo } from '../steps/staticIp/data';
-
-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;
-};
+  isStaticIpStep,
+} from '../utils';
+import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardContext';
+import { getDisconnectedWizardStepIds, getWizardStepIds } from './utils';
 
 export const ClusterWizardContextProvider = ({
   children,
@@ -89,6 +39,8 @@ export 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 {
@@ -100,7 +52,7 @@ export const ClusterWizardContextProvider = ({
   const { clearAlerts, addAlert, alerts } = useAlerts();
   const setClusterPermissions = useSetClusterPermissions();
 
-  const wizardStepIds = installDisconnected ? disconnectedSteps : connectedWizardStepIds;
+  const wizardStepIds = installDisconnected ? disconnectedWizardStepIds : connectedWizardStepIds;
 
   React.useEffect(() => {
     if (!UISettingsLoading) {
@@ -158,17 +110,26 @@ export 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) => {
@@ -200,17 +161,33 @@ export 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,
@@ -224,6 +201,7 @@ export const ClusterWizardContextProvider = ({
       setInstallDisconnected: (enabled: boolean) => {
         setInstallDisconnected(enabled);
         if (enabled) {
+          setDisconnectedWizardStepIds(disconnectedSteps);
           onSetCurrentStepId(disconnectedSteps[0]);
         } else {
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);

package/lib/ocm/components/wizard/clusterWizardContext/utils.ts

@@ -0,0 +1,73 @@
+import { defaultWizardSteps, staticIpFormViewSubSteps } from '../constants';
+import { StaticIpView } from '../steps/staticIp/data/dataTypes';
+import { ClusterWizardStepsType, disconnectedSteps } from '../utils';
+
+export const addStepToClusterWizard = (
+  wizardStepIds: ClusterWizardStepsType[],
+  addAfterStep: ClusterWizardStepsType,
+  itemsToAdd: ClusterWizardStepsType[],
+): 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;
+};
+
+export const removeStepFromClusterWizard = (
+  wizardStepIds: ClusterWizardStepsType[],
+  itemToRemove: ClusterWizardStepsType,
+  numberItemsToRemove: number,
+): ClusterWizardStepsType[] => {
+  const stepsIds = [...wizardStepIds];
+  const position = stepsIds.findIndex((step) => step === itemToRemove);
+  if (position !== -1) {
+    stepsIds.splice(position, numberItemsToRemove);
+  }
+  return stepsIds;
+};
+
+export 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;
+};
+
+export const getDisconnectedWizardStepIds = (
+  staticIpView?: StaticIpView | 'dhcp-selected',
+): ClusterWizardStepsType[] => {
+  // Always rebuild from the base disconnected steps so toggling static IP / DHCP
+  // cannot leave leftover sub-steps in the list.
+  const copy = [...disconnectedSteps];
+
+  if (staticIpView === StaticIpView.YAML) {
+    return addStepToClusterWizard(copy, 'disconnected-basic', ['static-ip-yaml-view']);
+  }
+  if (staticIpView === StaticIpView.FORM) {
+    return addStepToClusterWizard(copy, 'disconnected-basic', [
+      'static-ip-network-wide-configurations',
+      'static-ip-host-configurations',
+    ]);
+  }
+
+  return copy;
+};

package/lib/ocm/components/wizard/steps/clusterDetails/ClusterDetailsForm.tsx

@@ -19,7 +19,6 @@ import {
   getFormikErrorFields,
   ClusterWizardStep,
   ClusterWizardStepHeader,
-  TechnologyPreview,
   isInOcm,
   useTranslation,
 } from '../../../../../common';
@@ -181,10 +180,6 @@ export const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
                 <GridItem>
                   <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
                     <InstallDisconnectedSwitch isDisabled={!!cluster} />
-                    <span>
-                      {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                    </span>
-                    <TechnologyPreview />
                   </Flex>
                 </GridItem>
               )}

package/lib/ocm/components/wizard/steps/disconnected/BasicStep.tsx

@@ -1,24 +1,104 @@
 import * as React from 'react';
-import { Grid, GridItem, Content, Flex, Form } from '@patternfly/react-core';
+import * as Yup from 'yup';
+import { Formik, useFormikContext } from 'formik';
+import { Alert, AlertVariant, Grid, GridItem, Content, Flex, Form } from '@patternfly/react-core';
+import { ImageType, OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
+import OfflineOpenshiftVersionsAPI from '../../../../../common/api/assisted-service/OfflineOpenshiftVersionsAPI';
 import {
   ClusterWizardStep,
-  TechnologyPreview,
   StaticTextField,
   WithErrorBoundary,
+  useAlerts,
+  ClustersAPI,
+  InfraEnvsAPI,
+  handleApiError,
+  getApiErrorMessage,
+  isInOcm,
+  PullSecret,
+  pullSecretValidationSchema,
+  useTranslation,
+  getFormikErrorFields,
+  LoadingState,
+  OpenShiftVersionDropdown,
+  OpenshiftVersionOptionType,
+  CpuArchitecture,
 } from '../../../../../common';
+import { usePullSecret } from '../../../../hooks';
 import { useClusterWizardContext } from '../../clusterWizardContext';
 import { ClusterWizardNavigation, ClusterWizardFooter } from '../../wizardComponents';
+import { HostsNetworkConfigurationControlGroup } from '../clusterDetails/fields/HostsNetworkConfigurationControlGroup';
+import { HostsNetworkConfigurationType } from '../../../../services/types';
+import { getDummyInfraEnvField } from '../staticIp/data/dummyData';
+import { getStaticNetworkConfig } from '../staticIp/data/fromInfraEnv';
 import { InstallDisconnectedSwitch } from './InstallDisconnectedSwitch';
 
-export const DISCONNECTED_OPENSHIFT_VERSION = '4.21.27';
+const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
+const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
 
-export const BasicStep = () => {
-  const { moveNext } = useClusterWizardContext();
+const sortVersions = (versions: OpenshiftVersionOptionType[]) =>
+  [...versions].sort((version1, version2) =>
+    version1.value.localeCompare(version2.value, undefined, { numeric: true }),
+  );
+
+const mapOfflineVersions = (
+  data: Record<string, OpenshiftVersion>,
+): OpenshiftVersionOptionType[] => {
+  const versions = Object.entries(data).map(([key, versionItem]) => {
+    const version = versionItem.displayName;
+
+    return {
+      label: `OpenShift ${version}`,
+      value: String(key),
+      version,
+      default: Boolean(versionItem.default),
+      supportLevel: versionItem.supportLevel,
+      cpuArchitectures: versionItem.cpuArchitectures as CpuArchitecture[],
+    };
+  });
+
+  return sortVersions(versions);
+};
+
+type BasicStepValues = {
+  openshiftVersion: string;
+  hostsNetworkConfigurationType: HostsNetworkConfigurationType;
+  pullSecret: string;
+};
+
+type BasicStepFormProps = {
+  isSubmitting: boolean;
+  defaultPullSecret?: string;
+  versions: OpenshiftVersionOptionType[];
+  loading: boolean;
+  error?: string;
+  clusterExists: boolean;
+};
+
+const BasicStepForm: React.FC<BasicStepFormProps> = ({
+  isSubmitting,
+  defaultPullSecret,
+  versions,
+  loading,
+  error,
+  clusterExists,
+}) => {
+  const { submitForm, isValid, errors, touched, values } = useFormikContext<BasicStepValues>();
+  const errorFields = getFormikErrorFields(errors, touched);
+
+  const selectedVersionItem = versions.find((version) => version.value === values.openshiftVersion);
+  const cpuArchitecture = selectedVersionItem?.cpuArchitectures?.[0] ?? 'x86_64';
 
   return (
     <ClusterWizardStep
       navigation={<ClusterWizardNavigation />}
-      footer={<ClusterWizardFooter onNext={moveNext} />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => void submitForm()}
+          isSubmitting={isSubmitting}
+          isNextDisabled={loading || !!error || !isValid || isSubmitting}
+          errorFields={errorFields}
+        />
+      }
     >
       <WithErrorBoundary title="Failed to load Basic step">
         <Grid hasGutter>
@@ -28,22 +108,177 @@ export const BasicStep = () => {
           <GridItem>
             <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
               <InstallDisconnectedSwitch />
-              <span>I'm installing on a disconnected/air-gapped/secured environment</span>
-              <TechnologyPreview />
             </Flex>
           </GridItem>
           <GridItem>
-            <Form id="wizard-cluster-basic-info__form">
-              <StaticTextField name="openshiftVersion" label="OpenShift version">
-                {DISCONNECTED_OPENSHIFT_VERSION}
-              </StaticTextField>
-              <StaticTextField name="cpuArchitecture" label="CPU architecture">
-                x86_64
-              </StaticTextField>
-            </Form>
+            {loading && <LoadingState />}
+            {error && (
+              <Alert
+                isInline
+                variant={AlertVariant.danger}
+                title="Failed to retrieve list of supported OpenShift versions."
+              >
+                {error}
+              </Alert>
+            )}
+            {!loading && !error && (
+              <Form id="wizard-cluster-basic-info__form">
+                <OpenShiftVersionDropdown
+                  name="openshiftVersion"
+                  versions={versions}
+                  showReleasesLink={false}
+                  isDisabled={clusterExists}
+                />
+                <StaticTextField name="cpuArchitecture" label="CPU architecture">
+                  {cpuArchitecture}
+                </StaticTextField>
+                <HostsNetworkConfigurationControlGroup clusterExists={false} isDisabled={false} />
+                {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+              </Form>
+            )}
           </GridItem>
         </Grid>
       </WithErrorBoundary>
     </ClusterWizardStep>
   );
 };
+
+export const BasicStep = () => {
+  const { t } = useTranslation();
+  const {
+    moveNext,
+    disconnectedCluster,
+    setDisconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
+  } = useClusterWizardContext();
+  const { addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [versions, setVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string>();
+  const defaultPullSecret = usePullSecret();
+
+  React.useEffect(() => {
+    const fetchVersions = async () => {
+      setLoading(true);
+      setError(undefined);
+      try {
+        const { data } = await OfflineOpenshiftVersionsAPI.list();
+        const mappedVersions = mapOfflineVersions(data);
+        setVersions(mappedVersions);
+        if (mappedVersions.length === 0) {
+          setError('No OpenShift versions available.');
+        }
+      } catch (e) {
+        handleApiError(e, (err) => {
+          setError(getApiErrorMessage(err));
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchVersions();
+  }, []);
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object({
+        openshiftVersion: Yup.string().required('OpenShift version is required'),
+        pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
+      }),
+    [t],
+  );
+
+  const clusterExists = Boolean(disconnectedCluster?.id && disconnectedInfraEnv?.id);
+
+  const initialValues: BasicStepValues = {
+    openshiftVersion: disconnectedInfraEnv?.openshiftVersion ?? '',
+    hostsNetworkConfigurationType: disconnectedInfraEnv?.staticNetworkConfig
+      ? HostsNetworkConfigurationType.STATIC
+      : HostsNetworkConfigurationType.DHCP,
+    pullSecret: defaultPullSecret ?? '',
+  };
+
+  const handleNext = React.useCallback(
+    async (values: BasicStepValues) => {
+      clearAlerts();
+      setIsSubmitting(true);
+      try {
+        const isStatic =
+          values.hostsNetworkConfigurationType === HostsNetworkConfigurationType.STATIC;
+        let infraEnvToUse = disconnectedInfraEnv;
+
+        if (!disconnectedCluster?.id || !infraEnvToUse?.id) {
+          const { data: cluster } = await ClustersAPI.registerDisconnected({
+            name: DISCONNECTED_CLUSTER_NAME,
+            openshiftVersion: values.openshiftVersion,
+          });
+          setDisconnectedCluster(cluster);
+
+          const pullSecret = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
+          const { data: createdInfraEnv } = await InfraEnvsAPI.register({
+            name: 'disconnected-infra-env',
+            pullSecret,
+            clusterId: cluster.id,
+            imageType: DISCONNECTED_IMAGE_TYPE,
+            openshiftVersion: values.openshiftVersion,
+            staticNetworkConfig: isStatic ? getDummyInfraEnvField() : undefined,
+          });
+          infraEnvToUse = createdInfraEnv;
+        } else {
+          const staticNetworkConfig = isStatic
+            ? getStaticNetworkConfig(infraEnvToUse) ?? getDummyInfraEnvField()
+            : [];
+          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(infraEnvToUse.id, {
+            staticNetworkConfig,
+          });
+          infraEnvToUse = updatedInfraEnv;
+        }
+
+        setDisconnectedInfraEnv(infraEnvToUse);
+        moveNext();
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to save basic information',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      clearAlerts,
+      defaultPullSecret,
+      disconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedCluster,
+      setDisconnectedInfraEnv,
+      addAlert,
+      moveNext,
+    ],
+  );
+
+  return (
+    <Formik<BasicStepValues>
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={(values) => void handleNext(values)}
+    >
+      <BasicStepForm
+        isSubmitting={isSubmitting}
+        defaultPullSecret={defaultPullSecret}
+        versions={versions}
+        loading={loading}
+        error={error}
+        clusterExists={clusterExists}
+      />
+    </Formik>
+  );
+};
+
+export default BasicStep;