@openshift-assisted/ui-lib 2.38.4 → 2.39.0

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

@@ -1,4 +1,12 @@
-import { Grid, GridItem } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+  useWizardContext,
+  useWizardFooter,
+  WizardFooter,
+} from '@patternfly/react-core';
 import * as React from 'react';
 import { canNextFromReviewStep } from './wizardTransition';
 import {
@@ -17,9 +25,6 @@ import {
   HostsValidations,
   useAlerts,
 } from '../../../common';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
-import ClusterDeploymentWizardFooter from './ClusterDeploymentWizardFooter';
-import ClusterDeploymentWizardStep from './ClusterDeploymentWizardStep';
 import { getSelectedVersion, getAICluster, getClusterDeploymentCpuArchitecture } from '../helpers';
 import { isAgentOfCluster } from './helpers';
 import { wizardStepNames } from './constants';
@@ -29,31 +34,31 @@ import {
   allClusterWizardSoftValidationIds,
 } from './wizardTransition';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { ValidationSection } from './components/ValidationSection';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
   agentClusterInstall: AgentClusterInstallK8sResource;
   agents: AgentK8sResource[];
-  onClose: VoidFunction;
   // eslint-disable-next-line
   onFinish: () => Promise<any>;
   clusterImages: ClusterImageSetK8sResource[];
   infraEnv?: InfraEnvK8sResource;
 };
 
-const ClusterDeploymentReviewStep: React.FC<ClusterDeploymentReviewStepProps> = ({
+const ClusterDeploymentReviewStep = ({
   agentClusterInstall,
   agents,
-  onClose,
   onFinish,
   clusterDeployment,
   clusterImages,
   infraEnv,
-}) => {
+}: ClusterDeploymentReviewStepProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
+  const { activeStep, goToPrevStep, goToStepByName, close } = useWizardContext();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
   const [isSubmitting, setSubmitting] = React.useState(false);
-  const onBack = () => setCurrentStepId('networking');
   const cdName = clusterDeployment.metadata?.name;
   const cdNamespace = clusterDeployment.metadata?.namespace;
   const cpuArchitecture = getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv);
@@ -79,18 +84,17 @@ const ClusterDeploymentReviewStep: React.FC<ClusterDeploymentReviewStepProps> =
   };
 
   const footer = (
-    <ClusterDeploymentWizardFooter
-      agentClusterInstall={agentClusterInstall}
-      agents={clusterAgents}
-      isSubmitting={isSubmitting}
-      isNextDisabled={isSubmitting || !canContinue}
-      onBack={onBack}
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    <WizardFooter
+      activeStep={activeStep}
       onNext={onNext}
-      onCancel={onClose}
+      isNextDisabled={isSubmitting || !canContinue || !!syncError}
       nextButtonText={t('ai:Install cluster')}
+      nextButtonProps={{ isLoading: isSubmitting }}
+      onBack={goToPrevStep}
+      onClose={close}
     />
   );
+  useWizardFooter(footer);
 
   const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall);
 
