@openshift-assisted/ui-lib 2.17.0-cim → 2.17.1-cim

package/lib/cim/components/Agent/tableUtils.tsx

@@ -1,268 +1,29 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
 import countBy from 'lodash-es/countBy';
 
-import {
-  HostsTableActions,
-  getInventory,
-  getHostname,
-  Hostname,
-  ActionCheck,
-} from '../../../common';
+import { HostsTableActions, ActionCheck } from '../../../common';
 import { AgentClusterInstallK8sResource, AgentK8sResource, InfraEnvK8sResource } from '../../types';
-import AgentStatus from './AgentStatus';
-import { ActionsResolver, TableRow } from '../../../common/components/hosts/AITable';
-import { AgentTableActions, ClusterDeploymentWizardStepsType } from '../ClusterDeployment/types';
+import { ActionsResolver } from '../../../common/components/hosts/AITable';
+import { AgentTableActions } from '../ClusterDeployment/types';
 import { hostActionResolver } from '../../../common/components/hosts/tableUtils';
-import { getAgentClusterInstallOfAgent, getAIHosts, getInfraEnvNameOfAgent } from '../helpers';
+import { getAgentClusterInstallOfAgent, getAIHosts } from '../helpers';
 import { isInstallationInProgress } from '../ClusterDeployment/helpers';
 import { AGENT_BMH_NAME_LABEL_KEY, INFRAENV_GENERATED_AI_FLOW } from '../common';
 import { BareMetalHostK8sResource } from '../../types/k8s/bare-metal-host';
-import BMHStatus from './BMHStatus';
 import {
   getAgentStatus,
   getAgentStatusKey,
   getBMHStatus,
   getBMHStatusKey,
-  getWizardStepAgentStatus,
 } from '../helpers/status';
 import { filterByHostname, getHostLabels } from '../../../common/components/hosts/utils';
 import { agentStatus } from '../helpers/agentStatus';
 import noop from 'lodash-es/noop.js';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { AgentMachineK8sResource } from '../Hypershift/types';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from '../../../common/components/hosts/types';
 
