@openshift-assisted/ui-lib 2.38.5 → 2.39.0

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizard.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
-import classNames from 'classnames';
-import { Grid, GridItem } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { Grid, GridItem, Wizard, WizardStep } from '@patternfly/react-core';
 import { AlertsContextProvider, LoadingState } from '../../../common';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
 import ClusterDeploymentDetailsStep from './ClusterDeploymentDetailsStep';
 import ClusterDeploymentNetworkingStep from './ClusterDeploymentNetworkingStep';
 import ClusterDeploymentHostSelectionStep from './ClusterDeploymentHostSelectionStep';
-import { ClusterDeploymentWizardProps, ClusterDeploymentWizardStepsType } from './types';
+import { ClusterDeploymentWizardProps } from './types';
 import ClusterDeploymentHostsDiscoveryStep from './ClusterDeploymentHostsDiscoveryStep';
 import { ACMFeatureSupportLevelProvider } from '../featureSupportLevels';
 import ClusterDeploymentReviewStep from './ClusterDeploymentReviewStep';
 import { YamlPreview, useYamlPreview } from '../YamlPreview';
+import { wizardStepNames } from './constants';
+import { ClusterDeploymentWizardContextProvider } from './ClusterDeploymentWizardContext';
+import { isCIMFlow } from './helpers';
 