@@ -100,75 +104,82 @@ const ClusterDeploymentReviewStep: React.FC<ClusterDeploymentReviewStepProps> =
   );
 
   return (
-    <ClusterDeploymentWizardStep footer={footer}>
-      <Grid hasGutter>
-        <GridItem>
-          <ClusterWizardStepHeader>Review and create</ClusterWizardStepHeader>
-        </GridItem>
-        <GridItem>
-          <DetailList>
-            <DetailItem
-              title={t('ai:Cluster address')}
-              value={`${clusterDeployment.metadata?.name || ''}.${
-                clusterDeployment.spec?.baseDomain || ''
-              }`}
-              testId="cluster-address"
-            />
-            <DetailItem
-              title={t('ai:OpenShift version')}
-              value={openShiftVersion}
-              testId="openshift-version"
-            />
-            <DetailItem
-              title={t('ai:CPU architecture')}
-              value={cpuArchitecture}
-              testId="cpu-architecture"
-            />
-            <DetailItem
-              title={t('ai:API IP')}
-              value={agentClusterInstall.spec?.apiVIP}
-              testId="api-vip"
-            />
-            <DetailItem
-              title={t('ai:Ingress IP')}
-              value={agentClusterInstall.spec?.ingressVIP}
-              testId="ingress-vip"
-            />
-            <DetailItem
-              title={t('ai:Cluster summary')}
-              testId="cluster-summary"
-              value={<ReviewHostsInventory hosts={cluster.hosts} />}
-            />
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>Review and create</ClusterWizardStepHeader>
+      </GridItem>
+      <GridItem>
+        <DetailList>
+          <DetailItem
+            title={t('ai:Cluster address')}
+            value={`${clusterDeployment.metadata?.name || ''}.${
+              clusterDeployment.spec?.baseDomain || ''
+            }`}
+            testId="cluster-address"
+          />
+          <DetailItem
+            title={t('ai:OpenShift version')}
+            value={openShiftVersion}
+            testId="openshift-version"
+          />
+          <DetailItem
+            title={t('ai:CPU architecture')}
+            value={cpuArchitecture}
+            testId="cpu-architecture"
+          />
+          <DetailItem
+            title={t('ai:API IP')}
+            value={agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP}
+            testId="api-vip"
+          />
+          <DetailItem
+            title={t('ai:Ingress IP')}
+            value={agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP}
+            testId="ingress-vip"
+          />
+          <DetailItem
+            title={t('ai:Cluster summary')}
+            testId="cluster-summary"
+            value={<ReviewHostsInventory hosts={cluster.hosts} />}
+          />
 
-            <DetailItem
-              title={t('ai:Cluster validations')}
-              value={
-                <ClusterValidations<ClusterWizardStepsType>
-                  validationsInfo={cluster.validationsInfo}
-                  setCurrentStepId={setCurrentStepId}
-                  wizardStepNames={wizardStepNames(t)}
-                  wizardStepsValidationsMap={wizardStepsValidationsMap}
-                />
-              }
-              testId="cluster-validations"
-            />
-            <DetailItem
-              title={t('ai:Host validations')}
-              value={
-                <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
-                  hosts={cluster.hosts}
-                  setCurrentStepId={setCurrentStepId}
-                  wizardStepNames={wizardStepNames(t)}
-                  allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
-                  wizardStepsValidationsMap={wizardStepsValidationsMap}
-                />
-              }
-              testId="host-validations"
-            />
-          </DetailList>
+          <DetailItem
+            title={t('ai:Cluster validations')}
+            value={
+              <ClusterValidations<ClusterWizardStepsType>
+                validationsInfo={cluster.validationsInfo}
+                setCurrentStepId={goToStepByName}
+                wizardStepNames={wizardStepNames(t)}
+                wizardStepsValidationsMap={wizardStepsValidationsMap}
+              />
+            }
+            testId="cluster-validations"
+          />
+          <DetailItem
+            title={t('ai:Host validations')}
+            value={
+              <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
+                hosts={cluster.hosts}
+                setCurrentStepId={goToStepByName}
+                wizardStepNames={wizardStepNames(t)}
+                allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
+                wizardStepsValidationsMap={wizardStepsValidationsMap}
+              />
+            }
+            testId="host-validations"
+          />
+        </DetailList>
+      </GridItem>
+      {syncError && (
+        <GridItem>
+          <ValidationSection currentStepId={'review'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
         </GridItem>
-      </Grid>
-    </ClusterDeploymentWizardStep>
+      )}
+    </Grid>
   );
 };
 

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

@@ -1,18 +1,20 @@
 import * as React from 'react';
-import classNames from 'classnames';
-import { Grid, GridItem } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { Grid, GridItem, Wizard, WizardStep } from '@patternfly/react-core';
 import { AlertsContextProvider, LoadingState } from '../../../common';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
 import ClusterDeploymentDetailsStep from './ClusterDeploymentDetailsStep';
 import ClusterDeploymentNetworkingStep from './ClusterDeploymentNetworkingStep';
 import ClusterDeploymentHostSelectionStep from './ClusterDeploymentHostSelectionStep';
-import { ClusterDeploymentWizardProps, ClusterDeploymentWizardStepsType } from './types';
+import { ClusterDeploymentWizardProps } from './types';
 import ClusterDeploymentHostsDiscoveryStep from './ClusterDeploymentHostsDiscoveryStep';
 import { ACMFeatureSupportLevelProvider } from '../featureSupportLevels';
 import ClusterDeploymentReviewStep from './ClusterDeploymentReviewStep';
 import { YamlPreview, useYamlPreview } from '../YamlPreview';
+import { wizardStepNames } from './constants';
+import { ClusterDeploymentWizardContextProvider } from './ClusterDeploymentWizardContext';
+import { isCIMFlow } from './helpers';
 
