@btst/stack 2.12.2 → 3.0.0-rc.1

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

@@ -0,0 +1,269 @@
+// @vitest-environment jsdom
+import { QueryClient } from "@tanstack/react-query";
+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 { LibraryPage } from "../client/components/pages/library-page.internal";
+import { UrlTab } from "../client/components/media-picker/url-tab";
+import type { SerializedAsset, SerializedFolder } from "../types";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+const hooks = vi.hoisted(() => ({
+	useAssets: vi.fn(),
+	useFolders: vi.fn(),
+	useUploadAsset: vi.fn(),
+	useDeleteAsset: vi.fn(),
+	useDeleteFolder: vi.fn(),
+	useCreateFolderForm: vi.fn(),
+	useRegisterAssetForm: vi.fn(),
+}));
+
+vi.mock("../client/hooks/use-media", () => hooks);
+vi.mock("@workspace/ui/hooks/use-route-lifecycle", () => ({
+	useRouteLifecycle: vi.fn(),
+}));
+
+const asset: SerializedAsset = {
+	id: "asset-1",
+	filename: "beach.jpg",
+	originalName: "Beach.jpg",
+	mimeType: "image/jpeg",
+	size: 1024,
+	url: "https://cdn.example.com/beach.jpg",
+	createdAt: new Date("2024-01-01").toISOString(),
+};
+
+const folder: SerializedFolder = {
+	id: "folder-1",
+	name: "Photos",
+	createdAt: new Date("2024-01-01").toISOString(),
+};
+
+let container: HTMLDivElement;
+let root: Root;
+let queryClient: QueryClient;
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	hooks.useAssets.mockReturnValue({
+		data: { pages: [{ items: [asset], total: 1 }] },
+		fetchNextPage: vi.fn(),
+		hasNextPage: false,
+		isFetchingNextPage: false,
+		isLoading: false,
+	});
+	hooks.useFolders.mockImplementation((parentId?: string | null) => ({
+		data: parentId === null ? [folder] : [],
+	}));
+	hooks.useUploadAsset.mockReturnValue({
+		mutateAsync: vi.fn().mockResolvedValue(asset),
+		isPending: false,
+	});
+	hooks.useDeleteAsset.mockReturnValue({
+		mutateAsync: vi.fn().mockResolvedValue({ success: true }),
+	});
+	hooks.useDeleteFolder.mockReturnValue({
+		mutateAsync: vi.fn().mockResolvedValue({ success: true }),
+	});
+	hooks.useCreateFolderForm.mockReturnValue({
+		submit: vi.fn().mockResolvedValue(folder),
+		isSubmitting: false,
+		error: null,
+		fieldErrors: {},
+		clearErrors: vi.fn(),
+	});
+	hooks.useRegisterAssetForm.mockReturnValue({
+		submit: vi.fn().mockResolvedValue(asset),
+		isSubmitting: false,
+		error: null,
+		fieldErrors: {},
+		clearErrors: vi.fn(),
+	});
+});
+
+afterEach(async () => {
+	await act(async () => root.unmount());
+	container.remove();
+	document.body.innerHTML = "";
+	queryClient.clear();
+	vi.clearAllMocks();
+});
+
+function createMockRouter(initial = "") {
+	let params = new URLSearchParams(initial);
+	const setSearchParams = vi.fn(
+		(next: URLSearchParams, _options?: { replace?: boolean }) => {
+			params = new URLSearchParams(next.toString());
+		},
+	);
+	return {
+		navigate: vi.fn(),
+		getSearchParams: () => new URLSearchParams(params.toString()),
+		setSearchParams,
+	};
+}
+
+const mediaOverrides = () => ({
+	queryClient,
+});
+
+async function renderLibrary(
+	options: {
+		auth?: StackAuthProvider;
+		i18n?: StackI18nProvider;
+		router?: ReturnType<typeof createMockRouter>;
+	} = {},
+) {
+	const router = options.router ?? createMockRouter();
+	await act(async () => {
+		root.render(
+			<StackProvider
+				basePath="/pages"
+				api={{ baseURL: "http://test.local", basePath: "/api/data" }}
+				router={router}
+				overrides={{ media: mediaOverrides() }}
+				auth={options.auth}
+				i18n={options.i18n}
+			>
+				<LibraryPage />
+			</StackProvider>,
+		);
+	});
+	return router;
+}
+
+function typeInto(input: HTMLInputElement, value: string) {
+	const setValue = Object.getOwnPropertyDescriptor(
+		HTMLInputElement.prototype,
+		"value",
+	)!.set!;
+	setValue.call(input, value);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+describe("Media library permissions", () => {
+	it("keeps all write controls visible without an auth provider", async () => {
+		await renderLibrary();
+
+		expect(document.body.textContent).toContain("Upload");
+		expect(container.querySelector('[title="New folder"]')).toBeTruthy();
+		expect(container.querySelector('[title="Delete"]')).toBeTruthy();
+	});
+
+	it("hides asset and folder writes while leaving browsing available", async () => {
+		const can = vi.fn(
+			({ action }: { resource: string; action: string }) => action === "read",
+		);
+		await renderLibrary({
+			auth: { getIdentity: () => ({ id: "viewer" }), can },
+			router: createMockRouter("folder=folder-1"),
+		});
+
+		expect(document.body.textContent).toContain("Beach.jpg");
+		expect(document.body.textContent).not.toContain("Upload");
+		expect(container.querySelector('[title="New folder"]')).toBeNull();
+		expect(container.querySelector('[title="Delete"]')).toBeNull();
+		expect(document.body.textContent).not.toContain("Delete folder");
+		expect(can).toHaveBeenCalledWith(
+			expect.objectContaining({
+				resource: "media:asset",
+				action: "delete",
+				params: { id: asset.id },
+			}),
+		);
+	});
+});
+
+describe("Media library URL state", () => {
+	it("seeds folder and search filters from the URL", async () => {
+		const router = createMockRouter("folder=folder-1&q=beach");
+		await renderLibrary({ router });
+
+		const input = container.querySelector(
+			"input[placeholder]",
+		) as HTMLInputElement;
+		expect(input.value).toBe("beach");
+		expect(hooks.useAssets).toHaveBeenLastCalledWith({
+			folderId: "folder-1",
+			query: "beach",
+			limit: 40,
+		});
+		expect(router.setSearchParams).not.toHaveBeenCalled();
+	});
+
+	it("pushes folder changes and replaces debounced search changes", async () => {
+		const router = await renderLibrary();
+		const photos = Array.from(container.querySelectorAll("button")).find(
+			(button) => button.textContent?.includes("Photos"),
+		)!;
+
+		await act(async () => {
+			photos.click();
+			await Promise.resolve();
+		});
+		let [params, options] = router.setSearchParams.mock.calls.at(-1)!;
+		expect(params.get("folder")).toBe("folder-1");
+		expect(options).toEqual({ replace: false });
+
+		router.setSearchParams.mockClear();
+		const input = container.querySelector(
+			"input[placeholder]",
+		) as HTMLInputElement;
+		await act(async () => typeInto(input, "sunset"));
+		expect(router.setSearchParams).not.toHaveBeenCalled();
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 350));
+		});
+		[params, options] = router.setSearchParams.mock.calls.at(-1)!;
+		expect(params.get("q")).toBe("sunset");
+		expect(options).toEqual({ replace: true });
+	});
+});
+
+describe("Media forms and i18n", () => {
+	it("renders server URL field errors inline", async () => {
+		hooks.useRegisterAssetForm.mockReturnValue({
+			submit: vi.fn(),
+			isSubmitting: false,
+			error: new Error("Validation failed"),
+			fieldErrors: { url: "URL is not allowed" },
+			clearErrors: vi.fn(),
+		});
+
+		await act(async () => {
+			root.render(
+				<StackProvider
+					basePath="/pages"
+					router={createMockRouter()}
+					overrides={{ media: mediaOverrides() }}
+				>
+					<UrlTab folderId={null} onRegistered={vi.fn()} />
+				</StackProvider>,
+			);
+		});
+
+		expect(document.body.textContent).toContain("URL is not allowed");
+	});
+
+	it("routes library copy through the i18n provider", async () => {
+		const i18n: StackI18nProvider = {
+			translate: (key, defaultValue) =>
+				key === "media.actions.copyUrl" ? "URL kopieren" : defaultValue,
+		};
+		await renderLibrary({ i18n });
+
+		expect(container.querySelector('[title="URL kopieren"]')).toBeTruthy();
+	});
+});

