web: add grid/list view toggle to user application library#22132
Open
GirlBossRush wants to merge 1 commit intogoauthentik:mainfrom
Open
web: add grid/list view toggle to user application library#22132GirlBossRush wants to merge 1 commit intogoauthentik:mainfrom
GirlBossRush wants to merge 1 commit intogoauthentik:mainfrom
Conversation
✅ Deploy Preview for authentik-integrations ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
6150a36 to
b66ded0
Compare
✅ Deploy Preview for authentik-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for authentik-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #22132 +/- ##
==========================================
- Coverage 93.25% 93.21% -0.04%
==========================================
Files 1027 1027
Lines 59598 59598
Branches 400 400
==========================================
- Hits 55579 55557 -22
- Misses 4019 4041 +22
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
…ik#22126) Implements the long-requested list view for the user-facing application library so customers with naturally long application names (e.g. AWS accounts of the form `<account-name> (<account-id>)`) can scan their apps without name truncation. - New icon button in the page header swaps between grid (default) and list mode; preference persisted per-browser via StorageAccessor.local ("ak-library-view-mode") to mirror the RememberMe pattern. - List mode renders each app as a wide row using a CSS subgrid so icon, name+meta, and action menu line up consistently across rows. The full application name is shown without clamp; description, publisher, and slug appear inline as supplementary metadata. - The kebab action menu (CardMenu) is shared with the grid card, re-anchored to the kebab's right edge in list mode so the popover stays inside the viewport. - Demo blueprint `blueprints/example/long-named-aws-applications.yaml` ships 25 fixture applications with title-cased Greek-prefixed names spread across five groups, ~19 with brand image icons and the rest using letter insignias. Marked `instantiate: "false"` so it stays out of fresh dev environments unless explicitly applied. Co-Authored-By: Agent (authentik-i22126-animated-specific-xanthous) <279763771+playpen-agent@users.noreply.github.com>
b66ded0 to
b29d1e0
Compare
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
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.
Summary
Closes #22126.
Adds a grid ↔ list view toggle to the user-facing application library so customers with naturally long application names (e.g. AWS accounts displayed as
<account-name> (<account-id>)) can scan their apps without name truncation.StorageAccessor.local(ak-library-view-mode), mirroring the existingRememberMepattern.CardMenu) is shared with the grid card and re-anchored to the kebab's right edge in list mode so the popover stays inside the viewport.Screenshots
Files
web/src/user/LibraryPage/ak-library-impl.ts— toggle button, view-mode state, persistenceweb/src/user/LibraryPage/ak-library-impl.css— header layout for the toggle controlweb/src/user/LibraryPage/ApplicationList.ts/.css— list-mode container stylesweb/src/user/LibraryPage/LibraryAppRow.ts— new list-row componentweb/src/user/LibraryPage/types.ts— view-mode typeblueprints/example/long-named-aws-applications.yaml— 25-app fixture blueprint