[WIP] OCPBUGS-78543: Hide filter category selector when only one filter exists

[rhamilto]

Summary

Hides the filter category dropdown selector when only one filter type is available in ConsoleDataView, improving UX by removing an unnecessary UI element.

After

Screen.Recording.2026-03-16.at.7.34.20.PM.mov

What this PR does

When ConsoleDataView has only a single filter type (e.g., just a text filter or just a select filter), the category selector dropdown becomes redundant. This PR adds CSS to hide it automatically.

Implementation

New file: ConsoleDataView.scss

• Defines .co-console-data-view-single-filter class following Console's co- prefix naming convention
• Targets the first child of .pf-v6-c-toolbar__group.pf-m-filter-group (the category selector)
• Uses !important to ensure visibility override works across all responsive breakpoints

Updates to ConsoleDataView.tsx

• Import the new stylesheet
• Import css utility from @patternfly/react-styles
• Apply class to DataView component when dataViewFilterNodes.length === 1

Cypress test coverage

• New test: "ConsoleDataView filter toolbar should not display a filter select"
• Tests both text filter scenario (1 toggle) and select filter scenario (2 toggles)
• Reusable helper function verifySingleFilterCategoryHidden for DRY tests
• Verifies category selector is not visible in both cases

Test Plan

• Build succeeds
• Cypress tests added and pass
• Manual test: Visit /settings/cluster/alertmanagerconfig (text filter only) - verify category dropdown is hidden
• Manual test: Visit /search/all-namespaces?kind=core~v1~Pod (select filter only) - verify category dropdown is hidden
• Manual test: Test at mobile/tablet breakpoints to ensure CSS works responsively

Screenshots

Screenshots showing before/after behavior would be helpful for review

🤖 Generated with Claude Code

[openshift-ci-robot]

@rhamilto: This pull request references Jira Issue OCPBUGS-78543, which is invalid:

• expected the bug to target the "4.22.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Summary

• Adds CSS rule to hide the filter category selector dropdown when only one filter is available in ConsoleDataView
• Creates custom DataViewTextFilter component to enable keyboard shortcuts and improve UX
• Updates Cypress tests to verify the category selector is hidden on Search and AlertManager config pages
• Fixes test helper to use correct aria-label for name filter

Context

PatternFly's DataViewFilters component always displays a category selector dropdown even when only one filter is available, creating unnecessary UI clutter on pages like Search and AlertManager config. This PR uses a CSS-only approach to hide the selector when there's only one filter, avoiding the need to fork or patch the upstream component.

Test plan

• Verify category selector is hidden on /search/all-namespaces?kind=core~v1~Pod
• Verify category selector is hidden on /settings/cluster/alertmanagerconfig
• Verify category selector still appears when multiple filters are available
• Run Cypress tests: yarn cypress run --spec tests/app/filtering-and-searching.cy.ts
• Test keyboard shortcuts (Ctrl+F / Cmd+F) work with the new DataViewTextFilter

🤖 Generated with Claude Code

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rhamilto

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [rhamilto]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[rhamilto]

/jira refresh

[openshift-ci-robot]

@rhamilto: This pull request references Jira Issue OCPBUGS-78543, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[rhamilto]

/cherry-pick release-4.21

[openshift-cherrypick-robot]

@rhamilto: once the present PR merges, I will cherry-pick it on top of release-4.21 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-4.21

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[openshift-ci-robot]

@rhamilto: This pull request references Jira Issue OCPBUGS-78543, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

Summary

Fixes CSS class naming convention violations and improves test coverage for the single filter category selector hiding feature.

Changes

• CSS naming: Renamed console-data-view--single-filter to co-console-data-view-single-filter following Console's co- prefix convention for custom styles
• Class placement: Moved class application from DataViewFilters to parent DataView component for proper scoping
• Responsive fix: Added !important to CSS rule to ensure the category selector is hidden at all screen resolutions (mobile and desktop)
• Test improvements:
• Created reusable verifySingleFilterCategoryHidden helper function
• Added visibility checks for both single toggle (text filter) and multiple toggle (select filter) scenarios
• Tests now verify category selector is hidden in both cases

Before

.console-data-view--single-filter .pf-v6-c-toolbar__group.pf-m-filter-group > *:first-child {
 display: none;
}

After

.co-console-data-view-single-filter .pf-v6-c-toolbar__group.pf-m-filter-group > *:first-child {
 display: none !important;
}

Test Plan

• Build succeeds
• Cypress tests pass
• Verified class follows BEM and Console naming conventions
• Manual testing at mobile resolutions to verify category selector is hidden
• Manual testing on /settings/cluster/alertmanagerconfig (text filter)
• Manual testing on /search/all-namespaces?kind=core~v1~Pod (select filter)

🤖 Generated with Claude Code

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[rhamilto]

/retest

[rhamilto]

/retest

[rhamilto]

/retest

[rhamilto]

/assign @yapei

[rhamilto]

/retest

[yanpzhan]

Checked on cluster launched against the pr, on /settings/cluster/alertmanagerconfig page, the filter input was by default 'Filter by name' without dropdown list; on pods page, checked filter by 'Status', there was dropdown list for selecting different statuses. And there was not dropdown list when filter by 'Name/Label'.
/verified by yanpzhan

[openshift-ci-robot]

@yanpzhan: This PR has been marked as verified by yanpzhan.

Details

In response to this:

Checked on cluster launched against the pr, on /settings/cluster/alertmanagerconfig page, the filter input was by default 'Filter by name' without dropdown list; on pods page, checked filter by 'Status', there was dropdown list for selecting different statuses. And there was not dropdown list when filter by 'Name/Label'.
/verified by yanpzhan

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[rhamilto]

/retest

[openshift-ci]

@rhamilto: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-gcp-console	b7167f2	link	true	/test e2e-gcp-console

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.