package/src/plugins/media/__tests__/getters.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import { createMemoryAdapter } from "@btst/adapter-memory";
 import { defineDb } from "@btst/db";
 import type { DBAdapter as Adapter } from "@btst/db";
@@ -163,6 +163,33 @@ describe("media getters", () => {
 			expect(photoResult.items[0]!.filename).toBe("holiday-photo.jpg");
 		});
 
+		it("trims search input and bounds the in-memory scan", async () => {
+			await adapter.create({
+				model: "mediaAsset",
+				data: makeAsset({ filename: "holiday-photo.jpg" }),
+			});
+			const findMany = vi.spyOn(adapter, "findMany");
+
+			const result = await listAssets(adapter, {
+				query: "  holiday  ",
+				limit: 20,
+			});
+
+			expect(result.items).toHaveLength(1);
+			expect(findMany).toHaveBeenCalledWith(
+				expect.objectContaining({ limit: 1000, offset: undefined }),
+			);
+		});
+
+		it("treats whitespace-only search as an ordinary paginated list", async () => {
+			const findMany = vi.spyOn(adapter, "findMany");
+			await listAssets(adapter, { query: "   ", limit: 2, offset: 0 });
+
+			expect(findMany).toHaveBeenCalledWith(
+				expect.objectContaining({ limit: 2, offset: 0 }),
+			);
+		});
+
 		it("filters assets by tenantId", async () => {
 			await adapter.create({
 				model: "mediaAsset",
@@ -292,6 +319,11 @@ describe("media getters", () => {
 			const childFolders = await listFolders(adapter, { parentId: root.id });
 			expect(childFolders).toHaveLength(1);
 			expect(childFolders[0]!.name).toBe("Child");
+
+			// Explicit null returns roots only; it is not the same as no filter.
+			const rootFolders = await listFolders(adapter, { parentId: null });
+			expect(rootFolders).toHaveLength(1);
+			expect(rootFolders[0]!.name).toBe("Root");
 		});
 	});
 

package/src/plugins/media/__tests__/plugin.test.ts

@@ -700,26 +700,35 @@ describe("mediaBackendPlugin hook denial behavior", () => {
 		expect(response.status).toBe(403);
 		await expect(response.text()).resolves.toContain("No folders for you");
 	});
+});
 
