[UI] Table filter set (#12079)

* Save and load custom filter sets

* Tweak UI logic

* Adjust icons

* More refactoring

* Update UI docs

* Playwright tests

* Add docs image

* Fix image name

* Update docs/docs/concepts/user_interface.md

Co-authored-by: Matthias Mair <code@mjmair.com>

* Add CHANGELOG entry

---------

Co-authored-by: Matthias Mair <code@mjmair.com>
This commit is contained in:
Oliver
2026-06-04 22:19:28 +10:00
committed by GitHub
co-authored by Matthias Mair
parent 3dfd03fa89
commit 1b8217e8b3
8 changed files with 304 additions and 51 deletions
+26
View File
@@ -3,6 +3,7 @@ import { stevenuser } from './defaults.js';
import {
clearTableFilters,
navigate,
openFilterDrawer,
setTableChoiceFilter,
toggleColumnSorting
} from './helpers.js';
@@ -39,6 +40,31 @@ test('Tables - Filters', async ({ browser }) => {
await setTableChoiceFilter(page, 'Has Start Date', 'Yes');
await clearTableFilters(page);
// Next, let's create a "custom filter group" and apply it
await openFilterDrawer(page);
await page.getByRole('button', { name: 'Add Filter' }).click();
await page.getByRole('combobox', { name: 'Filter' }).click();
await page.getByRole('option', { name: 'Outstanding' }).click();
await page.getByRole('combobox', { name: 'Value' }).click();
await page.getByRole('option', { name: 'Yes' }).click();
// Save the filter group
await page.getByRole('button', { name: 'Save current filters' }).click();
await page.getByRole('textbox', { name: 'filter-group-name' }).fill('custom');
await page
.getByRole('button', { name: 'save-filter-set', exact: true })
.click();
// Clear filters, and then restore from saved group
await page.getByRole('button', { name: 'Clear Filters' }).click();
await page.getByRole('button', { name: 'load-filter-group-custom' }).click();
await page.getByText('Show outstanding items').first().waitFor();
// Remove the filter group
await page
.getByRole('button', { name: 'delete-filter-group-custom' })
.click();
});
test('Tables - Pagination', async ({ browser }) => {