habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: better footer links (#12004)

Browse Source 
* 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<Record<{ name: string, href: string }>>`. 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.
This commit is contained in:
Ken Sternberg
2024-11-18 04:17:21 -08:00
committed by GitHub
parent 10a473eb90
commit ac00386a29
15 changed files with 652 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
web/src/admin/admin-settings/AdminSettingsFooterLinks.ts Normal file
View File

@ -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<FooterLink> {
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` <div class="pf-c-input-group">
<input
type="text"
@change=${onChange}
value=${this.footerLink.name}
id="linkname"
class="pf-c-form-control ak-form-control"
name="name"
placeholder=${msg("Link Title")}
tabindex="1"
/>
<input
type="text"
@change=${onChange}
value="${ifDefined(this.footerLink.href ?? undefined)}"
class="pf-c-form-control ak-form-control"
required
placeholder=${msg("URL")}
name="href"
tabindex="1"
/>
</div>`;
}
}
export function akFooterLinkInput(properties: IFooterLinkInput) {
return html`<ak-admin-settings-footer-link
${spread(properties as unknown as Spread)}
></ak-admin-settings-footer-link>`;
}
declare global {
interface HTMLElementTagNameMap {
"ak-admin-settings-footer-link": FooterLinkInput;
}
}

37
web/src/admin/admin-settings/AdminSettingsForm.ts
View File

@ -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<SettingsRequest> {
@ -40,7 +42,14 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
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<SettingsRequest> {
>
</ak-text-input>
<ak-form-element-horizontal label=${msg("Footer links")} name="footerLinks">
<ak-codemirror
mode=${CodeMirrorMode.YAML}
.value="${first(this._settings?.footerLinks, [])}"
></ak-codemirror>
<ak-array-input
.items=${this._settings?.footerLinks ?? []}
.newItem=${() => ({ name: "", href: "" })}
.row=${(f?: FooterLink) =>
akFooterLinkInput({
".footerLink": f,
"style": "width: 100%",
"name": "footer-link",
} as unknown as IFooterLinkInput)}
>
</ak-array-input>
<p class="pf-c-form__helper-text">
${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.",
)}
<code>[{"name": "Link Name","href":"https://goauthentik.io"}]</code>
</p>
</ak-form-element-horizontal>
<ak-switch-input

80
web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts Normal file
View File

@ -0,0 +1,80 @@
import "@goauthentik/elements/messages/MessageContainer";
import { Meta, StoryObj, WebComponentsRenderer } from "@storybook/web-components";
import { DecoratorFunction } from "storybook/internal/types";
import { html } from "lit";
import { FooterLinkInput } from "../AdminSettingsFooterLinks.js";
import "../AdminSettingsFooterLinks.js";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Decorator = DecoratorFunction<WebComponentsRenderer, any>;
const metadata: Meta<FooterLinkInput> = {
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`<div
style="background: #fff; padding: 2em; position: relative"
id="the-main-event"
>
<style>
li {
display: block;
}
p {
margin-top: 1em;
}
#the-answer-block {
padding-top: 3em;
}
</style>
<div>
${
// @ts-expect-error The types for web components are not well-defined }
story()
}
</div>
<div style="margin-top: 2rem">
<p>Reported value:</p>
<pre id="reported-value"></pre>
</div>
</div>`;
},
],
};
export default metadata;
type Story = StoryObj;
export const Default: Story = {
render: () =>
html` <ak-admin-settings-footer-link
id="footer-link"
name="the-footer"
></ak-admin-settings-footer-link>`,
};

68
web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts Normal file
View File

@ -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`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
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`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
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`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
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`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
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`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
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);
});
});

12
web/src/elements/AkControlElement.ts
View File

@ -8,13 +8,21 @@ import { AKElement } from "./Base";
* extracting the value.
*
*/
export class AkControlElement extends AKElement {
export class AkControlElement<T = string | string[]> 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;
}
}

173
web/src/elements/ak-array-input.ts Normal file
View File

