From bf5669880974d92a5398211cc47e1c014d35b31c Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Thu, 2 Jul 2026 12:51:30 -0700
Subject: [PATCH 1/3] fix: rework user group management with an accessible
 selector

Replace the toggle-checkbox group list and the separate primary-group
dropdown with a single accessible control: a combobox that adds groups
to the membership list, and a radio group where each member row selects
the primary group and offers a button to revoke membership.

The old list rendered each row as role="option" wrapping a Radix
checkbox, producing conflicting roles, double tab stops, and a dead
decorative checkbox. It also scaled poorly as the number of groups grew.

Generalize the orphaned base ComboBox with a placeholder prop and match
its height to the standard Input. Remove UserGroup and PrimaryGroup.
---
 apps/web/src/base/ComboBox.tsx                |   9 +-
 .../web/src/users/components/PrimaryGroup.tsx |  55 ------
 apps/web/src/users/components/UserDetail.tsx  |   8 +-
 apps/web/src/users/components/UserGroup.tsx   |  31 ----
 apps/web/src/users/components/UserGroups.tsx  | 164 +++++++++++++-----
 .../__tests__/PrimaryGroup.test.tsx           |  80 ---------
 .../components/__tests__/UserDetail.test.tsx  |  25 ++-
 .../components/__tests__/UserGroup.test.tsx   |  44 -----
 .../components/__tests__/UserGroups.test.tsx  | 148 ++++++++++++++++
 9 files changed, 299 insertions(+), 265 deletions(-)
 delete mode 100644 apps/web/src/users/components/PrimaryGroup.tsx
 delete mode 100644 apps/web/src/users/components/UserGroup.tsx
 delete mode 100644 apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx
 delete mode 100644 apps/web/src/users/components/__tests__/UserGroup.test.tsx
 create mode 100644 apps/web/src/users/components/__tests__/UserGroups.test.tsx

