feat(admin): streamline group management

apps/web/src/components/user-group-select.test.tsx

@@ -1,21 +1,53 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from "@testing-library/react";
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
 import { UserGroupSelect } from "./user-group-select";
 
+const groups = [{ id: "group-everyone", name: "everyone" }, { id: "group-ops", name: "Ops" }];
+
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() { this.open = true; };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+    this.dispatchEvent(new Event("close"));
+  };
+});
+
 describe("UserGroupSelect", () => {
-  it("renders the effective group and preserves the active search", () => {
+  it("renders the effective group and preserves the return path", () => {
     const markup = renderToStaticMarkup(<UserGroupSelect
       action={async () => undefined}
       effectiveGroupId="group-ops"
-      groups={[{ id: "group-everyone", name: "everyone" }, { id: "group-ops", name: "Ops" }]}
-      search="alex smith"
+      groups={groups}
+      returnTo="/admin/users?q=alex%20smith"
       userId="user-one"
       userLabel="Alex"
     />);
 
     expect(markup).toContain('aria-label="Group for Alex"');
     expect(markup).toContain('<option value="group-ops" selected="">Ops</option>');
-    expect(markup).toContain('<input type="hidden" name="search" value="alex smith"/>');
-    expect(markup).toContain("Apply group");
+    expect(markup).toContain('<input type="hidden" name="returnTo" value="/admin/users?q=alex%20smith"/>');
+    expect(markup).toContain("Changing this selection opens a confirmation dialog.");
+    expect(markup).toContain("Confirm move");
+  });
+
+  it("requires confirmation and restores the effective group when cancelled", () => {
+    render(<UserGroupSelect action={async () => undefined} effectiveGroupId="group-ops" groups={groups} returnTo="/admin/users" userId="user-one" userLabel="Alex" />);
+    const select = screen.getByRole("combobox", { name: "Group for Alex" }) as HTMLSelectElement;
+
+    fireEvent.change(select, { target: { value: "group-everyone" } });
+    const dialog = screen.getByRole("dialog") as HTMLDialogElement;
+    expect(dialog.open).toBe(true);
+    expect(select.value).toBe("group-everyone");
+    expect(select.disabled).toBe(true);
+    expect(screen.getByText(/from/).textContent).toContain("Ops");
+    expect(screen.getByText(/from/).textContent).toContain("everyone");
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(dialog.open).toBe(false);
+    expect(select.value).toBe("group-ops");
+    expect(select.disabled).toBe(false);
   });
 });