diff --git a/web/src/admin/groups/MemberSelectModal.ts b/web/src/admin/groups/MemberSelectModal.ts index b911e0213b..2843eb6405 100644 --- a/web/src/admin/groups/MemberSelectModal.ts +++ b/web/src/admin/groups/MemberSelectModal.ts @@ -5,15 +5,32 @@ import "@goauthentik/elements/buttons/SpinnerButton"; import { PaginatedResponse } from "@goauthentik/elements/table/Table"; import { TableColumn } from "@goauthentik/elements/table/Table"; import { TableModal } from "@goauthentik/elements/table/TableModal"; +import { match } from "ts-pattern"; import { msg } from "@lit/localize"; -import { TemplateResult, html } from "lit"; +import { TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { CoreApi, User } from "@goauthentik/api"; +import { CoreApi, CoreUsersListRequest, User } from "@goauthentik/api"; + +// Leaving room in the future for a multi-state control if someone somehow needs to filter inactive +// users as well. +type UserListFilter = "active" | "all"; +type UserListRequestFilter = Partial>; @customElement("ak-group-member-select-table") export class MemberSelectTable extends TableModal { + static get styles() { + return [ + ...super.styles, + css` + .show-disabled-toggle-group { + margin-inline-start: 0.5rem; + } + `, + ]; + } + checkbox = true; checkboxChip = true; @@ -24,11 +41,22 @@ export class MemberSelectTable extends TableModal { @property() confirm!: (selectedItems: User[]) => Promise; + userListFilter: UserListFilter = "active"; + order = "username"; + // The `userListRequestFilter` clause is necessary because the back-end for searches is + // tri-state: `isActive: true` will only show active users, `isActive: false` will show only + // inactive users; only when it's _missing_ will you get all users. async apiEndpoint(): Promise> { + const userListRequestFilter: UserListRequestFilter = match(this.userListFilter) + .with("all", () => ({})) + .with("active", () => ({ isActive: true })) + .exhaustive(); + return new CoreApi(DEFAULT_CONFIG).coreUsersList({ ...(await this.defaultEndpointConfig()), + ...userListRequestFilter, includeGroups: false, }); } @@ -41,6 +69,36 @@ export class MemberSelectTable extends TableModal { ]; } + renderToolbarAfter() { + const toggleShowDisabledUsers = () => { + this.userListFilter = this.userListFilter === "all" ? "active" : "all"; + this.page = 1; + this.fetch(); + }; + + return html`  +
+
+
+ +
+
+
`; + } + row(item: User): TemplateResult[] { return [ html`
${item.username}