From ac00386a2919d37cc84ecb2227047ae5799818e9 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Mon, 18 Nov 2024 04:17:21 -0800 Subject: [PATCH] web/admin: better footer links (#12004) * web: Add InvalidationFlow to Radius Provider dialogues ## What - Bugfix: adds the InvalidationFlow to the Radius Provider dialogues - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated to the Notification. - Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/` ## Note Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current dialogues at the moment. * First things first: save the blueprint that initializes the test runner. * Committing to having the PKs be a string, and streamlining an event handler. Type solidity needed for the footer control. * web/admin/better-footer-links # What - A data control that takes two string fields and returns the JSON object for a FooterLink - A data control that takes a control like the one above and assists the user in entering a collection of such objects. # Why We're trying to move away from CodeMirror for the simple things, like tables of what is essentially data entry. Jens proposed this ArrayInput thing, and I've simplified it so you define what "a row" is as a small, lightweight custom Component that returns and validates the datatype for that row, and ArrayInput creates a table of rows, and that's that. We're still working out the details, but the demo is to replace the "Name & URL" table in AdminSettingsForm with this, since it was silly to ask the customer to hand-write JSON or YAML, getting the keys right every time, for an `Array>`. And some client-side validation can't hurt. Storybook included. Tests to come. * Not ready for prime time. * One lint. Other lints are still in progress. * web: lots of 'as unknown as Foo' I know this is considered bad practice, but we use Lit and Lit.spread to send initialization arguments to functions that create DOM objects, and Lit's prefix convention of '.' for object, '?' for boolean, and '@' for event handler doesn't map at all to the Interface declarations of Typescript. So we have to cast these types when sending them via functions to constructors. * web/admin/better-footer-links # What - Remove the "JSON or YAML" language from the AdminSettings page for describing FooterLinks inputs. - Add unit tests for ArrayInput and AdminSettingsFooterLinks. - Provide a property for accessing a component's value # Why Providing a property by which the JSONified version of the value can be accessed enhances the ability of tests to independently check that the value is in a state we desire, since properties can easily be accessed across the wire protocol used by browser-based testing environments. * Ensure the UI is built from _current_ before running tests. --- web/package.json | 6 + .../AdminSettingsFooterLinks.ts | 100 ++++++++++ .../admin/admin-settings/AdminSettingsForm.ts | 37 ++-- .../AdminSettingsFooterLinks.stories.ts | 80 ++++++++ .../stories/AdminSettingsFooterLinks.test.ts | 68 +++++++ web/src/elements/AkControlElement.ts | 12 +- web/src/elements/ak-array-input.ts | 173 ++++++++++++++++++ web/src/elements/forms/Form.ts | 2 +- .../forms/SearchSelect/SearchSelect.ts | 28 +-- .../forms/SearchSelect/ak-search-select-ez.ts | 2 +- .../forms/SearchSelect/ak-search-select.ts | 4 +- .../stories/ak-search-select.stories.ts | 2 +- .../stories/ak-array-input.stories.ts | 96 ++++++++++ web/src/elements/tests/ak-array-input.test.ts | 55 ++++++ web/tests/blueprints/test-admin-user.yaml | 16 ++ 15 files changed, 652 insertions(+), 29 deletions(-) create mode 100644 web/src/admin/admin-settings/AdminSettingsFooterLinks.ts create mode 100644 web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts create mode 100644 web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts create mode 100644 web/src/elements/ak-array-input.ts create mode 100644 web/src/elements/stories/ak-array-input.stories.ts create mode 100644 web/src/elements/tests/ak-array-input.test.ts create mode 100644 web/tests/blueprints/test-admin-user.yaml diff --git a/web/package.json b/web/package.json index 1bba550f4c..97db2787ce 100644 --- a/web/package.json +++ b/web/package.json @@ -328,12 +328,18 @@ }, "test:e2e:watch": { "command": "wdio run ./tests/wdio.conf.ts", + "dependencies": [ + "build" + ], "env": { "TS_NODE_PROJECT": "./tests/tsconfig.test.json" } }, "test:watch": { "command": "wdio run ./wdio.conf.ts", + "dependencies": [ + "build" + ], "env": { "TS_NODE_PROJECT": "tsconfig.test.json" } diff --git a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts new file mode 100644 index 0000000000..5ea882ecd2 --- /dev/null +++ b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts @@ -0,0 +1,100 @@ +import { AkControlElement } from "@goauthentik/elements/AkControlElement.js"; +import { type Spread } from "@goauthentik/elements/types"; +import { spread } from "@open-wc/lit-helpers"; + +import { msg } from "@lit/localize"; +import { css, html } from "lit"; +import { customElement, property, queryAll } from "lit/decorators.js"; +import { ifDefined } from "lit/directives/if-defined.js"; + +import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; +import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; + +import { FooterLink } from "@goauthentik/api"; + +export interface IFooterLinkInput { + footerLink: FooterLink; +} + +const LEGAL_SCHEMES = ["http://", "https://", "mailto:"]; +const hasLegalScheme = (url: string) => + LEGAL_SCHEMES.some((scheme) => url.substr(0, scheme.length).toLowerCase() === scheme); + +@customElement("ak-admin-settings-footer-link") +export class FooterLinkInput extends AkControlElement { + static get styles() { + return [ + PFBase, + PFInputGroup, + PFFormControl, + css` + .pf-c-input-group input#linkname { + flex-grow: 1; + width: 8rem; + } + `, + ]; + } + + @property({ type: Object, attribute: false }) + footerLink: FooterLink = { + name: "", + href: "", + }; + + @queryAll(".ak-form-control") + controls?: HTMLInputElement[]; + + json() { + return Object.fromEntries( + Array.from(this.controls ?? []).map((control) => [control.name, control.value]), + ) as unknown as FooterLink; + } + + get isValid() { + const href = this.json()?.href ?? ""; + return hasLegalScheme(href) && URL.canParse(href); + } + + render() { + const onChange = () => { + this.dispatchEvent(new Event("change", { composed: true, bubbles: true })); + }; + + return html`
+ + +
`; + } +} + +export function akFooterLinkInput(properties: IFooterLinkInput) { + return html``; +} + +declare global { + interface HTMLElementTagNameMap { + "ak-admin-settings-footer-link": FooterLinkInput; + } +} diff --git a/web/src/admin/admin-settings/AdminSettingsForm.ts b/web/src/admin/admin-settings/AdminSettingsForm.ts index 92c576d8d6..38c9ab4f20 100644 --- a/web/src/admin/admin-settings/AdminSettingsForm.ts +++ b/web/src/admin/admin-settings/AdminSettingsForm.ts @@ -3,8 +3,7 @@ import { first } from "@goauthentik/common/utils"; import "@goauthentik/components/ak-number-input"; import "@goauthentik/components/ak-switch-input"; import "@goauthentik/components/ak-text-input"; -import "@goauthentik/elements/CodeMirror"; -import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror"; +import "@goauthentik/elements/ak-array-input.js"; import { Form } from "@goauthentik/elements/forms/Form"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; @@ -13,13 +12,16 @@ import "@goauthentik/elements/forms/SearchSelect"; import "@goauthentik/elements/utils/TimeDeltaHelp"; import { msg } from "@lit/localize"; -import { CSSResult, TemplateResult, html } from "lit"; +import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import PFList from "@patternfly/patternfly/components/List/list.css"; -import { AdminApi, Settings, SettingsRequest } from "@goauthentik/api"; +import { AdminApi, FooterLink, Settings, SettingsRequest } from "@goauthentik/api"; + +import "./AdminSettingsFooterLinks.js"; +import { IFooterLinkInput, akFooterLinkInput } from "./AdminSettingsFooterLinks.js"; @customElement("ak-admin-settings-form") export class AdminSettingsForm extends Form { @@ -40,7 +42,14 @@ export class AdminSettingsForm extends Form { private _settings?: Settings; static get styles(): CSSResult[] { - return super.styles.concat(PFList); + return super.styles.concat( + PFList, + css` + ak-array-input { + width: 100%; + } + `, + ); } getSuccessMessage(): string { @@ -166,15 +175,21 @@ export class AdminSettingsForm extends Form { > - + ({ name: "", href: "" })} + .row=${(f?: FooterLink) => + akFooterLinkInput({ + ".footerLink": f, + "style": "width: 100%", + "name": "footer-link", + } as unknown as IFooterLinkInput)} + > +

${msg( - "This option configures the footer links on the flow executor pages. It must be a valid YAML or JSON list and can be used as follows:", + "This option configures the footer links on the flow executor pages. The URL is limited to web and mail addresses. If the name is left blank, the URL will be shown.", )} - [{"name": "Link Name","href":"https://goauthentik.io"}]

; + +const metadata: Meta = { + title: "Components / Footer Link Input", + component: "ak-admin-settings-footer-link", + parameters: { + docs: { + description: { + component: "A stylized control for the footer links", + }, + }, + }, + decorators: [ + (story: Decorator) => { + window.setTimeout(() => { + const control = document.getElementById("footer-link"); + if (!control) { + throw new Error("Test was not initialized correctly."); + } + const messages = document.getElementById("reported-value"); + control.addEventListener("change", (event: Event) => { + if (!event.target) { + return; + } + const target = event.target as FooterLinkInput; + messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`; + }); + }, 250); + + return html`
+ +
+ ${ + // @ts-expect-error The types for web components are not well-defined } + story() + } +
+
+

Reported value:

+ 

+                

+            
`;
+        },
+    ],
+};
+
+export default metadata;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () =>
+        html` `,
+};
diff --git a/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts
new file mode 100644
index 0000000000..8458b77d01
--- /dev/null
+++ b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts
@@ -0,0 +1,68 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
+import { $, expect } from "@wdio/globals";
+
+import { html } from "lit";
+
+import "../AdminSettingsFooterLinks.js";
+
+describe("ak-admin-settings-footer-link", () => {
+    afterEach(async () => {
+        await browser.execute(async () => {
+            await document.body.querySelector("ak-admin-settings-footer-link")?.remove();
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                await delete document.body["_$litPart$"];
+            }
+        });
+    });
+
+    it("should render an empty control", async () => {
+        render(html``);
+        const link = await $("ak-admin-settings-footer-link");
+        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+        await expect(await link.getProperty("toJson")).toEqual({ name: "", href: "" });
+    });
+
+    it("should not be valid if just a name is filled in", async () => {
+        render(html``);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="name"]').setValue("foo");
+        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+        await expect(await link.getProperty("toJson")).toEqual({ name: "foo", href: "" });
+    });
+
+    it("should be valid if just a URL is filled in", async () => {
+        render(html``);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="href"]').setValue("https://foo.com");
+        await expect(await link.getProperty("isValid")).toStrictEqual(true);
+        await expect(await link.getProperty("toJson")).toEqual({
+            name: "",
+            href: "https://foo.com",
+        });
+    });
+
+    it("should be valid if both are filled in", async () => {
+        render(html``);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="name"]').setValue("foo");
+        await link.$('input[name="href"]').setValue("https://foo.com");
+        await expect(await link.getProperty("isValid")).toStrictEqual(true);
+        await expect(await link.getProperty("toJson")).toEqual({
+            name: "foo",
+            href: "https://foo.com",
+        });
+    });
+
+    it("should not be valid if the URL is not valid", async () => {
+        render(html``);
+        const link = await $("ak-admin-settings-footer-link");
+        await link.$('input[name="name"]').setValue("foo");
+        await link.$('input[name="href"]').setValue("never://foo.com");
+        await expect(await link.getProperty("toJson")).toEqual({
+            name: "foo",
+            href: "never://foo.com",
+        });
+        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+    });
+});
diff --git a/web/src/elements/AkControlElement.ts b/web/src/elements/AkControlElement.ts
index 33dc7f2d86..984d5504e8 100644
--- a/web/src/elements/AkControlElement.ts
+++ b/web/src/elements/AkControlElement.ts
@@ -8,13 +8,21 @@ import { AKElement } from "./Base";
  * extracting the value.
  *
  */