-const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
+export const ClusterDeploymentWizard = ({
   className,
   onSaveDetails,
   onSaveNetworking,
@@ -25,6 +27,7 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
+  bareMetalHosts,
   clusterImages,
   aiConfigMap,
   infraEnv,
@@ -37,13 +40,10 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
   onSaveISOParams,
   onCreateBMH,
   isNutanix,
+  onChangeBMHHostname,
   ...rest
-}) => {
-  const [currentStepId, setCurrentStepId] = React.useState<ClusterDeploymentWizardStepsType>(
-    initialStep || 'cluster-details',
-  );
-
-  const isAIFlow = infraEnv;
+}: ClusterDeploymentWizardProps) => {
+  const { t } = useTranslation();
 
   const { code, loadingResources } = useYamlPreview({
     agentClusterInstall,
@@ -53,118 +53,110 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
     fetchKlusterletAddonConfig,
   });
 
-  const renderCurrentStep = () => {
-    const stepId: ClusterDeploymentWizardStepsType = !clusterDeployment
-      ? 'cluster-details'
-      : currentStepId;
-
-    switch (stepId) {
-      case 'hosts-selection':
-        if (agentClusterInstall?.metadata?.name) {
-          return (
-            <ClusterDeploymentHostSelectionStep
-              clusterDeployment={clusterDeployment}
-              agentClusterInstall={agentClusterInstall}
-              onClose={onClose}
-              onSaveHostsSelection={onSaveHostsSelection}
-              agents={agents}
-              aiConfigMap={aiConfigMap}
-              onEditRole={hostActions.onEditRole}
-              onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
-              isNutanix={isNutanix}
-            />
-          );
-        }
-        return <LoadingState />;
-      case 'hosts-discovery':
-        if (isAIFlow) {
-          return onSaveISOParams && onCreateBMH ? (
-            <ClusterDeploymentHostsDiscoveryStep
-              clusterDeployment={clusterDeployment}
-              agentClusterInstall={agentClusterInstall}
-              agents={agents}
-              bareMetalHosts={[] /* TODO(mlibra) */}
-              aiConfigMap={aiConfigMap}
-              infraEnv={infraEnv}
-              fetchSecret={fetchSecret}
-              onClose={onClose}
-              onChangeBMHHostname={(bmh, _hostname) => {
-                // console.log('onChangeBMHHostname is not implemented: ', hostname);
-                return Promise.resolve(bmh);
-              }}
-              onEditRole={hostActions.onEditRole}
-              onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
-              onDeleteHost={hostActions.onDeleteHost}
-              onSaveISOParams={onSaveISOParams}
-              onCreateBMH={onCreateBMH}
-              {...rest}
-            />
-          ) : (
-            <LoadingState />
-          );
-        }
-        return <LoadingState />;
-      case 'networking':
-        return (
-          <ClusterDeploymentNetworkingStep
-            clusterDeployment={clusterDeployment}
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            onSaveNetworking={onSaveNetworking}
-            onClose={onClose}
-            onEditHost={hostActions.onEditHost}
-            onEditRole={hostActions.onEditRole}
-            fetchInfraEnv={fetchInfraEnv}
-            isPreviewOpen={isPreviewOpen}
-            onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
-            isNutanix={isNutanix}
-          />
-        );
-      case 'review':
-        return (
-          <ClusterDeploymentReviewStep
-            onFinish={onFinish}
-            clusterDeployment={clusterDeployment}
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            onClose={onClose}
-            clusterImages={clusterImages}
-            infraEnv={infraEnv}
-          />
-        );
-      case 'cluster-details':
-      default:
-        return (
-          <ClusterDeploymentDetailsStep
-            clusterImages={clusterImages}
-            usedClusterNames={usedClusterNames}
-            clusterDeployment={clusterDeployment}
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            onSaveDetails={onSaveDetails}
-            onClose={onClose}
-            isPreviewOpen={isPreviewOpen}
-            infraEnv={infraEnv}
-            isNutanix={isNutanix}
-          />
-        );
-    }
-  };
+  // if initialStep is set, it is either 'host-selection' or 'host-discovery', both at index 4
+  // if initialStep is not set, start at 'cluster-details' which is at index 2
+  const startIndex = initialStep ? 4 : 2;
+  const stepNames = wizardStepNames(t);
+  const isAIFlow = !!infraEnv;
 
   return (
     <Grid style={{ height: '100%' }}>
       <GridItem span={isPreviewOpen ? 7 : 12}>
         <AlertsContextProvider>
           <ACMFeatureSupportLevelProvider clusterImages={clusterImages} isEditClusterFlow={true}>
-            <ClusterDeploymentWizardContext.Provider
-              value={{
-                currentStepId,
-                setCurrentStepId,
-                clusterDeployment /* Hotfix: agentClusterInstall, agents */,
-              }}
-            >
-              <div className={classNames('pf-v5-c-wizard', className)}>{renderCurrentStep()}</div>
-            </ClusterDeploymentWizardContext.Provider>
+            <ClusterDeploymentWizardContextProvider agentClusterInstall={agentClusterInstall}>
+              <Wizard
+                isVisitRequired
+                startIndex={startIndex}
+                className={className}
+                onClose={onClose}
+              >
+                <WizardStep
+                  name={stepNames['installation-type']}
+                  id={'installation-type'}
+                  isDisabled
+                />
+                <WizardStep name={stepNames['cluster-details']} id={'cluster-details'}>
+                  <ClusterDeploymentDetailsStep
+                    clusterImages={clusterImages}
+                    usedClusterNames={usedClusterNames}
+                    clusterDeployment={clusterDeployment}
+                    agentClusterInstall={agentClusterInstall}
+                    agents={agents}
+                    onSaveDetails={onSaveDetails}
+                    isPreviewOpen={isPreviewOpen}
+                    infraEnv={infraEnv}
+                    isNutanix={isNutanix}
+                  />
+                </WizardStep>
+                <WizardStep name={stepNames['automation']} id={'automation'} isDisabled />
+                {isCIMFlow(clusterDeployment) ? (
+                  <WizardStep name={stepNames['hosts-selection']} id={'host-selection'}>
+                    {agentClusterInstall?.metadata?.name ? (
+                      <ClusterDeploymentHostSelectionStep
+                        clusterDeployment={clusterDeployment}
+                        agentClusterInstall={agentClusterInstall}
+                        onSaveHostsSelection={onSaveHostsSelection}
+                        agents={agents}
+                        aiConfigMap={aiConfigMap}
+                        onEditRole={hostActions.onEditRole}
+                        onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
+                        isNutanix={isNutanix}
+                      />
+                    ) : (
+                      <LoadingState />
+                    )}
+                  </WizardStep>
+                ) : (
+                  <WizardStep name={stepNames['hosts-discovery']} id={'host-discovery'}>
+                    {isAIFlow && onSaveISOParams && onCreateBMH ? (
+                      <ClusterDeploymentHostsDiscoveryStep
+                        clusterDeployment={clusterDeployment}
+                        agentClusterInstall={agentClusterInstall}
+                        agents={agents}
+                        bareMetalHosts={bareMetalHosts}
+                        aiConfigMap={aiConfigMap}
+                        infraEnv={infraEnv}
+                        fetchSecret={fetchSecret}
+                        onChangeBMHHostname={onChangeBMHHostname}
+                        onEditRole={hostActions.onEditRole}
+                        onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
+                        onDeleteHost={hostActions.onDeleteHost}
+                        onSaveISOParams={onSaveISOParams}
+                        onCreateBMH={onCreateBMH}
+                        {...rest}
+                      />
+                    ) : (
+                      <LoadingState />
+                    )}
+                  </WizardStep>
+                )}
+                <WizardStep name={stepNames['networking']} id={'networking'}>
+                  <ClusterDeploymentNetworkingStep
+                    clusterDeployment={clusterDeployment}
+                    agentClusterInstall={agentClusterInstall}
+                    agents={agents}
+                    onSaveNetworking={onSaveNetworking}
+                    onEditHost={hostActions.onEditHost}
+                    onEditRole={hostActions.onEditRole}
+                    fetchInfraEnv={fetchInfraEnv}
+                    isPreviewOpen={isPreviewOpen}
+                    onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
+                    isNutanix={isNutanix}
+                  />
+                </WizardStep>
+                <WizardStep name={stepNames['review']} id={'review'}>
+                  <ClusterDeploymentReviewStep
+                    onFinish={onFinish}
+                    clusterDeployment={clusterDeployment}
+                    agentClusterInstall={agentClusterInstall}
+                    agents={agents}
+                    clusterImages={clusterImages}
+                    infraEnv={infraEnv}
+                  />
+                </WizardStep>
+              </Wizard>
+            </ClusterDeploymentWizardContextProvider>
           </ACMFeatureSupportLevelProvider>
         </AlertsContextProvider>
       </GridItem>
@@ -178,5 +170,3 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
     </Grid>
   );
 };
