web: Type Tidy (#14647)

* web: Update Sentry types.

* web: Update MDX types.

* web: Format. Remove unused script.

* web: Clean up test types.

* web: Fix label in dark mode.

Author: GirlBossRush

web/commands.mjs

@@ -0,0 +1,38 @@
+/// <reference types="@wdio/globals/types" />
+/// <reference types="./types/webdriver.js" />
+
+/**
+ *
+ * @param {WebdriverIO.Browser} browser
+ */
+export function addCommands(browser) {
+    /**
+     * @file Custom WDIO browser commands
+     */
+
+    browser.addCommand(
+        "focus",
+        /**
+         * @this {HTMLElement}
+         */
+        function () {
+            this.focus();
+
+            return this;
+        },
+        /* attachToElement */ true,
+    );
+
+    browser.addCommand(
+        "blur",
+        /**
+         * @this {HTMLElement}
+         */
+        function () {
+            this.blur();
+
+            return this;
+        },
+        /* attachToElement */ true,
+    );
+}

web/package-lock.json

@@ -14,13 +14,13 @@
         "format": "wireit",
         "lint": "eslint --fix .",
         "lint-check": "eslint --max-warnings 0 .",
-        "prettier": "prettier --cache --write -u .",
-        "prettier-check": "prettier --cache --check -u .",
         "lint:imports": "knip --config scripts/knip.config.ts",
         "lint:lockfile": "wireit",
         "lint:types": "wireit",
         "lit-analyse": "wireit",
         "precommit": "wireit",
+        "prettier": "prettier --cache --write -u .",
+        "prettier-check": "prettier --cache --check -u .",
         "pseudolocalize": "node ./scripts/pseudolocalize.mjs",
         "storybook": "storybook dev -p 6006",
         "storybook:build": "wireit",
@@ -171,6 +171,7 @@
         "@wdio/browser-runner": "9.4",
         "@wdio/cli": "9.4",
         "@wdio/spec-reporter": "^9.1.2",
+        "@web/test-runner": "^0.20.2",
         "chromedriver": "^136.0.3",
         "esbuild": "^0.25.4",
         "esbuild-plugin-copy": "^2.1.1",
@@ -301,8 +302,7 @@
                 "lint",
                 "lint:types",
                 "lint:components",
-                "lint:lockfile",
-                "lint:lockfiles"
+                "lint:lockfile"
             ]
         },
         "storybook:build": {
@@ -371,12 +371,12 @@
         "chromedriver": {
             "axios": "^1.8.4"
         },
+        "rapidoc": {
+            "@apitools/openapi-parser@": "0.0.37"
+        },
         "storybook-addon-mock": {
             "react": "^19.1.0",
             "react-dom": "^19.1.0"
-        },
-        "rapidoc": {
-            "@apitools/openapi-parser@": "0.0.37"
         }
     }
 }

web/package.json

@@ -1,8 +1,8 @@
 import { AKElement } from "@goauthentik/elements/Base";
-import { type SlottedTemplateResult, type Spread } from "@goauthentik/elements/types";
+import type { SlottedTemplateResult, Spread } from "@goauthentik/elements/types";
 import { spread } from "@open-wc/lit-helpers";
 
