@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

package/src/plugins/form-builder/__tests__/client-sweep.test.tsx

@@ -8,16 +8,26 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 // self-reference.
 import {
 	StackProvider,
-	type StackAuthProvider,
+	type StackClientAuth,
 	type StackI18nProvider,
 } from "@btst/stack/context";
+import { defineAuthorization } from "@btst/stack/authorization";
+import { createClientAuth } from "@btst/stack/authorization/client";
+import { z } from "zod";
 import { FormListPage } from "../client/components/pages/form-list-page.internal";
 import { SubmissionsPage } from "../client/components/pages/submissions-page.internal";
 import { FormBuilderPage } from "../client/components/pages/form-builder-page.internal";
+import { FormListPageComponent } from "../client/components/pages/form-list-page";
+import { SubmissionsPageComponent } from "../client/components/pages/submissions-page";
+import { FormBuilderPageComponent } from "../client/components/pages/form-builder-page";
 import type {
 	SerializedForm,
+	SerializedFormSubmissionSummary,
 	SerializedFormSubmissionWithData,
 } from "../types";
+import { formBuilderPermissions } from "../permissions";
+import { createTestClientStack } from "../../../__tests__/client-stack-test-utils";
+import { formBuilderClientPlugin } from "../client/plugin";
 
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -34,7 +44,9 @@ const hooks = vi.hoisted(() => ({
 	useSuspenseForms: vi.fn(),
 	useDeleteForm: vi.fn(),
 	useSuspenseFormById: vi.fn(),
+	useSuspenseFormForUpdate: vi.fn(),
 	useSuspenseSubmissions: vi.fn(),
+	useSubmission: vi.fn(),
 	useDeleteSubmission: vi.fn(),
 	useFormBuilderForm: vi.fn(),
 }));
@@ -61,6 +73,12 @@ const form: SerializedForm = {
 	updatedAt: new Date("2024-01-01").toISOString(),
 } as unknown as SerializedForm;
 
