@openshift-assisted/ui-lib 2.12.1-cim → 2.14.0-cim

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.tsx

@@ -41,37 +41,41 @@ const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
       direction={{ default: 'row' }}
       justifyContent={{ default: 'justifyContentFlexStart' }}
     >
-      <FlexItem>
-        <RenderIf condition={cluster.status === 'error'}>
+      <RenderIf condition={cluster.status === 'error'}>
+        <FlexItem>
           <Button
             id={getID('button-reset-cluster')}
-            variant={ButtonVariant.primary}
+            variant={ButtonVariant.danger}
             onClick={() => resetClusterDialog.open({ cluster })}
           >
             Reset Cluster
           </Button>
-        </RenderIf>
-        <RenderIf
-          condition={showKubeConfig && hasConsoleUrlAndNoError && canOpenConsole(cluster.status)}
-        >
+        </FlexItem>
+      </RenderIf>
+      <RenderIf
+        condition={showKubeConfig && hasConsoleUrlAndNoError && canOpenConsole(cluster.status)}
+      >
+        <FlexItem>
           <LaunchOpenshiftConsoleButton
             isDisabled={false}
             cluster={cluster}
             consoleUrl={credentials?.consoleUrl}
             id={getID('button-launch-console')}
           />
-        </RenderIf>
-        <RenderIf condition={canAbortInstallation(cluster) && !canOpenConsole(cluster.status)}>
+        </FlexItem>
+      </RenderIf>
+      <RenderIf condition={canAbortInstallation(cluster)}>
+        <FlexItem>
           <Button
             data-testid="cluster-installation-abort-button"
             variant={ButtonVariant.danger}
             onClick={() => cancelInstallationDialog.open({ clusterId: cluster.id })}
             isDisabled={false}
           >
-            Abort Installation
+            Abort installation
           </Button>
-        </RenderIf>
-      </FlexItem>
+        </FlexItem>
+      </RenderIf>
       <FlexItem>
         <KubeconfigDownload
           status={cluster.status}

package/lib/ocm/components/clusterDetail/ClusterInstallationProgressCard.tsx