diff --git a/apps/web/src/base/ComboBox.tsx b/apps/web/src/base/ComboBox.tsx
index d6e6dd029..42ff86ca4 100644
--- a/apps/web/src/base/ComboBox.tsx
+++ b/apps/web/src/base/ComboBox.tsx
@@ -10,16 +10,17 @@ function ComboboxTriggerButton({
 	TriggerButtonProps,
 	selectedItem,
 	renderRow,
+	placeholder,
 	id,
 }) {
 	return (
 		<button
-			className="flex justify-between items-center px-2.5 py-1.5 bg-white border border-gray-300 rounded font-medium capitalize w-full [&_svg]:ml-1"
+			className="flex justify-between items-center px-2.5 py-2 bg-white border border-gray-300 rounded font-medium capitalize w-full [&_svg]:ml-1"
 			{...TriggerButtonProps}
 			id={id}
 			type="button"
 		>
-			{selectedItem ? renderRow(selectedItem) : "Select user"}
+			{selectedItem ? renderRow(selectedItem) : placeholder}
 			<Icon icon={ChevronDown} />
 		</button>
 	);
@@ -41,6 +42,8 @@ type ComboBoxProps = {
 	onFilter: (term: string) => void;
 	onChange: (item: unknown) => void;
 	itemToString?: (item: unknown) => string;
+	/** Text shown on the trigger when nothing is selected */
+	placeholder?: string;
 	id?: string;
 };
 
@@ -56,6 +59,7 @@ export default function ComboBox({
 	onFilter,
 	onChange,
 	itemToString,
+	placeholder = "Select…",
 	id,
 }: ComboBoxProps) {
 	itemToString = itemToString || defaultToString;
@@ -87,6 +91,7 @@ export default function ComboBox({
 				TriggerButtonProps={getToggleButtonProps()}
 				selectedItem={selectedItem}
 				renderRow={renderRow}
+				placeholder={placeholder}
 				id={id}
 			/>
 			<ul
diff --git a/apps/web/src/users/components/PrimaryGroup.tsx b/apps/web/src/users/components/PrimaryGroup.tsx
deleted file mode 100644
index ba4d6a87a..000000000
--- a/apps/web/src/users/components/PrimaryGroup.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useUpdateUser } from "@administration/queries";
-import InputGroup from "@base/InputGroup";
-import InputLabel from "@base/InputLabel";
-import InputSelect from "@base/InputSelect";
-import type { GroupMinimal } from "@groups/types";
-import { capitalize } from "es-toolkit/string";
-
-export type PrimaryGroupProps = {
-	/** The groups associated with the user */
-	groups: GroupMinimal[];
-	/** The users unique id */
-	id: number;
-	/** The users primary group */
-	primaryGroup: GroupMinimal | null;
-};
-
-/**
- * A dropdown showing the primary group and its options
- */
-export default function PrimaryGroup({
-	groups,
-	id,
-	primaryGroup,
-}: PrimaryGroupProps) {
-	const mutation = useUpdateUser();
-
-	function handleSetPrimaryGroup(e) {
-		mutation.mutate({
-			userId: id,
-			update: {
-				primary_group:
-					e.target.value === "none" ? null : Number(e.target.value),
-			},
-		});
-	}
-
-	return (
-		<InputGroup>
-			<InputLabel>Primary Group</InputLabel>
-			<InputSelect
-				value={primaryGroup?.id || "none"}
-				onChange={handleSetPrimaryGroup}
-			>
-				<option key="none" value="none">
-					None
-				</option>
-				{groups.map(({ id, name }) => (
-					<option key={id} value={id} className="capitalize">
-						{capitalize(name)}
-					</option>
-				))}
-			</InputSelect>
-		</InputGroup>
-	);
-}
diff --git a/apps/web/src/users/components/UserDetail.tsx b/apps/web/src/users/components/UserDetail.tsx
index c4618e4e8..fc919a484 100644
--- a/apps/web/src/users/components/UserDetail.tsx
+++ b/apps/web/src/users/components/UserDetail.tsx
@@ -6,7 +6,6 @@ import { CircleAlert, ShieldUserIcon } from "lucide-react";
 import Label from "@/base/Label";
 import Handle from "./Handle";
 import Password from "./Password";
-import PrimaryGroup from "./PrimaryGroup";
 import { UserActivationBanner } from "./UserActivationBanner";
 import UserAdministratorRole from "./UserAdministratorRole";
 import UserGroups from "./UserGroups";
@@ -79,8 +78,11 @@ export default function UserDetail({ userId }: UserDetailProps) {
 
 			<div className="mb-4 md:grid md:grid-cols-2 md:gap-x-4">
 				<div>
-					<UserGroups userId={id} memberGroups={groups} />
-					<PrimaryGroup groups={groups} id={id} primaryGroup={primary_group} />
+					<UserGroups
+						userId={id}
+						memberGroups={groups}
+						primaryGroup={primary_group}
+					/>
 				</div>
 				<UserPermissions permissions={permissions} />
 			</div>
diff --git a/apps/web/src/users/components/UserGroup.tsx b/apps/web/src/users/components/UserGroup.tsx
deleted file mode 100644
index b880a06aa..000000000
--- a/apps/web/src/users/components/UserGroup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Checkbox from "@base/Checkbox";
-import SelectBoxGroupSection from "@base/SelectBoxGroupSection";
-
-export type UserGroupTypes = {
-	/** The group unique id */
-	id: string | number;
-
-	/** The group name */
-	name: string;
-
-	/** Whether the group is selected */
-	toggled: boolean;
-
-	/** A callback function to handle the selection of a group */
-	onClick: (id: string | number) => void;
-};
-
-/**
- * A condensed user group for use in a list of user groups
- */
-export function UserGroup({ id, name, toggled, onClick }: UserGroupTypes) {
-	return (
-		<SelectBoxGroupSection
-			active={toggled}
-			onClick={() => onClick(id)}
-			className="capitalize select-none"
-		>
-			<Checkbox checked={toggled} id={`UserGroupCheckbox-${id}`} label={name} />
-		</SelectBoxGroupSection>
-	);
-}
diff --git a/apps/web/src/users/components/UserGroups.tsx b/apps/web/src/users/components/UserGroups.tsx
index cc25f73a0..64d8acd39 100644
--- a/apps/web/src/users/components/UserGroups.tsx
+++ b/apps/web/src/users/components/UserGroups.tsx
@@ -1,74 +1,156 @@
 import { useUpdateUser } from "@administration/queries";
+import { useFuse } from "@app/fuse";
 import BoxGroup from "@base/BoxGroup";
+import BoxGroupSection from "@base/BoxGroupSection";
+import ComboBox from "@base/ComboBox";
+import Icon from "@base/Icon";
 import InputLabel from "@base/InputLabel";
 import LoadingPlaceholder from "@base/LoadingPlaceholder";
-import NoneFoundSection from "@base/NoneFoundSection";
 import QueryError from "@base/QueryError";
+import { RadioGroup, RadioGroupItem } from "@base/RadioGroup";
 import { useListGroups } from "@groups/queries";
 import type { GroupMinimal } from "@groups/types";
-import { xor } from "es-toolkit/array";
-import { useId } from "react";
-import { UserGroup } from "./UserGroup";
+import { X } from "lucide-react";
 
-type UserGroupsType = {
-	/** The groups associated with the user */
+/** A stable empty fallback so `useFuse` doesn't reset its term while loading */
+const NO_GROUPS: GroupMinimal[] = [];
+
+type UserGroupsProps = {
+	/** The groups the user is a member of */
 	memberGroups: GroupMinimal[];
 
+	/** The user's primary group, or null if none */
+	primaryGroup: GroupMinimal | null;
+
 	/** The unique user id */
 	userId: number;
 };
 
 /**
- * A list of user groups
+ * Manages a user's group membership and primary group.
+ *
+ * A single-select combobox adds groups to the membership list. Each member is
+ * a row in a radio group that selects the primary group, with a button to
+ * revoke membership.
  */
-export default function UserGroups({ memberGroups, userId }: UserGroupsType) {
+export default function UserGroups({
+	memberGroups,
+	primaryGroup,
+	userId,
+}: UserGroupsProps) {
 	const { data, isPending, isError } = useListGroups();
 	const mutation = useUpdateUser();
-	const labelId = useId();
 
-	if (isError && !data) {
-		return <QueryError noun="groups" />;
-	}
+	const [results, term, setTerm] = useFuse<GroupMinimal>(data ?? NO_GROUPS, [
+		"name",
+	]);
 
-	if (isPending) {
-		return <LoadingPlaceholder />;
+	const memberIds = new Set(memberGroups.map((group) => group.id));
+	const availableGroups = results.filter((group) => !memberIds.has(group.id));
+
+	function addGroup(id: number) {
+		mutation.mutate({
+			userId,
+			update: { groups: [...memberIds, id] },
+		});
 	}
 
-	function handleEdit(groupId: number) {
+	function removeGroup(id: number) {
 		mutation.mutate({
 			userId,
 			update: {
-				groups: xor(
-					memberGroups.map((g) => g.id),
-					[groupId],
-				),
+				groups: [...memberIds].filter((memberId) => memberId !== id),
+				...(primaryGroup?.id === id ? { primary_group: null } : {}),
 			},
 		});
 	}
 
-	return (
-		<div>
-			<InputLabel id={labelId}>Groups</InputLabel>
-			<BoxGroup
-				role="listbox"
-				aria-multiselectable
-				aria-labelledby={labelId}
-				className="mb-4"
-			>
-				{data.length ? (
-					data.map(({ id, name }) => (
-						<UserGroup
-							key={id}
-							id={id}
-							name={name}
-							toggled={memberGroups.some((g) => g.id === id)}
-							onClick={handleEdit}
-						/>
-					))
-				) : (
-					<NoneFoundSection key="noneFound" noun="groups" />
+	function setPrimaryGroup(value: string) {
+		mutation.mutate({
+			userId,
+			update: { primary_group: value === "none" ? null : Number(value) },
+		});
+	}
+
+	function renderAdd() {
+		if (isError && !data) {
+			return <QueryError noun="groups" />;
+		}
+
+		if (isPending) {
+			return <LoadingPlaceholder />;
+		}
+
+		return (
+			<ComboBox
+				items={availableGroups}
+				selectedItem={null}
+				term={term}
+				onFilter={setTerm}
+				onChange={(group) => addGroup((group as GroupMinimal).id)}
+				itemToString={(group) => (group ? (group as GroupMinimal).name : "")}
+				renderRow={(group) => (
+					<span className="capitalize">{(group as GroupMinimal).name}</span>
 				)}
-			</BoxGroup>
+				placeholder="Add group"
+			/>
+		);
+	}
+
+	return (
+		<div className="mb-4">
+			<InputLabel>Groups</InputLabel>
+			{renderAdd()}
+
+			{memberGroups.length ? (
+				<RadioGroup
+					className="mt-4"
+					aria-label="Primary group"
+					value={primaryGroup ? String(primaryGroup.id) : "none"}
+					onValueChange={setPrimaryGroup}
+				>
+					<BoxGroup>
+						{memberGroups.map((group) => (
+							<BoxGroupSection
+								key={group.id}
+								className="flex items-center gap-3"
+							>
+								<RadioGroupItem
+									id={`primary-${group.id}`}
+									value={String(group.id)}
+								/>
+								<label
+									htmlFor={`primary-${group.id}`}
+									className="grow capitalize cursor-pointer select-none"
+								>
+									{group.name}
+								</label>
+								<button
+									type="button"
+									aria-label={`Remove ${group.name}`}
+									className="text-gray-500 hover:text-gray-800"
+									onClick={() => removeGroup(group.id)}
+								>
+									<Icon icon={X} />
+								</button>
+							</BoxGroupSection>
+						))}
+						<BoxGroupSection className="flex items-center gap-3">
+							<RadioGroupItem id="primary-none" value="none" />
+							<label
+								htmlFor="primary-none"
+								className="grow cursor-pointer select-none"
+							>
+								No primary group
+							</label>
+						</BoxGroupSection>
+					</BoxGroup>
+				</RadioGroup>
+			) : (
+				<p className="mt-4 text-gray-500">
+					This user is not a member of any groups.
+				</p>
+			)}
 		</div>
 	);
 }
diff --git a/apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx b/apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx
deleted file mode 100644
index 29137343c..000000000
--- a/apps/web/src/users/components/__tests__/PrimaryGroup.test.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { mockApiEditUser } from "@tests/api/users";
-import { createFakeUser } from "@tests/fake/user";
-import { renderWithProviders } from "@tests/setup";
-import { beforeEach, describe, expect, it } from "vitest";
-import PrimaryGroup, { type PrimaryGroupProps } from "../PrimaryGroup";
-
-describe("<PrimaryGroup />", () => {
-	let props: PrimaryGroupProps;
-
-	beforeEach(() => {
-		props = {
-			groups: [
-				{ id: 1, legacy_id: null, name: "foo" },
-				{ id: 2, legacy_id: null, name: "bar" },
-				{ id: 3, legacy_id: null, name: "baz" },
-			],
-			id: 1,
-			primaryGroup: { id: 2, legacy_id: null, name: "bar" },
-		};
-	});
-
-	it("should render correctly when 3 groups exist", () => {
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-		expect(screen.getByRole("combobox")).toHaveValue("2");
-		expect(screen.getByRole("combobox")).not.toHaveValue("3");
-		expect(screen.getByRole("option", { name: "None" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Foo" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Baz" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Bar" })).toBeInTheDocument();
-	});
-
-	it("should render when [primaryGroup = null]", () => {
-		props.primaryGroup = null;
-
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-		expect(screen.getByRole("combobox")).toHaveValue("none");
-		expect(screen.getByRole("option", { name: "Foo" })).toBeInTheDocument();
-		expect(screen.getByRole("option", { name: "Bar" })).toBeInTheDocument();
-	});
-
-	it("should render correctly when groups = []", () => {
-		props.groups = [];
-
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-		expect(screen.getByRole("combobox")).toHaveValue("none");
-		expect(
-			screen.queryByRole("option", { name: "Foo" }),
-		).not.toBeInTheDocument();
-	});
-
-	it("should call onSetPrimaryGroup() when selection changes", async () => {
-		const userDetails = createFakeUser({
-			id: props.id,
-			groups: props.groups,
-			primary_group: props.primaryGroup,
-		});
-
-		const scope = mockApiEditUser(
-			props.id,
-			200,
-			{ primary_group: { id: 1, name: "foo" } },
-			userDetails,
-		);
-		renderWithProviders(<PrimaryGroup {...props} />);
-
-		expect(screen.getByText("Primary Group")).toBeInTheDocument();
-
-		await userEvent.selectOptions(screen.getByRole("combobox"), "Bar");
-
-		scope.done();
-	});
-});
diff --git a/apps/web/src/users/components/__tests__/UserDetail.test.tsx b/apps/web/src/users/components/__tests__/UserDetail.test.tsx
index 16cd050b3..8358c7c2f 100644
--- a/apps/web/src/users/components/__tests__/UserDetail.test.tsx
+++ b/apps/web/src/users/components/__tests__/UserDetail.test.tsx
@@ -68,13 +68,17 @@ describe("<UserDetail />", () => {
 			expect(screen.getByLabelText("Group 2")).toBeInTheDocument();
 			expect(screen.getByLabelText("Group 3")).toBeInTheDocument();
 
-			expect(screen.getByText("Primary Group")).toBeInTheDocument();
-			expect(screen.getByRole("option", { name: "None" })).toBeInTheDocument();
 			expect(
-				screen.getByRole("option", { name: "Group 1" }),
+				screen.getByRole("radiogroup", { name: "Primary group" }),
 			).toBeInTheDocument();
 			expect(
-				screen.getByRole("option", { name: "Group 4" }),
+				screen.getByRole("radio", { name: "No primary group" }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("radio", { name: "Group 1" }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("radio", { name: "Group 4" }),
 			).toBeInTheDocument();
 
 			expect(screen.getByText("Permissions")).toBeInTheDocument();
@@ -168,8 +172,8 @@ describe("<UserDetail />", () => {
 			expect(await screen.findByLabelText("Group 1")).toBeInTheDocument();
 			expect(screen.getByLabelText("Group 3")).toBeInTheDocument();
 		});
-		it("should render NoneFound when items = []", async () => {
-			const user = createFakeUser({ groups: [] });
+		it("should show an empty message when the user has no groups", async () => {
+			const user = createFakeUser({ groups: [], primary_group: null });
 
 			mockApiListGroups([]);
 
@@ -178,10 +182,13 @@ describe("<UserDetail />", () => {
 			renderWithProviders(<UserDetail userId={user.id} />);
 
 			expect(await screen.findByText("Groups")).toBeInTheDocument();
-			expect(await screen.findByText("No groups found")).toBeInTheDocument();
+			expect(
+				await screen.findByText("This user is not a member of any groups."),
+			).toBeInTheDocument();
 			expect(screen.queryByLabelText("group3")).not.toBeInTheDocument();
-			expect(screen.getByText("Primary Group")).toBeInTheDocument();
-			expect(screen.getByRole("option", { name: "None" })).toBeInTheDocument();
+			expect(
+				screen.queryByRole("radiogroup", { name: "Primary group" }),
+			).not.toBeInTheDocument();
 
 			scope.done();
 		});
diff --git a/apps/web/src/users/components/__tests__/UserGroup.test.tsx b/apps/web/src/users/components/__tests__/UserGroup.test.tsx
deleted file mode 100644
index 7fa051994..000000000
--- a/apps/web/src/users/components/__tests__/UserGroup.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { renderWithProviders } from "@tests/setup";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { UserGroup, type UserGroupTypes } from "../UserGroup";
-
-describe("<UserGroup />", () => {
-	let props: UserGroupTypes;
-
-	beforeEach(() => {
-		props = {
-			id: "3691nwak3",
-			name: "bob",
-			toggled: true,
-			onClick: vi.fn(),
-		};
-	});
-
-	it("should render correctly when toggled=true", () => {
-		renderWithProviders(<UserGroup {...props} />);
-
-		expect(screen.getByText("bob")).toBeInTheDocument();
-		expect(screen.queryByText("3691nwak3")).not.toBeInTheDocument();
-	});
-
-	it("should render with [toggled=false]", () => {
-		props.toggled = false;
-
-		renderWithProviders(<UserGroup {...props} />);
-
-		expect(screen.getByText("bob")).toBeInTheDocument();
-		expect(screen.queryByText("3691nwak3")).not.toBeInTheDocument();
-	});
-
-	it("should call [onClick] when clicked", async () => {
-		renderWithProviders(<UserGroup {...props} />);
-
-		expect(props.onClick).not.toHaveBeenCalled();
-
-		await userEvent.click(screen.getByText("bob"));
-
-		expect(props.onClick).toHaveBeenCalled();
-	});
-});
diff --git a/apps/web/src/users/components/__tests__/UserGroups.test.tsx b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
new file mode 100644
index 000000000..08dce322a
--- /dev/null
+++ b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
@@ -0,0 +1,148 @@
+import type { Group } from "@groups/types";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mockApiListGroups } from "@tests/api/groups";
+import { mockApiEditUser, userServerFnMocks } from "@tests/api/users";
+import { createFakeGroup } from "@tests/fake/groups";
+import { createFakeUser } from "@tests/fake/user";
+import { renderWithProviders } from "@tests/setup";
+import { beforeEach, describe, expect, it } from "vitest";
+import UserGroups from "../UserGroups";
+
+describe("<UserGroups />", () => {
+	let allGroups: Group[];
+	let member: Group;
+	let other: Group;
+	let userId: number;
+
+	beforeEach(() => {
+		member = createFakeGroup({ id: 1, name: "foo" });
+		other = createFakeGroup({ id: 2, name: "bar" });
+		allGroups = [member, other];
+		userId = createFakeUser().id;
+	});
+
+	it("renders members as radios with remove buttons", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member]}
+				primaryGroup={member}
+			/>,
+		);
+
+		expect(await screen.findByText("Groups")).toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: "foo" })).toBeChecked();
+		expect(
+			screen.getByRole("button", { name: "Remove foo" }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole("radio", { name: "No primary group" }),
+		).not.toBeChecked();
+	});
+
+	it("shows an empty message when the user has no groups", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups userId={userId} memberGroups={[]} primaryGroup={null} />,
+		);
+
+		expect(
+			await screen.findByText("This user is not a member of any groups."),
+		).toBeInTheDocument();
+	});
+
+	it("adds a group through the combobox", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("button", { name: /add group/i }),
+		);
+		await userEvent.click(screen.getByRole("option", { name: "bar" }));
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, groups: [1, 2] },
+			}),
+		);
+	});
+
+	it("sets the primary group when a radio is selected", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(await screen.findByRole("radio", { name: "bar" }));
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, primary_group: 2 },
+			}),
+		);
+	});
+
+	it("removes a group and clears the primary when the primary is removed", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("button", { name: "Remove foo" }),
+		);
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, groups: [2], primary_group: null },
+			}),
+		);
+	});
+
+	it("removes a non-primary group without touching the primary", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("button", { name: "Remove bar" }),
+		);
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, groups: [1] },
+			}),
+		);
+	});
+});

