web: almost there with the sidebar

The actual behavior is more or less what I expected.  What's missing is:

- Persistence of location (the hover effect fades with a click anywhere else)
- Proper testing of the oddities
- Full (or any!) responsiveness when moving between third-tier links in the same category

Stretch goal:
- Remembering the state of the sidebar when transitioning between the user and the admin (this will require using some localstorage, I suspect).

I also think that in my rush there's a bit of lost internal coherency.  I'd like to figure out what's wiggling around my brain and solve that discomfort.

web/src/admin/AdminInterface/AdminSidebar.ts

@@ -5,18 +5,35 @@ import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts"
 import { AKElement } from "@goauthentik/elements/Base";
 import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "@goauthentik/elements/router/Route";
 import "@goauthentik/elements/sidebar/Sidebar";
-import { SidebarAttributes, SidebarEntry, SidebarEventHandler } from "@goauthentik/elements/sidebar/SidebarItems";
+import {
+    SidebarAttributes,
+    SidebarEntry,
+    SidebarEventHandler,
+} from "@goauthentik/elements/sidebar/SidebarItems";
 import { getRootStyle } from "@goauthentik/elements/utils/getRootStyle";
 
 import { consume } from "@lit-labs/context";
 import { msg, str } from "@lit/localize";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { eventActionLabels } from "@goauthentik/common/labels";
 
 import { ProvidersApi, TypeCreate } from "@goauthentik/api";
-import { AdminApi, CapabilitiesEnum, CoreApi, Version } from "@goauthentik/api";
+import {
+    AdminApi,
+    CapabilitiesEnum,
+    CoreApi,
+    OutpostsApi,
+    PoliciesApi,
+    PropertymappingsApi,
+    SourcesApi,
+    StagesApi,
+    Version,
+} from "@goauthentik/api";
 import type { Config, SessionUser, UserSelf } from "@goauthentik/api";
 
+import { flowDesignationTable } from "../flows/utils";
+
 /**
  * AdminSidebar
  *
@@ -24,7 +41,7 @@ import type { Config, SessionUser, UserSelf } from "@goauthentik/api";
  * it.  Rendering decisions are left to the sidebar itself.
  */
 
