@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostSelectionStep.tsx → hostSelection/ClusterDeploymentHostSelectionStep.tsx}

@@ -10,28 +10,28 @@ import {
   useWizardFooter,
   WizardFooter,
 } from '@patternfly/react-core';
-import { Alerts, ClusterWizardStepHeader, useAlerts } from '../../../common';
+import { Alerts, ClusterWizardStepHeader, useAlerts } from '../../../../common';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
-} from '../../types';
+} from '../../../types';
 import ClusterDeploymentHostsSelection from './ClusterDeploymentHostsSelection';
 import {
   ClusterDeploymentHostSelectionStepProps,
   ClusterDeploymentHostsSelectionValues,
-} from './types';
-import { hostCountValidationSchema } from './validationSchemas';
+} from '../types';
+import { hostCountValidationSchema } from '../validationSchemas';
 import {
   getAgentSelectorFieldsFromAnnotations,
   getIsSNOCluster,
   getWizardStepAgentStatus,
-} from '../helpers';
-import { canNextFromHostSelectionStep } from './wizardTransition';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+} from '../../helpers';
+import { canNextFromHostSelectionStep } from '../wizardTransition';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { ValidationSection } from './components/ValidationSection';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 
 const getInitialValues = ({
   agents,
@@ -45,9 +45,12 @@ const getInitialValues = ({
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
   const cdName = clusterDeployment?.metadata?.name;
   const cdNamespace = clusterDeployment?.metadata?.namespace;
+
   let hostCount =
     (agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents || 0) +
+    (agentClusterInstall?.spec?.provisionRequirements?.arbiterAgents || 0) +
     (agentClusterInstall?.spec?.provisionRequirements?.workerAgents || 0);
+
   if (isSNOCluster) {
     hostCount = 1;
   } else if (hostCount === 2 || hostCount === 0) {
@@ -93,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.')),
     });
   });
@@ -168,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(
@@ -186,7 +187,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   const onAutoSelectChange = React.useCallback(() => {
     setNextRequested(false);
     setShowClusterErrors(false);
-    setShowFormErrors(false);
+    setHasAttemptedSubmit(false);
   }, []);
 
   const onHostSelect = React.useCallback(() => {
@@ -195,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) => {
@@ -210,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) {
@@ -255,42 +256,41 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   const errorsSection = (
     <ValidationSection currentStepId={'cluster-details'} hosts={[]}>
       {syncError && (
-        <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+        <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
           {syncError}
         </Alert>
       )}
     </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);
 
@@ -310,16 +310,17 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
           onAutoSelectChange={onAutoSelectChange}
           onHostSelect={onHostSelect}
           isNutanix={isNutanix}
+          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}
@@ -334,10 +335,9 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   );
 };
 
-const ClusterDeploymentHostSelectionStep: React.FC<ClusterDeploymentHostSelectionStepProps> = ({
-  onSaveHostsSelection,
-  ...rest
-}) => {
+export const ClusterDeploymentHostSelectionStep: React.FC<
+  ClusterDeploymentHostSelectionStepProps
+> = ({ onSaveHostsSelection, ...rest }) => {
   const { t } = useTranslation();
 
   const { addAlert } = useAlerts();
@@ -377,5 +377,3 @@ const ClusterDeploymentHostSelectionStep: React.FC<ClusterDeploymentHostSelectio
     </Formik>
   );
 };
-
-export default ClusterDeploymentHostSelectionStep;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelection.tsx → hostSelection/ClusterDeploymentHostsSelection.tsx}

@@ -1,21 +1,36 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { Grid, GridItem, Content, Form } from '@patternfly/react-core';
-import { SwitchField } from '../../../common';
+import { SwitchField } from '../../../../common';
 import {
   ClusterDeploymentHostsSelectionProps,
   ClusterDeploymentHostsSelectionValues,
-} from './types';
+} from '../types';
 import ClusterDeploymentHostsSelectionBasic from './ClusterDeploymentHostsSelectionBasic';