@ -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<T> = (el: T) => TemplateResult | typeof nothing;
export interface IArrayInput<T> {
row: InputCell<T>;
newItem: () => T;
items: T[];
validate?: boolean;
validator?: (_: T[]) => boolean;
}
type Keyed<T> = { key: string; item: T };
@customElement("ak-array-input")
export class ArrayInput<T> extends AkControlElement<T[]> implements IArrayInput<T> {
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<T>;
@property({ type: Object, attribute: false })
newItem!: () => T;
_items: Keyed<T>[] = [];
// 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<HTMLInputElement & AkControlElement<T>>("[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<HTMLInputElement & AkControlElement<T>>("[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`<button class="pf-c-button pf-m-control" type="button" @click=${deleteOneGroup}>
<i class="fas fa-minus" aria-hidden="true"></i>
</button>`;
}
render() {
return html` <div class="pf-l-stack">
${repeat(
this._items,
(item: Keyed<T>) => item.key,
(item: Keyed<T>, idx) =>
html` <div class="ak-input-group" @change=${() => this.onChange()}>
${this.row(item.item)}${this.renderDeleteButton(idx)}
</div>`,
)}
<button class="pf-c-button pf-m-link" type="button" @click=${this.addNewGroup}>
<i class="fas fa-plus" aria-hidden="true"></i>&nbsp; ${msg("Add entry")}
</button>
</div>`;
}
}
export function akArrayInput<T>(properties: IArrayInput<T>) {
return html`<ak-array-input ${spread(properties as unknown as Spread)}></ak-array-input>`;
}
declare global {
interface HTMLElementTagNameMap {
"ak-array-input": ArrayInput<unknown>;
}
}

2
web/src/elements/forms/Form.ts
View File

@ -35,7 +35,7 @@ export interface KeyUnknown {
// Literally the only field `assignValue()` cares about.
type HTMLNamedElement = Pick<HTMLInputElement, "name">;
type AkControlElement = HTMLInputElement & { json: () => string | string[] };
export type AkControlElement<T = string | string[]> = HTMLInputElement & { json: () => T };
/**
* Recursively assign `value` into `json` while interpreting the dot-path of `element.name`

28
web/src/elements/forms/SearchSelect/SearchSelect.ts
View File

@ -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<T> {
emptyOption: string;
}
export class SearchSelectBase<T>
extends CustomEmitterElement(AkControlElement)
implements ISearchSelectBase<T>
{
export class SearchSelectBase<T> extends AkControlElement<string> implements ISearchSelectBase<T> {
static get styles() {
return [PFBase];
}
@ -54,7 +50,7 @@ export class SearchSelectBase<T>
// 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<T>
@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<T>
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<T>
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<T>
this.query = value;
this.updateData()?.then(() => {
this.dispatchCustomEvent("ak-change", { value: this.selectedObject });
this.dispatchChangeEvent(this.selectedObject);
});
}
@ -173,7 +179,7 @@ export class SearchSelectBase<T>
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<T>
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 {

2
web/src/elements/forms/SearchSelect/ak-search-select-ez.ts
View File

@ -7,7 +7,7 @@ export interface ISearchSelectApi<T> {
fetchObjects: (query?: string) => Promise<T[]>;
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[]][];
}

4
web/src/elements/forms/SearchSelect/ak-search-select.ts
View File

@ -9,7 +9,7 @@ export interface ISearchSelect<T> extends ISearchSelectBase<T> {
fetchObjects: (query?: string) => Promise<T[]>;
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<T> extends SearchSelectBase<T> 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

2
web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts
View File

@ -92,7 +92,7 @@ export const GroupedAndEz = () => {
const config: ISearchSelectApi<Sample> = {
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] ?? ""),
};

96
web/src/elements/stories/ak-array-input.stories.ts Normal file
View File

@ -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<WebComponentsRenderer, any>;
const metadata: Meta<IArrayInput<unknown>> = {
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`<div
style="background: #fff; padding: 2em; position: relative"
id="the-main-event"
>
<style>
li {
display: block;
}
p {
margin-top: 1em;
}
#the-answer-block {
padding-top: 3em;
}
</style>
<div>
<p>Story:</p>
${
// @ts-expect-error The types for web components are not well-defined in Storybook yet }
story()
}
<div style="margin-top: 2rem">
<p>Reported value:</p>
<pre id="reported-value"></pre>
</div>
</div>
</div>`;
},
],
};
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` <ak-array-input
id="ak-array-input"
.items=${items}
.newItem=${() => ({ name: "", href: "" })}
.row=${(f?: FooterLink) =>
html`<ak-admin-settings-footer-link name="footerLink" .footerLink=${f}>
</ak-admin-settings-footer-link>`}
validate
></ak-array-input>`,
};

55
web/src/elements/tests/ak-array-input.test.ts Normal file
View File

@ -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` <ak-array-input
id="ak-array-input"
.items=${items}
.newItem=${() => ({ name: "", href: "" })}
.row=${(f?: FooterLink) =>
html`<ak-admin-settings-footer-link name="footerLink" .footerLink=${f}>
</ak-admin-settings-footer-link>`}
validate
></ak-array-input>`,
);
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);
});
});