web: Merge branch -- Stale notifications, synchronized context objects, rendering fixes

tests/e2e/test_source_oauth_oauth2.py

@@ -89,26 +89,7 @@ def find_settings_tab_panel(self, tab_name: str, panel_content_selector: str):
 
         interface = self.driver.find_element(By.CSS_SELECTOR, "ak-interface-user").shadow_root
 
-        interface_wait = WebDriverWait(interface, INTERFACE_TIMEOUT)
-
-        try:
-            interface_wait.until(
-                ec.presence_of_element_located((By.CSS_SELECTOR, "ak-interface-user-presentation"))
-            )
-        except TimeoutException:
-            snippet = context.text.strip()[:1000].replace("\n", " ")
-            self.fail(
-                f"Timed out waiting for element text to appear at {self.driver.current_url}. "
-                f"Current content: {snippet or '<empty>'}"
-            )
-
-        interface_presentation = interface.find_element(
-            By.CSS_SELECTOR, "ak-interface-user-presentation"
-        ).shadow_root
-
-        user_settings = interface_presentation.find_element(
-            By.CSS_SELECTOR, "ak-user-settings"
-        ).shadow_root
+        user_settings = interface.find_element(By.CSS_SELECTOR, "ak-user-settings").shadow_root
 
         tab_panel = user_settings.find_element(By.CSS_SELECTOR, panel_content_selector).shadow_root
 

web/logger/browser.js

@@ -0,0 +1,139 @@
+/**
+ * @file Console logger for browser environments.
+ *
+ * @remarks
+ * The repetition of log levels, typedefs, and method signatures is intentional
+ * to give IDEs and type checkers a mapping of log methods to the TypeScript
+ * provided JSDoc comments.
+ *
+ * Additionally, no wrapper functions are used to avoid the browser's console
+ * reported call site being the wrapper instead of the actual caller.
+ */
+
+/* eslint-disable no-console */
+
+//#region Functions
+
+/**
+ * @typedef {object} Logger
+ * @property {typeof console.info} info;
+ * @property {typeof console.warn} warn;
+ * @property {typeof console.error} error;
+ * @property {typeof console.debug} debug;
+ * @property {typeof console.trace} trace;
+ */
+
+/**
+ * Labels log levels in the browser console.
+ */
+const LogLevelLabel = /** @type {const} */ ({
+    info: "[INFO]",
+    warn: "[WARN]",
+    error: "[ERROR]",
+    debug: "[DEBUG]",
+    trace: "[TRACE]",
+});
+
+/**
+ * @typedef {keyof typeof LogLevelLabel} LogLevel
+ */
+
+/**
+ * Predefined log levels.
+ */
+const LogLevels = /** @type {LogLevel[]} */ (Object.keys(LogLevelLabel));
+
+/**
+ * Colors for log levels in the browser console.
+ *
+ * @remarks
+ *
+ * The colors are derived from Carbon Design System's palette to ensure
+ * sufficient contrast and accessibility across light and dark themes.
+ */
+const LogLevelColors = /** @type {const} */ ({
+    info: `light-dark(#0043CE, #4589FF)`,
+    warn: `light-dark(#F1C21B, #F1C21B)`,
+    error: `light-dark(#DA1E28, #FA4D56)`,
+    debug: `light-dark(#8A3FFC, #A56EFF)`,
+    trace: `light-dark(#8A3FFC, #A56EFF)`,
+});
+
+/**
+ * Creates a logger with the given prefix.
+ *
+ * @param {string} [prefix]
+ * @param {...string} args
+ * @returns {Logger}
+ *
+ */
+export function createLogger(prefix, ...args) {
+    const suffix = prefix ? `(${prefix}):` : ":";
+
+    /**
+     * @type {Partial<Logger>}
+     */
+    const logger = {};
+
+    for (const level of LogLevels) {
+        const label = LogLevelLabel[level];
+        const color = LogLevelColors[level];
+
+        logger[level] = console[level].bind(
+            console,
+            `%c${label}%c ${suffix}%c`,
+            `font-weight: 700; color: ${color};`,
+            `font-weight: 600; color: CanvasText;`,
+            "",
+            ...args,
+        );
+    }
+
+    return /** @type {Logger} */ (logger);
+}
+
+//#endregion
+
+//#region Console Logger
+
+/**
+ * @typedef {Logger & {prefix: (logPrefix: string) => Logger}} IConsoleLogger
+ */
+
+/**
+ * A singleton logger instance for the browser.
+ *
+ * ```js
+ * import { ConsoleLogger } from "#logger/browser";
+ *
+ * ConsoleLogger.info("Hello, world!");
+ * ```
+ *
+ * @implements {IConsoleLogger}
+ * @runtime browser
+ */
+// @ts-expect-error Logging properties are dynamically assigned.
+export class ConsoleLogger {
+    /** @type {typeof console.info} */
+    static info;
+    /** @type {typeof console.warn} */
+    static warn;
+    /** @type {typeof console.error} */
+    static error;
+    /** @type {typeof console.debug} */
+    static debug;
+    /** @type {typeof console.trace} */
+    static trace;
+
+    /**
+     * Creates a logger with the given prefix.
+     * @param {string} logPrefix
+     */
+    static prefix(logPrefix) {
+        return createLogger(logPrefix);
+    }
+}
+
+Object.assign(ConsoleLogger, createLogger());
+
+//#endregion

