@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/ocm/contexts/OpenShiftVersionsContext.tsx

@@ -0,0 +1,139 @@
+import React, { createContext } from 'react';
+import { Cluster, OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  CpuArchitecture,
+  OpenshiftVersionOptionType,
+  getApiErrorMessage,
+  handleApiError,
+  getKeys,
+} from '../../common';
+import { SupportedOpenshiftVersionsAPI } from '../services/apis';
+
+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 [isLoading, setIsLoading] = React.useState(true);
+
+  const sortVersions = (versions: OpenshiftVersionOptionType[]) => {
+    return versions.sort((version1, version2) =>
+      version1.value.localeCompare(version2.value, undefined, { numeric: true }),
+    );
+  };
+
+  React.useEffect(() => {
+    const getVersions = 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[];
+
+        const sorted = sortVersions(versions);
+        setVersions(sorted);
+
+        if (!latest && sorted.length === 0) {
+          setError({
+            title: 'Failed to retrieve list of supported OpenShift versions.',
+            message: 'No OpenShift versions available.',
+          });
+        }
+      } catch (e) {
+        handleApiError(e, (e) => {
+          setError({
+            title: 'Failed to retrieve list of supported OpenShift versions.',
+            message: getApiErrorMessage(e),
+          });
+        });
+      }
+    };
+
+    void Promise.allSettled([
+      getVersions(false, setAllVersions),
+      getVersions(true, setLatestVersions),
+    ]).finally(() => setIsLoading(false));
+  }, []);
+
+  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 && isLoading,
+        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/contexts/SentryErrorMonitorContextProvider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  ErrorMonitorContextProvider,
+  ErrorSeverity,
+  ExceptionReporter,
+  handleApiError,
+  isApiError,
+} from '../../common';
+import { captureException } from '../sentry';
+
+export const SentryErrorMonitorContextProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const exceptionReporter: ExceptionReporter = (
+    error: unknown,
+    message?: string,
+    severity?: ErrorSeverity,
+  ) => {
+    if (isApiError(error)) {
+      handleApiError(error);
+    } else {
+      captureException(error, message, severity);
+    }
+  };
+  return (
+    <ErrorMonitorContextProvider {...{ exceptionReporter }}>{children}</ErrorMonitorContextProvider>
+  );
+};

package/lib/ocm/contexts/index.tsx

@@ -0,0 +1,3 @@
+export * from './OpenShiftVersionsContext';
+export * from './SentryErrorMonitorContextProvider';
+export * from './ClusterDefaultConfigurationContext';

package/lib/ocm/hooks/index.ts

@@ -1,9 +1,16 @@
 export { default as useManagedDomains } from './useManagedDomains';
 export { default as useUsedClusterNames } from './useUsedClusterNames';
-export { default as useInfraEnvId } from './useInfraEnvId';
 export { default as usePullSecret } from './usePullSecret';
 export { default as useClusterPreflightRequirements } from './useClusterPreflightRequirements';
 export { default as useUISettings } from './useUISettings';
-export { default as useInfraEnv } from './useInfraEnv';
 export { default as useInfraEnvHosts } from './useInfraEnvHosts';
 export { useFeatureDetection } from './use-feature-detection';
+
+export * from './useInfraEnvId';
+export * from './useInfraEnv';
+export * from './use-feature';
+export * from './useLateBinding';
+export * from './useClusterCustomManifests';
+export * from './useSupportLevelsAPI';
+export * from './useInfraEnvImageUrl';
+export * from './useInfraEnvIpxeImageUrl';

package/lib/ocm/hooks/useClusterCustomManifests.ts

