@openshift-assisted/ui-lib 5.0.1-cim → 5.0.2-cim

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

@@ -3,7 +3,6 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Grid, GridItem, Wizard, WizardStep } from '@patternfly/react-core';
 import { AlertsContextProvider, ErrorState, LoadingState } from '../../../common';
 import { ClusterDeploymentWizardProps } from './types';
-import { ACMFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { YamlPreview, useYamlPreview } from '../YamlPreview';
 import { wizardStepNames } from './constants';
 import { ClusterDeploymentWizardContextProvider } from './ClusterDeploymentWizardContext';
@@ -72,110 +71,103 @@ export const ClusterDeploymentWizard = ({
     <Grid style={{ height: '100%' }}>
       <GridItem span={isPreviewOpen ? 7 : 12}>
         <AlertsContextProvider>
-          <ACMFeatureSupportLevelProvider clusterImages={clusterImages} isEditClusterFlow={true}>
-            <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>
+          <ClusterDeploymentWizardContextProvider agentClusterInstall={agentClusterInstall}>
+            <Wizard isVisitRequired startIndex={startIndex} className={className} onClose={onClose}>
+              <WizardStep
+                name={stepNames['installation-type']}
+                id={'installation-type'}
+                isDisabled
+              />
 
-                <WizardStep name={stepNames['automation']} id={'automation'} 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>
 
-                {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['automation']} id={'automation'} isDisabled />
 
-                <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}
-                  />
+              {isCIMFlow(clusterDeployment) ? (
+                <WizardStep name={stepNames['host-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['custom-manifests']} id={'custom-manifests'}>
-                  <ClusterDeploymentCustomManifestsStep agentClusterInstall={agentClusterInstall} />
+              ) : (
+                <WizardStep name={stepNames['host-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['review']} id={'review'}>
-                  <ClusterDeploymentReviewStep
-                    onFinish={onFinish}
-                    clusterDeployment={clusterDeployment}
-                    agentClusterInstall={agentClusterInstall}
-                    agents={agents}
-                    clusterImages={clusterImages}
-                    infraEnv={infraEnv}
-                  />
-                </WizardStep>
-              </Wizard>
-            </ClusterDeploymentWizardContextProvider>
-          </ACMFeatureSupportLevelProvider>
+              <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['custom-manifests']} id={'custom-manifests'}>
+                <ClusterDeploymentCustomManifestsStep agentClusterInstall={agentClusterInstall} />
+              </WizardStep>
+
+              <WizardStep name={stepNames['review']} id={'review'}>
+                <ClusterDeploymentReviewStep
+                  onFinish={onFinish}
+                  clusterDeployment={clusterDeployment}
+                  agentClusterInstall={agentClusterInstall}
+                  agents={agents}
+                  clusterImages={clusterImages}
+                  infraEnv={infraEnv}
+                />
+              </WizardStep>
+            </Wizard>
+          </ClusterDeploymentWizardContextProvider>
         </AlertsContextProvider>
       </GridItem>
       {isPreviewOpen && (

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

@@ -36,7 +36,7 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
               agentClusterInstall={agentClusterInstall}
             />
             <AlertActionLink
-              onClick={() => window.open(getReportIssueLink(), '_blank')}
+              onClick={() => window.open(getReportIssueLink(), '_blank', 'noopener,noreferrer')}
               id={getID('button-report-bug')}
             >
               {t('ai:Report a bug')}

package/lib/cim/components/ClusterDeployment/clusterDetails/ACMClusterDeploymentDetailsStep.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Formik, FormikProps, useFormikContext } from 'formik';
 import { Stack } from '@patternfly/react-core';
 import noop from 'lodash-es/noop.js';
-import { ClusterDetailsValues, getRichTextValidation } from '../../../../common';
+import { ClusterDetailsValues, getRichTextValidation, useTranslation } from '../../../../common';
 import { ClusterImageSetK8sResource } from '../../../types/k8s/cluster-image-set';
 import { useDetailsFormik } from './useDetailsFormik';
 import { ClusterDetailsFormFieldsProps } from './ClusterDetailsFormFields';
@@ -57,8 +57,9 @@ export const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetai
   isNutanix,
   ...rest
 }) => {
-  const ocpVersions = getOCPVersions(clusterImages, !!isNutanix, osImages);
-  const allOcpVersions = getOCPVersions(clusterImages, !!isNutanix, osImages, true);
+  const { t } = useTranslation();
+  const ocpVersions = getOCPVersions(clusterImages, t, !!isNutanix, osImages);
+  const allOcpVersions = getOCPVersions(clusterImages, t, !!isNutanix, osImages, true);
 
   const [initialValues, validationSchema] = useDetailsFormik({
     ocpVersions,

package/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDeploymentDetailsForm.tsx

@@ -24,11 +24,11 @@ import { useFormikContext } from 'formik';
 import {
   ClusterDetailsValues,
   CpuArchitecture,
+  isMajorMinorVersionEqualOrGreater,
   SupportedCpuArchitecture,
 } from '../../../../common';
 import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 import { ValidationSection } from '../components/ValidationSection';
-import { toNumber } from 'lodash-es';
 
 type ClusterDeploymentDetailsFormProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -98,13 +98,13 @@ export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsForm
 }) => {
   const { t } = useTranslation();
   const versions = React.useMemo(
-    () => getOCPVersions(clusterImages, isNutanix, osImages),
-    [clusterImages, isNutanix, osImages],
+    () => getOCPVersions(clusterImages, t, isNutanix, osImages),
+    [clusterImages, isNutanix, osImages, t],
   );
 
   const allVersions = React.useMemo(
-    () => getOCPVersions(clusterImages, isNutanix, osImages, true),
-    [clusterImages, isNutanix, osImages],
+    () => getOCPVersions(clusterImages, t, isNutanix, osImages, true),
+    [clusterImages, isNutanix, osImages, t],
   );
 
   const isEditFlow = !!clusterDeployment;
@@ -116,7 +116,7 @@ export const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsForm
     const version = allVersions.find((ver) => ver.value === values.openshiftVersion);
     const isMulti = version?.cpuArchitectures?.[0] === CpuArchitecture.MULTI;
 
-    const highlyAvailableSupported = toNumber(version?.version?.split('.')?.[1]) >= 18;
+    const highlyAvailableSupported = isMajorMinorVersionEqualOrGreater(version?.version, '4.18');
     return [
       (isMulti ? cpuArchitectures : version?.cpuArchitectures) as SupportedCpuArchitecture[],
       highlyAvailableSupported && !isMulti,

package/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDeploymentDetailsStep.tsx

@@ -29,8 +29,8 @@ export const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStep
   const { addAlert } = useAlerts();
   const { goToNextStep } = useWizardContext();
 
-  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
-  const allOcpVersions = getOCPVersions(clusterImages, isNutanix, undefined, true);
+  const ocpVersions = getOCPVersions(clusterImages, t, isNutanix);
+  const allOcpVersions = getOCPVersions(clusterImages, t, isNutanix, undefined, true);
   const gridSpans = getGridSpans(isPreviewOpen);
 
   const [initialValues, validationSchema] = useDetailsFormik({

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

@@ -120,9 +120,8 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
       )}
       {isEditFlow ? (
         <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
-          {t('ai:OpenShift')}{' '}
-          {allVersions.find((v) => v.value === values.openshiftVersion)?.version ||
-            values.openshiftVersion}
+          {allVersions.find((v) => v.value === values.openshiftVersion)?.label ||
+            `${t('ai:OpenShift')} ${values.openshiftVersion}`}
         </StaticTextField>
       ) : (
         <>

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

@@ -4,11 +4,12 @@ import { Cluster } from '@openshift-assisted/types/./assisted-installer-service'
 import { ValidationsInfo, ClusterWizardStepValidationsAlert } from '../../../../common';
 import { ClusterWizardStepHostStatusDeterminationObject } from '../../../../common/types/hosts';
 import ValidationsRunningAlert from '../../common/ValidationsRunningAlert';
-import { ClusterWizardStepsType, wizardStepsValidationsMap } from '../wizardTransition';
+import { wizardStepsValidationsMap } from '../wizardTransition';
+import { ClusterDeploymentWizardStepsType } from '../types';
 
 type ValidationSectionProps = {
   requireProxy?: boolean;
-  currentStepId: ClusterWizardStepsType;
+  currentStepId: ClusterDeploymentWizardStepsType;
   validationsInfo?: ValidationsInfo;
   clusterStatus?: Cluster['status'];
   hosts: ClusterWizardStepHostStatusDeterminationObject[];

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

@@ -15,8 +15,8 @@ export const wizardStepNames = (
   'installation-type': t('ai:Installation type'),
   automation: t('ai:Automation'),
   'cluster-details': t('ai:Cluster details'),
-  'hosts-selection': t('ai:Cluster hosts'),
-  'hosts-discovery': t('ai:Cluster hosts'),
+  'host-selection': t('ai:Cluster hosts'),
+  'host-discovery': t('ai:Cluster hosts'),
   networking: t('ai:Networking'),
   'custom-manifests': t('ai:Custom manifests'),
   review: t('ai:Review and create'),

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostDiscoveryTable.tsx

@@ -88,7 +88,7 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
         bmhStatuses,
         onEditHostname: onEditHost,
         onApprove,
-        wizardStepId: 'hosts-discovery',
+        wizardStepId: 'host-discovery',
         t,
       }),
       roleColumn(t, hostActions.canEditRole, hostActions.onEditRole),

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostsDiscoveryStep.tsx

@@ -61,7 +61,7 @@ export const ClusterDeploymentHostsDiscoveryStep = ({
     errors.push(t('ai:Hostnames must be unique.'));
   }
   const agentsNotHealthy = infraEnvAgents
-    .map((agent) => getWizardStepAgentStatus(agent, 'hosts-discovery', t).status.key)
+    .map((agent) => getWizardStepAgentStatus(agent, 'host-discovery', t).status.key)
     .some((status) =>
       ['disconnected', 'disabled', 'error', 'insufficient', 'cancelled'].includes(status),
     );
@@ -173,7 +173,7 @@ export const ClusterDeploymentHostsDiscoveryStep = ({
 
       {!!syncError && (
         <GridItem>
-          <ValidationSection currentStepId={'hosts-selection'} hosts={[]}>
+          <ValidationSection currentStepId={'host-selection'} hosts={[]}>
             <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
               {syncError}
             </Alert>

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

@@ -216,7 +216,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   React.useEffect(() => {
     if (nextRequested && !isSubmitting) {
       const agentStatuses = selectedAgents.map(
-        (agent) => getWizardStepAgentStatus(agent, 'hosts-selection', t).status.key,
+        (agent) => getWizardStepAgentStatus(agent, 'host-selection', t).status.key,
       );
       if (
         agentStatuses.some((status) =>
@@ -227,7 +227,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
       } else if (
         !!selectedAgents.length &&
         selectedAgents.every(
-          (agent) => getWizardStepAgentStatus(agent, 'hosts-selection', t).status.key === 'known',
+          (agent) => getWizardStepAgentStatus(agent, 'host-selection', t).status.key === 'known',
         )
       ) {
         setShowClusterErrors(true);

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

@@ -34,15 +34,12 @@ import {
 } from '../../helpers';
 import { isAgentOfCluster } from '../helpers';
 import { wizardStepNames } from '../constants';
-import {
-  wizardStepsValidationsMap,
-  ClusterWizardStepsType,
-  allClusterWizardSoftValidationIds,
-} from '../wizardTransition';
+import { wizardStepsValidationsMap, allClusterWizardSoftValidationIds } from '../wizardTransition';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 import { ReviewConfigMapsTable } from './ReviewConfigMapsTable';
 import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardStepsType } from '../types';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -63,7 +60,7 @@ export const ClusterDeploymentReviewStep = ({
   infraEnv,
 }: ClusterDeploymentReviewStepProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const { activeStep, goToPrevStep, goToStepByName, close } = useWizardContext();
+  const { activeStep, goToPrevStep, goToStepById, close } = useWizardContext();
   const { syncError } = React.useContext(ClusterDeploymentWizardContext);
   const [isSubmitting, setSubmitting] = React.useState(false);
   const cdName = clusterDeployment.metadata?.name;
@@ -107,7 +104,7 @@ export const ClusterDeploymentReviewStep = ({
   );
   useWizardFooter(footer);
 
-  const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall);
+  const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall, t);
   const platform =
     getPlatforms(t)[
       (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType
@@ -187,9 +184,9 @@ export const ClusterDeploymentReviewStep = ({
           <DetailItem
             title={t('ai:Cluster validations')}
             value={
-              <ClusterValidations<ClusterWizardStepsType>
+              <ClusterValidations<ClusterDeploymentWizardStepsType>
                 validationsInfo={cluster.validationsInfo}
-                setCurrentStepId={goToStepByName}
+                setCurrentStepId={goToStepById}
                 wizardStepNames={wizardStepNames(t)}
                 wizardStepsValidationsMap={wizardStepsValidationsMap}
               />
@@ -199,9 +196,12 @@ export const ClusterDeploymentReviewStep = ({
           <DetailItem
             title={t('ai:Host validations')}
             value={
-              <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
+              <HostsValidations<
+                ClusterDeploymentWizardStepsType,
+                typeof allClusterWizardSoftValidationIds
+              >
                 hosts={cluster.hosts}
-                setCurrentStepId={goToStepByName}
+                setCurrentStepId={goToStepById}
                 wizardStepNames={wizardStepNames(t)}
                 allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
                 wizardStepsValidationsMap={wizardStepsValidationsMap}

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

@@ -41,8 +41,8 @@ export type AgentTableActions = {
 
 export type ClusterDeploymentWizardStepsType =
   | 'cluster-details'
-  | 'hosts-selection'
-  | 'hosts-discovery'
+  | 'host-selection'
+  | 'host-discovery'
   | 'networking'
   | 'custom-manifests'
   | 'review';
@@ -188,7 +188,6 @@ export type InfraEnvAgentTableProps = Pick<
   agentMachines: AgentMachineK8sResource[];
   bareMetalHosts: BareMetalHostK8sResource[];
   infraEnv: InfraEnvK8sResource;
-  nmStates: NMStateK8sResource[];
   getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string;
   onChangeHostname: (agent: AgentK8sResource, hostname: string) => Promise<AgentK8sResource>;
   onChangeBMHHostname: (

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

@@ -10,14 +10,6 @@ import { AgentK8sResource } from '../../types/k8s/agent';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
 import { ClusterDeploymentWizardStepsType } from './types';
 
-export type ClusterWizardStepsType =
-  | 'cluster-details'
-  | 'hosts-selection'
-  | 'hosts-discovery'
-  | 'networking'
-  | 'custom-manifests'
-  | 'review';
-
 const clusterDetailsStepValidationsMap: WizardStepValidationMap = {
   cluster: {
     groups: [],
@@ -85,10 +77,23 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   },
 };
 
+const customManifestsValidationsMap: WizardStepValidationMap = {
+  cluster: {
+    groups: ['network'],
+    validationIds: ['platform-requirements-satisfied', 'custom-manifests-requirements-satisfied'],
+  },
+  host: {
+    allowedStatuses: ['known', 'disabled'],
+    groups: ['network'],
+    validationIds: [],
+  },
+  softValidationIds: ['ntp-synced', 'container-images-available', 'mtu-valid'],
+};
+
 const reviewStepValidationsMap: WizardStepValidationMap = {
   cluster: {
     groups: [],
-    validationIds: ['all-hosts-are-ready-to-install'],
+    validationIds: ['all-hosts-are-ready-to-install', 'custom-manifests-requirements-satisfied'],
   },
   host: {
     allowedStatuses: ['known', 'disabled'],
@@ -98,14 +103,15 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
   softValidationIds: [],
 };
 
-export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
-  'cluster-details': clusterDetailsStepValidationsMap,
-  'hosts-discovery': hostDiscoveryStepValidationsMap,
-  'hosts-selection': hostDiscoveryStepValidationsMap,
-  networking: networkingStepValidationsMap,
-  'custom-manifests': networkingStepValidationsMap,
-  review: reviewStepValidationsMap,
-};
+export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterDeploymentWizardStepsType> =
+  {
+    'cluster-details': clusterDetailsStepValidationsMap,
+    'host-discovery': hostDiscoveryStepValidationsMap,
+    'host-selection': hostDiscoveryStepValidationsMap,
+    networking: networkingStepValidationsMap,
+    'custom-manifests': customManifestsValidationsMap,
+    review: reviewStepValidationsMap,
+  };
 
 export const allClusterWizardSoftValidationIds =
   getAllClusterWizardSoftValidationIds(wizardStepsValidationsMap);
@@ -140,18 +146,23 @@ const canNextFromClusterDeploymentWizardStep = (
 export const canNextFromHostSelectionStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],
-) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'hosts-selection');
+) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'host-selection');
 
 export const canNextFromHostDiscoveryStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],
-) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'hosts-discovery');
+) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'host-discovery');
 
 export const canNextFromNetworkingStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],
 ) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'networking');
 
+export const canNextFromCustomManifestsStep = (
+  agentClusterInstall: AgentClusterInstallK8sResource,
+  agents: AgentK8sResource[],
+) => canNextFromClusterDeploymentWizardStep(agentClusterInstall, agents, 'custom-manifests');
+
 export const canNextFromReviewStep = (
   agentClusterInstall: AgentClusterInstallK8sResource,
   agents: AgentK8sResource[],

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

@@ -11,12 +11,14 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 import { BaseDnsHelperText } from '../../../ClusterDeployment/clusterDetails/ClusterDetailsFormFields';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { DetailsFormProps, DetailsFormValues } from './types';
+import { StorageClassDropdown } from './StorageClassDropdown';
 
 const DetailsForm: React.FC<DetailsFormProps> = ({
   onValuesChanged,
   extensionAfter,
   ocpVersions,
   allVersions,
+  storageClasses,
 }) => {
   const { t } = useTranslation();
   const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
@@ -69,6 +71,8 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
         />
       )}
 
+      <StorageClassDropdown storageClasses={storageClasses} />
+
       <PullSecret />
     </Form>
   );

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

@@ -4,7 +4,9 @@ import * as React from 'react';
 import * as Yup from 'yup';
 import {
   dnsNameValidationSchema,
+  ErrorState,
   getDefaultOpenShiftVersion,
+  LoadingState,
   nameValidationSchema,
   pullSecretValidationSchema,
 } from '../../../../../common';
@@ -12,6 +14,7 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 import { useSupportedOCPVersions } from '../../hooks/useSupportedOCPVersions';
 import DetailsForm from './DetailsForm';
 import { DetailsStepProps, UseDetailsFormik } from './types';
+import { useStorageClasses } from '../../../../hooks';
 
 const useDetailsFormik: UseDetailsFormik = ({
   ocpVersions,
@@ -27,6 +30,7 @@ const useDetailsFormik: UseDetailsFormik = ({
       pullSecret: initPullSecret,
       baseDnsDomain: initBaseDomain,
       customOpenshiftSelect: null,
+      storageClass: '',
     }),
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
@@ -53,8 +57,10 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
   initPullSecret,
   supportedVersionsCM,
 }) => {
-  const ocpVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM);
-  const allVersions = useSupportedOCPVersions(clusterImages, supportedVersionsCM, true);
+  const { t } = useTranslation();
+  const ocpVersions = useSupportedOCPVersions(clusterImages, t, supportedVersionsCM);
+  const allVersions = useSupportedOCPVersions(clusterImages, t, supportedVersionsCM, true);
+  const [storageClasses, isLoaded, error] = useStorageClasses({ isList: true });
 
   const [initialValues, validationSchema] = useDetailsFormik({
     ocpVersions,
@@ -63,6 +69,12 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
     initBaseDomain,
   });
 
+  if (!isLoaded) {
+    return <LoadingState />;
+  } else if (error) {
+    return <ErrorState />;
+  }
+
   return (
     <Formik
       initialValues={initialValues}
@@ -75,6 +87,7 @@ const DetailsStep: React.FC<DetailsStepProps> = ({
         ocpVersions={ocpVersions}
         allVersions={allVersions}
         extensionAfter={extensionAfter}
+        storageClasses={storageClasses}
       />
     </Formik>
   );