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

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

#4157

web/src/admin/applications/ApplicationCheckAccessForm.ts

@@ -1,18 +1,23 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PFColor } from "@goauthentik/elements/Label";
+import "@goauthentik/elements/SearchSelect";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
-import { UserOption } from "@goauthentik/elements/user/utils";
 
 import { t } from "@lingui/macro";
 
 import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
 
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
-import { Application, CoreApi, PolicyTestResult } from "@goauthentik/api";
+import {
+    Application,
+    CoreApi,
+    CoreUsersListRequest,
+    PolicyTestResult,
+    User,
+} from "@goauthentik/api";
 
 @customElement("ak-application-check-access-form")
 export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
@@ -114,25 +119,31 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${t`User`} ?required=${true} name="forUser">
-                <select class="pf-c-form-control">
-                    ${until(
-                        new CoreApi(DEFAULT_CONFIG)
-                            .coreUsersList({
-                                ordering: "username",
-                            })
-                            .then((users) => {
-                                return users.results.map((user) => {
-                                    return html`<option
-                                        ?selected=${user.pk.toString() === this.request?.toString()}
-                                        value=${user.pk}
-                                    >
-                                        ${UserOption(user)}
-                                    </option>`;
-                                });
-                            }),
-                        html`<option>${t`Loading...`}</option>`,
-                    )}
-                </select>
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<User[]> => {
+                        const args: CoreUsersListRequest = {
+                            ordering: "username",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args);
+                        return users.results;
+                    }}
+                    .renderElement=${(user: User): string => {
+                        return user.username;
+                    }}
+                    .renderDescription=${(user: User): TemplateResult => {
+                        return html`${user.name}`;
+                    }}
+                    .value=${(user: User | undefined): number | undefined => {
+                        return user?.pk;
+                    }}
+                    .selected=${(user: User): boolean => {
+                        return user.pk.toString() === this.request?.toString();
+                    }}
+                >
+                </ak-search-select>
             </ak-form-element-horizontal>
             ${this.result ? this.renderResult() : html``}
         </form>`;