Fix/access profiles layout#50
Open
seiggy wants to merge 6 commits into
Open
Conversation
- Pin the client list to a sticky left column that scrolls independently from the body content (xl breakpoint); the list fills the pinned viewport height and scrolls internally. - Add a sticky search bar to the profile grid to find policies by API, operation, plan, method, or path. - Add an override filter (All scopes / Direct overrides / Inherited only) with a match count and clear-filters control. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…lters - Corrected sticky positions from top-[5.5rem] to top-16 to match h-16 header - Fixed client list height calc from h-[calc(100vh-7rem)] to h-[calc(100vh-4rem)] - Added aria-label to search inputs for screen reader support - Added role="group", aria-label, and aria-pressed to override filter buttons - All changes maintain responsive behavior and existing functionality Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Refactored per McNulty's architectural review to follow established container/presentation pattern: - Moved searchQuery and overrideFilter state from ProfileGrid to AccessProfiles - Moved cellMatchesSearch and cellMatchesOverride helpers to page level - Moved filteredSections and visibleScopeCount memos to page computation - ProfileGrid now receives pre-filtered data and callbacks as props - All existing filter behaviors preserved (search, override modes, counts) - No changes to expand/collapse or cascade resolution logic Pattern now consistent with other admin pages where the page owns data transformation and components own rendering. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Moved all filter logic from inline page helpers to dedicated src/components/accessProfiles/filtering.ts module for Bunk's unit tests: - Created filtering.ts exporting pure, side-effect-free functions - Exports: OverrideFilter type, OVERRIDE_FILTERS, cellMatchesSearch, cellMatchesOverride, AccessApiSection interface, and selectFilteredView - AccessProfiles.tsx now imports and calls selectFilteredView via useMemo - ProfileGrid.tsx imports OverrideFilter type and OVERRIDE_FILTERS from module - All filter logic now trivially unit-testable without mounting components - Page still owns state (query/overrideFilter), calls pure helpers, passes results Satisfies McNulty's separation-of-concerns (state in page, logic out of rendering) and Bunk's testability requirements (pure functions in dedicated module). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ter logic
- Set up Vitest testing framework with @testing-library/react and jsdom
- Add vitest.config.ts with node environment (pure function tests)
- Add npm test scripts (test, test:watch)
- Write 35 unit tests for filtering.ts covering:
* cellMatchesSearch: empty query, case-insensitive matching across all fields
(apiDisplayName, apiId, operationDisplayName, operationId, method,
urlTemplate, planName), null/undefined handling, non-match cases
* cellMatchesOverride: all/overrides/inherited filter modes
* selectFilteredView: global visibility, section visibility under each filter
mode (all/overrides/inherited), visibleScopeCount math for filtered vs
unfiltered/expanded sections, empty result cases, filtersActive flag logic
All 35 tests pass. Build verified with tsc and vite build.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…e (2026-06-26) Session: fix/access-profiles-layout — Access Profiles page UX enhancements Agents & Outcomes: - Kima (Frontend): Sticky layout, ARIA labels, filter state/logic lift-up to page layer, pure filter module extraction - McNulty (Arch): Code review gate — REQUEST CHANGES → APPROVED after separation of concerns refactor - Bunk (QA): Frontend test framework gap identified; Vitest v4 setup + 35 passing tests for filtering.ts Commits: - 862fc5d (coordinator, initial): Sticky columns + search/override filter (separation of concerns violation) - 4212be7 (Kima): Fixed sticky offsets, added ARIA labels - 603d5ce (Kima): Lifted filter state/logic to AccessProfiles.tsx - 4fc0a5a (Kima): Extracted pure filter logic to filtering.ts module - cdebab4 (Bunk): Vitest setup + 35 unit tests Key Decision: Zack approved frontend testing infrastructure (Vitest adopted as standard for aipolicyengine-ui) Files: - .squad/orchestration-log/20260626T183645Z-{kima,mcnulty,bunk}.md — agent completion logs - .squad/log/20260626T183645Z-access-profiles-ux.md — session summary - .squad/decisions.md — merged inbox decisions, archived old entries to decisions-archive-20260626.md - .squad/agents/{kima,bunk,mcnulty}/history.md — cross-agent context notes (Vitest standard, separation of concerns pattern) Validation: tsc/eslint/build green; 35 tests pass; Quality gates closed. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request completes a major refactor and test coverage initiative for the Access Profiles
/accessadmin page in the frontend (src/aipolicyengine-ui). The main changes include: (1) moving all filter state and logic out of theProfileGridcomponent into theAccessProfilespage to enforce a clean container/presentation separation, (2) extracting all filter logic into a dedicated, pure-function module (filtering.ts) for testability, (3) establishing Vitest as the standard frontend test framework and adding comprehensive unit tests for the filter logic, and (4) fixing layout and accessibility issues with sticky positioning and ARIA attributes. These changes improve maintainability, enable future features, and ensure robust test coverage.Access Profiles UI Refactor and Test Foundation
Separation of Concerns & Architecture
searchQuery,overrideFilter) and filter logic (search/filter helpers, filtered section computation) fromProfileGrid.tsxup toAccessProfiles.tsx, following the container/presentation pattern. Now, the page owns all state and data transformation, while the grid component is responsible only for rendering. [1] [2]filtering.ts, exportingcellMatchesSearch,cellMatchesOverride, andselectFilteredViewfor use in the page and for unit testing.Testing Infrastructure & Coverage
filtering.test.ts, covering edge cases and ensuring 100% test coverage of pure functions. [1] [2] [3]Layout & Accessibility Improvements
Cross-Team & Process Outcomes
Key Files Changed
src/aipolicyengine-ui/src/pages/AccessProfiles.tsx— Now owns all filter state, logic, and passes pre-filtered data to the grid.src/aipolicyengine-ui/src/components/accessProfiles/ProfileGrid.tsx— Now a pure rendering component, receives all data and callbacks as props.src/aipolicyengine-ui/src/components/accessProfiles/filtering.ts— New pure logic module for all filter operations.src/aipolicyengine-ui/src/components/accessProfiles/filtering.test.ts— New Vitest unit tests for filter logic.ClientList.tsxand related files.These changes significantly improve maintainability, testability, and accessibility of the Access Profiles admin UI, and establish a foundation for future frontend