@openshift-assisted/ui-lib 2.41.2 → 2.42.0

package/build/cjs/ocm/services/DiskEncryptionService.js

@@ -1,10 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const DiskEncryptionService = {
-    diskEncryptionEnableOn(isEnableOnMasters, isEnableOnWorkers) {
+    diskEncryptionEnableOn(isEnableOnMasters, isEnableOnWorkers, isEnableOnArbiters) {
         let enableOnParam;
-        if (isEnableOnMasters && isEnableOnWorkers)
+        if (isEnableOnMasters && isEnableOnWorkers && isEnableOnArbiters)
             enableOnParam = 'all';
+        else if (isEnableOnMasters && isEnableOnWorkers)
+            enableOnParam = 'masters,workers';
+        else if (isEnableOnMasters && isEnableOnArbiters)
+            enableOnParam = 'masters,arbiters';
+        else if (isEnableOnWorkers && isEnableOnArbiters)
+            enableOnParam = 'arbiters,workers';
+        else if (isEnableOnArbiters)
+            enableOnParam = 'arbiters';
         else if (isEnableOnWorkers)
             enableOnParam = 'workers';
         else if (isEnableOnMasters)
@@ -20,7 +28,7 @@ const DiskEncryptionService = {
                 ? values.enableDiskEncryptionOnMasters
                     ? 'all'
                     : 'none'
-                : DiskEncryptionService.diskEncryptionEnableOn(values.enableDiskEncryptionOnMasters, values.enableDiskEncryptionOnWorkers),
+                : DiskEncryptionService.diskEncryptionEnableOn(values.enableDiskEncryptionOnMasters, values.enableDiskEncryptionOnWorkers, values.enableDiskEncryptionOnArbiters),
             tangServers: values.diskEncryptionMode === 'tang'
                 ? JSON.stringify(values.diskEncryptionTangServers)
                 : undefined,

package/build/cjs/ocm/services/DiskEncryptionService.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiskEncryptionService.js","sourceRoot":"","sources":["../../../../lib/ocm/services/DiskEncryptionService.ts"],"names":[],"mappings":";;AAMA,MAAM,qBAAqB,GAAG;IAC5B,sBAAsB,CACpB,iBAA0B,EAC1B,iBAA0B;QAE1B,IAAI,aAAyC,CAAC;QAC9C,IAAI,iBAAiB,IAAI,iBAAiB;YAAE,aAAa,GAAG,KAAK,CAAC;aAC7D,IAAI,iBAAiB;YAAE,aAAa,GAAG,SAAS,CAAC;aACjD,IAAI,iBAAiB;YAAE,aAAa,GAAG,SAAS,CAAC;;YACjD,aAAa,GAAG,MAAM,CAAC;QAC5B,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,uBAAuB,CAAC,MAA4B;QAClD,OAAO;YACL,IAAI,EAAE,MAAM,CAAC,kBAAkB;YAC/B,QAAQ,EACN,MAAM,CAAC,oBAAoB,KAAK,MAAM;gBACpC,CAAC,CAAC,MAAM,CAAC,6BAA6B;oBACpC,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,MAAM;gBACV,CAAC,CAAC,qBAAqB,CAAC,sBAAsB,CAC1C,MAAM,CAAC,6BAA6B,EACpC,MAAM,CAAC,6BAA6B,CACrC;YACP,WAAW,EACT,MAAM,CAAC,kBAAkB,KAAK,MAAM;gBAClC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC;gBAClD,CAAC,CAAC,SAAS;SAChB,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}
+{"version":3,"file":"DiskEncryptionService.js","sourceRoot":"","sources":["../../../../lib/ocm/services/DiskEncryptionService.ts"],"names":[],"mappings":";;AAMA,MAAM,qBAAqB,GAAG;IAC5B,sBAAsB,CACpB,iBAA0B,EAC1B,iBAA0B,EAC1B,kBAA2B;QAE3B,IAAI,aAAyC,CAAC;QAC9C,IAAI,iBAAiB,IAAI,iBAAiB,IAAI,kBAAkB;YAAE,aAAa,GAAG,KAAK,CAAC;aACnF,IAAI,iBAAiB,IAAI,iBAAiB;YAAE,aAAa,GAAG,iBAAiB,CAAC;aAC9E,IAAI,iBAAiB,IAAI,kBAAkB;YAAE,aAAa,GAAG,kBAAkB,CAAC;aAChF,IAAI,iBAAiB,IAAI,kBAAkB;YAAE,aAAa,GAAG,kBAAkB,CAAC;aAChF,IAAI,kBAAkB;YAAE,aAAa,GAAG,UAAU,CAAC;aACnD,IAAI,iBAAiB;YAAE,aAAa,GAAG,SAAS,CAAC;aACjD,IAAI,iBAAiB;YAAE,aAAa,GAAG,SAAS,CAAC;;YACjD,aAAa,GAAG,MAAM,CAAC;QAC5B,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,uBAAuB,CAAC,MAA4B;QAClD,OAAO;YACL,IAAI,EAAE,MAAM,CAAC,kBAAkB;YAC/B,QAAQ,EACN,MAAM,CAAC,oBAAoB,KAAK,MAAM;gBACpC,CAAC,CAAC,MAAM,CAAC,6BAA6B;oBACpC,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,MAAM;gBACV,CAAC,CAAC,qBAAqB,CAAC,sBAAsB,CAC1C,MAAM,CAAC,6BAA6B,EACpC,MAAM,CAAC,6BAA6B,EACpC,MAAM,CAAC,8BAA8B,CACtC;YACP,WAAW,EACT,MAAM,CAAC,kBAAkB,KAAK,MAAM;gBAClC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,yBAAyB,CAAC;gBAClD,CAAC,CAAC,SAAS;SAChB,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,kBAAe,qBAAqB,CAAC"}

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

@@ -112,7 +112,9 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
 
   const [cpuArchitectures, allowHighlyAvailable] = React.useMemo(() => {
     const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
-    const version = allVersions.find((ver) => ver.value === values.openshiftVersion);
+    const version = allVersions.find(
+      (ver) => ver.value === values.openshiftVersion || ver.version === forceOpenshiftVersion,
+    );
     const isMulti = version?.cpuArchitectures?.[0] === CpuArchitecture.MULTI;
 
     const highlyAvailableSupported = toNumber(version?.version?.split('.')?.[1]) >= 18;
@@ -120,7 +122,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
       (isMulti ? cpuArchitectures : version?.cpuArchitectures) as SupportedCpuArchitecture[],
       highlyAvailableSupported && !isMulti,
     ];
-  }, [allVersions, values.openshiftVersion]);
+  }, [allVersions, forceOpenshiftVersion, values.openshiftVersion]);
 
   return (
     <>

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

@@ -82,12 +82,14 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
           <DiscoveryInstructions />
         </TextContent>
       </GridItem>
-      <AddHostDropdown
-        infraEnv={infraEnv}
-        agentClusterInstall={agentClusterInstall}
-        usedHostnames={usedHostnames}
-        {...rest}
-      />
+      <GridItem span={5}>
+        <AddHostDropdown
+          infraEnv={infraEnv}
+          agentClusterInstall={agentClusterInstall}
+          usedHostnames={usedHostnames}
+          {...rest}
+        />
+      </GridItem>
       <GridItem>
         <TextContent>
           <Text component="h3">{t('ai:Information and warnings')}</Text>

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

@@ -1,7 +1,16 @@
 import React from 'react';
 import flatten from 'lodash-es/flatten.js';
-import { Label, LabelGroup, Split, SplitItem } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import {
+  Label,
+  LabelGroup,
+  Split,
+  SplitItem,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 
 import { MultiSelectField } from '../../../common';
@@ -122,23 +131,27 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
       </SplitItem>
       <SplitItem>
         <Dropdown
+          isOpen={addLabelOpen}
           onSelect={() => setAddLabelOpen(false)}
-          toggle={
-            <DropdownToggle
-              toggleIndicator={null}
-              onToggle={(_event, val) => setAddLabelOpen(val)}
-              style={{ padding: 0 }}
+          onOpenChange={() => setAddLabelOpen(!addLabelOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              variant="plain"
+              className="pf-v5-u-w-100"
+              ref={toggleRef}
+              isFullWidth
+              onClick={() => setAddLabelOpen(!addLabelOpen)}
+              isExpanded={addLabelOpen}
             >
               <Label color="blue" variant="outline" className="pf-m-overflow">
                 {t('ai:Add label')}
               </Label>
-            </DropdownToggle>
-          }
-          isOpen={addLabelOpen}
-          isPlain
-          dropdownItems={children}
-          menuAppendTo={() => document.body}
-        />
+            </MenuToggle>
+          )}
+          shouldFocusToggleOnSelect
+        >
+          <DropdownList>{children}</DropdownList>
+        </Dropdown>
       </SplitItem>
     </Split>
   );

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

@@ -14,6 +14,7 @@ import RadioField from '../../../common/components/ui/formik/RadioField';
 type ScaleUpFormProps = {
   agents: AgentK8sResource[];
   onEditHost: AgentTableActions['onEditHost'];
+  onEditRole: AgentTableActions['onEditRole'];
   onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
   isNutanix: boolean;
 };
@@ -21,6 +22,7 @@ type ScaleUpFormProps = {
 const ScaleUpForm: React.FC<ScaleUpFormProps> = ({
   agents,
   onEditHost,
+  onEditRole,
   onSetInstallationDiskId,
   isNutanix,
 }) => {
@@ -73,6 +75,7 @@ const ScaleUpForm: React.FC<ScaleUpFormProps> = ({
         <ClusterDeploymentHostsSelectionAdvanced<ScaleUpFormValues>
           availableAgents={availableAgents}
           onEditHost={onEditHost}
+          onEditRole={onEditRole}
           onSetInstallationDiskId={onSetInstallationDiskId}
         />
       )}

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

@@ -1,20 +1,25 @@
-import { Split, SplitItem, Spinner } from '@patternfly/react-core';
 import {
+  Split,
+  SplitItem,
+  Spinner,
   Dropdown,
-  DropdownGroup,
   DropdownItem,
   DropdownItemProps,
-  DropdownSeparator,
-  DropdownToggle,
-} from '@patternfly/react-core/deprecated';
+  MenuToggle,
+  MenuToggleElement,
+  Divider,
+  DropdownList,
+  Popover,
+  Flex,
+} from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { AddBmcHostModal, AddBmcHostYamlModal, AddHostModal } from '../modals';
 import { AddHostDropdownProps } from './types';
 import './AddHostDropdown.css';
-import { PopoverIcon } from '../../../common';
 import { Trans } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
 type ModalType = 'iso' | 'bmc' | 'yaml' | 'ipxe' | undefined;
 
@@ -50,21 +55,29 @@ const AddHostDropdown = ({
   const [provisioningConfig, provisioningConfigLoaded, provisioningConfigError] =
     provisioningConfigResult;
   const { t } = useTranslation();
+
   return (
     <>
       <Dropdown
         id="infraenv-actions"
-        toggle={
-          <DropdownToggle
+        isOpen={isKebabOpen}
+        onSelect={() => setIsKebabOpen(false)}
+        onOpenChange={() => setIsKebabOpen(!isKebabOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
             id="dropdown-basic"
-            onToggle={(_event, value) => setIsKebabOpen(value)}
-            toggleVariant="primary"
+            variant="primary"
+            ref={toggleRef}
+            onClick={() => setIsKebabOpen(!isKebabOpen)}
+            isExpanded={isKebabOpen}
           >
             {t('ai:Add hosts')}
-          </DropdownToggle>
-        }
-        isOpen={isKebabOpen}
-        dropdownItems={[
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+        popperProps={{ preventOverflow: true }}
+      >
+        {[
           <DropdownItem
             key="discovery-iso"
             onClick={() => {
@@ -85,36 +98,37 @@ const AddHostDropdown = ({
           >
             {t('ai:With iPXE')}
           </DropdownItem>,
-          <DropdownSeparator key="separator" />,
-          <DropdownGroup
-            id="discovery-bmc"
-            key="discovery-bmc"
-            className="ai-discovery-bmc__group"
-            label={
-              <Split hasGutter>
-                <SplitItem>{t('ai:Baseboard Management Controller (BMC)')}</SplitItem>
-                <SplitItem>
-                  {!provisioningConfig && (
-                    <>
-                      {' '}
-                      <PopoverIcon
-                        noVerticalAlign
-                        bodyContent={
-                          <Trans t={t}>
-                            ai:To enable the host's baseboard management controller (BMC) on the hub
-                            cluster, you must first{' '}
-                            <Link to="/k8s/cluster/metal3.io~v1alpha1~Provisioning/~new">
-                              create a provisioning configuration.
-                            </Link>
-                          </Trans>
-                        }
-                      />
-                    </>
-                  )}
-                </SplitItem>
-              </Split>
-            }
-          >
+          <Divider component="li" key="separator" />,
+          <DropdownList id="discovery-bmc" key="discovery-bmc" className="ai-discovery-bmc__group">
+            {!provisioningConfig && (
+              <DropdownItem
+                isAriaDisabled
+                className="pf-v5-u-color-200" // visually muted
+                component="div"
+              >
+                <Flex
+                  alignItems={{ default: 'alignItemsCenter' }}
+                  spaceItems={{ default: 'spaceItemsMd' }} // Changed to 'spaceItemsMd' for larger spacing
+                >
+                  <span>{t('ai:Baseboard Management Controller (BMC)')}</span>
+                  <Popover
+                    triggerAction="hover"
+                    position="top"
+                    bodyContent={
+                      <Trans t={t}>
+                        ai:To enable the host's baseboard management controller (BMC) on the hub
+                        cluster, you must first{' '}
+                        <Link to="/k8s/cluster/metal3.io~v1alpha1~Provisioning/~new">
+                          create a provisioning configuration.
+                        </Link>
+                      </Trans>
+                    }
+                  >
+                    <OutlinedQuestionCircleIcon />
+                  </Popover>
+                </Flex>
+              </DropdownItem>
+            )}
             <DropdownItemWithLoading
               key="with-credentials"
               onClick={() => {
@@ -139,10 +153,9 @@ const AddHostDropdown = ({
               isLoading={!provisioningConfigLoaded}
               isDisabled={!provisioningConfig && !provisioningConfigError}
             />
-          </DropdownGroup>,
+          </DropdownList>,
         ]}
-        position={'right'}
-      />
+      </Dropdown>
       {addModalType === 'iso' && (
         <AddHostModal
           infraEnv={infraEnv}

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

@@ -20,12 +20,7 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
-import {
-  architectureData,
-  CpuArchitecture,
-  LabelValue,
-  SupportedCpuArchitecture,
-} from '../../../common';
+import { architectureData, LabelValue } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -134,6 +129,11 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
     infraEnv.spec?.proxy?.httpProxy ||
     infraEnv.spec?.proxy?.httpsProxy ||
     infraEnv.spec?.proxy?.noProxy;
+
+  const arch = infraEnv.spec?.cpuArchitecture
+    ? architectureData[infraEnv.spec?.cpuArchitecture]?.label
+    : infraEnv.spec?.cpuArchitecture;
+
   return (
     <>
       <Grid hasGutter>
@@ -164,10 +164,7 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
             </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:CPU architecture')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {architectureData[infraEnv.spec?.cpuArchitecture as SupportedCpuArchitecture]
-                  .label ?? CpuArchitecture.x86}
-              </DescriptionListDescription>
+              <DescriptionListDescription>{arch ?? '--'}</DescriptionListDescription>
             </DescriptionListGroup>
 
             {infraEnv.spec?.osImageVersion && (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Stack, StackItem } from '@patternfly/react-core';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
@@ -13,9 +20,11 @@ const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] })
   const [osImageOpen, setOsImageOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const onOsImageSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
-    const val = e?.currentTarget.id || '';
-    setValue(val);
+  const onOsImageSelect = (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    val?: string | number,
+  ) => {
+    setValue(val ? String(val) : '');
     setOsImageOpen(false);
   };
 
@@ -40,30 +49,33 @@ const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] })
         hidden={!!filteredImages.length}
       >
         <Dropdown
-          toggle={
-            <DropdownToggle
-              onToggle={() => setOsImageOpen(!osImageOpen)}
-              className="pf-u-w-100"
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              isFullWidth
+              onClick={() => setOsImageOpen(!osImageOpen)}
+              isExpanded={osImageOpen}
               isDisabled={!filteredImages.length}
             >
               {value ? `OpenShift ${value}` : t('ai:No version selected')}
-            </DropdownToggle>
-          }
-          name="osImageVersion"
+            </MenuToggle>
+          )}
           isOpen={osImageOpen}
           onSelect={onOsImageSelect}
-          dropdownItems={[
-            <DropdownItem key={'NO_VALUE'} value={''}>
-              {t('ai:No version selected')}
-            </DropdownItem>,
-            ...filteredImages.map((image) => (
-              <DropdownItem key={image.openshiftVersion} id={image.openshiftVersion}>
+          onOpenChange={() => setOsImageOpen(!osImageOpen)}
+        >
+          <DropdownList>
+            {filteredImages.map((image) => (
+              <DropdownItem
+                key={image.openshiftVersion}
+                id={image.openshiftVersion}
+                value={image.openshiftVersion}
+              >
                 {`OpenShift ${image.openshiftVersion}`}
               </DropdownItem>
-            )),
-          ]}
-          className="pf-u-w-100"
-        />
+            ))}
+          </DropdownList>
+        </Dropdown>
       </Tooltip>
     </FormGroup>
   );

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

@@ -54,7 +54,7 @@ const CpuArchitectureDropdown = ({
             isAriaDisabled={!isItemEnabled}
             selected={arch === value}
             description={architectureData[arch].description}
-            tooltipProps={{ content: disabledReason, position: 'top' }}
+            tooltipProps={{ content: disabledReason, position: 'top', hidden: isItemEnabled }}
             onClick={(e: React.MouseEvent) => e.preventDefault()}
           >
             {architectureData[arch].label}
@@ -74,23 +74,26 @@ const CpuArchitectureDropdown = ({
   return !isDisabled ? (
     <FormGroup
       isInline
-      fieldId={fieldId}
+      id={`form-control__${fieldId}`}
       label={t('ai:CPU architecture')}
       isRequired
       name={'cpuArchiteture'}
     >
       <Dropdown
+        id={`${fieldId}-dropdown`}
         toggle={(toggleRef) => (
           <MenuToggle
+            id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-u-w-100"
+            className="pf-v5-u-w-100"
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>
         )}
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
+        onOpenChange={() => setCpuArchOpen(!cpuArchOpen)}
       >
         {dropdownItems}
       </Dropdown>

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

@@ -8,7 +8,7 @@ import {
 } from '../../types';
 import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
-import { getMajorMinorVersion } from '../../../common/utils';
+import { isMajorMinorVersionEqualOrGreater } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
   const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
@@ -124,4 +124,4 @@ export const getCurrentClusterVersion = (cv?: ClusterVersionK8sResource): string
 export const getNetworkType = (
   ocpVersion: OpenshiftVersionOptionType | undefined,
 ): 'OVNKubernetes' | 'OpenShiftSDN' =>
-  parseFloat(getMajorMinorVersion(ocpVersion?.version)) >= 4.12 ? 'OVNKubernetes' : 'OpenShiftSDN';
+  isMajorMinorVersionEqualOrGreater(ocpVersion?.version, '4.12') ? 'OVNKubernetes' : 'OpenShiftSDN';

package/lib/cim/components/modals/MassApproveAction.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { AgentK8sResource } from '../../types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 

package/lib/cim/components/modals/ScaleUpModal.tsx

@@ -63,6 +63,7 @@ type ScaleUpModalProps = {
   onChangeBMHHostname: (bmh: BareMetalHostK8sResource, hostname: string) => Promise<unknown>;
   onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
   isNutanix: boolean;
+  onEditHostRole: (agent: AgentK8sResource, role: string | undefined) => Promise<AgentK8sResource>;
 };
 
 const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
@@ -76,6 +77,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
   onChangeBMHHostname,
   onSetInstallationDiskId,
   isNutanix,
+  onEditHostRole,
 }) => {
   const [editAgent, setEditAgent] = React.useState<AgentK8sResource | undefined>();
   const [error, setError] = React.useState<string | undefined>();
@@ -123,8 +125,8 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
   return (
     <>
       <Modal
-        aria-label={t('ai:Add worker host dialog')}
-        title={t('ai:Add worker hosts')}
+        aria-label={t('ai:Add host dialog')}
+        title={t('ai:Add hosts')}
         isOpen={isOpen}
         onClose={onClose}
         hasNoBodyWrapper
@@ -145,6 +147,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                       <ScaleUpForm
                         agents={agents}
                         onEditHost={setEditAgent}
+                        onEditRole={onEditHostRole}
                         onSetInstallationDiskId={onSetInstallationDiskId}
                         isNutanix={isNutanix}
                       />

package/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
 import { useField } from 'formik';
@@ -55,29 +62,35 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
-    const val = e?.currentTarget.id as string;
-    setValue(toNumber(val));
+  const onControlPlaneSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    setValue(toNumber(value));
     setControlPlanelOpen(false);
   };
 
   return !isDisabled ? (
     <FormGroup isInline fieldId={fieldId} label={t('ai:Number of control plane nodes')} isRequired>
       <Dropdown
-        toggle={
-          <DropdownToggle
-            onToggle={() => setControlPlanelOpen(!controlPlanelOpen)}
-            className="pf-u-w-100"
-          >
-            {selectedValue ? selectedValue : '3'}
-          </DropdownToggle>
-        }
-        name="controlPlaneCount"
         isOpen={controlPlanelOpen}
         onSelect={onControlPlaneSelect}
-        dropdownItems={dropdownItems}
-        className="pf-u-w-100"
-      />
+        onOpenChange={() => setControlPlanelOpen(!controlPlanelOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            className="pf-v5-u-w-100"
+            ref={toggleRef}
+            isFullWidth
+            onClick={() => setControlPlanelOpen(!controlPlanelOpen)}
+            isExpanded={controlPlanelOpen}
+          >
+            {selectedValue ? selectedValue : '3'}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </FormGroup>
   ) : (
     <StaticField