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

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -171,6 +171,8 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'odf-requirements-satisfied',
       'lvm-requirements-satisfied',
       'cnv-requirements-satisfied',
+      'nvidia-gpu-requirements-satisfied',
+      'openshift-ai-requirements-satisfied',
     ],
   },
   host: {
@@ -183,6 +185,8 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'odf-requirements-satisfied',
       'lvm-requirements-satisfied',
       'cnv-requirements-satisfied',
+      'nvidia-gpu-requirements-satisfied',
+      'openshift-ai-requirements-satisfied',
     ],
   },
   softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk'],

package/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -5,7 +5,7 @@ import { ASSISTED_INSTALLER_DOCUMENTATION_LINK, ExternalLink, isInOcm } from '..
 export const AssistedInstallerHeader = () => {
   return (
     <TextContent>
-      <Text component="h1" className="pf-u-display-inline">
+      <Text component="h1" className="pf-v5-u-display-inline">
         Install OpenShift with the Assisted Installer
       </Text>
       <Split hasGutter>

package/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx

@@ -12,17 +12,27 @@ const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
   <PageSection variant={PageSectionVariants.light}>
     {(clusterName || isInOcm) && (
       <Breadcrumb>
-        <BreadcrumbItem>
-          <Link to={'/'}>Clusters</Link>
-        </BreadcrumbItem>
+        {isInOcm && (
+          <BreadcrumbItem
+            data-testid="cluster-list-breadcrumb"
+            render={() => <Link to={'/cluster-list'}>Cluster List</Link>}
+          />
+        )}
+
         {clusterName ? (
-          <BreadcrumbItem>
+          <BreadcrumbItem data-testid="assisted-clusters-breadcrumb">
             <Link to={`..`}>Assisted Clusters</Link>
           </BreadcrumbItem>
         ) : (
-          <BreadcrumbItem isActive>Assisted Clusters</BreadcrumbItem>
+          <BreadcrumbItem isActive data-testid="assisted-clusters-breadcrumb">
+            Assisted Clusters
+          </BreadcrumbItem>
+        )}
+        {clusterName && (
+          <BreadcrumbItem data-testid="cluster-breadcrumb" isActive>
+            {clusterName}
+          </BreadcrumbItem>
         )}
-        {clusterName && <BreadcrumbItem isActive>{clusterName}</BreadcrumbItem>}
       </Breadcrumb>
     )}
   </PageSection>

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -33,6 +33,7 @@ import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { usePullSecret } from '../../hooks';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { AssistedInstallerHeader } from './AssistedInstallerHeader';
+import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
 
 const ClusterPageGeneric = ({
   clusterId,
@@ -71,7 +72,9 @@ const ClusterPageGeneric = ({
       };
       return (
         <AddHostsContextProvider cluster={cluster} resetCluster={onReset}>
-          <AddHosts />
+          <OpenshiftVersionsContextProvider>
+            <AddHosts />
+          </OpenshiftVersionsContextProvider>
         </AddHostsContextProvider>
       );
     } else if (
@@ -167,23 +170,25 @@ const ClusterPageGeneric = ({
                 loadingUI={<ClusterLoading />}
                 errorUI={<ClusterUiError />}
               >
-                <NewFeatureSupportLevelProvider
-                  loadingUi={<ClusterLoading />}
-                  cluster={cluster}
-                  cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
-                  openshiftVersion={cluster.openshiftVersion}
-                  platformType={cluster.platform?.type}
-                >
-                  {/* TODO(mlibra): Will be reworked within https://issues.redhat.com/browse/AGENT-522
-                <RebootNodeZeroModal cluster={cluster} />
-                */}
-                  {getContent(cluster, infraEnv)}
-                  {uiState === ResourceUIState.POLLING_ERROR && <ClusterPollingErrorModal />}
-                  {uiState === ResourceUIState.UPDATE_ERROR && <ClusterUpdateErrorModal />}
-                  <CancelInstallationModal />
-                  <ResetClusterModal />
-                  <DiscoveryImageModal />
-                </NewFeatureSupportLevelProvider>
+                <OpenshiftVersionsContextProvider>
+                  <NewFeatureSupportLevelProvider
+                    loadingUi={<ClusterLoading />}
+                    cluster={cluster}
+                    cpuArchitecture={infraEnv.cpuArchitecture as CpuArchitecture}
+                    openshiftVersion={cluster.openshiftVersion}
+                    platformType={cluster.platform?.type}
+                  >
+                    {/* TODO(mlibra): Will be reworked within https://issues.redhat.com/browse/AGENT-522
+                    <RebootNodeZeroModal cluster={cluster} />
+                    */}
+                    {getContent(cluster, infraEnv)}
+                    {uiState === ResourceUIState.POLLING_ERROR && <ClusterPollingErrorModal />}
+                    {uiState === ResourceUIState.UPDATE_ERROR && <ClusterUpdateErrorModal />}
+                    <CancelInstallationModal />
+                    <ResetClusterModal />
+                    <DiscoveryImageModal />
+                  </NewFeatureSupportLevelProvider>
+                </OpenshiftVersionsContextProvider>
               </ClusterDefaultConfigurationProvider>
             </ModalDialogsContextProvider>
           </SentryErrorMonitorContextProvider>

package/lib/ocm/components/clusters/ClusterStatus.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { FileAltIcon } from '@patternfly/react-icons/dist/js/icons/file-alt-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { BanIcon } from '@patternfly/react-icons/dist/js/icons/ban-icon';
-import { clusterStatusLabels, WithTestID } from '../../../common';
+import { clusterStatusLabels, UiIcon, WithTestID } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -26,22 +24,25 @@ type ClusterStatusIconProps = {
 export const ClusterStatusIcon: React.FC<ClusterStatusIconProps> = ({ status, ...extraProps }) => {
   switch (status) {
     case 'cancelled':
-      return <BanIcon size={'sm'} {...extraProps} />;
+      return <UiIcon size="sm" icon={<BanIcon {...extraProps} />} />;
     case 'insufficient':
     case 'pending-for-input':
     case 'ready':
-      return <FileAltIcon size={'sm'} {...extraProps} />;
+      return <UiIcon size="sm" icon={<FileAltIcon {...extraProps} />} />;
     case 'error':
-      return <ExclamationCircleIcon color={dangerColor.value} size={'sm'} {...extraProps} />;
+      return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon {...extraProps} />} />;
     case 'installed':
-      return <CheckCircleIcon color={okColor.value} size={'sm'} {...extraProps} />;
+      return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} {...extraProps} />} />;
     case 'installing-pending-user-action':
-      return <ExclamationTriangleIcon color={warningColor.value} size={'sm'} {...extraProps} />;
+      return (
+        <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon {...extraProps} />} />
+      );
+
     case 'preparing-for-installation':
     case 'installing':
     case 'finalizing':
     case 'adding-hosts':
-      return <InProgressIcon size={'sm'} {...extraProps} />;
+      return <UiIcon size="sm" icon={<InProgressIcon {...extraProps} />} />;
     default:
       return <></>;
   }

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -4,20 +4,18 @@ import {
   Toolbar,
   ToolbarItem,
   ToolbarContent,
-  ToolbarFilter,
   InputGroup,
-  Select,
-  SelectOption,
   TextInput,
   ToolbarProps,
   ToolbarFilterProps,
-  SelectProps,
   TextInputProps,
   ButtonVariant,
   Spinner,
   ToolbarGroup,
   Tooltip,
+  InputGroupItem,
 } from '@patternfly/react-core';
+import { Select, SelectOption, SelectProps } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import { SyncIcon } from '@patternfly/react-icons/dist/js/icons/sync-icon';
 import { clusterStatusLabels, isSelectEventChecked, ToolbarButton } from '../../../common';
@@ -29,6 +27,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useDispatchDay1, useSelectorDay1 } from '../../store';
 import { selectClustersUIState } from '../../store/slices/clusters/selectors';
+import { CustomToolbarFilter } from '../../../common/components/ui/CustomToolbarFilter';
 
 export type ClusterFiltersType = {
   [key: string]: string[]; // value from clusterStatusLabels
@@ -36,7 +35,7 @@ export type ClusterFiltersType = {
 
 type ClustersListToolbarProps = {
   searchString: string;
-  setSearchString: (value: string) => void;
+  setSearchString: TextInputProps['onChange'];
   filters: ClusterFiltersType;
   setFilters: (filters: ClusterFiltersType) => void;
 };
@@ -103,6 +102,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     </>
   );
   const { t } = useTranslation();
+
   return (
     <Toolbar
       id="clusters-list-toolbar"
@@ -113,19 +113,21 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
       <ToolbarContent>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="search-string"
-              id="search-string"
-              type="search"
-              aria-label="string to be searched in cluster names or ids"
-              onChange={onSearchNameChanged}
-              value={searchString}
-              placeholder="Filter by Name, ID or Base domain"
-              title="Filter by Name, ID or Base domain"
-            />
+            <InputGroupItem isFill>
+              <TextInput
+                name="search-string"
+                id="search-string"
+                type="search"
+                aria-label="string to be searched in cluster names or ids"
+                onChange={onSearchNameChanged}
+                value={searchString}
+                placeholder="Filter by Name, ID or Base domain"
+                title="Filter by Name, ID or Base domain"
+              />
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
-        <ToolbarFilter
+        <CustomToolbarFilter
           chips={filters.status}
           deleteChip={onDeleteChip}
           deleteChipGroup={onDeleteChipGroup}
@@ -149,7 +151,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
               />
             ))}
           </Select>
-        </ToolbarFilter>
+        </CustomToolbarFilter>
         <ToolbarButton
           variant={ButtonVariant.primary}
           onClick={() => navigate(`~new`)}
@@ -159,7 +161,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
           Create Cluster
         </ToolbarButton>
         {clustersUIState === ResourceUIState.RELOADING && <Spinner size="lg" />}
-        <ToolbarGroup alignment={{ lg: 'alignRight' }}>
+        <ToolbarGroup align={{ lg: 'alignRight' }}>
           <ToolbarButton
             variant={ButtonVariant.plain}
             onClick={() => fetchClusters()}

package/lib/ocm/components/clusters/ClustersTable.tsx

@@ -1,35 +1,34 @@
 import React from 'react';
 import {
   Table,
-  TableProps,
-  TableHeader,
-  TableBody,
-  RowWrapper,
-  RowWrapperProps,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  BaseCellProps,
+  ActionsColumn,
+  ThProps,
   SortByDirection,
-  ISortBy,
-  OnSort,
   IRow,
-  IActionsResolver,
-  cellWidth,
-  breakWord,
-  sortable,
+  ISortBy,
+  TrProps,
 } from '@patternfly/react-table';
-import { ClusterTableRows } from '../../../common/types/clusters';
-import DeleteClusterModal from './DeleteClusterModal';
-import { clusterStatusLabels, rowSorter, HumanizedSortable } from '../../../common';
-import ClustersListToolbar, { ClusterFiltersType } from './ClustersListToolbar';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import {
   ClusterRowDataProps,
   getClusterTableStatusCell,
 } from '../../store/slices/clusters/selectors';
+import ClustersListToolbar, { ClusterFiltersType } from './ClustersListToolbar';
+import {
+  clusterStatusLabels,
+  ClusterTableRows,
+  HumanizedSortable,
+  rowSorter,
+} from '../../../common';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import DeleteClusterModal from './DeleteClusterModal';
 
 type DeleteClusterID = Pick<ClusterRowDataProps, 'id' | 'name'>;
-
-const rowKey = ({ rowData }: { rowData?: { props?: ClusterRowDataProps } }): string | undefined =>
-  rowData?.props?.id;
-
 const STORAGE_KEY_CLUSTERS_FILTER = 'assisted-installer-cluster-list-filters';
 
 interface ClustersTableProps {
@@ -37,56 +36,35 @@ interface ClustersTableProps {
   deleteCluster: (id: string) => Promise<void>;
 }
 
-type TablePropsCellType = TableProps['cells'][0];
 type StoredFilters = { filters: ClusterFiltersType; sortBy: ISortBy; searchString: string };
 
-const columnConfig: TablePropsCellType = {
-  transforms: [sortable],
-  cellTransforms: [],
-  formatters: [],
-  cellFormatters: [],
-  props: {},
-};
-
-const columns: TablePropsCellType[] = [
-  {
-    title: 'Name',
-    dataLabel: 'Name',
-    ...columnConfig,
-    transforms: columnConfig?.transforms?.concat(cellWidth(20)),
-    cellTransforms: columnConfig?.cellTransforms?.concat(breakWord),
-  },
-  {
-    title: 'Base domain',
-    dataLabel: 'Base domain',
-    ...columnConfig,
-    transforms: columnConfig?.transforms?.concat(cellWidth(40)),
-    cellTransforms: columnConfig?.cellTransforms?.concat(breakWord),
-  },
-  { title: 'Version', dataLabel: 'Version', ...columnConfig },
-  { title: 'Status', dataLabel: 'Status', ...columnConfig },
-  { title: 'Hosts', dataLabel: 'Hosts', ...columnConfig },
-  { title: 'Created at', dataLabel: 'Created at', ...columnConfig },
+const columns = [
+  { title: 'Name', cellWidth: 20 },
+  { title: 'Base domain', cellWidth: 40 },
+  { title: 'Version' },
+  { title: 'Status' },
+  { title: 'Hosts' },
+  { title: 'Created at' },
 ];
 
 const getStatusCell = (row: IRow) => row.cells?.[3] as HumanizedSortable | undefined;
 
-const ClusterRowWrapper = (_props: RowWrapperProps) => {
-  const name = (_props?.row?.props as ClusterRowDataProps | undefined)?.name || '';
-  const props = {
-    ..._props,
+const getRowProps = (props?: ClusterRowDataProps) => {
+  const name = props?.name || '';
+  return {
+    ...props,
     id: `cluster-row-${name}`,
     'data-testid': `cluster-row-${name}`,
-  };
-  return <RowWrapper {...props} />;
+  } as Omit<TrProps, 'ref'>;
 };
 
-const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) => {
-  const [deleteClusterID, setDeleteClusterID] = React.useState<DeleteClusterID>();
+const ClustersTable = ({ rows, deleteCluster }: ClustersTableProps) => {
   const [sortBy, setSortBy] = React.useState<ISortBy>({
     index: 0, // Name-column
     direction: SortByDirection.asc,
   });
+
+  const [deleteClusterID, setDeleteClusterID] = React.useState<DeleteClusterID>();
   const [isDeleteInProgress, setDeleteInProgress] = React.useState(false);
   const [isDeleteModalOpen, setDeleteModalOpen] = React.useState(false);
 
@@ -97,6 +75,14 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
 
   const { t } = useTranslation();
 
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy,
+    onSort: (_event, index, direction) => {
+      setSortBy({ index, direction });
+    },
+    columnIndex,
+  });
+
   React.useEffect(() => {
     const marshalled = window.sessionStorage.getItem(STORAGE_KEY_CLUSTERS_FILTER);
     if (marshalled) {
@@ -118,35 +104,6 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
     );
   }, [filters, sortBy, searchString]);
 
-  const actionResolver: IActionsResolver = React.useCallback(
-    (rowData) => {
-      const props = rowData.props as ClusterRowDataProps;
-      return [
-        {
-          title: 'Delete',
-          id: `button-delete-${props.name}`,
-          isDisabled:
-            getClusterTableStatusCell(rowData).sortableValue === clusterStatusLabels(t).installing,
-          onClick: (/*event: React.MouseEvent, rowIndex: number, rowData: IRowData*/) => {
-            setDeleteClusterID({ id: props.id, name: props.name });
-            setDeleteModalOpen(true);
-          },
-        },
-      ];
-    },
-    [t],
-  );
-
-  const onSort: OnSort = React.useCallback(
-    (_event, index, direction) => {
-      setSortBy({
-        index,
-        direction,
-      });
-    },
-    [setSortBy],
-  );
-
   const rowFilter = React.useCallback(
     (row: IRow) => {
       const props = row.props as ClusterRowDataProps;
@@ -197,22 +154,60 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
     <>
       <ClustersListToolbar
         searchString={searchString}
-        setSearchString={setSearchString}
+        setSearchString={(_event, value) => setSearchString(value)}
         filters={filters}
         setFilters={setFilters}
       />
-      <Table
-        rows={sortedRows}
-        cells={columns}
-        actionResolver={actionResolver}
-        aria-label="Clusters table"
-        sortBy={sortBy}
-        onSort={onSort}
-        rowWrapper={ClusterRowWrapper}
-        data-testid={'clusters-table'}
-      >
-        <TableHeader />
-        <TableBody rowKey={rowKey} />
+      <Table aria-label="Clusters table" data-testid={'clusters-table'}>
+        <Thead>
+          <Tr>
+            {columns.map((col, i) => (
+              <Th
+                key={`col-${i}`}
+                width={col.cellWidth as BaseCellProps['width']}
+                sort={getSortParams(i)}
+              >
+                {col.title}
+              </Th>
+            ))}
+            <Th key="col-action" />
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedRows.map((row, i) => (
+            <Tr {...getRowProps(row.props as ClusterRowDataProps)} key={`row-${i}`}>
+              {row.cells?.map((cell, j) => (
+                <Td
+                  dataLabel={columns[j].title}
+                  key={`cell-${i}-${j}`}
+                  {...(cell as HumanizedSortable).props}
+                >
+                  {(cell as HumanizedSortable)?.title}
+                </Td>
+              ))}
+              <Td isActionCell>
+                <ActionsColumn
+                  items={[
+                    {
+                      title: 'Delete',
+                      id: `button-delete-${(row.props as ClusterRowDataProps).name}`,
+                      isDisabled:
+                        getClusterTableStatusCell(row).sortableValue ===
+                        clusterStatusLabels(t).installing,
+                      onClick: () => {
+                        setDeleteClusterID({
+                          id: (row.props as ClusterRowDataProps).id,
+                          name: (row.props as ClusterRowDataProps).name,
+                        });
+                        setDeleteModalOpen(true);
+                      },
+                    },
+                  ]}
+                />
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
       </Table>
       <DeleteClusterModal
         name={deleteClusterID?.name || ''}

package/lib/ocm/components/clusters/NewClusterPage.tsx

@@ -10,24 +10,30 @@ import ClusterLoading from './ClusterLoading';
 import { ClusterUiError } from './ClusterPageErrors';
 import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { AssistedInstallerHeader } from './AssistedInstallerHeader';
+import { ModalDialogsContextProvider } from '../hosts/ModalDialogsContext';
+import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
 
 const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactNode }) => {
   return (
     <AlertsContextProvider>
       <SentryErrorMonitorContextProvider>
-        <ClusterDefaultConfigurationProvider
-          loadingUI={<ClusterLoading />}
-          errorUI={<ClusterUiError />}
-        >
-          <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
-            {pageTitleSection}
-            <PageSection variant={PageSectionVariants.light} isFilled>
-              <ClusterWizardContextProvider>
-                <NewClusterWizard />
-              </ClusterWizardContextProvider>
-            </PageSection>
-          </NewFeatureSupportLevelProvider>
-        </ClusterDefaultConfigurationProvider>
+        <ModalDialogsContextProvider>
+          <ClusterDefaultConfigurationProvider
+            loadingUI={<ClusterLoading />}
+            errorUI={<ClusterUiError />}
+          >
+            <OpenshiftVersionsContextProvider>
+              <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
+                {pageTitleSection}
+                <PageSection variant={PageSectionVariants.light} isFilled>
+                  <ClusterWizardContextProvider>
+                    <NewClusterWizard />
+                  </ClusterWizardContextProvider>
+                </PageSection>
+              </NewFeatureSupportLevelProvider>
+            </OpenshiftVersionsContextProvider>
+          </ClusterDefaultConfigurationProvider>
+        </ModalDialogsContextProvider>
       </SentryErrorMonitorContextProvider>
     </AlertsContextProvider>
   );

package/lib/ocm/components/featureSupportLevels/FeatureSupportLevelProvider.tsx

@@ -6,7 +6,7 @@ import {
   SupportedCpuArchitecture,
   getDefaultCpuArchitecture,
 } from '../../../common';
-import { useOpenshiftVersions, usePullSecret } from '../../hooks';
+import { usePullSecret } from '../../hooks';
 import { getNewFeatureDisabledReason, isFeatureSupportedAndAvailable } from './featureStateUtils';
 import useInfraEnv from '../../hooks/useInfraEnv';
 import {
@@ -21,6 +21,7 @@ import {
   SupportLevel,
   SupportLevels,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
 
 export type NewSupportLevelProviderProps = PropsWithChildren<{
   clusterFeatureUsage?: string;
@@ -43,7 +44,7 @@ export const NewFeatureSupportLevelProvider: React.FC<NewSupportLevelProviderPro
   openshiftVersion,
   platformType,
 }) => {
-  const { loading: loadingOCPVersions } = useOpenshiftVersions();
+  const { loading: loadingOCPVersions } = useOpenshiftVersionsContext();
   const pullSecret = usePullSecret();
   const { infraEnv, isLoading: isInfraEnvLoading } = useInfraEnv(
     cluster?.id || '',

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -9,14 +9,14 @@ import {
   PreviewSupportLevel,
   isPreviewSupportLevel,
 } from '../../../common/types';
-import { TECH_SUPPORT_LEVEL_LINK } from '../../../common/config/constants';
+import { TECH_SUPPORT_LEVEL_LINK } from '../../../common/config/docs_links';
 import ExternalLink from '../../../common/components/ui/ExternalLink';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { DetailItem } from '../../../common';
+import { DetailItem, UiIcon } from '../../../common';
 import { getLimitedFeatureSupportLevels } from '../../../common/components/newFeatureSupportLevels/utils';
 import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import useOpenshiftVersions from '../../hooks/useOpenshiftVersions';
+import { useOpenshiftVersionsContext } from '../clusterWizard/OpenshiftVersionsContext';
 import { TFunction } from 'i18next';
 import {
   NewFeatureSupportLevelData,
@@ -86,13 +86,13 @@ export const LimitedSupportedCluster = ({
   <TextContent>
     {showVersionWarning && (
       <Text>
-        <InfoCircleIcon size="sm" color="var(--pf-global--info-color--100)" />
+        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
         &nbsp;The installed OpenShift version is not production-ready
       </Text>
     )}
     {Object.keys(clusterFeatureSupportLevels).length > 0 && (
       <>
-        <InfoCircleIcon size="sm" color="var(--pf-global--info-color--100)" />
+        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
         &nbsp;Your cluster will be subject to support limitations because it includes:
         <TextList>{getPreviewFeatureList(clusterFeatureSupportLevels)}</TextList>
       </>
@@ -141,7 +141,7 @@ export const getSupportLevelInfo = (
 const SupportLevel = ({ cluster }: SupportLevelProps) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
-  const { isSupportedOpenShiftVersion } = useOpenshiftVersions();
+  const { isSupportedOpenShiftVersion } = useOpenshiftVersionsContext();
 
   const { limitedClusterFeatures, hasSupportedVersion, isFullySupported } =
     React.useMemo<SupportLevelMemo>(
@@ -166,7 +166,7 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
           />
         )
       }
-      classNameValue={'pf-u-mb-md'}
+      classNameValue={'pf-v5-u-mb-md'}
       testId="feature-support-levels"
     />
   );