@btst/stack 1.8.0 → 1.9.0

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

@@ -0,0 +1,329 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+	ChevronDown,
+	ChevronRight,
+	ExternalLink,
+	Plus,
+	Trash2,
+} from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import {
+	Card,
+	CardContent,
+	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 type { CMSPluginOverrides } from "../overrides";
+import type { CMSApiRouter } from "../../api";
+import type { SerializedContentItemWithType } from "../../types";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@workspace/ui/components/alert-dialog";
+
+interface InverseRelation {
+	sourceType: string;
+	sourceTypeName: string;
+	fieldName: string;
+	count: number;
+}
+
+interface InverseRelationsPanelProps {
+	contentTypeSlug: string;
+	itemId: string;
+}
+
+/**
+ * Panel that shows content items that reference this item via belongsTo relations.
+ * For example, when editing a Resource, this shows all Comments that belong to it.
+ */
+export function InverseRelationsPanel({
+	contentTypeSlug,
+	itemId,
+}: InverseRelationsPanelProps) {
+	const { apiBaseURL, apiBasePath, headers, navigate, Link } =
+		usePluginOverrides<CMSPluginOverrides>("cms");
+	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,
+	});
+
+	if (isLoading) {
+		return (
+			<Card className="animate-pulse">
+				<CardHeader>
+					<div className="h-5 w-32 bg-muted rounded" />
+				</CardHeader>
+			</Card>
+		);
+	}
+
+	const inverseRelations = inverseRelationsData ?? [];
+
+	if (inverseRelations.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className="space-y-4">
+			<h3 className="text-lg font-semibold">Related Items</h3>
+			{inverseRelations.map((relation) => (
+				<InverseRelationSection
+					key={`${relation.sourceType}-${relation.fieldName}`}
+					relation={relation}
+					contentTypeSlug={contentTypeSlug}
+					itemId={itemId}
+					basePath={basePath}
+					navigate={navigate}
+					Link={Link}
+					client={client}
+					headers={headers}
+				/>
+			))}
+		</div>
+	);
+}
+
+interface InverseRelationSectionProps {
+	relation: InverseRelation;
+	contentTypeSlug: string;
+	itemId: string;
+	basePath: string;
+	navigate: (path: string) => void;
+	Link?: React.ComponentType<{
+		href?: string;
+		children?: React.ReactNode;
+		className?: string;
+	}>;
+	client: ReturnType<typeof createApiClient<CMSApiRouter>>;
+	headers?: HeadersInit;
+}
+
+function InverseRelationSection({
+	relation,
+	contentTypeSlug,
+	itemId,
+	basePath,
+	navigate,
+	Link,
+	client,
+	headers,
+}: InverseRelationSectionProps) {
+	const [isExpanded, setIsExpanded] = useState(true);
+	const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
+	const [deleteError, setDeleteError] = useState<string | null>(null);
+	const deleteContent = useDeleteContent(relation.sourceType);
+
+	// Fetch items for this inverse relation
+	const { data: itemsData, refetch } = useQuery({
+		queryKey: [
+			"cmsInverseRelationItems",
+			contentTypeSlug,
+			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 }
+			);
+		},
+		staleTime: 1000 * 60 * 5,
+		enabled: isExpanded,
+	});
+
+	const items = itemsData?.items ?? [];
+	const total = itemsData?.total ?? relation.count;
+
+	const handleDelete = async () => {
+		if (deleteItemId) {
+			setDeleteError(null);
+			try {
+				await deleteContent.mutateAsync(deleteItemId);
+				setDeleteItemId(null);
+				refetch();
+			} catch (error) {
+				const message =
+					error instanceof Error
+						? error.message
+						: "Failed to delete item. Please try again.";
+				setDeleteError(message);
+			}
+		}
+	};
+
+	// Create new item with pre-filled belongsTo field
+	const handleAddNew = () => {
+		// 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);
+	};
+
+	const LinkComponent = Link ?? "a";
+
+	return (
+		<Card>
+			<CardHeader className="py-3">
+				<button
+					type="button"
+					onClick={() => setIsExpanded(!isExpanded)}
+					className="flex items-center justify-between w-full text-left"
+				>
+					<CardTitle className="text-base flex items-center gap-2">
+						{isExpanded ? (
+							<ChevronDown className="h-4 w-4" />
+						) : (
+							<ChevronRight className="h-4 w-4" />
+						)}
+						{relation.sourceTypeName} ({total})
+					</CardTitle>
+				</button>
+			</CardHeader>
+			{isExpanded && (
+				<CardContent className="pt-0">
+					{items.length === 0 ? (
+						<p className="text-sm text-muted-foreground py-2">
+							No {relation.sourceTypeName.toLowerCase()} items yet.
+						</p>
+					) : (
+						<ul className="space-y-2">
+							{items.map((item) => {
+								const displayValue = getDisplayValue(item);
+								const editUrl = `${basePath}/cms/${relation.sourceType}/${item.id}`;
+								return (
+									<li
+										key={item.id}
+										className="flex items-center justify-between py-2 px-3 rounded-md bg-muted/50 hover:bg-muted transition-colors"
+									>
+										<LinkComponent
+											href={editUrl}
+											className="flex-1 text-sm hover:underline flex items-center gap-2"
+										>
+											<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)}
+										>
+											<Trash2 className="h-3.5 w-3.5" />
+										</Button>
+									</li>
+								);
+							})}
+						</ul>
+					)}
+					<div className="mt-3 pt-3 border-t">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={handleAddNew}
+							className="w-full"
+						>
+							<Plus className="h-4 w-4 mr-2" />
+							Add {relation.sourceTypeName}
+						</Button>
+					</div>
+				</CardContent>
+			)}
+
+			{/* Delete confirmation dialog */}
+			<AlertDialog
+				open={!!deleteItemId}
+				onOpenChange={(open) => {
+					if (!open) {
+						setDeleteItemId(null);
+						setDeleteError(null);
+					}
+				}}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>
+							Delete {relation.sourceTypeName}?
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							This action cannot be undone. This will permanently delete this{" "}
+							{relation.sourceTypeName.toLowerCase()}.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					{deleteError && (
+						<p className="text-sm text-destructive">{deleteError}</p>
+					)}
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</Card>
+	);
+}
+
+/**
+ * Get a display value from an item's parsedData
+ */
+function getDisplayValue(item: SerializedContentItemWithType): string {
+	const data = item.parsedData as Record<string, unknown>;
+	// Try common display fields
+	const displayFields = ["name", "title", "label", "content", "author", "slug"];
+	for (const field of displayFields) {
+		if (typeof data[field] === "string" && data[field]) {
+			const value = data[field] as string;
+			return value.length > 50 ? `${value.slice(0, 50)}...` : value;
+		}
+	}
+	return item.slug;
+}

