@openshift-assisted/ui-lib 2.45.0 → 2.46.0

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/NewClusterWizard.tsx

@@ -20,7 +20,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,9 +17,6 @@ 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';
@@ -32,7 +27,6 @@ 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 +72,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,
@@ -116,8 +89,6 @@ const BundleCard = ({
   const { byKey: opSpecs } = useOperatorSpecs();
   const { uiSettings } = useClusterWizardContext();
 
-  const supportLevel = getBundleSupportLevel(bundle, opSpecs);
-
   const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
     const operatorSpec = opSpecs[op];
     if (!operatorSpec) {
@@ -190,17 +161,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>

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

@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
+import { OperatorsValues } from '../../../common';
+
+// Test the counting logic that was implemented in OperatorsSelect
+function calculateSelectedOperators(
+  values: OperatorsValues,
+  bundles: Bundle[],
+  opSpecs: Record<string, unknown>,
+): string[] {
+  // Calculate all selected operators (direct selections + bundle selections)
+  const bundleOperators = values.selectedBundles.flatMap(
+    (bundleId) => bundles.find((b) => b.id === bundleId)?.operators || [],
+  );
+
+  const allSelectedOperators = values.selectedOperators
+    .concat(bundleOperators)
+    .filter((op, index, array) => array.indexOf(op) === index); // Remove duplicates
+
+  return allSelectedOperators.filter((opKey) => !!opSpecs[opKey]);
+}
+
+describe('OperatorsSelect counting logic', () => {
+  const mockBundles: Bundle[] = [
+    {
+      id: 'virtualization',
+      title: 'Virtualization',
+      description: 'Virtualization bundle',
+      operators: ['cnv', 'nmstate', 'mtv'],
+    },
+    {
+      id: 'openshift-ai',
+      title: 'OpenShift AI',
+      description: 'AI bundle',
+      operators: ['nvidia-gpu', 'authorino', 'odf'],
+    },
+  ];
+
+  const mockOpSpecs = {
+    lvm: { title: 'LVM' },
+    odf: { title: 'ODF' },
+    cnv: { title: 'CNV' },
+    nmstate: { title: 'NMState' },
+    mtv: { title: 'MTV' },
+    'nvidia-gpu': { title: 'NVIDIA GPU' },
+    authorino: { title: 'Authorino' },
+  };
+
+  it('should count only manually selected operators when no bundles are selected', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'odf'],
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(2);
+    expect(result).toContain('lvm');
+    expect(result).toContain('odf');
+  });
+
+  it('should count bundle operators when a bundle is selected', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm'], // 1 manually selected
+      selectedBundles: ['virtualization'], // bundle with 3 operators: cnv, nmstate, mtv
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(4);
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+  });
+
+  it('should not double-count operators that are both manually selected and in a bundle', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'cnv'], // cnv is also in the bundle
+      selectedBundles: ['virtualization'], // bundle with: cnv, nmstate, mtv
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(4);
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+    // cnv should only appear once in the result
+    expect(result.filter((op) => op === 'cnv')).toHaveLength(1);
+  });
+
+  it('should only count operators that have valid specs', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'invalid-operator'], // invalid-operator not in opSpecs
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(1);
+    expect(result).toContain('lvm');
+    expect(result).not.toContain('invalid-operator');
+  });
+
+  it('should handle multiple bundles correctly', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm'],
+      selectedBundles: ['virtualization', 'openshift-ai'], // Two bundles
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(7); // lvm + 3 from virtualization + 3 from openshift-ai
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+    expect(result).toContain('nvidia-gpu');
+    expect(result).toContain('authorino');
+    expect(result).toContain('odf');
+  });
+
+  it('should handle overlapping operators in multiple bundles', () => {
+    const values: OperatorsValues = {
+      selectedOperators: [],
+      selectedBundles: ['virtualization', 'openshift-ai'], // Both bundles have 'odf' (but only virtualization has it in our mock)
+    };
+
+    // Let's modify the virtualization bundle to include odf to test overlap
+    const bundlesWithOverlap: Bundle[] = [
+      {
+        id: 'virtualization',
+        title: 'Virtualization',
+        description: 'Virtualization bundle',
+        operators: ['cnv', 'nmstate', 'mtv', 'odf'], // Added odf
+      },
+      {
+        id: 'openshift-ai',
+        title: 'OpenShift AI',
+        description: 'AI bundle',
+        operators: ['nvidia-gpu', 'authorino', 'odf'], // odf is in both bundles
+      },
+    ];
+
+    const result = calculateSelectedOperators(values, bundlesWithOverlap, mockOpSpecs);
+
+    expect(result).toHaveLength(6); // cnv, nmstate, mtv, odf, nvidia-gpu, authorino (odf not double-counted)
+    expect(result.filter((op) => op === 'odf')).toHaveLength(1); // odf should only appear once
+  });
+
+  it('should handle empty selections correctly', () => {
+    const values: OperatorsValues = {
+      selectedOperators: [],
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(0);
+  });
+});

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

