@openshift-assisted/ui-lib 2.49.0 → 2.50.0

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

@@ -1,30 +1,36 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useFormikContext } from 'formik';
 import { Checkbox, Grid } from '@patternfly/react-core';
-import AdvancedNetworkFields from '../../../common/components/clusterConfiguration/AdvancedNetworkFields';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
-import { Address6 } from 'ip-address';
 import {
-  AvailableSubnetsControl,
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
+  StackTypeControlGroup,
+  AvailableSubnetsControl,
   VirtualIPControlGroup,
   VirtualIPControlGroupProps,
+  AdvancedNetworkFields,
 } from '../../../common/components/clusterWizard/networkingSteps';
 import {
+  canBeDualStack,
   canSelectNetworkTypeSDN,
+  DUAL_STACK,
   isAdvNetworkConf,
   isSNO,
-  isSubnetInIPv6,
   NETWORK_TYPE_OVN,
-  NO_SUBNET_SET,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { NetworkTypeControlGroup } from '../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
-  defaultNetworkSettings: ClusterDefaultConfig;
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >;
   hideManagedNetworking?: boolean;
 };
 
@@ -40,60 +46,57 @@ const NetworkConfiguration = ({
     useFormikContext<NetworkConfigurationValues>();
 
   const isMultiNodeCluster = !isSNO(cluster);
-  const isClusterCIDRIPv6 = Address6.isValid(values.clusterNetworkCidr || '');
-  const { isIPv6, isSDNSelectable } = React.useMemo(() => {
-    const isIPv6 = isSubnetInIPv6({
-      machineNetworkCidr: cluster.machineNetworkCidr,
-      clusterNetworkCidr: values.clusterNetworkCidr,
-      serviceNetworkCidr: values.serviceNetworkCidr,
-    });
-    return {
-      isIPv6,
-      isSDNSelectable: canSelectNetworkTypeSDN(!isMultiNodeCluster, isIPv6),
-    };
-  }, [
-    isMultiNodeCluster,
-    values.clusterNetworkCidr,
-    cluster.machineNetworkCidr,
-    values.serviceNetworkCidr,
-  ]);
+  const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
+
+  const isDualStack = values.stackType === DUAL_STACK;
+  const isSDNSelectable = React.useMemo(
+    () => canSelectNetworkTypeSDN(!isMultiNodeCluster, isDualStack),
+    [isMultiNodeCluster, isDualStack],
+  );
 
   const [isAdvanced, setAdvanced] = React.useState(
-    isAdvNetworkConf(cluster, defaultNetworkSettings),
+    isDualStack || isAdvNetworkConf(cluster, defaultNetworkSettings),
   );
 
-  const toggleAdvConfiguration = (checked: boolean) => {
-    setAdvanced(checked);
+  const toggleAdvConfiguration = useCallback(
+    (checked: boolean) => {
+      setAdvanced(checked);
+
+      if (!checked) {
+        setFieldValue('clusterNetworks', defaultNetworkSettings.clusterNetworksIpv4);
+        setFieldValue('serviceNetworks', defaultNetworkSettings.serviceNetworksIpv4);
+      }
+    },
+    [setFieldValue, defaultNetworkSettings],
+  );
 
-    if (!checked) {
-      setFieldValue('clusterNetworkCidr', defaultNetworkSettings.clusterNetworkCidr);
-      setFieldValue('serviceNetworkCidr', defaultNetworkSettings.serviceNetworkCidr);
-      setFieldValue('clusterNetworkHostPrefix', defaultNetworkSettings.clusterNetworkHostPrefix);
+  // Auto-enable advanced networking when switching to dual-stack
+  useEffect(() => {
+    if (isDualStack) {
+      toggleAdvConfiguration(true);
     }
-  };
+  }, [isDualStack, toggleAdvConfiguration]);
 
   const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
-  const firstSubnet = hostSubnets[0]?.subnet;
+  const primaryMachineNetwork = values.machineNetworks?.[0]?.cidr;
 
+  // Clear machine networks when switching to user-managed networking for multi-node clusters
   useEffect(() => {
-    if (isUserManagedNetworking && isMultiNodeCluster) {
-      values.hostSubnet !== NO_SUBNET_SET && setFieldValue('hostSubnet', NO_SUBNET_SET, false);
-    } else if (values.hostSubnet === NO_SUBNET_SET && firstSubnet) {
-      setFieldValue('hostSubnet', firstSubnet, false);
+    if (isUserManagedNetworking && isMultiNodeCluster && values.machineNetworks?.length) {
+      setFieldValue('machineNetworks', [], false);
     }
-  }, [isUserManagedNetworking, isMultiNodeCluster, values.hostSubnet, setFieldValue, firstSubnet]);
-
+  }, [isUserManagedNetworking, isMultiNodeCluster, values.machineNetworks?.length, setFieldValue]);
   useEffect(() => {
     if (!cluster.networkType) {
       setFieldValue('networkType', NETWORK_TYPE_OVN);
     }
     // Skipping "cluster.networkType" as it's ultimately the value we are setting in the form
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isIPv6, isMultiNodeCluster, setFieldValue]);
+  }, [isDualStack, isMultiNodeCluster, setFieldValue]);
 
   useEffect(() => {
     if (isUserManagedNetworking) {
-      const shouldValidate = !!touched.hostSubnet;
+      const shouldValidate = !!touched.machineNetworks;
 
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
@@ -106,12 +109,13 @@ const NetworkConfiguration = ({
       }
     }
   }, [
-    touched.hostSubnet,
+    touched.machineNetworks,
     isMultiNodeCluster,
     isUserManagedNetworking,
     setFieldValue,
     values.vipDhcpAllocation,
     validateField,
+    primaryMachineNetwork,
   ]);
   return (
     <Grid hasGutter>
@@ -124,13 +128,25 @@ const NetworkConfiguration = ({
         />
       )}
 
+      {(!isMultiNodeCluster || !isUserManagedNetworking) && (
+        <StackTypeControlGroup
+          clusterId={cluster.id}
+          isDualStackSelectable={isDualStackSelectable}
+          hostSubnets={hostSubnets}
+          defaultNetworkValues={defaultNetworkSettings}
+        />
+      )}
+
       <NetworkTypeControlGroup isSDNSelectable={isSDNSelectable} />
 
       {!(isMultiNodeCluster && isUserManagedNetworking) && (
         <AvailableSubnetsControl
+          clusterId={cluster.id}
           hostSubnets={hostSubnets}
-          hosts={cluster.hosts || []}
           isRequired={!isUserManagedNetworking}
+          isDisabled={hostSubnets.length === 0}
+          openshiftVersion={cluster.openshiftVersion}
+          hosts={cluster.hosts || []}
           isMultiNodeCluster={isMultiNodeCluster}
         />
       )}
@@ -149,7 +165,8 @@ const NetworkConfiguration = ({
         description={t('ai:Configure advanced networking properties (e.g. CIDR ranges).')}
         isChecked={isAdvanced}
         onChange={(_event, checked: boolean) => toggleAdvConfiguration(checked)}
-        body={isAdvanced && <AdvancedNetworkFields isClusterCIDRIPv6={isClusterCIDRIPv6} />}
+        isDisabled={isDualStack}
+        body={isAdvanced && <AdvancedNetworkFields />}
       />
     </Grid>
   );

package/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDeploymentDetailsForm.tsx

@@ -14,7 +14,7 @@ import {
   OsImage,
 } from '../../../types';
 import { ClusterImageSetK8sResource } from '../../../types/k8s/cluster-image-set';
-import { getOCPVersions, getSelectedVersion } from '../../helpers';
+import { getOCPVersions } from '../../helpers';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import {
   ClusterDetailsFormFields,
@@ -46,17 +46,14 @@ export const ClusterDeploymentDetailsFormWrapper = ({
 }) => {
   const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
   const { syncError } = React.useContext(ClusterDeploymentWizardContext);
-  const { submitForm, isSubmitting, isValid, isValidating, dirty } =
-    useFormikContext<ClusterDetailsValues>();
+  const { isSubmitting, isValid, isValidating } = useFormikContext<ClusterDetailsValues>();
   const { t } = useTranslation();
 
+  // ClusterDeploymentDetailsFormWrapper is exclusively used by ClusterDeploymentWizard (edit flow).
+  // No form submission needed here—just navigate to the next step.
   const handleOnNext = React.useCallback(() => {
-    if (dirty) {
-      void submitForm();
-    } else {
-      void goToNextStep();
-    }
-  }, [dirty, goToNextStep, submitForm]);
+    void goToNextStep();
+  }, [goToNextStep]);
 
   const footer = React.useMemo(
     () => (
@@ -93,7 +90,6 @@ export const ClusterDeploymentDetailsFormWrapper = ({
 };
 
 export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
-  agentClusterInstall,
   clusterDeployment,
   clusterImages,
   extensionAfter,
@@ -111,18 +107,13 @@ export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsForm
     [clusterImages, isNutanix, osImages],
   );
 
-  const forceOpenshiftVersion = agentClusterInstall
-    ? getSelectedVersion(clusterImages, agentClusterInstall)
-    : undefined;
   const isEditFlow = !!clusterDeployment;
 
   const { values } = useFormikContext<ClusterDetailsValues>();
 
   const [cpuArchitectures, allowHighlyAvailable] = React.useMemo(() => {
     const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
-    const version = allVersions.find(
-      (ver) => ver.value === values.openshiftVersion || ver.version === forceOpenshiftVersion,
-    );
+    const version = allVersions.find((ver) => ver.value === values.openshiftVersion);
     const isMulti = version?.cpuArchitectures?.[0] === CpuArchitecture.MULTI;
 
     const highlyAvailableSupported = toNumber(version?.version?.split('.')?.[1]) >= 18;
@@ -130,7 +121,7 @@ export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsForm
       (isMulti ? cpuArchitectures : version?.cpuArchitectures) as SupportedCpuArchitecture[],
       highlyAvailableSupported && !isMulti,
     ];
-  }, [allVersions, forceOpenshiftVersion, values.openshiftVersion]);
+  }, [allVersions, values.openshiftVersion]);
 
   return (
     <>
@@ -148,7 +139,6 @@ export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsForm
           versions={versions}
           allVersions={allVersions}
           isEditFlow={isEditFlow}
-          forceOpenshiftVersion={forceOpenshiftVersion}
           extensionAfter={extensionAfter}
           isNutanix={isNutanix}
           cpuArchitectures={cpuArchitectures}

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

@@ -3,6 +3,7 @@ import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
 import {
+  acmClusterNameValidationMessages,
   ExternalPlatformsDropdown,
   isMajorMinorVersionEqualOrGreater,
   OpenShiftVersionDropdown,
@@ -11,11 +12,7 @@ import {
 import { StaticTextField } from '../../../../common/components/ui/StaticTextField';
 import { PullSecret } from '../../../../common/components/clusters';
 import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../../common/types';
-import {
-  InputField,
-  RichInputField,
-  acmClusterNameValidationMessages,
-} from '../../../../common/components/ui/formik';
+import { InputField, RichInputField } from '../../../../common/components/ui/formik';
 import { ClusterDetailsValues } from '../../../../common/components/clusterWizard/types';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../../common/CpuArchitectureDropdown';
@@ -24,7 +21,6 @@ import { getNetworkType } from '../../helpers';
 
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
-  forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
   allVersions: OpenshiftVersionOptionType[];
@@ -44,9 +40,9 @@ export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string
         'ai:All DNS records must be subdomains of this base and include the cluster name. This cannot be changed after cluster installation. The full cluster address will be:',
       )}{' '}
       <br />
-      <strong>
+      <span className="pf-v6-u-font-weight-bold">
         {name || '[Cluster Name]'}.{baseDnsDomain || '[example.com]'}
-      </strong>
+      </span>
     </>
   );
 };
@@ -55,7 +51,6 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   isEditFlow,
   versions,
   allVersions,
-  forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
   cpuArchitectures,
@@ -68,7 +63,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   const { name, baseDnsDomain } = values;
 
   React.useEffect(() => {
-    if (!versions.length && !values.openshiftVersion) {
+    if (!versions.length && !values.openshiftVersion && !isEditFlow) {
       const fallbackOpenShiftVersion = allVersions.find((version) => version.default);
       setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion?.value);
       setFieldValue('openshiftVersion', fallbackOpenShiftVersion?.value);
@@ -81,15 +76,6 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
     nameInputRef.current?.focus();
   }, []);
 
-  const selectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
-
   const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
@@ -143,24 +129,25 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           isRequired
         />
       )}
