Repository navigation
Web/elements/single shadowdom sidebar - #27139
Open
kensternberg-authentik wants to merge 9 commits into
Open
kensternberg-authentik wants to merge 9 commits into
kensternberg-authentik wants to merge 9 commits into
Conversation
…single-shadowdom-sidebar * web/elements/sidebar-api-disconnect: (28 commits) Fix some merge issues. The test exists and passes. Moving the load of the AdminOverviewPage to the entrypoint. The idea is to have the dashboard as live as possible as early as possible. Putting into Routes made Routes into a browser-only feature, and it could not be unit tested without this move. web/elements: test that ak-mdx does not evaluate API-supplied content (#24524) root: require Node.js 24.22.1 (#27093) Formatter opinions. That side effect infected downstream tests. Darnit. web/admin: Simplify sidebar entries handling website/docs: change routing info after 2026.8 changes (#27109) core: bump astral-sh/uv from 0.13.4 to 0.13.5 in /lifecycle/container (#27096) flows: avoid saving plan history when inspector inaccessible (#27089) core: bump pyo3 from 0.29.0 to 0.30.1 (#27099) core: bump arc-swap from 1.9.2 to 1.9.3 (#27098) core: bump pyroscope-io from 1.2.5 to 1.3.0 (#27100) core: bump pyo3-build-config from 0.29.0 to 0.30.1 (#27097) core: bump dexidp/dex from v2.46.0 to v2.46.1 in /tests/e2e (#27095) website/integrations: VCF 9: touch up (#27094) lifecycle/container: add a distroless version of the server image (#26321) ci: run tests in the server image (#26510) packages/client-ts: Generate imports with `.js` extensions (#27029) ...
…single-shadowdom-sidebar * web/elements/sidebar-api-disconnect: Replace aria wayfinders used for testing with Open UI Automation identifiers. web/element: Move the SidebarVersion out of Elements. . . The test exists and passes. Moving the load of the AdminOverviewPage to the entrypoint. The idea is to have the dashboard as live as possible as early as possible. Putting into Routes made Routes into a browser-only feature, and it could not be unit tested without this move. Formatter opinions. That side effect infected downstream tests. Darnit. web/admin: Simplify sidebar entries handling website/docs: remove xattr workaround for agent (#27128) web/elements: make ak-toggle-group akForm-compatible and form-associated (#27092) root: bump ctutils (#27129) web/elements: make toggle group usable as input field (#27061) sources/ldap: fix password write error message (#27076) core, web: update translations (#27123) core: bump cachetools from 7.2.3 to 7.2.4 (#27125) sources/saml: log response processing errors and show users a generic message (#27012) sources/saml: Tell IDP to use AES256-GCM by default (#27010) website/docs: fix mention of saml 1.1 assertion support for ws-fed (#27113)
This commit revises how Sidebar works.
I introduce a new type that the Sidebar understands: `SidebarItem`:
``` javascript
export interface SidebarItem {
label: string;
key: string;
expanded?: boolean;
path?: string | null;
notice?: string | TemplateResult | null;
children?: SidebarItem[];
}
```
## Sidebar changes
This type is meant to drive the Sidebar alone, independent of the needs of any client code (although it is, obviously, good enough to support ak-interface-admin).
I revise `Sidebar` to be the whole component; no SidebarItem renderer, no slots. The container into which it is rendered is the client code’s responsibility. There are two levels of rendering: the Groups and the Items, and right now they’re only distinguished by “Does it have children?” There were four renderers in SidebarItem, and two of them are gone since they were unused.
I have deliberately left room to revise this again so that a second-level can support a path *and* children. I have an idea for what to do with it.
The CSS has entirely been brought in to handle a single sidebar.
## Sidebar Session Persistence
This is entirely in a controller now; it only needs to be included to do its magic, and it works quite well. I have also revised the very long function names in `expansion.ts` and treat the entire file as a single namespace. The names are shorter and more readable, and can be imported with the `* as SidebarExpansion` syntax to support the full namespace.
This makes Sidebar Session Persistence swappable with a Sidebar Device Persistence (using `localStorage`), should we so desire.
Functions in `expansion` that no one was using have been deleted. YAGNI forever.
## Navigation
*`sidebarEntries.ts`*
The navigation folder is split: the `Entries` file was always meant to be an easy-to-find collection of all the *Entries*, and nothing more, the Entries themselves were meant to be easily editable and fit within a visually informative table. All the tooling cluttered that. With one exception, all tooling has been mooved to the `Tools` file. That exception is a tool, *here*, that will either hand you a “plain” SidebarEntries, or a “can enterprise” SidebarEntries, based on a flag. That logic does not belong in the Interface file.
*`sidebarTools.ts`*
Contains two separate units: one converts the `SidebarEntries` collection into a `SidebarItems` collection fit for sending to the Sidebar. The others (a) assists the Interface in finding the right key to send to the Sidebar for the current path, and (b) assists the header in filling out the page title.
Due to some of the needs in the Interface, `resolveSidebarItems` is an `ExtendedSidebarItem`; it has extra fields to help the CommandPalette. The shape passed to Sidebar is an unchanged `SidebarItem`.
## Interface
The palette code is revised to understand the new `ExtendedSidebarItem` format.
The `ak-page-navbar` and `ak-sidebar` calls have been revised to take the new format. The values are derived at the beginning of the `render()` function to avoid multiple calls to the resolvers.
kensternberg-authentik
changed the base branch from
main
to
web/elements/sidebar-api-disconnect
October 23, 2026 21:24
✅ Deploy Preview for authentik-storybook 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. |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| } | ||
|
|
||
| if (children) { | ||
| item.children = resolveSidebarEntries(children ?? [], { licensed, canEnterprise }); |
Codecov Report✅ All modified and coverable lines are covered by tests.
Additional details and impacted files@@ Coverage Diff @@
## web/elements/sidebar-api-disconnect #27139 +/- ##
========================================================================
- Coverage 95.11% 49.85% -45.27%
========================================================================
Files 1152 1190 +38
Lines 75862 80258 +4396
Branches 0 4351 +4351
========================================================================
- Hits 72157 40009 -32148
- Misses 3705 40183 +36478
- Partials 0 66 +66
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. |
| ], | ||
| ]]; | ||
|
|
||
| export function createAdminSidebarEntries(needsEnterprise: boolean) { |
Contributor
Author
There was a problem hiding this comment.
This is the same function name as before, only it does the whole job, depending on the flag passed in. So now only the Interface needs to know the enterprise flag.
| grid-area: header; | ||
| } | ||
|
|
||
| ak-sidebar-item:active ak-sidebar-item::part(list-item), |
Contributor
Author
There was a problem hiding this comment.
Moved into the sidebar proper.
| ), | ||
| ); | ||
| }, | ||
| action: () => navigate(path!), |
Contributor
Author
There was a problem hiding this comment.
All this information is pre-processed now in the resolver that converts SidebarEntries into SidebarItems; we just have to use it now.
kensternberg-authentik
marked this pull request as ready for review
October 23, 2026 21:33
Contributor
Playwright e2eDownload this run's HTML report and traces, then open the report: gh run download 40026484025 -D playwright-artifacts
npx playwright show-report playwright-artifacts/playwright-reportInstallation instructionsInstructions for docker-composeAdd the following block to your AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-f7dc9841272931b6231369b221bb3263d5fada9a
# Distroless image: AUTHENTIK_TAG=gh-f7dc9841272931b6231369b221bb3263d5fada9a-distroless
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)sAfterwards, run the upgrade commands from the latest release notes. Instructions for KubernetesAdd the following block to your authentik:
outposts:
container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
image:
repository: ghcr.io/goauthentik/dev-server
tag: gh-f7dc9841272931b6231369b221bb3263d5fada9a
# Distroless image: tag: gh-f7dc9841272931b6231369b221bb3263d5fada9a-distrolessAfterwards, run the upgrade commands from the latest release notes. |
This branch has not been deployed
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.
web/admin: Make Sidebar a wholly coherent and independent entity
This commit revises how Sidebar works.
I introduce a new type that the Sidebar understands:
SidebarItem:Sidebar changes
This type is meant to drive the Sidebar alone, independent of the needs of any client code (although it is, obviously, good enough to support ak-interface-admin).
I revise
Sidebarto be the whole component; no SidebarItem renderer, no slots. The container into which it is rendered is the client code’s responsibility. There are two levels of rendering: the Groups and the Items, and right now they’re only distinguished by “Does it have children?” There were four renderers in SidebarItem, and two of them are gone since they were unused.I have deliberately left room to revise this again so that a second-level can support a path and children. I have an idea for what to do with it.
The CSS has entirely been brought in to handle a single sidebar.
Sidebar Session Persistence
This is entirely in a controller now; it only needs to be included to do its magic, and it works quite well. I have also revised the very long function names in
expansion.tsand treat the entire file as a single namespace. The names are shorter and more readable, and can be imported with the* as SidebarExpansionsyntax to support the full namespace.This makes Sidebar Session Persistence swappable with a Sidebar Device Persistence (using
localStorage), should we so desire.Functions in
expansionthat no one was using have been deleted. YAGNI forever.Navigation
sidebarEntries.tsThe navigation folder is split: the
Entriesfile was always meant to be an easy-to-find collection of all the Entries, and nothing more, the Entries themselves were meant to be easily editable and fit within a visually informative table. All the tooling cluttered that. With one exception, all tooling has been mooved to theToolsfile. That exception is a tool, here, that will either hand you a “plain” SidebarEntries, or a “can enterprise” SidebarEntries, based on a flag. That logic does not belong in the Interface file.sidebarTools.tsContains two separate units: one converts the
SidebarEntriescollection into aSidebarItemscollection fit for sending to the Sidebar. The others (a) assists the Interface in finding the right key to send to the Sidebar for the current path, and (b) assists the header in filling out the page title.Due to some of the needs in the Interface,
resolveSidebarItemsis anExtendedSidebarItem; it has extra fields to help the CommandPalette. The shape passed to Sidebar is an unchangedSidebarItem.Interface
The palette code is revised to understand the new
ExtendedSidebarItemformat.The
ak-page-navbarandak-sidebarcalls have been revised to take the new format. The values are derived at the beginning of therender()function to avoid multiple calls to the resolvers.Checklist
make all)make docs)