-import ClusterDeploymentHostsSelectionAdvanced from './ClusterDeploymentHostsSelectionAdvanced';
+import { ClusterDeploymentHostsSelectionAdvanced } from './ClusterDeploymentHostsSelectionAdvanced';
 import {
   getAgentsForSelection,
   getClusterDeploymentCpuArchitecture,
   getIsSNOCluster,
-} from '../helpers';
-import MinimalHWRequirements from '../Agent/MinimalHWRequirements';
-import NoAgentsAlert from '../Agent/NoAgentsAlert';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+  getIsTNACluster,
+} from '../../helpers';
+import MinimalHWRequirements from '../../Agent/MinimalHWRequirements';
+import NoAgentsAlert from '../../Agent/NoAgentsAlert';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { TFunction } from 'i18next';
+
+const getHostRequirementText = (isSNO: boolean, isTNA: boolean, t: TFunction) => {
+  if (isSNO) {
+    return t(
+      'ai:Exactly 1 host is required, capable of functioning both as control plane and worker node.',
+    );
+  } else if (isTNA) {
+    return t(
+      'ai:Exactly 2 hosts capable of functioning as control plane nodes, and one arbiter, are required.',
+    );
+  }
+  return t('ai:At least 3 hosts are required, capable of functioning as control plane nodes.');
+};
 
 const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionProps> = ({
   agentClusterInstall,
@@ -27,17 +42,20 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
   onHostSelect,
   onSetInstallationDiskId,
   isNutanix,
+  hostsBinding,
 }) => {
+  const { t } = useTranslation();
   const { values } = useFormikContext<ClusterDeploymentHostsSelectionValues>();
   const { autoSelectHosts } = values;
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
+  const isTNA = getIsTNACluster(agentClusterInstall);
 
   const cdName = clusterDeployment?.metadata?.name;
   const cdNamespace = clusterDeployment?.metadata?.namespace;
   const cpuArchitecture = getClusterDeploymentCpuArchitecture(clusterDeployment);
 
   const availableAgents = React.useMemo(() => {
-    const filtered = getAgentsForSelection(agents).filter(
+    const filtered = getAgentsForSelection(agents, hostsBinding).filter(
       (agent) =>
         (agent.spec.clusterDeploymentName?.name === cdName &&
           agent.spec.clusterDeploymentName?.namespace === cdNamespace) ||
@@ -45,22 +63,20 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
           !agent.spec.clusterDeploymentName?.namespace &&
           agent.status?.inventory.cpu?.architecture === cpuArchitecture),
     );
+
     return isNutanix
       ? filtered.filter((a) => a.status?.inventory?.systemVendor?.manufacturer === 'Nutanix')
       : filtered;
-  }, [agents, cdNamespace, cdName, cpuArchitecture, isNutanix]);
-  const { t } = useTranslation();
+  }, [agents, hostsBinding, isNutanix, cdName, cdNamespace, cpuArchitecture]);
+
+  const hostRequirementText = getHostRequirementText(isSNOCluster, isTNA, t);
+
   return (
     <Grid hasGutter>
       <GridItem>
-        <Content>
-          {isSNOCluster
-            ? t(
-                'ai:Exactly 1 host is required, capable of functioning both as control plane and worker node.',
-              )
-            : t('ai:At least 3 hosts are required, capable of functioning as control plane nodes.')}
-        </Content>
+        <Content>{hostRequirementText}</Content>
       </GridItem>
+
       {aiConfigMap && (
         <GridItem>
           <MinimalHWRequirements aiConfigMap={aiConfigMap} isSNOCluster={isSNOCluster} />

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelectionAdvanced.tsx → hostSelection/ClusterDeploymentHostsSelectionAdvanced.tsx}

@@ -1,18 +1,18 @@
 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';
-import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../common';
-import LocationsSelector from './LocationsSelector';
-import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from './types';
-import LabelsSelector, { infraEnvLabelKeys } from './LabelsSelector';
-import AgentsSelectionTable from '../Agent/AgentsSelectionTable';
-import { AgentTableActions } from './types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { CpuArchitecture } from '../../../common';
+import { AgentK8sResource } from '../../../types';
+import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
+import LocationsSelector from '../LocationsSelector';
+import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from '../types';
+import LabelsSelector, { infraEnvLabelKeys } from '../LabelsSelector';
+import AgentsSelectionTable from '../../Agent/AgentsSelectionTable';
+import { AgentTableActions } from '../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { CpuArchitecture } from '../../../../common';
 
 type ClusterDeploymentHostsSelectionAdvancedProps = {
   availableAgents: AgentK8sResource[];
@@ -25,7 +25,7 @@ type ClusterDeploymentHostsSelectionAdvancedProps = {
 
 type FormValues = ClusterDeploymentHostsSelectionValues | ScaleUpFormValues;
 
-const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
+export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
   availableAgents,
   onEditRole,
   onSetInstallationDiskId,
@@ -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,24 +90,18 @@ 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>
     </>
   );
 };
-
-export default ClusterDeploymentHostsSelectionAdvanced;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelectionBasic.tsx → hostSelection/ClusterDeploymentHostsSelectionBasic.tsx}

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import { CheckboxField, NumberInputField } from '../../../common';
-import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from './constants';
+import { CheckboxField, NumberInputField } from '../../../../common';
+import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from '../constants';
 import { useFormikContext } from 'formik';
-import { ClusterDeploymentHostsSelectionValues } from './types';
-import LocationsSelector from './LocationsSelector';
-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 { ClusterDeploymentHostsSelectionValues } from '../types';
+import LocationsSelector from '../LocationsSelector';
+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';
 
 type ClusterDeploymentHostsSelectionBasicProps = {
   availableAgents: AgentK8sResource[];

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

@@ -0,0 +1,2 @@
+export * from './ClusterDeploymentHostSelectionStep';
+export * from './ClusterDeploymentHostsSelectionAdvanced';

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

@@ -1,6 +1,6 @@
 export * from './types';
 export * from './helpers';
-export * from './AdditionalNTPSourcesDialogToggle';
+export * from './components';
 export * from './LogsDownloadButton';
 export * from './wizardTransition';
 export * from './networkConfigurationValidation';
@@ -13,6 +13,6 @@ export { default as ClusterDeploymentCredentials } from './ClusterDeploymentCred
 export { default as ClusterDeploymentKubeconfigDownload } from './ClusterDeploymentKubeconfigDownload';
 export { default as ClusterInstallationError } from './ClusterInstallationError';
 export { default as NetworkConfiguration } from './NetworkConfiguration';
-export { default as ACMClusterDeploymentDetailsStep } from './ACMClusterDeploymentDetailsStep';
 
 export { getTotalCompute } from './ShortCapacitySummary';
+export { ACMClusterDeploymentDetailsStep } from './clusterDetails';

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/{ClusterDeploymentHostsNetworkTable.tsx → networking/ClusterDeploymentHostsNetworkTable.tsx}

@@ -1,26 +1,21 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { EmptyState } from '../../../common';
-import { AgentTableActions } from './types';
+import { EmptyState, activeNICColumn, hostnameColumn, roleColumn } from '../../../../common';
+import { AgentTableActions } from '../types';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
-} from '../../types';
-import { getAICluster, getIsSNOCluster } from '../helpers';
-import { AdditionalNTPSourcesDialogToggle } from './AdditionalNTPSourcesDialogToggle';
-import { agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
-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';
+} from '../../../types';
+import { getAICluster, getIsSNOCluster } from '../../helpers';
+import { AdditionalNTPSourcesDialogToggle } from '../components/AdditionalNTPSourcesDialogToggle';
+import { agentStatusColumn, useAgentsTable } from '../../Agent';
+import HostsTable from '../../../../common/components/hosts/HostsTable';
+import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';
+import { usePagination } from '../../../../common/components/hosts/usePagination';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import { agentStatus } from '../helpers/agentStatus';
+import { agentStatus } from '../../helpers/agentStatus';
 
 type ExpandComponentContextType = {
   onSetInstallationDiskId?: ClusterDeploymentHostsNetworkTableProps['onSetInstallationDiskId'];

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentNetworkingForm.tsx → networking/ClusterDeploymentNetworkingForm.tsx}

@@ -14,30 +14,26 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import {
-  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS,
   getHostSubnets,
   SecurityFields,
   ProxyFields,
   ProxyInputFields,
-} from '../../../common';
-import NetworkConfiguration from './NetworkConfiguration';
+} from '../../../../common';
+import NetworkConfiguration from '../NetworkConfiguration';
 import ClusterDeploymentHostsNetworkTable from './ClusterDeploymentHostsNetworkTable';