web/src/admin/AdminInterface/index.entrypoint.css

@@ -14,10 +14,6 @@
     }
 }
 
-.display-none {
-    display: none;
-}
-
 ak-page-navbar {
     grid-area: header;
 }
@@ -36,5 +32,5 @@ ak-sidebar-item:active ak-sidebar-item::part(list-item) {
 }
 
 .pf-c-drawer__panel {
-    z-index: var(--pf-global--ZIndex--xl);
+    background-color: transparent !important;
 }

web/src/admin/AdminInterface/index.entrypoint.ts

@@ -2,8 +2,6 @@ import "#admin/AdminInterface/AboutModal";
 import "#elements/banner/EnterpriseStatusBanner";
 import "#elements/banner/VersionBanner";
 import "#elements/messages/MessageContainer";
-import "#elements/notifications/APIDrawer";
-import "#elements/notifications/NotificationDrawer";
 import "#elements/router/RouterOutlet";
 import "#elements/sidebar/Sidebar";
 import "#elements/sidebar/SidebarItem";
@@ -15,15 +13,22 @@ import {
 } from "./AdminSidebar.js";
 
 import { isAPIResultReady } from "#common/api/responses";
-import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE } from "#common/constants";
 import { configureSentry } from "#common/sentry/index";
 import { isGuest } from "#common/users";
-import { WebsocketClient } from "#common/ws";
+import { WebsocketClient } from "#common/ws/WebSocketClient";
 
 import { AuthenticatedInterface } from "#elements/AuthenticatedInterface";
+import { listen } from "#elements/decorators/listen";
 import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
+import { WithNotifications } from "#elements/mixins/notifications";
 import { canAccessAdmin, WithSession } from "#elements/mixins/session";
-import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
+import { AKDrawerChangeEvent } from "#elements/notifications/events";
+import {
+    DrawerState,
+    persistDrawerParams,
+    readDrawerParams,
+    renderNotificationDrawerPanel,
+} from "#elements/notifications/utils";
 
 import { PageNavMenuToggle } from "#components/ak-page-navbar";
 
@@ -34,28 +39,36 @@ import { ROUTES } from "#admin/Routes";
 import { CapabilitiesEnum } from "@goauthentik/api";
 
 import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 if (process.env.NODE_ENV === "development") {
     await import("@goauthentik/esbuild-plugin-live-reload/client");
 }
 
 @customElement("ak-interface-admin")
