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

package/src/plugins/form-builder/client/components/pages/submissions-page.internal.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
-	CanAccess,
 	useNotify,
+	PermissionAccess,
 	usePluginOverrides,
-	useBasePath,
-	useStack,
+	usePluginSiteNavigation,
 	useTranslate,
+	useIdentity,
 } from "@btst/stack/context";
 import { Button } from "@workspace/ui/components/button";
 import {
@@ -31,21 +31,23 @@ import {
 import {
 	Dialog,
 	DialogContent,
+	DialogDescription,
 	DialogHeader,
 	DialogTitle,
 } from "@workspace/ui/components/dialog";
 import { ArrowLeft, Trash2, Eye } from "lucide-react";
 
 import {
-	useSuspenseFormById,
 	useSuspenseSubmissions,
+	useSubmission,
 	useDeleteSubmission,
 } from "../../hooks";
 import type { FormBuilderPluginOverrides } from "../../overrides";
-import type { SerializedFormSubmissionWithData } from "../../../types";
 import { PageWrapper } from "../shared/page-wrapper";
 import { EmptyState } from "../shared/empty-state";
 import { Pagination } from "../shared/pagination";
+import { formBuilderPermissions } from "../../../permissions";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 export interface SubmissionsPageProps {
 	formId: string;
@@ -54,21 +56,32 @@ export interface SubmissionsPageProps {
 export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 	const t = useTranslate();
 	const notify = useNotify();
-	const { localization } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
-	const { router } = useStack();
-	const basePath = useBasePath();
+	const { localization } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
+	const { identity } = useIdentity();
+	const { Link: LinkComponent, resolve } = usePluginSiteNavigation(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
-	const { form } = useSuspenseFormById(formId);
-	const { submissions, total, hasMore, isLoadingMore, loadMore } =
+	const { form, submissions, total, hasMore, isLoadingMore, loadMore } =
 		useSuspenseSubmissions(formId);
 	const deleteMutation = useDeleteSubmission(formId);
 
 	const [deleteId, setDeleteId] = useState<string | null>(null);
-	const [viewSubmission, setViewSubmission] =
-		useState<SerializedFormSubmissionWithData | null>(null);
+	const [viewSubmissionId, setViewSubmissionId] = useState<string | null>(null);
+	const {
+		submission: viewSubmission,
+		isLoading: isViewLoading,
+		error: viewError,
+	} = useSubmission(formId, viewSubmissionId ?? undefined);
 
-	const LinkComponent = router?.Link ?? "a";
+	// A detail response was authorized for the identity that opened it. Close
+	// the dialog immediately when that identity snapshot changes; the hook also
+	// partitions its sensitive cache by identity before any subsequent fetch.
+	useEffect(() => {
+		setViewSubmissionId(null);
+	}, [identity]);
 
 	const handleDelete = async () => {
 		if (!deleteId) return;
@@ -92,25 +105,12 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 		setDeleteId(null);
 	};
 
-	const formatSubmissionData = (data: Record<string, unknown>) => {
-		const entries = Object.entries(data).slice(0, 3);
-		return entries
-			.map(([key, value]) => {
-				const strValue =
-					typeof value === "string" ? value : JSON.stringify(value);
-				const truncated =
-					strValue.length > 30 ? `${strValue.slice(0, 30)}...` : strValue;
-				return `${key}: ${truncated}`;
-			})
-			.join(", ");
-	};
-
 	return (
 		<PageWrapper testId="submissions-page">
 			<div className="w-full max-w-5xl space-y-6">
 				<div className="flex items-center gap-4">
 					<Button variant="ghost" size="icon" asChild>
-						<LinkComponent href={`${basePath}/forms`}>
+						<LinkComponent href={resolve("forms").href}>
 							<ArrowLeft className="h-4 w-4" />
 						</LinkComponent>
 					</Button>
@@ -151,10 +151,6 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 											{localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ID ??
 												t("formBuilder.submissions.columnId", "ID")}
 										</TableHead>
-										<TableHead>
-											{localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_DATA ??
-												t("formBuilder.submissions.columnData", "Data")}
-										</TableHead>
 										<TableHead>
 											{localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT ??
 												t(
@@ -162,13 +158,6 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 													"Submitted",
 												)}
 										</TableHead>
-										<TableHead>
-											{localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_IP_ADDRESS ??
-												t(
-													"formBuilder.submissions.columnIpAddress",
-													"IP Address",
-												)}
-										</TableHead>
 										<TableHead className="w-24">
 											{localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS ??
 												t("formBuilder.submissions.columnActions", "Actions")}
@@ -181,32 +170,54 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 											<TableCell className="font-mono text-xs">
 												{sub.id.slice(0, 8)}...
 											</TableCell>
-											<TableCell className="max-w-xs truncate text-sm text-muted-foreground">
-												{formatSubmissionData(sub.parsedData ?? {})}
-											</TableCell>
 											<TableCell className="text-muted-foreground">
 												{new Date(sub.submittedAt).toLocaleString()}
 											</TableCell>
-											<TableCell className="text-muted-foreground font-mono text-xs">
-												{sub.ipAddress || "-"}
-											</TableCell>
 											<TableCell>
 												<div className="flex gap-1">
-													<Button
-														variant="ghost"
-														size="icon"
-														onClick={() => setViewSubmission(sub)}
+													<PermissionAccess
+														permission={formBuilderPermissions.submission.read({
+															scope: "record",
+															formId,
+															submissionId: sub.id,
+															exists: true,
+															...(form?.createdBy
+																? { ownerId: form.createdBy }
+																: {}),
+															...(sub.submittedBy
+																? { submittedBy: sub.submittedBy }
+																: {}),
+														})}
 													>
-														<Eye className="h-4 w-4" />
-														<span className="sr-only">
-															{localization?.FORM_BUILDER_SUBMISSIONS_ACTION_VIEW ??
-																t("formBuilder.submissions.actionView", "View")}
-														</span>
-													</Button>
-													<CanAccess
-														resource="form-builder:submission"
-														action="delete"
-														params={{ formId, id: sub.id }}
+														<Button
+															variant="ghost"
+															size="icon"
+															onClick={() => setViewSubmissionId(sub.id)}
+														>
+															<Eye className="h-4 w-4" />
+															<span className="sr-only">
+																{localization?.FORM_BUILDER_SUBMISSIONS_ACTION_VIEW ??
+																	t(
+																		"formBuilder.submissions.actionView",
+																		"View",
+																	)}
+															</span>
+														</Button>
+													</PermissionAccess>
+													<PermissionAccess
+														permission={formBuilderPermissions.submission.delete(
+															{
+																formId,
+																submissionId: sub.id,
+																exists: true,
+																...(form?.createdBy
+																	? { ownerId: form.createdBy }
+																	: {}),
+																...(sub.submittedBy
+																	? { submittedBy: sub.submittedBy }
+																	: {}),
+															},
+														)}
 													>
 														<Button
 															variant="ghost"
@@ -223,7 +234,7 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 																	)}
 															</span>
 														</Button>
-													</CanAccess>
+													</PermissionAccess>
 												</div>
 											</TableCell>
 										</TableRow>
@@ -259,8 +270,10 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 
 			{/* View submission dialog */}
 			<Dialog
-				open={!!viewSubmission}
-				onOpenChange={() => setViewSubmission(null)}
+				open={!!viewSubmissionId}
+				onOpenChange={(open) => {
+					if (!open) setViewSubmissionId(null);
+				}}
 			>
 				<DialogContent className="max-w-2xl max-h-[80vh] overflow-auto">
 					<DialogHeader>
@@ -268,8 +281,29 @@ export function SubmissionsPage({ formId }: SubmissionsPageProps) {
 							{localization?.FORM_BUILDER_SUBMISSIONS_DETAILS_TITLE ??
 								t("formBuilder.submissions.detailsTitle", "Submission Details")}
 						</DialogTitle>
+						<DialogDescription className="sr-only">
+							{t(
+								"formBuilder.submissions.detailsDescription",
+								"Submitted form data and request metadata.",
+							)}
+						</DialogDescription>
 					</DialogHeader>
-					{viewSubmission && (
+					{isViewLoading && (
+						<p className="text-sm text-muted-foreground">
+							{localization?.FORM_BUILDER_STATUS_LOADING ??
+								t("formBuilder.common.statusLoading", "Loading...")}
+						</p>
+					)}
+					{viewError && (
+						<p role="alert" className="text-sm text-destructive">
+							{localization?.FORM_BUILDER_TOAST_ERROR ??
+								t(
+									"formBuilder.toasts.error",
+									"An error occurred. Please try again.",
+								)}
+						</p>
+					)}
+					{!isViewLoading && !viewError && viewSubmission && (
 						<div className="space-y-4">
 							<div className="grid grid-cols-2 gap-4 text-sm">
 								<div>

package/src/plugins/form-builder/client/components/pages/submissions-page.tsx

@@ -3,10 +3,16 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { FormBuilderPluginOverrides } from "../../overrides";
-import { ComposedRoute } from "@btst/stack/client/components";
+import {
+	ComposedRoute,
+	PermissionRouteAccess,
+} from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { SubmissionsSkeleton } from "../loading/submissions-skeleton";
 import { NotFoundPage } from "./404-page";
+import { formBuilderPermissions } from "../../../permissions";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
+import { useSuspenseSubmissions } from "../../hooks";
 
 const SubmissionsPage = lazy(() =>
 	import("./submissions-page.internal").then((m) => ({
@@ -19,23 +25,19 @@ export interface SubmissionsPageProps {
 }
 
 export function SubmissionsPageComponent({ formId }: SubmissionsPageProps) {
-	const { onRouteError } =
-		usePluginOverrides<FormBuilderPluginOverrides>("form-builder");
+	const { onRouteError } = usePluginOverrides<FormBuilderPluginOverrides>(
+		FORM_BUILDER_PLUGIN_ID,
+	);
 
 	const path = `/forms/${formId}/submissions`;
 
 	return (
 		<ComposedRoute
 			path={path}
-			PageComponent={SubmissionsPage}
+			PageComponent={AuthorizedSubmissionsPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={SubmissionsSkeleton}
 			NotFoundComponent={NotFoundPage}
-			permission={{
-				resource: "form-builder:submission",
-				action: "read",
-				params: { formId },
-			}}
 			props={{ formId }}
 			onError={(error) => {
 				if (onRouteError) {
@@ -49,3 +51,21 @@ export function SubmissionsPageComponent({ formId }: SubmissionsPageProps) {
 		/>
 	);
 }
+
+function AuthorizedSubmissionsPage({ formId }: SubmissionsPageProps) {
+	const { form } = useSuspenseSubmissions(formId);
+	if (!form) return <NotFoundPage />;
+	return (
+		<PermissionRouteAccess
+			permission={formBuilderPermissions.submission.read({
+				scope: "collection",
+				formId,
+				formExists: form !== null,
+				...(form?.createdBy ? { ownerId: form.createdBy } : {}),
+			})}
+			LoadingComponent={SubmissionsSkeleton}
+		>
+			<SubmissionsPage formId={formId} />
+		</PermissionRouteAccess>
+	);
+}

package/src/plugins/form-builder/client/components/shared/page-wrapper.tsx

@@ -3,6 +3,7 @@
 import { usePluginOverrides } from "@btst/stack/context";
 import { PageWrapper as SharedPageWrapper } from "@workspace/ui/components/page-wrapper";
 import type { FormBuilderPluginOverrides } from "../../overrides";
+import { FORM_BUILDER_PLUGIN_ID } from "../../constants";
 
 export function PageWrapper({
 	children,
@@ -16,7 +17,7 @@ export function PageWrapper({
 	const { showAttribution } = usePluginOverrides<
 		FormBuilderPluginOverrides,
 		Partial<FormBuilderPluginOverrides>
-	>("form-builder", {
+	>(FORM_BUILDER_PLUGIN_ID, {
 		showAttribution: true,
 	});
 

package/src/plugins/form-builder/client/constants.ts

@@ -0,0 +1,2 @@
+/** Canonical programmatic ID for Form Builder client registration and overrides. */
+export const FORM_BUILDER_PLUGIN_ID = "formBuilder" as const;

package/src/plugins/form-builder/client/hooks/form-builder-hooks.tsx

@@ -4,11 +4,14 @@ import type {
 	ResourceFormConfig,
 	ResourceFormResult,
 } from "@btst/stack/plugins/client/hooks";
+import { useIdentity } from "@btst/stack/context";
 import type {
 	SerializedForm,
 	PaginatedForms,
 	SerializedFormSubmissionWithData,
+	SerializedFormSubmissionSummary,
 	PaginatedFormSubmissions,
+	SubmissionListFormContext,
 } from "../../types";
 import { formBuilder } from "./form-builder-resource";
 
@@ -149,6 +152,21 @@ export function useSuspenseFormById(id: string): {
 	};
 }
 
+/**
+ * Fetches editor data through the same update permission as the edit route.
+ */
+export function useSuspenseFormForUpdate(id: string): {
+	form: SerializedForm | null;
+	refetch: () => Promise<unknown>;
+} {
+	const { data, refetch } = formBuilder.forms.forUpdate.useSuspense([id]);
+
+	return {
+		form: data ?? null,
+		refetch,
+	};
+}
+
 /**
  * Hook for fetching a form by slug (public)
  */
@@ -252,7 +270,8 @@ export interface UseSubmissionsOptions {
 }
 
 export interface UseSubmissionsResult {
-	submissions: SerializedFormSubmissionWithData[];
+	form: SubmissionListFormContext | null;
+	submissions: SerializedFormSubmissionSummary[];
 	total: number;
 	isLoading: boolean;
 	error: Error | null;
@@ -283,11 +302,14 @@ export function useSubmissions(
 		enabled: enabled && !!formId,
 	});
 
-	const { items, total } = flattenPages<SerializedFormSubmissionWithData>(
+	const { items, total } = flattenPages<SerializedFormSubmissionSummary>(
 		data?.pages as PaginatedFormSubmissions[] | undefined,
 	);
+	const form =
+		(data?.pages as PaginatedFormSubmissions[] | undefined)?.[0]?.form ?? null;
 
 	return {
+		form,
 		submissions: items,
 		total,
 		isLoading,
@@ -306,7 +328,8 @@ export function useSuspenseSubmissions(
 	formId: string,
 	options: UseSubmissionsOptions = {},
 ): {
-	submissions: SerializedFormSubmissionWithData[];
+	form: SubmissionListFormContext | null;
+	submissions: SerializedFormSubmissionSummary[];
 	total: number;
 	loadMore: () => Promise<unknown>;
 	hasMore: boolean;
@@ -318,11 +341,13 @@ export function useSuspenseSubmissions(
 	const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
 		formBuilder.formSubmissions.list.useSuspenseInfinite([{ formId, limit }]);
 
-	const { items, total } = flattenPages<SerializedFormSubmissionWithData>(
+	const { items, total } = flattenPages<SerializedFormSubmissionSummary>(
 		data.pages as PaginatedFormSubmissions[],
 	);
+	const form = (data.pages as PaginatedFormSubmissions[])[0]?.form ?? null;
 
 	return {
+		form,
 		submissions: items,
 		total,
 		loadMore: fetchNextPage,
@@ -332,6 +357,45 @@ export function useSuspenseSubmissions(
 	};
 }
 
+export interface UseSubmissionOptions {
+	/** Whether to enable the query (default: true). */
+	enabled?: boolean;
+}
+
+/**
+ * Fetch one submission through its record-scoped authorization rule.
+ */
+export function useSubmission(
+	formId: string,
+	submissionId?: string,
+	options: UseSubmissionOptions = {},
+): {
+	submission: SerializedFormSubmissionWithData | null;
+	isLoading: boolean;
+	error: Error | null;
+	refetch: () => void;
+} {
+	const { identity, isPending: isIdentityPending } = useIdentity();
+	const { data, isLoading, error, refetch } =
+		formBuilder.formSubmissions.detail.use(
+			[formId, submissionId ?? "", identity],
+			{
+				enabled:
+					(options.enabled ?? true) &&
+					!isIdentityPending &&
+					!!formId &&
+					!!submissionId,
+			},
+		);
+
+	return {
+		submission: data ?? null,
+		isLoading,
+		error,
+		refetch,
+	};
+}
+
 /**
  * Hook for deleting a submission
  */

package/src/plugins/form-builder/client/hooks/form-builder-resource.ts

@@ -2,6 +2,7 @@
 
 import { createResource } from "@btst/stack/plugins/client/hooks";
 import { formBuilderResources } from "../../query-keys";
+import { FORM_BUILDER_PLUGIN_ID } from "../constants";
 
 /**
  * Factory-generated Form Builder resource hooks. Internal — the public hook
@@ -9,6 +10,6 @@ import { formBuilderResources } from "../../query-keys";
  * these.
  */
 export const formBuilder = createResource({
-	plugin: "form-builder",
+	plugin: FORM_BUILDER_PLUGIN_ID,
 	resources: formBuilderResources,
 });

package/src/plugins/form-builder/client/hooks/index.tsx

@@ -1 +1,2 @@
 export * from "./form-builder-hooks";
+export type { SerializedFormSubmissionSummary } from "../../types";

package/src/plugins/form-builder/client/overrides.ts

@@ -54,18 +54,13 @@ export interface FormBuilderPluginOverrides {
 	/**
 	 * Localization object for the Form Builder plugin
 	 */
-	localization?: FormBuilderLocalization;
+	localization?: Partial<FormBuilderLocalization>;
 
 	/**
 	 * Whether to show the attribution
 	 */
 	showAttribution?: boolean;
 
-	/**
-	 * Optional headers to pass with API requests (e.g., for SSR auth)
-	 */
-	headers?: HeadersInit;
-
 	// Lifecycle Hooks (optional)
 
 	/**