diff --git a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts new file mode 100644 index 000000000000..5ea882ecd2d6 --- /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 4689e092dc4a..2ba69ab9cdbb 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 000000000000..8458b77d01d2
--- /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 33dc7f2d86dc..984d5504e8ef 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 000000000000..86addde310e3
--- /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 10609d520803..08ca5c298237 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 662e70b0e16a..daf292a2f6b6 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 1f55bb32c8c8..9d0c5524b590 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 284ae02098dc..52af07c26681 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 bcc3f59a6f25..8ff000fb2383 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 000000000000..c48d802df9cd
--- /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 000000000000..214178ff87ed
--- /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 000000000000..1a0e85e173b4
--- /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