@openshift-assisted/ui-lib 2.15.2-cim → 2.16.0-cim

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelectionAdvanced.tsx → hostSelection/ClusterDeploymentHostsSelectionAdvanced.tsx}

@@ -4,15 +4,15 @@ import React from 'react';
 import Measure from 'react-measure';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
 
-import { AgentK8sResource } from '../../types';
-import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../common';
-import LocationsSelector from './LocationsSelector';
-import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from './types';
-import LabelsSelector, { infraEnvLabelKeys } from './LabelsSelector';
-import AgentsSelectionTable from '../Agent/AgentsSelectionTable';
-import { AgentTableActions } from './types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { CpuArchitecture } from '../../../common';
+import { AgentK8sResource } from '../../../types';
+import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
+import LocationsSelector from '../LocationsSelector';
+import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from '../types';
+import LabelsSelector, { infraEnvLabelKeys } from '../LabelsSelector';
+import AgentsSelectionTable from '../../Agent/AgentsSelectionTable';
+import { AgentTableActions } from '../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { CpuArchitecture } from '../../../../common';
 
 type ClusterDeploymentHostsSelectionAdvancedProps = {
   availableAgents: AgentK8sResource[];
@@ -25,7 +25,7 @@ type ClusterDeploymentHostsSelectionAdvancedProps = {
 
 type FormValues = ClusterDeploymentHostsSelectionValues | ScaleUpFormValues;
 
-const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
+export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
   availableAgents,
   onEditRole,
   onSetInstallationDiskId,
@@ -103,5 +103,3 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     </>
   );
 };
-
-export default ClusterDeploymentHostsSelectionAdvanced;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelectionBasic.tsx → hostSelection/ClusterDeploymentHostsSelectionBasic.tsx}

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import { CheckboxField, NumberInputField } from '../../../common';
-import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from './constants';
+import { CheckboxField, NumberInputField } from '../../../../common';
+import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from '../constants';
 import { useFormikContext } from 'formik';
-import { ClusterDeploymentHostsSelectionValues } from './types';
-import LocationsSelector from './LocationsSelector';
-import { AgentK8sResource } from '../../types';
-import AgentsSelectionHostCountAlerts from '../Agent/AgentsSelectionHostCountAlerts';
-import AgentsSelectionHostCountLabelIcon from '../Agent/AgentsSelectionHostCountLabelIcon';
-import { useAgentsAutoSelection } from '../Agent/AgentsSelectionUtils';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { ClusterDeploymentHostsSelectionValues } from '../types';
+import LocationsSelector from '../LocationsSelector';
+import { AgentK8sResource } from '../../../types';
+import AgentsSelectionHostCountAlerts from '../../Agent/AgentsSelectionHostCountAlerts';
+import AgentsSelectionHostCountLabelIcon from '../../Agent/AgentsSelectionHostCountLabelIcon';
+import { useAgentsAutoSelection } from '../../Agent/AgentsSelectionUtils';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 type ClusterDeploymentHostsSelectionBasicProps = {
   availableAgents: AgentK8sResource[];

package/lib/cim/components/ClusterDeployment/hostSelection/index.tsx

@@ -0,0 +1,2 @@
+export * from './ClusterDeploymentHostSelectionStep';
+export * from './ClusterDeploymentHostsSelectionAdvanced';

package/lib/cim/components/ClusterDeployment/index.ts

@@ -1,6 +1,6 @@
 export * from './types';
 export * from './helpers';
-export * from './AdditionalNTPSourcesDialogToggle';
+export * from './components';
 export * from './LogsDownloadButton';
 export * from './wizardTransition';
 export * from './networkConfigurationValidation';
@@ -13,6 +13,6 @@ export { default as ClusterDeploymentCredentials } from './ClusterDeploymentCred
 export { default as ClusterDeploymentKubeconfigDownload } from './ClusterDeploymentKubeconfigDownload';
 export { default as ClusterInstallationError } from './ClusterInstallationError';
 export { default as NetworkConfiguration } from './NetworkConfiguration';
-export { default as ACMClusterDeploymentDetailsStep } from './ACMClusterDeploymentDetailsStep';
 
 export { getTotalCompute } from './ShortCapacitySummary';
+export { ACMClusterDeploymentDetailsStep } from './clusterDetails';

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsNetworkTable.tsx → networking/ClusterDeploymentHostsNetworkTable.tsx}