-      {forceOpenshiftVersion ? (
+      {isEditFlow ? (
         <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
-          {t('ai:OpenShift')} {forceOpenshiftVersion}
+          {t('ai:OpenShift')}{' '}
+          {allVersions.find((v) => v.value === values.openshiftVersion)?.version ||
+            values.openshiftVersion}
         </StaticTextField>
       ) : (
         <>
           <OpenShiftVersionDropdown
             name="openshiftVersion"
-            items={selectOptions}
             versions={versions}
             showReleasesLink={false}
             showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-            customItem={additionalSelectOption}
+            customVersion={additionalSelectOption}
           />
           {openshiftVersionModalOpen && (
             <OpenShiftVersionModal
               allVersions={allVersions}
-              setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+              onClose={() => setOpenshiftVersionModalOpen(false)}
             />
           )}
         </>

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

@@ -1,8 +1,8 @@
 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 useResizeObserver from '@react-hook/resize-observer';
 
 import { AgentK8sResource } from '../../../types';
 import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
@@ -58,6 +58,12 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     [availableAgents, locations, agentLabels],
   );
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
+
   return (
     <>
       <Grid hasGutter>
@@ -84,20 +90,16 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
           />
         )}
         <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>
+          <div ref={tableRef}>
+            <AgentsSelectionTable
+              matchingAgents={matchingAgents}
+              onEditRole={onEditRole}
+              onSetInstallationDiskId={onSetInstallationDiskId}
+              width={tableWidth}
+              onEditHost={onEditHost}
+              onHostSelect={onHostSelect}
+            />
+          </div>
         </GridItem>
       </Grid>
     </>

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx

@@ -217,7 +217,7 @@ export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
 
       {!isValid && errorAlert}
 
-      {isError && (
+      {!!isError && (
         <GridItem>
           <Alert
             variant={AlertVariant.danger}

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostDiscoveryTable.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  discoveryTypeColumn,
-  agentStatusColumn,
   useAgentsTable,
   canChangeHostname,
-} from '../../Agent/tableUtils';
+  discoveryTypeColumn,
+  agentStatusColumn,
+} from '../../Agent';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
@@ -20,8 +20,6 @@ import {
   labelsColumn,
   memoryColumn,
   roleColumn,
-} from '../../../../common/components/hosts/tableUtils';
-import {
   DiscoveryTroubleshootingModal,
   ChangeHostnameAction,
   MassChangeHostnameModal,

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostsDiscovery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   DiscoveryTroubleshootingModal,
   FormatDiskWarning,
@@ -67,6 +67,12 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
 
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
   const { t } = useTranslation();
+
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
   return (
     <Grid hasGutter>
       <GridItem>
@@ -100,26 +106,22 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
       </GridItem>
 
       <GridItem>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef}>
-              <ClusterDeploymentHostDiscoveryTable
-                agents={agents}
-                bareMetalHosts={bareMetalHosts}
-                infraEnv={infraEnv}
-                onEditHost={setEditAgent}
-                onEditRole={onEditRole}
-                onSetInstallationDiskId={onSetInstallationDiskId}
-                onEditBMH={setEditBMH}
-                onChangeHostname={onChangeHostname}
-                onChangeBMHHostname={onChangeBMHHostname}
-                onApprove={onApproveAgent}
-                width={contentRect.bounds?.width}
-                onDeleteHost={onDeleteHost}
-              />
-            </div>
-          )}
-        </Measure>
+        <div ref={tableRef}>
+          <ClusterDeploymentHostDiscoveryTable
+            agents={agents}
+            bareMetalHosts={bareMetalHosts}
+            infraEnv={infraEnv}
+            onEditHost={setEditAgent}
+            onEditRole={onEditRole}
+            onSetInstallationDiskId={onSetInstallationDiskId}
+            onEditBMH={setEditBMH}
+            onChangeHostname={onChangeHostname}
+            onChangeBMHHostname={onChangeBMHHostname}
+            onApprove={onApproveAgent}
+            width={tableWidth}
+            onDeleteHost={onDeleteHost}
+          />
+        </div>
         <EditBMHModal
           infraEnv={infraEnv}
           bmh={editBMH}

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostSelectionStep.tsx

@@ -96,9 +96,7 @@ const getValidationSchema = (agentClusterInstall: AgentClusterInstallK8sResource
       selectedHostIds: values.autoSelectHosts
         ? Yup.array(Yup.string())
         : isSNOCluster
-        ? Yup.array(Yup.string())
-            .min(1, t('ai:Please select one host for the cluster.'))
-            .max(1, t('ai:Please select one host for the cluster.')) // TODO(jtomasek): replace this with Yup.array().length() after updating Yup
+        ? Yup.array(Yup.string()).length(1, t('ai:Please select one host for the cluster.'))
         : Yup.array(Yup.string()).min(3, t('ai:Please select at least 3 hosts for the cluster.')),
     });
   });