-export const agentHostnameColumn = (
-  t: TFunction,
-  hosts: Host[],
-  agents: AgentK8sResource[],
-  bareMetalHosts: BareMetalHostK8sResource[],
-  onEditHostname?: HostsTableActions['onEditHost'],
-  canEditHostname?: HostsTableActions['canEditHostname'],
-  canEditBMH?: HostsTableActions['canEditBMH'],
-): TableRow<Host> => ({
-  header: {
-    title: t('ai:Hostname'),
-    props: {
-      id: 'col-header-hostname', // ACM jest tests require id over testId
-      modifier: 'breakWord',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-    const computedHostname = getHostname(host, inventory);
-
-    let readonly = true;
-
-    const agent = agents.find((a) => a.metadata?.uid === host.id);
-    if (agent) {
-      readonly = canEditHostname ? !canEditHostname(host) : false;
-    } else {
-      const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-      if (bmh && canEditBMH) {
-        readonly = !canEditBMH(host);
-      }
-    }
-
-    return {
-      title: (
-        <Hostname
-          host={host}
-          inventory={inventory}
-          onEditHostname={editHostname}
-          hosts={hosts}
-          readonly={readonly}
-        />
-      ),
-      props: { 'data-testid': 'host-name' },
-      sortableValue: computedHostname || '',
-    };
-  },
-});
-
-export const discoveryTypeColumn = (
-  agents: AgentK8sResource[],
-  bareMetalHosts: BareMetalHostK8sResource[],
-  t: TFunction,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Discovery type'),
-      props: {
-        id: 'col-header-discovery-type',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      let discoveryType = t('ai:Unknown');
-      if (agent) {
-        // eslint-disable-next-line no-prototype-builtins
-        discoveryType = agent?.metadata?.labels?.hasOwnProperty(AGENT_BMH_NAME_LABEL_KEY)
-          ? t('ai:BMC')
-          : t('ai:Discovery ISO');
-      } else {
-        const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-        if (bmh) {
-          discoveryType = t('ai:BMC');
-        }
-      }
-      return {
-        title: discoveryType,
-        props: { 'data-testid': 'discovery-type' },
-        sortableValue: discoveryType,
-      };
-    },
-  };
-};
-
-type AgentStatusColumnProps = {
-  agents: AgentK8sResource[];
-  agentStatuses: HostStatus<string>;
-  bareMetalHosts?: BareMetalHostK8sResource[];
-  bmhStatuses?: HostStatus<string>;
-  onEditHostname?: AgentTableActions['onEditHost'];
-  onApprove?: AgentTableActions['onApprove'];
-  wizardStepId?: ClusterDeploymentWizardStepsType;
-  t: TFunction;
-  isDay2?: boolean;
-};
-
-export const agentStatusColumn = ({
-  agents,
-  agentStatuses,
-  bareMetalHosts,
-  bmhStatuses,
-  onEditHostname,
-  onApprove,
-  wizardStepId,
-  t,
-  isDay2,
-}: AgentStatusColumnProps): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Status'),
-      props: {
-        id: 'col-header-infraenvstatus',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const bmh = bareMetalHosts?.find((b) => b.metadata?.uid === host.id);
-      let bmhStatus;
-      let title: React.ReactNode = '--';
-      if (agent) {
-        const editHostname = onEditHostname ? () => onEditHostname(agent) : undefined;
-        title = (
-          <AgentStatus
-            agent={agent}
-            onApprove={onApprove}
-            onEditHostname={editHostname}
-            wizardStepId={wizardStepId}
-            isDay2={isDay2}
-          />
-        );
-      } else if (bmh && bmhStatuses) {
-        bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
-      }
-
-      return {
-        title,
-        props: { 'data-testid': 'host-status' },
-        sortableValue: agent
-          ? wizardStepId
-            ? getWizardStepAgentStatus(agent, wizardStepId, t).status.title
-            : getAgentStatus(agent, agentStatuses).status.title
-          : bmhStatus?.state.title || '',
-      };
-    },
-  };
-};
-
-export const clusterColumn = (
-  agents: AgentK8sResource[],
-  agentMachines: AgentMachineK8sResource[],
-  getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string,
-  t: TFunction,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Cluster'),
-      props: {
-        id: 'col-header-cluster',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      let cdLink: string | undefined = undefined;
-      if (agent?.spec?.clusterDeploymentName) {
-        //hypershift
-        const amNamespace = agent.metadata?.annotations?.['agentMachineRefNamespace'];
-        if (amNamespace) {
-          const am = agentMachines.find(
-            (am) =>
-              am.status?.agentRef?.name === agent.metadata?.name &&
-              am.status?.agentRef?.namespace === agent.metadata?.namespace,
-          );
-          const nodePool = am?.metadata?.annotations?.['hypershift.openshift.io/nodePool'];
-          if (nodePool) {
-            const hcNamespace = nodePool.split('/')[0];
-            const hcName = agent.spec.clusterDeploymentName.name;
-            cdLink = getClusterDeploymentLink({ name: hcName, namespace: hcNamespace });
-          }
-        } else {
-          cdLink = getClusterDeploymentLink(agent.spec.clusterDeploymentName);
-        }
-      }
-      return {
-        title: cdLink ? <Link to={cdLink}>{agent?.spec?.clusterDeploymentName?.name}</Link> : '--',
-        props: { 'data-testid': 'cluster' },
-        sortableValue: agent?.spec?.clusterDeploymentName?.name ?? '--',
-      };
-    },
-  };
-};
-
-export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Infrastructure env'),
-      props: {
-        id: 'col-header-infraenv',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
-      const infraEnvName = getInfraEnvNameOfAgent(agent);
-      const title = infraEnvName ? (
-        <Link
-          to={`/multicloud/infrastructure/environments/details/${
-            agent.metadata?.namespace || ''
-          }/${infraEnvName}/overview`}
-        >
-          {infraEnvName}
-        </Link>
-      ) : (
-        'N/A'
-      );
-      return {
-        title,
-        props: { 'data-testid': 'infra-env' },
-        sortableValue: infraEnvName,
-      };
-    },
-  };
-};
-
 export const canEditBMH = (bmh: BareMetalHostK8sResource, t: TFunction): ActionCheck => {
   const canEdit = ['deprovisioning', 'pending', 'registering'].includes(getBMHStatusKey(bmh) || '');
 

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { AgentClusterInstallK8sResource, AgentK8sResource } from '../../types';
 import DefaultEmptyState from '../../../common/components/ui/uiState/EmptyState';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { infraEnvColumn, agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
+import { useAgentsTable, infraEnvColumn, agentStatusColumn } from '../Agent';
 import {
   cpuCoresColumn,
   disksColumn,
   hostnameColumn,
   memoryColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
+} from '../../../common';
 import HostsTable, { DefaultExpandComponent } from '../../../common/components/hosts/HostsTable';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';

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

@@ -19,14 +19,14 @@ const LocationsLabelIcon: React.FC = () => {
           <br />
           <Trans
             t={t}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Keep the field empty to match <bold>any</bold> location."
           />
 
           <br />
           <Trans
             t={t}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Set <bold>{{agent_location_label_key}}</bold> label in Agent resource to specify its location."
             values={{ agent_location_label_key: AGENT_LOCATION_LABEL_KEY }}
           />

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/ClusterDetailsFormFields.tsx

@@ -44,9 +44,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>
     </>
   );
 };

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/hostSelection/ClusterDeploymentHostSelectionStep.tsx

@@ -171,7 +171,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 +189,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   const onAutoSelectChange = React.useCallback(() => {
     setNextRequested(false);
     setShowClusterErrors(false);
-    setShowFormErrors(false);
+    setHasAttemptedSubmit(false);
   }, []);
 
   const onHostSelect = React.useCallback(() => {
@@ -198,8 +198,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 +213,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 +265,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 +315,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}