@btst/stack 2.12.2 → 3.0.0-rc.2

package/src/plugins/cms/client/components/forms/relation-field.tsx

@@ -1,14 +1,10 @@
 "use client";
 
 import { useState, useCallback, useMemo } from "react";
-import { useQueries } from "@tanstack/react-query";
-import { createApiClient } from "@btst/stack/plugins/client";
-import { usePluginOverrides } from "@btst/stack/context";
-import { useContent, useCreateContent } from "../../hooks";
-import type { CMSApiRouter } from "../../../api";
+import { usePluginOverrides, useTranslate } from "@btst/stack/context";
+import { useCreateContent, useContentOptions } from "../../hooks";
 import type { SerializedContentItemWithType } from "../../../types";
 import type { CMSPluginOverrides } from "../../overrides";
-import { createCMSQueryKeys } from "../../../query-keys";
 import MultipleSelector from "@workspace/ui/components/multi-select";
 import type { Option } from "@workspace/ui/components/multi-select";
 import { Button } from "@workspace/ui/components/button";
@@ -26,16 +22,6 @@ import { Textarea } from "@workspace/ui/components/textarea";
 import type { AutoFormInputComponentProps } from "@workspace/ui/components/auto-form/types";
 import type { RelationConfig } from "../../../types";
 
-/** Match cms-hooks SHARED_QUERY_CONFIG for detail fetches (deduped labels). */
-const RELATION_DETAIL_QUERY_OPTS = {
-	retry: false,
-	refetchOnWindowFocus: false,
-	refetchOnMount: false,
-	refetchOnReconnect: false,
-	staleTime: 1000 * 60 * 5,
-	gcTime: 1000 * 60 * 10,
-} as const;
-
 interface RelationFieldProps extends AutoFormInputComponentProps {
 	relation: RelationConfig;
 }
