From d0ef0531c032d1c673f61b69982db39657645a94 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 12:34:39 +0200
Subject: [PATCH] refactor(webui): use central admin selections

---
 webui/src/features/admin/RolesPanel.tsx       | 17 +++++++-----
 webui/src/features/admin/SystemUsersPanel.tsx | 15 +++++------
 .../features/admin/TenantSettingsPanel.tsx    | 27 +++++++------------
 3 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/webui/src/features/admin/RolesPanel.tsx b/webui/src/features/admin/RolesPanel.tsx
index e25fd98..56ffa01 100644
--- a/webui/src/features/admin/RolesPanel.tsx
+++ b/webui/src/features/admin/RolesPanel.tsx
@@ -8,7 +8,7 @@ import { Dialog } from "@govoplan/core-webui";
 import { FormField } from "@govoplan/core-webui";
 import { StatusBadge } from "@govoplan/core-webui";
 import { ConfirmDialog } from "@govoplan/core-webui";
-import { AdminIconButton, AdminPageLayout, TableActionGroup, adminErrorMessage } from "@govoplan/core-webui";
+import { AdminIconButton, AdminPageLayout, AdminSelectionList, TableActionGroup, adminErrorMessage } from "@govoplan/core-webui";
 import { hasTenantWildcard, i18nMessage, useDeltaWatermarks, useUnsavedDraftGuard } from "@govoplan/core-webui";
 import { loadDeltaRows } from "./utils/deltaRows";
 
@@ -78,10 +78,12 @@ export default function RolesPanel({ settings, auth, canDefine, onAuthRefresh }:
     setDraft(emptyDraft);
     setSavedDraftKey(draftKey(emptyDraft));
   }
