web/admin: group form dual select (#9354)

* web/admin: migrate group form to dual-select

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* unrelated: fix missing return in sidebar item non-link render

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/groups/GroupForm.ts

@@ -3,6 +3,8 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider";
+import { DataProvision, DualSelectPair } from "@goauthentik/elements/ak-dual-select/types";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -12,22 +14,17 @@ import YAML from "yaml";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import {
+import { CoreApi, CoreGroupsListRequest, Group, RbacApi, Role } from "@goauthentik/api";
-    CoreApi,
+
-    CoreGroupsListRequest,
+export function rbacRolePair(item: Role): DualSelectPair {
-    Group,
+    return [item.pk, html`<div class="selection-main">${item.name}</div>`, item.name];
-    PaginatedRoleList,
+}
-    RbacApi,
-} from "@goauthentik/api";
 
 @customElement("ak-group-form")
 export class GroupForm extends ModelForm<Group, string> {
-    @state()
-    roles?: PaginatedRoleList;
-
     static get styles(): CSSResult[] {
         return super.styles.concat(css`
             .pf-c-button.pf-m-control {
@@ -51,12 +48,6 @@ export class GroupForm extends ModelForm<Group, string> {
             : msg("Successfully created group.");
     }
 
-    async load(): Promise<void> {
-        this.roles = await new RbacApi(DEFAULT_CONFIG).rbacRolesList({
-            ordering: "name",
-        });
-    }
-
     async send(data: Group): Promise<Group> {
         if (this.instance?.pk) {
             return new CoreApi(DEFAULT_CONFIG).coreGroupsPartialUpdate({
@@ -127,24 +118,29 @@ export class GroupForm extends ModelForm<Group, string> {
                 </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Roles")} name="roles">
-                <select class="pf-c-form-control" multiple>
+                <ak-dual-select-provider
-                    ${this.roles?.results.map((role) => {
+                    .provider=${(page: number, search?: string): Promise<DataProvision> => {
-                        const selected = Array.from(this.instance?.roles || []).some((sp) => {
+                        return new RbacApi(DEFAULT_CONFIG)
-                            return sp == role.pk;
+                            .rbacRolesList({
+                                page: page,
+                                search: search,
+                            })
+                            .then((results) => {
+                                return {
+                                    pagination: results.pagination,
+                                    options: results.results.map(rbacRolePair),
+                                };
                             });
-                        return html`<option value=${role.pk} ?selected=${selected}>
+                    }}
-                            ${role.name}
+                    .selected=${(this.instance?.rolesObj ?? []).map(rbacRolePair)}
-                        </option>`;
+                    available-label="${msg("Available Roles")}"
-                    })}
+                    selected-label="${msg("Selected Roles")}"
-                </select>
+                ></ak-dual-select-provider>
                 <p class="pf-c-form__helper-text">
                     ${msg(
                         "Select roles to grant this groups' users' permissions from the selected roles.",
                     )}
                 </p>
-                <p class="pf-c-form__helper-text">
-                    ${msg("Hold control/command to select multiple items.")}
-                </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${msg("Attributes")}

web/src/elements/sidebar/SidebarItem.ts

@@ -208,7 +208,7 @@ export class SidebarItem extends AKElement {
     }
 
     renderWithLabel() {
-        html`
+        return html`
             <span class="pf-c-nav__link">
                 <slot name="label"></slot>
             </span>