@openshift-assisted/ui-lib 2.16.5-cim → 2.17.0-cim

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -3,7 +3,7 @@ import ClusterWizardFooter from '../ClusterWizardFooter';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import {
   ClusterWizardStep,
-  DeveloperPreview,
+  TechnologyPreview,
   PULL_SECRET_INFO_LINK,
   singleClusterOperators,
 } from '../../../../common';
@@ -14,9 +14,6 @@ import {
   SplitItem,
   Alert,
   Grid,
-  Text,
-  TextContent,
-  TextVariants,
   DescriptionList,
   DescriptionListGroup,
   DescriptionListTerm,
@@ -25,18 +22,22 @@ import {
   ListItem,
   ListComponent,
   OrderType,
+  Content,
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import { saveAs } from 'file-saver';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom-v5-compat';
 
 import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
-
-const downloadUrl =
-  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
+import ClustersService from '../../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
 
 const ReviewStep = () => {
-  const { moveBack } = useClusterWizardContext();
+  const { moveBack, disconnectedInfraEnv, setDisconnectedInfraEnv } = useClusterWizardContext();
+  const { clusterId } = useParams<{ clusterId: string }>();
+  const { addAlert } = useAlerts();
   const opSpecs = getOperatorSpecs(() => undefined);
   const navigate = useNavigate();
 
@@ -52,11 +53,40 @@ const ReviewStep = () => {
         footer={
           <ClusterWizardFooter
             onNext={() => {
-              downloadUrl && saveAs(downloadUrl);
-              navigate('/cluster-list');
+              void (async () => {
+                if (disconnectedInfraEnv?.downloadUrl) {
+                  saveAs(disconnectedInfraEnv.downloadUrl);
+                }
+                if (clusterId) {
+                  try {
+                    await ClustersService.remove(clusterId);
+                    // Remove infraEnv from wizard context after successful deregistration
+                    setDisconnectedInfraEnv(undefined);
+                    // Navigate to cluster-list only after successful deregistration
+                    navigate('/cluster-list');
+                  } catch (error) {
+                    handleApiError(error, () => {
+                      addAlert({
+                        title: 'Failed to deregister cluster',
+                        message: getApiErrorMessage(error),
+                        variant: AlertVariant.danger,
+                      });
+                    });
+                    // Error handling: continue with navigation even if deregistration fails
+                    // Still clear the context to avoid stale data
+                    setDisconnectedInfraEnv(undefined);
+                    // Navigate even on error to avoid getting stuck
+                    navigate('/cluster-list');
+                  }
+                } else {
+                  // If there's no cluster to deregister, navigate immediately
+                  navigate('/cluster-list');
+                }
+              })();
             }}
             onBack={moveBack}
             nextButtonText="Download ISO"
+            disconnectedClusterId={clusterId}
           />
         }
       >
@@ -64,12 +94,10 @@ const ReviewStep = () => {
           <Grid hasGutter>
             <Split>
               <SplitItem>
-                <TextContent>
-                  <Text component={TextVariants.h2}>Review and download ISO</Text>
-                </TextContent>
+                <Content component="h2">Review and download ISO</Content>
               </SplitItem>
               <SplitItem>
-                <DeveloperPreview />
+                <TechnologyPreview />
               </SplitItem>
             </Split>
             <Alert isInline variant="info" title="Discovery ISO boot instructions">
@@ -102,7 +130,7 @@ const ReviewStep = () => {
             <DescriptionList isHorizontal>
               <DescriptionListGroup>
                 <DescriptionListTerm>OpenShift version</DescriptionListTerm>
-                <DescriptionListDescription>4.19</DescriptionListDescription>
+                <DescriptionListDescription>4.20</DescriptionListDescription>
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>CPU architecture</DescriptionListTerm>
@@ -110,7 +138,7 @@ const ReviewStep = () => {
               </DescriptionListGroup>
               <DescriptionListGroup>
                 <DescriptionListTerm>ISO size</DescriptionListTerm>
-                <DescriptionListDescription>approx. 35GB</DescriptionListDescription>
+                <DescriptionListDescription>approx. 43.5GB</DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>
           </Grid>

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

@@ -2,4 +2,5 @@ export { default as ClusterDetailsForm } from './ClusterDetailsForm';
 export { default as NewClusterWizard } from './NewClusterWizard';
 export { default as ClusterWizard } from './ClusterWizard';
 export { default as ClusterWizardContextProvider } from './ClusterWizardContextProvider';
+export { useClusterWizardContext } from './ClusterWizardContext';
 export { OpenShiftVersionsContextProvider } from './OpenShiftVersionsContext';

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

@@ -31,7 +31,8 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
-  | 'disconnected-review';
+  | 'disconnected-review'
+  | 'disconnected-optional-configurations';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -49,6 +50,7 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
+  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
@@ -260,6 +262,7 @@ const credentialsValidationMap = buildEmptyValidationsMap();
 const customManifestsValidationsMap = buildEmptyValidationsMap();
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
+const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -275,6 +278,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   'credentials-download': credentialsValidationMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
+  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TextContent, Text, Split, SplitItem } from '@patternfly/react-core';
+import { Content, Split, SplitItem } from '@patternfly/react-core';
 import {
   ASSISTED_INSTALLER_DOCUMENTATION_LINK,
-  DeveloperPreview,
+  TechnologyPreview,
   ExternalLink,
   isInOcm,
 } from '../../../common';
@@ -11,11 +11,11 @@ import { useFeature } from '../../hooks/use-feature';
 export const AssistedInstallerHeader = () => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   return (
-    <TextContent>
-      <Text component="h1" className="pf-v5-u-display-inline">
+    <>
+      <Content component="h1" className="pf-v6-u-display-inline">
         Install OpenShift with the Assisted Installer
-      </Text>
-      {isSingleClusterFeatureEnabled && <DeveloperPreview />}
+      </Content>
+      {isSingleClusterFeatureEnabled && <TechnologyPreview />}
       <Split hasGutter>
         <SplitItem>
           <ExternalLink href={ASSISTED_INSTALLER_DOCUMENTATION_LINK}>
@@ -24,12 +24,12 @@ export const AssistedInstallerHeader = () => {
         </SplitItem>
         {isInOcm && (
           <SplitItem>
-            <Text component="a" data-testid="whats-new-link">
+            <Content component="a" data-testid="whats-new-link" hidden={true}>
               What's new in Assisted Installer?
-            </Text>
+            </Content>
           </SplitItem>
         )}
       </Split>
-    </TextContent>
+    </>
   );
 };

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

@@ -1,17 +1,12 @@
 import React from 'react';
-import {
-  PageSectionVariants,
-  Breadcrumb,
-  BreadcrumbItem,
-  PageSection,
-} from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbItem, PageSection } from '@patternfly/react-core';
 import { Link } from 'react-router-dom-v5-compat';
 import { isInOcm } from '../../../common/api';
 
 const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
-  <PageSection variant={PageSectionVariants.light}>
+  <PageSection hasBodyWrapper={false}>
     {(clusterName || isInOcm) && (
-      <Breadcrumb>
+      <Breadcrumb data-testid="cluster-breadcrumbs">
         {isInOcm && (
           <BreadcrumbItem
             data-testid="cluster-list-breadcrumb"

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

@@ -1,9 +1,9 @@
-import { PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core';
 import { LoadingState } from '../../../common';
 import React from 'react';
 
 const ClusterLoading = () => (
-  <PageSection variant={PageSectionVariants.light} isFilled>
+  <PageSection hasBodyWrapper={false} isFilled>
     <LoadingState />
   </PageSection>
 );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams, Navigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
-import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core';
+import { PageSection, Content } from '@patternfly/react-core';
 import {
   AddHostsContextProvider,
   AlertsContextProvider,
@@ -90,12 +90,10 @@ const ClusterPageGeneric = ({
       return (
         <>
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">{cluster.name}</Text>
-            </TextContent>
+          <PageSection hasBodyWrapper={false}>
+            <Content component="h1">{cluster.name}</Content>
           </PageSection>
-          <PageSection variant={PageSectionVariants.light} isFilled>
+          <PageSection hasBodyWrapper={false} isFilled>
             <ClusterDetail cluster={cluster} />
           </PageSection>
         </>
@@ -105,12 +103,12 @@ const ClusterPageGeneric = ({
         <>
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
           {showBreadcrumbs && (
-            <PageSection variant={PageSectionVariants.light}>
+            <PageSection hasBodyWrapper={false}>
               <AssistedInstallerHeader />
             </PageSection>
           )}
 
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection hasBodyWrapper={false}>
             <ClusterWizardContextProvider cluster={cluster} infraEnv={infraEnv}>
               <ClusterWizard
                 cluster={cluster}
@@ -133,7 +131,7 @@ const ClusterPageGeneric = ({
       return <Navigate to={`${routeBasePath}/clusters`} />;
     }
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
+      <PageSection hasBodyWrapper={false} isFilled>
         <ErrorState
           title="Failed to fetch the cluster"
           fetchData={
@@ -147,7 +145,7 @@ const ClusterPageGeneric = ({
 
   if (infraEnvError) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
+      <PageSection hasBodyWrapper={false} isFilled>
         <ErrorState
           title="Cluster details not found"
           actions={[<BackButton key={'cancel'} to={`..`} />]}
@@ -205,7 +203,7 @@ export const SingleClusterPage = ({
   resetModal: React.ReactNode;
 }) => (
   <AlertsContextProvider>
-    <PageSection variant={PageSectionVariants.light}>
+    <PageSection hasBodyWrapper={false} isFilled>
       <AssistedInstallerHeader />
     </PageSection>
     <ClusterPageGeneric clusterId={clusterId} resetModal={resetModal} />

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core';
 import { ErrorState } from '../../../common';
 import { BackButton } from '../ui/Buttons/BackButton';
 
 export const ClusterUiError = () => (
-  <PageSection variant={PageSectionVariants.light} isFilled>
+  <PageSection hasBodyWrapper={false} isFilled>
     <ErrorState
       title="Failed to retrieve the default configuration"
       actions={[<BackButton key={'cancel'} to={'..'} />]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 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';

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

@@ -1,13 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import {
-  Button,
-  ButtonVariant,
-  PageSectionVariants,
-  TextContent,
-  Text,
-  PageSection,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Content, PageSection } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
 import {
   ResourceUIState,
@@ -79,13 +72,13 @@ const Clusters = () => {
   switch (uiState.current) {
     case LOADING:
       return (
-        <PageSection variant={PageSectionVariants.light} isFilled>
+        <PageSection hasBodyWrapper={false} isFilled>
           <LoadingState />
         </PageSection>
       );
     case EMPTY:
       return (
-        <PageSection variant={PageSectionVariants.light} isFilled>
+        <PageSection hasBodyWrapper={false} isFilled>
           <EmptyState
             icon={AddCircleOIcon}
             title="Create new assisted cluster"
@@ -106,7 +99,7 @@ const Clusters = () => {
     default:
       if (clusterRows.length === 0 && uiState.current === POLLING_ERROR) {
         return (
-          <PageSection variant={PageSectionVariants.light} isFilled>
+          <PageSection hasBodyWrapper={false} isFilled>
             <ErrorState title="Failed to fetch clusters." fetchData={fetchClusters} />
           </PageSection>
         );
@@ -114,12 +107,10 @@ const Clusters = () => {
         return (
           <>
             <ClusterBreadcrumbs />
-            <PageSection variant={PageSectionVariants.light}>
-              <TextContent>
-                <Text component="h1">Assisted Clusters</Text>
-              </TextContent>
+            <PageSection hasBodyWrapper={false}>
+              <Content component="h1">Assisted Clusters</Content>
             </PageSection>
-            <PageSection variant={PageSectionVariants.light} isFilled>
+            <PageSection hasBodyWrapper={false} isFilled>
               <Alerts />
               <ClustersTable rows={clusterRows} deleteCluster={deleteClusterAsync} />
             </PageSection>

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

@@ -85,7 +85,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     onSelect('status', isSelectEventChecked(event), value);
   };
 
-  const onDeleteChip: ToolbarFilterProps['deleteChip'] = (type, id) => {
+  const onDeleteLabel: ToolbarFilterProps['deleteLabel'] = (type, id) => {
     if (type) {
       setFilters({
         ...filters,
@@ -96,7 +96,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     }
   };
 
-  const onDeleteChipGroup: ToolbarFilterProps['deleteChipGroup'] = (type) => {
+  const onDeleteLabelGroup: ToolbarFilterProps['deleteLabelGroup'] = (type) => {
     setFilters({
       ...filters,
       [type as string]: [],
@@ -135,9 +135,9 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
           </InputGroup>
         </ToolbarItem>
         <CustomToolbarFilter
-          chips={filters.status}
-          deleteChip={onDeleteChip}
-          deleteChipGroup={onDeleteChipGroup}
+          labels={filters.status}
+          deleteLabel={onDeleteLabel}
+          deleteLabelGroup={onDeleteLabelGroup}
           categoryName="status"
         >
           <Dropdown
@@ -180,8 +180,10 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         >
           Create Cluster
         </ToolbarButton>
-        {clustersUIState === ResourceUIState.RELOADING && <Spinner size="lg" />}
-        <ToolbarGroup align={{ lg: 'alignRight' }}>
+        {clustersUIState === ResourceUIState.RELOADING && (
+          <Spinner size="lg" data-testid="clusters-list-toolbar-spinner" />
+        )}
+        <ToolbarGroup align={{ lg: 'alignEnd' }}>
           <ToolbarButton
             variant={ButtonVariant.plain}
             onClick={() => fetchClusters()}

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

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 type DeleteClusterModalProps = {
   name: string;
@@ -17,12 +24,13 @@ const DeleteClusterModal: React.FC<DeleteClusterModalProps> = ({
   isOpen,
 }) => (
   <Modal
-    title="Delete cluster"
     isOpen={isOpen}
-    onClose={onClose}
+    onClose={isDeleteInProgress ? undefined : () => onClose()}
     variant={ModalVariant.small}
-    showClose={!isDeleteInProgress}
-    actions={[
+  >
+    <ModalHeader title="Delete cluster" />
+    <ModalBody>Are you sure you want to delete cluster {name} ?</ModalBody>
+    <ModalFooter>
       <Button
         data-testid="delete-cluster-submit"
         key="confirm"
@@ -32,13 +40,11 @@ const DeleteClusterModal: React.FC<DeleteClusterModalProps> = ({
         isLoading={isDeleteInProgress}
       >
         Delete
-      </Button>,
+      </Button>
       <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleteInProgress}>
         Cancel
-      </Button>,
-    ]}
-  >
-    Are you sure you want to delete cluster {name} ?
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSectionVariants, PageSection } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core';
 import { AlertsContextProvider } from '../../../common';
 import ClusterBreadcrumbs from './ClusterBreadcrumbs';
 import { ClusterDefaultConfigurationProvider } from '../clusterConfiguration/ClusterDefaultConfigurationContext';
@@ -25,10 +25,10 @@ const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) =
             <OpenShiftVersionsContextProvider>
               <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
                 {children}
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection hasBodyWrapper={false} isFilled>
                   <AssistedInstallerHeader />
                 </PageSection>
-                <PageSection variant={PageSectionVariants.light} isFilled>
+                <PageSection hasBodyWrapper={false} isFilled>
                   <ClusterWizardContextProvider>
                     <NewClusterWizard />
                   </ClusterWizardContextProvider>

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

@@ -1,8 +1,9 @@
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import React from 'react';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { Text, TextList, TextListItem, TextContent } from '@patternfly/react-core';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { t_global_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
+import { Content } from '@patternfly/react-core';
 import {
   FeatureId,
   FeatureIdToSupportLevel,
@@ -22,6 +23,7 @@ import {
   NewFeatureSupportLevelData,
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
+import { useFeature } from '../../hooks/use-feature';
 
 const getFeatureReviewText = (featureId: FeatureId): string => {
   switch (featureId) {
@@ -64,14 +66,16 @@ const getPreviewFeatureList = (supportLevelMap: FeatureIdToSupportLevel) => {
     return null;
   }
   const featureList = previewSupportLevels[supportLevel].map((featureId: FeatureId) => (
-    <TextListItem key={featureId}>{getFeatureReviewText(featureId)}</TextListItem>
+    <Content component="li" key={featureId}>
+      {getFeatureReviewText(featureId)}
+    </Content>
   ));
   return (
     <>
-      <TextListItem>
+      <Content component="li">
         {getPreviewSupportLevelTitle(supportLevel)}
-        <TextList>{featureList}</TextList>
-      </TextListItem>
+        <Content component="ul">{featureList}</Content>
+      </Content>
     </>
   );
 };
@@ -83,21 +87,21 @@ export const LimitedSupportedCluster = ({
   clusterFeatureSupportLevels: FeatureIdToSupportLevel;
   showVersionWarning: boolean;
 }) => (
-  <TextContent>
+  <>
     {showVersionWarning && (
-      <Text>
-        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
+      <Content component="p">
+        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
         &nbsp;The installed OpenShift version is not production-ready
-      </Text>
+      </Content>
     )}
     {Object.keys(clusterFeatureSupportLevels).length > 0 && (
       <>
-        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
+        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
         &nbsp;Your cluster will be subject to support limitations because it includes:
-        <TextList>{getPreviewFeatureList(clusterFeatureSupportLevels)}</TextList>
+        <Content component="ul">{getPreviewFeatureList(clusterFeatureSupportLevels)}</Content>
       </>
     )}
-  </TextContent>
+  </>
 );
 
 export const FullySupportedCluster = () => (
@@ -124,6 +128,7 @@ export const getSupportLevelInfo = (
   featureSupportLevelData: NewFeatureSupportLevelData,
   isSupportedOpenShiftVersion: (version?: string) => boolean,
   t: TFunction,
+  isSingleClusterFeatureEnabled?: boolean,
 ) => {
   const limitedClusterFeatures = getLimitedFeatureSupportLevels(
     cluster,
@@ -134,7 +139,10 @@ export const getSupportLevelInfo = (
   return {
     limitedClusterFeatures,
     hasSupportedVersion,
-    isFullySupported: hasSupportedVersion && Object.keys(limitedClusterFeatures || {}).length === 0,
+    isFullySupported:
+      hasSupportedVersion &&
+      Object.keys(limitedClusterFeatures || {}).length === 0 &&
+      !isSingleClusterFeatureEnabled,
   };
 };
 
@@ -142,11 +150,25 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
   const { isSupportedOpenShiftVersion } = useOpenShiftVersionsContext();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const { limitedClusterFeatures, hasSupportedVersion, isFullySupported } =
     React.useMemo<SupportLevelMemo>(
-      () => getSupportLevelInfo(cluster, featureSupportLevelData, isSupportedOpenShiftVersion, t),
-      [cluster, featureSupportLevelData, t, isSupportedOpenShiftVersion],
+      () =>
+        getSupportLevelInfo(
+          cluster,
+          featureSupportLevelData,
+          isSupportedOpenShiftVersion,
+          t,
+          isSingleClusterFeatureEnabled,
+        ),
+      [
+        cluster,
+        featureSupportLevelData,
+        t,
+        isSupportedOpenShiftVersion,
+        isSingleClusterFeatureEnabled,
+      ],
     );
 
   if (!limitedClusterFeatures) {
@@ -162,11 +184,11 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
         ) : (
           <LimitedSupportedCluster
             clusterFeatureSupportLevels={limitedClusterFeatures}
-            showVersionWarning={!hasSupportedVersion}
+            showVersionWarning={!hasSupportedVersion || isSingleClusterFeatureEnabled}
           />
         )
       }
-      classNameValue={'pf-v5-u-mb-md'}
+      classNameValue={'pf-v6-u-mb-md'}
       testId="feature-support-levels"
     />
   );

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -294,9 +294,7 @@ const getOpenShiftAIDisabledReason = (
   if (isArm) {
     return `${operatorTitle} is not available when ARM CPU architecture is selected.`;
   }
-  if (isSNO(cluster)) {
-    return `${operatorTitle} is not available when deploying a Single Node OpenShift.`;
-  }
+
   if (!isSupported) {
     return `The installer cannot currently enable ${operatorTitle} with the selected OpenShift version, but it can be enabled later through the OpenShift Console once the installation is complete.`;
   }