-import { getAICluster, getIsSNOCluster } from '../helpers';
+import { getAICluster, getIsSNOCluster } from '../../helpers';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
   InfraEnvK8sResource,
-} from '../../types';
-import { AgentTableActions, ClusterDeploymentNetworkingValues } from './types';
+} from '../../../types';
+import { AgentTableActions, ClusterDeploymentNetworkingValues } from '../types';
 import { useFormikContext } from 'formik';
-import { getGridSpans } from './helpers';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { getGridSpans } from '../helpers';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
-import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
-
-// TODO(mlibra): So far a constant. Should be queried from somewhere.
-export const defaultNetworkSettings: ClusterDefaultConfig = CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4;
 
 type ClusterDeploymentNetworkingFormProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -103,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>
@@ -137,7 +133,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
                 cluster={cluster}
                 hostSubnets={hostSubnets}
                 isVipDhcpAllocationDisabled
-                defaultNetworkSettings={defaultNetworkSettings}
+                defaultNetworkSettings={CLUSTER_DEFAULT_NETWORK_SETTINGS}
                 hideManagedNetworking={getIsSNOCluster(agentClusterInstall) || isNutanix}
               />
             </GridItem>
@@ -158,7 +154,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           )}
         </StackItem>
         <StackItem>
-          <SecurityFields clusterSshKey={cluster.sshPublicKey} />
+          <SecurityFields clusterSshKey={cluster.sshPublicKey} allowMultipleKeys={true} />
         </StackItem>
         <StackItem>
           <Content component="h2">{t('ai:Host inventory')}</Content>