- {m.users_already_member({
- emails: alreadyMembers.join(", "),
- count: alreadyMembers.length,
- })}
+ {#if alreadyMembersJoinedGroups}
+ {m.users_already_member_joined_groups({
+ emails: alreadyMembers.join(", "),
+ count: alreadyMembers.length,
+ })}
+ {:else}
+ {m.users_already_member({
+ emails: alreadyMembers.join(", "),
+ count: alreadyMembers.length,
+ })}
+ {/if}
{/if}
diff --git a/web-admin/src/features/organizations/user-management/dialogs/CreateUserGroupDialog.svelte b/web-admin/src/features/organizations/user-management/dialogs/CreateUserGroupDialog.svelte
index c2264f83d0a1..e2cba81ffb2a 100644
--- a/web-admin/src/features/organizations/user-management/dialogs/CreateUserGroupDialog.svelte
+++ b/web-admin/src/features/organizations/user-management/dialogs/CreateUserGroupDialog.svelte
@@ -1,16 +1,20 @@
+
+
{#each previewUsers.slice(0, PREVIEW_COUNT) as u}
- {@const displayName = u.userName}
+ {@const displayName = u.userName || u.userEmail}
{@const colorSeed = u.userEmail}
+ {:else if pendingAcceptance}
+ {#each usergroups as name (name)}
+ onEditUserGroup(name)}>
+ {name}
+
+ {/each}
+ {:else if isPending}
{m.users_loading()}
{:else if error}
{m.users_error()}
@@ -57,6 +75,14 @@
{/each}
{/if}
+ {#if onManageGroups}
+ {#if hasGroups}
+
+ {/if}
+
+ {m.users_manage_groups()}
+
+ {/if}
{:else}
diff --git a/web-admin/src/features/organizations/user-management/utils.spec.ts b/web-admin/src/features/organizations/user-management/utils.spec.ts
index 1849f241ee5e..c9c6b41cfa40 100644
--- a/web-admin/src/features/organizations/user-management/utils.spec.ts
+++ b/web-admin/src/features/organizations/user-management/utils.spec.ts
@@ -9,9 +9,11 @@ import {
import { QueryClient, type QueryKey } from "@tanstack/query-core";
import { describe, expect, it } from "vitest";
import {
+ buildInviteUsergroups,
invalidateOrgInvites,
invalidateOrgMemberUsers,
invalidateOrgUsergroups,
+ pendingInviteesMatching,
} from "./utils";
const ORG = "acme";
@@ -92,3 +94,42 @@ describe.each(cases)(
});
},
);
+
+describe("buildInviteUsergroups", () => {
+ it("omits the field when no groups are selected", () => {
+ expect(buildInviteUsergroups([])).toBeUndefined();
+ expect(buildInviteUsergroups(undefined)).toBeUndefined();
+ });
+
+ it("passes selected groups through unchanged", () => {
+ expect(buildInviteUsergroups(["analysts", "eng"])).toEqual([
+ "analysts",
+ "eng",
+ ]);
+ });
+});
+
+describe("pendingInviteesMatching", () => {
+ const invites = [
+ { email: "Alice@example.com", roleName: "viewer" },
+ { email: "bob@example.com", roleName: "viewer" },
+ { email: "carol@other.org", roleName: "editor" },
+ ];
+
+ it("returns nothing without search text, matching the member search", () => {
+ expect(pendingInviteesMatching(invites, "")).toEqual([]);
+ expect(pendingInviteesMatching(invites, " ")).toEqual([]);
+ expect(pendingInviteesMatching(undefined, "a")).toEqual([]);
+ });
+
+ it("matches on a case-insensitive email prefix and flags the rows as pending", () => {
+ expect(pendingInviteesMatching(invites, "al")).toEqual([
+ { userEmail: "Alice@example.com", pendingAcceptance: true },
+ ]);
+ expect(pendingInviteesMatching(invites, "B")).toEqual([
+ { userEmail: "bob@example.com", pendingAcceptance: true },
+ ]);
+ // A prefix match only: "example" appears in the domain, not at the start
+ expect(pendingInviteesMatching(invites, "example")).toEqual([]);
+ });
+});
diff --git a/web-admin/src/features/organizations/user-management/utils.ts b/web-admin/src/features/organizations/user-management/utils.ts
index 64bbe9e45c5c..a78af279d210 100644
--- a/web-admin/src/features/organizations/user-management/utils.ts
+++ b/web-admin/src/features/organizations/user-management/utils.ts
@@ -6,6 +6,9 @@ import {
getAdminServiceListOrganizationMemberUsersInfiniteQueryKey,
getAdminServiceListOrganizationMemberUsersQueryKey,
getAdminServiceListUsergroupMemberUsersQueryKey,
+ getAdminServiceListUsergroupsForOrganizationAndUserQueryKey,
+ type V1OrganizationInvite,
+ type V1OrganizationMemberUser,
type V1OrganizationPermissions,
} from "@rilldata/web-admin/client";
import { OrgUserRoles } from "@rilldata/web-common/features/users/roles.ts";
@@ -14,6 +17,62 @@ import type { QueryClient } from "@tanstack/query-core";
// A single row of the custom attributes editor, as bound to KeyValueInput.
export type AttributeRow = { key: string; value: string };
+// A row of the org users table: a member, or a pending invite coerced into the same shape.
+export interface OrgUserRow
+ extends V1OrganizationMemberUser,
+ V1OrganizationInvite {
+ invitedBy?: string;
+ // Set by coerceInvitesToUsers; members never carry it.
+ pendingAcceptance?: boolean;
+}
+
+// Coerces org invites into rows of the org users table, tagging them as pending.
+// The tag is explicit rather than derived from invitedBy, which is empty for an invite
+// sent by a service token or by a since-deleted user.
+export function coerceInvitesToUsers(
+ invites: V1OrganizationInvite[],
+): OrgUserRow[] {
+ return invites.map((invite) => ({
+ ...invite,
+ userEmail: invite.email,
+ roleName: invite.roleName,
+ pendingAcceptance: true,
+ }));
+}
+
+// A member of a user group as shown in the group dialogs.
+// Pending members come from an org invite and only have an email.
+export type GroupMemberRow = {
+ userEmail: string;
+ userName?: string;
+ userPhotoUrl?: string;
+ roleName?: string;
+ pendingAcceptance?: boolean;
+};
+
+// Filters org invites by email prefix (case-insensitive) into group member rows flagged as pending.
+// Returns nothing when there is no search text, matching the member search which is only enabled while typing.
+export function pendingInviteesMatching(
+ invites: V1OrganizationInvite[] | undefined,
+ searchText: string,
+): GroupMemberRow[] {
+ const prefix = searchText.trim().toLowerCase();
+ if (!prefix || !invites) return [];
+ return invites
+ .filter((invite) => (invite.email ?? "").toLowerCase().startsWith(prefix))
+ .map((invite) => ({
+ userEmail: invite.email ?? "",
+ pendingAcceptance: true,
+ }));
+}
+
+// Turns a list of selected group names into the request field: undefined when empty, so the field is omitted.
+export function buildInviteUsergroups(
+ groups: string[] | undefined,
+): string[] | undefined {
+ return groups && groups.length > 0 ? groups : undefined;
+}
+
// Builds the attributes object for an invite from key/value form rows, skipping rows with an empty key.
// Returns undefined when no attributes are set, so the request field is omitted entirely.
export function buildInviteAttributes(
@@ -93,6 +152,23 @@ export function invalidateOrgUsergroups(
]);
}
+// The groups of one org user are read with different params by the users table dropdown (defaults)
+// and the manage groups dialog (one large page), so their query keys differ.
+// TanStack matches keys partially, so a key holding only the userId covers every variant for that user;
+// without a userId the key covers every user in the org.
+export function invalidateUserGroupsForUser(
+ queryClient: QueryClient,
+ organization: string,
+ userId?: string,
+) {
+ return queryClient.invalidateQueries({
+ queryKey: getAdminServiceListUsergroupsForOrganizationAndUserQueryKey(
+ organization,
+ userId ? { userId } : undefined,
+ ),
+ });
+}
+
export async function invalidateAfterUserDelete(
queryClient: QueryClient,
organization: string,
diff --git a/web-admin/src/routes/[organization]/-/users/+page.svelte b/web-admin/src/routes/[organization]/-/users/+page.svelte
index 64c77ebacefa..b595df0e6e11 100644
--- a/web-admin/src/routes/[organization]/-/users/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/+page.svelte
@@ -1,13 +1,13 @@