-
-export default ClusterDeploymentWizard;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizardContext.tsx

@@ -1,20 +1,33 @@
 import React from 'react';
-import { ClusterDeploymentK8sResource } from '../../types';
-import { ClusterDeploymentWizardStepsType } from './types';
+import { AgentClusterInstallK8sResource } from '../../types';
 
 type ClusterDeploymentWizardContextType = {
-  currentStepId: ClusterDeploymentWizardStepsType;
-  setCurrentStepId: (stepId: ClusterDeploymentWizardStepsType) => void;
-  clusterDeployment?: ClusterDeploymentK8sResource;
+  syncError?: string;
 };
 
-const ClusterDeploymentWizardContext = React.createContext<ClusterDeploymentWizardContextType>({
-  currentStepId: 'cluster-details',
-  setCurrentStepId: () => {
-    // console.error(
-    //   'Tried to use ClusterDeploymentWizardContext but there was no provider rendered.',
-    // );
-  },
-});
+export const ClusterDeploymentWizardContext =
+  React.createContext<ClusterDeploymentWizardContextType>({
+    syncError: undefined,
+  });
 
-export default ClusterDeploymentWizardContext;
+export const ClusterDeploymentWizardContextProvider = ({
+  children,
+  agentClusterInstall,
+}: {
+  children: React.ReactNode;
+  agentClusterInstall?: AgentClusterInstallK8sResource;
+}) => {
+  const syncError = React.useMemo(
+    () =>
+      agentClusterInstall?.status?.conditions?.find(
+        (c) => c.type === 'SpecSynced' && c.status === 'False',
+      )?.message,
+    [agentClusterInstall?.status?.conditions],
+  );
+
+  return (
+    <ClusterDeploymentWizardContext.Provider value={{ syncError }}>
+      {children}
+    </ClusterDeploymentWizardContext.Provider>
+  );
+};