@@ -36,7 +36,7 @@ const ClusterInstallationProgressCard: React.FC<{ cluster: Cluster }> = ({ clust
           Installation progress
         </Title>
         {!isCardExpanded && (
-          <div className="pf-u-ml-md">
+          <div className="pf-v5-u-ml-md">
             <ClusterStatusIcon status={cluster.status} />
           </div>
         )}

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.css

@@ -1,4 +1,4 @@
-.cluster-summary-expandable .pf-c-expandable-section__toggle {
+.cluster-summary-expandable .pf-v5-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.tsx

@@ -19,7 +19,7 @@ const ClusterSummaryExpandable = ({ cluster }: ClusterSummaryExpandableProps) =>
       className="cluster-summary-expandable"
       id="cluster-summary-expandable"
     >
-      <div className="pf-u-pl-md pf-u-pt-md">
+      <div className="pf-v5-u-pl-md pf-v5-u-pt-md">
         <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
         <ReviewSummaryContent cluster={cluster} />
       </div>

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.css

@@ -1,4 +1,4 @@
-.host-inventory-expandable .pf-c-expandable-section__toggle {
+.host-inventory-expandable .pf-v5-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { hostStatus } from '../../../common';
+import { UiIcon, hostStatus } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
-import { getMostSevereHostStatus } from './utils';
+import { getHostsWithTimeout, getMostSevereHostStatus } from './utils';
 import { ExpandableSection } from '@patternfly/react-core';
 import './HostInventoryExpandable.css';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 type HostInventoryExpandableProps = {
   cluster: Cluster;
@@ -20,7 +21,7 @@ const ExpandableSectionTitle = ({
 }) => (
   <span>
     {`Host inventory ${hostsCount > 0 ? `(${hostsCount})` : ''}`}
-    {icon && <span className="pf-u-ml-sm">{icon}</span>}
+    {icon && <span className="pf-v5-u-ml-sm">{icon}</span>}
   </span>
 );
 
@@ -31,11 +32,15 @@ const HostInventoryExpandable = ({ cluster }: HostInventoryExpandableProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
   const mostSevereHostStatus = getMostSevereHostStatus(hosts);
   const hostStatusDef = mostSevereHostStatus ? hostStatus(t)[mostSevereHostStatus] : null;
-
+  const someHostHasTimeout = getHostsWithTimeout(hosts);
+  const warningIcon = <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
   return (
     <ExpandableSection
       toggleContent={
-        <ExpandableSectionTitle hostsCount={hosts.length} icon={hostStatusDef?.icon} />
+        <ExpandableSectionTitle
+          hostsCount={hosts.length}
+          icon={someHostHasTimeout ? warningIcon : hostStatusDef?.icon}
+        />
       }
       onToggle={() => setIsExpanded(!isExpanded)}
       isExpanded={isExpanded}

package/lib/ocm/components/clusterDetail/OpenShiftVersionDetail.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { getOpenshiftVersionText } from '../../../common';
-import { useOpenshiftVersions } from '../../hooks';
+import { UiIcon, getOpenshiftVersionText } from '../../../common';
+import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -21,7 +20,7 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
     <Text component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
-        <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
       </Popover>
     </Text>
   );
@@ -29,7 +28,7 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
 
 const OpenShiftVersionDetail = ({ cluster }: { cluster: Cluster }) => {
   const { openshiftVersion } = cluster;
-  const { isSupportedOpenShiftVersion, versions } = useOpenshiftVersions();
+  const { isSupportedOpenShiftVersion, latestVersions: versions } = useOpenshiftVersionsContext();
   const isSupported = isSupportedOpenShiftVersion(openshiftVersion);
 
   const version = React.useMemo(() => {

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -215,3 +215,35 @@ export const HostsInstallationSuccess = () => {
     </>
   );
 };
+
+type ClusterInstallationTimeoutProps = {
+  cluster: Cluster;
+};
+
+export const ClusterInstallationTimeout = ({ cluster }: ClusterInstallationTimeoutProps) => {
+  const { addAlert, clearAlerts } = useAlerts();
+  return (
+    <>
+      <Alert
+        isInline
+        variant="warning"
+        title="Cluster installation is taking too long"
+        actionLinks={
+          <>
+            <AlertActionLink
+              id="cluster-installation-logs-button"
+              onClick={() => {
+                void downloadClusterInstallationLogs(addAlert, cluster.id, clearAlerts);
+              }}
+              isDisabled={!canDownloadClusterLogs(cluster)}
+            >
+              Download installation logs
+            </AlertActionLink>
+          </>
+        }
+      >
+        Check the logs to find out why or reset the cluster to start over.
+      </Alert>
+    </>
+  );
+};

package/lib/ocm/components/clusterDetail/RebootNodeZeroModal.css

@@ -1,7 +1,7 @@
 .ai-reboot-modal .detail-list dt {
-  margin-top: var(--pf-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
 }
 
 .ai-reboot-modal__item {
-  margin-top: var(--pf-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
 }

package/lib/ocm/components/clusterDetail/ResetClusterModal.tsx

@@ -9,13 +9,12 @@ import {
   TextContent,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
 import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { calculateCollectedLogsCount } from '../clusters/utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import { ErrorState, LoadingState } from '../../../common';
+import { ErrorState, LoadingState, UiIcon } from '../../../common';
 import { ClustersAPI } from '../../services/apis';
 
 const ResetClusterModal: React.FC = () => {
@@ -85,8 +84,8 @@ const ResetClusterModal: React.FC = () => {
         </Text>
 
         <Text component="p">
-          <ExclamationTriangleIcon className="status-icon" color={warningColor.value} size="sm" />{' '}
-          Logs won't be available after the installation is reset.
+          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} /> Logs won't be
+          available after the installation is reset.
         </Text>
 
         <Text component="p">Are you sure you want to reset the cluster?</Text>

package/lib/ocm/components/clusterDetail/getProgressBarAlerts.tsx

@@ -5,6 +5,7 @@ import {
   HostsInstallationFailed,
   HostInstallationWarning,
   HostsInstallationSuccess,
+  ClusterInstallationTimeout,
 } from './ProgressBarAlerts';
 import {
   Cluster,
@@ -34,6 +35,7 @@ export const getClusterProgressAlerts = (
   const [totalMasters, failedMasters, pendingUserActionMasters] = hostsStatus(hosts, 'master');
   const [totalWorkers, failedWorkers, pendingUserActionWorkers] = hostsStatus(hosts, 'worker');
   const failedOperators = olmOperatorsStatus(olmOperators);
+  const finalizingStageTimeout = cluster?.progress?.finalizingStageTimedOut;
   if (['error', 'cancelled'].includes(cluster.status)) {
     return (
       <Stack>
@@ -47,6 +49,14 @@ export const getClusterProgressAlerts = (
         </StackItem>
       </Stack>
     );
+  } else if (finalizingStageTimeout) {
+    return (
+      <Stack>
+        <StackItem>
+          <ClusterInstallationTimeout cluster={cluster} />{' '}
+        </StackItem>
+      </Stack>
+    );
   } else {
     return (
       <Stack hasGutter>

package/lib/ocm/components/clusterDetail/utils.tsx

@@ -99,3 +99,13 @@ export const getMostSevereHostStatus = (hosts: Host[]) => {
   }
   return status;
 };
+
+export const getHostsWithTimeout = (hosts: Host[]) => {
+  for (let i = 0; i < hosts.length; i++) {
+    const host = hosts[i];
+    if (host.progress?.stageTimedOut !== undefined) {
+      return host.progress?.stageTimedOut;
+    }
+  }
+  return false;
+};

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
 import { useAlerts, LoadingState, ClusterWizardStep, ErrorState } from '../../../common';
 import { usePullSecret } from '../../hooks';
@@ -7,7 +7,8 @@ import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../
 import { setServerUpdateError, updateCluster } from '../../store/slices/current-cluster/slice';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import { canNextClusterDetails, ClusterWizardFlowStateNew } from './wizardTransition';
-import { useOpenshiftVersions, useManagedDomains, useUsedClusterNames } from '../../hooks';
+import { useManagedDomains, useUsedClusterNames } from '../../hooks';
+import { useOpenshiftVersionsContext } from './OpenshiftVersionsContext';
 import ClusterDetailsForm from './ClusterDetailsForm';
 import ClusterWizardNavigation from './ClusterWizardNavigation';
 import {
@@ -31,7 +32,12 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   const dispatch = useDispatch();
   const { usedClusterNames } = useUsedClusterNames(cluster?.id || '');
   const pullSecret = usePullSecret();
-  const { error: errorOCPVersions, loading: loadingOCPVersions, versions } = useOpenshiftVersions();
+  const {
+    error: errorOCPVersions,
+    loading: loadingOCPVersions,
+    latestVersions: versions,
+  } = useOpenshiftVersionsContext();
+  const location = useLocation();
 
   const handleClusterUpdate = React.useCallback(
     async (
@@ -67,7 +73,9 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
     async (params: ClusterCreateParamsWithStaticNetworking, addCustomManifests: boolean) => {
       clearAlerts();
       try {
-        const cluster = await ClustersService.create(params);
+        const searchParams = new URLSearchParams(location.search);
+        const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
+        const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
       } catch (e) {
@@ -79,7 +87,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, navigate, addAlert, dispatch],
+    [clearAlerts, location.search, navigate, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

package/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -25,7 +25,6 @@ import { OcmClusterDetailsFormFields } from '../clusterConfiguration/OcmClusterD
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { selectCurrentClusterPermissionsState } from '../../store/slices/current-cluster/selectors';
 import { useClusterWizardContext } from './ClusterWizardContext';
-import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import {
   Cluster,
   ClusterCreateParams,
@@ -67,7 +66,6 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
   const clusterWizardContext = useClusterWizardContext();
   const { search } = useLocation();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const featureSupportLevels = useNewFeatureSupportLevel();
   const { clearAlerts } = useAlerts();
 
   const handleSubmit = React.useCallback(
@@ -139,7 +137,6 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
     ocpVersions,
     isOcm: true,
     t,
-    newFeatureSupportLevels: featureSupportLevels,
   });
 
   return (

package/lib/ocm/components/clusterWizard/ClusterWizard.tsx

@@ -54,7 +54,7 @@ const ClusterWizard = ({ cluster, infraEnv, updateInfraEnv }: ClusterWizardProps
   }
   return (
     <WithErrorBoundary>
-      <div className={classNames('pf-c-wizard', 'cluster-wizard')}>{renderCurrentStep()}</div>
+      <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>{renderCurrentStep()}</div>
     </WithErrorBoundary>
   );
 };

package/lib/ocm/components/clusterWizard/ClusterWizardContext.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { HostsNetworkConfigurationType, UISettingsValues } from '../../services';
+import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
+import { UISettingsValues } from '../../../common';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -174,6 +174,7 @@ const ClusterWizardContextProvider = ({
     };
 
     const onSetCurrentStepId = (stepId: ClusterWizardStepsType) => {
+      clearAlerts();
       if (isStaticIpStep(currentStepId) && !isStaticIpStep(stepId)) {
         handleMoveFromStaticIp();
       }

package/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -32,6 +32,7 @@ const ValidationSection = ({
 }: ClusterValidationSectionProps) => {
   const { currentStepId } = useClusterWizardContext();
   const validationsInfo = cluster && selectClusterValidationsInfo(cluster);
+  const { uiSettings } = useClusterWizardContext();
   const { t } = useTranslation();
 
   let _alertContent = alertContent;
@@ -54,6 +55,8 @@ const ValidationSection = ({
           hosts={cluster?.hosts || []}
           validationsInfo={validationsInfo}
           wizardStepsValidationsMap={wizardStepsValidationsMap}
+          lastInstallationPreparation={cluster['last-installation-preparation']}
+          uiSettings={uiSettings}
         />
       )}
     </AlertGroup>
@@ -80,7 +83,7 @@ const ClusterWizardFooter = ({
   const { alerts } = useAlerts();
   const navigate = useNavigate();
 
-  const handleCancel = React.useCallback(() => navigate('..'), [navigate]);
+  const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

package/lib/ocm/components/clusterWizard/ClusterWizardNavigation.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { WizardNav } from '@patternfly/react-core';
+import { WizardNav } from '@patternfly/react-core/deprecated';
 import {
   canNextClusterDetails,
   canNextHostDiscovery,

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -4,7 +4,7 @@ import ClusterDetails from './ClusterDetails';
 
 const NewClusterWizard: React.FC = () => {
   return (
-    <div className={classNames('pf-c-wizard', 'cluster-wizard')}>
+    <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
       <ClusterDetails />
     </div>
   );

package/lib/ocm/components/clusterWizard/OpenshiftVersionsContext.tsx

@@ -0,0 +1,131 @@
+import React, { createContext } from 'react';
+import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
+import { getApiErrorMessage, handleApiError } from '../../../common/api';
+import { SupportedOpenshiftVersionsAPI } from '../../services/apis';
+import { Cluster, OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
+import { getKeys } from '../../../common/utils';
+
+const supportedVersionLevels = ['production', 'maintenance'];
+
+type OpenShiftVersion = Cluster['openshiftVersion'];
+type OpenshiftVersionsContextType = {
+  allVersions: OpenshiftVersionOptionType[];
+  latestVersions: OpenshiftVersionOptionType[];
+  isSupportedOpenShiftVersion: (version: OpenShiftVersion) => boolean;
+  getCpuArchitectures: (version: OpenShiftVersion) => CpuArchitecture[];
+  error?: { title: string; message: string };
+  loading: boolean;
+};
+
+const OpenshiftVersionsContext = createContext<OpenshiftVersionsContextType | null>(null);
+
+export const OpenshiftVersionsContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [allVersions, setAllVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
+  const [latestVersions, setLatestVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
+  const [error, setError] = React.useState<{ title: string; message: string }>();
+
+  const sortVersions = (versions: OpenshiftVersionOptionType[]) => {
+    return versions.sort((version1, version2) =>
+      version1.value.localeCompare(version2.value, undefined, { numeric: true }),
+    );
+  };
+
+  const getVersions = React.useCallback(
+    async (latest: boolean, setVersions: (versions: OpenshiftVersionOptionType[]) => void) => {
+      try {
+        const { data } = await SupportedOpenshiftVersionsAPI.list(latest);
+
+        const versions = getKeys(data).map((key) => {
+          const versionItem = data[key] as OpenshiftVersion;
+          const version = versionItem.displayName;
+
+          return {
+            label: `OpenShift ${version}`,
+            value: key as string,
+            version,
+            default: Boolean(versionItem.default),
+            supportLevel: versionItem.supportLevel,
+            cpuArchitectures: versionItem.cpuArchitectures as CpuArchitecture[],
+          };
+        }) as OpenshiftVersionOptionType[];
+
+        setVersions(sortVersions(versions));
+      } catch (e) {
+        handleApiError(e, (e) => {
+          setError({
+            title: 'Failed to retrieve list of supported OpenShift versions.',
+            message: getApiErrorMessage(e),
+          });
+        });
+      }
+    },
+    [],
+  );
+
+  React.useEffect(() => {
+    if (!allVersions.length) {
+      void getVersions(false, setAllVersions);
+    }
+  }, [allVersions, getVersions]);
+
+  React.useEffect(() => {
+    if (!latestVersions.length) {
+      void getVersions(true, setLatestVersions);
+    }
+  }, [getVersions, latestVersions]);
+
+  const findVersionItemByVersion = React.useCallback(
+    (version: OpenShiftVersion) => {
+      return allVersions?.find(({ value: versionKey }) => {
+        // For version 4.10 match 4.10, 4.10.3, not 4.1, 4.1.5
+        const versionNameMatch = new RegExp(`^${versionKey}(\\..+)?$`);
+        return versionNameMatch.test(version || '');
+      });
+    },
+    [allVersions],
+  );
+
+  const isSupportedOpenShiftVersion = React.useCallback(
+    (version: OpenShiftVersion) => {
+      if (allVersions?.length === 0) {
+        // Till the data are loaded
+        return true;
+      }
+      const selectedVersion = findVersionItemByVersion(version);
+      return supportedVersionLevels.includes(selectedVersion?.supportLevel || '');
+    },
+    [findVersionItemByVersion, allVersions],
+  );
+
+  const getCpuArchitectures = React.useCallback(
+    (version: OpenShiftVersion) => {
+      // TODO (multi-arch) confirm this is correctly retrieving the associated version
+      const matchingVersion = findVersionItemByVersion(version);
+      return matchingVersion?.cpuArchitectures ?? [];
+    },
+    [findVersionItemByVersion],
+  );
+
+  return (
+    <OpenshiftVersionsContext.Provider
+      value={{
+        allVersions,
+        latestVersions,
+        loading: !error && (allVersions?.length === 0 || latestVersions?.length === 0),
+        error,
+        isSupportedOpenShiftVersion,
+        getCpuArchitectures,
+      }}
+    >
+      {children}
+    </OpenshiftVersionsContext.Provider>
+  );
+};
+
+export const useOpenshiftVersionsContext = () => {
+  const context = React.useContext(OpenshiftVersionsContext);
+  if (!context) {
+    throw new Error('useOpenshiftVersionsContext must be used within OpenshiftVersionsContext');
+  }
+  return context;
+};

package/lib/ocm/components/clusterWizard/Operators.tsx

@@ -8,7 +8,9 @@ import {
   OPERATOR_NAME_CNV,
   OPERATOR_NAME_LVM,
   OPERATOR_NAME_MCE,
+  OPERATOR_NAME_MTV,
   OPERATOR_NAME_ODF,
+  OPERATOR_NAME_OPENSHIFT_AI,
   OperatorsValues,
   selectMonitoredOperators,
   useAlerts,
@@ -34,6 +36,8 @@ export const getOperatorsInitialValues = (
     useOdfLogicalVolumeManager: isOperatorEnabled([OPERATOR_NAME_LVM]),
     useContainerNativeVirtualization: isOperatorEnabled([OPERATOR_NAME_CNV]),
     useMultiClusterEngine: isOperatorEnabled([OPERATOR_NAME_MCE]),
+    useMigrationToolkitforVirtualization: isOperatorEnabled([OPERATOR_NAME_MTV]),
+    useOpenShiftAI: isOperatorEnabled([OPERATOR_NAME_OPENSHIFT_AI]),
   };
 };
 

package/lib/ocm/components/clusterWizard/OperatorsStep.tsx

@@ -8,6 +8,8 @@ import LvmCheckbox from '../clusterConfiguration/operators/LvmCheckbox';
 import MceCheckbox from '../clusterConfiguration/operators/MceCheckbox';
 import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { isOCPVersionEqualsOrMajor } from '../utils';
+import MtvOperatorCheckbox from '../clusterConfiguration/operators/MtvOperatorCheckbox';
+import OpenShiftAICheckbox from '../clusterConfiguration/operators/OpenShiftAICheckbox';
 
 export const OperatorsStep = (props: ClusterOperatorProps) => {
   const isSNO = useSelector(selectIsCurrentClusterSNO);
@@ -21,10 +23,14 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
         <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
       </StackItem>
       <StackItem>
-        <CnvCheckbox {...props} />
+        <CnvCheckbox {...props} isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15} />
       </StackItem>
       <StackItem>
-        <MceCheckbox />
+        <MceCheckbox
+          clusterId={props.clusterId}
+          isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
+          openshiftVersion={props.openshiftVersion}
+        />
       </StackItem>
       {isVersionEqualsOrMajorThan4_15 ? (
         <>
@@ -38,6 +44,8 @@ export const OperatorsStep = (props: ClusterOperatorProps) => {
       ) : (
         <StackItem>{isSNO ? <LvmCheckbox {...props} /> : <OdfCheckbox />}</StackItem>
       )}
+      <MtvOperatorCheckbox clusterId={props.clusterId} />
+      <OpenShiftAICheckbox />
     </Stack>
   );
 };

package/lib/ocm/components/clusterWizard/_wizardTransition.test.ts

@@ -72,6 +72,16 @@ const validationInfoHostsDisovery: ValidationsInfo = {
       message: 'a validation message',
       status: 'success',
     },
+    {
+      id: 'nvidia-gpu-requirements-satisfied',
+      message: 'a validation message',
+      status: 'success',
+    },
+    {
+      id: 'openshift-ai-requirements-satisfied',
+      message: 'a validation message',
+      status: 'success',
+    },
     {
       id: 'api-vips-defined',
       message: 'a validation unrelated to the canNextHostDiscovery',
@@ -170,6 +180,16 @@ const flatValidationHostsDiscovery: HostValidation[] = [
     message: 'a host validation message',
     status: 'success',
   },
+  {
+    id: 'nvidia-gpu-requirements-satisfied',
+    message: 'a host validation message',
+    status: 'success',
+  },
+  {
+    id: 'openshift-ai-requirements-satisfied',
+    message: 'a host validation message',
+    status: 'success',
+  },
 ];
 
 const flatValidationHostsStorage: HostValidation[] = [