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

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

@@ -1,24 +1,29 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const ClusterUpdateErrorModal = () => (
-  <Modal
-    title="Unable to update cluster"
-    isOpen
-    variant={ModalVariant.small}
-    showClose={false}
-    titleIconVariant="danger"
-    actions={[
+  <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
+    <ModalHeader title="Unable to update cluster" titleIconVariant="danger" />
+    <ModalBody>
+      The service is down, undergoing maintenance, or experiencing another issue.
+    </ModalBody>
+    <ModalFooter>
       <Button
         key="refresh"
         variant={ButtonVariant.primary}
         onClick={() => window.location.reload()}
       >
         Refresh page
-      </Button>,
-    ]}
-  >
-    The service is down, undergoing maintenance, or experiencing another issue.
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

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

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

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

@@ -21,7 +21,7 @@ const ExpandableSectionTitle = ({
 }) => (
   <span>
     {`Host inventory ${hostsCount > 0 ? `(${hostsCount})` : ''}`}
-    {icon && <span className="pf-v5-u-ml-sm">{icon}</span>}
+    {icon && <span className="pf-v6-u-ml-sm">{icon}</span>}
   </span>
 );
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { UiIcon, getOpenshiftVersionText } from '../../../common';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -10,19 +10,17 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
 
   const hint = (
-    <TextContent>
-      <Text component={TextVariants.p}>
-        {t('ai:Please note that this version is not production-ready.')}
-      </Text>
-    </TextContent>
+    <Content component={ContentVariants.p}>
+      {t('ai:Please note that this version is not production-ready.')}
+    </Content>
   );
   return (
-    <Text component="p">
+    <Content component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
         <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
       </Popover>
-    </Text>
+    </Content>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, AlertActionLink, Text, TextContent } from '@patternfly/react-core';
+import { Alert, AlertActionLink, Content } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   RenderIf,
@@ -124,14 +124,12 @@ export const HostsInstallationFailed = ({
   } else {
     title = 'Initialization failed';
     message = (
-      <TextContent>
-        <Text component="p">
-          {toSentence(cluster.statusInfo)}
-          <br />
-          Reset the installation process to return to the configuration and try again. Some hosts
-          may need to be re-registered by rebooting into the Discovery ISO.
-        </Text>
-      </TextContent>
+      <Content component="p">
+        {toSentence(cluster.statusInfo)}
+        <br />
+        Reset the installation process to return to the configuration and try again. Some hosts may
+        need to be re-registered by rebooting into the Discovery ISO.
+      </Content>
     );
   }
 

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

@@ -2,11 +2,13 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import {
   Button,
+  ButtonVariant,
+  Content,
   Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-  ButtonVariant,
-  Text,
-  TextContent,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
@@ -70,26 +72,26 @@ const ResetClusterModal: React.FC = () => {
     }
 
     return (
-      <TextContent>
-        <Text component="p">
+      <>
+        <Content component="p">
           This will reset the installation and return to the cluster configuration. Some hosts may
           need to be re-registered by rebooting into the Discovery ISO.
-        </Text>
+        </Content>
 
-        <Text component="p">
+        <Content component="p">
           <strong>Download the installation logs</strong> to troubleshoot or report a bug.
           <br />
           Currently, {collectedLogsPercentage}% of the installation logs were collected and are
           ready for download.
-        </Text>
+        </Content>
 
-        <Text component="p">
+        <Content component="p">
           <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} /> Logs won't be
           available after the installation is reset.
-        </Text>
+        </Content>
 
-        <Text component="p">Are you sure you want to reset the cluster?</Text>
-      </TextContent>
+        <Content component="p">Are you sure you want to reset the cluster?</Content>
+      </>
     );
   };
 
@@ -116,14 +118,10 @@ const ResetClusterModal: React.FC = () => {
   );
 
   return (
-    <Modal
-      title="Reset Cluster Installation"
-      isOpen={isOpen}
-      variant={ModalVariant.small}
-      actions={actions}
-      onClose={handleClose}
-    >
-      {getModalContent()}
+    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={handleClose}>
+      <ModalHeader title="Reset Cluster Installation" />
+      <ModalBody>{getModalContent()}</ModalBody>
+      <ModalFooter>{actions}</ModalFooter>
     </Modal>
   );
 };

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