package/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { Alert, AlertVariant, FlexItem, Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
+import { OpenShiftVersionDropdown, OpenShiftVersionModal } from '../../../common';
 import { StaticTextField } from '../../../common/components/ui/StaticTextField';
-import OpenShiftVersionSelect from '../../../common/components/clusterConfiguration/OpenShiftVersionSelect';
 import { PullSecret } from '../../../common/components/clusters';
-import { OpenshiftVersionOptionType } from '../../../common/types';
+import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../common/types';
 import {
   InputField,
   RichInputField,
@@ -14,15 +14,17 @@ import {
 import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import { getNetworkType } from '../helpers';
 import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
+
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
+  allVersions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
-  cpuArchitectures?: string[];
+  cpuArchitectures?: SupportedCpuArchitecture[];
+  allowHighlyAvailable?: boolean;
 };
 
 export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string }> = ({
@@ -46,13 +48,40 @@ export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string
 export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> = ({
   isEditFlow,
   versions,
+  allVersions,
   forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
   cpuArchitectures,
+  allowHighlyAvailable,
 }) => {
-  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const { values } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain } = values;
+  const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
+
+  const selectOptions = React.useMemo(
+    () =>
+      versions.map((version) => ({
+        label: version.label,
+        value: version.value,
+      })),
+    [versions],
+  );
+
+  const additionalSelectOptions = React.useMemo(() => {
+    if (
+      values.customOpenshiftSelect &&
+      !selectOptions.some((option) => option.value === values.customOpenshiftSelect?.value)
+    ) {
+      return [
+        {
+          value: values.customOpenshiftSelect.value,
+          label: values.customOpenshiftSelect.label,
+        },
+      ];
+    }
+    return [];
+  }, [selectOptions, values.customOpenshiftSelect]);
 
   const nameInputRef = React.useRef<HTMLInputElement>();
   React.useEffect(() => {
@@ -102,15 +131,27 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           {t('ai:OpenShift')} {forceOpenshiftVersion}
         </StaticTextField>
       ) : (
-        <OpenShiftVersionSelect
-          versions={versions}
-          onChange={(_event, value) => {
-            const ocpVersion = versions.find((v) => v.value === value);
-            setFieldValue('networkType', getNetworkType(ocpVersion));
-          }}
-        />
+        <>
+          <OpenShiftVersionDropdown
+            name="openshiftVersion"
+            items={selectOptions}
+            versions={versions}
+            showReleasesLink={false}
+            showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
+            customItems={additionalSelectOptions}
+          />
+          {openshiftVersionModalOpen && (
+            <OpenShiftVersionModal
+              allVersions={allVersions}
+              setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+            />
+          )}
+        </>
       )}
-      <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
+      <ControlPlaneNodesDropdown
+        isDisabled={isEditFlow}
+        allowHighlyAvailable={allowHighlyAvailable}
+      />
       {!isNutanix && (
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}

package/lib/cim/components/ClusterDeployment/NetworkConfiguration.tsx

@@ -97,12 +97,12 @@ const NetworkConfiguration = ({
 
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
-      setFieldValue('ingressVip', '', shouldValidate);
-      setFieldValue('apiVip', '', shouldValidate);
+      setFieldValue('ingressVips', [], shouldValidate);
+      setFieldValue('apiVips', [], shouldValidate);
     } else {
-      if (!values.vipDhcpAllocation && touched.hostSubnet) {
-        validateField('ingressVip');
-        validateField('apiVip');
+      if (!values.vipDhcpAllocation) {
+        validateField('ingressVips');
+        validateField('apiVips');
       }
     }
   }, [

package/lib/cim/components/ClusterDeployment/components/ClusterDeploymentHostsSelectionAdvanced.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import Measure from 'react-measure';
+import isMatch from 'lodash-es/isMatch.js';
+import { useFormikContext } from 'formik';
+import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+
+import { AgentK8sResource } from '../../../types';
+import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
+import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from '../types';
+import AgentsSelectionTable from '../../Agent/AgentsSelectionTable';
+import { AgentTableActions } from '../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { CpuArchitecture } from '../../../../common';
+import LocationsSelector from '../LocationsSelector';
+import LabelsSelector, { infraEnvLabelKeys } from '../LabelsSelector';
+
+type ClusterDeploymentHostsSelectionAdvancedProps = {
+  availableAgents: AgentK8sResource[];
+  onEditRole?: AgentTableActions['onEditRole'];
+  onEditHost?: AgentTableActions['onEditHost'];
+  onSetInstallationDiskId?: AgentTableActions['onSetInstallationDiskId'];
+  onHostSelect?: VoidFunction;
+  cpuArchitecture?: CpuArchitecture;
+};
+
+type FormValues = ClusterDeploymentHostsSelectionValues | ScaleUpFormValues;
+
+const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
+  availableAgents,
+  onEditRole,
+  onSetInstallationDiskId,
+  onEditHost,
+  onHostSelect,
+  cpuArchitecture,
+}: ClusterDeploymentHostsSelectionAdvancedProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<T>();
+  const { locations, agentLabels } = values;
+
+  const matchingAgents = React.useMemo(
+    () =>
+      availableAgents.filter((agent) => {
+        const labels = agentLabels.reduce((acc, curr) => {
+          const label = curr.split('=');
+          acc[label[0]] = label[1];
+          return acc;
+        }, {} as Record<string, string>);
+        const matchesLocation = locations.length
+          ? locations.includes(
+              agent.metadata?.labels?.[AGENT_LOCATION_LABEL_KEY] || AGENT_NOLOCATION_VALUE,
+            )
+          : true;
+        const matchesLabels = agent.metadata?.labels
+          ? isMatch(agent.metadata?.labels, labels)
+          : true;
+        return matchesLocation && matchesLabels;
+      }),
+    [availableAgents, locations, agentLabels],
+  );
+
+  return (
+    <>
+      <Grid hasGutter>
+        <GridItem>
+          <LocationsSelector agents={availableAgents} />
+        </GridItem>
+        <GridItem>
+          <LabelsSelector
+            agents={matchingAgents}
+            name="agentLabels"
+            labelKeysFilter={infraEnvLabelKeys}
+          />
+        </GridItem>
+        {cpuArchitecture && (
+          <Alert
+            variant={AlertVariant.info}
+            title={t(
+              'ai:Displaying only hosts with {{cpuArchitecture}} architecture in the table.',
+              {
+                cpuArchitecture,
+              },
+            )}
+            isInline
+          />
+        )}
+        <GridItem>
+          <Measure bounds>
+            {({ measureRef, contentRect }) => (
+              <div ref={measureRef}>
+                <AgentsSelectionTable
+                  matchingAgents={matchingAgents}
+                  onEditRole={onEditRole}
+                  onSetInstallationDiskId={onSetInstallationDiskId}
+                  width={contentRect.bounds?.width}
+                  onEditHost={onEditHost}
+                  onHostSelect={onHostSelect}
+                />
+              </div>
+            )}
+          </Measure>
+        </GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default ClusterDeploymentHostsSelectionAdvanced;

package/lib/cim/components/ClusterDeployment/components/ClusterScaleUpAutoHostsSelection.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { NumberInputField } from '../../../../common';
+import { AgentK8sResource } from '../../../types';
+import AgentsSelectionHostCountAlerts from '../../Agent/AgentsSelectionHostCountAlerts';
+import AgentsSelectionHostCountLabelIcon from '../../Agent/AgentsSelectionHostCountLabelIcon';
+import { useAgentsAutoSelection } from '../../Agent/AgentsSelectionUtils';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import LocationsSelector from '../LocationsSelector';
+
+type ClusterScaleUpAutoHostsSelectionProps = {
+  availableAgents: AgentK8sResource[];
+};
+
+const ClusterScaleUpAutoHostsSelection: React.FC<ClusterScaleUpAutoHostsSelectionProps> = ({
+  availableAgents,
+}) => {
+  const { matchingAgents, selectedAgents, hostCount } = useAgentsAutoSelection(availableAgents);
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Grid hasGutter>
+        <GridItem span={12} lg={10} xl={9} xl2={7}>
+          <NumberInputField
+            label={t('ai:Number of hosts')}
+            labelIcon={<AgentsSelectionHostCountLabelIcon />}
+            idPostfix="hostcount"
+            name="hostCount"
+            minValue={1}
+            maxValue={matchingAgents.length}
+            isRequired
+          />
+        </GridItem>
+        <GridItem span={12} lg={10} xl={9} xl2={7}>
+          <LocationsSelector agents={availableAgents} />
+        </GridItem>
+      </Grid>
+
+      <AgentsSelectionHostCountAlerts
+        matchingAgentsCount={matchingAgents.length}
+        selectedAgents={selectedAgents}
+        targetHostCount={hostCount}
+      />
+    </>
+  );
+};
+
+export default ClusterScaleUpAutoHostsSelection;

package/lib/cim/components/ClusterDeployment/components/ValidationSection.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AlertGroup } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/./assisted-installer-service';
+import { ValidationsInfo, ClusterWizardStepValidationsAlert } from '../../../../common';
+import { ClusterWizardStepHostStatusDeterminationObject } from '../../../../common/types/hosts';
+import ValidationsRunningAlert from '../../common/ValidationsRunningAlert';
+import { ClusterWizardStepsType, wizardStepsValidationsMap } from '../wizardTransition';
+
+type ValidationSectionProps = {
+  requireProxy?: boolean;
+  currentStepId: ClusterWizardStepsType;
+  validationsInfo?: ValidationsInfo;
+  clusterStatus?: Cluster['status'];
+  hosts: ClusterWizardStepHostStatusDeterminationObject[];
+  children: React.ReactNode;
+};
+
+export const ValidationSection = ({
+  currentStepId,
+  clusterStatus,
+  validationsInfo,
+  hosts,
+  children,
+}: ValidationSectionProps) => {
+  return (
+    <AlertGroup>
+      {children}
+      {clusterStatus && (
+        <ClusterWizardStepValidationsAlert
+          currentStepId={currentStepId}
+          clusterStatus={clusterStatus}
+          hosts={hosts}
+          validationsInfo={validationsInfo}
+          wizardStepsValidationsMap={wizardStepsValidationsMap}
+        >
+          <ValidationsRunningAlert />
+        </ClusterWizardStepValidationsAlert>
+      )}
+    </AlertGroup>
+  );
+};

package/lib/cim/components/ClusterDeployment/constants.ts

@@ -10,8 +10,10 @@ export const clusterHostsSelectionLabel = (t: TFunction): { [key in string]: str
 export const wizardStepNames = (
   t: TFunction,
 ): {
-  [key in ClusterDeploymentWizardStepsType]: string;
+  [key in ClusterDeploymentWizardStepsType | 'installation-type' | 'automation']: string;
 } => ({
+  'installation-type': t('ai:Installation type'),
+  automation: t('ai:Automation'),
   'cluster-details': t('ai:Cluster details'),
   'hosts-selection': t('ai:Cluster hosts'),
   'hosts-discovery': t('ai:Cluster hosts'),