From 90c89aec7648f57960fed33969325785a66df139 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 29 Dec 2022 11:13:33 +0100
Subject: [PATCH] web/admin: replace stage selections with ak-search-select

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/admin/flows/StageBindingForm.ts   | 55 +++++++++++------------
 web/src/admin/users/UserResetEmailForm.ts | 48 +++++++++++++-------
 2 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/web/src/admin/flows/StageBindingForm.ts b/web/src/admin/flows/StageBindingForm.ts
index 1802d6700..a56147d63 100644
--- a/web/src/admin/flows/StageBindingForm.ts
+++ b/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">
-                    ${until(
-                        new StagesApi(DEFAULT_CONFIG)
-                            .stagesAllList({
-                                ordering: "name",
-                            })
-                            .then((stages) => {
-                                return this.groupStages(stages.results);
-                            }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Stage[]> => {
+                        const args: StagesAllListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const stages = await new StagesApi(DEFAULT_CONFIG).stagesAllList(args);
+                        return stages.results;
+                    }}
+                    .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 -->
diff --git a/web/src/admin/users/UserResetEmailForm.ts b/web/src/admin/users/UserResetEmailForm.ts
index a85994085..19e559bd7 100644
--- a/web/src/admin/users/UserResetEmailForm.ts
+++ b/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">
-                    ${until(
-                        new StagesApi(DEFAULT_CONFIG)
-                            .stagesEmailList({
-                                ordering: "name",
-                            })
-                            .then((stages) => {
-                                return stages.results.map((stage) => {
-                                    return html`<option value=${stage.pk}>${stage.name}</option>`;
-                                });
-                            }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Stage[]> => {
+                        const args: StagesAllListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const stages = await new StagesApi(DEFAULT_CONFIG).stagesEmailList(args);
+                        return stages.results;
+                    }}
+                    .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;
+                    }}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
         </form>`;
     }