@openshift-assisted/ui-lib 2.16.2-cim → 2.16.4-cim

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

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import {
+  ClusterWizardStep,
+  TechnologyPreview,
+  getRichTextValidation,
+  sshPublicKeyValidationSchema,
+  pullSecretValidationSchema,
+  getFormikErrorFields,
+} from '../../../../common';
+import { Split, SplitItem, Grid, GridItem, Form, Content, Checkbox } from '@patternfly/react-core';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import UploadSSH from '../../../../common/components/clusterConfiguration/UploadSSH';
+import PullSecretField from '../../../../common/components/ui/formik/PullSecretField';
+import { isInOcm, handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
+import InfraEnvsService from '../../../services/InfraEnvsService';
+import { InfraEnvsAPI } from '../../../services/apis';
+import usePullSecret from '../../../hooks/usePullSecret';
+import { useParams } from 'react-router-dom-v5-compat';
+import ClustersService from '../../../services/ClustersService';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+
+type OptionalConfigurationsFormValues = {
+  sshPublicKey?: string;
+  pullSecret?: string;
+};
+
+const PullSecretSync: React.FC<{ pullSecret?: string }> = ({ pullSecret }) => {
+  const { setFieldValue } = useFormikContext<OptionalConfigurationsFormValues>();
+
+  React.useEffect(() => {
+    if (pullSecret !== undefined) {
+      setFieldValue('pullSecret', pullSecret);
+    }
+  }, [pullSecret, setFieldValue]);
+
+  return null;
+};
+
+const OptionalConfigurationsStep = () => {
+  const pullSecret = usePullSecret() || '';
+  const { clusterId } = useParams<{ clusterId: string }>();
+  const [cluster, setCluster] = React.useState<Cluster | null>(null);
+
+  const { moveNext, moveBack, setDisconnectedInfraEnv, disconnectedInfraEnv } =
+    useClusterWizardContext();
+  const { addAlert } = useAlerts();
+  const [editPullSecret, setEditPullSecret] = React.useState(false);
+
+  React.useEffect(() => {
+    const fetchCluster = async () => {
+      if (!clusterId) {
+        return;
+      }
+      try {
+        const fetchedCluster = await ClustersService.get(clusterId);
+        setCluster(fetchedCluster);
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to fetch cluster',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      }
+    };
+    void fetchCluster();
+  }, [clusterId, addAlert]);
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object<OptionalConfigurationsFormValues>().shape({
+        sshPublicKey: sshPublicKeyValidationSchema,
+        pullSecret: pullSecretValidationSchema,
+      }),
+    [],
+  );
+
+  const initialValues: OptionalConfigurationsFormValues = {
+    sshPublicKey: '',
+    pullSecret: pullSecret,
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validate={getRichTextValidation<OptionalConfigurationsFormValues>(validationSchema)}
+      onSubmit={async (values) => {
+        if (!cluster || !cluster.id) {
+          addAlert({
+            title: 'Missing cluster',
+            message: 'Cluster must be created before configuring infrastructure environment',
+            variant: AlertVariant.danger,
+          });
+          return;
+        }
+
+        try {
+          // Check if infraEnv already exists
+          if (disconnectedInfraEnv && disconnectedInfraEnv.id) {
+            // Update existing infraEnv
+            const updateParams = {
+              pullSecret: values.pullSecret || pullSecret,
+              ...(values.sshPublicKey && { sshAuthorizedKey: values.sshPublicKey }),
+            };
+            const { data: updatedInfraEnv } = await InfraEnvsAPI.update(
+              disconnectedInfraEnv.id,
+              updateParams,
+            );
+            setDisconnectedInfraEnv(updatedInfraEnv);
+            moveNext();
+          } else {
+            // Create infraEnv with all params
+            const createParams = {
+              name: `disconnected-cluster_infra-env`,
+              pullSecret: values.pullSecret || pullSecret,
+              clusterId: cluster.id,
+              openshiftVersion: cluster.openshiftVersion,
+              cpuArchitecture: 'x86_64' as const,
+              ...(values.sshPublicKey && { sshAuthorizedKey: values.sshPublicKey }),
+            };
+            const createdInfraEnv = await InfraEnvsService.create(createParams);
+            setDisconnectedInfraEnv(createdInfraEnv);
+            moveNext();
+          }
+        } catch (error) {
+          handleApiError(error, () => {
+            addAlert({
+              title:
+                disconnectedInfraEnv && disconnectedInfraEnv.id
+                  ? 'Failed to update infrastructure environment'
+                  : 'Failed to create infrastructure environment',
+              message: getApiErrorMessage(error),
+              variant: AlertVariant.danger,
+            });
+          });
+        }
+      }}
+    >
+      {({ submitForm, isValid, errors, touched, isSubmitting }) => {
+        const errorFields = getFormikErrorFields(errors, touched);
+        const handleNext = () => {
+          void submitForm(); // This will trigger onSubmit
+        };
+
+        return (
+          <ClusterWizardStep
+            navigation={<ClusterWizardNavigation />}
+            footer={
+              <ClusterWizardFooter
+                disconnectedClusterId={clusterId}
+                onNext={handleNext} // Changed from moveNext
+                onBack={moveBack}
+                isNextDisabled={!isValid}
+                errorFields={errorFields}
+                isSubmitting={isSubmitting}
+              />
+            }
+          >
+            <WithErrorBoundary title="Failed to load Optional Configurations step">
+              <PullSecretSync pullSecret={pullSecret} />
+              <Grid hasGutter>
+                <GridItem>
+                  <Split>
+                    <SplitItem>
+                      <Content component="h2">Optional configurations</Content>
+                    </SplitItem>
+                    <SplitItem>
+                      <TechnologyPreview />
+                    </SplitItem>
+                  </Split>
+                </GridItem>
+                <GridItem>
+                  <Form id="wizard-cluster-optional-configurations__form">
+                    <UploadSSH />
+                    <Checkbox
+                      label="Edit pull secret"
+                      isChecked={editPullSecret}
+                      onChange={(_, checked) => setEditPullSecret(checked)}
+                      id="edit-pull-secret-checkbox"
+                    />
+                    {(editPullSecret || !pullSecret) && <PullSecretField isOcm={isInOcm} />}
+                  </Form>
+                </GridItem>
+              </Grid>
+            </WithErrorBoundary>
+          </ClusterWizardStep>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;

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>

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>
 );