web/admin: replace stage selections with ak-search-select

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

web/src/admin/flows/StageBindingForm.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first, groupBy } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -16,6 +17,7 @@ import {
     InvalidResponseActionEnum,
     PolicyEngineMode,
     Stage,
+    StagesAllListRequest,
     StagesApi,
 } from "@goauthentik/api";
 
@@ -51,22 +53,6 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
         }
     };
 
-    groupStages(stages: Stage[]): TemplateResult {
-        return html`
-            <option value="">---------</option>
-            ${groupBy<Stage>(stages, (s) => s.verboseName || "").map(([group, stages]) => {
-                return html`<optgroup label=${group}>
-                    ${stages.map((stage) => {
-                        const selected = this.instance?.stage === stage.pk;
-                        return html`<option ?selected=${selected} value=${ifDefined(stage.pk)}>
-                            ${stage.name}
-                        </option>`;
-                    })}
-                </optgroup>`;
-            })}
-        `;
-    }
-
     async getOrder(): Promise<number> {
         if (this.instance?.pk) {
             return this.instance.order;
@@ -117,18 +103,31 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
         return html`<form class="pf-c-form pf-m-horizontal">
             ${this.renderTarget()}
             <ak-form-element-horizontal label=${t`Stage`} ?required=${true} name="stage">
-                <select class="pf-c-form-control">
+                <ak-search-select
-                    ${until(
+                    .fetchObjects=${async (query?: string): Promise<Stage[]> => {
-                        new StagesApi(DEFAULT_CONFIG)
+                        const args: StagesAllListRequest = {
-                            .stagesAllList({
                             ordering: "name",
-                            })
+                        };
-                            .then((stages) => {
+                        if (query !== undefined) {
-                                return this.groupStages(stages.results);
+                            args.search = query;
-                            }),
+                        }
-                        html`<option>${t`Loading...`}</option>`,
+                        const stages = await new StagesApi(DEFAULT_CONFIG).stagesAllList(args);
-                    )}
+                        return stages.results;
-                </select>
+                    }}
+                    .groupBy=${(items: Stage[]) => {
+                        return groupBy(items, (stage) => stage.verboseNamePlural);
+                    }}
+                    .renderElement=${(stage: Stage): string => {
+                        return stage.name;
+                    }}
+                    .value=${(stage: Stage | undefined): string | undefined => {
+                        return stage?.pk;
+                    }}
+                    .selected=${(stage: Stage): boolean => {
+                        return stage.pk === this.instance?.stage;
+                    }}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Order`} ?required=${true} name="order">
                 <!-- @ts-ignore -->

web/src/admin/users/UserResetEmailForm.ts

@@ -1,4 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { groupBy } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 
@@ -6,9 +8,15 @@ import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
 
-import { CoreApi, CoreUsersRecoveryEmailRetrieveRequest, StagesApi, User } from "@goauthentik/api";
+import {
+    CoreApi,
+    CoreUsersRecoveryEmailRetrieveRequest,
+    Stage,
+    StagesAllListRequest,
+    StagesApi,
+    User,
+} from "@goauthentik/api";
 
 @customElement("ak-user-reset-email-form")
 export class UserResetEmailForm extends Form<CoreUsersRecoveryEmailRetrieveRequest> {
@@ -27,20 +35,28 @@ export class UserResetEmailForm extends Form<CoreUsersRecoveryEmailRetrieveReque
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${t`Email stage`} ?required=${true} name="emailStage">
-                <select class="pf-c-form-control">
+                <ak-search-select
-                    ${until(
+                    .fetchObjects=${async (query?: string): Promise<Stage[]> => {
-                        new StagesApi(DEFAULT_CONFIG)
+                        const args: StagesAllListRequest = {
-                            .stagesEmailList({
                             ordering: "name",
-                            })
+                        };
-                            .then((stages) => {
+                        if (query !== undefined) {
-                                return stages.results.map((stage) => {
+                            args.search = query;
-                                    return html`<option value=${stage.pk}>${stage.name}</option>`;
+                        }
-                                });
+                        const stages = await new StagesApi(DEFAULT_CONFIG).stagesEmailList(args);
-                            }),
+                        return stages.results;
-                        html`<option>${t`Loading...`}</option>`,
+                    }}
-                    )}
+                    .groupBy=${(items: Stage[]) => {
-                </select>
+                        return groupBy(items, (stage) => stage.verboseNamePlural);
+                    }}
+                    .renderElement=${(stage: Stage): string => {
+                        return stage.name;
+                    }}
+                    .value=${(stage: Stage | undefined): string | undefined => {
+                        return stage?.pk;
+                    }}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
         </form>`;
     }