-export class AkControlElement extends AKElement {
+export class AkControlElement extends AKElement {
     constructor() {
         super();
         this.dataset.akControl = "true";
     }
 
-    json() {
+    json(): T {
         throw new Error("Controllers using this protocol must override this method");
     }
+
+    get toJson(): T {
+        return this.json();
+    }
+
+    get isValid(): boolean {
+        return true;
+    }
 }
diff --git a/web/src/elements/ak-array-input.ts b/web/src/elements/ak-array-input.ts
new file mode 100644
index 0000000000..86addde310
--- /dev/null
+++ b/web/src/elements/ak-array-input.ts
@@ -0,0 +1,173 @@
+import { AkControlElement } from "@goauthentik/elements/AkControlElement";
+import { bound } from "@goauthentik/elements/decorators/bound";
+import { type Spread } from "@goauthentik/elements/types";
+import { randomId } from "@goauthentik/elements/utils/randomId.js";
+import { spread } from "@open-wc/lit-helpers";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, css, html, nothing } from "lit";
+import { customElement, property, queryAll } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+type InputCell = (el: T) => TemplateResult | typeof nothing;
+
+export interface IArrayInput {
+    row: InputCell;
+    newItem: () => T;
+    items: T[];
+    validate?: boolean;
+    validator?: (_: T[]) => boolean;
+}
+
+type Keyed = { key: string; item: T };
+
+@customElement("ak-array-input")
+export class ArrayInput extends AkControlElement implements IArrayInput {
+    static get styles() {
+        return [
+            PFBase,
+            PFButton,
+            PFInputGroup,
+            PFFormControl,
+            css`
+                select.pf-c-form-control {
+                    width: 100px;
+                }
+                .pf-c-input-group {
+                    padding-bottom: 0;
+                }
+                .ak-plus-button {
+                    display: flex;
+                    justify-content: flex-end;
+                    flex-direction: row;
+                }
+                .ak-input-group {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                }
+            `,
+        ];
+    }
+
+    @property({ type: Boolean })
+    validate = false;
+
+    @property({ type: Object, attribute: false })
+    validator?: (_: T[]) => boolean;
+
+    @property({ type: Array, attribute: false })
+    row!: InputCell;
+
+    @property({ type: Object, attribute: false })
+    newItem!: () => T;
+
+    _items: Keyed[] = [];
+
+    // This magic creates a semi-reliable key on which Lit's `repeat` directive can control its
+    // interaction. Without it, we get undefined behavior in the re-rendering of the array.
+    @property({ type: Array, attribute: false })
+    set items(items: T[]) {
+        const olditems = new Map(
+            (this._items ?? []).map((key, item) => [JSON.stringify(item), key]),
+        );
+        const newitems = items.map((item) => ({
+            item,
+            key: olditems.get(JSON.stringify(item))?.key ?? randomId(),
+        }));
+        this._items = newitems;
+    }
+
+    get items() {
+        return this._items.map(({ item }) => item);
+    }
+
+    @queryAll("div.ak-input-group")
+    inputGroups?: HTMLDivElement[];
+
+    json() {
+        if (!this.inputGroups) {
+            throw new Error("Could not find input group collection in ak-array-input");
+        }
+        return this.items;
+    }
+
+    get isValid() {
+        if (!this.validate) {
+            return true;
+        }
+
+        const oneIsValid = (g: HTMLDivElement) =>
+            g.querySelector>("[name]")?.isValid ?? true;
+        const allAreValid = Array.from(this.inputGroups ?? []).every(oneIsValid);
+        return allAreValid && (this.validator ? this.validator(this.items) : true);
+    }
+
+    itemsFromDom(): T[] {
+        return Array.from(this.inputGroups ?? [])
+            .map(
+                (group) =>
+                    group.querySelector>("[name]")?.json() ??
+                    null,
+            )
+            .filter((i) => i !== null);
+    }
+
+    sendChange() {
+        this.dispatchEvent(new Event("change", { composed: true, bubbles: true }));
+    }
+
+    @bound
+    onChange() {
+        this.items = this.itemsFromDom();
+        this.sendChange();
+    }
+
+    @bound
+    addNewGroup() {
+        this.items = [...this.itemsFromDom(), this.newItem()];
+        this.sendChange();
+    }
+
+    renderDeleteButton(idx: number) {
+        const deleteOneGroup = () => {
+            this.items = [...this.items.slice(0, idx), ...this.items.slice(idx + 1)];
+            this.sendChange();
+        };
+
+        return html``;
+    }
+
+    render() {
+        return html` 

+            ${repeat(
+                this._items,
+                (item: Keyed) => item.key,
+                (item: Keyed, idx) =>
+                    html` 
 this.onChange()}>
+                        ${this.row(item.item)}${this.renderDeleteButton(idx)}
+                    
`,
+            )}
+            
+        
`;
+    }
+}
+
+export function akArrayInput(properties: IArrayInput) {
+    return html``;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-array-input": ArrayInput;
+    }
+}
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 10609d5208..08ca5c2982 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -35,7 +35,7 @@ export interface KeyUnknown {
 // Literally the only field `assignValue()` cares about.
 type HTMLNamedElement = Pick;
 
-type AkControlElement = HTMLInputElement & { json: () => string | string[] };
+export type AkControlElement = HTMLInputElement & { json: () => T };
 
 /**
  * Recursively assign `value` into `json` while interpreting the dot-path of `element.name`
diff --git a/web/src/elements/forms/SearchSelect/SearchSelect.ts b/web/src/elements/forms/SearchSelect/SearchSelect.ts
index 662e70b0e1..daf292a2f6 100644
--- a/web/src/elements/forms/SearchSelect/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect/SearchSelect.ts
@@ -4,7 +4,6 @@ import { groupBy } from "@goauthentik/common/utils";
 import { AkControlElement } from "@goauthentik/elements/AkControlElement.js";
 import { PreventFormSubmit } from "@goauthentik/elements/forms/helpers";
 import type { GroupedOptions, SelectGroup, SelectOption } from "@goauthentik/elements/types.js";
-import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
 import { randomId } from "@goauthentik/elements/utils/randomId.js";
 
 import { msg } from "@lit/localize";
@@ -32,10 +31,7 @@ export interface ISearchSelectBase {
     emptyOption: string;
 }
 
-export class SearchSelectBase
-    extends CustomEmitterElement(AkControlElement)
-    implements ISearchSelectBase
-{
+export class SearchSelectBase extends AkControlElement implements ISearchSelectBase {
     static get styles() {
         return [PFBase];
     }
@@ -54,7 +50,7 @@ export class SearchSelectBase
 
     // A function which returns the currently selected object's primary key, used for serialization
     // into forms.
-    value!: (element: T | undefined) => unknown;
+    value!: (element: T | undefined) => string;
 
     // A function passed to this object that determines an object in the collection under search
     // should be automatically selected. Only used when the search itself is responsible for
@@ -105,7 +101,7 @@ export class SearchSelectBase
     @state()
     error?: APIErrorTypes;
 
-    public toForm(): unknown {
+    public toForm(): string {
         if (!this.objects) {
             throw new PreventFormSubmit(msg("Loading options..."));
         }
@@ -116,6 +112,16 @@ export class SearchSelectBase
         return this.toForm();
     }
 
+    protected dispatchChangeEvent(value: T | undefined) {
+        this.dispatchEvent(
+            new CustomEvent("ak-change", {
+                composed: true,
+                bubbles: true,
+                detail: { value },
+            }),
+        );
+    }
+
     public async updateData() {
         if (this.isFetchingData) {
             return Promise.resolve();
@@ -127,7 +133,7 @@ export class SearchSelectBase
                 objects.forEach((obj) => {
                     if (this.selected && this.selected(obj, objects || [])) {
                         this.selectedObject = obj;
-                        this.dispatchCustomEvent("ak-change", { value: this.selectedObject });
+                        this.dispatchChangeEvent(this.selectedObject);
                     }
                 });
                 this.objects = objects;
@@ -165,7 +171,7 @@ export class SearchSelectBase
 
         this.query = value;
         this.updateData()?.then(() => {
-            this.dispatchCustomEvent("ak-change", { value: this.selectedObject });
+            this.dispatchChangeEvent(this.selectedObject);
         });
     }
 
@@ -173,7 +179,7 @@ export class SearchSelectBase
         const value = (event.target as SearchSelectView).value;
         if (value === undefined) {
             this.selectedObject = undefined;
-            this.dispatchCustomEvent("ak-change", { value: undefined });
+            this.dispatchChangeEvent(undefined);
             return;
         }
         const selected = (this.objects ?? []).find((obj) => `${this.value(obj)}` === value);
@@ -181,7 +187,7 @@ export class SearchSelectBase
             console.warn(`ak-search-select: No corresponding object found for value (${value}`);
         }
         this.selectedObject = selected;
-        this.dispatchCustomEvent("ak-change", { value: this.selectedObject });
+        this.dispatchChangeEvent(this.selectedObject);
     }
 
     private getGroupedItems(): GroupedOptions {
diff --git a/web/src/elements/forms/SearchSelect/ak-search-select-ez.ts b/web/src/elements/forms/SearchSelect/ak-search-select-ez.ts
index 1f55bb32c8..9d0c5524b5 100644
--- a/web/src/elements/forms/SearchSelect/ak-search-select-ez.ts
+++ b/web/src/elements/forms/SearchSelect/ak-search-select-ez.ts
@@ -7,7 +7,7 @@ export interface ISearchSelectApi {
     fetchObjects: (query?: string) => Promise;
     renderElement: (element: T) => string;
     renderDescription?: (element: T) => string | TemplateResult;
-    value: (element: T | undefined) => unknown;
+    value: (element: T | undefined) => string;
     selected?: (element: T, elements: T[]) => boolean;
     groupBy?: (items: T[]) => [string, T[]][];
 }
diff --git a/web/src/elements/forms/SearchSelect/ak-search-select.ts b/web/src/elements/forms/SearchSelect/ak-search-select.ts
index 284ae02098..52af07c266 100644
--- a/web/src/elements/forms/SearchSelect/ak-search-select.ts
+++ b/web/src/elements/forms/SearchSelect/ak-search-select.ts
@@ -9,7 +9,7 @@ export interface ISearchSelect extends ISearchSelectBase {
     fetchObjects: (query?: string) => Promise;
     renderElement: (element: T) => string;
     renderDescription?: (element: T) => string | TemplateResult;
-    value: (element: T | undefined) => unknown;
+    value: (element: T | undefined) => string;
     selected?: (element: T, elements: T[]) => boolean;
     groupBy: (items: T[]) => [string, T[]][];
 }
@@ -69,7 +69,7 @@ export class SearchSelect extends SearchSelectBase implements ISearchSelec
     // A function which returns the currently selected object's primary key, used for serialization
     // into forms.
     @property({ attribute: false })
-    value!: (element: T | undefined) => unknown;
+    value!: (element: T | undefined) => string;
 
     // A function passed to this object that determines an object in the collection under search
     // should be automatically selected. Only used when the search itself is responsible for
diff --git a/web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts b/web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts
index bcc3f59a6f..8ff000fb23 100644
--- a/web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts
+++ b/web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts
@@ -92,7 +92,7 @@ export const GroupedAndEz = () => {
     const config: ISearchSelectApi = {
         fetchObjects: getSamples,
         renderElement: (sample: Sample) => sample.name,
-        value: (sample: Sample | undefined) => sample?.pk,
+        value: (sample: Sample | undefined) => sample?.pk ?? "",
         groupBy: (samples: Sample[]) =>
             groupBy(samples, (sample: Sample) => sample.season[0] ?? ""),
     };
diff --git a/web/src/elements/stories/ak-array-input.stories.ts b/web/src/elements/stories/ak-array-input.stories.ts
new file mode 100644
index 0000000000..c48d802df9
--- /dev/null
+++ b/web/src/elements/stories/ak-array-input.stories.ts
@@ -0,0 +1,96 @@
+import "@goauthentik/admin/admin-settings/AdminSettingsFooterLinks.js";
+import { FooterLinkInput } from "@goauthentik/admin/admin-settings/AdminSettingsFooterLinks.js";
+import "@goauthentik/elements/messages/MessageContainer";
+import { Meta, StoryObj, WebComponentsRenderer } from "@storybook/web-components";
+import { DecoratorFunction } from "storybook/internal/types";
+
+import { html } from "lit";
+
+import { FooterLink } from "@goauthentik/api";
+
+import "../ak-array-input.js";
+import { IArrayInput } from "../ak-array-input.js";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Decorator = DecoratorFunction;
+
+const metadata: Meta> = {
+    title: "Elements / Array Input",
+    component: "ak-array-input",
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    "A table input object, in which multiple rows of related inputs can be grouped.",
+            },
+        },
+    },
+    decorators: [
+        (story: Decorator) => {
+            window.setTimeout(() => {
+                const menu = document.getElementById("ak-array-input");
+                if (!menu) {
+                    throw new Error("Test was not initialized correctly.");
+                }
+                const messages = document.getElementById("reported-value");
+                menu.addEventListener("change", (event: Event) => {
+                    if (!event?.target) {
+                        return;
+                    }
+                    const target = event.target as FooterLinkInput;
+                    messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`;
+                });
+            }, 250);
+
+            return html`

+                
+                

+                    
Story:

+                    ${
+                        // @ts-expect-error The types for web components are not well-defined in Storybook yet }
+                        story()
+                    }
+                    

+                        
Reported value:

+                        

+                    

+                

+            
`;
+        },
+    ],
+};
+
+export default metadata;
+
+type Story = StoryObj;
+
+const items: FooterLink[] = [
+    { name: "authentik", href: "https://goauthentik.io" },
+    { name: "authentik docs", href: "https://docs.goauthentik.io/docs/" },
+];
+
+export const Default: Story = {
+    render: () =>
+        html`  ({ name: "", href: "" })}
+            .row=${(f?: FooterLink) =>
+                html`
+                `}
+            validate
+        >`,
+};
diff --git a/web/src/elements/tests/ak-array-input.test.ts b/web/src/elements/tests/ak-array-input.test.ts
new file mode 100644
index 0000000000..214178ff87
--- /dev/null
+++ b/web/src/elements/tests/ak-array-input.test.ts
@@ -0,0 +1,55 @@
+import "@goauthentik/admin/admin-settings/AdminSettingsFooterLinks.js";
+import { render } from "@goauthentik/elements/tests/utils.js";
+import { $, expect } from "@wdio/globals";
+
+import { html } from "lit";
+
+import { FooterLink } from "@goauthentik/api";
+
+import "../ak-array-input.js";
+
+const sampleItems: FooterLink[] = [
+    { name: "authentik", href: "https://goauthentik.io" },
+    { name: "authentik docs", href: "https://docs.goauthentik.io/docs/" },
+];
+
+describe("ak-array-input", () => {
+    afterEach(async () => {
+        await browser.execute(async () => {
+            await document.body.querySelector("ak-array-input")?.remove();
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                await delete document.body["_$litPart$"];
+            }
+        });
+    });
+
+    const component = (items: FooterLink[] = []) =>
+        render(
+            html`  ({ name: "", href: "" })}
+                .row=${(f?: FooterLink) =>
+                    html`
+                    `}
+                validate
+            >`,
+        );
+
+    it("should render an empty control", async () => {
+        await component();
+        const link = await $("ak-array-input");
+        await browser.pause(500);
+        await expect(await link.getProperty("isValid")).toStrictEqual(true);
+        await expect(await link.getProperty("toJson")).toEqual([]);
+    });
+
+    it("should render a populated component", async () => {
+        await component(sampleItems);
+        const link = await $("ak-array-input");
+        await browser.pause(500);
+        await expect(await link.getProperty("isValid")).toStrictEqual(true);
+        await expect(await link.getProperty("toJson")).toEqual(sampleItems);
+    });
+});
diff --git a/web/tests/blueprints/test-admin-user.yaml b/web/tests/blueprints/test-admin-user.yaml
new file mode 100644
index 0000000000..1a0e85e173
--- /dev/null
+++ b/web/tests/blueprints/test-admin-user.yaml
@@ -0,0 +1,16 @@
+version: 1
+entries:
+    - attrs:
+          email: test-admin@goauthentik.io
+          is_active: true
+          name: authentik Default Admin
+          password: test-runner
+          path: users
+          type: internal
+          groups:
+              - !Find [authentik_core.group, [name, "authentik Admins"]]
+          conditions: []
+      identifiers:
+          username: akadmin
+      model: authentik_core.user
+      state: present