web/elements: trigger search select data update on connected callback

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/admin/stages/identification/IdentificationStageForm.ts

@@ -154,6 +154,24 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
                             ${t`When enabled, user fields are matched regardless of their casing.`}
                         </p>
                     </ak-form-element-horizontal>
+                    <ak-form-element-horizontal name="showMatchedUser">
+                        <div class="pf-c-check">
+                            <input
+                                type="checkbox"
+                                class="pf-c-check__input"
+                                ?checked=${first(this.instance?.showMatchedUser, true)}
+                            />
+                            <label class="pf-c-check__label"> ${t`Show matched user`} </label>
+                        </div>
+                        <p class="pf-c-form__helper-text">
+                            ${t`When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.`}
+                        </p>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+            <ak-form-group>
+                <span slot="header"> ${t`Source settings`} </span>
+                <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${t`Sources`}
                         ?required=${true}
@@ -210,19 +228,6 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
                             ${t`By default, only icons are shown for sources. Enable this to show their full names.`}
                         </p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal name="showMatchedUser">
-                        <div class="pf-c-check">
-                            <input
-                                type="checkbox"
-                                class="pf-c-check__input"
-                                ?checked=${first(this.instance?.showMatchedUser, true)}
-                            />
-                            <label class="pf-c-check__label"> ${t`Show matched user`} </label>
-                        </div>
-                        <p class="pf-c-form__helper-text">
-                            ${t`When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.`}
-                        </p>
-                    </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
             <ak-form-group>

web/src/elements/SearchSelect.ts

@@ -1,5 +1,7 @@
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { groupBy } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
+import { PreventFormSubmit } from "@goauthentik/elements/forms/Form";
 
 import { t } from "@lingui/macro";
 
@@ -18,7 +20,7 @@ export class SearchSelect<T> extends AKElement {
     query?: string;
 
     @property({ attribute: false })
-    objects: T[] = [];
+    objects?: T[];
 
     @property({ attribute: false })
     selectedObject?: T;
@@ -54,17 +56,6 @@ export class SearchSelect<T> extends AKElement {
     @property({ attribute: false })
     selected?: (element: T, elements: T[]) => boolean;
 
-    firstUpdated(): void {
-        this.fetchObjects(this.query).then((objects) => {
-            this.objects = objects;
-            this.objects.forEach((obj) => {
-                if (this.selected && this.selected(obj, this.objects)) {
-                    this.selectedObject = obj;
-                }
-            });
-        });
-    }
-
     @property()
     emptyOption = "---------";
 
@@ -82,15 +73,40 @@ export class SearchSelect<T> extends AKElement {
         this.dropdownContainer = document.createElement("div");
     }
 
+    toForm(): unknown {
+        if (!this.objects) {
+            return new PreventFormSubmit(t`Loading options...`);
+        }
+        return this.value(this.selectedObject) || "";
+    }
+
+    firstUpdated(): void {
+        this.updateData();
+    }
+
+    updateData(): void {
+        this.fetchObjects(this.query).then((objects) => {
+            this.objects = objects;
+            this.objects.forEach((obj) => {
+                if (this.selected && this.selected(obj, this.objects || [])) {
+                    this.selectedObject = obj;
+                }
+            });
+        });
+    }
+
     connectedCallback(): void {
         super.connectedCallback();
         this.dropdownContainer = document.createElement("div");
         this.dropdownContainer.dataset["managedBy"] = "ak-search-select";
         document.body.append(this.dropdownContainer);
+        this.updateData();
+        this.addEventListener(EVENT_REFRESH, this.updateData);
     }
 
     disconnectedCallback(): void {
         super.disconnectedCallback();
+        this.removeEventListener(EVENT_REFRESH, this.updateData);
         this.dropdownContainer.remove();
     }
 
@@ -106,6 +122,9 @@ export class SearchSelect<T> extends AKElement {
      * the pf-c-dropdown CSS needs to be loaded on the body.
      */
     renderMenu(): void {
+        if (!this.objects) {
+            return;
+        }
         const pos = this.getBoundingClientRect();
         let groupedItems = this.groupBy(this.objects);
         let shouldRenderGroups = true;
@@ -209,7 +228,7 @@ export class SearchSelect<T> extends AKElement {
                         placeholder=${this.placeholder}
                         @input=${(ev: InputEvent) => {
                             this.query = (ev.target as HTMLInputElement).value;
-                            this.firstUpdated();
+                            this.updateData();
                         }}
                         @focus=${() => {
                             this.open = true;

web/src/elements/charts/Chart.ts

@@ -78,18 +78,6 @@ export abstract class AKChart<T> extends AKElement {
 
     constructor() {
         super();
-        window.addEventListener("resize", () => {
-            if (this.chart) {
-                this.chart.resize();
-            }
-        });
-        window.addEventListener(EVENT_REFRESH, () => {
-            this.apiRequest().then((r: T) => {
-                if (!this.chart) return;
-                this.chart.data = this.getChartData(r);
-                this.chart.update();
-            });
-        });
         const matcher = window.matchMedia("(prefers-color-scheme: light)");
         const handler = (ev?: MediaQueryListEvent) => {
             if (ev?.matches || matcher.matches) {
@@ -103,6 +91,33 @@ export abstract class AKChart<T> extends AKElement {
         handler();
     }
 
+    connectedCallback(): void {
+        super.connectedCallback();
+        window.addEventListener("resize", this.resizeHandler);
+        this.addEventListener(EVENT_REFRESH, this.refreshHandler);
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        window.removeEventListener("resize", this.resizeHandler);
+        this.removeEventListener(EVENT_REFRESH, this.refreshHandler);
+    }
+
+    refreshHandler(): void {
+        this.apiRequest().then((r: T) => {
+            if (!this.chart) return;
+            this.chart.data = this.getChartData(r);
+            this.chart.update();
+        });
+    }
+
+    resizeHandler(): void {
+        if (!this.chart) {
+            return;
+        }
+        this.chart.resize();
+    }
+
     firstUpdated(): void {
         this.apiRequest().then((r) => {
             const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("canvas");

web/src/elements/forms/Form.ts

@@ -23,6 +23,11 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { ResponseError, ValidationError } from "@goauthentik/api";
 
+export class PreventFormSubmit {
+    // Stub class which can be returned by form elements to prevent the form from submitting
+    constructor(public message: string) {}
+}
+
 export class APIError extends Error {
     constructor(public response: ValidationError) {
         super();
@@ -162,11 +167,17 @@ export class Form<T> extends AKElement {
                 json[element.name] = element.checked;
             } else if (element.tagName.toLowerCase() === "ak-search-select") {
                 const select = element as unknown as SearchSelect<unknown>;
+                let value: unknown;
                 try {
-                    json[element.name] = select.value(select.selectedObject) || "";
+                    value = select.toForm();
                 } catch {
                     console.debug("authentik/form: SearchSelect.value error");
+                    return;
                 }
+                if (value instanceof PreventFormSubmit) {
+                    throw new Error(value.message);
+                }
+                json[element.name] = value;
             } else {
                 for (let v = 0; v < values.length; v++) {
                     this.serializeFieldRecursive(element, values[v], json);