+const submissionSummary: SerializedFormSubmissionSummary = {
+	id: "sub-11111111",
+	formId: "f1",
+	submittedAt: new Date("2024-01-02").toISOString(),
+};
+
 const submission: SerializedFormSubmissionWithData = {
 	id: "sub-11111111",
 	formId: "f1",
@@ -105,14 +123,25 @@ beforeEach(() => {
 		form,
 		refetch: vi.fn(),
 	});
+	hooks.useSuspenseFormForUpdate.mockReturnValue({
+		form,
+		refetch: vi.fn(),
+	});
 	hooks.useSuspenseSubmissions.mockReturnValue({
-		submissions: [submission],
+		form,
+		submissions: [submissionSummary],
 		total: 1,
 		loadMore: vi.fn(),
 		hasMore: false,
 		isLoadingMore: false,
 		refetch: vi.fn(),
 	});
+	hooks.useSubmission.mockReturnValue({
+		submission,
+		isLoading: false,
+		error: null,
+		refetch: vi.fn(),
+	});
 	hooks.useDeleteSubmission.mockReturnValue({
 		mutateAsync: vi.fn().mockResolvedValue({ success: true }),
 		isPending: false,
@@ -147,6 +176,10 @@ async function render(ui: React.ReactElement) {
 	});
 }
 
+function createFormBuilderStack() {
+	return createTestClientStack({ formBuilder: formBuilderClientPlugin() });
+}
+
 function texts(): string {
 	return document.body.textContent ?? "";
 }
@@ -176,16 +209,173 @@ function typeInto(input: HTMLInputElement, value: string) {
 	input.dispatchEvent(new Event("input", { bubbles: true }));
 }
 
+const deniedRouteAuthorization = defineAuthorization({
+	identity: z.object({ id: z.string(), role: z.literal("user") }),
+	permissions: [formBuilderPermissions] as const,
+	rules: ({ forms }) => [
+		forms.form.read.when(() => false),
+		forms.form.create.when(() => false),
+		forms.form.update.when(() => false),
+		forms.submission.read.when(() => false),
+	],
+});
+
+const deniedRouteAuth = createClientAuth({
+	authorization: deniedRouteAuthorization,
+	getIdentity: () => ({ id: "viewer-1", role: "user" as const }),
+});
+
+describe("maintained route authorization gates", () => {
+	it.each([
+		{
+			label: "form list",
+			page: <FormListPageComponent />,
+			forbiddenSelector: '[data-testid="form-builder-list-search"]',
+		},
+		{
+			label: "form create",
+			page: <FormBuilderPageComponent />,
+			forbiddenSelector: '[data-testid="form-builder-page"]',
+		},
+		{
+			label: "form edit",
+			page: <FormBuilderPageComponent id="f1" />,
+			forbiddenSelector: '[data-testid="form-builder-page"]',
+		},
+		{
+			label: "submission list",
+			page: <SubmissionsPageComponent formId="f1" />,
+			forbiddenSelector: "table",
+		},
+	] as const)(
+		"fails closed at the $label route boundary",
+		async ({ page, forbiddenSelector }) => {
+			vi.spyOn(console, "error").mockImplementation(() => {});
+			await render(
+				<StackProvider
+					stack={createFormBuilderStack()}
+					router={createMockRouter()}
+					overrides={{ formBuilder: formBuilderOverrides }}
+					auth={deniedRouteAuth}
+					initialIdentity={{ id: "viewer-1", role: "user" }}
+				>
+					{page}
+				</StackProvider>,
+			);
+			await act(async () => {
+				await Promise.resolve();
+			});
+
+			expect(container.querySelector(forbiddenSelector)).toBeNull();
+			expect(texts()).toContain("Something went wrong");
+		},
+	);
+
+	it("renders Not Found for a missing edit record without consulting create permission", async () => {
+		const createRule = vi.fn(() => true);
+		const updateRule = vi.fn(() => false);
+		const authorization = defineAuthorization({
+			identity: z.object({ id: z.string(), role: z.literal("user") }),
+			permissions: [formBuilderPermissions] as const,
+			rules: ({ forms }) => [
+				forms.form.create.when(createRule),
+				forms.form.update.when(updateRule),
+			],
+		});
+		const auth = createClientAuth({
+			authorization,
+			getIdentity: () => ({ id: "viewer-1", role: "user" as const }),
+		});
+		hooks.useSuspenseFormForUpdate.mockReturnValue({
+			form: null,
+			refetch: vi.fn(),
+		});
+
+		await render(
+			<StackProvider
+				stack={createFormBuilderStack()}
+				router={createMockRouter()}
+				overrides={{ formBuilder: formBuilderOverrides }}
+				auth={auth}
+				initialIdentity={{ id: "viewer-1", role: "user" }}
+			>
+				<FormBuilderPageComponent id="missing" />
+			</StackProvider>,
+		);
+		await act(async () => {
+			await Promise.resolve();
+		});
+
+		expect(texts()).toContain("Page not found");
+		expect(
+			container.querySelector('[data-testid="form-builder-page"]'),
+		).toBeNull();
+		expect(
+			container.querySelector('[data-testid="form-builder-canvas"]'),
+		).toBeNull();
+		expect(createRule).not.toHaveBeenCalled();
+		expect(updateRule).not.toHaveBeenCalled();
+	});
+
+	it("loads edit and submission routes through their exact permissions without form.read", async () => {
+		const authorization = defineAuthorization({
+			identity: z.object({ id: z.string(), role: z.literal("user") }),
+			permissions: [formBuilderPermissions] as const,
+			rules: ({ forms }) => [
+				forms.form.read.when(() => false),
+				forms.form.create.when(() => false),
+				forms.form.update.when(() => true),
+				forms.submission.read.when(() => true),
+				forms.submission.delete.when(() => false),
+			],
+		});
+		const auth = createClientAuth({
+			authorization,
+			getIdentity: () => ({ id: "viewer-1", role: "user" as const }),
+		});
+
+		await render(
+			<StackProvider
+				stack={createFormBuilderStack()}
+				router={createMockRouter()}
+				overrides={{ formBuilder: formBuilderOverrides }}
+				auth={auth}
+				initialIdentity={{ id: "viewer-1", role: "user" }}
+			>
+				<FormBuilderPageComponent id="f1" />
+			</StackProvider>,
+		);
+		await act(async () => Promise.resolve());
+		expect(
+			container.querySelector("[data-testid='form-builder-canvas']"),
+		).toBeTruthy();
+
+		await render(
+			<StackProvider
+				stack={createFormBuilderStack()}
+				router={createMockRouter()}
+				overrides={{ formBuilder: formBuilderOverrides }}
+				auth={auth}
+				initialIdentity={{ id: "viewer-1", role: "user" }}
+			>
+				<SubmissionsPageComponent formId="f1" />
+			</StackProvider>,
+		);
+		await act(async () => Promise.resolve());
+		expect(container.querySelector("table")).toBeTruthy();
+		expect(hooks.useSuspenseFormForUpdate).toHaveBeenCalledWith("f1");
+		expect(hooks.useSuspenseSubmissions).toHaveBeenCalledWith("f1");
+		expect(hooks.useSuspenseFormById).not.toHaveBeenCalled();
+	});
+});
+
 describe("FormListPage New Form button (CanAccess)", () => {
-	function renderListPage(
-		auth?: StackAuthProvider,
-		router = createMockRouter(),
-	) {
+	function renderListPage(auth?: StackClientAuth, router = createMockRouter()) {
 		return render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={router}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 				auth={auth}
 			>
 				<FormListPage />
@@ -199,22 +389,39 @@ describe("FormListPage New Form button (CanAccess)", () => {
 		expect(texts()).toContain("New Form");
 		expect(texts()).toContain("Contact Form");
 	});
+	it("uses exact typed descriptors for form and submission controls", async () => {
+		const authorization = defineAuthorization({
+			identity: z.object({ id: z.string(), role: z.literal("user") }),
+			permissions: [formBuilderPermissions] as const,
+			rules: ({ forms }) => [
+				forms.form.read.when(() => true),
+				forms.form.create.when(() => false),
+				forms.form.update.when(() => false),
+				forms.form.delete.when(() => false),
+				forms.submission.read.when(() => true),
+				forms.submission.delete.when(() => false),
+			],
+		});
+		const auth = createClientAuth({
+			authorization,
+			getIdentity: () => ({ id: "viewer-1", role: "user" as const }),
+		});
 
-	it("hides the New Form button when can() denies form-builder:form/create", async () => {
-		const can = vi.fn(
-			({ resource, action }: { resource: string; action: string }) =>
-				!(resource === "form-builder:form" && action === "create"),
+		await render(
+			<StackProvider
+				stack={createFormBuilderStack()}
+				router={createMockRouter()}
+				overrides={{ formBuilder: formBuilderOverrides }}
+				auth={auth}
+				initialIdentity={{ id: "viewer-1", role: "user" }}
+			>
+				<FormListPage />
+			</StackProvider>,
 		);
-		const auth: StackAuthProvider = {
-			getIdentity: () => ({ id: "user-1" }),
-			can,
-		};
 
-		await renderListPage(auth);
-
-		expect(texts()).not.toContain("New Form");
-		// The list itself still renders
 		expect(texts()).toContain("Contact Form");
+		expect(texts()).not.toContain("New Form");
+		expect(texts()).not.toContain("Edit");
 	});
 });
 
@@ -224,9 +431,9 @@ describe("FormListPage search (useListState)", () => {
 
 		await render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={router}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 			>
 				<FormListPage />
 			</StackProvider>,
@@ -248,9 +455,9 @@ describe("FormListPage search (useListState)", () => {
 
 		await render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={router}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 			>
 				<FormListPage />
 			</StackProvider>,
@@ -286,9 +493,9 @@ describe("FormListPage search (useListState)", () => {
 
 		await render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={router}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 			>
 				<FormListPage />
 			</StackProvider>,
@@ -323,7 +530,7 @@ describe("FormListPage search (useListState)", () => {
 
 describe("SubmissionsPage row actions (CanAccess + useNotify)", () => {
 	function renderSubmissionsPage(
-		auth?: StackAuthProvider,
+		auth?: StackClientAuth,
 		notify?: {
 			success: ReturnType<typeof vi.fn>;
 			error: ReturnType<typeof vi.fn>;
@@ -331,10 +538,10 @@ describe("SubmissionsPage row actions (CanAccess + useNotify)", () => {
 	) {
 		return render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={createMockRouter()}
 				notify={notify}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 				auth={auth}
 			>
 				<SubmissionsPage formId="f1" />
@@ -348,28 +555,117 @@ describe("SubmissionsPage row actions (CanAccess + useNotify)", () => {
 		const actionButtons = container.querySelectorAll("table tbody tr button");
 		expect(actionButtons).toHaveLength(2);
 	});
+	it("uses record read and delete descriptors for typed submission row gates", async () => {
+		const authorization = defineAuthorization({
+			identity: z.object({ id: z.string(), role: z.literal("user") }),
+			permissions: [formBuilderPermissions] as const,
+			rules: ({ forms }) => [
+				forms.submission.read.when(() => true),
+				forms.submission.delete.when(() => false),
+			],
+		});
+		const auth = createClientAuth({
+			authorization,
+			getIdentity: () => ({ id: "viewer-1", role: "user" as const }),
+		});
 
-	it("hides the delete button when can() denies form-builder:submission/delete", async () => {
-		const can = vi.fn(
-			({ resource, action }: { resource: string; action: string }) =>
-				!(resource === "form-builder:submission" && action === "delete"),
+		await render(
+			<StackProvider
+				stack={createFormBuilderStack()}
+				router={createMockRouter()}
+				overrides={{ formBuilder: formBuilderOverrides }}
+				auth={auth}
+				initialIdentity={{ id: "viewer-1", role: "user" }}
+			>
+				<SubmissionsPage formId="f1" />
+			</StackProvider>,
 		);
-		const auth: StackAuthProvider = {
-			getIdentity: () => ({ id: "user-1" }),
-			can,
-		};
-
-		await renderSubmissionsPage(auth);
 
 		const actionButtons = container.querySelectorAll("table tbody tr button");
 		expect(actionButtons).toHaveLength(1);
-		expect(can).toHaveBeenCalledWith(
-			expect.objectContaining({
-				resource: "form-builder:submission",
-				action: "delete",
-				params: { formId: "f1", id: submission.id },
-			}),
+	});
+
+	it("fetches sensitive submission contents only after the record View action", async () => {
+		await renderSubmissionsPage();
+
+		expect(texts()).not.toContain("Alice");
+		expect(hooks.useSubmission).toHaveBeenLastCalledWith("f1", undefined);
+
+		const viewButton = container.querySelector<HTMLButtonElement>(
+			"table tbody tr button",
+		);
+		expect(viewButton).toBeTruthy();
+		await act(async () => {
+			viewButton!.click();
+		});
+
+		expect(hooks.useSubmission).toHaveBeenLastCalledWith(
+			"f1",
+			submissionSummary.id,
+		);
+		expect(texts()).toContain("Alice");
+	});
+
+	it("closes an open submission detail when the provider identity changes", async () => {
+		const authorization = defineAuthorization({
+			identity: z.object({ id: z.string(), role: z.literal("user") }),
+			permissions: [formBuilderPermissions] as const,
+			rules: ({ forms }) => [
+				forms.submission.read.when(
+					({ identity, facts }) =>
+						facts.scope === "collection" || identity?.id === facts.submittedBy,
+				),
+			],
+		});
+		let currentIdentity = { id: "user-a", role: "user" as const };
+		const auth = createClientAuth({
+			authorization,
+			getIdentity: () => currentIdentity,
+		});
+		let refetchIdentity: () => Promise<void> = async () => {};
+		function Harness() {
+			refetchIdentity = auth.useIdentity().refetch;
+			return <SubmissionsPage formId="f1" />;
+		}
+		hooks.useSuspenseSubmissions.mockReturnValue({
+			form,
+			submissions: [{ ...submissionSummary, submittedBy: "user-a" }],
+			total: 1,
+			loadMore: vi.fn(),
+			hasMore: false,
+			isLoadingMore: false,
+			refetch: vi.fn(),
+		});
+
+		await render(
+			<StackProvider
+				stack={createFormBuilderStack()}
+				router={createMockRouter()}
+				overrides={{ formBuilder: formBuilderOverrides }}
+				auth={auth}
+				initialIdentity={currentIdentity}
+			>
+				<Harness />
+			</StackProvider>,
+		);
+		await act(async () => Promise.resolve());
+
+		const viewButton = container.querySelector<HTMLButtonElement>(
+			"table tbody tr button",
 		);
+		expect(viewButton).toBeTruthy();
+		await act(async () => {
+			viewButton!.click();
+		});
+		expect(texts()).toContain("Alice");
+
+		currentIdentity = { id: "user-b", role: "user" };
+		await act(async () => {
+			await refetchIdentity();
+		});
+
+		expect(texts()).not.toContain("Alice");
+		expect(hooks.useSubmission).toHaveBeenLastCalledWith("f1", undefined);
 	});
 
 	it("notifies success through the notify provider after deleting", async () => {
@@ -400,7 +696,7 @@ describe("SubmissionsPage row actions (CanAccess + useNotify)", () => {
 
 		expect(
 			hooks.useDeleteSubmission.mock.results[0]!.value.mutateAsync,
-		).toHaveBeenCalledWith(submission.id);
+		).toHaveBeenCalledWith(submissionSummary.id);
 		expect(notify.success).toHaveBeenCalledWith(
 			"Submission deleted successfully",
 		);
@@ -415,10 +711,10 @@ describe("FormBuilderPage editor (resource useForm)", () => {
 	}) {
 		return render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={createMockRouter()}
 				notify={notify}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 			>
 				<FormBuilderPage />
 			</StackProvider>,
@@ -502,9 +798,9 @@ describe("form-builder i18n precedence (useTranslate + overrides.localization)",
 	it("renders the English default without providers", async () => {
 		await render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={createMockRouter()}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 			>
 				<FormListPage />
 			</StackProvider>,
@@ -523,9 +819,9 @@ describe("form-builder i18n precedence (useTranslate + overrides.localization)",
 
 		await render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={createMockRouter()}
-				overrides={{ "form-builder": formBuilderOverrides }}
+				overrides={{ formBuilder: formBuilderOverrides }}
 				i18n={i18n}
 			>
 				<FormListPage />
@@ -542,10 +838,10 @@ describe("form-builder i18n precedence (useTranslate + overrides.localization)",
 
 		await render(
 			<StackProvider
-				basePath="/pages"
+				stack={createFormBuilderStack()}
 				router={createMockRouter()}
 				overrides={{
-					"form-builder": {
+					formBuilder: {
 						...formBuilderOverrides,
 						localization: { FORM_BUILDER_LIST_EMPTY: "Custom empty state" },
 					},