@@ -171,7 +169,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     setSubmitting,
   } = useFormikContext<ClusterDeploymentHostsSelectionValues>();
   const [nextRequested, setNextRequested] = React.useState(false);
-  const [showFormErrors, setShowFormErrors] = React.useState(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = React.useState(false);
   const selectedAgents = getSelectedAgents(agents, values);
   const { t } = useTranslation();
   const onEditRole = React.useCallback(
@@ -189,7 +187,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   const onAutoSelectChange = React.useCallback(() => {
     setNextRequested(false);
     setShowClusterErrors(false);
-    setShowFormErrors(false);
+    setHasAttemptedSubmit(false);
   }, []);
 
   const onHostSelect = React.useCallback(() => {
@@ -198,8 +196,8 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   }, []);
 
   const onNext = React.useCallback(async () => {
-    if (!showFormErrors) {
-      setShowFormErrors(true);
+    if (!hasAttemptedSubmit) {
+      setHasAttemptedSubmit(true);
       const errors = await validateForm();
       setTouched(
         Object.keys(errors).reduce((acc, curr) => {
@@ -213,7 +211,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     }
     void submitForm();
     setNextRequested(true);
-  }, [setTouched, showFormErrors, submitForm, validateForm]);
+  }, [setTouched, hasAttemptedSubmit, submitForm, validateForm]);
 
   React.useEffect(() => {
     if (nextRequested && !isSubmitting) {
@@ -265,35 +263,34 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     </ValidationSection>
   );
 
-  const footer = React.useMemo(
-    () => (
+  const footer = React.useMemo(() => {
+    const hasValidationErrors = hasAttemptedSubmit && (!isValid || isValidating);
+    const isNextDisabled = nextRequested || isSubmitting || hasValidationErrors; // || !!syncError
+
+    return (
       <WizardFooter
         activeStep={activeStep}
         onNext={onNext}
-        isNextDisabled={
-          nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false) // ||
-          // !!syncError
-        }
+        isNextDisabled={isNextDisabled}
         nextButtonText={submittingText || t('ai:Next')}
         nextButtonProps={{ isLoading: !!submittingText }}
         onBack={goToPrevStep}
         onClose={close}
       />
-    ),
-    [
-      activeStep,
-      onNext,
-      nextRequested,
-      isSubmitting,
-      showFormErrors,
-      isValid,
-      isValidating,
-      submittingText,
-      t,
-      goToPrevStep,
-      close,
-    ],
-  );
+    );
+  }, [
+    activeStep,
+    onNext,
+    nextRequested,
+    isSubmitting,
+    hasAttemptedSubmit,
+    isValid,
+    isValidating,
+    submittingText,
+    t,
+    goToPrevStep,
+    close,
+  ]);
 
   useWizardFooter(footer);
 
@@ -316,14 +313,14 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
           hostsBinding={nextRequested && !showClusterErrors}
         />
       </GridItem>
-      {(showClusterErrors || showFormErrors) && !!alerts.length && (
+      {(showClusterErrors || hasAttemptedSubmit) && !!alerts.length && (
         <GridItem>
           <Alerts />
         </GridItem>
       )}
 
       {syncError && <GridItem>{errorsSection}</GridItem>}
-      {showFormErrors && errors.selectedHostIds && touched.selectedHostIds && (
+      {hasAttemptedSubmit && errors.selectedHostIds && touched.selectedHostIds && (
         <GridItem>
           <Alert
             variant={AlertVariant.danger}