@@ -1,26 +1,26 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { EmptyState } from '../../../common';
-import { AgentTableActions } from './types';
+import { EmptyState } from '../../../../common';
+import { AgentTableActions } from '../types';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
-} from '../../types';
-import { getAICluster, getIsSNOCluster } from '../helpers';
-import { AdditionalNTPSourcesDialogToggle } from './AdditionalNTPSourcesDialogToggle';
-import { agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
-import HostsTable from '../../../common/components/hosts/HostsTable';
-import { HostDetail } from '../../../common/components/hosts/HostRowDetail';
+} from '../../../types';
+import { getAICluster, getIsSNOCluster } from '../../helpers';
+import { AdditionalNTPSourcesDialogToggle } from '../components/AdditionalNTPSourcesDialogToggle';
+import { agentStatusColumn, useAgentsTable } from '../../Agent/tableUtils';
+import HostsTable from '../../../../common/components/hosts/HostsTable';
+import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';
 import {
   activeNICColumn,
   hostnameColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
-import { usePagination } from '../../../common/components/hosts/usePagination';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+} from '../../../../common/components/hosts/tableUtils';
+import { usePagination } from '../../../../common/components/hosts/usePagination';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import { agentStatus } from '../helpers/agentStatus';
+import { agentStatus } from '../../helpers/agentStatus';
 
 type ExpandComponentContextType = {
   onSetInstallationDiskId?: ClusterDeploymentHostsNetworkTableProps['onSetInstallationDiskId'];

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentNetworkingForm.tsx → networking/ClusterDeploymentNetworkingForm.tsx}

@@ -20,25 +20,21 @@ import {
   SecurityFields,
   ProxyFields,
   ProxyInputFields,
-} from '../../../common';
-import NetworkConfiguration from './NetworkConfiguration';
+} from '../../../../common';
+import NetworkConfiguration from '../NetworkConfiguration';
 import ClusterDeploymentHostsNetworkTable from './ClusterDeploymentHostsNetworkTable';
-import { getAICluster, getIsSNOCluster } from '../helpers';
+import { getAICluster, getIsSNOCluster } from '../../helpers';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
   InfraEnvK8sResource,
-} from '../../types';
-import { AgentTableActions, ClusterDeploymentNetworkingValues } from './types';
+} from '../../../types';
+import { AgentTableActions, ClusterDeploymentNetworkingValues } from '../types';
 import { useFormikContext } from 'formik';
-import { getGridSpans } from './helpers';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { getGridSpans } from '../helpers';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
-import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
-
-// TODO(mlibra): So far a constant. Should be queried from somewhere.
-export const defaultNetworkSettings: ClusterDefaultConfig = CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4;
 
 type ClusterDeploymentNetworkingFormProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -140,7 +136,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
                 cluster={cluster}
                 hostSubnets={hostSubnets}
                 isVipDhcpAllocationDisabled
-                defaultNetworkSettings={defaultNetworkSettings}
+                defaultNetworkSettings={CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4}
                 hideManagedNetworking={getIsSNOCluster(agentClusterInstall) || isNutanix}
               />
             </GridItem>

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentNetworkingStep.tsx → networking/ClusterDeploymentNetworkingStep.tsx}

@@ -17,21 +17,21 @@ import {
   getFormikErrorFields,
   clusterFieldLabels,
   Alerts,
-} from '../../../common';
+} from '../../../../common';
 
 import {
   ClusterDeploymentDetailsNetworkingProps,
   AgentTableActions,
   ClusterDeploymentNetworkingValues,
-} from './types';
+} from '../types';
 import ClusterDeploymentNetworkingForm from './ClusterDeploymentNetworkingForm';
