Revert new flow

apps/assisted-disconnected-ui/src/components/ResetSingleClusterModal.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Button, ButtonVariant, Content, Stack, StackItem, Alert } from '@patternfly/react-core';
 import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
-import { useModalDialogsContext, ClustersService } from '@openshift-assisted/ui-lib/ocm';
+import {
+  useModalDialogsContext,
+  ClustersService,
+  HostsService,
+} from '@openshift-assisted/ui-lib/ocm';
 import {
   getApiErrorMessage,
   handleApiError,
@@ -31,6 +35,12 @@ const ResetSingleClusterModal: React.FC = () => {
     try {
       setError(undefined);
       setIsLoading(true);
+      const hosts = cluster?.hosts;
+      if (hosts) {
+        for (const host of hosts) {
+          await HostsService.unbind(host);
+        }
+      }
       await ClustersService.remove(cluster.id);
       navigate(`/`);
     } catch (e) {

libs/ui-lib/lib/common/api/assisted-service/ClustersAPI.ts

@@ -245,12 +245,6 @@ const ClustersAPI = {
       headers: { 'Content-Type': 'application/json' },
     });
   },
-  registerDisconnected(params: { name: string; openshiftVersion: string }) {
-    return client.post<Cluster, AxiosResponse<Cluster>, { name: string; openshiftVersion: string }>(
-      `${ClustersAPI.makeBaseURI()}disconnected`,
-      params,
-    );
-  },
 };
 
 export default ClustersAPI;

libs/ui-lib/lib/common/api/assisted-service/HostsAPI.ts

@@ -75,6 +75,11 @@ const HostsAPI = {
       },
     );
   },
+  unbindHost(infraEnvId: InfraEnv['id'], hostId: Host['id']) {
+    return client.post<Host, AxiosResponse<Host>, never>(
+      `${HostsAPI.makeActionsBaseURI(infraEnvId, hostId)}/unbind`,
+    );
+  },
 };
 
 export default HostsAPI;

libs/ui-lib/lib/common/components/ui/WizardFooter.tsx

@@ -69,7 +69,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 variant={ButtonVariant.primary}
                 name="next"
                 onClick={onNext}
-                isDisabled={isNextDisabled || isSubmitting}
+                isDisabled={isNextDisabled}
                 isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}

libs/ui-lib/lib/common/components/ui/formik/PullSecretField.tsx

@@ -67,7 +67,6 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
 
 const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   const { t } = useTranslation();
-
   return (
     <TextAreaField
       name="pullSecret"

libs/ui-lib/lib/ocm/components/Routes.tsx

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

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { Flex, Grid, GridItem } from '@patternfly/react-core';
+import { Grid, GridItem, Split, SplitItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -11,7 +11,7 @@ import {
   getRichTextValidation,
   CpuArchitecture,
   useAlerts,
-  TechnologyPreview,
+  DeveloperPreview,
 } from '../../../common';
 import { canNextClusterDetails } from './wizardTransition';
 import { OpenshiftVersionOptionType, getFormikErrorFields } from '../../../common';
@@ -167,13 +167,14 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               </GridItem>
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
-                  <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                    <TechnologyPreview />
-                    <InstallDisconnectedSwitch isDisabled={!!cluster} />
-                    <span>
-                      {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                    </span>
-                  </Flex>
+                  <Split>
+                    <SplitItem>
+                      <InstallDisconnectedSwitch isDisabled={!!cluster} />
+                    </SplitItem>
+                    <SplitItem>
+                      <DeveloperPreview />
+                    </SplitItem>
+                  </Split>
                 </GridItem>
               )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContext.tsx

@@ -3,7 +3,6 @@ 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;
@@ -21,8 +20,6 @@ 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);

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

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

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -17,8 +17,6 @@ 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;
@@ -73,7 +71,6 @@ type ClusterWizardFooterProps = WizardFooterGenericProps & {
   errorFields?: string[];
   alertTitle?: string;
   alertContent?: string | null;
-  disconnectedClusterId?: string;
 };
 
 const ClusterWizardFooter = ({
@@ -83,37 +80,19 @@ const ClusterWizardFooter = ({
   alertTitle,
   alertContent,
   onCancel,
-  disconnectedClusterId,
   ...rest
 }: ClusterWizardFooterProps) => {
-  const { alerts, addAlert } = useAlerts();
+  const { alerts } = 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(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 handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
 
-  const handleReset = React.useCallback(
-    () => resetSingleClusterDialog.open({ cluster }),
-    [resetSingleClusterDialog, cluster],
-  );
+  const handleReset = React.useCallback(() => {
+    resetSingleClusterDialog.open({ cluster });
+  }, [resetSingleClusterDialog, cluster]);
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

libs/ui-lib/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

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

libs/ui-lib/lib/ocm/components/clusterWizard/constants.ts

@@ -14,7 +14,6 @@ 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[] = [

libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,67 +1,24 @@
 import * as React from 'react';
 import {
   ClusterWizardStep,
-  TechnologyPreview,
+  DeveloperPreview,
   ExternalLink,
   OCP_RELEASES_PAGE,
   StaticTextField,
   useTranslation,
 } from '../../../../common';
-import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
+import { Split, SplitItem, Grid, GridItem, Form, Content } 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 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.20',
-        });
-      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
@@ -72,33 +29,26 @@ const BasicStep = () => {
     >
       <ClusterWizardStep
         navigation={<ClusterWizardNavigation />}
-        footer={
-          <ClusterWizardFooter
-            onNext={() => {
-              void onNext();
-            }}
-            isSubmitting={isSubmitting}
-            disconnectedClusterId={disconnectedClusterId}
-          />
-        }
+        footer={<ClusterWizardFooter onNext={moveNext} />}
       >
         <WithErrorBoundary title="Failed to load Basic step">
           <Grid hasGutter>
             <GridItem>
-              <Content component="h2">Basic information</Content>
+              <Split>
+                <SplitItem>
+                  <Content component="h2">Basic information</Content>
+                </SplitItem>
+                <SplitItem>
+                  <DeveloperPreview />
+                </SplitItem>
+              </Split>
             </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>
+              <InstallDisconnectedSwitch />
             </GridItem>
             <GridItem>
               <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
+                <OcmOpenShiftVersion openshiftVersion="4.19" withPreviewText withMultiText>
                   <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
                     <span data-ouia-id="openshift-releases-link">
                       {t('ai:Learn more about OpenShift releases')}

libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/InstallDisconnectedSwitch.tsx

@@ -10,6 +10,7 @@ const InstallDisconnectedSwitch = ({ isDisabled }: { isDisabled?: boolean }) =>
   const switchBtn = (
     <Switch
       id="disconnected-install-switch"
+      label={t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
       isChecked={installDisconnected}
       onChange={(_, checked) => setInstallDisconnected(checked)}
       ouiaId="DisconnectedInstall"