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

closes #4157

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/admin/events/RuleForm.ts              | 51 ++++++++++++-------
 web/src/admin/groups/GroupForm.ts             | 44 +++++++++-------
 .../admin/providers/ldap/LDAPProviderForm.ts  | 44 +++++++++-------
 web/src/admin/sources/ldap/LDAPSourceForm.ts  |  1 -
 4 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/web/src/admin/events/RuleForm.ts b/web/src/admin/events/RuleForm.ts
index 294520779..c7e2e6e2e 100644
--- a/web/src/admin/events/RuleForm.ts
+++ b/web/src/admin/events/RuleForm.ts
@@ -1,4 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -9,7 +10,14 @@ import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
-import { CoreApi, EventsApi, NotificationRule, SeverityEnum } from "@goauthentik/api";
+import {
+    CoreApi,
+    CoreGroupsListRequest,
+    EventsApi,
+    Group,
+    NotificationRule,
+    SeverityEnum,
+} from "@goauthentik/api";
 
 @customElement("ak-event-rule-form")
 export class RuleForm extends ModelForm<NotificationRule, string> {
@@ -74,24 +82,29 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Group`} name="group">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.group === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
-                            return groups.results.map((group) => {
-                                return html`<option
-                                    value=${ifDefined(group.pk)}
-                                    ?selected=${this.instance?.group === group.pk}
-                                >
-                                    ${group.name}
-                                </option>`;
-                            });
-                        }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Group[]> => {
+                        const args: CoreGroupsListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
+                        return groups.results;
+                    }}
+                    .renderElement=${(group: Group): string => {
+                        return group.name;
+                    }}
+                    .value=${(group: Group | undefined): string | undefined => {
+                        return group?.pk;
+                    }}
+                    .selected=${(group: Group): boolean => {
+                        return group.pk === this.instance?.group;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports">
                 <select name="users" class="pf-c-form-control" multiple>
diff --git a/web/src/admin/groups/GroupForm.ts b/web/src/admin/groups/GroupForm.ts
index ccc5b03da..f6fd1bc39 100644
--- a/web/src/admin/groups/GroupForm.ts
+++ b/web/src/admin/groups/GroupForm.ts
@@ -2,6 +2,7 @@ import "@goauthentik/admin/groups/MemberSelectModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -16,7 +17,7 @@ import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
 
-import { CoreApi, Group, User } from "@goauthentik/api";
+import { CoreApi, CoreGroupsListRequest, Group, User } from "@goauthentik/api";
 
 @customElement("ak-group-form")
 export class GroupForm extends ModelForm<Group, string> {
@@ -83,24 +84,29 @@ export class GroupForm extends ModelForm<Group, string> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Parent`} name="parent">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.parent === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
-                            return groups.results.map((group) => {
-                                return html`<option
-                                    value=${ifDefined(group.pk)}
-                                    ?selected=${this.instance?.parent === group.pk}
-                                >
-                                    ${group.name}
-                                </option>`;
-                            });
-                        }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Group[]> => {
+                        const args: CoreGroupsListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
+                        return groups.results;
+                    }}
+                    .renderElement=${(group: Group): string => {
+                        return group.name;
+                    }}
+                    .value=${(group: Group | undefined): string | undefined => {
+                        return group?.pk;
+                    }}
+                    .selected=${(group: Group): boolean => {
+                        return group.pk === this.instance?.parent;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Members`} name="users">
                 <div class="pf-c-input-group">
diff --git a/web/src/admin/providers/ldap/LDAPProviderForm.ts b/web/src/admin/providers/ldap/LDAPProviderForm.ts
index 21ac5f7b9..c1e4d5629 100644
--- a/web/src/admin/providers/ldap/LDAPProviderForm.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderForm.ts
@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/SearchSelect";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -13,9 +14,11 @@ import { until } from "lit/directives/until.js";
 
 import {
     CoreApi,
+    CoreGroupsListRequest,
     CryptoApi,
     FlowsApi,
     FlowsInstancesListDesignationEnum,
+    Group,
     LDAPAPIAccessMode,
     LDAPProvider,
     ProvidersApi,
@@ -97,24 +100,29 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Search group`} name="searchGroup">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.searchGroup === undefined}>
-                        ---------
-                    </option>
-                    ${until(
-                        new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
-                            return groups.results.map((group) => {
-                                return html`<option
-                                    value=${ifDefined(group.pk)}
-                                    ?selected=${this.instance?.searchGroup === group.pk}
-                                >
-                                    ${group.name}
-                                </option>`;
-                            });
-                        }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Group[]> => {
+                        const args: CoreGroupsListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
+                        return groups.results;
+                    }}
+                    .renderElement=${(group: Group): string => {
+                        return group.name;
+                    }}
+                    .value=${(group: Group | undefined): string | undefined => {
+                        return group?.pk;
+                    }}
+                    .selected=${(group: Group): boolean => {
+                        return group.pk === this.instance?.searchGroup;
+                    }}
+                    ?blankable=${true}
+                >
+                </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${t`Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.`}
                 </p>
diff --git a/web/src/admin/sources/ldap/LDAPSourceForm.ts b/web/src/admin/sources/ldap/LDAPSourceForm.ts
index 30970b244..f83d9d26e 100644
--- a/web/src/admin/sources/ldap/LDAPSourceForm.ts
+++ b/web/src/admin/sources/ldap/LDAPSourceForm.ts
@@ -310,7 +310,6 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
                 <span slot="header"> ${t`Additional settings`} </span>
                 <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal label=${t`Group`} name="syncParentGroup">
-                        <!-- @ts-ignore -->
                         <ak-search-select
                             .fetchObjects=${async (query?: string): Promise<Group[]> => {
                                 const args: CoreGroupsListRequest = {