Merge pull request #16199 from rhamilto/OCPBUGS-80931

[release-4.21] OCPBUGS-80931: Hide filter category selector when only one filter exists

Author: openshift-merge-bot[bot]

frontend/packages/console-app/src/components/data-view/ConsoleDataView.scss

@@ -0,0 +1,7 @@
+// Hide the filter category selector when there's only one filter.
+// We use CSS instead of TypeScript prop changes because PatternFly's
+// DataViewFilters component doesn't expose a prop to hide the category selector.
+// This CSS-only solution avoids forking or patching the upstream component.
+.co-console-data-view-single-filter .pf-v6-c-toolbar__group.pf-m-filter-group > *:first-child {
+  display: none !important;
+}

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import './ConsoleDataView.scss';
 import {
   ResponsiveAction,
   ResponsiveActions,
@@ -13,6 +14,7 @@ import {
 } from '@patternfly/react-data-view';
 import DataViewFilters from '@patternfly/react-data-view/dist/cjs/DataViewFilters';
 import { ColumnsIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
 import { InnerScrollContainer, Tbody, Td, Tr } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 import { ColumnLayout } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
@@ -187,7 +189,10 @@ export const ConsoleDataView = <
       loadError={loadError}
       skeleton={<div className="loading-skeleton--table" />}
     >
-      <DataView activeState={activeState}>
+      <DataView
+        activeState={activeState}
+        className={css(dataViewFilterNodes.length === 1 && 'co-console-data-view-single-filter')}
+      >
         <DataViewToolbar
           filters={
             dataViewFilterNodes.length > 0 && (

frontend/packages/integration-tests-cypress/tests/app/filtering-and-searching.cy.ts

@@ -9,6 +9,25 @@ import * as yamlEditor from '../../views/yaml-editor';
 const SEARCH_NAMESPACE = 'openshift-authentication-operator';
 const SEARCH_DEPLOYMENT_NAME = 'authentication-operator';
 
+const SINGLE_FILTER_GROUP_SELECTOR =
+  '.co-console-data-view-single-filter .pf-v6-c-toolbar__group.pf-m-filter-group';
+
+const verifySingleFilterCategoryHidden = (expectedToggles: number) => {
+  cy.get('[data-test="data-view-table"]').should('exist');
+  cy.get(SINGLE_FILTER_GROUP_SELECTOR)
+    .find('.pf-v6-c-menu-toggle')
+    .should('have.length', expectedToggles);
+
+  if (expectedToggles === 1) {
+    cy.get(SINGLE_FILTER_GROUP_SELECTOR).find('.pf-v6-c-menu-toggle').should('not.be.visible');
+  } else {
+    cy.get(SINGLE_FILTER_GROUP_SELECTOR)
+      .find('.pf-v6-c-menu-toggle')
+      .first()
+      .should('not.be.visible');
+  }
+};
+
 describe('Filtering and Searching', () => {
   let WORKLOAD_NAME;
   let WORKLOAD_LABEL;
@@ -105,4 +124,15 @@ describe('Filtering and Searching', () => {
     });
     listPage.dvRows.countShouldBe(3);
   });
+
+  it('ConsoleDataView filter toolbar should not display a filter select', () => {
+    cy.log('when a text filter is the only filter');
+    cy.visit('/settings/cluster/alertmanagerconfig?page=1&perPage=50');
+    verifySingleFilterCategoryHidden(1);
+
+    cy.log('when a select filter is the only filter');
+    cy.visit('/search/all-namespaces?page=1&perPage=50&kind=core~v1~Pod');
+    listPage.dvRows.shouldBeLoaded();
+    verifySingleFilterCategoryHidden(2);
+  });
 });

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/receivers/email.cy.ts

@@ -49,7 +49,7 @@ describe('Alertmanager: Email Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify Email Receiver was created correctly');
-    alertmanager.validateCreation(receiverName);
+    alertmanager.validateCreation(receiverName, 'integration-types', 'routing-labels');
     alertmanager.visitYAMLPage();
     yamlEditor.getEditorContent().then((content) => {
       const configs = getGlobalsAndReceiverConfig(receiverName, configName, content);

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/receivers/pagerduty.cy.ts

@@ -50,7 +50,7 @@ describe('Alertmanager: PagerDuty Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify PagerDuty Receiver was created correctly');
-    alertmanager.validateCreation(receiverName);
+    alertmanager.validateCreation(receiverName, 'integration-types', 'routing-labels');
 
     cy.log('update pagerduty_url');
     listPage.dvRows.clickKebabAction(receiverName, 'Edit Receiver');

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/receivers/slack.cy.ts

@@ -52,7 +52,7 @@ describe('Alertmanager: Slack Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify Slack Receiver was created correctly');
-    alertmanager.validateCreation(receiverName);
+    alertmanager.validateCreation(receiverName, 'integration-types', 'routing-labels');
     alertmanager.visitYAMLPage();
     yamlEditor.getEditorContent().then((content) => {
       const configs = getGlobalsAndReceiverConfig(receiverName, configName, content);

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/receivers/webhook.cy.ts

@@ -34,7 +34,7 @@ describe('Alertmanager: Webhook Receiver Form', () => {
     alertmanager.save();
 
     cy.log('verify Webhook Receiver was created correctly');
-    alertmanager.validateCreation(receiverName);
+    alertmanager.validateCreation(receiverName, 'integration-types', 'routing-labels');
     alertmanager.visitYAMLPage();
     yamlEditor.getEditorContent().then((content) => {
       const configs = getGlobalsAndReceiverConfig(receiverName, configName, content);

frontend/packages/integration-tests-cypress/views/alertmanager.ts

@@ -68,10 +68,14 @@ export const alertmanager = {
     cy.exec(
       `kubectl patch secret 'alertmanager-main' -n 'openshift-monitoring' --type='json' -p='[{ op: 'replace', path: '/data/alertmanager.yaml', value: ${defaultAlertmanagerYaml}}]'`,
     ),
-  save: () => cy.byTestID('save-changes').should('be.enabled').click(),
+  save: () => {
+    cy.byTestID('save-changes').should('be.enabled').click();
+    // wait for the changes to rollout
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(10000);
+  },
   showAdvancedConfiguration: () => cy.byTestID('advanced-configuration').find('button').click(),
   validateCreation: (receiverName: string, typeCellName: string, labelCellName: string) => {
-    listPage.dvFilter.byName(receiverName);
     listPage.dvRows.shouldExist(receiverName);
     listPage.dvRows.shouldExist(receiverName, typeCellName);
     listPage.dvRows.shouldExist(receiverName, labelCellName);