Skip to content

HMS-9410: patch UX review #1631

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

Closed
Dugowitch wants to merge 3 commits into from
Closed

HMS-9410: patch UX review #1631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f69beec
feat: add "expand all" option to table header
Dugowitch May 21, 2026
2e2fa8f
test: resolve some warnings
Dugowitch May 21, 2026
c05abbf
wip
Dugowitch May 26, 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
2 changes: 0 additions & 2 deletions playwright/UI/FilterTypePatch.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,6 @@ test('Verify filter contents', async ({ page, systems }) => {
{ name: workspaceGroup!, inputType: 'checkbox' },
{ exactMatch: true },
);
await waitForTableLoad(page);
await page.locator('td[data-label="Name"]').first().scrollIntoViewIfNeeded();
await expect(
page
.locator('td[data-label="Name"]')
Expand Down
12 changes: 6 additions & 6 deletions playwright/UI/VerifyExportingFeature.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ test.describe('Verify exporting feature', () => {

const { csvData, jsonData } = await exportCsvJson(page);

expect(csvData.length).toBe(page_count);
expect(csvData).toHaveLength(page_count);

const matchingCsvRow = csvData.find((row) => row.id === nameText);
expect(matchingCsvRow).toBeDefined();
Expand All @@ -97,7 +97,7 @@ test.describe('Verify exporting feature', () => {
// CSV uses "advisory_type_name" field for type
expect(matchingCsvRow!.advisory_type_name.toLowerCase()).toBe(typeText!.toLowerCase());

expect(jsonData.length).toBe(page_count);
expect(jsonData).toHaveLength(page_count);

// Find matching row in JSON and validate
const matchingJsonRow = jsonData.find((row) => row.id === nameText);
Expand Down Expand Up @@ -132,7 +132,7 @@ test.describe('Verify exporting feature', () => {
const { csvData, jsonData } = await exportCsvJson(page);

// After filtering, we should have exactly 1 system
expect(csvData.length).toBe(1);
expect(csvData).toHaveLength(1);

// Verify our created system is in the exported data
const matchingCsvRow = csvData.find((row) => row.display_name === system.name);
Expand All @@ -141,7 +141,7 @@ test.describe('Verify exporting feature', () => {
expect(matchingCsvRow!.os).toBe(osText);
expect(matchingCsvRow!.packages_installed).toBe(installedPackagesText);

expect(jsonData.length).toBe(1);
expect(jsonData).toHaveLength(1);

// Find matching row in JSON and validate
const matchingJsonRow = jsonData.find((row) => row.display_name === system.name);
Expand Down Expand Up @@ -177,7 +177,7 @@ test.describe('Verify exporting feature', () => {
const { csvData, jsonData } = await exportCsvJson(page);

// Verify row count matches UI count
expect(csvData.length).toBe(page_count);
expect(csvData).toHaveLength(page_count);

const matchingCsvRow = csvData.find((row) => row.name === nameText);
expect(matchingCsvRow).toBeDefined();
Expand All @@ -190,7 +190,7 @@ test.describe('Verify exporting feature', () => {
expect(matchingCsvRow!.summary.toLowerCase()).toContain(summaryPrefix.toLowerCase());
expect(matchingCsvRow!.systems_installed).toBe(installedSystemsText);

expect(jsonData.length).toBe(page_count);
expect(jsonData).toHaveLength(page_count);

// Find matching row in JSON and validate
const matchingJsonRow = jsonData.find((row) => row.name === nameText);
Expand Down
21 changes: 11 additions & 10 deletions src/PresentationalComponents/TableView/TableView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import React, { useState, useMemo } from 'react';
import { TableVariant } from '@patternfly/react-table';
import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
import { PrimaryToolbar } from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
import { SkeletonTable } from '@redhat-cloud-services/frontend-components/SkeletonTable';
import PropTypes from 'prop-types';
import React from 'react';
import AsyncRemediationButton from '../../SmartComponents/Remediation/AsyncRemediationButton';
import { arrayFromObj, buildActiveFilterConfig, convertLimitOffset } from '../../Utilities/Helpers';
import { useRemoveFilter, useBulkSelectConfig } from '../../Utilities/hooks';
Expand Down Expand Up @@ -39,7 +39,7 @@ const TableView = ({
actionsToggle,
hasColumnManagement,
}) => {
const [page, perPage] = React.useMemo(
const [page, perPage] = useMemo(
() => convertLimitOffset(metadata.limit, metadata.offset),
[metadata.limit, metadata.offset],
);
Expand All @@ -48,13 +48,13 @@ const TableView = ({
const selectedCount = selectedRows && arrayFromObj(selectedRows).length;
const { code, hasError, isLoading } = status;
const bulkSelectConfig = useBulkSelectConfig(selectedCount, onSelect, metadata, rows, onCollapse);
const activeFiltersConfig = React.useMemo(
const activeFiltersConfig = useMemo(
() => buildActiveFilterConfig(filter, search, deleteFilters, searchChipLabel, defaultFilters),
[defaultFilters, deleteFilters, filter, search, searchChipLabel],
);

const [isColumnMgmtModalOpen, setColumnMgmtModalOpen] = React.useState(false);
const [appliedColumns, setAppliedColumns] = React.useState(columns);
const [isColumnMgmtModalOpen, setColumnMgmtModalOpen] = useState(false);
const [appliedColumns, setAppliedColumns] = useState(columns);

const shownColumns = hasColumnManagement
? appliedColumns?.filter((column) => column.isShown)
Expand All @@ -70,7 +70,7 @@ const TableView = ({
: rows;

return (
<React.Fragment>
<>
<ColumnManagementModal
appliedColumns={appliedColumns}
applyColumns={(newColumns) => setAppliedColumns(newColumns)}
Expand All @@ -85,7 +85,7 @@ const TableView = ({
metadata={metadata}
/>
) : (
<React.Fragment>
<>
<PrimaryToolbar
pagination={
isLoading ? (
Expand Down Expand Up @@ -163,6 +163,7 @@ const TableView = ({
variant={compact && TableVariant.compact}
actions={actionsConfig}
actionsToggle={actionsToggle}
canCollapseAll
>
<TableHeader />
<TableBody />
Expand All @@ -177,9 +178,9 @@ const TableView = ({
onPerPageSelect={onPerPageSelect}
paginationOUIA={`bottom-${paginationOUIA}`}
/>
</React.Fragment>
</>
)}
</React.Fragment>
</>
);
};

Expand Down
70 changes: 52 additions & 18 deletions src/PresentationalComponents/TableView/__snapshots__/TableView.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@ exports[`TableView Should open remediation modal 1`] = `
aria-label="Go to previous page"
class="pf-v6-c-button pf-m-plain"
data-action="previous"
data-ouia-component-id="OUIA-Generated-Button-plain-25"
data-ouia-component-id="OUIA-Generated-Button-plain-27"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -385,7 +385,7 @@ exports[`TableView Should open remediation modal 1`] = `
aria-label="Go to next page"
class="pf-v6-c-button pf-m-plain"
data-action="next"
data-ouia-component-id="OUIA-Generated-Button-plain-26"
data-ouia-component-id="OUIA-Generated-Button-plain-28"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -516,7 +516,7 @@ exports[`TableView Should open remediation modal 1`] = `
aria-label="Go to first page"
class="pf-v6-c-button pf-m-plain"
data-action="first"
data-ouia-component-id="OUIA-Generated-Button-plain-27"
data-ouia-component-id="OUIA-Generated-Button-plain-29"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -547,7 +547,7 @@ exports[`TableView Should open remediation modal 1`] = `
aria-label="Go to previous page"
class="pf-v6-c-button pf-m-plain"
data-action="previous"
data-ouia-component-id="OUIA-Generated-Button-plain-28"
data-ouia-component-id="OUIA-Generated-Button-plain-30"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -597,7 +597,7 @@ exports[`TableView Should open remediation modal 1`] = `
aria-label="Go to next page"
class="pf-v6-c-button pf-m-plain"
data-action="next"
data-ouia-component-id="OUIA-Generated-Button-plain-29"
data-ouia-component-id="OUIA-Generated-Button-plain-31"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -628,7 +628,7 @@ exports[`TableView Should open remediation modal 1`] = `
aria-label="Go to last page"
class="pf-v6-c-button pf-m-plain"
data-action="last"
data-ouia-component-id="OUIA-Generated-Button-plain-30"
data-ouia-component-id="OUIA-Generated-Button-plain-32"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -1686,7 +1686,7 @@ exports[`TableView TableView 2`] = `
aria-label="Go to previous page"
class="pf-v6-c-button pf-m-plain"
data-action="previous"
data-ouia-component-id="OUIA-Generated-Button-plain-19"
data-ouia-component-id="OUIA-Generated-Button-plain-21"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -1717,7 +1717,7 @@ exports[`TableView TableView 2`] = `
aria-label="Go to next page"
class="pf-v6-c-button pf-m-plain"
data-action="next"
data-ouia-component-id="OUIA-Generated-Button-plain-20"
data-ouia-component-id="OUIA-Generated-Button-plain-22"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -1848,7 +1848,7 @@ exports[`TableView TableView 2`] = `
aria-label="Go to first page"
class="pf-v6-c-button pf-m-plain"
data-action="first"
data-ouia-component-id="OUIA-Generated-Button-plain-21"
data-ouia-component-id="OUIA-Generated-Button-plain-23"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -1879,7 +1879,7 @@ exports[`TableView TableView 2`] = `
aria-label="Go to previous page"
class="pf-v6-c-button pf-m-plain"
data-action="previous"
data-ouia-component-id="OUIA-Generated-Button-plain-22"
data-ouia-component-id="OUIA-Generated-Button-plain-24"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -1929,7 +1929,7 @@ exports[`TableView TableView 2`] = `
aria-label="Go to next page"
class="pf-v6-c-button pf-m-plain"
data-action="next"
data-ouia-component-id="OUIA-Generated-Button-plain-23"
data-ouia-component-id="OUIA-Generated-Button-plain-25"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -1960,7 +1960,7 @@ exports[`TableView TableView 2`] = `
aria-label="Go to last page"
class="pf-v6-c-button pf-m-plain"
data-action="last"
data-ouia-component-id="OUIA-Generated-Button-plain-24"
data-ouia-component-id="OUIA-Generated-Button-plain-26"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -2439,12 +2439,46 @@ exports[`TableView test table props TableView 1`] = `
data-ouia-safe="true"
>
<th
class="pf-v6-c-table__th"
class="pf-v6-c-table__th pf-v6-c-table__toggle"
data-key="0"
data-label=""
scope=""
tabindex="-1"
/>
>
<button
aria-expanded="false"
aria-label="Expand all rows"
aria-labelledby="simple-node-1 expandable-toggle-1"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-9"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
id="expandable-toggle-1"
type="button"
>
<span
class="pf-v6-c-button__icon"
>
<div
class="pf-v6-c-table__toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v6-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
/>
</svg>
</div>
</span>
</button>
</th>
<th
class="pf-v6-c-table__th"
data-key="1"
Expand Down Expand Up @@ -2533,7 +2567,7 @@ exports[`TableView test table props TableView 1`] = `
aria-label="Go to first page"
class="pf-v6-c-button pf-m-plain"
data-action="first"
data-ouia-component-id="OUIA-Generated-Button-plain-9"
data-ouia-component-id="OUIA-Generated-Button-plain-10"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -2564,7 +2598,7 @@ exports[`TableView test table props TableView 1`] = `
aria-label="Go to previous page"
class="pf-v6-c-button pf-m-plain"
data-action="previous"
data-ouia-component-id="OUIA-Generated-Button-plain-10"
data-ouia-component-id="OUIA-Generated-Button-plain-11"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -2619,7 +2653,7 @@ exports[`TableView test table props TableView 1`] = `
aria-label="Go to next page"
class="pf-v6-c-button pf-m-plain"
data-action="next"
data-ouia-component-id="OUIA-Generated-Button-plain-11"
data-ouia-component-id="OUIA-Generated-Button-plain-12"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -2650,7 +2684,7 @@ exports[`TableView test table props TableView 1`] = `
aria-label="Go to last page"
class="pf-v6-c-button pf-m-plain"
data-action="last"
data-ouia-component-id="OUIA-Generated-Button-plain-12"
data-ouia-component-id="OUIA-Generated-Button-plain-13"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down
Loading
Loading