From c6d250cda7aeaf0f46144541638754e3d7a94caf Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Thu, 2 Jul 2026 13:37:48 -0700
Subject: [PATCH 2/3] fix: clarify group selector when there is nothing to add
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The add-group combobox previously showed an empty search box both when a
user already belonged to every group and when no groups existed at all —
two very different situations that looked identical.

Distinguish them: show "This user is a member of every group" when there
is nothing left to add, and a "No groups have been created yet" message
linking to group management when the instance has no groups.
---
 apps/web/src/users/components/UserGroups.tsx  | 56 +++++++++++++++----
 .../components/__tests__/UserDetail.test.tsx  | 11 ++--
 .../components/__tests__/UserGroups.test.tsx  | 41 +++++++++++++-
 3 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/users/components/UserGroups.tsx b/apps/web/src/users/components/UserGroups.tsx
index 64d8acd39..3716173a2 100644
--- a/apps/web/src/users/components/UserGroups.tsx
+++ b/apps/web/src/users/components/UserGroups.tsx
@@ -5,6 +5,7 @@ import BoxGroupSection from "@base/BoxGroupSection";
 import ComboBox from "@base/ComboBox";
 import Icon from "@base/Icon";
 import InputLabel from "@base/InputLabel";
+import Link from "@base/Link";
 import LoadingPlaceholder from "@base/LoadingPlaceholder";
 import QueryError from "@base/QueryError";
 import { RadioGroup, RadioGroupItem } from "@base/RadioGroup";
