@openshift-assisted/ui-lib 2.47.5 → 2.48.1

package/lib/common/reducers/alertsSlice.ts

@@ -6,6 +6,7 @@ export type AlertPayload = {
   title: string;
   message?: string;
   variant?: AlertVariant;
+  key?: string;
 };
 
 export type AlertProps = {
@@ -22,7 +23,7 @@ export const alertsSlice = createSlice({
   name: 'alerts',
   reducers: {
     addAlert: (state, action: PayloadAction<AlertPayload>) => [
-      { key: uuidv4(), variant: AlertVariant.danger, ...action.payload },
+      { key: action.payload.key || uuidv4(), variant: AlertVariant.danger, ...action.payload },
       ...state,
     ],
     removeAlert: (state, action: PayloadAction<string>) =>

package/lib/ocm/components/HostsClusterDetailTab/utils.ts

@@ -46,20 +46,36 @@ export const getAddHostsTabState = (cluster: OcmClusterType): AddHostsTabState =
   // Checking if the Day1 cluster has reported metrics, so it can be determined if it's an SNO / multi node and has required information
   const day1ClusterHostCount = cluster.metrics?.nodes?.total || 0;
 
-  if (isClusterStateReady && wasInstalledUsingAssistedInstaller) {
-    let tabState = makeState('visible');
-    if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
-      // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
-      tabState = makeState(
-        'disabled',
-        'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
-      );
-    }
+  // Disable Add Hosts with the following priority:
+  // 1) Cluster is not ready
+  // 2) Cluster was not installed using Assisted Installer
+  // 3) Cluster has no metrics
+  if (!isClusterStateReady) {
+    return makeState(
+      'disabled',
+      'Cluster is not ready. Please wait for the cluster to be ready and try again.',
+    );
+  } else if (!wasInstalledUsingAssistedInstaller) {
+    return makeState(
+      'disabled',
+      'Hosts cannot be added to an existing cluster that was not installed using Assisted Installer. Install a new cluster and try again.',
+    );
+  } else if (!cluster.metrics) {
+    return makeState(
+      'disabled',
+      'Cluster has no metrics. Please wait for the cluster to have metrics and try again.',
+    );
+  }
 
-    return tabState;
-  } else {
-    // The cluster is not ready or was not installed using Assisted Installer.
-    // (see: https://issues.redhat.com/browse/HAC-3989)
-    return makeState('hidden');
+  // At this point the cluster is ready, installed using Assisted Installer, and has metrics
+  let tabState = makeState('visible');
+  if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
+    // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
+    tabState = makeState(
+      'disabled',
+      'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
+    );
   }
+
+  return tabState;
 };

package/lib/ocm/components/Routes.tsx

@@ -34,7 +34,9 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />} />
+          <Route path="~new" element={<NewClusterPage />}>
+            <Route path=":clusterId" element={<NewClusterPage />} />
+          </Route>
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>

package/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -78,7 +78,7 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
         <Content component="h3">Host Inventory</Content>
       </StackItem>
       <StackItem data-testid="hosts-discovery-table-wrapper">
-        <HostsDiscoveryTable cluster={cluster} />
+        <HostsDiscoveryTable cluster={cluster} hosts={cluster.hosts || []} />
       </StackItem>
     </Stack>
   );

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

@@ -92,7 +92,7 @@ const NetworkConfigurationForm: React.FC<{
           JSON.stringify(
             JSON.stringify({
               featureSet: 'CustomNoUpgrade',
-              featureGates: ['NoRegistryClusterOperations=true'],
+              featureGates: ['NoRegistryClusterInstall=true'],
             }),
           ),
         );