-	it("still denies access for old-style hooks that return false", async () => {
-		const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-		const backend = createBackend({
-			hooks: {
-				onBeforeListAssets: (() => false) as unknown as NonNullable<
-					NonNullable<MediaBackendConfig["hooks"]>["onBeforeListAssets"]
-				>,
-			},
-		});
+describe("mediaBackendPlugin list query normalization", () => {
+	it("decodes the root-folder sentinel before hooks and filtering", async () => {
+		const onBeforeListFolders = vi.fn();
+		const backend = createBackend({ hooks: { onBeforeListFolders } });
+		const root = await createFolderViaApi(backend, { name: "Root" });
+		await createFolderViaApi(backend, { name: "Child", parentId: root.id });
 
 		const response = await backend.handler(
-			createJsonRequest("/api/media/assets", "GET"),
+			createJsonRequest("/api/media/folders?parentId=__root__", "GET"),
 		);
+		const folders = (await response.json()) as Array<{ name: string }>;
 
-		expect(response.status).toBe(403);
-		await expect(response.text()).resolves.toContain(
-			"Unauthorized: Cannot list assets",
+		expect(response.ok).toBe(true);
+		expect(folders.map((folder) => folder.name)).toEqual(["Root"]);
+		expect(onBeforeListFolders).toHaveBeenCalledWith(
+			{ parentId: null },
+			expect.any(Object),
 		);
-		expect(warnSpy).toHaveBeenCalled();
+	});
+
+	it("rejects asset searches longer than 200 characters", async () => {
+		const backend = createBackend();
+		const response = await backend.handler(
+			createJsonRequest(`/api/media/assets?query=${"a".repeat(201)}`, "GET"),
+		);
+
+		expect(response.status).toBe(400);
 	});
 });
 

package/src/plugins/media/api/getters.ts

@@ -74,7 +74,8 @@ export async function listAssets(
 		});
 	}
 
-	const needsInMemoryFilter = !!query.query;
+	const searchQuery = query.query?.trim() || undefined;
+	const needsInMemoryFilter = !!searchQuery;
 	const dbWhere = whereConditions.length > 0 ? whereConditions : undefined;
 
 	const dbTotal: number | undefined = !needsInMemoryFilter
@@ -83,14 +84,16 @@ export async function listAssets(
 
 	let assets = await adapter.findMany<Asset>({
 		model: "mediaAsset",
-		limit: !needsInMemoryFilter ? query.limit : undefined,
+		// Adapters do not expose portable substring search. Bound the fallback
+		// scan to the newest 1,000 rows so a search cannot load an entire table.
+		limit: needsInMemoryFilter ? 1000 : query.limit,
 		offset: !needsInMemoryFilter ? query.offset : undefined,
 		where: dbWhere,
 		sortBy: { field: "createdAt", direction: "desc" },
 	});
 
-	if (query.query) {
-		const searchLower = query.query.toLowerCase();
+	if (searchQuery) {
+		const searchLower = searchQuery.toLowerCase();
 		assets = assets.filter(
 			(asset) =>
 				asset.filename.toLowerCase().includes(searchLower) ||

package/src/plugins/media/api/index.ts

@@ -24,7 +24,11 @@ export {
 
 export { serializeAsset, serializeFolder } from "./serializers";
 
-export { MEDIA_QUERY_KEYS, assetListDiscriminator } from "./query-key-defs";
+export {
+	MEDIA_QUERY_KEYS,
+	assetListDiscriminator,
+	folderListDiscriminator,
+} from "./query-key-defs";
 
 export type {
 	StorageAdapter,

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

@@ -5,6 +5,7 @@ import { mediaSchema as dbSchema } from "../db";
 import type { Asset, Folder } from "../types";
 import {
 	AssetListQuerySchema,
+	FolderListQuerySchema,
 	createAssetSchema,
 	updateAssetSchema,
 	createFolderSchema,
@@ -30,7 +31,7 @@ import {
 	isVercelBlobAdapter,
 	type StorageAdapter,
 } from "./storage-adapter";
-import { runHookWithShim } from "../../utils";
+import { runHook } from "../../utils";
 
 /**
  * Sanitize a string for use in an S3 object key.
@@ -132,7 +133,7 @@ export interface MediaBackendHooks {
 	 * Called before listing folders. Throw to deny access.
 	 */
 	onBeforeListFolders?: (
-		filter: { parentId?: string },
+		filter: { parentId?: string | null },
 		context: MediaApiContext,
 	) => Promise<void> | void;
 
@@ -320,7 +321,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 						: undefined;
 
 					if (hooks?.onBeforeListAssets) {
-						await runHookWithShim(
+						await runHook(
 							() => hooks.onBeforeListAssets!(query, context),
 							ctx.error,
 							"Unauthorized: Cannot list assets",
@@ -348,7 +349,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 						: undefined;
 
 					if (hooks?.onBeforeUpload) {
-						await runHookWithShim(
+						await runHook(
 							() =>
 								hooks.onBeforeUpload!(
 									{
@@ -458,7 +459,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 					}
 
 					if (hooks?.onBeforeUpdateAsset) {
-						await runHookWithShim(
+						await runHook(
 							() => hooks.onBeforeUpdateAsset!(existing, ctx.body, context),
 							ctx.error,
 							"Unauthorized: Cannot update asset",
@@ -509,7 +510,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 					}
 
 					if (hooks?.onBeforeDelete) {
-						await runHookWithShim(
+						await runHook(
 							() => hooks.onBeforeDelete!(asset, context),
 							ctx.error,
 							"Unauthorized: Cannot delete asset",
@@ -548,9 +549,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 				"/media/folders",
 				{
 					method: "GET",
-					query: z.object({
-						parentId: z.string().optional(),
-					}),
+					query: FolderListQuerySchema,
 				},
 				async (ctx) => {
 					const filter = { parentId: ctx.query.parentId };
@@ -564,7 +563,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 						: undefined;
 
 					if (hooks?.onBeforeListFolders) {
-						await runHookWithShim(
+						await runHook(
 							() => hooks.onBeforeListFolders!(filter, context),
 							ctx.error,
 							"Unauthorized: Cannot list folders",
@@ -592,7 +591,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 						: undefined;
 
 					if (hooks?.onBeforeCreateFolder) {
-						await runHookWithShim(
+						await runHook(
 							() => hooks.onBeforeCreateFolder!(ctx.body, context),
 							ctx.error,
 							"Unauthorized: Cannot create folder",
@@ -638,7 +637,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 					}
 
 					if (hooks?.onBeforeDeleteFolder) {
-						await runHookWithShim(
+						await runHook(
 							() => hooks.onBeforeDeleteFolder!(folder, context),
 							ctx.error,
 							"Unauthorized: Cannot delete folder",
@@ -740,7 +739,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 						: undefined;
 
 					if (hooks?.onBeforeUpload) {
-						await runHookWithShim(
+						await runHook(
 							() =>
 								hooks.onBeforeUpload!(
 									{
@@ -847,7 +846,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 						: undefined;
 
 					if (hooks?.onBeforeUpload) {
-						await runHookWithShim(
+						await runHook(
 							() =>
 								hooks.onBeforeUpload!(
 									{
@@ -938,7 +937,7 @@ export const mediaBackendPlugin = (config: MediaBackendConfig) =>
 							const size = parsed.size as number | undefined;
 
 							if (hooks?.onBeforeUpload) {
-								await runHookWithShim(
+								await runHook(
 									() =>
 										hooks.onBeforeUpload!(
 											{ filename, mimeType, size },

package/src/plugins/media/api/query-key-defs.ts

@@ -23,19 +23,28 @@ export function assetListDiscriminator(
 	return {
 		folderId: params?.folderId,
 		mimeType: params?.mimeType,
-		query: params?.query,
+		query: params?.query?.trim() || undefined,
 		limit: params?.limit,
 		offset: params?.offset,
 	};
 }
 
+export type FolderListDiscriminator = "all" | "root" | string;
+
+export function folderListDiscriminator(
+	parentId?: string | null,
+): FolderListDiscriminator {
+	if (parentId === undefined) return "all";
+	return parentId === null ? "root" : parentId;
+}
+
 /** Full query key builders — use these with `queryClient.setQueryData()`. */
 export const MEDIA_QUERY_KEYS = {
 	assetsList: (params?: AssetListParams) =>
-		["media", "assets", "list", assetListDiscriminator(params)] as const,
+		["mediaAssets", "list", assetListDiscriminator(params)] as const,
 
-	assetDetail: (id: string) => ["media", "assets", "detail", id] as const,
+	assetDetail: (id: string) => ["mediaAssets", "detail", id] as const,
 
 	foldersList: (parentId?: string | null) =>
-		["media", "folders", "list", parentId ?? "root"] as const,
+		["mediaFolders", "list", folderListDiscriminator(parentId)] as const,
 };