From 319f2ef8d1944157188c50be77bff2d1a31648d4 Mon Sep 17 00:00:00 2001
From: Ken Sternberg
 <133134217+kensternberg-authentik@users.noreply.github.com>
Date: Thu, 6 Mar 2025 10:44:19 -0800
Subject: [PATCH] web/admin: allow user lists to show active only (#13403)

* web: Add InvalidationFlow to Radius Provider dialogues

## What

- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
  - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
    to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`

## Note

Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.

* This (temporary) change is needed to prevent the unit tests from failing.

\# What

\# Why

\# How

\# Designs

\# Test Steps

\# Other Notes

* Revert "This (temporary) change is needed to prevent the unit tests from failing."

This reverts commit dddde09be571a639ecd041569dd3a282aab3f9be.

* web/admin: allow admins to show only active users in Group assignments

## What

Adds a flag and a visible control to the "Add users to groups" dialog to limit the users
shown to only those marked as "active."

## Why

Requested, it was small, it made sense, and it was fairly trivial to implement.  All the
infrastructure already existed.

## Testing

- Ensure you have both "active" and "inactive" users in your sample group.
- Visit Groups -> (One Group) -> Users ->. Click "Add existing user."  Click the `+` symbol.
- A new toggle control, "Show inactive users," should now be visible.
- Click it and note whether or not the visible display corresponds to the stote of the control.

## Note

This commit does not address the second half of the request, "... the ability to add more than one
user to an entitlement." We recommend that if you have a group of people who correspond to a given
entitlement that you create a named group for them.

## Related Issue:

- [Hide disabled users when adding users to a group or entitlement
  #12653](https://github.com/goauthentik/authentik/issues/12653)

* Provided an explanation for the odd expression around `CoreApi.coreUsersList:isActive`

* Use logical CSS; give  room to expand

* Disambiguate variable names
---
 web/src/admin/groups/MemberSelectModal.ts | 62 ++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 2 deletions(-)

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<Pick<CoreUsersListRequest, "isActive">>;
 
 @customElement("ak-group-member-select-table")
 export class MemberSelectTable extends TableModal<User> {
+    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<User> {
     @property()
     confirm!: (selectedItems: User[]) => Promise<unknown>;
 
+    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<PaginatedResponse<User>> {
+        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<User> {
         ];
     }
 
+    renderToolbarAfter() {
+        const toggleShowDisabledUsers = () => {
+            this.userListFilter = this.userListFilter === "all" ? "active" : "all";
+            this.page = 1;
+            this.fetch();
+        };
+
+        return html`&nbsp;
+            <div class="pf-c-toolbar__group pf-m-filter-group">
+                <div class="pf-c-toolbar__item pf-m-search-filter">
+                    <div class="pf-c-input-group show-disabled-toggle-group">
+                        <label class="pf-c-switch">
+                            <input
+                                class="pf-c-switch__input"
+                                type="checkbox"
+                                ?checked=${this.userListFilter === "all"}
+                                @change=${toggleShowDisabledUsers}
+                            />
+                            <span class="pf-c-switch__toggle">
+                                <span class="pf-c-switch__toggle-icon">
+                                    <i class="fas fa-check" aria-hidden="true"></i>
+                                </span>
+                            </span>
+                            <span class="pf-c-switch__label">${msg("Show inactive users")}</span>
+                        </label>
+                    </div>
+                </div>
+            </div>`;
+    }
+
     row(item: User): TemplateResult[] {
         return [
             html`<div>${item.username}</div>