@btst/stack 2.12.2 → 3.0.0-rc.1

package/src/plugins/kanban/__tests__/client-sweep.test.tsx

@@ -0,0 +1,297 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+	StackProvider,
+	type StackAuthProvider,
+	type StackI18nProvider,
+} from "@btst/stack/context";
+import { BoardForm } from "../client/components/forms/board-form";
+import { ColumnForm } from "../client/components/forms/column-form";
+import { TaskForm } from "../client/components/forms/task-form";
+import { BoardPage } from "../client/components/pages/board-page.internal";
+import { BoardsListPage } from "../client/components/pages/boards-list-page.internal";
+import type {
+	SerializedBoard,
+	SerializedColumn,
+	SerializedTask,
+} from "../types";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+const hooks = vi.hoisted(() => ({
+	useSuspenseBoards: vi.fn(),
+	useSuspenseBoard: vi.fn(),
+	useBoardForm: vi.fn(),
+	useColumnForm: vi.fn(),
+	useTaskForm: vi.fn(),
+	useBoardMutations: vi.fn(),
+	useColumnMutations: vi.fn(),
+	useTaskMutations: vi.fn(),
+	useSearchUsers: vi.fn(),
+}));
+
+vi.mock("../client/hooks/kanban-hooks", () => hooks);
+
+vi.mock("@workspace/ui/components/minimal-tiptap", () => ({
+	MinimalTiptapEditor: () => <div data-testid="task-description-editor" />,
+}));
+
+vi.mock("@workspace/ui/components/search-select", () => ({
+	default: () => <div data-testid="assignee-select" />,
+}));
+
+const board: SerializedBoard = {
+	id: "board-1",
+	name: "Roadmap",
+	slug: "roadmap",
+	description: "Team roadmap",
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+};
+
+const column: SerializedColumn = {
+	id: "column-1",
+	boardId: board.id,
+	title: "To Do",
+	order: 0,
+	tasks: [],
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+};
+
+const task: SerializedTask = {
+	id: "task-1",
+	columnId: column.id,
+	title: "Ship it",
+	description: "",
+	priority: "MEDIUM",
+	order: 0,
+	isArchived: false,
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+};
+
+let container: HTMLDivElement;
+let root: Root;
+
+const formResult = {
+	action: "create",
+	record: null,
+	isLoadingRecord: false,
+	recordError: null,
+	defaultValues: undefined,
+	submit: vi.fn(),
+	isSubmitting: false,
+	error: null,
+	fieldErrors: {},
+	clearErrors: vi.fn(),
+};
+
+const kanbanOverrides = {
+	resolveUser: vi.fn(),
+	searchUsers: vi.fn().mockResolvedValue([]),
+};
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+
+	hooks.useSuspenseBoards.mockReturnValue({
+		data: [],
+		error: null,
+		isFetching: false,
+	});
+	hooks.useSuspenseBoard.mockReturnValue({
+		data: { ...board, columns: [] },
+		error: null,
+		isFetching: false,
+		refetch: vi.fn(),
+	});
+	hooks.useBoardForm.mockReturnValue({ ...formResult });
+	hooks.useColumnForm.mockReturnValue({ ...formResult });
+	hooks.useTaskForm.mockReturnValue({ ...formResult });
+	hooks.useBoardMutations.mockReturnValue({
+		deleteBoard: vi.fn(),
+		isDeleting: false,
+	});
+	hooks.useColumnMutations.mockReturnValue({
+		deleteColumn: vi.fn(),
+		reorderColumns: vi.fn(),
+	});
+	hooks.useTaskMutations.mockReturnValue({
+		deleteTask: vi.fn(),
+		moveTask: vi.fn().mockResolvedValue(task),
+		reorderTasks: vi.fn(),
+		isMoving: false,
+	});
+	hooks.useSearchUsers.mockReturnValue({ data: [] });
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+	document.body.innerHTML = "";
+	vi.clearAllMocks();
+});
+
+async function render(
+	ui: React.ReactElement,
+	options: {
+		auth?: StackAuthProvider;
+		i18n?: StackI18nProvider;
+		localization?: Record<string, string>;
+	} = {},
+) {
+	await act(async () => {
+		root.render(
+			<StackProvider
+				basePath="/pages"
+				auth={options.auth}
+				i18n={options.i18n}
+				overrides={{
+					kanban: {
+						...kanbanOverrides,
+						localization: options.localization,
+					},
+				}}
+			>
+				{ui}
+			</StackProvider>,
+		);
+	});
+}
+
+async function waitFor(check: () => boolean, timeout = 3000) {
+	const start = Date.now();
+	while (!check()) {
+		if (Date.now() - start > timeout) throw new Error("waitFor timed out");
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 10));
+		});
+	}
+}
+
+function texts(): string {
+	return document.body.textContent ?? "";
+}
+
+describe("Kanban permissions", () => {
+	it("shows create-board controls when auth is not configured", async () => {
+		await render(<BoardsListPage />);
+		expect(texts()).toContain("Create Board");
+	});
+
+	it("hides create-board controls when permission is denied", async () => {
+		const can = vi.fn(
+			({ resource, action }: { resource: string; action: string }) =>
+				!(resource === "kanban:board" && action === "create"),
+		);
+		const auth: StackAuthProvider = {
+			getIdentity: () => ({ id: "user-1" }),
+			can,
+		};
+
+		await render(<BoardsListPage />, { auth });
+		await waitFor(() => !texts().includes("Create Board"));
+
+		expect(texts()).toContain("No boards yet");
+		expect(can).toHaveBeenCalledWith(
+			expect.objectContaining({
+				resource: "kanban:board",
+				action: "create",
+			}),
+		);
+	});
+
+	it("hides an empty board actions menu when every action is denied", async () => {
+		const can = vi.fn(
+			(_request: { resource: string; action: string }) => false,
+		);
+		const auth: StackAuthProvider = {
+			getIdentity: () => ({ id: "user-1" }),
+			can,
+		};
+
+		await render(<BoardPage boardId={board.id} />, { auth });
+		await waitFor(() =>
+			can.mock.calls.some(
+				([request]) =>
+					request.resource === "kanban:board" && request.action === "delete",
+			),
+		);
+
+		expect(texts()).not.toContain("Actions");
+		expect(texts()).not.toContain("Add Column");
+	});
+});
+
+describe("Kanban resource forms", () => {
+	it("renders normalized server field errors inline", async () => {
+		hooks.useBoardForm.mockReturnValue({
+			...formResult,
+			error: new Error("Validation failed"),
+			fieldErrors: { name: "Server says the name is invalid" },
+		});
+
+		await render(<BoardForm onClose={() => {}} onSuccess={() => {}} />);
+
+		expect(texts()).toContain("Server says the name is invalid");
+	});
+
+	it("wires all three forms to their public resource form hooks", async () => {
+		await render(
+			<>
+				<BoardForm board={board} onClose={() => {}} onSuccess={() => {}} />
+				<ColumnForm
+					boardId={board.id}
+					columnId={column.id}
+					column={column}
+					onClose={() => {}}
+					onSuccess={() => {}}
+				/>
+				<TaskForm
+					boardId={board.id}
+					columnId={column.id}
+					taskId={task.id}
+					task={task}
+					columns={[column]}
+					onClose={() => {}}
+					onSuccess={() => {}}
+				/>
+			</>,
+		);
+
+		expect(hooks.useBoardForm).toHaveBeenCalled();
+		expect(hooks.useColumnForm).toHaveBeenCalled();
+		expect(hooks.useTaskForm).toHaveBeenCalled();
+	});
+});
+
+describe("Kanban i18n precedence", () => {
+	it("routes UI strings through the i18n provider", async () => {
+		const i18n: StackI18nProvider = {
+			translate: (key, defaultValue) =>
+				key === "kanban.common.noBoards" ? "Noch keine Boards" : defaultValue,
+		};
+
+		await render(<BoardsListPage />, { i18n });
+		expect(texts()).toContain("Noch keine Boards");
+	});
+
+	it("lets the existing localization override win", async () => {
+		const translate = vi.fn((key: string) => `translated:${key}`);
+
+		await render(<BoardsListPage />, {
+			i18n: { translate },
+			localization: { noBoards: "Custom empty board copy" },
+		});
+
+		expect(texts()).toContain("Custom empty board copy");
+		expect(texts()).not.toContain("translated:kanban.common.noBoards");
+	});
+});