@@ -24,6 +24,8 @@ import {
   UISettingService,
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
+import BundleService from '../../services/BundleService';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsProps = {
   cluster?: Cluster;
@@ -44,6 +46,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
     latestVersions: versions,
   } = useOpenShiftVersionsContext();
   const location = useLocation();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const handleClusterUpdate = React.useCallback(
     async (
@@ -81,11 +84,27 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
-        //For Assisted Migration we need to LVMs operator
+        //For Assisted Migration we need the LVMs operator and also the virtualization bundle operators
         if (isAssistedMigration) {
           params.olmOperators = [{ name: 'lvm' }];
+          const selectedBundle = (
+            await BundleService.listBundles(
+              params.openshiftVersion,
+              params.cpuArchitecture,
+              params.platform?.type,
+            )
+          ).find((b) => b.id === 'virtualization');
+          const virtOperators = selectedBundle?.operators;
+          params.olmOperators = [
+            ...params.olmOperators,
+            ...(virtOperators ? virtOperators.map((op) => ({ name: op })) : []),
+          ];
         }
-        const cluster = await ClustersService.create(params, isAssistedMigration);
+        const cluster = await ClustersService.create(
+          params,
+          isAssistedMigration,
+          isSingleClusterFeatureEnabled,
+        );
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
         const uiPatch: UISettingsValues = { addCustomManifests };
@@ -105,7 +124,15 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, location.search, navigate, clusterWizardContext, addAlert, dispatch],
+    [
+      clearAlerts,
+      location.search,
+      isSingleClusterFeatureEnabled,
+      navigate,
+      clusterWizardContext,
+      addAlert,
+      dispatch,
+    ],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { Grid, GridItem, Split, SplitItem } from '@patternfly/react-core';
+import { Flex, Grid, GridItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -11,7 +11,7 @@ import {
   getRichTextValidation,
   CpuArchitecture,
   useAlerts,
-  DeveloperPreview,
+  TechnologyPreview,
 } from '../../../common';
 import { canNextClusterDetails } from './wizardTransition';
 import { OpenshiftVersionOptionType, getFormikErrorFields } from '../../../common';
@@ -167,14 +167,13 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               </GridItem>
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
-                  <Split>
-                    <SplitItem>
-                      <InstallDisconnectedSwitch isDisabled={!!cluster} />
-                    </SplitItem>
-                    <SplitItem>
-                      <DeveloperPreview />
-                    </SplitItem>
-                  </Split>
+                  <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+                    <TechnologyPreview />
+                    <InstallDisconnectedSwitch isDisabled={!!cluster} />
+                    <span>
+                      {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
+                    </span>
+                  </Flex>
                 </GridItem>
               )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>

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

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

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

@@ -3,6 +3,7 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { UISettingsValues } from '../../../common';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -20,6 +21,8 @@ export type ClusterWizardContextType = {
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
+  disconnectedInfraEnv?: InfraEnv;
+  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

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

@@ -92,6 +92,9 @@ const ClusterWizardContextProvider = ({
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>(
+    infraEnv,
+  );
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -259,6 +262,8 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
@@ -273,6 +278,7 @@ const ClusterWizardContextProvider = ({
     installDisconnected,
     setInstallDisconnected,
     connectedWizardStepIds,
+    disconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

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

@@ -17,6 +17,8 @@ import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
+import ClustersService from '../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../common/api';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -71,6 +73,7 @@ type ClusterWizardFooterProps = WizardFooterGenericProps & {
   errorFields?: string[];
   alertTitle?: string;
   alertContent?: string | null;
+  disconnectedClusterId?: string;
 };
 
 const ClusterWizardFooter = ({
@@ -80,19 +83,37 @@ const ClusterWizardFooter = ({
   alertTitle,
   alertContent,
   onCancel,
+  disconnectedClusterId,
   ...rest
 }: ClusterWizardFooterProps) => {
-  const { alerts } = useAlerts();
+  const { alerts, addAlert } = useAlerts();
   const navigate = useNavigate();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { currentStepId } = useClusterWizardContext();
   const { resetSingleClusterDialog } = useModalDialogsContext();
+  const { setDisconnectedInfraEnv } = useClusterWizardContext();
 
-  const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
+  const handleCancel = React.useCallback(async () => {
+    if (disconnectedClusterId) {
+      try {
+        await ClustersService.remove(disconnectedClusterId);
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to remove cluster',
+            message: getApiErrorMessage(e),
+          }),
+        );
+      }
+    }
+    setDisconnectedInfraEnv(undefined);
+    navigate('/cluster-list');
+  }, [navigate, setDisconnectedInfraEnv, addAlert, disconnectedClusterId]);
 
-  const handleReset = React.useCallback(() => {
-    resetSingleClusterDialog.open({ cluster });
-  }, [resetSingleClusterDialog, cluster]);
+  const handleReset = React.useCallback(
+    () => resetSingleClusterDialog.open({ cluster }),
+    [resetSingleClusterDialog, cluster],
+  );
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 
@@ -119,6 +140,7 @@ const ClusterWizardFooter = ({
       cluster={cluster}
       onFetchEvents={onFetchEvents}
       {...rest}
+      data-testid="cluster-wizard-footer"
     />
   );
 };

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

@@ -59,6 +59,7 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         isCurrent={clusterWizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
         isValid={() => isStepValid(stepId, cluster)}
+        data-testid={`cluster-wizard-nav-item-${stepId}`}
       />
     );
   };
@@ -72,8 +73,12 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
+        data-testid={`cluster-wizard-nav-item-static-network-configuration-form-view`}
       >
-        <WizardNav isInnerList>
+        <WizardNav
+          isInnerList
+          data-testid="cluster-wizard-nav-item-static-network-configuration-form-view-inner-list"
+        >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}
@@ -99,7 +104,7 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
     return navItems;
   };
 
-  return <WizardNav>{getWizardNavItems()}</WizardNav>;
+  return <WizardNav data-testid="cluster-wizard-nav">{getWizardNavItems()}</WizardNav>;
 };
 
 export default ClusterWizardNavigation;

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

@@ -22,6 +22,7 @@ import {
   Cluster,
   V2ClusterUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import useLateBinding from '../../hooks/useLateBinding';
 
 const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const { alerts } = useAlerts();
@@ -29,12 +30,14 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const clusterWizardContext = useClusterWizardContext();
   const isAutoSaveRunning = useFormikAutoSave();
   const errorFields = getFormikErrorFields(errors, touched);
+  const isBinding = useLateBinding(cluster);
 
   const isNextDisabled =
     !isValid ||
     !!alerts.length ||
     isAutoSaveRunning ||
     isSubmitting ||
+    isBinding ||
     !canNextHostDiscovery({ cluster });
 
   const footer = (

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

@@ -4,6 +4,7 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
@@ -12,6 +13,8 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     default:
       return <ClusterDetails />;
   }
@@ -20,7 +23,7 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
 const NewClusterWizard: React.FC = () => {
   const { currentStepId } = useClusterWizardContext();
   return (
-    <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
+    <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
       {getCurrentStep(currentStepId)}
     </div>
   );

package/lib/ocm/components/clusterWizard/OperatorsBundle.css

@@ -1,6 +1,6 @@
 .ai-bundle-card {
-  --pf-v5-c-card--m-selectable--m-selected--BackgroundColor: var(
-    --pf-v5-global--BackgroundColor--100
+  --pf-v6-c-card--m-selectable--m-selected--BackgroundColor: var(
+    --pf-v6-global--BackgroundColor--100
   );
-  --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v6-c-card--m-selectable--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
 }

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

@@ -8,8 +8,6 @@ import {
   GalleryItem,
   List,
   ListItem,
-  Split,
-  SplitItem,
   Stack,
   StackItem,
   Title,
@@ -19,20 +17,14 @@ import {
   Bundle,
   PreflightHardwareRequirements,
 } from '@openshift-assisted/types/assisted-installer-service';
-import NewFeatureSupportLevelBadge, {
-  NewSupportLevelBadgeProps,
-} from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
 import { useFormikContext } from 'formik';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { useFeature } from '../../hooks/use-feature';
-import { useSelector } from 'react-redux';
-import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
 import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
 import {
   highlightMatch,
-  OperatorSpec,
   useOperatorSpecs,
 } from '../../../common/components/operators/operatorSpecs';
 import { useClusterWizardContext } from './ClusterWizardContext';
@@ -78,27 +70,6 @@ const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: stri
   );
 };
 
-const getBundleSupportLevel = (
-  bundle: Bundle,
-  opSpecsByKey: Record<string, OperatorSpec>,
-): NewSupportLevelBadgeProps['supportLevel'] => {
-  let supportLevel: NewSupportLevelBadgeProps['supportLevel'] = undefined;
-  if (bundle.operators) {
-    for (const op of bundle.operators) {
-      const operatorSpec = opSpecsByKey[op];
-      if (operatorSpec) {
-        if (operatorSpec.supportLevel === 'dev-preview') {
-          supportLevel = 'dev-preview';
-          break;
-        } else if (operatorSpec.supportLevel === 'tech-preview') {
-          supportLevel = 'tech-preview';
-        }
-      }
-    }
-  }
-  return supportLevel;
-};
-
 const BundleCard = ({
   bundle,
   bundles,
@@ -111,13 +82,10 @@ const BundleCard = ({
   searchTerm?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
-  const isSNO = useSelector(selectIsCurrentClusterSNO);
   const { isFeatureSupported } = useNewFeatureSupportLevel();
   const { byKey: opSpecs } = useOperatorSpecs();
   const { uiSettings } = useClusterWizardContext();
 
-  const supportLevel = getBundleSupportLevel(bundle, opSpecs);
-
   const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
     const operatorSpec = opSpecs[op];
     if (!operatorSpec) {
@@ -134,14 +102,14 @@ const BundleCard = ({
   const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
     ? 'Some operators in this bundle are not supported with the current configuration.'
-    : isSNO && bundleSpec?.noSNO
-    ? 'This bundle is not available when deploying a Single Node OpenShift.'
     : incompatibleBundle
     ? `Bundle cannot be installed together with ${
         bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
       }`
     : isAssistedMigration
     ? 'This bundle needs to be selected for clusters created from Migration Assessment'
+    : !bundles.some((b) => b.id === bundle.id)
+    ? 'This bundle is not available for the current configuration, you might be able to use the standalone operators instead.'
     : undefined;
 
   const onSelect = (checked: boolean) => {
@@ -190,17 +158,6 @@ const BundleCard = ({
             <StackItem isFilled>
               <div>{highlightMatch(bundle.description || '', searchTerm)}</div>
             </StackItem>
-            <StackItem>
-              <Split>
-                <SplitItem isFilled />
-                <SplitItem>
-                  <NewFeatureSupportLevelBadge
-                    featureId={bundle.id || ''}
-                    supportLevel={supportLevel}
-                  />
-                </SplitItem>
-              </Split>
-            </StackItem>
           </Stack>
         </CardBody>
       </Card>
@@ -210,10 +167,12 @@ const BundleCard = ({
 
 const OperatorsBundle = ({
   bundles,
+  allBundles,
   preflightRequirements,
   searchTerm,
 }: {
   bundles: Bundle[];
+  allBundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
 }) => {
@@ -223,18 +182,18 @@ const OperatorsBundle = ({
     <Stack hasGutter>
       <StackItem>
         <Title headingLevel="h2" size="lg">
-          {bundles.length > 0 ? 'Bundles' : ''}
+          {allBundles.length > 0 ? 'Bundles' : ''}
         </Title>
       </StackItem>
       <StackItem>
         <Gallery hasGutter minWidths={{ default: '350px' }}>
           {(isSingleClusterFeatureEnabled
-            ? bundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
-            : bundles
+            ? allBundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
+            : allBundles
           ).map((bundle) => (
             <GalleryItem key={bundle.id}>
               <BundleCard
-                bundle={bundle}
+                bundle={bundles.find((b) => b.id === bundle.id) || bundle}
                 bundles={bundles}
                 preflightRequirements={preflightRequirements}
                 searchTerm={searchTerm}