Skip to content

web: add grid/list view toggle to user application library#22132

Open
GirlBossRush wants to merge 1 commit intogoauthentik:mainfrom
GirlBossRush:issue-22126-add-list-view-toggle-to-application
Open

web: add grid/list view toggle to user application library#22132
GirlBossRush wants to merge 1 commit intogoauthentik:mainfrom
GirlBossRush:issue-22126-add-list-view-toggle-to-application

Conversation

@GirlBossRush
Copy link
Copy Markdown
Contributor

@GirlBossRush GirlBossRush commented May 7, 2026

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.

  • New icon button in the "My Applications" header swaps between grid (default) and list mode.
  • Preference persisted per-browser via StorageAccessor.local (ak-library-view-mode), mirroring the existing 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. Full application name displayed without clamp; description, publisher, and slug appear inline as supplementary metadata for substring search use cases (e.g. AWS account ID alongside account name).
  • The kebab action menu (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

Screenshot 2026-05-07 at 21 21 59 Screenshot 2026-05-07 at 21 22 15

Files

  • web/src/user/LibraryPage/ak-library-impl.ts — toggle button, view-mode state, persistence
  • web/src/user/LibraryPage/ak-library-impl.css — header layout for the toggle control
  • web/src/user/LibraryPage/ApplicationList.ts / .css — list-mode container styles
  • web/src/user/LibraryPage/LibraryAppRow.ts — new list-row component
  • web/src/user/LibraryPage/types.ts — view-mode type
  • blueprints/example/long-named-aws-applications.yaml — 25-app fixture blueprint

@GirlBossRush GirlBossRush requested review from a team as code owners May 7, 2026 19:35
@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for authentik-integrations ready!

Name Link
🔨 Latest commit b29d1e0
🔍 Latest deploy log https://app.netlify.com/projects/authentik-integrations/deploys/69fd26d5d05b8d000895954a
😎 Deploy Preview https://deploy-preview-22132--authentik-integrations.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for authentik-storybook ready!

Name Link
🔨 Latest commit b66ded0
🔍 Latest deploy log https://app.netlify.com/projects/authentik-storybook/deploys/69fcea2923cfe10008b0a673
😎 Deploy Preview https://deploy-preview-22132--authentik-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@GirlBossRush GirlBossRush force-pushed the issue-22126-add-list-view-toggle-to-application branch from 6150a36 to b66ded0 Compare May 7, 2026 19:38
@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for authentik-docs ready!

Name Link
🔨 Latest commit 6150a36
🔍 Latest deploy log https://app.netlify.com/projects/authentik-docs/deploys/69fce9690869bc00080744bd
😎 Deploy Preview https://deploy-preview-22132--authentik-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for authentik-docs ready!

Name Link
🔨 Latest commit b29d1e0
🔍 Latest deploy log https://app.netlify.com/projects/authentik-docs/deploys/69fd26d5ca6aed0008df1df0
😎 Deploy Preview https://deploy-preview-22132--authentik-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 7, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.21%. Comparing base (b4c7dea) to head (b29d1e0).

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     
Flag Coverage Δ
conformance 36.75% <ø> (+<0.01%) ⬆️
e2e 41.95% <ø> (+<0.01%) ⬆️
integration 33.12% <ø> (-0.05%) ⬇️
rust 0.00% <ø> (ø)
unit 92.18% <ø> (+<0.01%) ⬆️
unit-migrate 92.21% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@GirlBossRush GirlBossRush removed the request for review from a team May 7, 2026 19:53
…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>
@GirlBossRush GirlBossRush force-pushed the issue-22126-add-list-view-toggle-to-application branch from b66ded0 to b29d1e0 Compare May 7, 2026 23:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add list view toggle to application library for long application names

1 participant