-import { isAgentOfCluster } from './helpers';
-import { useInfraEnvProxies, useNetworkingFormik } from './use-networking-formik';
-import { canNextFromNetworkingStep } from './wizardTransition';
-import { AgentK8sResource } from '../../types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ValidationSection } from './components/ValidationSection';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { isAgentOfCluster } from '../helpers';
+import { useInfraEnvProxies, useNetworkingFormik } from '../use-networking-formik';
+import { canNextFromNetworkingStep } from '../wizardTransition';
+import { AgentK8sResource } from '../../../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 
 type NetworkingFormProps = {
   clusterDeployment: ClusterDeploymentDetailsNetworkingProps['clusterDeployment'];
@@ -200,7 +200,7 @@ export const NetworkingForm = ({
         {syncError && (
           <GridItem>
             <ValidationSection currentStepId={'networking'} hosts={[]}>
-              <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+              <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
                 {syncError}
               </Alert>
             </ValidationSection>
@@ -212,7 +212,7 @@ export const NetworkingForm = ({
   );
 };
 
-const ClusterDeploymentNetworkingStep = ({
+export const ClusterDeploymentNetworkingStep = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
@@ -261,5 +261,3 @@ const ClusterDeploymentNetworkingStep = ({
     </Formik>
   );
 };
-
-export default ClusterDeploymentNetworkingStep;

package/lib/cim/components/ClusterDeployment/networking/index.tsx

@@ -0,0 +1 @@
+export * from './ClusterDeploymentNetworkingStep';

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentReviewStep.tsx → review/ClusterDeploymentReviewStep.tsx}

@@ -8,14 +8,14 @@ import {
   WizardFooter,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { canNextFromReviewStep } from './wizardTransition';
+import { canNextFromReviewStep } from '../wizardTransition';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
   ClusterImageSetK8sResource,
   InfraEnvK8sResource,
-} from '../../types';
+} from '../../../types';
 import {
   ClusterWizardStepHeader,
   DetailList,
@@ -24,18 +24,25 @@ import {
   ClusterValidations,
   HostsValidations,
   useAlerts,
-} from '../../../common';
-import { getSelectedVersion, getAICluster, getClusterDeploymentCpuArchitecture } from '../helpers';
-import { isAgentOfCluster } from './helpers';
-import { wizardStepNames } from './constants';
+  getPlatforms,
+} from '../../../../common';
+import {
+  getSelectedVersion,
+  getAICluster,
+  getClusterDeploymentCpuArchitecture,
+} from '../../helpers';
+import { isAgentOfCluster } from '../helpers';
+import { wizardStepNames } from '../constants';
 import {
   wizardStepsValidationsMap,
   ClusterWizardStepsType,
   allClusterWizardSoftValidationIds,
-} from './wizardTransition';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
-import { ValidationSection } from './components/ValidationSection';
+} from '../wizardTransition';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
+import { ReviewConfigMapsTable } from './ReviewConfigMapsTable';
+import { ValidationSection } from '../components/ValidationSection';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -47,7 +54,7 @@ type ClusterDeploymentReviewStepProps = {
   infraEnv?: InfraEnvK8sResource;
 };
 
-const ClusterDeploymentReviewStep = ({
+export const ClusterDeploymentReviewStep = ({
   agentClusterInstall,
   agents,
   onFinish,
@@ -77,7 +84,7 @@ const ClusterDeploymentReviewStep = ({
       await onFinish();
     } catch (err) {
       const error = err as Error;
-      addAlert({ title: error.message || t('ai:An error occured while starting installation.') });
+      addAlert({ title: error.message || t('ai:An error occurred while starting installation.') });
     } finally {
       setSubmitting(false);
     }
@@ -97,6 +104,10 @@ const ClusterDeploymentReviewStep = ({
   useWizardFooter(footer);
 
   const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall);
+  const platform =
+    getPlatforms(t)[
+      (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType
+    ];
 
   const cluster = React.useMemo(
     () => getAICluster({ clusterDeployment, agentClusterInstall, agents: clusterAgents }),
@@ -127,6 +138,11 @@ const ClusterDeploymentReviewStep = ({
             value={cpuArchitecture}
             testId="cpu-architecture"
           />
+          <DetailItem
+            title={t('ai:External partner platform')}
+            value={platform}
+            testId="platform-type"
+          />
           <DetailItem
             title={t('ai:API IP')}
             value={agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP}
@@ -143,6 +159,13 @@ const ClusterDeploymentReviewStep = ({
             value={<ReviewHostsInventory hosts={cluster.hosts} />}
           />
 
+          {!!agentClusterInstall.spec?.manifestsConfigMapRefs?.length ? (
+            <DetailItem
+              title={t('ai:Custom manifests')}
+              value={<ReviewConfigMapsTable agentClusterInstall={agentClusterInstall} />}
+            />
+          ) : undefined}
+
           <DetailItem
             title={t('ai:Cluster validations')}
             value={
@@ -173,7 +196,7 @@ const ClusterDeploymentReviewStep = ({
       {syncError && (
         <GridItem>
           <ValidationSection currentStepId={'review'} hosts={[]}>
-            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
               {syncError}
             </Alert>
           </ValidationSection>
@@ -182,5 +205,3 @@ const ClusterDeploymentReviewStep = ({
     </Grid>
   );
 };
-
-export default ClusterDeploymentReviewStep;

package/lib/cim/components/ClusterDeployment/review/ReviewConfigMapsTable.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useConfigMaps } from '../../../hooks';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
+import { genericTableRowKey, LoadingState } from '../../../../common';
+import { AgentClusterInstallK8sResource } from '../../../types';
+
+export const ReviewConfigMapsTable = ({
+  agentClusterInstall,
+}: {
+  agentClusterInstall: AgentClusterInstallK8sResource;
+}) => {
+  const [configMaps, loaded] = useConfigMaps({
+    namespace: agentClusterInstall.metadata?.namespace,
+    isList: true,
+  });
+
+  const customManifests = React.useMemo(() => {
+    const maps = configMaps.filter((configMap) =>
+      agentClusterInstall.spec?.manifestsConfigMapRefs
+        ?.flatMap((ref) => ref.name)
+        .includes(configMap.metadata?.name || ''),
+    );
+
+    return maps
+      .map((map, index) => [
+        {
+          rowId: `config-map-${index}`,
+          cells: [{ title: map.metadata?.name as string, isExpanded: true, level: 1, posInset: 1 }],
+        },
+        ...Object.keys(map.data || {}).map((key) => ({
+          rowId: `config-map-${index}-${key}`,
+          cells: [
+            {
+              title: (
+                <>
+                  <span style={{ width: '1rem', display: 'inline-block' }} />
+                  {key}
+                </>
+              ),
+              posInset: 2,
+              level: 2,
+            },
+          ],
+        })),
+      ])
+      .flat();
+  }, [agentClusterInstall.spec?.manifestsConfigMapRefs, configMaps]);
+
+  return loaded ? (
+    <Table
+      variant={TableVariant.compact}
+      borders={false}
+      data-testid="review-custom-manifests-table"
+    >
+      <Tbody>
+        {customManifests.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map(({ title, ...props }, j) => (
+              <Td key={`cell-${i}-${j}`} {...props}>
+                {title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  ) : (
+    <LoadingState />
+  );
+};

package/lib/cim/components/ClusterDeployment/review/index.tsx

@@ -0,0 +1 @@
+export * from './ClusterDeploymentReviewStep';

package/lib/cim/components/ClusterDeployment/types.ts

@@ -44,6 +44,7 @@ export type ClusterDeploymentWizardStepsType =
   | 'hosts-selection'
   | 'hosts-discovery'
   | 'networking'
+  | 'custom-manifests'
   | 'review';
 
 export type ClusterDeploymentDetailsProps = {

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -11,7 +11,6 @@ import {
   InfraEnvK8sResource,
 } from '../../types';
 import { getAICluster } from '../helpers';
-import { defaultNetworkSettings } from './ClusterDeploymentNetworkingForm';
 import { useDeepCompareMemoize } from '../../../common/hooks';
 import {
   HostSubnets,
@@ -22,6 +21,7 @@ import {
   hostSubnetValidationSchema,
   httpProxyValidationSchema,
   noProxyValidationSchema,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -79,7 +79,7 @@ export const useNetworkingFormik = ({
         agents,
       });
       return {
-        ...getNetworkInitialValues(cluster, defaultNetworkSettings),
+        ...getNetworkInitialValues(cluster, CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4),
         enableProxy: false,
         editProxy: false,
       };

package/lib/cim/components/ClusterDeployment/wizardTransition.ts

@@ -15,6 +15,7 @@ export type ClusterWizardStepsType =
   | 'hosts-selection'
   | 'hosts-discovery'
   | 'networking'
+  | 'custom-manifests'
   | 'review';
 
 const clusterDetailsStepValidationsMap: WizardStepValidationMap = {
@@ -98,6 +99,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   'hosts-discovery': hostDiscoveryStepValidationsMap,
   'hosts-selection': hostDiscoveryStepValidationsMap,
   networking: networkingStepValidationsMap,
+  'custom-manifests': networkingStepValidationsMap,
   review: reviewStepValidationsMap,
 };
 

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsForm.tsx

@@ -1,9 +1,14 @@
 import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import * as React from 'react';
-import { InputField, OpenShiftVersionSelect, PullSecret } from '../../../../../common';
+import {
+  InputField,
+  OpenShiftVersionDropdown,
+  OpenShiftVersionModal,
+  PullSecret,
+} from '../../../../../common';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { BaseDnsHelperText } from '../../../ClusterDeployment/ClusterDetailsFormFields';
+import { BaseDnsHelperText } from '../../../ClusterDeployment/clusterDetails/ClusterDetailsFormFields';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { DetailsFormProps, DetailsFormValues } from './types';
 
@@ -11,7 +16,10 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
   onValuesChanged,
   extensionAfter,
   ocpVersions,
+  allVersions,
 }) => {
+  const { t } = useTranslation();
+  const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
   const { values } = useFormikContext<DetailsFormValues>();
   useTemptiflySync({ values, onValuesChanged });
 
@@ -20,7 +28,25 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
     nameInputRef.current?.focus();
   }, []);
 
-  const { t } = useTranslation();
+  const selectOptions = React.useMemo(
+    () =>
+      ocpVersions.map((version) => ({
+        label: version.label,
+        value: version.value,
+      })),
+    [ocpVersions],
+  );
+
+  const additionalSelectOption = React.useMemo(() => {
+    if (
+      values.customOpenshiftSelect &&
+      !selectOptions.some((option) => option.value === values.customOpenshiftSelect)
+    ) {
+      return allVersions.find((version) => version.value === values.customOpenshiftSelect);
+    }
+    return undefined;
+  }, [allVersions, selectOptions, values.customOpenshiftSelect]);
+
   return (
     <Form>
       <InputField
@@ -38,7 +64,21 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
         placeholder="example.com"
         isRequired
       />
-      <OpenShiftVersionSelect versions={ocpVersions} />
+      <OpenShiftVersionDropdown
+        name="openshiftVersion"
+        items={selectOptions}
+        versions={ocpVersions}
+        showReleasesLink={false}
+        showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
+        customItem={additionalSelectOption}
+      />
+      {openshiftVersionModalOpen && (
+        <OpenShiftVersionModal
+          allVersions={allVersions}
+          setOpenshiftVersionModalOpen={setOpenshiftVersionModalOpen}
+        />
+      )}
+
       <PullSecret />
     </Form>
   );

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsStep.tsx

@@ -26,6 +26,7 @@ const useDetailsFormik: UseDetailsFormik = ({
       openshiftVersion: getDefaultOpenShiftVersion(ocpVersions),
       pullSecret: initPullSecret,
       baseDnsDomain: initBaseDomain,
+      customOpenshiftSelect: null,
     }),
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
@@ -53,6 +54,8 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
   supportedVersionsCM,
 }) => {
   const ocpVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM);
+  const allVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM, true);
+
   const [initialValues, validationSchema] = useDetailsFormik({
     ocpVersions,
     usedClusterNames,
@@ -70,6 +73,7 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
       <DetailsForm
         onValuesChanged={onValuesChanged}
         ocpVersions={ocpVersions}
+        allVersions={allVersions}
         extensionAfter={extensionAfter}
       />
     </Formik>

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/types.ts

@@ -8,6 +8,7 @@ export type DetailsFormValues = {
   openshiftVersion: string;
   pullSecret: string;
   baseDnsDomain: string;
+  customOpenshiftSelect: string | null;
 };
 
 type UseDetailsFormikArgs = {
@@ -19,7 +20,10 @@ type UseDetailsFormikArgs = {
 
 export type UseDetailsFormik = (
   args: UseDetailsFormikArgs,
-) => [DetailsFormValues, ObjectSchema<Omit<DetailsFormValues, 'openshiftVersion'>>];
+) => [
+  DetailsFormValues,
+  ObjectSchema<Omit<DetailsFormValues, 'openshiftVersion' | 'customOpenshiftSelect'>>,
+];
 
 export type DetailsStepProps = {
   usedClusterNames: string[];
@@ -35,4 +39,5 @@ export type DetailsStepProps = {
 
 export type DetailsFormProps = Pick<DetailsStepProps, 'onValuesChanged' | 'extensionAfter'> & {
   ocpVersions: OpenshiftVersionOptionType[];
+  allVersions: OpenshiftVersionOptionType[];
 };

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.tsx

@@ -22,7 +22,6 @@ import { HostsFormValues } from './types';
 import { useFormikContext } from 'formik';
 import { getAgentsForSelection } from '../../../helpers';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { useFormikHelpers } from '../../../../../common/hooks/useFormikHelpers';
 
 import './NodePoolForm.css';
 import NodePoolAgentsForm from '../../forms/NodePoolAgentsForm';
@@ -37,14 +36,8 @@ type NodePoolFormProps = {
 const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, onRemove }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<HostsFormValues>();
-  const { setValue: setCountValue } = useFormikHelpers(`nodePools[${index}].count`);
-  const { setValue: setMinAutoscalingValue } = useFormikHelpers(
-    `nodePools[${index}].autoscaling.minReplicas`,
-  );
-  const { setValue: setMaxAutoscalingValue } = useFormikHelpers(
-    `nodePools[${index}].autoscaling.maxReplicas`,
-  );
   const [isExpanded, setExpanded] = React.useState(true);
+
   const infraEnvAgents = React.useMemo(() => {
     const infraEnv = infraEnvs.find((ie) => ie.metadata?.namespace === values.agentNamespace);
     return agents.filter((agent) => isAgentOfInfraEnv(infraEnv, agent));
@@ -79,31 +72,6 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
     Math.min(matchingAgents.length, availableAgents.length - previousNodePoolsCount),
   );
 
-  const currentCount = values.nodePools[index].useAutoscaling
-    ? values.nodePools[index].autoscaling.maxReplicas
-    : values.nodePools[index].count;
-
-  React.useEffect(() => {
-    if (currentCount > maxAgents) {
-      if (values.nodePools[index].useAutoscaling) {
-        if (maxAgents === 0) {
-          void setMinAutoscalingValue(maxAgents);
-        }
-        void setMaxAutoscalingValue(maxAgents);
-      } else {
-        void setCountValue(maxAgents);
-      }
-    }
-  }, [
-    maxAgents,
-    currentCount,
-    values.nodePools,
-    index,
-    setCountValue,
-    setMinAutoscalingValue,
-    setMaxAutoscalingValue,
-  ]);
-
   return (
     <Stack hasGutter>
       <StackItem>