Skip to content

ROX-31779: [part 1] Fix layout for VM Workload CVEs results #18808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dvail merged 4 commits into from
Feb 4, 2026
Merged

ROX-31779: [part 1] Fix layout for VM Workload CVEs results #18808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27c5c3f
Fix layout for VM Workload CVEs results
dvail Feb 3, 2026
53e774b
Fix namespace page
dvail Feb 3, 2026
8fdfe53
Fix for cypress tests
dvail Feb 3, 2026
971c497
Remove remaining v5 in Workload CVEs
dvail Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions ui/apps/platform/cypress/helpers/nav.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,6 @@ export function visitFromHorizontalNav(linkTitle: string) {
export function visitFromHorizontalNavExpandable(expandableItemTitle: string) {
return (linkTitle: string) => {
cy.get(`nav.pf-m-horizontal.pf-m-subnav button:contains("${expandableItemTitle}")`).click();
cy.get(
`nav.pf-m-horizontal.pf-m-subnav .pf-v6-c-menu a[role="menuitem"]:contains("${linkTitle}")`
).click();
cy.get(`${pf6.dropdown} a[role="menuitem"]:contains("${linkTitle}")`).click();
};
}
6 changes: 4 additions & 2 deletions ui/apps/platform/cypress/helpers/tableHelpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import pf6 from '../selectors/pf6';

export function getTableRowLinkByName(name: string) {
const exactName = new RegExp(`^${name}$`, 'g');
return cy
Expand Down Expand Up @@ -96,9 +98,9 @@ function resetManagedColumns() {
export function verifyColumnManagement({ tableSelector }: { tableSelector: string }) {
resetManagedColumns();

// Open the colum management modal and get the list of columns
// Open the column management modal and get the list of columns
cy.get('button:contains("Columns")').click();
cy.get('.pf-v6-c-modal-box label')
cy.get(pf6.columnManagementLabel)
.then(($labels) => {
cy.get('.pf-v6-c-modal-box button:contains("Cancel")').click();
const columns = $labels.map((_, el) => el.innerText).get();
Expand Down
37 changes: 7 additions & 30 deletions ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ import {
import { visit } from '../../../helpers/visit';
import { selectors } from './WorkloadCves.selectors';
import { selectors as vulnSelectors } from '../vulnerabilities.selectors';
import { compoundFiltersSelectors } from '../../../helpers/compoundFilters';
import {
compoundFiltersSelectors,
selectAttribute,
selectEntity,
} from '../../../helpers/compoundFilters';

export function getDateString(date) {
return format(date, 'MMM DD, YYYY');
Expand Down Expand Up @@ -95,23 +99,6 @@ function selectSearchOption(searchOption) {
cy.get(selectors.searchOptionsDropdown).click();
}

export function selectEntitySearchOption(entity) {
cy.get(selectors.searchEntityDropdown).click();
cy.get(selectors.searchEntityMenuItem)
.contains(new RegExp(`^${entity}$`))
.click();

cy.get(selectors.searchEntityDropdown).click();
}

export function selectAttributeSearchOption(searchAttribute) {
cy.get(selectors.searchAttributeDropdown).click();
cy.get(selectors.searchAttributeMenuItem)
.contains(new RegExp(`^${searchAttribute}$`))
.click();
cy.get(selectors.searchAttributeDropdown).click();
}

/**
* Type a value into the search filter typeahead and select the first matching value.
* @param {('CVE' | 'Image' | 'Deployment' | 'Cluster' | 'Namespace' | 'Requester' | 'Request name')} searchOption
Expand All @@ -125,25 +112,15 @@ export function typeAndSelectCustomSearchFilterValue(searchOption, value) {
cy.get(selectors.searchOptionsValueTypeahead(searchOption)).click();
}

export function typeAndEnterSearchFilterValue(entity, searchTerm, value) {
selectEntitySearchOption(entity);
selectAttributeSearchOption(searchTerm);
cy.get(selectors.searchValueTypeahead).click();
cy.get(selectors.searchValueTypeahead).type(value);
cy.get(selectors.searchValueMenuItem)
.contains(new RegExp(`^${value}$`))
.click();
}

/**
* Type and enter custom text into the search filter typeahead
* @param {string} entity
* @param {string} searchTerm
* @param {string} value
*/
export function typeAndEnterCustomSearchFilterValue(entity, searchTerm, value) {
selectEntitySearchOption(entity);
selectAttributeSearchOption(searchTerm);
selectEntity(entity);
selectAttribute(searchTerm);
cy.get(selectors.searchValueTypeahead).click();
cy.get(selectors.searchValueTypeahead).type(value);
cy.get(selectors.searchValueApplyButton).click();
Expand Down
15 changes: 4 additions & 11 deletions ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.selectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import pf6 from '../../../selectors/pf6';

const watchedImageLabelText = 'Watched image';
const filterChipSection =
'.pf-v6-c-toolbar .pf-v6-c-toolbar__group[aria-label="applied search filters"]';
Expand All @@ -13,7 +15,7 @@ export const selectors = {
searchOptionsValueMenuItem: (searchOption) =>
`.pf-v6-c-toolbar ul[aria-label="Filter by ${searchOption}"] button`,
severityDropdown: '.pf-v6-c-toolbar button[aria-label="CVE severity"]',
severityMenuItems: '.pf-v6-c-toolbar [aria-label="CVE severity select menu"] ul',
severityMenuItems: `${pf6.select}[aria-label="CVE severity select menu"] ul`,
severityMenuItem: (severity) => `${selectors.severityMenuItems} label:contains("${severity}")`,
fixabilityDropdown: '.pf-v6-c-toolbar button[aria-label="CVE status"]',
fixabilityMenuItems: '.pf-v6-c-toolbar [aria-label="CVE status select menu"] ul',
Expand All @@ -29,7 +31,7 @@ export const selectors = {
`${selectors.filterChipGroupForCategory(category)} + ul li:contains("${item}")`,
filterChipGroupItemRemove: (category, item) =>
`${selectors.filterChipGroupItem(category, item)} button[aria-label="close"]`,
filterLabelGroup: `${filterChipSection} .pf-v5-c-label-group`,
filterLabelGroup: `${filterChipSection} .pf-v6-c-label-group`,
filterLabelGroupForCategory: (category) =>
`${selectors.filterLabelGroup} *:contains("${category}")`,
filterLabelGroupRemove: (category) =>
Expand All @@ -41,22 +43,13 @@ export const selectors = {
filterLabelGroupItemRemove: (category, item) =>
`${selectors.filterLabelGroupItem(category, item)} button[aria-label="close"]`,

searchEntityDropdown:
'.pf-v6-c-toolbar button[aria-label="compound search filter entity selector toggle"]',
searchEntityMenuItem:
'.pf-v6-c-toolbar [aria-label="compound search filter entity selector menu"] button',
searchAttributeDropdown:
'.pf-v6-c-toolbar button[aria-label="compound search filter attribute selector toggle"]',
searchAttributeMenuItem:
'.pf-v6-c-toolbar [aria-label="compound search filter attribute selector menu"] button',
searchValueTypeahead: '.pf-v6-c-toolbar input[aria-label^="Filter results by"]',
searchValueMenuItem: '.pf-v6-c-toolbar [aria-label="Filter results select menu"] button',
searchValueApplyButton:
'.pf-v6-c-toolbar button[aria-label="Apply autocomplete input to search"]',

// General selectors
filteredViewLabel: '.pf-v6-c-label:contains("Filtered view")',
iconText: (textContent) => `svg ~ *:contains("${textContent}")`,
bulkActionMenuToggle: 'button:contains("Bulk actions")',
menuOption: (optionText) => `*[role="menu"] button:contains("${optionText}")`,
severityIcon: (severity) => `span.pf-v6-c-icon:contains('${severity}')`,
Expand Down
11 changes: 6 additions & 5 deletions ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/deploymentSingle.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from './WorkloadCves.helpers';
import { selectors as vulnSelectors } from '../vulnerabilities.selectors';
import { selectors } from './WorkloadCves.selectors';
import { compoundFiltersSelectors } from '../../../helpers/compoundFilters';

describe('Workload CVE Deployment Single page', () => {
withAuth();
Expand All @@ -23,11 +24,11 @@ describe('Workload CVE Deployment Single page', () => {
visitFirstDeployment();

// Check that only applicable resource menu items are present in the toolbar
cy.get(selectors.searchEntityDropdown).click();
cy.get(selectors.searchEntityMenuItem).contains('Image');
cy.get(selectors.searchEntityMenuItem).contains('CVE');
cy.get(selectors.searchEntityMenuItem).contains('Image component');
cy.get(selectors.searchEntityDropdown).click();
cy.get(compoundFiltersSelectors.entityMenuToggle).click();
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('CVE');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image component');
cy.get(compoundFiltersSelectors.entityMenuToggle).click();
});

it('should navigate between vulnerabilities and resources tabs', () => {
Expand Down
23 changes: 11 additions & 12 deletions ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageCveSingle.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ import { verifyColumnManagement } from '../../../helpers/tableHelpers';
import {
applyLocalSeverityFilters,
selectEntityTab,
typeAndEnterCustomSearchFilterValue,
typeAndEnterSearchFilterValue,
visitWorkloadCveOverview,
} from './WorkloadCves.helpers';
import { selectors } from './WorkloadCves.selectors';
import { selectors as vulnSelectors } from '../vulnerabilities.selectors';
import { addAutocompleteFilter, compoundFiltersSelectors } from '../../../helpers/compoundFilters';

describe('Workload CVE Image CVE Single page', () => {
withAuth();
Expand All @@ -23,14 +22,14 @@ describe('Workload CVE Image CVE Single page', () => {
visitFirstCve();

// Check that only applicable resource menu items are present in the toolbar
cy.get(selectors.searchEntityDropdown).click();
cy.get(selectors.searchEntityMenuItem).contains('CVE').should('not.exist');
cy.get(selectors.searchEntityMenuItem).contains('Image');
cy.get(selectors.searchEntityMenuItem).contains('Image component');
cy.get(selectors.searchEntityMenuItem).contains('Deployment');
cy.get(selectors.searchEntityMenuItem).contains('Cluster');
cy.get(selectors.searchEntityMenuItem).contains('Namespace');
cy.get(selectors.searchEntityDropdown).click();
cy.get(compoundFiltersSelectors.entityMenuToggle).click();
cy.get(compoundFiltersSelectors.entityMenuItem).contains('CVE').should('not.exist');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image component');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Deployment');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Cluster');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Namespace');
cy.get(compoundFiltersSelectors.entityMenuToggle).click();
});

it('should correctly handle local filters on the images tab', () => {
Expand Down Expand Up @@ -86,15 +85,15 @@ describe('Workload CVE Image CVE Single page', () => {
cy.get(`${selectors.firstTableRow} td[data-label="Namespace"]`).then(([$namespace]) => {
const namespace = $namespace.innerText;

typeAndEnterCustomSearchFilterValue('Namespace', 'Name', `bogus-${namespace}`);
addAutocompleteFilter('Namespace', 'Name', `bogus-${namespace}`);

cy.get(`table tbody tr td[data-label="Namespace"]:contains("${namespace}")`).should(
'not.exist'
);

cy.get(vulnSelectors.clearFiltersButton).click();

typeAndEnterSearchFilterValue('Namespace', 'Name', namespace);
addAutocompleteFilter('Namespace', 'Name', namespace);

cy.get(
`table tbody tr td[data-label="Namespace"]:not(:contains("${namespace}"))`
Expand Down
12 changes: 6 additions & 6 deletions ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageSingle.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import withAuth from '../../../helpers/basicAuth';
import { addAutocompleteFilter, compoundFiltersSelectors } from '../../../helpers/compoundFilters';
import { hasFeatureFlag } from '../../../helpers/features';
import {
getRouteMatcherMapForGraphQL,
Expand All @@ -17,7 +18,6 @@ import { selectors as vulnSelectors } from '../vulnerabilities.selectors';
import {
applyLocalSeverityFilters,
selectEntityTab,
typeAndEnterSearchFilterValue,
visitWorkloadCveOverview,
} from './WorkloadCves.helpers';
import { selectors } from './WorkloadCves.selectors';
Expand Down Expand Up @@ -45,10 +45,10 @@ describe('Workload CVE Image Single page', () => {
visitFirstImage();

// Check that only applicable resource menu items are present in the toolbar
cy.get(selectors.searchEntityDropdown).click();
cy.get(selectors.searchEntityMenuItem).contains('Image');
cy.get(selectors.searchEntityMenuItem).contains('Image component');
cy.get(selectors.searchEntityDropdown).click();
cy.get(compoundFiltersSelectors.entityMenuToggle).click();
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image');
cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image component');
cy.get(compoundFiltersSelectors.entityMenuToggle).click();
});

it('should display consistent data between the cards and the table test', () => {
Expand Down Expand Up @@ -138,7 +138,7 @@ describe('Workload CVE Image Single page', () => {
.then(([$cveNameCell]) => {
const cveName = $cveNameCell.innerText;
// Enter the CVE name into the CVE filter
typeAndEnterSearchFilterValue('CVE', 'Name', cveName);
addAutocompleteFilter('CVE', 'Name', cveName);
// Check that the header above the table shows only one result
cy.get(`*:contains("1 result found")`);
// Check that the only row in the table has the correct CVE name
Expand Down
16 changes: 16 additions & 0 deletions ui/apps/platform/cypress/selectors/pf6.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@ const actionsColumnSelectors = {
menuListButton: '.pf-v6-c-menu__list button',
} as const;

const columnManagementSelectors = {
columnManagementLabel:
// data-ouia-component-id for these labels are in the format of "ColumnManagementModal-column-<index>-label" so
// we match the start and end of the data-ouia-component-id string
'[data-ouia-component-id^="ColumnManagementModal-column"][data-ouia-component-id$="label"] label',
} as const;

const dropdownSelectors = {
dropdown: 'div[data-ouia-component-type="PF6/Dropdown"]',
dropdownItem: '*[data-ouia-component-type="PF6/DropdownItem"]',
Expand All @@ -20,21 +27,30 @@ const navSelectors = {
navExpandable: `li[data-ouia-component-type="PF6/NavExpandable"]`,
navItem: `li[data-ouia-component-type="PF6/NavItem"]`,
} as const;

const pageHeaderSelectors = {
pageHeaderTitle: '[data-ouia-component-id="PageHeader-title"]',
pageHeaderSubtitle: '[data-ouia-component-id="PageHeader-subtitle"]',
} as const;

const select = 'div[data-ouia-component-type="PF6/Select"]';
const selectSelectors = {
select,
selectItem: `${select} *[role="listbox"] li`,
} as const;

const tabsSelectors = {
tab: '[data-ouia-component-type="PF6/Tab"]',
tabButton: '[data-ouia-component-type="PF6/TabButton"]',
} as const;

export default {
...actionsColumnSelectors,
...columnManagementSelectors,
...dropdownSelectors,
...menuSelectors,
...navSelectors,
...pageHeaderSelectors,
...selectSelectors,
...tabsSelectors,
};
2 changes: 1 addition & 1 deletion ...pps/platform/src/Components/CompoundSearchFilter/components/SearchFilterConditionDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from 'react';
import { Button, DatePicker, Flex, SelectOption, ToolbarItem } from '@patternfly/react-core';
import { Button, DatePicker, SelectOption, ToolbarItem } from '@patternfly/react-core';
import { ArrowRightIcon } from '@patternfly/react-icons';
import { format } from 'date-fns';

Expand Down
2 changes: 1 addition & 1 deletion ui/apps/platform/src/Containers/Clusters/DiscoveredClusters/DiscoveredClustersToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function DiscoveredClustersToolbar({
setSearchFilter(updateSearchFilter(searchFilter, payload))
}
/>
<ToolbarGroup className="pf-v5-u-w-100">
<ToolbarGroup className="pf-v6-u-w-100">
<ToolbarItem>
<CompoundSearchFilterLabels
attributesSeparateFromConfig={[]}
Expand Down
1 change: 0 additions & 1 deletion ui/apps/platform/src/Containers/ComplianceEnhanced/Coverage/CoveragesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
Toolbar,
ToolbarContent,
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';

import ComplianceUsageDisclaimer, {
Expand Down
4 changes: 2 additions & 2 deletions ui/apps/platform/src/Containers/MainPage/Navigation/HorizontalSubnav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,9 +261,9 @@ function HorizontalSubnav({
return (
<Dropdown
key={key}
isPlain
onSelect={onSelect}
isOpen={openDropdownKey === key}
popperProps={{ maxWidth: '300px' }}
onOpenChange={(isOpen: boolean) =>
setOpenDropdownKey(isOpen ? key : null)
}
Expand Down Expand Up @@ -291,7 +291,7 @@ function HorizontalSubnav({
return (
<NavItemSeparator
key={child.key}
role="listitem"
role="separator"
/>
);
}
Expand Down
4 changes: 1 addition & 3 deletions ui/apps/platform/src/Containers/Policies/Table/PoliciesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,9 +209,7 @@ function PoliciesTable({
config={searchFilterConfig}
searchFilter={searchFilter}
onSearch={(payload) => {
handleChangeSearchFilter(
updateSearchFilter(searchFilter, payload)
);
handleChangeSearchFilter(updateSearchFilter(searchFilter, payload));
}}
defaultEntity={'Policy'}
/>
Expand Down
2 changes: 1 addition & 1 deletion ui/apps/platform/src/Containers/Violations/ViolationsTableSearchFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
import { Toolbar, ToolbarContent, ToolbarGroup } from '@patternfly/react-core';

import type { SearchFilter } from 'types/search';
import useAnalytics from 'hooks/useAnalytics';
Expand Down
5 changes: 2 additions & 3 deletions ...ainers/Vulnerabilities/VirtualMachineCves/VirtualMachine/VirtualMachinePageComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
Toolbar,
ToolbarContent,
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';

import CompoundSearchFilter from 'Components/CompoundSearchFilter/components/CompoundSearchFilter';
Expand Down Expand Up @@ -122,7 +121,7 @@ function VirtualMachinePageComponents({
};

return (
<PageSection variant="light" isFilled padding={{ default: 'padding' }}>
<PageSection isFilled>
<Toolbar>
<ToolbarContent>
<CompoundSearchFilter
Expand All @@ -136,7 +135,7 @@ function VirtualMachinePageComponents({
onSearch={onSearchScannable}
searchFilter={searchFilter}
/>
<ToolbarGroup className="pf-v5-u-w-100">
<ToolbarGroup className="pf-v6-u-w-100">
<CompoundSearchFilterLabels
attributesSeparateFromConfig={[attributeForScannable]}
config={searchFilterConfig}
Expand Down
Loading
Loading