package/lib/ocm/components/clusterConfiguration/operators/bundleSpecs.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
 
 export type BundleSpec = {
-  noSNO?: boolean;
   incompatibleBundles?: string[];
   Description: React.ComponentType;
   docsLink?: string;
@@ -10,7 +9,6 @@ export type BundleSpec = {
 
 export const bundleSpecs: { [key: string]: BundleSpec } = {
   virtualization: {
-    noSNO: true,
     Description: () => (
       <List>
         <ListItem>
@@ -29,7 +27,6 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     ),
   },
   'openshift-ai': {
-    noSNO: true,
     incompatibleBundles: [],
     Description: () => (
       <List>

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

@@ -40,13 +40,17 @@ export const getNewOperators = (
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);
-  // uncheck unneeded not-standalone dependencies too
   const notStandaloneDeps = dependencies
     .filter((dep) => opSpecs[dep]?.notStandalone)
-    .filter((dep) =>
-      // some other operator may still depend on the not-standalone operator
-      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
-    );
+    .filter((dep) => {
+      const hasDependency = newOperators.some((op) =>
+        getOperatorDependencies(op, preflightRequirements).includes(dep),
+      );
+      if (!hasDependency) {
+        newOperators.splice(newOperators.indexOf(dep), 1);
+      }
+      return !hasDependency;
+    });
 
   return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
 };

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

@@ -18,14 +18,12 @@
   width: 100%;
 }
 
-.summary-expandable .pf-v6-c-expandable-section__toggle,
+#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__text,
 .review-expandable > .pf-v6-c-expandable-section__toggle {
   color: initial;
   text-align: left;
 }
 
-.summary-expandable
-  > .pf-v6-c-expandable-section__toggle
-  > .pf-v6-c-expandable-section__toggle-icon {
+#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__icon {
   visibility: hidden;
 }

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

@@ -182,7 +182,7 @@ const ReviewPreflightChecks = ({ cluster }: { cluster: Cluster }) => {
       <ExpandableSection
         toggleContent={
           <Grid>
-            <GridItem span={2} className="pf-v6-u-text-wrap">
+            <GridItem span={2} className="pf-v6-u-text-wrap pf-v6-u-text-align-start">
               Preflight checks
             </GridItem>
             {!isChecksExpanded && <PreflightChecksDetailCollapsed cluster={cluster} />}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
@@ -67,9 +68,14 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
 
 const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
   return (
-    <TableSummaryExpandable title={'Cluster summary'} id={'summary-expandable'}>
+    <ExpandableSection
+      toggleContent={'Cluster summary'}
+      id={'summary-expandable'}
+      isExpanded={true}
+      isIndented
+    >
       <ReviewSummaryContent cluster={cluster} />
-    </TableSummaryExpandable>
+    </ExpandableSection>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
+import { ExpandableSection, Content } from '@patternfly/react-core';
 
 export const TableSummaryExpandable = ({
   title,
@@ -13,7 +13,7 @@ export const TableSummaryExpandable = ({
   const [isExpanded, setExpanded] = React.useState(true);
   return (
     <ExpandableSection
-      toggleContent={<b>{title}</b>}
+      toggleContent={<Content className="pf-v6-u-font-weight-bold">{title}</Content>}
       isExpanded={isExpanded}
       onToggle={() => setExpanded(!isExpanded)}
       isIndented

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

@@ -25,6 +25,7 @@ import {
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import BundleService from '../../services/BundleService';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsProps = {
   cluster?: Cluster;
@@ -45,6 +46,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
     latestVersions: versions,
   } = useOpenShiftVersionsContext();
   const location = useLocation();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const handleClusterUpdate = React.useCallback(
     async (
@@ -85,16 +87,24 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         //For Assisted Migration we need the LVMs operator and also the virtualization bundle operators
         if (isAssistedMigration) {
           params.olmOperators = [{ name: 'lvm' }];
-          const selectedBundle = (await BundleService.listBundles()).find(
-            (b) => b.id === 'virtualization',
-          );
+          const selectedBundle = (
+            await BundleService.listBundles(
+              params.openshiftVersion,
+              params.cpuArchitecture,
+              params.platform?.type,
+            )
+          ).find((b) => b.id === 'virtualization');
           const virtOperators = selectedBundle?.operators;
           params.olmOperators = [
             ...params.olmOperators,
             ...(virtOperators ? virtOperators.map((op) => ({ name: op })) : []),
           ];
         }
-        const cluster = await ClustersService.create(params, isAssistedMigration);
+        const cluster = await ClustersService.create(
+          params,
+          isAssistedMigration,
+          isSingleClusterFeatureEnabled,
+        );
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
         const uiPatch: UISettingsValues = { addCustomManifests };
@@ -114,7 +124,15 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, location.search, navigate, clusterWizardContext, addAlert, dispatch],
+    [
+      clearAlerts,
+      location.search,
+      isSingleClusterFeatureEnabled,
+      navigate,
+      clusterWizardContext,
+      addAlert,
+      dispatch,
+    ],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

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;
@@ -20,6 +21,8 @@ export type ClusterWizardContextType = {
   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

@@ -92,6 +92,9 @@ const ClusterWizardContextProvider = ({
   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 {
@@ -259,6 +262,8 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
@@ -273,6 +278,7 @@ const ClusterWizardContextProvider = ({
     installDisconnected,
     setInstallDisconnected,
     connectedWizardStepIds,
+    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/HostDiscovery.tsx

@@ -22,6 +22,7 @@ import {
   Cluster,
   V2ClusterUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import useLateBinding from '../../hooks/useLateBinding';
 
 const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const { alerts } = useAlerts();
@@ -29,12 +30,14 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const clusterWizardContext = useClusterWizardContext();
   const isAutoSaveRunning = useFormikAutoSave();
   const errorFields = getFormikErrorFields(errors, touched);
+  const isBinding = useLateBinding(cluster);
 
   const isNextDisabled =
     !isValid ||
     !!alerts.length ||
     isAutoSaveRunning ||
     isSubmitting ||
+    isBinding ||
     !canNextHostDiscovery({ cluster });
 
   const footer = (

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';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
@@ -12,6 +13,8 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     default:
       return <ClusterDetails />;
   }

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

@@ -21,8 +21,6 @@ import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from
 import { useFormikContext } from 'formik';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { useFeature } from '../../hooks/use-feature';
-import { useSelector } from 'react-redux';
-import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
 import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
 import {
@@ -84,7 +82,6 @@ const BundleCard = ({
   searchTerm?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
-  const isSNO = useSelector(selectIsCurrentClusterSNO);
   const { isFeatureSupported } = useNewFeatureSupportLevel();
   const { byKey: opSpecs } = useOperatorSpecs();
   const { uiSettings } = useClusterWizardContext();
@@ -105,16 +102,14 @@ const BundleCard = ({
   const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
     ? 'Some operators in this bundle are not supported with the current configuration.'
-    : isSNO && bundleSpec?.noSNO
-    ? bundle.id === 'openshift-ai'
-      ? 'This bundle is not available when deploying a Single Node OpenShift, but you can use the standalone operator instead.'
-      : 'This bundle is not available when deploying a Single Node OpenShift.'
     : incompatibleBundle
     ? `Bundle cannot be installed together with ${
         bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
       }`
     : isAssistedMigration
     ? 'This bundle needs to be selected for clusters created from Migration Assessment'
+    : !bundles.some((b) => b.id === bundle.id)
+    ? 'This bundle is not available for the current configuration, you might be able to use the standalone operators instead.'
     : undefined;
 
   const onSelect = (checked: boolean) => {
@@ -172,10 +167,12 @@ const BundleCard = ({
 
 const OperatorsBundle = ({
   bundles,
+  allBundles,
   preflightRequirements,
   searchTerm,
 }: {
   bundles: Bundle[];
+  allBundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
 }) => {
@@ -191,8 +188,8 @@ const OperatorsBundle = ({
       <StackItem>
         <Gallery hasGutter minWidths={{ default: '350px' }}>
           {(isSingleClusterFeatureEnabled
-            ? bundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
-            : bundles
+            ? allBundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
+            : allBundles
           ).map((bundle) => (
             <GalleryItem key={bundle.id}>
               <BundleCard

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

@@ -18,13 +18,26 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
   const { addAlert } = useAlerts();
   const [bundlesLoading, setBundlesLoading] = React.useState(true);
   const [bundles, setBundles] = React.useState<Bundle[]>([]);
+  const [allBundles, setAllBundles] = React.useState<Bundle[]>([]);
   const { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
   const [searchTerm, setSearchTerm] = React.useState('');
   React.useEffect(() => {
     const fetchBundles = async () => {
       try {
-        const fetchedBundles = await BundleService.listBundles();
+        const fetchedBundles = await BundleService.listBundles(
+          cluster?.openshiftVersion || '',
+          cluster?.cpuArchitecture || '',
+          cluster?.platform?.type || '',
+          cluster?.controlPlaneCount === 1 ? 'SNO' : undefined,
+        );
+        const allBundles = await BundleService.listBundles(
+          cluster?.openshiftVersion || '',
+          cluster?.cpuArchitecture || '',
+          cluster?.platform?.type || '',
+          undefined,
+        );
         setBundles(fetchedBundles);
+        setAllBundles(allBundles);
       } catch (error) {
         handleApiError(error, () =>
           addAlert({
@@ -38,7 +51,13 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
     };
 
     void fetchBundles();
-  }, [addAlert]);
+  }, [
+    addAlert,
+    cluster.cpuArchitecture,
+    cluster.openshiftVersion,
+    cluster.platform?.type,
+    cluster.controlPlaneCount,
+  ]);
 
   const filteredBundles = bundles.filter(
     (bundle) =>
@@ -75,6 +94,7 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
           bundles={filteredBundles}
           preflightRequirements={preflightRequirements}
           searchTerm={searchTerm}
+          allBundles={allBundles}
         />
       </StackItem>
       <StackItem>

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[] = [

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

@@ -15,10 +15,53 @@ import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
 import { Formik } 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 } from 'react-router-dom-v5-compat';
+import { AxiosResponse } from 'axios';
+import { Cluster } from '@openshift-assisted/types//assisted-installer-service';
 
 const BasicStep = () => {
   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;
+  let disconnectedClusterId: string | undefined;
+
+  const onNext = 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: '4.19',
+        });
+      disconnectedClusterId = disconnectedCluster.id;
+      navigate(`${currentPath}/${disconnectedClusterId}`, {
+        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
@@ -29,7 +72,15 @@ const BasicStep = () => {
     >
       <ClusterWizardStep
         navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
+        footer={
+          <ClusterWizardFooter
+            onNext={() => {
+              void onNext();
+            }}
+            isSubmitting={isSubmitting}
+            disconnectedClusterId={disconnectedClusterId}
+          />
+        }
       >
         <WithErrorBoundary title="Failed to load Basic step">
           <Grid hasGutter>