@openshift-assisted/ui-lib 5.0.0-cim → 5.0.2-cim

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Alert,
   AlertVariant,
@@ -7,7 +8,7 @@ import {
   useWizardFooter,
   WizardFooter,
 } from '@patternfly/react-core';
-import * as React from 'react';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { canNextFromReviewStep } from '../wizardTransition';
 import {
   AgentClusterInstallK8sResource,
@@ -33,16 +34,12 @@ import {
 } from '../../helpers';
 import { isAgentOfCluster } from '../helpers';
 import { wizardStepNames } from '../constants';
-import {
-  wizardStepsValidationsMap,
-  ClusterWizardStepsType,
-  allClusterWizardSoftValidationIds,
-} from '../wizardTransition';
+import { wizardStepsValidationsMap, allClusterWizardSoftValidationIds } from '../wizardTransition';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 import { ReviewConfigMapsTable } from './ReviewConfigMapsTable';
 import { ValidationSection } from '../components/ValidationSection';
-import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import { ClusterDeploymentWizardStepsType } from '../types';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -63,7 +60,7 @@ export const ClusterDeploymentReviewStep = ({
   infraEnv,
 }: ClusterDeploymentReviewStepProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const { activeStep, goToPrevStep, goToStepByName, close } = useWizardContext();
+  const { activeStep, goToPrevStep, goToStepById, close } = useWizardContext();
   const { syncError } = React.useContext(ClusterDeploymentWizardContext);
   const [isSubmitting, setSubmitting] = React.useState(false);
   const cdName = clusterDeployment.metadata?.name;
@@ -77,7 +74,8 @@ export const ClusterDeploymentReviewStep = ({
 
   const canContinue = canNextFromReviewStep(agentClusterInstall, clusterAgents);
   const { t } = useTranslation();
-  const onNext = async () => {
+
+  const onNext = React.useCallback(async () => {
     clearAlerts();
     setSubmitting(true);
     try {
@@ -88,22 +86,25 @@ export const ClusterDeploymentReviewStep = ({
     } finally {
       setSubmitting(false);
     }
-  };
+  }, [addAlert, clearAlerts, onFinish, t]);
 
-  const footer = (
-    <WizardFooter
-      activeStep={activeStep}
-      onNext={onNext}
-      isNextDisabled={isSubmitting || !canContinue || !!syncError}
-      nextButtonText={t('ai:Install cluster')}
-      nextButtonProps={{ isLoading: isSubmitting }}
-      onBack={goToPrevStep}
-      onClose={close}
-    />
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        isNextDisabled={isSubmitting || !canContinue || !!syncError}
+        nextButtonText={t('ai:Install cluster')}
+        nextButtonProps={{ isLoading: isSubmitting }}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [activeStep, canContinue, close, goToPrevStep, isSubmitting, onNext, syncError, t],
   );
   useWizardFooter(footer);
 
-  const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall);
+  const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall, t);
   const platform =
     getPlatforms(t)[
       (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType
@@ -183,9 +184,9 @@ export const ClusterDeploymentReviewStep = ({
           <DetailItem
             title={t('ai:Cluster validations')}
             value={
-              <ClusterValidations<ClusterWizardStepsType>
+              <ClusterValidations<ClusterDeploymentWizardStepsType>
                 validationsInfo={cluster.validationsInfo}
-                setCurrentStepId={goToStepByName}
+                setCurrentStepId={goToStepById}
                 wizardStepNames={wizardStepNames(t)}
                 wizardStepsValidationsMap={wizardStepsValidationsMap}
               />
@@ -195,9 +196,12 @@ export const ClusterDeploymentReviewStep = ({
           <DetailItem
             title={t('ai:Host validations')}
             value={
-              <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
+              <HostsValidations<
+                ClusterDeploymentWizardStepsType,
+                typeof allClusterWizardSoftValidationIds
+              >
                 hosts={cluster.hosts}
-                setCurrentStepId={goToStepByName}
+                setCurrentStepId={goToStepById}
                 wizardStepNames={wizardStepNames(t)}
                 allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
                 wizardStepsValidationsMap={wizardStepsValidationsMap}

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

@@ -41,8 +41,8 @@ export type AgentTableActions = {
 
 export type ClusterDeploymentWizardStepsType =
   | 'cluster-details'
-  | 'hosts-selection'
-  | 'hosts-discovery'
+  | 'host-selection'
+  | 'host-discovery'
   | 'networking'
   | 'custom-manifests'
   | 'review';
@@ -141,7 +141,6 @@ export type ClusterDeploymentWizardProps = {
 
   clusterDeployment: ClusterDeploymentK8sResource;
   agentClusterInstall: AgentClusterInstallK8sResource;
-  agents: AgentK8sResource[];
   bareMetalHosts: BareMetalHostK8sResource[];
   aiConfigMap?: ConfigMapK8sResource;
   infraEnv?: InfraEnvK8sResource;
@@ -189,7 +188,6 @@ export type InfraEnvAgentTableProps = Pick<
   agentMachines: AgentMachineK8sResource[];
   bareMetalHosts: BareMetalHostK8sResource[];
   infraEnv: InfraEnvK8sResource;
-  nmStates: NMStateK8sResource[];
   getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string;
   onChangeHostname: (agent: AgentK8sResource, hostname: string) => Promise<AgentK8sResource>;
   onChangeBMHHostname: (

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

@@ -10,14 +10,6 @@ import { AgentK8sResource } from '../../types/k8s/agent';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
 import { ClusterDeploymentWizardStepsType } from './types';
 
-export type ClusterWizardStepsType =
-  | 'cluster-details'
-  | 'hosts-selection'
-  | 'hosts-discovery'
-  | 'networking'
-  | 'custom-manifests'
-  | 'review';
-
 const clusterDetailsStepValidationsMap: WizardStepValidationMap = {
   cluster: {
     groups: [],
@@ -69,7 +61,11 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   // Alternatively we would have to whitelist network validations instead of using group
   // TODO(mlibra): remove that container-images-available from soft validations and let backend drive it via disabling it.
   //   Depends on: https://issues.redhat.com/browse/MGMT-5265
-  softValidationIds: ['ntp-synced', 'container-images-available'],
+  softValidationIds: [
+    'ntp-synced',
+    'container-images-available',
+    'custom-manifests-requirements-satisfied',
+  ],
   getPageURL: (host: Host, validationID: string) => {
     if (validationID === 'ntp-synced') {
       return {
@@ -81,10 +77,23 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   },
 };
 
+const customManifestsValidationsMap: WizardStepValidationMap = {
+  cluster: {
+    groups: ['network'],
+    validationIds: ['platform-requirements-satisfied', 'custom-manifests-requirements-satisfied'],
+  },
+  host: {
+    allowedStatuses: ['known', 'disabled'],
+    groups: ['network'],
+    validationIds: [],
+  },
+  softValidationIds: ['ntp-synced', 'container-images-available', 'mtu-valid'],
+};
+
 const reviewStepValidationsMap: WizardStepValidationMap = {
   cluster: {
     groups: [],
-    validationIds: ['all-hosts-are-ready-to-install'],
+    validationIds: ['all-hosts-are-ready-to-install', 'custom-manifests-requirements-satisfied'],
   },
   host: {
     allowedStatuses: ['known', 'disabled'],
@@ -94,14 +103,15 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
   softValidationIds: [],
 };
 
-export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
-  'cluster-details': clusterDetailsStepValidationsMap,
-  'hosts-discovery': hostDiscoveryStepValidationsMap,
-  'hosts-selection': hostDiscoveryStepValidationsMap,
-  networking: networkingStepValidationsMap,
-  'custom-manifests': networkingStepValidationsMap,
-  review: reviewStepValidationsMap,
-};
+export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterDeploymentWizardStepsType> =
+  {
+    'cluster-details': clusterDetailsStepValidationsMap,
+    'host-discovery': hostDiscoveryStepValidationsMap,
+    'host-selection': hostDiscoveryStepValidationsMap,
+    networking: networkingStepValidationsMap,
+    'custom-manifests': customManifestsValidationsMap,
+    review: reviewStepValidationsMap,
+  };
 
 export const allClusterWizardSoftValidationIds =
   getAllClusterWizardSoftValidationIds(wizardStepsValidationsMap);
@@ -136,18 +146,23 @@ const canNextFromClusterDeploymentWizardStep = (
 export const canNextFromHostSelectionStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],
-) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'hosts-selection');
+) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'host-selection');
 
 export const canNextFromHostDiscoveryStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],
-) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'hosts-discovery');
+) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'host-discovery');
 
 export const canNextFromNetworkingStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],
 ) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'networking');
 
+export const canNextFromCustomManifestsStep = (
+  agentClusterInstall: AgentClusterInstallK8sResource,
+  agents: AgentK8sResource[],
+) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'custom-manifests');
+
 export const canNextFromReviewStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';

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

@@ -11,12 +11,14 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 import { BaseDnsHelperText } from '../../../ClusterDeployment/clusterDetails/ClusterDetailsFormFields';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { DetailsFormProps, DetailsFormValues } from './types';
+import { StorageClassDropdown } from './StorageClassDropdown';
 
 const DetailsForm: React.FC<DetailsFormProps> = ({
   onValuesChanged,
   extensionAfter,
   ocpVersions,
   allVersions,
+  storageClasses,
 }) => {
   const { t } = useTranslation();
   const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
@@ -69,6 +71,8 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
         />
       )}
 
+      <StorageClassDropdown storageClasses={storageClasses} />
+
       <PullSecret />
     </Form>
   );

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

@@ -4,7 +4,9 @@ import * as React from 'react';
 import * as Yup from 'yup';
 import {
   dnsNameValidationSchema,
+  ErrorState,
   getDefaultOpenShiftVersion,
+  LoadingState,
   nameValidationSchema,
   pullSecretValidationSchema,
 } from '../../../../../common';
@@ -12,6 +14,7 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 import { useSupportedOCPVersions } from '../../hooks/useSupportedOCPVersions';
 import DetailsForm from './DetailsForm';
 import { DetailsStepProps, UseDetailsFormik } from './types';
+import { useStorageClasses } from '../../../../hooks';
 
 const useDetailsFormik: UseDetailsFormik = ({
   ocpVersions,
@@ -27,6 +30,7 @@ const useDetailsFormik: UseDetailsFormik = ({
       pullSecret: initPullSecret,
       baseDnsDomain: initBaseDomain,
       customOpenshiftSelect: null,
+      storageClass: '',
     }),
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
@@ -53,8 +57,10 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
   initPullSecret,
   supportedVersionsCM,
 }) => {
-  const ocpVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM);
-  const allVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM, true);
+  const { t } = useTranslation();
+  const ocpVersions = useSupportedOCPVersions(clusterImages, t, supportedVersionsCM);
+  const allVersions = useSupportedOCPVersions(clusterImages, t, supportedVersionsCM, true);
+  const [storageClasses, isLoaded, error] = useStorageClasses({ isList: true });
 
   const [initialValues, validationSchema] = useDetailsFormik({
     ocpVersions,
@@ -63,6 +69,12 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
     initBaseDomain,
   });
 
+  if (!isLoaded) {
+    return <LoadingState />;
+  } else if (error) {
+    return <ErrorState />;
+  }
+
   return (
     <Formik
       initialValues={initialValues}
@@ -75,6 +87,7 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
         ocpVersions={ocpVersions}
         allVersions={allVersions}
         extensionAfter={extensionAfter}
+        storageClasses={storageClasses}
       />
     </Formik>
   );

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import Fuse from 'fuse.js';
+import { StorageClassK8sResource } from '../../../../types';
+import { SelectFieldWithSearch, useTranslation } from '../../../../../common';
+import { useField } from 'formik';
+
+const NO_RESULTS = 'no_results';
+
+export const StorageClassDropdown = ({
+  storageClasses,
+}: {
+  storageClasses: StorageClassK8sResource[];
+}) => {
+  const { t } = useTranslation();
+  const [filter, setFilter] = React.useState('');
+  const [, , { setValue }] = useField('storageClass');
+
+  const storageClassItems = React.useMemo(
+    () =>
+      storageClasses.map((storageClass) => ({
+        value: storageClass.metadata?.name as string,
+        children: storageClass.metadata?.name as string,
+      })),
+    [storageClasses],
+  );
+
+  const fuse = React.useMemo(() => {
+    return new Fuse(storageClassItems, {
+      includeScore: true,
+      ignoreLocation: true,
+      threshold: 0.3,
+      keys: ['value'],
+    });
+  }, [storageClassItems]);
+
+  const selectOptions = React.useMemo(() => {
+    if (filter) {
+      const newSelectOptions = fuse
+        .search(filter)
+        .sort((a, b) => (a.score || 0) - (b.score || 0))
+        .map(({ item }) => item);
+
+      if (!newSelectOptions.length) {
+        return [
+          {
+            isAriaDisabled: true,
+            children: t('ai:No results found for {{filter}}', { filter }),
+            value: NO_RESULTS,
+            hasCheckbox: false,
+          },
+        ];
+      }
+      return newSelectOptions;
+    }
+    return storageClassItems;
+  }, [filter, fuse, storageClassItems, t]);
+
+  return (
+    <SelectFieldWithSearch
+      selectOptions={selectOptions}
+      filterValue={filter}
+      setFilterValue={setFilter}
+      name={'storageClass'}
+      label={t('ai:Storage class')}
+      placeholder={t('ai:No storage class selected')}
+      helperText={t('ai:Persistent volume storage class for etcd data volumes')}
+      onClear={() => setValue('')}
+    />
+  );
+};

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/types.ts

@@ -1,7 +1,11 @@
 import { FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
 import { OpenshiftVersionOptionType } from '../../../../../common';
-import { ClusterImageSetK8sResource, ConfigMapK8sResource } from '../../../../types';
+import {
+  ClusterImageSetK8sResource,
+  ConfigMapK8sResource,
+  StorageClassK8sResource,
+} from '../../../../types';
 
 export type DetailsFormValues = {
   name: string;
@@ -9,6 +13,7 @@ export type DetailsFormValues = {
   pullSecret: string;
   baseDnsDomain: string;
   customOpenshiftSelect: string | null;
+  storageClass: string;
 };
 
 type UseDetailsFormikArgs = {
@@ -22,7 +27,9 @@ export type UseDetailsFormik = (
   args: UseDetailsFormikArgs,
 ) => [
   DetailsFormValues,
-  ObjectSchema<Omit<DetailsFormValues, 'openshiftVersion' | 'customOpenshiftSelect'>>,
+  ObjectSchema<
+    Omit<DetailsFormValues, 'openshiftVersion' | 'customOpenshiftSelect' | 'storageClass'>
+  >,
 ];
 
 export type DetailsStepProps = {
@@ -40,4 +47,5 @@ export type DetailsStepProps = {
 export type DetailsFormProps = Pick<DetailsStepProps, 'onValuesChanged' | 'extensionAfter'> & {
   ocpVersions: OpenshiftVersionOptionType[];
   allVersions: OpenshiftVersionOptionType[];
+  storageClasses: StorageClassK8sResource[];
 };

package/lib/cim/components/Hypershift/hooks/useSupportedOCPVersions.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 // import { getErrorMessage } from '../../../../common/utils';
 import { ClusterImageSetK8sResource, ConfigMapK8sResource } from '../../../types';
 import { getOCPVersions } from '../../helpers';
+import { TFunction } from 'i18next';
 
 export const getSupportedCM = (configMaps: ConfigMapK8sResource[]) =>
   configMaps.find(
@@ -10,11 +11,12 @@ export const getSupportedCM = (configMaps: ConfigMapK8sResource[]) =>
 
 export const useSupportedOCPVersions = (
   clusterImages: ClusterImageSetK8sResource[],
+  t: TFunction,
   supportedVersionsCM?: ConfigMapK8sResource,
   extended?: boolean,
 ) => {
   return React.useMemo(() => {
-    const ocpVersions = getOCPVersions(clusterImages, false, undefined, extended);
+    const ocpVersions = getOCPVersions(clusterImages, t, false, undefined, extended);
     const supportedVersionsString = supportedVersionsCM?.data?.['supported-versions'];
     if (supportedVersionsString) {
       try {
@@ -26,5 +28,5 @@ export const useSupportedOCPVersions = (
       }
     }
     return ocpVersions;
-  }, [clusterImages, extended, supportedVersionsCM?.data]);
+  }, [clusterImages, extended, supportedVersionsCM?.data, t]);
 };

package/lib/cim/components/InfraEnv/AddHostDropdown.tsx

@@ -18,7 +18,7 @@ import { AddBmcHostModal, AddBmcHostYamlModal, AddHostModal } from '../modals';
 import { AddHostDropdownProps } from './types';
 import './AddHostDropdown.css';
 import { Trans } from 'react-i18next';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
 type ModalType = 'iso' | 'bmc' | 'yaml' | 'ipxe' | undefined;

package/lib/cim/components/InfraEnv/EnvironmentErrors.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { Alert, AlertVariant, ModalBody } from '@patternfly/react-core';
 import { getFailingResourceConditions } from '../helpers';
 import { InfraEnvK8sResource } from '../../types';
 import { SingleResourceAlerts } from '../common/ResourceAlerts';
-import { Alert, AlertVariant } from '@patternfly/react-core';
 import { getInfraEnvDocs } from '../common/constants';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
@@ -25,8 +25,8 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
   }
 
   return (
-    <>
-      {!infraEnv.status && (
+    <ModalBody>
+      {!infraEnv.status ? (
         <Alert
           title={t('ai:Central infrastructure management is not running')}
           variant={AlertVariant.warning}
@@ -42,11 +42,12 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
             'ai:It seems the Central infrastructure management is not configured which will prevent its features to be used. Please refer to the documentation for the first time setup steps.',
           )}
         </Alert>
+      ) : (
+        <SingleResourceAlerts
+          title={t('ai:Failing infrastructure environment')}
+          conditions={infraEnvAlerts}
+        />
       )}
-      <SingleResourceAlerts
-        title={t('ai:Failing infrastructure environment')}
-        conditions={infraEnvAlerts}
-      />
-    </>
+    </ModalBody>
   );
 };

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -66,7 +66,6 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
   getClusterDeploymentLink,
   bareMetalHosts,
   infraEnv,
-  nmStates,
   onChangeHostname,
   onChangeBMHHostname,
   onMassDeleteHost,
@@ -287,7 +286,6 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
           agents={selectedAgents}
           bmhs={selectedBMHs}
           infraEnv={infraEnv}
-          nmStates={nmStates}
           onDelete={onMassDeleteHost}
           onClose={() => setMassDeleteOpen(false)}
         />

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -213,7 +213,7 @@ const InfraEnvForm: React.FC<React.PropsWithChildren<InfraEnvFormProps>> = ({
                                   window.open(
                                     getOCPStaticIPDocLink(docVersion),
                                     '_blank',
-                                    'noopener',
+                                    'noopener,noreferrer',
                                   )
                                 }
                               >

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -86,7 +86,7 @@ const CpuArchitectureDropdown = ({
             id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-v6-u-w-100"
+            isFullWidth
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>
@@ -94,6 +94,7 @@ const CpuArchitectureDropdown = ({
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
         onOpenChange={() => setCpuArchOpen(!cpuArchOpen)}
+        shouldFocusToggleOnSelect
       >
         {dropdownItems}
       </Dropdown>

package/lib/cim/components/helpers/clusterDeployment.ts

@@ -172,6 +172,11 @@ export const getClusterProperties = (
   const serviceNetworks = agentClusterInstall.spec?.networking?.serviceNetwork;
   const clusterNetworks = agentClusterInstall.spec?.networking?.clusterNetwork;
 
+  const apiIPs = agentClusterInstall.spec?.apiVIPs || [agentClusterInstall.spec?.apiVIP];
+  const ingressIPs = agentClusterInstall.spec?.ingressVIPs || [
+    agentClusterInstall.spec?.ingressVIP,
+  ];
+
   return {
     // TODO: we should translate following keys since they are used "as it is" in AcmDescriptionList.tsx / List component of the stolostron project
     name: {
@@ -191,12 +196,12 @@ export const getClusterProperties = (
       value: clusterDeployment.spec?.baseDomain,
     },
     apiVip: {
-      key: 'API IP',
-      value: agentClusterInstall?.spec?.apiVIP,
+      key: apiIPs.length > 1 ? 'API IPs' : 'API IP',
+      value: apiIPs.join(', '),
     },
     ingressVip: {
-      key: 'Ingress IP',
-      value: agentClusterInstall?.spec?.ingressVIP,
+      key: ingressIPs.length > 1 ? 'Ingress IPs' : 'Ingress IP',
+      value: ingressIPs.join(', '),
     },
     clusterNetworkCidr: {
       key: (clusterNetworks?.length || 0) > 1 ? 'Cluster network CIDRs' : 'Cluster network CIDR',

package/lib/cim/components/helpers/status.ts

@@ -1,22 +1,21 @@
-import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
+import { TFunction } from 'i18next';
 import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
-import { AgentK8sResource } from '../../types/k8s/agent';
-import { BareMetalHostK8sResource } from '../../types/k8s/bare-metal-host';
-import { StatusCondition } from '../../types/k8s/shared';
-import { ValidationsInfo } from '../../../common/types/hosts';
+import {
+  AgentClusterInstallK8sResource,
+  AgentK8sResource,
+  BareMetalHostK8sResource,
+  StatusCondition,
+} from '../../types';
+import { HostStatusDef } from '../../../common';
 import {
   areOnlySoftValidationsOfWizardStepFailing,
   getWizardStepHostStatus,
   getWizardStepHostValidationsInfo,
 } from '../../../common/components/clusterWizard/validationsInfoUtils';
-import {
-  ClusterWizardStepsType,
-  wizardStepsValidationsMap,
-} from '../ClusterDeployment/wizardTransition';
-import { HostStatusDef } from '../../../common';
-import { agentStatus } from './agentStatus';
-import { TFunction } from 'i18next';
+import { ValidationsInfo } from '../../../common/types/hosts';
 import { HostStatus } from '../../../common/components/hosts/types';
+import { wizardStepsValidationsMap, ClusterDeploymentWizardStepsType } from '../ClusterDeployment';
+import { agentStatus } from './agentStatus';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const conditionsByTypeReducer = <K>(
@@ -82,7 +81,7 @@ export const getAgentStatus = (
 
 export const getWizardStepAgentStatus = (
   agent: AgentK8sResource,
-  wizardStepId: ClusterWizardStepsType,
+  wizardStepId: ClusterDeploymentWizardStepsType,
   t: TFunction,
   excludeDiscovered = false,
 ): { status: HostStatusDef; validationsInfo: ValidationsInfo } => {