-const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
+export const ClusterDeploymentWizard = ({
   className,
   onSaveDetails,
   onSaveNetworking,
@@ -25,6 +27,7 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
+  bareMetalHosts,
   clusterImages,
   aiConfigMap,
   infraEnv,
@@ -37,13 +40,10 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
   onSaveISOParams,
   onCreateBMH,
   isNutanix,
+  onChangeBMHHostname,
   ...rest
-}) => {
-  const [currentStepId, setCurrentStepId] = React.useState<ClusterDeploymentWizardStepsType>(
-    initialStep || 'cluster-details',
-  );
-
-  const isAIFlow = infraEnv;
+}: ClusterDeploymentWizardProps) => {
+  const { t } = useTranslation();
 
   const { code, loadingResources } = useYamlPreview({
     agentClusterInstall,
@@ -53,118 +53,110 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
     fetchKlusterletAddonConfig,
   });
 
-  const renderCurrentStep = () => {
-    const stepId: ClusterDeploymentWizardStepsType = !clusterDeployment
-      ? 'cluster-details'
-      : currentStepId;
-
-    switch (stepId) {
-      case 'hosts-selection':
-        if (agentClusterInstall?.metadata?.name) {
-          return (
-            <ClusterDeploymentHostSelectionStep
-              clusterDeployment={clusterDeployment}
-              agentClusterInstall={agentClusterInstall}
-              onClose={onClose}
-              onSaveHostsSelection={onSaveHostsSelection}
-              agents={agents}
-              aiConfigMap={aiConfigMap}
-              onEditRole={hostActions.onEditRole}
-              onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
-              isNutanix={isNutanix}
-            />
-          );
-        }
-        return <LoadingState />;
-      case 'hosts-discovery':
-        if (isAIFlow) {
-          return onSaveISOParams && onCreateBMH ? (
-            <ClusterDeploymentHostsDiscoveryStep
-              clusterDeployment={clusterDeployment}
-              agentClusterInstall={agentClusterInstall}
-              agents={agents}
-              bareMetalHosts={[] /* TODO(mlibra) */}
-              aiConfigMap={aiConfigMap}
-              infraEnv={infraEnv}
-              fetchSecret={fetchSecret}
-              onClose={onClose}
-              onChangeBMHHostname={(bmh, _hostname) => {
-                // console.log('onChangeBMHHostname is not implemented: ', hostname);
-                return Promise.resolve(bmh);
-              }}
-              onEditRole={hostActions.onEditRole}
-              onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
-              onDeleteHost={hostActions.onDeleteHost}
-              onSaveISOParams={onSaveISOParams}
-              onCreateBMH={onCreateBMH}
-              {...rest}
-            />
-          ) : (
-            <LoadingState />
-          );
-        }
-        return <LoadingState />;
-      case 'networking':
-        return (
-          <ClusterDeploymentNetworkingStep
-            clusterDeployment={clusterDeployment}
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            onSaveNetworking={onSaveNetworking}
-            onClose={onClose}
-            onEditHost={hostActions.onEditHost}
-            onEditRole={hostActions.onEditRole}
-            fetchInfraEnv={fetchInfraEnv}
-            isPreviewOpen={isPreviewOpen}
-            onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
-            isNutanix={isNutanix}
-          />
-        );
-      case 'review':
-        return (
-          <ClusterDeploymentReviewStep
-            onFinish={onFinish}
-            clusterDeployment={clusterDeployment}
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            onClose={onClose}
-            clusterImages={clusterImages}
-            infraEnv={infraEnv}
-          />
-        );
-      case 'cluster-details':
-      default:
-        return (
-          <ClusterDeploymentDetailsStep
-            clusterImages={clusterImages}
-            usedClusterNames={usedClusterNames}
-            clusterDeployment={clusterDeployment}
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            onSaveDetails={onSaveDetails}
-            onClose={onClose}
-            isPreviewOpen={isPreviewOpen}
-            infraEnv={infraEnv}
-            isNutanix={isNutanix}
-          />
-        );
-    }
-  };
+  // if initialStep is set, it is either 'host-selection' or 'host-discovery', both at index 4
+  // if initialStep is not set, start at 'cluster-details' which is at index 2
+  const startIndex = initialStep ? 4 : 2;
+  const stepNames = wizardStepNames(t);
+  const isAIFlow = !!infraEnv;
 
   return (
     <Grid style={{ height: '100%' }}>
       <GridItem span={isPreviewOpen ? 7 : 12}>
         <AlertsContextProvider>
           <ACMFeatureSupportLevelProvider clusterImages={clusterImages} isEditClusterFlow={true}>
-            <ClusterDeploymentWizardContext.Provider
-              value={{
-                currentStepId,
-                setCurrentStepId,
-                clusterDeployment /* Hotfix: agentClusterInstall, agents */,
-              }}
-            >
-              <div className={classNames('pf-v5-c-wizard', className)}>{renderCurrentStep()}</div>
-            </ClusterDeploymentWizardContext.Provider>
+            <ClusterDeploymentWizardContextProvider agentClusterInstall={agentClusterInstall}>
+              <Wizard
+                isVisitRequired
+                startIndex={startIndex}
+                className={className}
+                onClose={onClose}
+              >
+                <WizardStep
+                  name={stepNames['installation-type']}
+                  id={'installation-type'}
+                  isDisabled
+                />
+                <WizardStep name={stepNames['cluster-details']} id={'cluster-details'}>
+                  <ClusterDeploymentDetailsStep
+                    clusterImages={clusterImages}
+                    usedClusterNames={usedClusterNames}
+                    clusterDeployment={clusterDeployment}
+                    agentClusterInstall={agentClusterInstall}
+                    agents={agents}
+                    onSaveDetails={onSaveDetails}
+                    isPreviewOpen={isPreviewOpen}
+                    infraEnv={infraEnv}
+                    isNutanix={isNutanix}
+                  />
+                </WizardStep>
+                <WizardStep name={stepNames['automation']} id={'automation'} isDisabled />
+                {isCIMFlow(clusterDeployment) ? (
+                  <WizardStep name={stepNames['hosts-selection']} id={'host-selection'}>
+                    {agentClusterInstall?.metadata?.name ? (
+                      <ClusterDeploymentHostSelectionStep
+                        clusterDeployment={clusterDeployment}
+                        agentClusterInstall={agentClusterInstall}
+                        onSaveHostsSelection={onSaveHostsSelection}
+                        agents={agents}
+                        aiConfigMap={aiConfigMap}
+                        onEditRole={hostActions.onEditRole}
+                        onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
+                        isNutanix={isNutanix}
+                      />
+                    ) : (
+                      <LoadingState />
+                    )}
+                  </WizardStep>
+                ) : (
+                  <WizardStep name={stepNames['hosts-discovery']} id={'host-discovery'}>
+                    {isAIFlow && onSaveISOParams && onCreateBMH ? (
+                      <ClusterDeploymentHostsDiscoveryStep
+                        clusterDeployment={clusterDeployment}
+                        agentClusterInstall={agentClusterInstall}
+                        agents={agents}
+                        bareMetalHosts={bareMetalHosts}
+                        aiConfigMap={aiConfigMap}
+                        infraEnv={infraEnv}
+                        fetchSecret={fetchSecret}
+                        onChangeBMHHostname={onChangeBMHHostname}
+                        onEditRole={hostActions.onEditRole}
+                        onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
+                        onDeleteHost={hostActions.onDeleteHost}
+                        onSaveISOParams={onSaveISOParams}
+                        onCreateBMH={onCreateBMH}
+                        {...rest}
+                      />
+                    ) : (
+                      <LoadingState />
+                    )}
+                  </WizardStep>
+                )}
+                <WizardStep name={stepNames['networking']} id={'networking'}>
+                  <ClusterDeploymentNetworkingStep
+                    clusterDeployment={clusterDeployment}
+                    agentClusterInstall={agentClusterInstall}
+                    agents={agents}
+                    onSaveNetworking={onSaveNetworking}
+                    onEditHost={hostActions.onEditHost}
+                    onEditRole={hostActions.onEditRole}
+                    fetchInfraEnv={fetchInfraEnv}
+                    isPreviewOpen={isPreviewOpen}
+                    onSetInstallationDiskId={hostActions.onSetInstallationDiskId}
+                    isNutanix={isNutanix}
+                  />
+                </WizardStep>
+                <WizardStep name={stepNames['review']} id={'review'}>
+                  <ClusterDeploymentReviewStep
+                    onFinish={onFinish}
+                    clusterDeployment={clusterDeployment}
+                    agentClusterInstall={agentClusterInstall}
+                    agents={agents}
+                    clusterImages={clusterImages}
+                    infraEnv={infraEnv}
+                  />
+                </WizardStep>
+              </Wizard>
+            </ClusterDeploymentWizardContextProvider>
           </ACMFeatureSupportLevelProvider>
         </AlertsContextProvider>
       </GridItem>
@@ -178,5 +170,3 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
     </Grid>
   );
 };