@@ -44,6 +30,10 @@ interface RelationFieldProps extends AutoFormInputComponentProps {
  * A form field component for handling CMS content relationships.
  * Supports selecting existing items and optionally creating new items inline.
  *
+ * Options come from the resource `useSelect` hook: debounced server-side
+ * search over the target type, with selected values not present in the
+ * current results preloaded by id (for labels).
+ *
  * Handles two value formats:
  * - belongsTo: single object { id: string } or undefined
  * - hasMany/manyToMany: array of { id: string }
@@ -55,27 +45,13 @@ export function RelationField({
 	isRequired,
 	relation,
 }: RelationFieldProps) {
+	const t = useTranslate();
 	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 	const [newItemName, setNewItemName] = useState("");
 	const [newItemDescription, setNewItemDescription] = useState("");
 	const [createError, setCreateError] = useState<string | null>(null);
 
-	const { apiBaseURL, apiBasePath, headers } =
-		usePluginOverrides<CMSPluginOverrides>("cms");
-
-	const listClient = useMemo(
-		() =>
-			createApiClient<CMSApiRouter>({
-				baseURL: apiBaseURL,
-				basePath: apiBasePath,
-			}),
-		[apiBaseURL, apiBasePath],
-	);
-
-	const cmsQueries = useMemo(
-		() => createCMSQueryKeys(listClient, headers),
-		[listClient, headers],
-	);
+	const { localization } = usePluginOverrides<CMSPluginOverrides>("cms");
 
 	// For belongsTo (single relation), we only allow one selection
 	const isSingleSelect = relation.type === "belongsTo";
@@ -98,91 +74,30 @@ export function RelationField({
 		return (field.value as Array<{ id: string }>) || [];
 	}, [field.value, isSingleSelect]);
 
-	// Fetch available items from the target content type (first page only)
-	const { items: availableItems, isLoading } = useContent(relation.targetType, {
-		limit: 500,
-	});
-
-	const missingDetailIds = useMemo(() => {
-		const loadedIds = new Set(availableItems.map((i) => i.id));
-		return normalizedValue
-			.map((v) => v.id)
-			.filter((id) => id.length > 0 && !loadedIds.has(id));
-	}, [availableItems, normalizedValue]);
-
-	const hydrationResult = useQueries({
-		queries: missingDetailIds.map((id) => ({
-			...cmsQueries.cmsContent.detail(relation.targetType, id),
-			...RELATION_DETAIL_QUERY_OPTS,
-			enabled: Boolean(relation.targetType && id),
-		})),
-		combine: (results) => ({
-			data: results.map(
-				(r) => r.data as SerializedContentItemWithType | null | undefined,
+	const { displayField } = relation;
+	const getOptionLabel = useCallback(
+		(item: SerializedContentItemWithType) =>
+			String(
+				(item.parsedData as Record<string, unknown>)?.[displayField] ||
+					item.slug,
 			),
-			isHydrating: results.some((r) => r.isFetching),
-		}),
-	});
-
-	const isHydratingLabels = hydrationResult.isHydrating;
-
-	const itemById = useMemo(() => {
-		const m = new Map<string, SerializedContentItemWithType>();
-		for (const it of availableItems) {
-			m.set(it.id, it as SerializedContentItemWithType);
-		}
-		for (let i = 0; i < missingDetailIds.length; i++) {
-			const row = hydrationResult.data[i];
-			if (row?.id) {
-				m.set(row.id, row);
-			}
-		}
-		return m;
-	}, [availableItems, missingDetailIds, hydrationResult.data]);
+		[displayField],
+	);
 
-	// Convert normalized value to Option[] for MultipleSelector
-	const selectedOptions: Option[] = normalizedValue.map((v) => {
-		const item = itemById.get(v.id);
-		if (item) {
-			const displayValue =
-				(item.parsedData as Record<string, unknown>)?.[relation.displayField] ||
-				item.slug;
-			return {
-				value: item.id,
-				label: String(displayValue),
-			};
-		}
-		return { value: v.id, label: `ID: ${v.id.slice(0, 8)}...` };
+	const select = useContentOptions({
+		targetType: relation.targetType,
+		value: normalizedValue.map((v) => v.id),
+		getOptionLabel,
 	});
 
-	// Listed options + any selected partners loaded by id (not on first list page)
-	const options: Option[] = useMemo(() => {
-		const merged: SerializedContentItemWithType[] = [
-			...(availableItems as SerializedContentItemWithType[]),
-		];
-		const seen = new Set(merged.map((x) => x.id));
-		for (let i = 0; i < missingDetailIds.length; i++) {
-			const row = hydrationResult.data[i];
-			if (row?.id && !seen.has(row.id)) {
-				merged.push(row);
-				seen.add(row.id);
-			}
-		}
-		return merged.map((item) => {
-			const displayValue =
-				(item.parsedData as Record<string, unknown>)?.[relation.displayField] ||
-				item.slug;
-			return {
-				value: item.id,
-				label: String(displayValue),
-			};
-		});
-	}, [
-		availableItems,
-		hydrationResult.data,
-		missingDetailIds,
-		relation.displayField,
-	]);
+	const options: Option[] = select.options.map((option) => ({
+		value: option.value,
+		label: option.label,
+	}));
+	const selectedOptions: Option[] = select.selectedOptions.map((option) => ({
+		value: option.value,
+		label: option.label,
+	}));
 
 	// Mutation for creating new items
 	const createMutation = useCreateContent(relation.targetType);
@@ -238,7 +153,11 @@ export function RelationField({
 			const message =
 				error instanceof Error
 					? error.message
-					: "Failed to create item. Please try again.";
+					: (localization?.CMS_RELATION_CREATE_ERROR ??
+						t(
+							"cms.relations.createError",
+							"Failed to create item. Please try again.",
+						));
 			setCreateError(message);
 		}
 	};
@@ -258,6 +177,10 @@ export function RelationField({
 		[normalizedValue, field, isSingleSelect],
 	);
 
+	const displayFieldLabel =
+		relation.displayField.charAt(0).toUpperCase() +
+		relation.displayField.slice(1);
+
 	return (
 		<div className="space-y-2">
 			<Label>
@@ -272,15 +195,35 @@ export function RelationField({
 						onChange={handleChange}
 						options={options}
 						placeholder={
-							isLoading || isHydratingLabels
-								? "Loading..."
-								: `Select ${relation.targetType}${isSingleSelect ? "" : "(s)"}...`
+							select.isLoading
+								? (localization?.CMS_RELATION_LOADING ??
+									t("cms.relations.loading", "Loading..."))
+								: (isSingleSelect
+										? (localization?.CMS_RELATION_SELECT_PLACEHOLDER ??
+											t(
+												"cms.relations.selectPlaceholder",
+												"Select {targetType}...",
+											))
+										: (localization?.CMS_RELATION_SELECT_PLACEHOLDER_MULTI ??
+											t(
+												"cms.relations.selectPlaceholderMulti",
+												"Select {targetType}(s)...",
+											))
+									).replace("{targetType}", relation.targetType)
 						}
-						disabled={isLoading || isHydratingLabels}
+						disabled={select.isLoading}
 						hidePlaceholderWhenSelected
+						// Options are server-filtered (search param); disable the
+						// built-in client-side filtering so results aren't re-filtered
+						// against an incomplete option set.
+						commandProps={{ shouldFilter: false }}
+						inputProps={{ onValueChange: select.setSearch }}
 						emptyIndicator={
 							<p className="text-center text-sm text-muted-foreground py-4">
-								No {relation.targetType} items found
+								{(
+									localization?.CMS_RELATION_EMPTY ??
+									t("cms.relations.empty", "No {targetType} items found")
+								).replace("{targetType}", relation.targetType)}
 							</p>
 						}
 						maxSelected={isSingleSelect ? 1 : undefined}
@@ -301,33 +244,48 @@ export function RelationField({
 						</DialogTrigger>
 						<DialogContent>
 							<DialogHeader>
-								<DialogTitle>Create New {relation.targetType}</DialogTitle>
+								<DialogTitle>
+									{(
+										localization?.CMS_RELATION_CREATE_TITLE ??
+										t("cms.relations.createTitle", "Create New {targetType}")
+									).replace("{targetType}", relation.targetType)}
+								</DialogTitle>
 							</DialogHeader>
 							<div className="space-y-4 py-4">
 								{createError && (
 									<p className="text-sm text-destructive">{createError}</p>
 								)}
 								<div className="space-y-2">
-									<Label htmlFor="newItemName">
-										{relation.displayField.charAt(0).toUpperCase() +
-											relation.displayField.slice(1)}
-									</Label>
+									<Label htmlFor="newItemName">{displayFieldLabel}</Label>
 									<Input
 										id="newItemName"
 										value={newItemName}
 										onChange={(e) => setNewItemName(e.target.value)}
-										placeholder={`Enter ${relation.displayField}...`}
+										placeholder={(
+											localization?.CMS_RELATION_NAME_PLACEHOLDER ??
+											t("cms.relations.namePlaceholder", "Enter {field}...")
+										).replace("{field}", relation.displayField)}
 									/>
 								</div>
 								<div className="space-y-2">
 									<Label htmlFor="newItemDescription">
-										Description (optional)
+										{localization?.CMS_RELATION_DESCRIPTION_LABEL ??
+											t(
+												"cms.relations.descriptionLabel",
+												"Description (optional)",
+											)}
 									</Label>
 									<Textarea
 										id="newItemDescription"
 										value={newItemDescription}
 										onChange={(e) => setNewItemDescription(e.target.value)}
-										placeholder="Enter description..."
+										placeholder={
+											localization?.CMS_RELATION_DESCRIPTION_PLACEHOLDER ??
+											t(
+												"cms.relations.descriptionPlaceholder",
+												"Enter description...",
+											)
+										}
 										rows={3}
 									/>
 								</div>
@@ -337,14 +295,19 @@ export function RelationField({
 										variant="outline"
 										onClick={() => setIsCreateDialogOpen(false)}
 									>
-										Cancel
+										{localization?.CMS_BUTTON_CANCEL ??
+											t("cms.common.cancel", "Cancel")}
 									</Button>
 									<Button
 										type="button"
 										onClick={handleCreateItem}
 										disabled={!newItemName.trim() || createMutation.isPending}
 									>
-										{createMutation.isPending ? "Creating..." : "Create"}
+										{createMutation.isPending
+											? (localization?.CMS_RELATION_CREATING ??
+												t("cms.relations.creating", "Creating..."))
+											: (localization?.CMS_RELATION_CREATE_BUTTON ??
+												t("cms.relations.createButton", "Create"))}
 									</Button>
 								</div>
 							</div>

package/src/plugins/cms/client/components/inverse-relations-panel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 import {
 	ChevronDown,
 	ChevronRight,
@@ -16,12 +15,24 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@workspace/ui/components/card";
-import { createApiClient } from "@btst/stack/plugins/client";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
-import { useDeleteContent } from "../hooks";
+import {
+	CanAccess,
+	usePluginOverrides,
+	useBasePath,
+	useStack,
+	useTranslate,
+	type TranslateFn,
+} from "@btst/stack/context";
+import {
+	useDeleteContent,
+	useInverseRelations,
+	useInverseRelationItems,
+} from "../hooks";
 import type { CMSPluginOverrides } from "../overrides";
-import type { CMSApiRouter } from "../../api";
-import type { SerializedContentItemWithType } from "../../types";
+import type {
+	InverseRelation,
+	SerializedContentItemWithType,
+} from "../../types";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -33,13 +44,6 @@ import {
 	AlertDialogTitle,
 } from "@workspace/ui/components/alert-dialog";
 
-interface InverseRelation {
-	sourceType: string;
-	sourceTypeName: string;
-	fieldName: string;
-	count: number;
-}
-
 interface InverseRelationsPanelProps {
 	contentTypeSlug: string;
 	itemId: string;
@@ -53,31 +57,18 @@ export function InverseRelationsPanel({
 	contentTypeSlug,
 	itemId,
 }: InverseRelationsPanelProps) {
-	const { apiBaseURL, apiBasePath, headers, navigate, Link } =
-		usePluginOverrides<CMSPluginOverrides>("cms");
+	const t = useTranslate();
+	const { localization } = usePluginOverrides<CMSPluginOverrides>("cms");
+	const { router } = useStack();
+	const navigate = router?.navigate;
+	const Link = router?.Link;
 	const basePath = useBasePath();
-	const client = createApiClient<CMSApiRouter>({
-		baseURL: apiBaseURL,
-		basePath: apiBasePath,
-	});
 
 	// Fetch inverse relations metadata
-	const { data: inverseRelationsData, isLoading } = useQuery({
-		queryKey: ["cmsInverseRelations", contentTypeSlug, itemId],
-		queryFn: async () => {
-			const response = await client("/content-types/:slug/inverse-relations", {
-				method: "GET",
-				params: { slug: contentTypeSlug },
-				query: { itemId },
-				headers,
-			});
-			return (
-				(response as { data?: { inverseRelations: InverseRelation[] } }).data
-					?.inverseRelations ?? []
-			);
-		},
-		staleTime: 1000 * 60 * 5,
-	});
+	const { inverseRelations, isLoading } = useInverseRelations(
+		contentTypeSlug,
+		itemId,
+	);
 
 	if (isLoading) {
 		return (
@@ -89,8 +80,6 @@ export function InverseRelationsPanel({
 		);
 	}
 
-	const inverseRelations = inverseRelationsData ?? [];
-
 	if (inverseRelations.length === 0) {
 		return null;
 	}
@@ -110,7 +99,10 @@ export function InverseRelationsPanel({
 
 	return (
 		<div className="space-y-4">
-			<h3 className="text-lg font-semibold">Related Items</h3>
+			<h3 className="text-lg font-semibold">
+				{localization?.CMS_RELATED_ITEMS_TITLE ??
+					t("cms.relations.relatedItemsTitle", "Related Items")}
+			</h3>
 			{inverseRelations.map((relation) => (
 				<InverseRelationSection
 					key={`${relation.sourceType}-${relation.fieldName}`}
@@ -120,8 +112,8 @@ export function InverseRelationsPanel({
 					basePath={basePath}
 					navigate={navigate}
 					Link={Link}
-					client={client}
-					headers={headers}
+					localization={localization}
+					t={t}
 					ambiguous={(sourceTypeCounts.get(relation.sourceType) ?? 0) > 1}
 				/>
 			))}
@@ -153,14 +145,14 @@ interface InverseRelationSectionProps {
 	contentTypeSlug: string;
 	itemId: string;
 	basePath: string;
-	navigate: (path: string) => void;
+	navigate?: (path: string) => void | Promise<void>;
 	Link?: React.ComponentType<{
 		href?: string;
 		children?: React.ReactNode;
 		className?: string;
 	}>;
-	client: ReturnType<typeof createApiClient<CMSApiRouter>>;
-	headers?: HeadersInit;
+	localization: CMSPluginOverrides["localization"];
+	t: TranslateFn;
 	/**
 	 * True when another inverse relation from the same `sourceType` is also
 	 * being rendered — in which case the field-name suffix is shown so the
@@ -176,8 +168,8 @@ function InverseRelationSection({
 	basePath,
 	navigate,
 	Link,
-	client,
-	headers,
+	localization,
+	t,
 	ambiguous,
 }: InverseRelationSectionProps) {
 	const [isExpanded, setIsExpanded] = useState(true);
@@ -186,38 +178,21 @@ function InverseRelationSection({
 	const deleteContent = useDeleteContent(relation.sourceType);
 
 	// Fetch items for this inverse relation
-	const { data: itemsData, refetch } = useQuery({
-		queryKey: [
-			"cmsInverseRelationItems",
+	const {
+		items,
+		total: fetchedTotal,
+		refetch,
+	} = useInverseRelationItems(
+		{
 			contentTypeSlug,
-			relation.sourceType,
+			sourceType: relation.sourceType,
 			itemId,
-			relation.fieldName,
-		],
-		queryFn: async () => {
-			const response = await client(
-				"/content-types/:slug/inverse-relations/:sourceType",
-				{
-					method: "GET",
-					params: { slug: contentTypeSlug, sourceType: relation.sourceType },
-					query: { itemId, fieldName: relation.fieldName },
-					headers,
-				},
-			);
-			return (
-				(
-					response as {
-						data?: { items: SerializedContentItemWithType[]; total: number };
-					}
-				).data ?? { items: [], total: 0 }
-			);
+			fieldName: relation.fieldName,
 		},
-		staleTime: 1000 * 60 * 5,
-		enabled: isExpanded,
-	});
+		{ enabled: isExpanded },
+	);
 
-	const items = itemsData?.items ?? [];
-	const total = itemsData?.total ?? relation.count;
+	const total = fetchedTotal || relation.count;
 
 	const handleDelete = async () => {
 		if (deleteItemId) {
@@ -225,12 +200,16 @@ function InverseRelationSection({
 			try {
 				await deleteContent.mutateAsync(deleteItemId);
 				setDeleteItemId(null);
-				refetch();
+				void refetch();
 			} catch (error) {
 				const message =
 					error instanceof Error
 						? error.message
-						: "Failed to delete item. Please try again.";
+						: (localization?.CMS_RELATED_DELETE_ERROR ??
+							t(
+								"cms.relations.relatedDeleteError",
+								"Failed to delete item. Please try again.",
+							));
 				setDeleteError(message);
 			}
 		}
@@ -241,7 +220,7 @@ function InverseRelationSection({
 		// Navigate to create page with query param to pre-fill the relation.
 		// ContentEditorPage reads prefill_* query params and passes them to ContentForm as initialData.
 		const createUrl = `${basePath}/cms/${relation.sourceType}/new?prefill_${relation.fieldName}=${itemId}`;
-		navigate(createUrl);
+		void navigate?.(createUrl);
 	};
 
 	const LinkComponent = Link ?? "a";
@@ -275,11 +254,20 @@ function InverseRelationSection({
 				<CardContent className="pt-0">
 					{items.length === 0 ? (
 						<p className="text-sm text-muted-foreground py-2">
-							No {relation.sourceTypeName.toLowerCase()} items yet.
+							{(
+								localization?.CMS_RELATED_EMPTY ??
+								t(
+									"cms.relations.relatedEmpty",
+									"No {sourceTypeName} items yet.",
+								)
+							).replace(
+								"{sourceTypeName}",
+								relation.sourceTypeName.toLowerCase(),
+							)}
 						</p>
 					) : (
 						<ul className="space-y-2">
-							{items.map((item) => {
+							{items.map((item: SerializedContentItemWithType) => {
 								const displayValue = getDisplayValue(item);
 								const editUrl = `${basePath}/cms/${relation.sourceType}/${item.id}`;
 								return (
@@ -294,30 +282,45 @@ function InverseRelationSection({
 											<span className="truncate">{displayValue}</span>
 											<ExternalLink className="h-3 w-3 opacity-50" />
 										</LinkComponent>
-										<Button
-											variant="ghost"
-											size="icon"
-											className="h-7 w-7 text-muted-foreground hover:text-destructive"
-											onClick={() => setDeleteItemId(item.id)}
+										<CanAccess
+											resource="cms:content"
+											action="delete"
+											params={{ typeSlug: relation.sourceType, id: item.id }}
 										>
-											<Trash2 className="h-3.5 w-3.5" />
-										</Button>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-7 w-7 text-muted-foreground hover:text-destructive"
+												onClick={() => setDeleteItemId(item.id)}
+											>
+												<Trash2 className="h-3.5 w-3.5" />
+											</Button>
+										</CanAccess>
 									</li>
 								);
 							})}
 						</ul>
 					)}
 					<div className="mt-3 pt-3 border-t">
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={handleAddNew}
-							className="w-full"
+						<CanAccess
+							resource="cms:content"
+							action="create"
+							params={{ typeSlug: relation.sourceType }}
 						>
-							<Plus className="h-4 w-4 mr-2" />
-							Add {relation.sourceTypeName}
-							{fieldLabel ? ` (${fieldLabel})` : ""}
-						</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={handleAddNew}
+								className="w-full"
+							>
+								<Plus className="h-4 w-4 mr-2" />
+								{(
+									localization?.CMS_RELATED_ADD ??
+									t("cms.relations.relatedAdd", "Add {sourceTypeName}")
+								).replace("{sourceTypeName}", relation.sourceTypeName)}
+								{fieldLabel ? ` (${fieldLabel})` : ""}
+							</Button>
+						</CanAccess>
 					</div>
 				</CardContent>
 			)}
@@ -335,23 +338,41 @@ function InverseRelationSection({
 				<AlertDialogContent>
 					<AlertDialogHeader>
 						<AlertDialogTitle>
-							Delete {relation.sourceTypeName}?
+							{(
+								localization?.CMS_RELATED_DELETE_TITLE ??
+								t(
+									"cms.relations.relatedDeleteTitle",
+									"Delete {sourceTypeName}?",
+								)
+							).replace("{sourceTypeName}", relation.sourceTypeName)}
 						</AlertDialogTitle>
 						<AlertDialogDescription>
-							This action cannot be undone. This will permanently delete this{" "}
-							{relation.sourceTypeName.toLowerCase()}.
+							{(
+								localization?.CMS_RELATED_DELETE_DESCRIPTION ??
+								t(
+									"cms.relations.relatedDeleteDescription",
+									"This action cannot be undone. This will permanently delete this {sourceTypeName}.",
+								)
+							).replace(
+								"{sourceTypeName}",
+								relation.sourceTypeName.toLowerCase(),
+							)}
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					{deleteError && (
 						<p className="text-sm text-destructive">{deleteError}</p>
 					)}
 					<AlertDialogFooter>
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogCancel>
+							{localization?.CMS_BUTTON_CANCEL ??
+								t("cms.common.cancel", "Cancel")}
+						</AlertDialogCancel>
 						<AlertDialogAction
 							onClick={handleDelete}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							Delete
+							{localization?.CMS_BUTTON_DELETE ??
+								t("cms.common.delete", "Delete")}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>