package/src/plugins/cms/client/components/pages/content-editor-page.internal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
 import { usePluginOverrides, useBasePath } from "@btst/stack/context";
@@ -11,12 +12,119 @@ import {
 	useUpdateContent,
 } from "../../hooks";
 import { ContentForm } from "../forms/content-form";
+import { InverseRelationsPanel } from "../inverse-relations-panel";
 import { EmptyState } from "../shared/empty-state";
 import { PageWrapper } from "../shared/page-wrapper";
 import { EditorSkeleton } from "../loading/editor-skeleton";
 import { CMS_LOCALIZATION } from "../../localization";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 
+/**
+ * Parse prefill query parameters from the URL.
+ * Looks for query params with the format `prefill_<fieldName>=<value>`
+ * and returns a record of field names to values.
+ *
+ * Uses useState + useEffect pattern to work correctly with SSR/hydration.
+ * During SSR, returns empty object. After hydration, parses URL params.
+ * Also listens for popstate events to handle browser back/forward navigation.
+ *
+ * @example
+ * URL: /cms/comment/new?prefill_resourceId=123&prefill_author=John
+ * Returns: { resourceId: "123", author: "John" }
+ */
+function usePrefillParams(): Record<string, string> {
+	const [prefillData, setPrefillData] = useState<Record<string, string>>({});
+
+	useEffect(() => {
+		if (typeof window === "undefined") {
+			return;
+		}
+
+		const parseAndSetPrefillData = () => {
+			const params = new URLSearchParams(window.location.search);
+			const data: Record<string, string> = {};
+
+			for (const [key, value] of params.entries()) {
+				if (key.startsWith("prefill_")) {
+					const fieldName = key.slice("prefill_".length);
+					if (fieldName) {
+						data[fieldName] = value;
+					}
+				}
+			}
+
+			// Always update state to ensure stale data is cleared when navigating
+			// to a URL without prefill params (e.g., via browser back/forward)
+			setPrefillData(data);
+		};
+
+		// Parse on mount
+		parseAndSetPrefillData();
+
+		// Listen for popstate events (browser back/forward navigation)
+		window.addEventListener("popstate", parseAndSetPrefillData);
+
+		return () => {
+			window.removeEventListener("popstate", parseAndSetPrefillData);
+		};
+	}, []);
+
+	return prefillData;
+}
+
+interface JsonSchemaProperty {
+	fieldType?: string;
+	relation?: {
+		type: "belongsTo" | "hasMany" | "manyToMany";
+		targetType: string;
+	};
+}
+
+/**
+ * Convert prefill params to the correct format for the form.
+ * Relation fields need special handling:
+ * - belongsTo: value should be { id: "uuid" }
+ * - hasMany/manyToMany: value should be [{ id: "uuid" }]
+ *
+ * @param prefillParams - Raw prefill params from URL
+ * @param jsonSchema - The content type's JSON schema
+ * @returns Converted data suitable for initialData
+ */
+function convertPrefillToFormData(
+	prefillParams: Record<string, string>,
+	jsonSchema: Record<string, unknown>,
+): Record<string, unknown> {
+	const properties = jsonSchema.properties as
+		| Record<string, JsonSchemaProperty>
+		| undefined;
+
+	if (!properties) {
+		return prefillParams;
+	}
+
+	const result: Record<string, unknown> = {};
+
+	for (const [fieldName, value] of Object.entries(prefillParams)) {
+		const fieldSchema = properties[fieldName];
+
+		if (fieldSchema?.fieldType === "relation" && fieldSchema.relation) {
+			// Convert relation field value to the correct format
+			if (fieldSchema.relation.type === "belongsTo") {
+				// belongsTo expects { id: "uuid" }
+				result[fieldName] = { id: value };
+			} else {
+				// hasMany/manyToMany expect [{ id: "uuid" }]
+				result[fieldName] = [{ id: value }];
+			}
+		} else {
+			// Non-relation fields: pass through as-is
+			result[fieldName] = value;
+		}
+	}
+
+	return result;
+}
+
 interface ContentEditorPageProps {
 	typeSlug: string;
 	id?: string;
@@ -28,6 +136,10 @@ export function ContentEditorPage({ typeSlug, id }: ContentEditorPageProps) {
 	const localization = { ...CMS_LOCALIZATION, ...overrides.localization };
 	const basePath = useBasePath();
 
+	// Parse prefill query parameters for pre-populating fields when creating new items
+	// This is used by the inverse relations panel to pre-fill the parent relation
+	const prefillParams = usePrefillParams();
+
 	// Call lifecycle hooks for authorization
 	useRouteLifecycle({
 		routeName: "contentEditor",
@@ -127,12 +239,26 @@ export function ContentEditorPage({ typeSlug, id }: ContentEditorPageProps) {
 				<ContentForm
 					key={isEditing ? `edit-${id}` : "create"}
 					contentType={contentType}
-					initialData={item?.parsedData}
+					initialData={
+						isEditing
+							? item?.parsedData
+							: Object.keys(prefillParams).length > 0
+								? convertPrefillToFormData(
+										prefillParams,
+										JSON.parse(contentType.jsonSchema),
+									)
+								: undefined
+					}
 					initialSlug={item?.slug}
 					isEditing={isEditing}
 					onSubmit={handleSubmit}
 					onCancel={() => navigate(`${basePath}/cms/${typeSlug}`)}
 				/>
+
+				{/* Show inverse relations panel when editing (not creating) */}
+				{isEditing && id && (
+					<InverseRelationsPanel contentTypeSlug={typeSlug} itemId={id} />
+				)}
 			</div>
 		</PageWrapper>
 	);