@openshift-assisted/ui-lib 2.38.4 → 2.39.0

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

@@ -97,12 +97,12 @@ const NetworkConfiguration = ({
 
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
-      setFieldValue('ingressVip', '', shouldValidate);
-      setFieldValue('apiVip', '', shouldValidate);
+      setFieldValue('ingressVips', [], shouldValidate);
+      setFieldValue('apiVips', [], shouldValidate);
     } else {
-      if (!values.vipDhcpAllocation && touched.hostSubnet) {
-        validateField('ingressVip');
-        validateField('apiVip');
+      if (!values.vipDhcpAllocation) {
+        validateField('ingressVips');
+        validateField('apiVips');
       }
     }
   }, [

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import Measure from 'react-measure';
+import isMatch from 'lodash-es/isMatch.js';
+import { useFormikContext } from 'formik';
+import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+
+import { AgentK8sResource } from '../../../types';
+import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
+import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from '../types';
+import AgentsSelectionTable from '../../Agent/AgentsSelectionTable';
+import { AgentTableActions } from '../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { CpuArchitecture } from '../../../../common';
+import LocationsSelector from '../LocationsSelector';
+import LabelsSelector, { infraEnvLabelKeys } from '../LabelsSelector';
+
+type ClusterDeploymentHostsSelectionAdvancedProps = {
+  availableAgents: AgentK8sResource[];
+  onEditRole?: AgentTableActions['onEditRole'];
+  onEditHost?: AgentTableActions['onEditHost'];
+  onSetInstallationDiskId?: AgentTableActions['onSetInstallationDiskId'];
+  onHostSelect?: VoidFunction;
+  cpuArchitecture?: CpuArchitecture;
+};
+
+type FormValues = ClusterDeploymentHostsSelectionValues | ScaleUpFormValues;
+
+const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
+  availableAgents,
+  onEditRole,
+  onSetInstallationDiskId,
+  onEditHost,
+  onHostSelect,
+  cpuArchitecture,
+}: ClusterDeploymentHostsSelectionAdvancedProps) => {
+  const { t } = useTranslation();
+  const { values } = useFormikContext<T>();
+  const { locations, agentLabels } = values;
+
+  const matchingAgents = React.useMemo(
+    () =>
+      availableAgents.filter((agent) => {
+        const labels = agentLabels.reduce((acc, curr) => {
+          const label = curr.split('=');
+          acc[label[0]] = label[1];
+          return acc;
+        }, {} as Record<string, string>);
+        const matchesLocation = locations.length
+          ? locations.includes(
+              agent.metadata?.labels?.[AGENT_LOCATION_LABEL_KEY] || AGENT_NOLOCATION_VALUE,
+            )
+          : true;
+        const matchesLabels = agent.metadata?.labels
+          ? isMatch(agent.metadata?.labels, labels)
+          : true;
+        return matchesLocation && matchesLabels;
+      }),
+    [availableAgents, locations, agentLabels],
+  );
+
+  return (
+    <>
+      <Grid hasGutter>
+        <GridItem>
+          <LocationsSelector agents={availableAgents} />
+        </GridItem>
+        <GridItem>
+          <LabelsSelector
+            agents={matchingAgents}
+            name="agentLabels"
+            labelKeysFilter={infraEnvLabelKeys}
+          />
+        </GridItem>
+        {cpuArchitecture && (
+          <Alert
+            variant={AlertVariant.info}
+            title={t(
+              'ai:Displaying only hosts with {{cpuArchitecture}} architecture in the table.',
+              {
+                cpuArchitecture,
+              },
+            )}
+            isInline
+          />
+        )}
+        <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>
+        </GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default ClusterDeploymentHostsSelectionAdvanced;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { NumberInputField } from '../../../../common';
+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 LocationsSelector from '../LocationsSelector';
+
+type ClusterScaleUpAutoHostsSelectionProps = {
+  availableAgents: AgentK8sResource[];
+};
+
+const ClusterScaleUpAutoHostsSelection: React.FC<ClusterScaleUpAutoHostsSelectionProps> = ({
+  availableAgents,
+}) => {
+  const { matchingAgents, selectedAgents, hostCount } = useAgentsAutoSelection(availableAgents);
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Grid hasGutter>
+        <GridItem span={12} lg={10} xl={9} xl2={7}>
+          <NumberInputField
+            label={t('ai:Number of hosts')}
+            labelIcon={<AgentsSelectionHostCountLabelIcon />}
+            idPostfix="hostcount"
+            name="hostCount"
+            minValue={1}
+            maxValue={matchingAgents.length}
+            isRequired
+          />
+        </GridItem>
+        <GridItem span={12} lg={10} xl={9} xl2={7}>
+          <LocationsSelector agents={availableAgents} />
+        </GridItem>
+      </Grid>
+
+      <AgentsSelectionHostCountAlerts
+        matchingAgentsCount={matchingAgents.length}
+        selectedAgents={selectedAgents}
+        targetHostCount={hostCount}
+      />
+    </>
+  );
+};
+
+export default ClusterScaleUpAutoHostsSelection;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AlertGroup } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/./assisted-installer-service';
+import { ValidationsInfo, ClusterWizardStepValidationsAlert } from '../../../../common';
+import { ClusterWizardStepHostStatusDeterminationObject } from '../../../../common/types/hosts';
+import ValidationsRunningAlert from '../../common/ValidationsRunningAlert';
+import { ClusterWizardStepsType, wizardStepsValidationsMap } from '../wizardTransition';
+
+type ValidationSectionProps = {
+  requireProxy?: boolean;
+  currentStepId: ClusterWizardStepsType;
+  validationsInfo?: ValidationsInfo;
+  clusterStatus?: Cluster['status'];
+  hosts: ClusterWizardStepHostStatusDeterminationObject[];
+  children: React.ReactNode;
+};
+
+export const ValidationSection = ({
+  currentStepId,
+  clusterStatus,
+  validationsInfo,
+  hosts,
+  children,
+}: ValidationSectionProps) => {
+  return (
+    <AlertGroup>
+      {children}
+      {clusterStatus && (
+        <ClusterWizardStepValidationsAlert
+          currentStepId={currentStepId}
+          clusterStatus={clusterStatus}
+          hosts={hosts}
+          validationsInfo={validationsInfo}
+          wizardStepsValidationsMap={wizardStepsValidationsMap}
+        >
+          <ValidationsRunningAlert />
+        </ClusterWizardStepValidationsAlert>
+      )}
+    </AlertGroup>
+  );
+};

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

