@openshift-assisted/ui-lib 2.41.2 → 2.42.0

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,14 +1,22 @@
 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');
@@ -43,10 +51,14 @@ interface ControlPlaneNodesDropdownProps {
 const isDropdownItemEnabled = (
   controlPlaneNodeCount: number,
   isNonStandardControlPlaneEnabled: boolean,
+  isTnaEnabled: boolean,
 ): boolean => {
   if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
     return isNonStandardControlPlaneEnabled;
   }
+  if (controlPlaneNodeCount === 2) {
+    return isTnaEnabled;
+  }
   return true;
 };
 
@@ -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);
     }
   }, [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 = isDropdownItemEnabled(
+      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 />}
     </>
   );
 };

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

@@ -1,7 +1,14 @@
 import React from 'react';
-import { FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  FormGroup,
+  Split,
+  SplitItem,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
   architectureData,
@@ -119,7 +126,7 @@ const CpuArchitectureDropdown = ({
   ]);
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>): void => {
       const selectedCpuArch = event?.currentTarget.id as SupportedCpuArchitecture;
       setValue(selectedCpuArch);
       setOpen(false);
@@ -146,31 +153,30 @@ const CpuArchitectureDropdown = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cpuArchitectures, openshiftVersion, selectedCpuArchitecture]);
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val: boolean) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {currentCpuArch}
-      </DropdownToggle>
-    ),
-    [setOpen, currentCpuArch],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v5-u-w-100"
+    >
+      {currentCpuArch}
+    </MenuToggle>
   );
 
   return (
     <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={'CPU architecture'}>
       <Dropdown
         {...field}
-        id={fieldId}
-        dropdownItems={enabledItems}
+        id={`${fieldId}-dropdown`}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
         onSelect={onSelect}
-      />
+        onOpenChange={() => setOpen(!isOpen)}
+      >
+        {enabledItems}
+      </Dropdown>
     </FormGroup>
   );
 };

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

@@ -1,12 +1,13 @@
 import React from 'react';
-import { FormGroup } from '@patternfly/react-core';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
 import {
   DropdownItem,
-  DropdownToggle,
+  Divider,
   Dropdown,
-  DropdownSeparator,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
@@ -47,74 +48,74 @@ export const DiscoveryImageTypeDropdown = ({
       key="full-iso"
       id="full-iso"
       description={'Use when configuring custom networking for easier debugging'}
+      value={discoveryImageTypes['full-iso']}
     >
       {discoveryImageTypes['full-iso']}
     </DropdownItem>,
-    <DropdownSeparator key="separator1" />,
-    <DropdownItem
-      key="minimal-iso"
-      id="minimal-iso"
-      description={'Use when provisioning with default networking options'}
-      tooltip={
+    <Divider component="li" key="separator1" />,
+    <Tooltip
+      key="minimal-iso-tooltip"
+      content={
         isMinimalISODisabled ? (
           <p>{'This provisioning type is not supported when using s390x architecture'}</p>
         ) : undefined
       }
-      isAriaDisabled={!!isMinimalISODisabled}
     >
-      {discoveryImageTypes['minimal-iso']}
-    </DropdownItem>,
-    <DropdownSeparator key="separator2" />,
+      <DropdownItem
+        key="minimal-iso"
+        id="minimal-iso"
+        description={'Use when provisioning with default networking options'}
+        isAriaDisabled={!!isMinimalISODisabled}
+        value={discoveryImageTypes['minimal-iso']}
+      >
+        {discoveryImageTypes['minimal-iso']}
+      </DropdownItem>
+    </Tooltip>,
+    <Divider component="li" key="separator2" />,
     <DropdownItem
       key="discovery-image-ipxe"
       id="discovery-image-ipxe"
       description={'Use when your platform does not support booting from ISO'}
+      value={discoveryImageTypes['discovery-image-ipxe']}
     >
       {discoveryImageTypes['discovery-image-ipxe']}
     </DropdownItem>,
   ];
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const imageTypeSelection = event?.currentTarget.id as DiscoveryImageType;
-      const currentValue = imageTypeSelection
-        ? discoveryImageTypes[imageTypeSelection]
-        : defaultValue;
-      setCurrent(currentValue ? currentValue : '');
-      setValue(imageTypeSelection);
-      setOpen(false);
-      onChange(imageTypeSelection === 'discovery-image-ipxe');
-    },
-    [setCurrent, setOpen, defaultValue, setValue, onChange],
-  );
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => {
+    const imageTypeSelection = value as string;
+    setCurrent(imageTypeSelection ? imageTypeSelection : '');
+    setValue(event?.currentTarget.id as DiscoveryImageType);
+    setOpen(false);
+    onChange(imageTypeSelection === 'discovery-image-ipxe');
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-        isDisabled={isDisabled}
-      >
-        {current || value}
-      </DropdownToggle>
-    ),
-    [setOpen, current, value, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+    >
+      {current || value}
+    </MenuToggle>
   );
 
   return (
     <FormGroup fieldId={fieldId} label={'Provisioning type'}>
       <Dropdown
         {...field}
-        name={name}
-        id={fieldId}
-        dropdownItems={dropdownItems}
+        id={`${fieldId}-dropdown`}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
         onSelect={onSelect}
-      />
+        onOpenChange={() => setOpen(!isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </FormGroup>
   );
 };

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

@@ -5,11 +5,13 @@ import {
   HelperText,
   HelperTextItem,
   Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { useField, useFormikContext } from 'formik';
 import { ClusterDetailsValues, getFieldId } from '../../../common';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { OcmCheckboxField, OcmInputField } from '../ui/OcmFormFields';
 import { ManagedDomain } from '@openshift-assisted/types/assisted-installer-service';
 import { clusterExistsReason } from '../featureSupportLevels/featureStateUtils';
@@ -62,25 +64,25 @@ export const OcmBaseDomainField = ({
     ));
   }, [managedDomains]);
 
-  const dropdownToggle = React.useMemo(() => {
+  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => {
     const selectedDomain = managedDomains.find((d) => d.domain === value);
     return (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
+      <MenuToggle
+        ref={toggleRef}
+        onClick={() => setOpen(!isOpen)}
+        isExpanded={isOpen}
         className="pf-v5-u-w-100"
       >
         {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'}
-      </DropdownToggle>
+      </MenuToggle>
     );
-  }, [managedDomains, value]);
+  };
 
   const toggleRedHatDnsService = (checked: boolean) =>
     setValue((checked && managedDomains.map((d) => d.domain)[0]) || '');
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>): void => {
       const selectedDomain = event?.currentTarget.id || '';
       setValue(selectedDomain);
       setOpen(false);
@@ -111,11 +113,12 @@ export const OcmBaseDomainField = ({
         {useRedHatDnsService ? (
           <Dropdown
             toggle={dropdownToggle}
-            dropdownItems={dropdownItems}
             isOpen={isOpen}
             onSelect={onSelect}
-            className="pf-v5-u-w-100"
-          />
+            onOpenChange={() => setOpen(!isOpen)}
+          >
+            {dropdownItems}
+          </Dropdown>
         ) : (
           <OcmInputField
             name={INPUT_NAME}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Alert, AlertVariant, List, ListItem } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+const OcmTNADisclaimer = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Alert
+      variant={AlertVariant.info}
+      title={t('ai:Requirements for Two Node control plane OpenShift')}
+      isInline
+    >
+      <List>
+        <ListItem>
+          {t('ai:Two nodes control plane OpenShift must include an additional arbiter node.')}
+        </ListItem>
+      </List>
+    </Alert>
+  );
+};
+
+export default OcmTNADisclaimer;