-
-export default ClusterDeploymentWizard;

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

@@ -1,20 +1,33 @@
 import React from 'react';
-import { ClusterDeploymentK8sResource } from '../../types';
-import { ClusterDeploymentWizardStepsType } from './types';
+import { AgentClusterInstallK8sResource } from '../../types';
 
 type ClusterDeploymentWizardContextType = {
-  currentStepId: ClusterDeploymentWizardStepsType;
-  setCurrentStepId: (stepId: ClusterDeploymentWizardStepsType) => void;
-  clusterDeployment?: ClusterDeploymentK8sResource;
+  syncError?: string;
 };
 
-const ClusterDeploymentWizardContext = React.createContext<ClusterDeploymentWizardContextType>({
-  currentStepId: 'cluster-details',
-  setCurrentStepId: () => {
-    // console.error(
-    //   'Tried to use ClusterDeploymentWizardContext but there was no provider rendered.',
-    // );
-  },
-});
+export const ClusterDeploymentWizardContext =
+  React.createContext<ClusterDeploymentWizardContextType>({
+    syncError: undefined,
+  });
 
-export default ClusterDeploymentWizardContext;
+export const ClusterDeploymentWizardContextProvider = ({
+  children,
+  agentClusterInstall,
+}: {
+  children: React.ReactNode;
+  agentClusterInstall?: AgentClusterInstallK8sResource;
+}) => {
+  const syncError = React.useMemo(
+    () =>
+      agentClusterInstall?.status?.conditions?.find(
+        (c) => c.type === 'SpecSynced' && c.status === 'False',
+      )?.message,
+    [agentClusterInstall?.status?.conditions],
+  );
+
+  return (
+    <ClusterDeploymentWizardContext.Provider value={{ syncError }}>
+      {children}
+    </ClusterDeploymentWizardContext.Provider>
+  );
+};

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

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { Alert, AlertVariant, FlexItem, Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
+import { OpenShiftVersionDropdown, OpenShiftVersionModal } from '../../../common';
 import { StaticTextField } from '../../../common/components/ui/StaticTextField';
-import OpenShiftVersionSelect from '../../../common/components/clusterConfiguration/OpenShiftVersionSelect';
 import { PullSecret } from '../../../common/components/clusters';
-import { OpenshiftVersionOptionType } from '../../../common/types';
+import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../common/types';
 import {
   InputField,
   RichInputField,
@@ -14,15 +14,17 @@ import {
 import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import { getNetworkType } from '../helpers';
 import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
+
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
+  allVersions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
-  cpuArchitectures?: string[];
+  cpuArchitectures?: SupportedCpuArchitecture[];
+  allowHighlyAvailable?: boolean;
 };
 
 export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string }> = ({
@@ -46,13 +48,40 @@ export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string
 export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> = ({
   isEditFlow,
   versions,
+  allVersions,
   forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
   cpuArchitectures,
+  allowHighlyAvailable,
 }) => {
-  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const { values } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain } = values;
+  const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
+
+  const selectOptions = React.useMemo(
+    () =>
+      versions.map((version) => ({
+        label: version.label,
+        value: version.value,
+      })),
+    [versions],
+  );
+
+  const additionalSelectOptions = React.useMemo(() => {
+    if (
+      values.customOpenshiftSelect &&
+      !selectOptions.some((option) => option.value === values.customOpenshiftSelect?.value)
+    ) {
+      return [
+        {
+          value: values.customOpenshiftSelect.value,
+          label: values.customOpenshiftSelect.label,
+        },
+      ];
+    }
+    return [];
+  }, [selectOptions, values.customOpenshiftSelect]);
 
   const nameInputRef = React.useRef<HTMLInputElement>();
   React.useEffect(() => {
@@ -102,15 +131,27 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           {t('ai:OpenShift')} {forceOpenshiftVersion}
         </StaticTextField>
       ) : (
-        <OpenShiftVersionSelect
-          versions={versions}
-          onChange={(_event, value) => {
-            const ocpVersion = versions.find((v) => v.value === value);
-            setFieldValue('networkType', getNetworkType(ocpVersion));
-          }}
-        />
+        <>
+          <OpenShiftVersionDropdown
+            name="openshiftVersion"
+            items={selectOptions}
+            versions={versions}
+            showReleasesLink={false}
+            showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
+            customItems={additionalSelectOptions}
+          />
+          {openshiftVersionModalOpen && (
+            <OpenShiftVersionModal
+              allVersions={allVersions}
+              setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+            />
+          )}
+        </>
       )}
-      <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
+      <ControlPlaneNodesDropdown
+        isDisabled={isEditFlow}
+        allowHighlyAvailable={allowHighlyAvailable}
+      />
       {!isNutanix && (
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}