@openshift-assisted/ui-lib 2.41.2 → 2.42.1

package/lib/common/components/ui/ClusterEventsToolbar.tsx

@@ -235,6 +235,7 @@ const ClusterEventsToolbar = ({
               isOpen={isHostExpanded}
               onSelect={(e, value) => onHostSelect(value as string, isSelectEventChecked(e))}
               onOpenChange={onHostToggle}
+              isScrollable
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                 <MenuToggle
                   id="cluster-events-hosts-dropdown-button"

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -5,15 +5,13 @@ import {
   FormHelperText,
   HelperTextItem,
   Button,
-} from '@patternfly/react-core';
-import {
   DropdownItem,
-  DropdownToggle,
+  MenuToggle,
+  MenuToggleElement,
   Dropdown,
   DropdownGroup,
-  DropdownSeparator,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  Divider,
+} from '@patternfly/react-core';
 
 import { OpenshiftVersionOptionType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -22,7 +20,6 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
@@ -77,13 +74,13 @@ export const OpenShiftVersionDropdown = ({
   let lastY: string | undefined = '';
   const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
     const items = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
 
     if (lastY !== null && y !== lastY) {
-      items.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+      items.push(<Divider key={`separator-${y || ''}`} />);
     }
     lastY = y;
     return items;
@@ -93,28 +90,24 @@ export const OpenShiftVersionDropdown = ({
   let lastCustomY: string | undefined = '';
   const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
     const customItems = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value}>
+      <DropdownItem key={value} id={value} value={value}>
         {label}
       </DropdownItem>
     ));
-
     if (lastCustomY !== null && y !== lastCustomY) {
-      customItems.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+      customItems.push(<Divider key={`separator-${y || ''}`} />);
     }
     lastCustomY = y;
-
     return customItems;
   });
 
   const dropdownGroup = [
-    <DropdownGroup label="Latest releases" key="latest-releases">
-      {dropdownItems}
-    </DropdownGroup>,
-    <DropdownGroup
-      label="Custom releases"
-      key="custom-releases"
-      hidden={customDropdownItems.length === 0}
-    >
+    dropdownItems.length && (
+      <DropdownGroup label="Latest releases" key="latest-releases">
+        {dropdownItems}
+      </DropdownGroup>
+    ),
+    <DropdownGroup label="Custom releases" key="custom-releases">
       {customDropdownItems}
     </DropdownGroup>,
     <DropdownGroup key="all-available-versions">
@@ -132,9 +125,9 @@ export const OpenShiftVersionDropdown = ({
   ];
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const newLabel = event?.currentTarget.innerText;
-      const newValue = event?.currentTarget.id || '';
+    (event?: React.MouseEvent<Element, MouseEvent>, val?: string | number) => {
+      const newLabel = event?.currentTarget.textContent;
+      const newValue = (val as string) || '';
       if (newLabel && newValue !== 'all-versions') {
         setCurrent(newLabel);
         setValue(newValue);
@@ -144,19 +137,18 @@ export const OpenShiftVersionDropdown = ({
     [setValue],
   );
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {current}
-      </DropdownToggle>
-    ),
-    [setOpen, current, isDisabled],
+  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={isDisabled}
+      isExpanded={isOpen}
+    >
+      {current}
+    </MenuToggle>
   );
 
   const helperText = getHelperText && getHelperText(field.value);
@@ -170,14 +162,16 @@ export const OpenShiftVersionDropdown = ({
     >
       <Dropdown
         {...field}
-        name={name}
-        id={fieldId}
-        onSelect={onSelect}
-        dropdownItems={dropdownGroup}
-        toggle={toggle}
+        id={`${fieldId}-dropdown`}
+        shouldFocusToggleOnSelect
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
-      />
+        onSelect={onSelect}
+        onOpenChange={() => setOpen(!isOpen)}
+        toggle={dropdownToggle}
+      >
+        {dropdownGroup}
+      </Dropdown>
+
       {helperText && (
         <FormHelperText>
           <HelperText>

package/lib/common/components/ui/SimpleDropdown.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
   DropdownItem,
-  DropdownToggle,
+  MenuToggle,
+  MenuToggleElement,
   Dropdown,
-  DropdownProps,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  DropdownPopperProps,
+} from '@patternfly/react-core';
 import { HostRole } from '../../../common/types/hosts';
 import './SimpleDropdown.css';
 
@@ -16,7 +16,7 @@ type SimpleDropdownProps = {
   setValue: (value?: string) => void;
   isDisabled: boolean;
   idPrefix?: string;
-  menuAppendTo?: DropdownProps['menuAppendTo'];
+  menuAppendTo?: DropdownPopperProps['appendTo'];
 };
 
 export const SimpleDropdown = ({
@@ -36,37 +36,38 @@ export const SimpleDropdown = ({
   ));
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>) => {
       setValue(event?.currentTarget.id);
       setOpen(false);
     },
     [setValue, setOpen],
   );
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
-        className="role-dropdown"
-      >
-        {current || defaultValue}
-      </DropdownToggle>
-    ),
-    [setOpen, current, isDisabled, defaultValue, idPrefix],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
+      className="role-dropdown"
+      ref={toggleRef}
+      variant="plainText"
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={isDisabled}
+      isExpanded={isOpen}
+    >
+      {current || defaultValue}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
+      onOpenChange={() => setOpen(!isOpen)}
       toggle={toggle}
       isOpen={isOpen}
       isPlain
       id={idPrefix ? `${idPrefix}-dropdown-toggle` : undefined}
-      menuAppendTo={menuAppendTo}
-    />
+      popperProps={{ appendTo: menuAppendTo }}
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 };

package/lib/common/config/constants.ts

@@ -5,10 +5,12 @@ import {
   ClusterValidationId,
   DiskRole,
   Event,
+  HostRoleUpdateParams,
   HostValidationId,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { ValidationGroup as ClusterValidationGroup } from '../types/clusters';
 import buildManifest from '@openshift-assisted/ui-lib/package.json';
+import { isInOcm } from '../api/axiosClient';
 
 export const POLLING_INTERVAL = 10 * 1000;
 export const EVENTS_POLLING_INTERVAL = 10 * 1000 * 6;
@@ -33,6 +35,15 @@ export const hostRoles = (t: TFunction): HostRole[] => [
       'ai:Runs application workloads. Connect at least 5 hosts to enable dedicated workers.',
     ),
   },
+  ...(isInOcm
+    ? [
+        {
+          value: 'arbiter' as HostRoleUpdateParams,
+          label: t('ai:Arbiter'),
+          description: t('ai:Prevents split-brain scenarios and maintains quorum.'),
+        },
+      ]
+    : []),
 ];
 
 export const clusterStatusLabels = (t: TFunction): { [key in Cluster['status']]: string } => ({

package/lib/common/config/docs_links.ts

@@ -1,14 +1,24 @@
-const DEFAULT_OPENSHIFT_DOCS_VERSION = 4.15;
+import { isMajorMinorVersionEqualOrGreater } from '../utils';
 
-export const getShortOpenshiftVersion = (ocpVersion?: string) => {
+const LATEST_OPENSHIFT_DOCS_VERSION = '4.18';
+const MIN_OPENSHIFT_DOCS_VERSION = '4.14';
+
+const getDocsOpenshiftVersion = (ocpVersion?: string): string => {
   if (!ocpVersion) {
-    return DEFAULT_OPENSHIFT_DOCS_VERSION;
+    return LATEST_OPENSHIFT_DOCS_VERSION;
+  }
+  if (isMajorMinorVersionEqualOrGreater(MIN_OPENSHIFT_DOCS_VERSION, ocpVersion)) {
+    return MIN_OPENSHIFT_DOCS_VERSION;
   }
-  const versionXY = Number(ocpVersion.split('.').slice(0, 2).join('.'));
-  if (!Number.isFinite(versionXY)) {
-    return DEFAULT_OPENSHIFT_DOCS_VERSION;
+  if (isMajorMinorVersionEqualOrGreater(ocpVersion, LATEST_OPENSHIFT_DOCS_VERSION)) {
+    return LATEST_OPENSHIFT_DOCS_VERSION;
+  }
+
+  const versionParts = ocpVersion.split('.').slice(0, 2).map(Number);
+  if (versionParts.length < 2) {
+    return LATEST_OPENSHIFT_DOCS_VERSION;
   }
-  return versionXY < 4.14 ? 4.14 : versionXY;
+  return `${versionParts[0]}.${versionParts[1]}`;
 };
 
 export const getYearForAssistedInstallerDocumentationLink = () => {
@@ -31,19 +41,19 @@ export const CLUSTER_MANAGER_SITE_LINK = 'https://console.redhat.com/openshift/i
 export const PULL_SECRET_INFO_LINK = CLUSTER_MANAGER_SITE_LINK;
 
 export const getEncryptingDiskDuringInstallationDocsLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/html/installation_configuration/installing-customizing#installation-special-config-encrypt-disk_installing-customizing`;
 
 //Networking page
-export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+export const getOpenShiftNetworkingDocsLink = (ocpVersion?: string) => {
+  const variant = isMajorMinorVersionEqualOrGreater(ocpVersion, '4.18')
+    ? 'user-provisioned-infrastructure'
+    : 'installing-bare-metal';
+  return `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
-  )}/html/installing_on_bare_metal/${
-    getShortOpenshiftVersion(ocpVersion) > 4.17
-      ? 'user-provisioned-infrastructure'
-      : 'installing-bare-metal'
-  }#installation-network-user-infra_installing-bare-metal`;
+  )}/html/installing_on_bare_metal/${variant}#installation-network-user-infra_installing-bare-metal`;
+};
 
 export const SSH_GENERATION_DOC_LINK = 'https://www.redhat.com/sysadmin/configure-ssh-keygen';
 
@@ -52,7 +62,7 @@ export const getOcpConsoleNodesPage = (ocpConsoleUrl: string) =>
   `${ocpConsoleUrl}/k8s/cluster/nodes`;
 
 export const getApproveNodesInClLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/html/installing_on_any_platform/installing-platform-agnostic#installation-approve-csrs_installing-platform-agnostic`;
 
@@ -90,18 +100,20 @@ export const OSC_REQUIREMENTS_LINK =
 
 export const CNV_LINK = 'https://cloud.redhat.com/learn/topics/virtualization/';
 
-export const KMM_LINK =
-  'https://docs.redhat.com/en/documentation/openshift_container_platform/4.12/html/specialized_hardware_and_driver_enablement/kernel-module-management-operator';
+export const getKmmDocsLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/specialized_hardware_and_driver_enablement/kernel-module-management-operator`;
 
 export const ODF_LINK = 'https://www.redhat.com/en/resources/openshift-data-foundation-datasheet';
 
 export const getMceDocsLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/html/architecture/about-the-multicluster-engine-for-kubernetes-operator`;
 
 export const getLvmsDocsLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/html/storage/configuring-persistent-storage#overview-of-lvm-storage-functionality_ways-to-provision-local-storage`;
 
@@ -118,7 +130,7 @@ export const NODE_MAINTENANCE_LINK =
   'https://docs.redhat.com/en/documentation/workload_availability_for_red_hat_openshift/latest/html/remediation_fencing_and_maintenance/node-maintenance-operator';
 
 export const getKubeDeschedulerLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/html/nodes/controlling-pod-placement-onto-nodes-scheduling#descheduler`;
 
@@ -146,37 +158,39 @@ export const OPENSHIFT_AI_LINK =
 export const OSC_LINK = 'https://docs.redhat.com/en/documentation/openshift_sandboxed_containers';
 
 export const getMtuLink = (ocpVersion?: string) =>
-  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/html/networking/changing-cluster-network-mtu#nw-cluster-mtu-change-about_changing-cluster-network-mtu`;
 
 export const AUTHORINO_OPERATOR_LINK = 'https://github.com/Kuadrant/authorino-operator';
 
 export const getLsoLink = (ocpVersion?: string) =>
-  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+  `https://docs.openshift.com/container-platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/storage/persistent_storage/persistent_storage_local/ways-to-provision-local-storage.html`;
 
 export const getNmstateLink = (ocpVersion?: string) =>
-  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+  `https://docs.openshift.com/container-platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/networking/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator.html`;
 
 export const getNodeFeatureDiscoveryLink = (ocpVersion?: string) =>
-  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+  `https://docs.openshift.com/container-platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/hardware_enablement/psap-node-feature-discovery-operator.html`;
 
-export const getNvidiaGpuLink = (ocpVersion?: string) =>
-  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
-    ocpVersion,
-  )}/virt/virtual_machines/advanced_vm_management/virt-configuring-virtual-gpus.html`;
+export const getNvidiaGpuLink = (ocpVersion?: string) => {
+  const version = getDocsOpenshiftVersion(ocpVersion);
+  return isMajorMinorVersionEqualOrGreater(ocpVersion, '4.18')
+    ? `https://docs.redhat.com/en/documentation/openshift_container_platform/${version}/html/virtualization/managing-vms#virt-configuring-virtual-gpus`
+    : `https://docs.openshift.com/container-platform/${version}/virt/virtual_machines/advanced_vm_management/virt-configuring-virtual-gpus.html`;
+};
 
 export const PIPELINES_OPERATOR_LINK =
   'https://docs.openshift.com/pipelines/1.17/install_config/installing-pipelines.html';
 
 export const getServiceMeshLink = (ocpVersion?: string) =>
-  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+  `https://docs.openshift.com/container-platform/${getDocsOpenshiftVersion(
     ocpVersion,
   )}/service_mesh/v1x/preparing-ossm-installation.html`;
 

package/lib/common/index.ts

@@ -6,4 +6,5 @@ export * from './features';
 export * from './reducers';
 export * from './selectors';
 export * from './hooks';
+export * from './utils';
 export { ResourceUIState } from './types/resource-ui-state';

package/lib/common/types/ui-settings.ts

@@ -3,4 +3,5 @@ export type UISettingsValues = {
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
   bundlesSelected?: string[];
+  isAssistedMigration?: boolean;
 };

package/lib/common/utils.ts

@@ -111,3 +111,33 @@ export const getMajorMinorVersion = (version = '') => {
   const match = /[0-9].[0-9][0-9]?/g.exec(version);
   return match?.[0] || '';
 };
+
+// Converts an Openshift version to a comparable integer
+const getComparableVersionInt = (version: string): number => {
+  const majorMinorParts = version.split('.').slice(0, 2).map(Number);
+  if (majorMinorParts.length < 2 || majorMinorParts.some(isNaN)) {
+    // If the version doesn't have the required format, returning 0 makes it be considered
+    // older than any other version
+    return 0;
+  }
+
+  const major = majorMinorParts[0];
+  const minor = majorMinorParts[1];
+
+  // Assumes minor versions will not go past 999
+  return major * 1000 + minor;
+};
+
+/**
+ * Handles version comparison for major and minor parts only.
+ *
+ * @param checkVersion the version we want to know about
+ * @param toVersion the version we want to test against
+ * @returns true if "checkVersion" is equal or greater than "toVersion" (major and minor only)
+ */
+export const isMajorMinorVersionEqualOrGreater = (checkVersion = '', toVersion: string) => {
+  const checkVersionNum = getComparableVersionInt(checkVersion);
+  const toVersionNum = getComparableVersionInt(toVersion);
+
+  return checkVersionNum >= toVersionNum;
+};

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

@@ -1,18 +1,26 @@
 import React from 'react';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId, PopoverIcon } from '../../../common';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
-import OcmSNODisclaimer from './OcmSNODisclaimer';
+import OcmTNADisclaimer from './OcmTNADisclaimer';
 import toNumber from 'lodash-es/toNumber';
+import OcmSNODisclaimer from './OcmSNODisclaimer';
 
 const INPUT_NAME = 'controlPlaneCount';
 const fieldId = getFieldId(INPUT_NAME, 'input');
-const DEFAULT_VALUE = 3;
+export const DEFAULT_VALUE_CPN = 3;
 
 export const ControlPlaneNodesLabel = () => {
   return (
@@ -40,13 +48,17 @@ interface ControlPlaneNodesDropdownProps {
   featureSupportLevelData?: NewFeatureSupportLevelMap | null;
 }
 
-const isDropdownItemEnabled = (
+export const isCPNDropdownItemEnabled = (
   controlPlaneNodeCount: number,
   isNonStandardControlPlaneEnabled: boolean,
+  isTnaEnabled: boolean,
 ): boolean => {
   if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
     return isNonStandardControlPlaneEnabled;
   }
+  if (controlPlaneNodeCount === 2) {
+    return isTnaEnabled;
+  }
   return true;
 };
 
@@ -71,7 +83,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   );
 
   const disabledReason =
-    'This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer, CPU architecture is x86_64 and no external platform integration is selected.';
+    'This option is not available with the current configurations. Make sure that OpenShift version is 4.19 or newer and no external platform integration is selected.';
 
   const isNonStandardControlPlaneEnabled = newFeatureSupportLevelContext.isFeatureSupported(
     'NON_STANDARD_HA_CONTROL_PLANE',
@@ -80,25 +92,35 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
 
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: '1 (Single Node OpenShift)' },
+    { value: 2, label: '2 (Two-Nodes Arbiter)' },
     { value: 3, label: '3 (highly available cluster)' },
     { value: 4, label: '4 (highly available cluster+)' },
     { value: 5, label: '5 (highly available cluster++)' },
   ];
 
+  const isTnaEnabled = newFeatureSupportLevelContext.isFeatureSupported(
+    'TNA',
+    featureSupportLevelData ?? undefined,
+  );
+
   React.useEffect(() => {
     if (!field.value) {
-      setValue(DEFAULT_VALUE);
+      setValue(DEFAULT_VALUE_CPN);
     }
   }, [field.value, setValue]);
 
-  const onSelect = (event?: React.SyntheticEvent<HTMLDivElement>): void => {
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
     const selectedValue = event?.currentTarget.id as string;
     setValue(toNumber(selectedValue));
     setOpen(false);
   };
 
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNonStandardControlPlaneEnabled);
+    const isItemEnabled = isCPNDropdownItemEnabled(
+      value,
+      isNonStandardControlPlaneEnabled,
+      isTnaEnabled,
+    );
     return (
       <DropdownItem key={value} id={value.toString()} isAriaDisabled={!isItemEnabled}>
         <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
@@ -108,10 +130,16 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
     );
   });
 
-  const toggle = (
-    <DropdownToggle onToggle={(_, val) => setOpen(val)}>
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v5-u-w-100"
+    >
       {options.find((opt) => opt.value === field.value)?.label || 'Select'}
-    </DropdownToggle>
+    </MenuToggle>
   );
 
   return (
@@ -122,12 +150,14 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
         fieldId={fieldId}
       >
         <Dropdown
-          id={fieldId}
+          id={`${fieldId}-dropdown`}
           isOpen={isOpen}
           toggle={toggle}
-          dropdownItems={dropdownItems}
+          onOpenChange={() => setOpen(!isOpen)}
           onSelect={onSelect}
-        />
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
       </FormGroup>
       {field.value === 1 && (
         <OcmSNODisclaimer
@@ -136,6 +166,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
           snoExpansionSupported={snoExpansion}
         />
       )}
+      {field.value === 2 && <OcmTNADisclaimer />}
     </>
   );
 };