@@ -37,7 +37,6 @@ const OperatorsSelect = ({
   const [supportedOperators, setSupportedOperators] = useStateSafely<string[]>([]);
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { values } = useFormikContext<OperatorsValues>();
-
   React.useEffect(() => {
     const fetchSupportedOperators = async () => {
       try {

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

@@ -7,23 +7,14 @@ import {
   StaticTextField,
   useTranslation,
 } from '../../../../common';
-import {
-  Split,
-  SplitItem,
-  TextContent,
-  Text,
-  TextVariants,
-  Grid,
-  GridItem,
-  Form,
-} from '@patternfly/react-core';
-import { Formik } from 'formik';
+import { Split, SplitItem, Grid, GridItem, Form, Content } from '@patternfly/react-core';
 import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
+import { Formik } from 'formik';
 
 const BasicStep = () => {
   const { t } = useTranslation();
@@ -45,9 +36,9 @@ const BasicStep = () => {
             <GridItem>
               <Split>
                 <SplitItem>
-                  <TextContent>
-                    <Text component={TextVariants.h2}>Basic information</Text>
-                  </TextContent>
+                  <Content>
+                    <Content component="h2">Basic information</Content>
+                  </Content>
                 </SplitItem>
                 <SplitItem>
                   <DeveloperPreview />

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

@@ -14,9 +14,6 @@ import {
   SplitItem,
   Alert,
   Grid,
-  Text,
-  TextContent,
-  TextVariants,
   DescriptionList,
   DescriptionListGroup,
   DescriptionListTerm,
@@ -25,6 +22,7 @@ import {
   ListItem,
   ListComponent,
   OrderType,
+  Content,
 } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import { saveAs } from 'file-saver';
@@ -64,9 +62,9 @@ const ReviewStep = () => {
           <Grid hasGutter>
             <Split>
               <SplitItem>
-                <TextContent>
-                  <Text component={TextVariants.h2}>Review and download ISO</Text>
-                </TextContent>
+                <Content>
+                  <Content component="h2">Review and download ISO</Content>
+                </Content>
               </SplitItem>
               <SplitItem>
                 <DeveloperPreview />

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

@@ -1,5 +1,5 @@
 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,
@@ -11,10 +11,10 @@ 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>
+      <Content component="h1" className="pf-v6-u-display-inline">
         Install OpenShift with the Assisted Installer
-      </Text>
+      </Content>
       {isSingleClusterFeatureEnabled && <DeveloperPreview />}
       <Split hasGutter>
         <SplitItem>
@@ -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">
               What's new in Assisted Installer?
-            </Text>
+            </Content>
           </SplitItem>
         )}
       </Split>
-    </TextContent>
+    </Content>
   );
 };

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,12 @@ const ClusterPageGeneric = ({
       return (
         <>
           {showBreadcrumbs && <ClusterBreadcrumbs clusterName={cluster.name} />}
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">{cluster.name}</Text>
-            </TextContent>
+          <PageSection hasBodyWrapper={false}>
+            <Content>
+              <Content component="h1">{cluster.name}</Content>
+            </Content>
           </PageSection>
-          <PageSection variant={PageSectionVariants.light} isFilled>
+          <PageSection hasBodyWrapper={false} isFilled>
             <ClusterDetail cluster={cluster} />
           </PageSection>
         </>
@@ -105,12 +105,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 +133,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 +147,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 +205,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,12 @@ const Clusters = () => {
         return (
           <>
             <ClusterBreadcrumbs />
-            <PageSection variant={PageSectionVariants.light}>
-              <TextContent>
-                <Text component="h1">Assisted Clusters</Text>
-              </TextContent>
+            <PageSection hasBodyWrapper={false}>
+              <Content>
+                <Content component="h1">Assisted Clusters</Content>
+              </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,6 @@
 import * as React from 'react';
-import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 type DeleteClusterModalProps = {
   name: string;