package/src/plugins/kanban/api/plugin.ts

@@ -30,7 +30,7 @@ import {
 	getKanbanColumnsByBoardId,
 } from "./mutations";
 import { KANBAN_QUERY_KEYS } from "./query-key-defs";
-import { runHookWithShim } from "../../utils";
+import { runHook } from "../../utils";
 import { serializeBoard } from "./serializers";
 import type { QueryClient } from "@tanstack/react-query";
 
@@ -347,7 +347,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeListBoards) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeListBoards!(query, context),
 								ctx.error,
 								"Unauthorized: Cannot list boards",
@@ -381,7 +381,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeReadBoard) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeReadBoard!(params.id, context),
 								ctx.error,
 								"Unauthorized: Cannot read board",
@@ -422,7 +422,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeCreateBoard) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeCreateBoard!(ctx.body, context),
 								ctx.error,
 								"Unauthorized: Cannot create board",
@@ -512,7 +512,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeUpdateBoard) {
-							await runHookWithShim(
+							await runHook(
 								() =>
 									hooks.onBeforeUpdateBoard!(
 										ctx.params.id,
@@ -591,7 +591,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 						}
 
 						if (hooks?.onBeforeDeleteBoard) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeDeleteBoard!(ctx.params.id, context),
 								ctx.error,
 								"Unauthorized: Cannot delete board",
@@ -633,7 +633,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeCreateColumn) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeCreateColumn!(ctx.body, context),
 								ctx.error,
 								"Unauthorized: Cannot create column",
@@ -692,7 +692,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeUpdateColumn) {
-							await runHookWithShim(
+							await runHook(
 								() =>
 									hooks.onBeforeUpdateColumn!(
 										ctx.params.id,
@@ -753,7 +753,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 						}
 
 						if (hooks?.onBeforeDeleteColumn) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeDeleteColumn!(ctx.params.id, context),
 								ctx.error,
 								"Unauthorized: Cannot delete column",
@@ -794,7 +794,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 						for (let i = 0; i < columnIds.length; i++) {
 							const columnId = columnIds[i];
 							if (!columnId) continue;
-							await runHookWithShim(
+							await runHook(
 								() =>
 									hooks.onBeforeUpdateColumn!(
 										columnId,
@@ -853,7 +853,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeCreateTask) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeCreateTask!(ctx.body, context),
 								ctx.error,
 								"Unauthorized: Cannot create task",
@@ -919,7 +919,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeUpdateTask) {
-							await runHookWithShim(
+							await runHook(
 								() =>
 									hooks.onBeforeUpdateTask!(
 										ctx.params.id,
@@ -980,7 +980,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 						}
 
 						if (hooks?.onBeforeDeleteTask) {
-							await runHookWithShim(
+							await runHook(
 								() => hooks.onBeforeDeleteTask!(ctx.params.id, context),
 								ctx.error,
 								"Unauthorized: Cannot delete task",
@@ -1028,7 +1028,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 
 					// Check authorization before moving task
 					if (hooks?.onBeforeUpdateTask) {
-						await runHookWithShim(
+						await runHook(
 							() =>
 								hooks.onBeforeUpdateTask!(
 									taskId,
@@ -1081,7 +1081,7 @@ export const kanbanBackendPlugin = (hooks?: KanbanBackendHooks) =>
 						for (let i = 0; i < taskIds.length; i++) {
 							const taskId = taskIds[i];
 							if (!taskId) continue;
-							await runHookWithShim(
+							await runHook(
 								() =>
 									hooks.onBeforeUpdateTask!(
 										taskId,

package/src/plugins/kanban/client/components/forms/board-form.tsx

@@ -5,7 +5,9 @@ import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import { Textarea } from "@workspace/ui/components/textarea";
 import { Label } from "@workspace/ui/components/label";
-import { useBoardMutations } from "../../hooks/kanban-hooks";
+import { usePluginOverrides, useTranslate } from "@btst/stack/context";
+import { useBoardForm } from "../../hooks/kanban-hooks";
+import type { KanbanPluginOverrides } from "../../overrides";
 import type { SerializedBoard } from "../../../types";
 
 interface BoardFormProps {
@@ -14,93 +16,138 @@ interface BoardFormProps {
 	onSuccess: (boardId: string) => void;
 }
 
+interface BoardFormValues {
+	name: string;
+	description: string;
+}
+
+function firstError(error: string | string[] | undefined): string | undefined {
+	return Array.isArray(error) ? error[0] : error;
+}
+
 export function BoardForm({ board, onClose, onSuccess }: BoardFormProps) {
+	const t = useTranslate();
+	const { localization } = usePluginOverrides<KanbanPluginOverrides>("kanban");
 	const isEditing = !!board;
-	const { createBoard, updateBoard, isCreating, isUpdating } =
-		useBoardMutations();
 
 	const [name, setName] = useState(board?.name || "");
 	const [description, setDescription] = useState(board?.description || "");
-	const [error, setError] = useState<string | null>(null);
+	const [nameError, setNameError] = useState<string | null>(null);
 
-	const isPending = isCreating || isUpdating;
+	const resourceForm = useBoardForm<BoardFormValues>({
+		action: isEditing ? "edit" : "create",
+		record: board ?? null,
+		toCreateVars: (values) => values,
+		toUpdateVars: (values) => ({ id: board?.id ?? "", data: values }),
+		onSuccess: (savedBoard) => onSuccess(savedBoard.id),
+	});
 
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		setError(null);
+	const serverNameError = firstError(resourceForm.fieldErrors.name);
+	const serverDescriptionError = firstError(
+		resourceForm.fieldErrors.description,
+	);
+	const topLevelError =
+		resourceForm.error && Object.keys(resourceForm.fieldErrors).length === 0
+			? resourceForm.error.message
+			: null;
+
+	const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		resourceForm.clearErrors();
+		setNameError(null);
 
 		if (!name.trim()) {
-			setError("Name is required");
+			setNameError(
+				localization?.nameRequired ??
+					t("kanban.forms.nameRequired", "Name is required"),
+			);
 			return;
 		}
 
-		try {
-			if (isEditing && board) {
-				await updateBoard(board.id, { name, description });
-				onSuccess(board.id);
-			} else {
-				const newBoard = await createBoard({ name, description });
-				if (newBoard?.id) {
-					onSuccess(newBoard.id);
-				}
-			}
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "An error occurred");
-		}
+		await resourceForm.submit({ name, description });
 	};
 
 	return (
 		<form onSubmit={handleSubmit} className="space-y-4 overflow-x-hidden">
 			<div className="space-y-2">
-				<Label htmlFor="name">Name *</Label>
+				<Label htmlFor="name">
+					{localization?.boardName ?? t("kanban.forms.boardName", "Name")} *
+				</Label>
 				<Input
 					id="name"
 					value={name}
-					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-						setName(e.target.value)
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						setName(event.target.value);
+						setNameError(null);
+					}}
+					placeholder={
+						localization?.boardNamePlaceholder ??
+						t("kanban.forms.boardNamePlaceholder", "e.g., Project Alpha")
 					}
-					placeholder="e.g., Project Alpha"
-					disabled={isPending}
+					disabled={resourceForm.isSubmitting}
+					aria-invalid={!!(nameError || serverNameError)}
 				/>
+				{(nameError || serverNameError) && (
+					<p className="text-sm text-destructive">
+						{nameError || serverNameError}
+					</p>
+				)}
 			</div>
 
 			<div className="space-y-2">
-				<Label htmlFor="description">Description</Label>
+				<Label htmlFor="description">
+					{localization?.boardDescription ??
+						t("kanban.forms.boardDescription", "Description")}
+				</Label>
 				<Textarea
 					id="description"
 					value={description}
-					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-						setDescription(e.target.value)
+					onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+						setDescription(event.target.value)
+					}
+					placeholder={
+						localization?.boardDescriptionPlaceholder ??
+						t(
+							"kanban.forms.boardDescriptionPlaceholder",
+							"Describe your board...",
+						)
 					}
-					placeholder="Describe your board..."
-					disabled={isPending}
+					disabled={resourceForm.isSubmitting}
 					rows={3}
+					aria-invalid={!!serverDescriptionError}
 				/>
+				{serverDescriptionError && (
+					<p className="text-sm text-destructive">{serverDescriptionError}</p>
+				)}
 			</div>
 
-			{error && (
+			{topLevelError && (
 				<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
-					{error}
+					{topLevelError}
 				</div>
 			)}
 
 			<div className="flex gap-2 pt-2">
-				<Button type="submit" disabled={isPending}>
-					{isPending
+				<Button type="submit" disabled={resourceForm.isSubmitting}>
+					{resourceForm.isSubmitting
 						? isEditing
-							? "Updating..."
-							: "Creating..."
+							? (localization?.updating ??
+								t("kanban.common.updating", "Updating..."))
+							: (localization?.creating ??
+								t("kanban.common.creating", "Creating..."))
 						: isEditing
-							? "Update Board"
-							: "Create Board"}
+							? (localization?.updateBoard ??
+								t("kanban.forms.updateBoard", "Update Board"))
+							: (localization?.createBoard ??
+								t("kanban.forms.createBoard", "Create Board"))}
 				</Button>
 				<Button
 					type="button"
 					variant="outline"
 					onClick={onClose}
-					disabled={isPending}
+					disabled={resourceForm.isSubmitting}
 				>
-					Cancel
+					{localization?.cancel ?? t("kanban.common.cancel", "Cancel")}
 				</Button>
 			</div>
 		</form>