@@ -81,6 +82,27 @@ export default function UserGroups({
 			return <LoadingPlaceholder />;
 		}
 
+		if (data.length === 0) {
+			return (
+				<p className="text-gray-500">
+					No groups have been created yet.{" "}
+					<Link
+						to="/administration/groups"
+						className="text-blue-600 hover:underline"
+					>
+						Manage groups
+					</Link>
+					.
+				</p>
+			);
+		}
+
+		if (availableGroups.length === 0) {
+			return (
+				<p className="text-gray-500">This user is a member of every group.</p>
+			);
+		}
+
 		return (
 			<ComboBox
 				items={availableGroups}
@@ -97,12 +119,9 @@ export default function UserGroups({
 		);
 	}
 
-	return (
-		<div className="mb-4">
-			<InputLabel>Groups</InputLabel>
-			{renderAdd()}
-
-			{memberGroups.length ? (
+	function renderMembership() {
+		if (memberGroups.length) {
+			return (
 				<RadioGroup
 					className="mt-4"
 					aria-label="Primary group"
@@ -146,11 +165,26 @@ export default function UserGroups({
 						</BoxGroupSection>
 					</BoxGroup>
 				</RadioGroup>
-			) : (
-				<p className="mt-4 text-gray-500">
-					This user is not a member of any groups.
-				</p>
-			)}
+			);
+		}
+
+		// When no groups exist at all, renderAdd already explains the situation.
+		if (data?.length === 0) {
+			return null;
+		}
+
+		return (
+			<p className="mt-4 text-gray-500">
+				This user is not a member of any groups.
+			</p>
+		);
+	}
+
+	return (
+		<div className="mb-4">
+			<InputLabel>Groups</InputLabel>
+			{renderAdd()}
+			{renderMembership()}
 		</div>
 	);
 }
diff --git a/apps/web/src/users/components/__tests__/UserDetail.test.tsx b/apps/web/src/users/components/__tests__/UserDetail.test.tsx
index 8358c7c2f..1852d1acf 100644
--- a/apps/web/src/users/components/__tests__/UserDetail.test.tsx
+++ b/apps/web/src/users/components/__tests__/UserDetail.test.tsx
@@ -11,7 +11,7 @@ import { createFakeAccount, mockApiGetAccount } from "@tests/fake/account";
 import { administratorRoles } from "@tests/fake/administrator";
 import { createFakeGroup } from "@tests/fake/groups";
 import { createFakeUser } from "@tests/fake/user";
-import { renderWithProviders } from "@tests/setup";
+import { renderWithProviders, renderWithRouter } from "@tests/setup";
 import UserDetail from "@users/components/UserDetail";
 import type { User } from "@users/types";
 import nock from "nock";
@@ -172,18 +172,21 @@ describe("<UserDetail />", () => {
 			expect(await screen.findByLabelText("Group 1")).toBeInTheDocument();
 			expect(screen.getByLabelText("Group 3")).toBeInTheDocument();
 		});
-		it("should show an empty message when the user has no groups", async () => {
+		it("should point to group creation when no groups exist", async () => {
 			const user = createFakeUser({ groups: [], primary_group: null });
 
 			mockApiListGroups([]);
 
 			const scope = mockApiGetUser(user.id, user);
 
-			renderWithProviders(<UserDetail userId={user.id} />);
+			await renderWithRouter(<UserDetail userId={user.id} />);
 
 			expect(await screen.findByText("Groups")).toBeInTheDocument();
 			expect(
-				await screen.findByText("This user is not a member of any groups."),
+				await screen.findByText(/No groups have been created yet/),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole("link", { name: "Manage groups" }),
 			).toBeInTheDocument();
 			expect(screen.queryByLabelText("group3")).not.toBeInTheDocument();
 			expect(
diff --git a/apps/web/src/users/components/__tests__/UserGroups.test.tsx b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
index 08dce322a..25a0e2ec4 100644
--- a/apps/web/src/users/components/__tests__/UserGroups.test.tsx
+++ b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
@@ -5,7 +5,7 @@ import { mockApiListGroups } from "@tests/api/groups";
 import { mockApiEditUser, userServerFnMocks } from "@tests/api/users";
 import { createFakeGroup } from "@tests/fake/groups";
 import { createFakeUser } from "@tests/fake/user";
-import { renderWithProviders } from "@tests/setup";
+import { renderWithProviders, renderWithRouter } from "@tests/setup";
 import { beforeEach, describe, expect, it } from "vitest";
 import UserGroups from "../UserGroups";
 
@@ -55,6 +55,45 @@ describe("<UserGroups />", () => {
 		).toBeInTheDocument();
 	});
 
+	it("hides the combobox when the user is in every group", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		expect(
+			await screen.findByText("This user is a member of every group."),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole("button", { name: /add group/i }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: "foo" })).toBeInTheDocument();
+	});
+
+	it("points to group creation when no groups exist", async () => {
+		mockApiListGroups([]);
+
+		await renderWithRouter(
+			<UserGroups userId={userId} memberGroups={[]} primaryGroup={null} />,
+		);
+
+		expect(
+			await screen.findByText(/No groups have been created yet/),
+		).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Manage groups" })).toHaveAttribute(
+			"href",
+			"/administration/groups",
+		);
+		expect(
+			screen.queryByText("This user is not a member of any groups."),
+		).not.toBeInTheDocument();
+	});
+
 	it("adds a group through the combobox", async () => {
 		mockApiListGroups(allGroups);
 		mockApiEditUser(userId, 200, {});

From ed1e3e3421be9bd5bb10e2ffbf5a24a78833c087 Mon Sep 17 00:00:00 2001
From: Ian Boyes <igboyes@gmail.com>
Date: Thu, 2 Jul 2026 13:58:30 -0700
Subject: [PATCH 3/3] fix: label the group section without an orphan label
 element

Render the "Groups" heading as a span instead of a label with no
associated control. Each control keeps its own accessible name (the
combobox "Add group", the radio group "Primary group").

Add tests for the default "No primary group" selection and for clearing
the primary group.
---
 apps/web/src/users/components/UserGroups.tsx  |  3 +-
 .../components/__tests__/UserGroups.test.tsx  | 41 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/users/components/UserGroups.tsx b/apps/web/src/users/components/UserGroups.tsx
index 3716173a2..f8285f895 100644
--- a/apps/web/src/users/components/UserGroups.tsx
+++ b/apps/web/src/users/components/UserGroups.tsx
@@ -4,7 +4,6 @@ import BoxGroup from "@base/BoxGroup";
 import BoxGroupSection from "@base/BoxGroupSection";
 import ComboBox from "@base/ComboBox";
 import Icon from "@base/Icon";
-import InputLabel from "@base/InputLabel";
 import Link from "@base/Link";
 import LoadingPlaceholder from "@base/LoadingPlaceholder";
 import QueryError from "@base/QueryError";
@@ -182,7 +181,7 @@ export default function UserGroups({
 
 	return (
 		<div className="mb-4">
-			<InputLabel>Groups</InputLabel>
+			<span className="font-medium mb-2 inline-block">Groups</span>
 			{renderAdd()}
 			{renderMembership()}
 		</div>
diff --git a/apps/web/src/users/components/__tests__/UserGroups.test.tsx b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
index 25a0e2ec4..c3c7a4a5e 100644
--- a/apps/web/src/users/components/__tests__/UserGroups.test.tsx
+++ b/apps/web/src/users/components/__tests__/UserGroups.test.tsx
@@ -118,6 +118,24 @@ describe("<UserGroups />", () => {
 		);
 	});
 
+	it("selects 'No primary group' by default when there is no primary group", async () => {
+		mockApiListGroups(allGroups);
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={null}
+			/>,
+		);
+
+		expect(
+			await screen.findByRole("radio", { name: "No primary group" }),
+		).toBeChecked();
+		expect(screen.getByRole("radio", { name: "foo" })).not.toBeChecked();
+		expect(screen.getByRole("radio", { name: "bar" })).not.toBeChecked();
+	});
+
 	it("sets the primary group when a radio is selected", async () => {
 		mockApiListGroups(allGroups);
 		mockApiEditUser(userId, 200, {});
@@ -139,6 +157,29 @@ describe("<UserGroups />", () => {
 		);
 	});
 
+	it("clears the primary group when 'No primary group' is selected", async () => {
+		mockApiListGroups(allGroups);
+		mockApiEditUser(userId, 200, {});
+
+		renderWithProviders(
+			<UserGroups
+				userId={userId}
+				memberGroups={[member, other]}
+				primaryGroup={member}
+			/>,
+		);
+
+		await userEvent.click(
+			await screen.findByRole("radio", { name: "No primary group" }),
+		);
+
+		await waitFor(() =>
+			expect(userServerFnMocks.updateUser).toHaveBeenCalledWith({
+				data: { userId, primary_group: null },
+			}),
+		);
+	});
+
 	it("removes a group and clears the primary when the primary is removed", async () => {
 		mockApiListGroups(allGroups);
 		mockApiEditUser(userId, 200, {});