@@ -8,7 +8,7 @@ import {
 import { ClustersAPI } from '../services/apis';
 import { getApiErrorMessage, handleApiError } from '../../common/api';
 import { getErrorMessage } from '../../common/utils';
-import { ListManifestsExtended } from '../components/clusterConfiguration/manifestsConfiguration/data/dataTypes';
+import { ListManifestsExtended } from '../components/wizard/steps/customManifests/components/types';
 
 const { addAlert } = alertsSlice.actions;
 
@@ -51,7 +51,7 @@ const getManifestsInfo = async (customManifests: ListManifests, clusterId: strin
   return manifestsExtended;
 };
 
-const useClusterCustomManifests = (clusterId: Cluster['id'], extendedVersion: boolean) => {
+export const useClusterCustomManifests = (clusterId: Cluster['id'], extendedVersion: boolean) => {
   const [customManifests, setCustomManifests] = React.useState<ListManifestsExtended>();
   const [error, setError] = React.useState('');
   const [extendedManifestsLoaded, setExtendedManifestsLoaded] = React.useState<boolean>(false);
@@ -97,5 +97,3 @@ const useClusterCustomManifests = (clusterId: Cluster['id'], extendedVersion: bo
     isLoading: !error && !customManifests && (extendedVersion ? !extendedManifestsLoaded : true),
   };
 };
-
-export default useClusterCustomManifests;

package/lib/ocm/hooks/useInfraEnv.ts

@@ -1,16 +1,15 @@
 import React from 'react';
-import useInfraEnvId from './useInfraEnvId';
-import { CpuArchitecture } from '../../common';
-import { getErrorMessage } from '../../common/utils';
-import { InfraEnvsAPI } from '../services/apis';
-import InfraEnvIdsCacheService from '../services/InfraEnvIdsCacheService';
 import {
   Cluster,
   InfraEnv,
   InfraEnvUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { CpuArchitecture, getErrorMessage } from '../../common';
+import { InfraEnvsAPI } from '../services/apis';
+import { InfraEnvIdsCacheService } from '../services/InfraEnvIdsCacheService';
+import { useInfraEnvId } from './useInfraEnvId';
 
-export default function useInfraEnv(
+export const useInfraEnv = (
   clusterId: Cluster['id'],
   cpuArchitecture: CpuArchitecture,
   clusterName?: string,
@@ -21,7 +20,7 @@ export default function useInfraEnv(
   error?: string;
   isLoading: boolean;
   updateInfraEnv: (infraEnvUpdateParams: InfraEnvUpdateParams) => Promise<InfraEnv>;
-} {
+} => {
   const [infraEnv, setInfraEnv] = React.useState<InfraEnv>();
   const [error, setError] = React.useState('');
   const { infraEnvId, error: infraEnvIdError } = useInfraEnvId(
@@ -69,4 +68,4 @@ export default function useInfraEnv(
   }, [getInfraEnv, infraEnv, infraEnvId, infraEnvIdError]);
 
   return { infraEnv, error, isLoading: !infraEnv && !error, updateInfraEnv };
-}
+};

package/lib/ocm/hooks/useInfraEnvHosts.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import useInfraEnvId from './useInfraEnvId';
-import { CpuArchitecture, DEFAULT_POLLING_INTERVAL } from '../../common';
-import { getErrorMessage } from '../../common/utils';
-import { InfraEnvsAPI } from '../services/apis';
-import InfraEnvIdsCacheService from '../services/InfraEnvIdsCacheService';
 import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
+import { CpuArchitecture, DEFAULT_POLLING_INTERVAL, getErrorMessage } from '../../common';
+import { InfraEnvsAPI } from '../services/apis';
+import { InfraEnvIdsCacheService } from '../services/InfraEnvIdsCacheService';
+import { useInfraEnvId } from './useInfraEnvId';
 
 const useInfraEnvHosts = (
   clusterId: Cluster['id'],

package/lib/ocm/hooks/useInfraEnvId.ts

@@ -1,21 +1,20 @@
 import React from 'react';
-import { CpuArchitecture } from '../../common';
-import { getErrorMessage } from '../../common/utils';
-import { InfraEnvsService } from '../services';
 import {
   Cluster,
   InfraEnv,
   InfraEnvCreateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { CpuArchitecture, getErrorMessage } from '../../common';
+import { InfraEnvsService } from '../services';
 import { useFeature } from './use-feature';
 
-export default function useInfraEnvId(
+export const useInfraEnvId = (
   clusterId: Cluster['id'],
   cpuArchitecture: CpuArchitecture,
   clusterName?: string,
   pullSecret?: string,
   openshiftVersion?: string,
-) {
+) => {
   const [infraEnvId, setInfraEnv] = React.useState<InfraEnv['id']>();
   const [error, setError] = React.useState('');
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
@@ -63,4 +62,4 @@ export default function useInfraEnvId(
   }, [clusterId, findInfraEnvId, infraEnvId, isSingleClusterFeatureEnabled]);
 
   return { infraEnvId, error };
-}
+};

package/lib/ocm/hooks/useInfraEnvImageUrl.ts

@@ -1,16 +1,15 @@
 import React from 'react';
-import { CpuArchitecture } from '../../common';
-import { InfraEnvsAPI } from '../services/apis';
-import { getErrorMessage } from '../../common/utils';
-import { InfraEnvsService } from '../services';
 import { Cluster, PresignedUrl } from '@openshift-assisted/types/assisted-installer-service';
+import { CpuArchitecture, getErrorMessage } from '../../common';
+import { InfraEnvsService } from '../services';
+import { InfraEnvsAPI } from '../services/apis';
 
 type ImgUrl = {
   url: PresignedUrl['url'];
   error: string;
 };
 
-export default function useInfraEnvImageUrl() {
+export const useInfraEnvImageUrl = () => {
   const getIsoImageUrl = React.useCallback(
     async (clusterId: Cluster['id'], cpuArchitecture: CpuArchitecture): Promise<ImgUrl> => {
       try {
@@ -34,4 +33,4 @@ export default function useInfraEnvImageUrl() {
   );
 
   return { getIsoImageUrl };
-}
+};

package/lib/ocm/hooks/useInfraEnvIpxeImageUrl.ts

@@ -1,16 +1,16 @@
 import React from 'react';
+import { Cluster, PresignedUrl } from '@openshift-assisted/types/assisted-installer-service';
 import { CpuArchitecture } from '../../common';
-import { InfraEnvsAPI } from '../services/apis';
 import { getErrorMessage } from '../../common/utils';
 import { InfraEnvsService } from '../services';
-import { Cluster, PresignedUrl } from '@openshift-assisted/types/assisted-installer-service';
+import { InfraEnvsAPI } from '../services/apis';
 
 type ImgUrl = {
   url: PresignedUrl['url'];
   error: string;
 };
 
-export default function useInfraEnvIpxeImageUrl() {
+export const useInfraEnvIpxeImageUrl = () => {
   const getIpxeImageUrl = React.useCallback(
     async (clusterId: Cluster['id'], cpuArchitecture: CpuArchitecture): Promise<ImgUrl> => {
       try {
@@ -36,4 +36,4 @@ export default function useInfraEnvIpxeImageUrl() {
   );
 
   return { getIpxeImageUrl };
-}
+};

package/lib/ocm/hooks/useLateBinding.ts

@@ -8,7 +8,7 @@ import { useFeature } from './use-feature';
 
 const MAX_BIND_RETRY_ATTEMPTS = 3;
 
-const useLateBinding = (cluster: Cluster): boolean => {
+export const useLateBinding = (cluster: Cluster): boolean => {
   const [isBinding, setIsBinding] = useState(false);
   const { addAlert, removeAlert, alerts } = useAlerts();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
@@ -88,5 +88,3 @@ const useLateBinding = (cluster: Cluster): boolean => {
 
   return infraEnvLoading || isBinding;
 };
-
-export default useLateBinding;

package/lib/ocm/hooks/useSupportLevelsAPI.ts

@@ -6,7 +6,7 @@ import {
 } from '../../common/components/newFeatureSupportLevels';
 import { getApiErrorMessage, handleApiError } from '../../common/api';
 import NewFeatureSupportLevelsAPI from '../../common/api/assisted-service/NewFeatureSupportLevelsAPI';
-import { PlatformType } from '@openshift-assisted/types/./assisted-installer-service';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 
 type SupportLevelAPIResources = 'architectures' | 'features' | 'featureForAllCpus';
 type UseSupportLevelAPIResponse<T extends SupportLevelAPIResources> = T extends 'architectures'
@@ -17,13 +17,13 @@ type UseSupportLevelAPIResponse<T extends SupportLevelAPIResources> = T extends
   ? Record<SupportedCpuArchitecture, NewFeatureSupportLevelMap | null> | null
   : null;
 
-export default function useSupportLevelsAPI<T extends SupportLevelAPIResources>(
+export const useSupportLevelsAPI = <T extends SupportLevelAPIResources>(
   resourceKind: T,
   openshiftVersion?: string,
   cpuArchitecture?: CpuArchitecture,
   platformType?: PlatformType,
   supportedCpuArchitectures?: SupportedCpuArchitecture[],
-): UseSupportLevelAPIResponse<T> | null {
+): UseSupportLevelAPIResponse<T> | null => {
   const [cpuArchitectures, setCpuArchitectures] =
     React.useState<ArchitectureSupportLevelMap | null>(null);
   const [features, setFeatures] = React.useState<NewFeatureSupportLevelMap | null>(null);
@@ -146,4 +146,4 @@ export default function useSupportLevelsAPI<T extends SupportLevelAPIResources>(
   } else {
     return features as UseSupportLevelAPIResponse<T>;
   }
-}
+};

package/lib/ocm/hooks/useUISettings.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Cluster } from '@openshift-assisted/types/./assisted-installer-service';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { UISettingService } from '../services';
 import { ClustersAPI } from '../services/apis';
 import { UISettingsValues } from '../../common';

package/lib/ocm/index.ts

@@ -7,6 +7,8 @@ export * as Services from './services';
 export * from './components';
 export * from './services';
 export * from './hooks';
+export * from './pages';
+export * from './contexts';
 
 // re-export selected from common
 export * as Features from '../common/features';

package/lib/ocm/pages/Routes.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import {
+  Routes,
+  Route,
+  Navigate,
+  Outlet,
+  unstable_HistoryRouter as HistoryRouter,
+  HistoryRouterProps,
+} from 'react-router';
+import type { FeatureListType } from '../../common/features/featureGate';
+import { storeDay1 } from '../store';
+import { AssistedUILibVersion } from '../components';
+import { useFeatureDetection } from '../hooks';
+import { NewClusterPage } from './newClusterPage';
+import { ClusterPage } from './clusterPage';
+import { ClusterListPage } from './clusterListPage';
+import './Routes.css';
+
+import './Routes.css';
+
+type UILibRoutesProps = {
+  allEnabledFeatures: FeatureListType;
+  children?: React.ReactNode;
+  history?: HistoryRouterProps['history'];
+  basename?: string;
+};
+
+export const UILibRoutes = ({
+  allEnabledFeatures,
+  children,
+  history,
+  basename,
+}: UILibRoutesProps) => {
+  useFeatureDetection(allEnabledFeatures);
+
+  const routes = (
+    <>
+      <Routes>
+        <Route path="assisted-installer/clusters" element={<Outlet />}>
+          <Route path="~new" element={<NewClusterPage />} />
+          <Route path=":clusterId" element={<ClusterPage />} />
+          <Route index element={<ClusterListPage />} />
+        </Route>
+        {children}
+        <Route path="*" element={<Navigate to="/assisted-installer/clusters" />} />
+      </Routes>
+    </>
+  );
+
+  return (
+    <Provider store={storeDay1}>
+      <AssistedUILibVersion />
+      {history ? (
+        <HistoryRouter history={history} basename={basename || '/'}>
+          {routes}
+        </HistoryRouter>
+      ) : (
+        routes
+      )}
+    </Provider>
+  );
+};

package/lib/ocm/pages/clusterDetailCard/AssistedInstallerDetailCard.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { AlertsContextProvider } from '../../../common';
+import { storeDay1 } from '../../store';
+import { AssistedInstallerDetailCardContent } from './AssistedInstallerDetailCardContents';
+import { AssistedInstallerDetailCardProps } from './types';
+
+export const AssistedInstallerDetailCard = (props: AssistedInstallerDetailCardProps) => (
+  <Provider store={storeDay1}>
+    <AlertsContextProvider>
+      <AssistedInstallerDetailCardContent {...props} />
+    </AlertsContextProvider>
+  </Provider>
+);

package/lib/ocm/pages/clusterDetailCard/AssistedInstallerDetailCardContents.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { BrowserRouter, unstable_HistoryRouter as HistoryRouter } from 'react-router';
+import { Card, CardHeader, Title, CardBody } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  LoadingState,
+  ErrorState,
+  CpuArchitecture,
+  ResourceUIState,
+  AlertsContextProvider,
+} from '../../../common';
+import {
+  useFetchCluster,
+  BackButton,
+  useClusterPolling,
+  ClusterWizardContextProvider,
+  ClusterWizard,
+  ClusterInstallationProgressCard,
+  ModalDialogsContextProvider,
+  NewFeatureSupportLevelProvider,
+  ClusterPollingErrorModal,
+  CancelInstallationModal,
+  ResetClusterModal,
+  DiscoveryImageModal,
+} from '../../components';
+import {
+  OpenShiftVersionsContextProvider,
+  SentryErrorMonitorContextProvider,
+  ClusterDefaultConfigurationProvider,
+} from '../../contexts';
+import { useFeatureDetection, usePullSecret, useInfraEnv } from '../../hooks';
+import { AssistedInstallerDetailCardProps } from './types';
+
+const LoadingCard = () => (
+  <Card data-testid="ai-cluster-details-card">
+    <CardHeader>
+      <Title headingLevel="h1" size="lg" className="card-title">
+        Loading additional details
+      </Title>
+    </CardHeader>
+    <CardBody>
+      <LoadingState />
+    </CardBody>
+  </Card>
+);
+
+const ClusterLoadFailed = ({ clusterId, error }: { clusterId: Cluster['id']; error?: string }) => {
+  const fetchCluster = useFetchCluster(clusterId);
+  return (
+    <Card data-testid="ai-cluster-details-card">
+      <CardHeader>
+        <Title headingLevel="h1" size="lg" className="card-title">
+          Loading additional details
+        </Title>
+      </CardHeader>
+      <CardBody>
+        <BrowserRouter>
+          <ErrorState
+            title="Failed to fetch the cluster"
+            fetchData={fetchCluster}
+            actions={[<BackButton key={'cancel'} to={'/cluster-list'} />]}
+            content={error}
+          />
+        </BrowserRouter>
+      </CardBody>
+    </Card>
+  );
+};
+
+const LoadingDefaultConfigFailedCard = () => (
+  <Card data-testid="ai-cluster-details-card">
+    <CardHeader>
+      <Title headingLevel="h1" size="lg" className="card-title">
+        Loading additional details
+      </Title>
+    </CardHeader>
+    <CardBody>
+      <BrowserRouter>
+        <ErrorState
+          title="Failed to retrieve the default configuration"
+          actions={[<BackButton key={'cancel'} to={'/cluster-list'} />]}
+        />
+      </BrowserRouter>
+    </CardBody>
+  </Card>
+);
+
+export const AssistedInstallerDetailCardContent = ({
+  aiClusterId,
+  allEnabledFeatures,
+  history,
+  basename,
+  permissions,
+}: AssistedInstallerDetailCardProps) => {
+  useFeatureDetection(allEnabledFeatures);
+  const { cluster, uiState } = useClusterPolling(aiClusterId);
+  const pullSecret = usePullSecret();
+  const {
+    infraEnv,
+    isLoading: infraEnvLoading,
+    error: infraEnvError,
+    updateInfraEnv,
+  } = useInfraEnv(
+    aiClusterId,
+    cluster?.cpuArchitecture
+      ? (cluster.cpuArchitecture as CpuArchitecture)
+      : CpuArchitecture.USE_DAY1_ARCHITECTURE,
+    cluster?.name,
+    pullSecret,
+    cluster?.openshiftVersion,
+  );
+
+  if (uiState === ResourceUIState.LOADING || infraEnvLoading) {
+    return <LoadingCard />;
+  } else if ((uiState === ResourceUIState.POLLING_ERROR && !cluster) || infraEnvError) {
+    return <ClusterLoadFailed clusterId={aiClusterId} error={infraEnvError} />;
+  }
+
+  if (!cluster || !infraEnv || cluster.status === 'adding-hosts') {
+    // In OCM the Day 2 flow is rendered in a separate tab.
+    return null;
+  }
+
+  const showWizard = ['insufficient', 'ready', 'pending-for-input'].includes(cluster.status);
+
+  const content = showWizard ? (
+    <ClusterWizardContextProvider cluster={cluster} infraEnv={infraEnv} permissions={permissions}>
+      <ClusterWizard cluster={cluster} infraEnv={infraEnv} updateInfraEnv={updateInfraEnv} />
+    </ClusterWizardContextProvider>
+  ) : (
+    <ClusterInstallationProgressCard cluster={cluster} />
+  );
+
+  const isOutdatedClusterData = uiState === ResourceUIState.POLLING_ERROR;
+
+  const clusterDetailCard = (
+    <AlertsContextProvider>
+      <OpenShiftVersionsContextProvider>
+        <SentryErrorMonitorContextProvider>
+          <ModalDialogsContextProvider>
+            <ClusterDefaultConfigurationProvider
+              loadingUI={<LoadingCard />}
+              errorUI={<LoadingDefaultConfigFailedCard />}
+            >
+              <NewFeatureSupportLevelProvider
+                loadingUi={<LoadingCard />}
+                cluster={cluster}
+                cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
+                openshiftVersion={cluster.openshiftVersion}
+                platformType={cluster.platform?.type}
+              >
+                {content}
+              </NewFeatureSupportLevelProvider>
+              {isOutdatedClusterData && <ClusterPollingErrorModal />}
+              <CancelInstallationModal />
+              <ResetClusterModal />
+              <DiscoveryImageModal />
+            </ClusterDefaultConfigurationProvider>
+          </ModalDialogsContextProvider>
+        </SentryErrorMonitorContextProvider>
+      </OpenShiftVersionsContextProvider>
+    </AlertsContextProvider>
+  );
+
+  return (
+    <>
+      {history ? (
+        <HistoryRouter history={history} basename={basename || '/'}>
+          {clusterDetailCard}
+        </HistoryRouter>
+      ) : (
+        <BrowserRouter>{clusterDetailCard}</BrowserRouter>
+      )}
+    </>
+  );
+};