-type LocalSidebarEntry = [
+export type LocalSidebarEntry = [
     string | SidebarEventHandler | null,
     string,
     (SidebarAttributes | string[] | null)?, // eslint-disable-line
@@ -38,8 +55,17 @@ const localToSidebarEntry = (l: LocalSidebarEntry): SidebarEntry => ({
     ...(l[3] ? { children: l[3].map(localToSidebarEntry) } : {}),
 });
 
+const typeCreateToSidebar = (baseUrl: string, tcreate: TypeCreate[]): LocalSidebarEntry[] =>
+    tcreate.map((t) => [
+        `${baseUrl};${encodeURIComponent(JSON.stringify({ search: t.name }))}`,
+        t.name,
+    ]);
+
 @customElement("ak-admin-sidebar")
 export class AkAdminSidebar extends AKElement {
+    @consume({ context: authentikConfigContext })
+    public config!: Config;
+
     @property({ type: Boolean, reflect: true })
     open = true;
 
@@ -52,8 +78,20 @@ export class AkAdminSidebar extends AKElement {
     @state()
     providerTypes: TypeCreate[] = [];
 
-    @consume({ context: authentikConfigContext })
+    @state()
-    public config!: Config;
+    stageTypes: TypeCreate[] = [];
+
+    @state()
+    mappingTypes: TypeCreate[] = [];
+
+    @state()
+    sourceTypes: TypeCreate[] = [];
+
+    @state()
+    policyTypes: TypeCreate[] = [];
+
+    @state()
+    connectionTypes: TypeCreate[] = [];
 
     constructor() {
         super();
@@ -66,6 +104,22 @@ export class AkAdminSidebar extends AKElement {
         new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((types) => {
             this.providerTypes = types;
         });
+        new StagesApi(DEFAULT_CONFIG).stagesAllTypesList().then((types) => {
+            this.stageTypes = types;
+        });
+        new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllTypesList().then((types) => {
+            this.mappingTypes = types;
+        });
+        new SourcesApi(DEFAULT_CONFIG).sourcesAllTypesList().then((types) => {
+            this.sourceTypes = types;
+        });
+        new PoliciesApi(DEFAULT_CONFIG).policiesAllTypesList().then((types) => {
+            this.policyTypes = types;
+        });
+        new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllTypesList().then((types) => {
+            this.connectionTypes = types;
+        });
+
         this.toggleOpen = this.toggleOpen.bind(this);
         this.checkWidth = this.checkWidth.bind(this);
     }
@@ -79,7 +133,9 @@ export class AkAdminSidebar extends AKElement {
     checkWidth() {
         // This works just fine, but it assumes that the `--ak-sidebar--minimum-auto-width` is in
         // REMs. If that changes, this code will have to be adjusted as well.
-        const minWidth = parseFloat(getRootStyle("--ak-sidebar--minimum-auto-width")) * parseFloat(getRootStyle("font-size"));
+        const minWidth =
+            parseFloat(getRootStyle("--ak-sidebar--minimum-auto-width")) *
+            parseFloat(getRootStyle("font-size"));
         this.open = window.innerWidth >= minWidth;
     }
 
@@ -133,8 +189,21 @@ export class AkAdminSidebar extends AKElement {
             : [];
 
         // prettier-ignore
-        const providerTypes: LocalSidebarEntry[] = this.providerTypes.map((ptype) =>
+        const flowTypes: LocalSidebarEntry[] = flowDesignationTable.map(([_designation, label]) =>  
-            ([`/core/providers;${encodeURIComponent(JSON.stringify({ search: ptype.modelName.replace(/provider$/, "") }))}`, ptype.name]));
+            ([`/flow/flows;${encodeURIComponent(JSON.stringify({ search: label }))}`, label]));
+
+
+        const eventTypes: LocalSidebarEntry[] = eventActionLabels.map(([_action, label]) =>  
+            ([`/events/log;${encodeURIComponent(JSON.stringify({ search: label }))}`, label]));
+        
+        const [mappingTypes,  providerTypes, sourceTypes, stageTypes, connectionTypes, policyTypes] = [
+            typeCreateToSidebar("/core/property-mappings", this.mappingTypes),
+            typeCreateToSidebar("/core/providers", this.providerTypes),
+            typeCreateToSidebar("/core/sources", this.sourceTypes),
+            typeCreateToSidebar("/flow/stages", this.stageTypes),
+            typeCreateToSidebar("/outpost/integrations", this.connectionTypes),
+            typeCreateToSidebar("/policy/policies", this.policyTypes),
+        ];
 
         // prettier-ignore
         const localSidebar: LocalSidebarEntry[] = [
@@ -150,29 +219,29 @@ export class AkAdminSidebar extends AKElement {
                 ["/core/providers", msg("Providers"), [`^/core/providers/(?<id>${ID_REGEX})$`], providerTypes],
                 ["/outpost/outposts", msg("Outposts")]]],
             [null, msg("Events"), null, [
-                ["/events/log", msg("Logs"), [`^/events/log/(?<id>${UUID_REGEX})$`]],
+                ["/events/log", msg("Logs"), [`^/events/log/(?<id>${UUID_REGEX})$`], eventTypes],
                 ["/events/rules", msg("Notification Rules")],
                 ["/events/transports", msg("Notification Transports")]]],
             [null, msg("Customisation"), null, [
-                ["/policy/policies", msg("Policies")],
+                ["/policy/policies", msg("Policies"), null, policyTypes],
-                ["/core/property-mappings", msg("Property Mappings")],
+                ["/core/property-mappings", msg("Property Mappings"), null, mappingTypes],
                 ["/blueprints/instances", msg("Blueprints")],
                 ["/policy/reputation", msg("Reputation scores")]]],
             [null, msg("Flows and Stages"), null, [
-                ["/flow/flows", msg("Flows"), [`^/flow/flows/(?<slug>${SLUG_REGEX})$`]],
+                ["/flow/flows", msg("Flows"), [`^/flow/flows/(?<slug>${SLUG_REGEX})$`], flowTypes],
-                ["/flow/stages", msg("Stages")],
+                ["/flow/stages", msg("Stages"), null, stageTypes],
                 ["/flow/stages/prompts", msg("Prompts")]]],
             [null, msg("Directory"), null, [
                 ["/identity/users", msg("Users"), [`^/identity/users/(?<id>${ID_REGEX})$`]],
                 ["/identity/groups", msg("Groups"), [`^/identity/groups/(?<id>${UUID_REGEX})$`]],
                 ["/identity/roles", msg("Roles"), [`^/identity/roles/(?<id>${UUID_REGEX})$`]],
-                ["/core/sources", msg("Federation and Social login"), [`^/core/sources/(?<slug>${SLUG_REGEX})$`]],
+                ["/core/sources", msg("Federation and Social login"), [`^/core/sources/(?<slug>${SLUG_REGEX})$`], sourceTypes],
                 ["/core/tokens", msg("Tokens and App passwords")],
                 ["/flow/stages/invitations", msg("Invitations")]]],
             [null, msg("System"), null, [
                 ["/core/tenants", msg("Tenants")],
                 ["/crypto/certificates", msg("Certificates")],
-                ["/outpost/integrations", msg("Outpost Integrations")]]],
+                ["/outpost/integrations", msg("Outpost Integrations"), null, connectionTypes]]],
             ...(enterpriseMenu)
         ];
 
@@ -180,6 +249,8 @@ export class AkAdminSidebar extends AKElement {
     }
 
     render() {
-        return html` <ak-sidebar class="pf-c-page__sidebar" .entries=${this.sidebarItems}></ak-sidebar> `;
+        return html`
+            <ak-sidebar class="pf-c-page__sidebar" .entries=${this.sidebarItems}></ak-sidebar>
+        `;
     }
 }

web/src/admin/flows/utils.ts

@@ -6,40 +6,33 @@ export function RenderFlowOption(flow: Flow): string {
     return `${flow.slug} (${flow.name})`;
 }
 
+type Pair = [FlowDesignationEnum, string];
+
+export const flowDesignationTable: Pair[] = [
+    [FlowDesignationEnum.Authentication,        msg("Authentication")],
+    [FlowDesignationEnum.Authorization,         msg("Authorization")],
+    [FlowDesignationEnum.Enrollment,            msg("Enrollment")],
+    [FlowDesignationEnum.Invalidation,          msg("Invalidation")],
+    [FlowDesignationEnum.Recovery,              msg("Recovery")],
+    [FlowDesignationEnum.StageConfiguration,    msg("Stage Configuration")],
+    [FlowDesignationEnum.Unenrollment,          msg("Unenrollment")],
+]
+
+// prettier-ignore
+const flowDesignations = new Map(flowDesignationTable);
+
 export function DesignationToLabel(designation: FlowDesignationEnum): string {
-    switch (designation) {
+    return flowDesignations.get(designation) ?? msg("Unknown designation");
-        case FlowDesignationEnum.Authentication:
-            return msg("Authentication");
-        case FlowDesignationEnum.Authorization:
-            return msg("Authorization");
-        case FlowDesignationEnum.Enrollment:
-            return msg("Enrollment");
-        case FlowDesignationEnum.Invalidation:
-            return msg("Invalidation");
-        case FlowDesignationEnum.Recovery:
-            return msg("Recovery");
-        case FlowDesignationEnum.StageConfiguration:
-            return msg("Stage Configuration");
-        case FlowDesignationEnum.Unenrollment:
-            return msg("Unenrollment");
-        case FlowDesignationEnum.UnknownDefaultOpenApi:
-            return msg("Unknown designation");
-    }
 }
 
+const layoutToLabel = new Map([
+    [LayoutEnum.Stacked,               msg("Stacked")],
+    [LayoutEnum.ContentLeft,           msg("Content left")],
+    [LayoutEnum.ContentRight,          msg("Content right")],
+    [LayoutEnum.SidebarLeft,           msg("Sidebar left")],
+    [LayoutEnum.SidebarRight,          msg("Sidebar right")],
+]);
+
 export function LayoutToLabel(layout: LayoutEnum): string {
-    switch (layout) {
+    return layoutToLabel.get(layout) ?? msg("Unknown layout");
-        case LayoutEnum.Stacked:
-            return msg("Stacked");
-        case LayoutEnum.ContentLeft:
-            return msg("Content left");
-        case LayoutEnum.ContentRight:
-            return msg("Content right");
-        case LayoutEnum.SidebarLeft:
-            return msg("Sidebar left");
-        case LayoutEnum.SidebarRight:
-            return msg("Sidebar right");
-        case LayoutEnum.UnknownDefaultOpenApi:
-            return msg("Unknown layout");
-    }
 }

web/src/common/labels.ts

@@ -2,6 +2,8 @@ import { msg } from "@lit/localize";
 
 import { Device, EventActions, IntentEnum, SeverityEnum, UserTypeEnum } from "@goauthentik/api";
 
+type Pair<T> = [T, string];
+
 /* Various tables in the API for which we need to supply labels */
 
 export const intentEnumToLabel = new Map<IntentEnum, string>([
@@ -14,7 +16,7 @@ export const intentEnumToLabel = new Map<IntentEnum, string>([
 
 export const intentToLabel = (intent: IntentEnum) => intentEnumToLabel.get(intent);
 
-export const eventActionToLabel = new Map<EventActions | undefined, string>([
+export const eventActionLabels: Pair<EventActions>[] = [
     [EventActions.Login, msg("Login")],
     [EventActions.LoginFailed, msg("Failed login")],
     [EventActions.Logout, msg("Logout")],
@@ -43,7 +45,9 @@ export const eventActionToLabel = new Map<EventActions | undefined, string>([
     [EventActions.ModelDeleted, msg("Model deleted")],
     [EventActions.EmailSent, msg("Email sent")],
     [EventActions.UpdateAvailable, msg("Update available")],
-]);
+]
+
+export const eventActionToLabel = new Map<EventActions | undefined, string>(eventActionLabels);
 
 export const actionToLabel = (action?: EventActions): string =>
     eventActionToLabel.get(action) ?? action ?? "";

web/src/elements/sidebar/SidebarItems.ts

@@ -69,6 +69,12 @@ export class SidebarItems extends AKElement {
                     max-height: 82px;
                     margin-bottom: -0.5rem;
                 }
+                .pf-c-nav__toggle {
+                    width: calc(
+                        var(--pf-c-nav__toggle--FontSize) + calc(2 * var(--pf-global--spacer--md))
+                    );
+                }
+
                 nav {
                     display: flex;
                     flex-direction: column;
@@ -86,6 +92,17 @@ export class SidebarItems extends AKElement {
                     --pf-c-nav__link--PaddingRight: 0.5rem;
                     --pf-c-nav__link--PaddingBottom: 0.5rem;
                 }
+
+                .pf-c-nav__link a {
+flex: 1 0 max-content;
+                    color: var(--pf-c-nav__link--Color);
+                }
+
+                a.pf-c-nav__link:hover {
+                    color: var(--pf-c-nav__link--Color);
+                    text-decoration: var(--pf-global--link--TextDecoration--hover);
+                }
+
                 .pf-c-nav__section-title {
                     font-size: 12px;
                 }