@openshift-assisted/ui-lib 2.55.1 → 2.56.0

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

@@ -7,11 +7,10 @@ import {
   discoveryTypeColumn,
   agentStatusColumn,
 } from '../../Agent';
-import HostsTable, {
+import {
+  HostsTable,
   DefaultExpandComponent,
   HostsTableEmptyState,
-} from '../../../../common/components/hosts/HostsTable';
-import {
   cpuCoresColumn,
   discoveredAtColumn,
   disksColumn,
@@ -24,16 +23,17 @@ import {
   ChangeHostnameAction,
   MassChangeHostnameModal,
   TableToolbar,
+  usePagination,
+  useTranslation,
+  HostsTableDetailContextProvider,
+  HostsNotShowingLink,
 } from '../../../../common';
-import { ClusterDeploymentHostDiscoveryTableProps } from '../types';
 import MassApproveAgentModal from '../../modals/MassApproveAgentModal';
 import MassApproveAction from '../../modals/MassApproveAction';
-import { usePagination } from '../../../../common/components/hosts/usePagination';
-import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { ExpandComponent } from '../../Agent/AgentsSelectionTable';
-import { HostsTableDetailContextProvider } from '../../../../common/components/hosts/HostsTableDetailContext';
 import { agentStatus, bmhStatus } from '../../helpers/agentStatus';
 import { onAgentChangeHostname } from '../../helpers';
+import { ClusterDeploymentHostDiscoveryTableProps } from '../types';
 
 const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscoveryTableProps> = ({
   agents,
@@ -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),
@@ -162,7 +162,16 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
               ExpandComponent={hostActions.onDiskRole ? ExpandComponent : DefaultExpandComponent}
               {...paginationProps}
             >
-              <HostsTableEmptyState setDiscoveryHintModalOpen={setDiscoveryHintModalOpen} />
+              <HostsTableEmptyState
+                secondaryActions={
+                  setDiscoveryHintModalOpen && [
+                    <HostsNotShowingLink
+                      key="hosts-not-showing"
+                      setDiscoveryHintModalOpen={setDiscoveryHintModalOpen}
+                    />,
+                  ]
+                }
+              />
             </HostsTable>
           </HostsTableDetailContextProvider>
         </StackItem>

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/networking/ClusterDeploymentHostsNetworkTable.tsx

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

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/use-networking-formik.ts

@@ -22,6 +22,7 @@ import {
   CLUSTER_DEFAULT_NETWORK_SETTINGS,
   clusterNetworksSchema,
   serviceNetworksSchema,
+  httpsProxyValidationSchema,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -65,7 +66,7 @@ const getNetworkConfigurationValidationSchema = (
       ingressVips: vipArrayValidationSchema(hostSubnets, values, t),
       sshPublicKey: sshPublicKeyListValidationSchema(t),
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      httpsProxy: httpsProxyValidationSchema({ values, pairValueName: 'httpProxy', t }),
       noProxy: noProxyValidationSchema(t),
     }),
   );

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>
   );

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import Fuse from 'fuse.js';
+import { StorageClassK8sResource } from '../../../../types';
+import { SelectFieldWithSearch, useTranslation } from '../../../../../common';
+import { useField } from 'formik';
+
+const NO_RESULTS = 'no_results';
+
+export const StorageClassDropdown = ({
+  storageClasses,
+}: {
+  storageClasses: StorageClassK8sResource[];
+}) => {
+  const { t } = useTranslation();
+  const [filter, setFilter] = React.useState('');
+  const [, , { setValue }] = useField('storageClass');
+
+  const storageClassItems = React.useMemo(
+    () =>
+      storageClasses.map((storageClass) => ({
+        value: storageClass.metadata?.name as string,
+        children: storageClass.metadata?.name as string,
+      })),
+    [storageClasses],
+  );
+
+  const fuse = React.useMemo(() => {
+    return new Fuse(storageClassItems, {
+      includeScore: true,
+      ignoreLocation: true,
+      threshold: 0.3,
+      keys: ['value'],
+    });
+  }, [storageClassItems]);
+
+  const selectOptions = React.useMemo(() => {
+    if (filter) {
+      const newSelectOptions = fuse
+        .search(filter)
+        .sort((a, b) => (a.score || 0) - (b.score || 0))
+        .map(({ item }) => item);
+
+      if (!newSelectOptions.length) {
+        return [
+          {
+            isAriaDisabled: true,
+            children: t('ai:No results found for {{filter}}', { filter }),
+            value: NO_RESULTS,
+            hasCheckbox: false,
+          },
+        ];
+      }
+      return newSelectOptions;
+    }
+    return storageClassItems;
+  }, [filter, fuse, storageClassItems, t]);
+
+  return (
+    <SelectFieldWithSearch
+      selectOptions={selectOptions}
+      filterValue={filter}
+      setFilterValue={setFilter}
+      name={'storageClass'}
+      label={t('ai:Storage class')}
+      placeholder={t('ai:No storage class selected')}
+      helperText={t('ai:Persistent volume storage class for etcd data volumes')}
+      onClear={() => setValue('')}
+    />
+  );
+};

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

@@ -1,7 +1,11 @@
 import { FormikProps } from 'formik';
 import { ObjectSchema } from 'yup';
 import { OpenshiftVersionOptionType } from '../../../../../common';
-import { ClusterImageSetK8sResource, ConfigMapK8sResource } from '../../../../types';
+import {
+  ClusterImageSetK8sResource,
+  ConfigMapK8sResource,
+  StorageClassK8sResource,
+} from '../../../../types';
 
 export type DetailsFormValues = {
   name: string;
@@ -9,6 +13,7 @@ export type DetailsFormValues = {
   pullSecret: string;
   baseDnsDomain: string;
   customOpenshiftSelect: string | null;
+  storageClass: string;
 };
 
 type UseDetailsFormikArgs = {
@@ -22,7 +27,9 @@ export type UseDetailsFormik = (
   args: UseDetailsFormikArgs,
 ) => [
   DetailsFormValues,
-  ObjectSchema<Omit<DetailsFormValues, 'openshiftVersion' | 'customOpenshiftSelect'>>,
+  ObjectSchema<
+    Omit<DetailsFormValues, 'openshiftVersion' | 'customOpenshiftSelect' | 'storageClass'>
+  >,
 ];
 
 export type DetailsStepProps = {
@@ -40,4 +47,5 @@ export type DetailsStepProps = {
 export type DetailsFormProps = Pick<DetailsStepProps, 'onValuesChanged' | 'extensionAfter'> & {
   ocpVersions: OpenshiftVersionOptionType[];
   allVersions: OpenshiftVersionOptionType[];
+  storageClasses: StorageClassK8sResource[];
 };

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

@@ -9,6 +9,7 @@ import {
   day2ApiVipValidationSchema,
   hostPrefixValidationSchema,
   httpProxyValidationSchema,
+  httpsProxyValidationSchema,
   ipBlockValidationSchema,
   noProxyValidationSchema,
   sshPublicKeyValidationSchema,
@@ -29,7 +30,7 @@ const getValidationSchema = (t: TFunction) =>
         ? hostPrefixValidationSchema(values.clusterNetworkCidr, t)
         : Yup.number(),
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      httpsProxy: httpsProxyValidationSchema({ values, pairValueName: 'httpProxy', t }),
       noProxy: noProxyValidationSchema(t),
       nodePortAddress:
         values.apiPublishingStrategy === 'NodePort'

package/lib/cim/components/Hypershift/hooks/useSupportedOCPVersions.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 // import { getErrorMessage } from '../../../../common/utils';
 import { ClusterImageSetK8sResource, ConfigMapK8sResource } from '../../../types';
 import { getOCPVersions } from '../../helpers';
+import { TFunction } from 'i18next';
 
 export const getSupportedCM = (configMaps: ConfigMapK8sResource[]) =>
   configMaps.find(
@@ -10,11 +11,12 @@ export const getSupportedCM = (configMaps: ConfigMapK8sResource[]) =>
 
 export const useSupportedOCPVersions = (
   clusterImages: ClusterImageSetK8sResource[],
+  t: TFunction,
   supportedVersionsCM?: ConfigMapK8sResource,
   extended?: boolean,
 ) => {
   return React.useMemo(() => {
-    const ocpVersions = getOCPVersions(clusterImages, false, undefined, extended);
+    const ocpVersions = getOCPVersions(clusterImages, t, false, undefined, extended);
     const supportedVersionsString = supportedVersionsCM?.data?.['supported-versions'];
     if (supportedVersionsString) {
       try {
@@ -26,5 +28,5 @@ export const useSupportedOCPVersions = (
       }
     }
     return ocpVersions;
-  }, [clusterImages, extended, supportedVersionsCM?.data]);
+  }, [clusterImages, extended, supportedVersionsCM?.data, t]);
 };

package/lib/cim/components/InfraEnv/EnvironmentErrors.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { Alert, AlertVariant, ModalBody } from '@patternfly/react-core';
 import { getFailingResourceConditions } from '../helpers';
 import { InfraEnvK8sResource } from '../../types';
 import { SingleResourceAlerts } from '../common/ResourceAlerts';
-import { Alert, AlertVariant } from '@patternfly/react-core';
 import { getInfraEnvDocs } from '../common/constants';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
@@ -25,8 +25,8 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
   }
 
   return (
-    <>
-      {!infraEnv.status && (
+    <ModalBody>
+      {!infraEnv.status ? (
         <Alert
           title={t('ai:Central infrastructure management is not running')}
           variant={AlertVariant.warning}
@@ -42,11 +42,12 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
             'ai:It seems the Central infrastructure management is not configured which will prevent its features to be used. Please refer to the documentation for the first time setup steps.',
           )}
         </Alert>
+      ) : (
+        <SingleResourceAlerts
+          title={t('ai:Failing infrastructure environment')}
+          conditions={infraEnvAlerts}
+        />
       )}
-      <SingleResourceAlerts
-        title={t('ai:Failing infrastructure environment')}
-        conditions={infraEnvAlerts}
-      />
-    </>
+    </ModalBody>
   );
 };