-  function togglePermission(scope: string, checked: boolean) {
-    const next = new Set(draft.permissions);
-    if (checked) next.add(scope);else next.delete(scope);
-    setDraft({ ...draft, permissions: Array.from(next) });
+  function setPermissionGroup(scopes: string[], selected: string[]) {
+    const groupScopes = new Set(scopes);
+    setDraft({
+      ...draft,
+      permissions: [...draft.permissions.filter((scope) => !groupScopes.has(scope)), ...selected]
+    });
   }
 
   async function save(): Promise<boolean> {
@@ -142,7 +144,10 @@ export default function RolesPanel({ settings, auth, canDefine, onAuthRefresh }:
           <FormField label="i18n:govoplan-access.description.55f8ebc8"><textarea rows={3} value={draft.description} onChange={(event) => setDraft({ ...draft, description: event.target.value })} /></FormField>
           {editing !== "new" && <FormField label="i18n:govoplan-access.assignable.a88debc5"><select value={draft.isAssignable ? "yes" : "no"} onChange={(event) => setDraft({ ...draft, isAssignable: event.target.value === "yes" })}><option value="yes">i18n:govoplan-access.yes.5397e058</option><option value="no">i18n:govoplan-access.no.816c52fd</option></select></FormField>}
         </div>
-        <div className="admin-permission-groups">{permissionGroups.map(([category, items]) => <fieldset key={category} className="admin-permission-group"><legend>{category}</legend>{items.map((permission) => <label key={permission.scope} className="admin-selection-item"><input type="checkbox" checked={draft.permissions.includes(permission.scope)} onChange={(event) => togglePermission(permission.scope, event.target.checked)} /><span><strong>{permission.label}</strong><small>{permission.description}<code>{permission.scope}</code></small></span></label>)}</fieldset>)}</div>
+        <div className="admin-permission-groups">{permissionGroups.map(([category, items]) => {
+          const scopes = items.map((permission) => permission.scope);
+          return <fieldset key={category} className="admin-permission-group"><legend>{category}</legend><AdminSelectionList options={items.map((permission) => ({ id: permission.scope, label: permission.label, description: <>{permission.description}<code>{permission.scope}</code></> }))} selected={draft.permissions.filter((scope) => scopes.includes(scope))} onChange={(selected) => setPermissionGroup(scopes, selected)} /></fieldset>;
+        })}</div>
       </Dialog>
 
       <Dialog open={Boolean(viewing)} title="i18n:govoplan-access.role_details.a16b5d9f" onClose={() => setViewing(null)} className="admin-dialog admin-dialog-wide" footer={<Button onClick={() => setViewing(null)}>i18n:govoplan-access.close.bbfa773e</Button>}>
diff --git a/webui/src/features/admin/SystemUsersPanel.tsx b/webui/src/features/admin/SystemUsersPanel.tsx
index aaf2b21..ce66c48 100644
--- a/webui/src/features/admin/SystemUsersPanel.tsx
+++ b/webui/src/features/admin/SystemUsersPanel.tsx
@@ -149,16 +149,13 @@ export default function SystemUsersPanel({
     setSavedDraftKey(draftKey(emptyDraft));
   }
 
-  function membership(tenantId: string) {
-    return draft.memberships.find((item) => item.tenant_id === tenantId);
-  }
-
-  function setMembership(tenantId: string, enabled: boolean) {
+  function setMembershipSelection(tenantIds: string[]) {
     setDraft((current) => ({
       ...current,
-      memberships: enabled ?
-      [...current.memberships.filter((item) => item.tenant_id !== tenantId), { tenant_id: tenantId, is_active: true, role_ids: [], group_ids: [] }] :
-      current.memberships.filter((item) => item.tenant_id !== tenantId)
+      memberships: tenantIds.map((tenantId) =>
+        current.memberships.find((item) => item.tenant_id === tenantId) ??
+        { tenant_id: tenantId, is_active: true, role_ids: [], group_ids: [] }
+      )
     }));
   }
 
@@ -253,7 +250,7 @@ export default function SystemUsersPanel({
         </div>
         <div className="admin-assignment-grid">
           <div><span className="form-label">i18n:govoplan-access.system_roles.a9461aa6</span><AdminSelectionList options={roles.map((role) => ({ id: role.id, label: role.name, description: role.description, disabled: !canAssignRoles }))} selected={draft.roleIds} onChange={(roleIds) => setDraft({ ...draft, roleIds })} /></div>
-          <div><span className="form-label">i18n:govoplan-access.tenant_memberships.451de736</span><div className="admin-selection-list">{tenants.map((tenant) => <label className="admin-selection-item" key={tenant.id}><input type="checkbox" checked={Boolean(membership(tenant.id))} disabled={!canManageMemberships || Boolean(membership(tenant.id)?.is_last_active_owner)} onChange={(event) => setMembership(tenant.id, event.target.checked)} /><span><strong>{tenant.name}</strong><small>{tenant.slug}</small></span></label>)}</div></div>
+          <div><span className="form-label">i18n:govoplan-access.tenant_memberships.451de736</span><AdminSelectionList options={tenants.map((tenant) => ({ id: tenant.id, label: tenant.name, description: tenant.slug, disabled: !canManageMemberships || Boolean(draft.memberships.find((item) => item.tenant_id === tenant.id)?.is_last_active_owner) }))} selected={draft.memberships.map((item) => item.tenant_id)} onChange={setMembershipSelection} /></div>
         </div>
         {editing && editing !== "new" && editing.memberships.some((membership) => membership.is_last_active_owner) && <p className="admin-protection-note">i18n:govoplan-access.this_account_is_the_last_active_operational_owne.5087839f</p>}
         <p className="muted small-note">i18n:govoplan-access.removing_a_tenant_checkbox_suspends_that_members.7c6df77d</p>
diff --git a/webui/src/features/admin/TenantSettingsPanel.tsx b/webui/src/features/admin/TenantSettingsPanel.tsx
index 88ae63d..430edef 100644
--- a/webui/src/features/admin/TenantSettingsPanel.tsx
+++ b/webui/src/features/admin/TenantSettingsPanel.tsx
@@ -4,7 +4,7 @@ import { Button } from "@govoplan/core-webui";
 import { Card } from "@govoplan/core-webui";
 import { FormField } from "@govoplan/core-webui";
 import { fetchTenantSettingsDelta, updateTenantSettings, type TenantSettingsDeltaSections, type TenantSettingsItem } from "../../api/admin";
-import { AdminPageLayout, adminErrorMessage, useDeltaWatermarks, useUnsavedDraftGuard } from "@govoplan/core-webui";
+import { AdminPageLayout, AdminSelectionList, adminErrorMessage, useDeltaWatermarks, useUnsavedDraftGuard } from "@govoplan/core-webui";
 
 const DELTA_KEY = "access:tenant-settings";
 
@@ -94,10 +94,8 @@ export default function TenantSettingsPanel({
     }
   }
 
-  function toggleLanguage(code: string, checked: boolean) {
-    const enabled = new Set(draft.enabled_language_codes);
-    if (checked) enabled.add(code);
-    else enabled.delete(code);
+  function setEnabledLanguages(selected: string[]) {
+    const enabled = new Set(selected);
     const nextEnabled = draft.system_enabled_language_codes.filter((item) => enabled.has(item));
     const defaultLocale = nextEnabled.includes(draft.default_locale) ? draft.default_locale : (nextEnabled[0] ?? draft.default_locale);
     setDraft({ ...draft, enabled_language_codes: nextEnabled, default_locale: defaultLocale });
@@ -122,21 +120,14 @@ export default function TenantSettingsPanel({
               })}
             </select>
           </FormField>
-          <div className="settings-list">
-            {draft.system_enabled_language_codes.map((code) => {
+          <AdminSelectionList
+            options={draft.system_enabled_language_codes.map((code) => {
               const language = draft.available_languages.find((item) => item.code === code);
-              return (
-                <label className="admin-inline-check" key={code}>
-                  <input
-                    type="checkbox"
-                    checked={draft.enabled_language_codes.includes(code)}
-                    disabled={!canWrite || busy || code === draft.default_locale}
-                    onChange={(event) => toggleLanguage(code, event.target.checked)} />
-                  <span><strong>{code.toUpperCase()}</strong> {languageOptionLabel(language ?? { code, label: code.toUpperCase() })}</span>
-                </label>
-              );
+              return { id: code, label: code.toUpperCase(), description: languageOptionLabel(language ?? { code, label: code.toUpperCase() }), disabled: !canWrite || busy || code === draft.default_locale };
             })}
-          </div>
+            selected={draft.enabled_language_codes}
+            onChange={setEnabledLanguages}
+          />
           <p className="muted small-note">i18n:govoplan-access.tenant_languages_help</p>
           <dl className="detail-list">
             <div><dt>i18n:govoplan-access.tenant.3ca93c78</dt><dd>{draft.name || "-"}</dd></div>