-export class AdminInterface extends WithCapabilitiesConfig(WithSession(AuthenticatedInterface)) {
-    //#region Properties
+export class AdminInterface extends WithCapabilitiesConfig(
+    WithNotifications(WithSession(AuthenticatedInterface)),
+) {
+    //#region Styles
+
+    public static readonly styles: CSSResult[] = [
+        // ---
+        PFPage,
+        PFButton,
+        PFDrawer,
+        PFNav,
+        Styles,
+    ];
 
-    @property({ type: Boolean })
-    public notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
+    //#endregion
 
-    @property({ type: Boolean })
-    public apiDrawerOpen = getURLParam("apiDrawerOpen", false);
+    //#region Properties
 
     @query("ak-about-modal")
     public aboutModal?: AboutModal;
@@ -74,19 +87,14 @@ export class AdminInterface extends WithCapabilitiesConfig(WithSession(Authentic
 
     //#endregion
 
-    //#region Styles
+    @state()
+    protected drawer: DrawerState = readDrawerParams();
 
-    static styles: CSSResult[] = [
-        // ---
-        PFBase,
-        PFPage,
-        PFButton,
-        PFDrawer,
-        PFNav,
-        Styles,
-    ];
-
-    //#endregion
+    @listen(AKDrawerChangeEvent)
+    protected drawerListener = (event: AKDrawerChangeEvent) => {
+        this.drawer = event.drawer;
+        persistDrawerParams(event.drawer);
+    };
 
     //#region Lifecycle
 
@@ -99,6 +107,7 @@ export class AdminInterface extends WithCapabilitiesConfig(WithSession(Authentic
 
         this.#sidebarMatcher = window.matchMedia("(min-width: 1200px)");
         this.sidebarOpen = this.#sidebarMatcher.matches;
+
         this.addEventListener(PageNavMenuToggle.eventName, this.#onPageNavMenuEvent, {
             passive: true,
         });
@@ -107,27 +116,14 @@ export class AdminInterface extends WithCapabilitiesConfig(WithSession(Authentic
     public connectedCallback() {
         super.connectedCallback();
 
-        window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
-            this.notificationDrawerOpen = !this.notificationDrawerOpen;
-            updateURLParams({
-                notificationDrawerOpen: this.notificationDrawerOpen,
-            });
-        });
-
-        window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
-            this.apiDrawerOpen = !this.apiDrawerOpen;
-            updateURLParams({
-                apiDrawerOpen: this.apiDrawerOpen,
-            });
-        });
-
         this.#sidebarMatcher.addEventListener("change", this.#sidebarMediaQueryListener, {
             passive: true,
         });
     }
 
     public disconnectedCallback(): void {
         super.disconnectedCallback();
+
         this.#sidebarMatcher.removeEventListener("change", this.#sidebarMediaQueryListener);
 
         WebsocketClient.close();
@@ -154,11 +150,10 @@ export class AdminInterface extends WithCapabilitiesConfig(WithSession(Authentic
             "pf-m-collapsed": !this.sidebarOpen,
         };
 
-        const drawerOpen = this.notificationDrawerOpen || this.apiDrawerOpen;
-
+        const openDrawerCount = (this.drawer.notifications ? 1 : 0) + (this.drawer.api ? 1 : 0);
         const drawerClasses = {
-            "pf-m-expanded": drawerOpen,
-            "pf-m-collapsed": !drawerOpen,
+            "pf-m-expanded": openDrawerCount !== 0,
+            "pf-m-collapsed": openDrawerCount === 0,
         };
 
         return html`<div class="pf-c-page">
@@ -190,18 +185,7 @@ export class AdminInterface extends WithCapabilitiesConfig(WithSession(Authentic
                                 </ak-router-outlet>
                             </div>
                         </div>
-                        <ak-notification-drawer
-                            class="pf-c-drawer__panel pf-m-width-33 ${this.notificationDrawerOpen
-                                ? ""
-                                : "display-none"}"
-                            ?hidden=${!this.notificationDrawerOpen}
-                        ></ak-notification-drawer>
-                        <ak-api-drawer
-                            class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
-                                ? ""
-                                : "display-none"}"
-                            ?hidden=${!this.apiDrawerOpen}
-                        ></ak-api-drawer>
+                        ${renderNotificationDrawerPanel(this.drawer)}
                         <ak-about-modal></ak-about-modal>
                     </div>
                 </div>

web/src/admin/endpoints/DeviceAccessGroupsListPage.ts

@@ -52,7 +52,6 @@ export class DeviceAccessGroupsListPage extends TablePage<DeviceAccessGroup> {
                         </pf-tooltip>
                     </button>
                 </ak-forms-modal>
-                <div></div>
             </div>`,
         ];
     }

web/src/admin/providers/BaseProviderForm.ts

@@ -1,8 +1,7 @@
 import { APIError } from "#common/errors/network";
-import { MessageLevel } from "#common/messages";
+import { APIMessage, MessageLevel } from "#common/messages";
 
 import { ModelForm } from "#elements/forms/ModelForm";
-import { APIMessage } from "#elements/messages/Message";
 
 import { msg } from "@lit/localize";
 

web/src/admin/users/UserImpersonateForm.ts

@@ -1,10 +1,9 @@
 import "#components/ak-text-input";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
-import { MessageLevel } from "#common/messages";
+import { APIMessage, MessageLevel } from "#common/messages";
 
 import { Form } from "#elements/forms/Form";
-import { APIMessage } from "#elements/messages/Message";
 
 import { AdminApi, CoreApi, ImpersonationRequest } from "@goauthentik/api";