Disable items from the dropdown depending OCP version and CPU archite…

…cture

libs/locales/lib/en/translation.json

@@ -836,6 +836,7 @@
   "ai:This IP was allocated by the DHCP server.": "This IP was allocated by the DHCP server.",
   "ai:This name will replace the original discovered hostname.": "This name will replace the original discovered hostname.",
   "ai:This option is not available for Nutanix platform": "This option is not available for Nutanix platform",
+  "ai:This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer and CPU architecture is x86_64. ": "This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer and CPU architecture is x86_64. ",
   "ai:This option is not editable after the draft cluster is created": "This option is not editable after the draft cluster is created",
   "ai:this script.": "this script.",
   "ai:This stage may take a while to finish. To view detailed information, click the events log link below.": "This stage might take a while to finish. To view detailed information, click the events log link.",

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -52,7 +52,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   cpuArchitectures,
 }) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { name, baseDnsDomain } = values;
+  const { name, baseDnsDomain, cpuArchitecture, openshiftVersion } = values;
 
   const nameInputRef = React.useRef<HTMLInputElement>();
   React.useEffect(() => {
@@ -110,7 +110,12 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           }}
         />
       )}
-      <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
+      <ControlPlaneNodesDropdown
+        isNutanix={isNutanix}
+        isDisabled={isEditFlow}
+        cpuArchitecture={cpuArchitecture}
+        openshiftVersion={openshiftVersion}
+      />
       {!isNutanix && (
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}

libs/ui-lib/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -3,41 +3,79 @@ import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@pat
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
 import { useField } from 'formik';
+import toNumber from 'lodash-es/toNumber';
+import { TFunction } from 'react-i18next';
 
 interface ControlPlaneNodesOption {
-  value: string;
+  value: number;
   label: string;
 }
 
-const isDropdownItemEnabled = (controlPlaneNodeCount: string, isNutanix?: boolean): boolean => {
-  return (controlPlaneNodeCount === '1' && !isNutanix) || controlPlaneNodeCount !== '1';
+const isDropdownItemEnabled = (
+  controlPlaneNodeCount: number,
+  isNutanix?: boolean,
+  openshiftVersion?: string,
+  cpuArch?: string,
+): boolean => {
+  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
+    return parseFloat(openshiftVersion || '') >= 4.18 && cpuArch === 'x86_64';
+  } else if (controlPlaneNodeCount === 1) {
+    return !isNutanix;
+  }
+  return true;
 };
 
+const getDisabledReason = (
+  controlPlaneNodeCount: number,
+  t: TFunction<string, undefined>,
+): string => {
+  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
+    return t(
+      'ai:This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer and CPU architecture is x86_64. ',
+    );
+  } else if (controlPlaneNodeCount === 1) {
+    return t('ai:This option is not available for Nutanix platform');
+  } else {
+    return '';
+  }
+};
+
+interface ControlPlaneNodesDropdownProps {
+  isDisabled?: boolean;
+  isNutanix?: boolean;
+  cpuArchitecture?: string;
+  openshiftVersion?: string;
+}
+
 const ControlPlaneNodesDropdown = ({
   isDisabled = false,
   isNutanix,
-}: {
-  isDisabled?: boolean;
-  isNutanix?: boolean;
-}) => {
+  cpuArchitecture,
+  openshiftVersion,
+}: ControlPlaneNodesDropdownProps) => {
   const { t } = useTranslation();
-  const [{ name, value }, , { setValue }] = useField<string>('controlPlaneAgents');
-  const [current, setCurrent] = React.useState<string>('3');
+  const [{ name, value }, , { setValue }] = useField<number>('controlPlaneAgents');
+  const [current, setCurrent] = React.useState<number>(3);
 
   const options: ControlPlaneNodesOption[] = [
-    { value: '1', label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
-    { value: '3', label: t('ai:3 (highly available cluster)') },
-    { value: '4', label: t('ai:4 (highly available cluster+)') },
-    { value: '5', label: t('ai:5 (highly available cluster++)') },
+    { value: 1, label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
+    { value: 3, label: t('ai:3 (highly available cluster)') },
+    { value: 4, label: t('ai:4 (highly available cluster+)') },
+    { value: 5, label: t('ai:5 (highly available cluster++)') },
   ];
 
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNutanix);
-    const disabledReason = t('ai:This option is not available for Nutanix platform');
+    const isItemEnabled = isDropdownItemEnabled(
+      value,
+      isNutanix,
+      openshiftVersion,
+      cpuArchitecture,
+    );
+    const disabledReason = getDisabledReason(value, t);
     return (
       <DropdownItem
         key={value}
-        id={value}
+        id={value.toString()}
         isAriaDisabled={!isItemEnabled}
         selected={current === value}
       >
@@ -53,8 +91,8 @@ const ControlPlaneNodesDropdown = ({
 
   const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
     const val = e?.currentTarget.id as string;
-    setValue(val);
-    setCurrent(val);
+    setValue(toNumber(val));
+    setCurrent(toNumber(val));
     setControlPlanelOpen(false);
   };