@openshift-assisted/ui-lib 2.49.0 → 2.50.0

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

@@ -1,7 +1,7 @@
 import isMatch from 'lodash-es/isMatch.js';
 import { useFormikContext } from 'formik';
 import React from 'react';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
 
 import { AgentK8sResource } from '../../../types';
@@ -58,6 +58,12 @@ export 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 @@ export 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/networkConfigurationValidation.ts

@@ -3,54 +3,48 @@ import {
   ClusterDefaultConfig,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
-import {
-  getSubnetFromMachineNetworkCidr,
-  getHostSubnets,
-} from '../../../common/components/clusterConfiguration/utils';
-import {
-  isSNO,
-  selectClusterNetworkCIDR,
-  selectClusterNetworkHostPrefix,
-  selectMachineNetworkCIDR,
-  selectServiceNetworkCIDR,
-} from '../../../common/selectors/clusterSelectors';
-import { NETWORK_TYPE_OVN, NO_SUBNET_SET } from '../../../common/config';
-
-const getInitHostSubnet = (
-  cluster: Cluster,
-  managedNetworkingType: 'userManaged' | 'clusterManaged',
-) => {
-  if (!isSNO(cluster) && managedNetworkingType === 'userManaged') {
-    return NO_SUBNET_SET;
-  }
-  const machineNetworkCIDR = selectMachineNetworkCIDR(cluster);
-  if (machineNetworkCIDR) {
-    return getSubnetFromMachineNetworkCidr(machineNetworkCIDR);
-  }
-  if (managedNetworkingType === 'clusterManaged') {
-    return getHostSubnets(cluster)?.[0]?.subnet;
-  }
-};
+import { isDualStack } from '../../../common/components/clusterConfiguration/utils';
+import { DUAL_STACK, IPV4_STACK, NETWORK_TYPE_OVN } from '../../../common/config';
 
 export const getNetworkInitialValues = (
   cluster: Cluster,
-  defaultNetworkSettings: ClusterDefaultConfig,
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >,
 ): NetworkConfigurationValues => {
   const managedNetworkingType = cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged';
+  const isDualStackCluster = isDualStack(cluster);
+
+  let clusterNetworks = cluster.clusterNetworks;
+  if (!cluster.clusterNetworks?.length) {
+    clusterNetworks = isDualStackCluster
+      ? defaultNetworkSettings.clusterNetworksDualstack
+      : defaultNetworkSettings.clusterNetworksIpv4;
+  }
+
+  let serviceNetworks = cluster.serviceNetworks;
+  if (!serviceNetworks?.length) {
+    serviceNetworks = isDualStackCluster
+      ? defaultNetworkSettings.serviceNetworksDualstack
+      : defaultNetworkSettings.serviceNetworksIpv4;
+  }
+
+  const machineNetworks = cluster.machineNetworks || [];
 
   return {
-    clusterNetworkCidr:
-      selectClusterNetworkCIDR(cluster) || defaultNetworkSettings.clusterNetworkCidr,
-    clusterNetworkHostPrefix:
-      selectClusterNetworkHostPrefix(cluster) || defaultNetworkSettings.clusterNetworkHostPrefix,
-    serviceNetworkCidr:
-      selectServiceNetworkCIDR(cluster) || defaultNetworkSettings.serviceNetworkCidr,
+    clusterNetworks,
+    serviceNetworks,
+    machineNetworks,
     apiVips: cluster.apiVips,
     ingressVips: cluster.ingressVips,
     sshPublicKey: cluster.sshPublicKey || '',
-    hostSubnet: getInitHostSubnet(cluster, managedNetworkingType) || NO_SUBNET_SET,
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType,
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
+    stackType: isDualStackCluster ? DUAL_STACK : IPV4_STACK,
   };
 };

package/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentHostsNetworkTable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { EmptyState } from '../../../../common';
+import { EmptyState, activeNICColumn, hostnameColumn, roleColumn } from '../../../../common';
 import { AgentTableActions } from '../types';
 import {
   AgentClusterInstallK8sResource,
@@ -9,14 +9,9 @@ import {
 } from '../../../types';
 import { getAICluster, getIsSNOCluster } from '../../helpers';
 import { AdditionalNTPSourcesDialogToggle } from '../components/AdditionalNTPSourcesDialogToggle';
-import { agentStatusColumn, useAgentsTable } from '../../Agent/tableUtils';
+import { agentStatusColumn, useAgentsTable } from '../../Agent';
 import HostsTable from '../../../../common/components/hosts/HostsTable';
 import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';
-import {
-  activeNICColumn,
-  hostnameColumn,
-  roleColumn,
-} from '../../../../common/components/hosts/tableUtils';
 import { usePagination } from '../../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';

package/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentNetworkingForm.tsx

@@ -14,7 +14,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import {
-  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS,
   getHostSubnets,
   SecurityFields,
   ProxyFields,
@@ -99,7 +99,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           <Content component={ContentVariants.p}>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:The hosts you selected are using different proxy settings. Configure a proxy that will be applied for these hosts. <bold>Configure at least one of the proxy settings below.</bold>"
             />
           </Content>
@@ -133,7 +133,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
                 cluster={cluster}
                 hostSubnets={hostSubnets}
                 isVipDhcpAllocationDisabled
-                defaultNetworkSettings={CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4}
+                defaultNetworkSettings={CLUSTER_DEFAULT_NETWORK_SETTINGS}
                 hideManagedNetworking={getIsSNOCluster(agentClusterInstall) || isNutanix}
               />
             </GridItem>

package/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentNetworkingStep.tsx

@@ -60,7 +60,7 @@ export const NetworkingForm = ({
   const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
   const { syncError } = React.useContext(ClusterDeploymentWizardContext);
   const { alerts } = useAlerts();
-  const [showFormErrors, setShowFormErrors] = React.useState(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = React.useState(false);
   const [showClusterErrors, setShowClusterErrors] = React.useState(false);
   const [nextRequested, setNextRequested] = React.useState(false);
   const { infraEnvWithProxy, infraEnvsError, infraEnvsLoading, sameProxies } = useInfraEnvProxies({
@@ -76,7 +76,7 @@ export const NetworkingForm = ({
   );
 
   const onNext = React.useCallback(async () => {
-    if (!showFormErrors) {
+    if (!hasAttemptedSubmit) {
       const errors = await validateForm();
       setTouched(
         Object.keys(errors).reduce((acc, curr) => {
@@ -84,13 +84,13 @@ export const NetworkingForm = ({
           return acc;
         }, {} as Record<string, boolean>),
       );
-      setShowFormErrors(true);
+      setHasAttemptedSubmit(true);
       if (Object.keys(errors).length) {
         return;
       }
     }
     setNextRequested(true);
-  }, [setTouched, showFormErrors, validateForm]);
+  }, [setTouched, hasAttemptedSubmit, validateForm]);
 
   React.useEffect(() => {
     setNextRequested(false);
@@ -123,34 +123,34 @@ export const NetworkingForm = ({
     return undefined;
   }, [isSubmitting, isValidating, nextRequested, t]);
 
-  const footer = React.useMemo(
-    () => (
+  const footer = React.useMemo(() => {
+    const hasValidationErrors = hasAttemptedSubmit && (!isValid || isValidating);
+    const isNextDisabled = nextRequested || isSubmitting || hasValidationErrors;
+
+    return (
       <WizardFooter
         activeStep={activeStep}
         onNext={onNext}
-        isNextDisabled={
-          nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false)
-        }
+        isNextDisabled={isNextDisabled}
         nextButtonProps={{ isLoading: !!submittingText }}
         nextButtonText={submittingText || t('ai:Next')}
         onBack={goToPrevStep}
         onClose={close}
       />
-    ),
-    [
-      activeStep,
-      onNext,
-      nextRequested,
-      isSubmitting,
-      showFormErrors,
-      isValid,
-      isValidating,
-      submittingText,
-      goToPrevStep,
-      close,
-      t,
-    ],
-  );
+    );
+  }, [
+    activeStep,
+    onNext,
+    nextRequested,
+    isSubmitting,
+    hasAttemptedSubmit,
+    isValid,
+    isValidating,
+    submittingText,
+    goToPrevStep,
+    close,
+    t,
+  ]);
 
   useWizardFooter(footer);
 
@@ -177,7 +177,7 @@ export const NetworkingForm = ({
           />
         </GridItem>
 
-        {showFormErrors && !!errorFields.length && (
+        {hasAttemptedSubmit && !!errorFields.length && (
           <GridItem>
             <Alert
               variant={AlertVariant.danger}
@@ -191,7 +191,7 @@ export const NetworkingForm = ({
           </GridItem>
         )}
 
-        {(showClusterErrors || showFormErrors) && !!alerts.length && (
+        {(showClusterErrors || hasAttemptedSubmit) && !!alerts.length && (
           <GridItem>
             <Alerts />
           </GridItem>

package/lib/cim/components/ClusterDeployment/review/ClusterDeploymentReviewStep.tsx

@@ -144,15 +144,29 @@ export const ClusterDeploymentReviewStep = ({
             testId="platform-type"
           />
           <DetailItem
-            title={t('ai:API IP')}
-            value={agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP}
-            testId="api-vip"
+            title={t('ai:API IP (Primary)')}
+            value={agentClusterInstall?.status?.apiVIPs?.[0]}
+            testId="api-vip-primary"
           />
+          {(agentClusterInstall?.status?.apiVIPs?.length ?? 0) > 1 ? (
+            <DetailItem
+              title={t('ai:API IP (Secondary)')}
+              value={agentClusterInstall?.status?.apiVIPs?.[1]}
+              testId="api-vip-secondary"
+            />
+          ) : undefined}
           <DetailItem
-            title={t('ai:Ingress IP')}
-            value={agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP}
-            testId="ingress-vip"
+            title={t('ai:Ingress IP (Primary)')}
+            value={agentClusterInstall?.status?.ingressVIPs?.[0]}
+            testId="ingress-vip-primary"
           />
+          {(agentClusterInstall?.status?.ingressVIPs?.length ?? 0) > 1 ? (
+            <DetailItem
+              title={t('ai:Ingress IP (Secondary)')}
+              value={agentClusterInstall?.status?.ingressVIPs?.[1]}
+              testId="ingress-vip-secondary"
+            />
+          ) : undefined}
           <DetailItem
             title={t('ai:Cluster summary')}
             testId="cluster-summary"

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 
 import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../common';
 import { getHostSubnets } from '../../../common/components/clusterConfiguration/utils';
@@ -14,14 +15,17 @@ import { getAICluster } from '../helpers';
 import { useDeepCompareMemoize } from '../../../common/hooks';
 import {
   HostSubnets,
-  hostPrefixValidationSchema,
-  ipBlockValidationSchema,
   vipArrayValidationSchema,
   sshPublicKeyListValidationSchema,
-  hostSubnetValidationSchema,
   httpProxyValidationSchema,
   noProxyValidationSchema,
-  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS,
+  clusterNetworksValidationSchema,
+  serviceNetworkValidationSchema,
+  dualStackValidationSchema,
+  IPv4ValidationSchema,
+  IPV4_STACK,
+  NetworkConfigurationValues,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -44,19 +48,33 @@ const getInfraEnvProxy = (infraEnvs: InfraEnvK8sResource[]) => {
 const getNetworkConfigurationValidationSchema = (
   initialValues: ClusterDeploymentNetworkingValues,
   hostSubnets: HostSubnets,
+  t: TFunction,
+  openshiftVersion?: string,
 ) =>
   Yup.lazy((values: ClusterDeploymentNetworkingValues) =>
     Yup.object<ClusterDeploymentNetworkingValues>().shape({
-      clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
-      clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),
-      serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
-      apiVips: vipArrayValidationSchema(hostSubnets, values, initialValues.apiVips),
-      ingressVips: vipArrayValidationSchema(hostSubnets, values, initialValues.ingressVips),
-      sshPublicKey: sshPublicKeyListValidationSchema,
-      hostSubnet: hostSubnetValidationSchema,
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        then: () => clusterNetworksValidationSchema(t).concat(IPv4ValidationSchema),
+        otherwise: () =>
+          clusterNetworksValidationSchema(t).concat(
+            dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion),
+          ),
+      }),
+      serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        then: () => serviceNetworkValidationSchema(t).concat(IPv4ValidationSchema),
+        otherwise: () =>
+          serviceNetworkValidationSchema(t).concat(
+            dualStackValidationSchema(t('ai:service network'), t, openshiftVersion),
+          ),
+      }),
+      apiVips: vipArrayValidationSchema(hostSubnets, values, t),
+      ingressVips: vipArrayValidationSchema(hostSubnets, values, t),
+      sshPublicKey: sshPublicKeyListValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -71,6 +89,7 @@ export const useNetworkingFormik = ({
   agentClusterInstall,
   agents,
 }: UseNetworkingFormikArgs) => {
+  const { t } = useTranslation();
   const initialValues = React.useMemo(
     () => {
       const cluster = getAICluster({
@@ -79,7 +98,7 @@ export const useNetworkingFormik = ({
         agents,
       });
       return {
-        ...getNetworkInitialValues(cluster, CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4),
+        ...getNetworkInitialValues(cluster, CLUSTER_DEFAULT_NETWORK_SETTINGS),
         enableProxy: false,
         editProxy: false,
       };
@@ -93,8 +112,13 @@ export const useNetworkingFormik = ({
       agents,
     });
     const hostSubnets = getHostSubnets(cluster);
-    return getNetworkConfigurationValidationSchema(initialValues, hostSubnets);
-  }, [initialValues, clusterDeployment, agentClusterInstall, agents]);
+    return getNetworkConfigurationValidationSchema(
+      initialValues,
+      hostSubnets,
+      t,
+      cluster.openshiftVersion,
+    );
+  }, [clusterDeployment, agentClusterInstall, agents, t, initialValues]);
 
   return {
     initialValues,

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -174,7 +174,7 @@ const NodePoolsTable = ({
                             onClick: () => setManageHostsOpen(np.metadata?.uid),
                           },
                           {
-                            title: t('ai:Remove Nodepool'),
+                            title: t('ai:Remove nodepool'),
                             onClick: () => setRemoveNodePoolOpen(np.metadata?.uid),
                           },
                         ],
@@ -228,7 +228,7 @@ const NodePoolsTable = ({
             iconPosition="right"
             onClick={() => setAddNodePool(true)}
           >
-            {t('ai:Add Nodepool')}
+            {t('ai:Add nodepool')}
           </Button>
         </StackItem>
       </Stack>

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsForm.tsx

@@ -28,24 +28,15 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
     nameInputRef.current?.focus();
   }, []);
 
-  const selectOptions = React.useMemo(
-    () =>
-      ocpVersions.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [ocpVersions],
-  );
-
   const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
-      !selectOptions.some((option) => option.value === values.customOpenshiftSelect)
+      !ocpVersions.some((option) => option.value === values.customOpenshiftSelect)
     ) {
       return allVersions.find((version) => version.value === values.customOpenshiftSelect);
     }
     return undefined;
-  }, [allVersions, selectOptions, values.customOpenshiftSelect]);
+  }, [allVersions, ocpVersions, values.customOpenshiftSelect]);
 
   return (
     <Form>
@@ -66,16 +57,15 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
       />
       <OpenShiftVersionDropdown
         name="openshiftVersion"
-        items={selectOptions}
         versions={ocpVersions}
         showReleasesLink={false}
         showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-        customItem={additionalSelectOption}
+        customVersion={additionalSelectOption}
       />
       {openshiftVersionModalOpen && (
         <OpenShiftVersionModal
           allVersions={allVersions}
-          setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+          onClose={() => setOpenshiftVersionModalOpen(false)}
         />
       )}
 

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsStep.tsx

@@ -34,8 +34,8 @@ const useDetailsFormik: UseDetailsFormik = ({
     () =>
       Yup.object({
         name: nameValidationSchema(t, usedClusterNames),
-        baseDnsDomain: dnsNameValidationSchema.required('Required'),
-        pullSecret: pullSecretValidationSchema.required('Required.'),
+        baseDnsDomain: dnsNameValidationSchema(t).required(t('ai:Required field')),
+        pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
       }),
     [usedClusterNames, t],
   );

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
 import { FieldArray, useFormikContext } from 'formik';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
-import { Alert, Button, Form, FormGroup, Grid, GridItem } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Form,
+  FormGroup,
+  Grid,
+  GridItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { PopoverIcon, RadioField, SelectField } from '../../../../../common';
+import { PopoverIcon, RadioField } from '../../../../../common';
 import { getRandomString } from '../../../../../common/utils';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 
@@ -18,21 +30,15 @@ const HostsForm: React.FC<HostsFormProps> = ({
   clusterName,
   initReleaseImage,
 }) => {
-  const { values } = useFormikContext<HostsFormValues>();
+  const { t } = useTranslation();
+  const { values, setFieldValue } = useFormikContext<HostsFormValues>();
+  const [namespaceDropdownOpen, setNamespaceDropdownOpen] = React.useState(false);
   useTemptiflySync({ values, onValuesChanged });
 
-  const { t } = useTranslation();
-  const infraEnvOptions = infraEnvs.length
-    ? infraEnvs.map((ie) => ({
-        label: ie.metadata?.namespace || '',
-        value: ie.metadata?.namespace || '',
-      }))
-    : [
-        {
-          label: t('ai:No namespace with hosts is available'),
-          value: 'NOT_AVAILABLE',
-        },
-      ];
+  const infraEnvOptions = infraEnvs.map((ie) => ({
+    label: ie.metadata?.namespace || '',
+    value: ie.metadata?.namespace || '',
+  }));
 
   const totalHosts = values.nodePools.reduce((acc, nodePool) => {
     acc += nodePool.useAutoscaling ? nodePool.autoscaling.maxReplicas : nodePool.count;
@@ -142,13 +148,9 @@ const HostsForm: React.FC<HostsFormProps> = ({
         </GridItem>
 
         <GridItem>
-          <SelectField
+          <FormGroup
             label={t('ai:Namespace')}
-            name="agentNamespace"
-            options={infraEnvOptions}
-            isRequired
-            isDisabled={!infraEnvs.length}
-            labelIcon={
+            labelHelp={
               <PopoverIcon
                 position="right"
                 bodyContent={t(
@@ -156,7 +158,39 @@ const HostsForm: React.FC<HostsFormProps> = ({
                 )}
               />
             }
-          />
+            isRequired
+            isInline
+          >
+            <Dropdown
+              isOpen={namespaceDropdownOpen}
+              onSelect={(_, value) => {
+                setFieldValue('agentNamespace', value);
+                setNamespaceDropdownOpen(false);
+              }}
+              onOpenChange={(isOpen: boolean) => setNamespaceDropdownOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={() => setNamespaceDropdownOpen(!namespaceDropdownOpen)}
+                  isExpanded={namespaceDropdownOpen}
+                  isFullWidth
+                  isDisabled={!infraEnvs.length}
+                  aria-disabled={!infraEnvs.length}
+                >
+                  {values.agentNamespace || t('ai:No namespace with hosts is available')}
+                </MenuToggle>
+              )}
+              shouldFocusToggleOnSelect
+            >
+              <DropdownList>
+                {infraEnvOptions.map((option, i) => (
+                  <DropdownItem key={`infra-env-option-${i}`} value={option.value}>
+                    {option.label}
+                  </DropdownItem>
+                ))}
+              </DropdownList>
+            </Dropdown>
+          </FormGroup>
         </GridItem>
         {totalHosts === 0 && (
           <GridItem>
@@ -201,7 +235,7 @@ const HostsForm: React.FC<HostsFormProps> = ({
                     } as NodePoolFormValue);
                   }}
                 >
-                  {t('ai:Add Nodepool')}
+                  {t('ai:Add nodepool')}
                 </Button>
               </GridItem>
             </>