-import { html, nothing } from "lit";
+import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
@@ -44,15 +44,26 @@ export class Label extends AKElement implements ILabel {
     @property({ type: Boolean })
     compact = false;
 
-    static get styles() {
-        return [PFBase, PFLabel];
-    }
+    static styles = [
+        PFBase,
+        PFLabel,
+        css`
+            :host([theme="dark"]) {
+                .pf-m-grey {
+                    --pf-c-label__icon--Color: var(--ak-dark-background);
+                    --pf-c-label__content--Color: var(--ak-dark-background);
+                }
+            }
+        `,
+    ];
 
     get classesAndIcon() {
         const chrome = chromeList.find(
             ([level, color]) => this.color === level || this.color === color,
         );
+
         const [illo, icon] = chrome ? chrome.slice(2) : ["pf-m-grey", "fa-info-circle"];
+
         return {
             classes: {
                 "pf-c-label": true,
@@ -65,6 +76,7 @@ export class Label extends AKElement implements ILabel {
 
     render() {
         const { classes, icon } = this.classesAndIcon;
+
         return html`<span class=${classMap(classes)}>
             <span class="pf-c-label__content">
                 <span class="pf-c-label__icon">

web/src/elements/Label.ts

@@ -10,52 +10,52 @@ const DOCS_DOMAIN = "https://goauthentik.io";
  * - Resolves relative links to the public directory in the public docs domain.
  * - Intercepts local links and scrolls to the target element.
  */
-export const MDXAnchor = memo<React.AnchorHTMLAttributes<HTMLAnchorElement>>(
-    ({ href, children, ...props }) => {
-        const { publicDirectory } = useMDXModule();
+export const MDXAnchor = ({
+    href,
+    children,
+    ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+    const { publicDirectory } = useMDXModule();
 
-        if (href?.startsWith(".") && publicDirectory) {
-            const nextPathname = resolve(publicDirectory, href);
+    if (href?.startsWith(".") && publicDirectory) {
+        const nextPathname = resolve(publicDirectory, href);
 
-            const nextURL = new URL(nextPathname, DOCS_DOMAIN);
-            // Remove trailing .md and .mdx, and trailing "index".
-            nextURL.pathname = nextURL.pathname.replace(/(index)?\.mdx?$/, "");
-            href = nextURL.toString();
+        const nextURL = new URL(nextPathname, DOCS_DOMAIN);
+        // Remove trailing .md and .mdx, and trailing "index".
+        nextURL.pathname = nextURL.pathname.replace(/(index)?\.mdx?$/, "");
+        href = nextURL.toString();
+    }
+
+    const interceptHeadingLinks = (event: React.MouseEvent<HTMLAnchorElement>) => {
+        if (!href || !href.startsWith("#")) return;
+
+        event.preventDefault();
+
+        const rootNode = event.currentTarget.getRootNode() as ShadowRoot;
+
+        const elementID = href.slice(1);
+        const target = rootNode.getElementById(elementID);
+
+        if (!target) {
+            console.warn(`Element with ID ${elementID} not found`);
+            return;
         }
 
-        const interceptHeadingLinks = (event: React.MouseEvent<HTMLAnchorElement>) => {
-            if (!href || !href.startsWith("#")) return;
-
-            event.preventDefault();
-
-            const rootNode = event.currentTarget.getRootNode() as ShadowRoot;
-
-            const elementID = href.slice(1);
-            const target = rootNode.getElementById(elementID);
-
-            if (!target) {
-                console.warn(`Element with ID ${elementID} not found`);
-                return;
-            }
-
-            target.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-            });
-        };
-
-        return (
-            <a
-                href={href}
-                onClick={interceptHeadingLinks}
-                rel="noopener noreferrer"
-                target="_blank"
-                {...props}
-            >
-                {children}
-            </a>
-        );
-    },
-);
-
-MDXAnchor.displayName = "MDXAnchor";
+        target.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+        });
+    };
+
+    return (
+        <a
+            href={href}
+            onClick={interceptHeadingLinks}
+            rel="noopener noreferrer"
+            target="_blank"
+            {...props}
+        >
+            {children}
+        </a>
+    );
+};

web/src/elements/ak-mdx/components/MDXAnchor.tsx

@@ -8,7 +8,7 @@ export interface MDXWrapperProps {
 /**
  * A wrapper component for MDX content that adds a title if one is provided in the frontmatter.
  */
-export const MDXWrapper: React.FC<MDXWrapperProps> = ({ children, frontmatter }) => {
+export const MDXWrapper = ({ children, frontmatter }: MDXWrapperProps) => {
     const { title } = frontmatter;
     const nextChildren = React.Children.toArray(children);
 

web/src/elements/ak-mdx/components/MDXWrapper.tsx

@@ -0,0 +1,123 @@
+/**
+ * @file WebdriverIO configuration file for **component unit tests**.
+ *
+ * @see https://webdriver.io/docs/configurationfile.html
+ */
+import { cwd } from "process";
+import litCSS from "vite-plugin-lit-css";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+import { addCommands } from "../commands.mjs";
+
+const NODE_ENV = process.env.NODE_ENV || "development";
+const headless = !!process.env.HEADLESS || !!process.env.CI;
+const lemmeSee = !!process.env.WDIO_LEMME_SEE;
+
+/**
+ * @type {WebdriverIO.Capabilities[]}
+ */
+const capabilities = [];
+
+const DEFAULT_MAX_INSTANCES = 10;
+
+let maxInstances = 1;
+
+if (headless) {
+    maxInstances = process.env.MAX_INSTANCES
+        ? parseInt(process.env.MAX_INSTANCES, 10)
+        : DEFAULT_MAX_INSTANCES;
+}
+
+if (!process.env.WDIO_SKIP_CHROME) {
+    /**
+     * @satisfies {WebdriverIO.Capabilities}
+     */
+    const chromeBrowserConfig = {
+        "browserName": "chrome",
+        "goog:chromeOptions": {
+            args: ["disable-search-engine-choice-screen"],
+        },
+    };
+
+    if (headless) {
+        chromeBrowserConfig["goog:chromeOptions"].args.push(
+            "headless",
+            "disable-gpu",
+            "no-sandbox",
+            "window-size=1280,672",
+            "browser-test",
+        );
+    }
+
+    capabilities.push(chromeBrowserConfig);
+}
+
+if (process.env.WDIO_TEST_SAFARI) {
+    capabilities.push({
+        browserName: "safari",
+    });
+}
+
+if (process.env.WDIO_TEST_FIREFOX) {
+    capabilities.push({
+        browserName: "firefox",
+    });
+}
+
+/**
+ * @type {WebdriverIO.BrowserRunnerOptions}
+ */
+const browserRunnerOptions = {
+    viteConfig: {
+        define: {
+            "process.env.NODE_ENV": JSON.stringify(NODE_ENV),
+            "process.env.CWD": JSON.stringify(cwd()),
+            "process.env.AK_API_BASE_PATH": JSON.stringify(process.env.AK_API_BASE_PATH || ""),
+        },
+        plugins: [
+            // ---
+            // @ts-ignore WDIO's Vite is out of date.
+            litCSS(),
+            // @ts-ignore WDIO's Vite is out of date.
+            tsconfigPaths(),
+        ],
+    },
+};
+/**
+ * @satisfies {WebdriverIO.Config}
+ */
+export const config = {
+    runner: ["browser", browserRunnerOptions],
+
+    tsConfigPath: "./tsconfig.test.json",
+
+    specs: ["./src/**/*.test.ts"],
+    exclude: [],
+
+    maxInstances,
+    capabilities,
+    logLevel: "warn",
+    bail: 0,
+    waitforTimeout: 12000,
+    connectionRetryTimeout: 12000,
+    connectionRetryCount: 3,
+
+    framework: "mocha",
+
+    reporters: ["spec"],
+
+    mochaOpts: {
+        ui: "bdd",
+        timeout: 60000,
+    },
+    /**
+     * @param {WebdriverIO.Browser} browser
+     */
+    before(_capabilities, _specs, browser) {
+        addCommands(browser);
+    },
+
+    afterTest() {
+        if (lemmeSee) return browser.pause(500);
+    },
+};