@@ -10,8 +10,10 @@ export const clusterHostsSelectionLabel = (t: TFunction): { [key in string]: str
 export const wizardStepNames = (
   t: TFunction,
 ): {
-  [key in ClusterDeploymentWizardStepsType]: string;
+  [key in ClusterDeploymentWizardStepsType | 'installation-type' | 'automation']: string;
 } => ({
+  'installation-type': t('ai:Installation type'),
+  automation: t('ai:Automation'),
   'cluster-details': t('ai:Cluster details'),
   'hosts-selection': t('ai:Cluster hosts'),
   'hosts-discovery': t('ai:Cluster hosts'),

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

@@ -4,17 +4,15 @@ export * from './AdditionalNTPSourcesDialogToggle';
 export * from './LogsDownloadButton';
 export * from './wizardTransition';
 export * from './networkConfigurationValidation';
+export * from './ClusterDeploymentWizard';
 
 export { default as ClusterDeploymentValidationsOverview } from './ClusterDeploymentValidationsOverview';
 export { default as ClusterDeploymentDetails } from './ClusterDeploymentDetails';
 export { default as ClusterDeploymentProgress } from './ClusterDeploymentProgress';
 export { default as ClusterDeploymentCredentials } from './ClusterDeploymentCredentials';
 export { default as ClusterDeploymentKubeconfigDownload } from './ClusterDeploymentKubeconfigDownload';
-export { default as ClusterDeploymentWizard } from './ClusterDeploymentWizard';
 export { default as ClusterInstallationError } from './ClusterInstallationError';
 export { default as NetworkConfiguration } from './NetworkConfiguration';
-
 export { default as ACMClusterDeploymentDetailsStep } from './ACMClusterDeploymentDetailsStep';
 
-export { default as ClusterDeploymentCreateProgress } from './ClusterDeploymentCreateProgress';
 export { getTotalCompute } from './ShortCapacitySummary';

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

@@ -1,17 +1,8 @@
-import * as Yup from 'yup';
 import {
   Cluster,
   ClusterDefaultConfig,
 } from '@openshift-assisted/types/assisted-installer-service';
-import { HostSubnets, NetworkConfigurationValues } from '../../../common/types/clusters';
-import {
-  hostPrefixValidationSchema,
-  hostSubnetValidationSchema,
-  ipBlockValidationSchema,
-  sshPublicKeyValidationSchema,
-  vipValidationSchema,
-} from '../../../common/components/ui';
-
+import { NetworkConfigurationValues } from '../../../common/types/clusters';
 import {
   getSubnetFromMachineNetworkCidr,
   getHostSubnets,
@@ -63,19 +54,3 @@ export const getNetworkInitialValues = (
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
   };
 };
-
-export const getNetworkConfigurationValidationSchema = (
-  initialValues: NetworkConfigurationValues,
-  hostSubnets: HostSubnets,
-) =>
-  Yup.lazy((values: NetworkConfigurationValues) =>
-    Yup.object<NetworkConfigurationValues>().shape({
-      clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
-      clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),
-      serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
-      apiVip: vipValidationSchema(hostSubnets, values, initialValues.apiVip),
-      ingressVip: vipValidationSchema(hostSubnets, values, initialValues.ingressVip),
-      sshPublicKey: sshPublicKeyValidationSchema,
-      hostSubnet: hostSubnetValidationSchema,
-    }),
-  );

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

@@ -17,14 +17,13 @@ import { BMCFormProps } from '../Agent/types';
 import { AgentMachineK8sResource } from '../Hypershift/types';
 import { AddHostDropdownProps, ProvisioningConfigResult } from '../InfraEnv/types';
 import { AddHostModalProps, EditBMHModalProps, UploadActionModalProps } from '../modals/types';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 
 export type EditAgentModalProps = {
-  agent: AgentK8sResource | undefined;
-  isOpen: boolean;
+  agent: AgentK8sResource;
   usedHostnames: string[] | undefined;
   onClose: () => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onSave: (agent: AgentK8sResource, hostname: string) => Promise<any>;
+  onSave: (host: Host, hostname: string) => Promise<unknown>;
 };
 
 export type AgentTableActions = {
@@ -85,7 +84,6 @@ export type ScaleUpFormValues = Omit<
 
 export type ClusterDeploymentDetailsStepProps = ClusterDeploymentDetailsProps & {
   onSaveDetails: (values: ClusterDeploymentDetailsValues) => Promise<unknown>;
-  onClose: () => void;
   isPreviewOpen: boolean;
   isNutanix: boolean;
 };
@@ -98,7 +96,6 @@ export type ClusterDeploymentDetailsNetworkingProps = Pick<
   agentClusterInstall: AgentClusterInstallK8sResource;
   agents: AgentK8sResource[];
   onSaveNetworking: (values: ClusterDeploymentNetworkingValues) => Promise<string | void>;
-  onClose: () => void;
   fetchInfraEnv: (name: string, namespace: string) => Promise<InfraEnvK8sResource>;
   isPreviewOpen: boolean;
   isNutanix: boolean;
@@ -115,7 +112,6 @@ export type ClusterDeploymentHostSelectionStepProps = Omit<
   'onHostSelect' | 'onAutoSelectChange'
 > & {
   onSaveHostsSelection: (values: ClusterDeploymentHostsSelectionValues) => Promise<string | void>;
-  onClose: () => void;
 };
 
 export type ClusterDeploymentHostsDiscoveryStepProps = Omit<
@@ -123,7 +119,6 @@ export type ClusterDeploymentHostsDiscoveryStepProps = Omit<
   'usedHostnames'
 > & {
   onSaveHostsDiscovery: () => Promise<void>;
-  onClose: () => void;
 };
 
 export type ClusterDeploymentWizardProps = {
@@ -146,6 +141,7 @@ export type ClusterDeploymentWizardProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
   agentClusterInstall: AgentClusterInstallK8sResource;
   agents: AgentK8sResource[];
+  bareMetalHosts: BareMetalHostK8sResource[];
   aiConfigMap?: ConfigMapK8sResource;
   infraEnv?: InfraEnvK8sResource;
   infraNMStates: NMStateK8sResource[];
@@ -155,7 +151,8 @@ export type ClusterDeploymentWizardProps = {
   setPreviewOpen: (open: boolean) => void;
   fetchManagedClusters: () => Promise<K8sResourceCommon[]>;
   fetchKlusterletAddonConfig: () => Promise<K8sResourceCommon[]>;
-  onSaveAgent: EditAgentModalProps['onSave'];
+  onChangeHostname: ClusterDeploymentHostsDiscoveryStepProps['onChangeHostname'];
+  onChangeBMHHostname: ClusterDeploymentHostsDiscoveryStepProps['onChangeBMHHostname'];
   onSaveBMH: EditBMHModalProps['onEdit'];
   onSaveISOParams?: AddHostModalProps['onSaveISOParams'];
   onSaveHostsDiscovery: ClusterDeploymentHostsDiscoveryStepProps['onSaveHostsDiscovery'];
@@ -225,7 +222,7 @@ export type ClusterDeploymentHostsDiscoveryProps = AddHostDropdownProps & {
   aiConfigMap?: ConfigMapK8sResource;
   infraNMStates: NMStateK8sResource[];
 
-  onSaveAgent: EditAgentModalProps['onSave'];
+  onChangeHostname: InfraEnvAgentTableProps['onChangeHostname'];
   onEditRole: ClusterDeploymentHostDiscoveryTableProps['onEditRole'];
   onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
   onSaveBMH: EditBMHModalProps['onEdit'];

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

@@ -17,7 +17,7 @@ import {
   HostSubnets,
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
-  vipValidationSchema,
+  vipArrayValidationSchema,
   sshPublicKeyValidationSchema,
   hostSubnetValidationSchema,
   httpProxyValidationSchema,
@@ -50,8 +50,8 @@ const getNetworkConfigurationValidationSchema = (
       clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
       clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),
       serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
-      apiVip: vipValidationSchema(hostSubnets, values, initialValues.apiVip),
-      ingressVip: vipValidationSchema(hostSubnets, values, initialValues.ingressVip),
+      apiVips: vipArrayValidationSchema(hostSubnets, values, initialValues.apiVips),
+      ingressVips: vipArrayValidationSchema(hostSubnets, values, initialValues.ingressVips),
       sshPublicKey: sshPublicKeyValidationSchema,
       hostSubnet: hostSubnetValidationSchema,
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),

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

@@ -15,8 +15,10 @@ const HypershiftKubeconfigDownload = ({
   fetchSecret,
 }: HypershiftKubeconfigDownloadProps) => {
   const { t } = useTranslation();
+  const kubeconfigSecretName = hostedCluster.status?.customKubeconfig
+    ? hostedCluster.status.customKubeconfig?.name
+    : hostedCluster.status?.kubeconfig?.name;
   const handleKubeconfigDownload = async () => {
-    const kubeconfigSecretName = hostedCluster.status?.kubeconfig?.name;
     const kubeconfigSecretNamespace = hostedCluster.metadata?.namespace;
 
     if (kubeconfigSecretName && kubeconfigSecretNamespace) {
@@ -41,7 +43,7 @@ const HypershiftKubeconfigDownload = ({
       variant={ButtonVariant.secondary}
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onClick={handleKubeconfigDownload}
-      isDisabled={!hostedCluster.status?.kubeconfig?.name}
+      isDisabled={!kubeconfigSecretName}
     >
       {t('ai:Download kubeconfig')}
     </Button>

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

@@ -133,11 +133,11 @@ export type HostedClusterK8sResource = K8sResourceCommon & {
         endpointAccess: 'Public';
         kubeCloudControllerCreds: { name?: string };
         nodePoolManagementCreds: { name?: string };
-        region: 'us-west-2';
+        region: string;
         resourceTags: [
           {
-            key: 'kubernetes.io/cluster/feng-hs-scale-74zxh';
-            value: 'owned';
+            key: string;
+            value: string;
           },
         ];
       };
@@ -157,6 +157,9 @@ export type HostedClusterK8sResource = K8sResourceCommon & {
     kubeconfig?: {
       name: string;
     };
+    customKubeconfig?: {
+      name: string;
+    };
     kubeadminPassword?: {
       name: string;
     };

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button, Stack, StackItem } from '@patternfly/react-core';
 import { DropdownItem } from '@patternfly/react-core/deprecated';
-import noop from 'lodash-es/noop.js';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
@@ -33,12 +32,12 @@ import {
 } from '../../../common';
 import { InfraEnvAgentTableProps } from '../ClusterDeployment/types';
 import { MassApproveAgentModal, MassDeleteAgentModal } from '../modals';
-import { MassChangeHostnameModalProps } from '../../../common/components/hosts/MassChangeHostnameModal';
 import MassApproveAction from '../modals/MassApproveAction';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import InfraTableToolbar from './InfraTableToolbar';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { agentStatus, bmhStatus } from '../helpers/agentStatus';
+import { onAgentChangeHostname } from '../helpers';
 
 type NoFilterMatchStateProps = {
   onClearFilters: VoidFunction;
@@ -205,19 +204,6 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
     <DeleteHostAction key="delete" onDeleteHost={() => setMassDeleteOpen(!isMassDeleteOpen)} />,
   ];
 
-  const onAgentChangeHostname: MassChangeHostnameModalProps['onChangeHostname'] = async (
-    host,
-    hostname,
-  ) => {
-    const agent = agents.find((a) => a.metadata?.uid === host.id);
-    if (agent) {
-      return onChangeHostname(agent, hostname);
-    } else {
-      const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-      return bmh ? onChangeBMHHostname(bmh, hostname) : noop;
-    }
-  };
-
   const paginationProps = usePagination(hosts.length);
 
   return (
@@ -272,7 +258,12 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
           isOpen={isMassChangeHostOpen}
           hosts={hosts}
           selectedHostIDs={selectedHostIDs}
-          onChangeHostname={onAgentChangeHostname}
+          onChangeHostname={onAgentChangeHostname(
+            agents,
+            bareMetalHosts,
+            onChangeHostname,
+            onChangeBMHHostname,
+          )}
           onClose={() => setMassChangeHostOpen(false)}
           canChangeHostname={canChangeHostname(agents, agentStatuses, bareMetalHosts, t)}
         />

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

@@ -49,7 +49,7 @@ import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import OpenshiftVersionDropdown from './OpenshiftVersionDropdown';
+import InfraEnvOpenShiftVersionDropdown from './InfraEnvOpenShiftVersionDropdown';
 import { OsImage } from '../../types';
 
 export type EnvironmentStepFormValues = {
@@ -228,7 +228,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
             </Flex>
           </FormGroup>
           <CpuArchitectureDropdown />
-          {!!osImages && <OpenshiftVersionDropdown osImages={osImages} />}
+          {!!osImages && <InfraEnvOpenShiftVersionDropdown osImages={osImages} />}
           <RichInputField
             label={t('ai:Location')}
             name="location"

package/lib/cim/components/InfraEnv/{OpenshiftVersionDropdown.tsx → InfraEnvOpenShiftVersionDropdown.tsx}

@@ -6,7 +6,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
 import { OsImage } from '../../types';
 
-const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
+const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
   const { t } = useTranslation();
   const [{ name, value }, , { setValue }] = useField<string>('osImageVersion');
   const [{ value: cpuArchitecture }] = useField<string>('cpuArchitecture');
@@ -69,4 +69,4 @@ const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
   );
 };
 
-export default OpenshiftVersionDropdown;
+export default InfraEnvOpenShiftVersionDropdown;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { FormGroup } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownItem, FormGroup, MenuToggle } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import {
   architectureData,
@@ -12,30 +11,18 @@ import {
 import { useField } from 'formik';
 import { useFormikHelpers } from '../../../common/hooks/useFormikHelpers';
 
-const allDropdownItems = {
-  [CpuArchitecture.x86]: (
-    <DropdownItem key={'x86_64'} id="x86_64" description={architectureData['x86_64'].description}>
-      {architectureData['x86_64'].label}
-    </DropdownItem>
-  ),
-  [CpuArchitecture.ARM]: (
-    <DropdownItem key={'arm64'} id="arm64" description={architectureData['arm64'].description}>
-      {architectureData['arm64'].label}
-    </DropdownItem>
-  ),
-  [CpuArchitecture.s390x]: (
-    <DropdownItem key={'s390x'} id="s390x" description={architectureData['s390x'].description}>
-      {architectureData['s390x'].label}
-    </DropdownItem>
-  ),
-};
+const cimCpuArchitectures = [
+  CpuArchitecture.x86,
+  CpuArchitecture.ARM,
+  CpuArchitecture.s390x,
+] as SupportedCpuArchitecture[];
 
 const CpuArchitectureDropdown = ({
   isDisabled = false,
   cpuArchitectures,
 }: {
   isDisabled?: boolean;
-  cpuArchitectures?: string[];
+  cpuArchitectures?: SupportedCpuArchitecture[];
 }) => {
   const { t } = useTranslation();
   const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture | ''>(
@@ -45,7 +32,7 @@ const CpuArchitectureDropdown = ({
   const fieldId = getFieldId(name, 'input');
   const { setValue: setUserManagedNetworking } = useFormikHelpers<boolean>('userManagedNetworking');
 
-  const onCpuArchSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+  const onCpuArchSelect = (e?: React.MouseEvent<Element, MouseEvent>) => {
     const val = e?.currentTarget.id as SupportedCpuArchitecture;
     setValue(val);
     setUserManagedNetworking(val === CpuArchitecture.s390x);
@@ -53,36 +40,60 @@ const CpuArchitectureDropdown = ({
     setCpuArchOpen(false);
   };
 
-  const dropdownItems = React.useMemo(() => {
-    if (!cpuArchitectures) {
-      return Object.values(allDropdownItems);
-    } else {
-      return Object.entries(allDropdownItems)
-        .filter(([key, _]) => cpuArchitectures.includes(key))
-        .map(([_, val]) => val);
-    }
-  }, [cpuArchitectures]);
+  const dropdownItems = React.useMemo(
+    () =>
+      cimCpuArchitectures.map((arch) => {
+        const isItemEnabled = !cpuArchitectures || cpuArchitectures.includes(arch);
+        const disabledReason = t(
+          'ai:This option is not available with the selected OpenShift version',
+        );
+        return (
+          <DropdownItem
+            key={arch}
+            id={arch}
+            isAriaDisabled={!isItemEnabled}
+            selected={arch === value}
+            description={architectureData[arch].description}
+            tooltipProps={{ content: disabledReason, position: 'top' }}
+            onClick={(e: React.MouseEvent) => e.preventDefault()}
+          >
+            {architectureData[arch].label}
+          </DropdownItem>
+        );
+      }),
+    [cpuArchitectures, t, value],
+  );
 
   React.useEffect(() => {
     if (!isDisabled && value !== '' && cpuArchitectures && !cpuArchitectures?.includes(value)) {
-      setValue('');
+      const defaultVal = cpuArchitectures?.[0] || CpuArchitecture.x86;
+      setValue(defaultVal);
     }
   }, [cpuArchitectures, isDisabled, setValue, value]);
 
   return !isDisabled ? (
-    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} isRequired>
+    <FormGroup
+      isInline
+      fieldId={fieldId}
+      label={t('ai:CPU architecture')}
+      isRequired
+      name={'cpuArchiteture'}
+    >
       <Dropdown
-        toggle={
-          <DropdownToggle onToggle={() => setCpuArchOpen(!cpuArchOpen)} className="pf-u-w-100">
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={() => setCpuArchOpen(!cpuArchOpen)}
+            className="pf-u-w-100"
+          >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
-          </DropdownToggle>
-        }
-        name="cpuArchitecture"
+          </MenuToggle>
+        )}
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
-        dropdownItems={dropdownItems}
-        className="pf-u-w-100"
-      />
+      >
+        {dropdownItems}
+      </Dropdown>
     </FormGroup>
   ) : (
     <StaticField name={'cpuArchitecture'} label={t('ai:CPU architecture')} isRequired>