Proof-of-concept for bulk-add users on admin dash

This isn't great UI so we'll almost certainly do it differently, but
it's one possible way this could be done. The feature is accessed from
the Settings tab on the org page; when you click on it, you're taken to
the admin dashboard where the bulk-add button is now visible.

frontend/src/lib/i18n/locales/en.json

@@ -44,6 +44,9 @@
         }
       }
     },
+    "bulk_add_users_modal": {
+      "button_title": "Bulk Add Users",
+    },
     "create_user_modal": {
       "create_user": "Create User",
       "help_create_single_guest_user": "You can invite users to register and join a project by themselves with the **Add Project Member** button. See [Add Project Member]({helpLink}) for details.",

frontend/src/routes/(authenticated)/admin/+page.svelte

@@ -23,6 +23,7 @@
   import type { Confidentiality } from '$lib/components/Projects';
   import { browser } from '$app/environment';
   import UserTable from './UserTable.svelte';
+  import type { UUID } from 'crypto';
 
   export let data: PageData;
   $: projects = data.projects;
@@ -41,6 +42,7 @@
     memberSearch: queryParam.string(undefined),
     projectSearch: queryParam.string<string>(''),
     tab: queryParam.string<AdminTabId>('projects'),
+    targetOrgId: queryParam.string<UUID | ''>(''),
   });
 
   const userFilterKeys = ['userSearch'] as const satisfies Readonly<(keyof AdminSearchParams)[]>;
@@ -60,6 +62,15 @@
   $: users = $userData?.items ?? [];
   $: filteredUserCount = $userData?.totalCount ?? 0;
   $: shownUsers = lastLoadUsedActiveFilter ? users : users.slice(0, 10);
+  let selectedUsers: User[] = [];
+
+  function bulkAddSelectedUsersToOrg(): void {
+    if (!$queryParamValues.targetOrgId) {
+      // Shouldn't have been called
+      return;
+    }
+    console.log(`Would add the following users to org with ID ${$queryParamValues.targetOrgId}:`, selectedUsers);
+  }
 
   function filterProjectsByUser(user: User): void {
     $queryParamValues.memberSearch = user.email ?? user.username ?? undefined;
@@ -131,6 +142,15 @@
               </Badge>
             </div>
           </div>
+          {#if $queryParamValues.targetOrgId}
+          <button class="btn btn-sm btn-primary max-xs:btn-square"
+            on:click={bulkAddSelectedUsersToOrg}>
+            <span class="admin-tabs:hidden">
+              {$t('admin_dashboard.bulk_add_users_modal.button_title')}
+            </span>
+            <span class="i-mdi-plus text-2xl" />
+          </button>
+          {/if}
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <svelte:element this={browser ? 'button' : 'div'} class="btn btn-sm btn-success max-xs:btn-square"
             on:click={() => createUserModal.open()}>
@@ -157,6 +177,7 @@
       <div class="overflow-x-auto @container scroll-shadow">
         <UserTable
           {shownUsers}
+          bind:selectedUsers
           on:openUserModal={(event) => userModal.open(event.detail)}
           on:editUser={(event) => openModal(event.detail)}
           on:filterProjectsByUser={(event) => filterProjectsByUser(event.detail)}

frontend/src/routes/(authenticated)/admin/+page.ts

@@ -22,11 +22,13 @@ import type { ProjectFilters } from '$lib/components/Projects';
 import { DEFAULT_PAGE_SIZE } from '$lib/components/Paging';
 import type { AdminTabId } from './AdminTabs.svelte';
 import { derived, readable } from 'svelte/store';
+import type { UUID } from 'crypto';
 
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- false positive?
 export type AdminSearchParams = ProjectFilters & {
   userSearch: string
   tab: AdminTabId
+  targetOrgId: UUID | ''
 };
 
 export type Project = NonNullable<LoadAdminDashboardProjectsQuery['projects']>[number];

frontend/src/routes/(authenticated)/org/[org_id]/+page.svelte

@@ -138,6 +138,11 @@
         </Button>
       </div>
       <AdminContent>
+        <div class="mt-4 flex justify-end">
+          <a class="btn btn-success" href="/admin?targetOrgId={org.id}">
+            {$t('admin_dashboard.bulk_add_users_modal.button_title')}
+          </a>
+        </div>
         <div class="divider" />
         <div class="flex justify-end">
           <Button variant="btn-error" on:click={confirmDeleteOrg}>