feat(ui): unify filter bars on mounted list pages [SPRINT-015]
Migrate audit-log, evidence-pack, release-list, secret-detection, certificate-inventory, and trust-audit-log to shared FilterBarComponent with consistent FilterOption/ActiveFilter interfaces. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
65
docs/features/checked/web/filter-bar-unification.md
Normal file
65
docs/features/checked/web/filter-bar-unification.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# Filter Bar Unification
|
||||
|
||||
Sprint: `SPRINT_20260308_015_FE_orphan_filter_bar_unification.md`
|
||||
Feature IDs: FE-OFB-001 through FE-OFB-004
|
||||
Status: Shipped
|
||||
|
||||
## What shipped
|
||||
|
||||
The dormant shared `FilterBarComponent` (`src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.ts`) has been adopted across all seven eligible mounted list pages. Each page's bespoke filter toolbar markup has been replaced by a single `<app-filter-bar>` element that renders search input, single-select filter dropdowns, active-filter chips, and a clear-all button through the shared component's existing API.
|
||||
|
||||
## Shared contract (unchanged)
|
||||
|
||||
The `FilterBarComponent` API was sufficient without extension:
|
||||
|
||||
- `@Input() searchPlaceholder: string` -- placeholder text for the search input.
|
||||
- `@Input() filters: FilterOption[]` -- array of single-select dropdown definitions.
|
||||
- `@Input() activeFilters: ActiveFilter[]` -- currently applied filters shown as chips.
|
||||
- `@Output() searchChange` -- emits the new search string.
|
||||
- `@Output() filterChange` -- emits a new `ActiveFilter` when a dropdown value is selected.
|
||||
- `@Output() filterRemove` -- emits the `ActiveFilter` when a chip is dismissed.
|
||||
- `@Output() filtersCleared` -- emits when the clear-all button is clicked.
|
||||
|
||||
## Adopted pages
|
||||
|
||||
### Security and audit family (FE-OFB-002)
|
||||
|
||||
| Page | File | Filter options exposed |
|
||||
| --- | --- | --- |
|
||||
| Audit Log Table | `features/audit-log/audit-log-table.component.ts` | module, action, severity, dateRange |
|
||||
| Secret Findings List | `features/secret-detection/secret-findings-list.component.ts` | severity, status, category |
|
||||
| Console Admin Audit Log | `features/console-admin/audit/audit-log.component.ts` | eventType (16 event types) |
|
||||
|
||||
### Release, evidence, and trust family (FE-OFB-003)
|
||||
|
||||
| Page | File | Filter options exposed |
|
||||
| --- | --- | --- |
|
||||
| Release List | `features/release-orchestrator/releases/release-list/release-list.component.ts` | type, stage, gate, risk, blocked, needsApproval, hotfixLane, replayMismatch |
|
||||
| Evidence Pack List | `features/evidence-pack/evidence-pack-list.component.ts` | (search only, no dropdowns) |
|
||||
| Trust Audit Log | `features/trust-admin/trust-audit-log.component.ts` | resourceType, severity |
|
||||
| Certificate Inventory | `features/trust-admin/certificate-inventory.component.ts` | status, type |
|
||||
|
||||
## Exclusions
|
||||
|
||||
- `vex-statement-search` -- excluded because it is a dedicated search page with a tightly coupled search UX, not a list-filter toolbar.
|
||||
- Console-admin CRUD pages (users, clients, roles, tenants, tokens) -- excluded because they have no bespoke filter toolbar to replace.
|
||||
|
||||
## Design decisions
|
||||
|
||||
- Multi-select dropdowns on the audit-log-table were simplified to single-select to match the shared bar's existing contract. The underlying filter arrays still work but now hold at most one value.
|
||||
- Date-range inputs on the audit-log-table were mapped to preset dropdown options (24h, 7d, 30d, 90d).
|
||||
- Date inputs on trust-admin pages were removed from the filter bar; dates remain in component state for API queries but are not exposed through the shared bar.
|
||||
- Query-state persistence on the release-list via `buildQueryParams()` and route subscription remains intact.
|
||||
|
||||
## Test coverage
|
||||
|
||||
- `shared/ui/filter-bar/filter-bar.component.spec.ts` -- 10 focused unit tests for the shared component.
|
||||
- `features/audit-log/audit-log-table.component.spec.ts` -- 12 focused unit tests for filter-bar adoption on the audit-log-table (security/audit family representative).
|
||||
- `features/trust-admin/certificate-inventory.component.spec.ts` -- 16 focused unit tests for filter-bar adoption on the certificate-inventory (release/evidence/trust family representative).
|
||||
|
||||
## Source paths
|
||||
|
||||
- Shared component: `src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.ts`
|
||||
- Shared spec: `src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.spec.ts`
|
||||
- Audit-log spec: `src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-table.component.spec.ts`
|
||||
- Certificate-inventory spec: `src/Web/StellaOps.Web/src/app/features/trust-admin/certificate-inventory.component.spec.ts`
|
||||
Reference in New Issue
Block a user