@maxal_studio/kratosjs-react 1.0.0

package/src/components/modals/ResourceFormModal.test.tsx

@@ -0,0 +1,119 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ResourceFormModal } from './ResourceFormModal';
+import { ResourceModalProvider } from '../../contexts/ResourceModalContext';
+import { PanelMetadataProvider } from '../../contexts/PanelMetadataContext';
+import { FieldRegistryProvider } from '../../contexts/FieldRegistryContext';
+import { mockFetch, restoreFetch, RecordedRequest } from '../../test/mockFetch';
+
+const API = 'http://api.test/admin';
+
+const formSchema = {
+	type: 'form',
+	components: [{ type: 'text-input', name: 'name', label: 'Name' }],
+} as any;
+
+function renderModal(props: Partial<React.ComponentProps<typeof ResourceFormModal>> = {}) {
+	return render(
+		<MemoryRouter>
+			<ResourceModalProvider>
+				<PanelMetadataProvider
+					resources={[{ slug: 'users', label: 'User', pluralLabel: 'Users' } as any]}
+					pages={[]}>
+					<FieldRegistryProvider>
+						<ResourceFormModal
+							isOpen
+							onClose={() => {}}
+							mode="create"
+							resourceSlug="users"
+							apiBaseUrl={API}
+							formSchema={formSchema}
+							{...props}
+						/>
+					</FieldRegistryProvider>
+				</PanelMetadataProvider>
+			</ResourceModalProvider>
+		</MemoryRouter>,
+	);
+}
+
+describe('ResourceFormModal', () => {
+	let requests: RecordedRequest[];
+
+	beforeEach(() => {
+		localStorage.clear();
+		requests = mockFetch([
+			{ match: '/users/update/7', body: { data: { id: 7, name: 'Updated' }, metadata: {} } },
+			{ match: '/users/7', body: { data: { id: 7, name: 'Jane' }, metadata: { recordTitle: 'Jane' } } },
+			{ match: '/users', method: 'POST', body: { data: { id: 9, name: 'New' }, metadata: {} } },
+		]);
+	});
+
+	afterEach(() => {
+		restoreFetch();
+	});
+
+	it('create mode: shows the title, submits the payload and calls onSuccess + onClose', async () => {
+		const user = userEvent.setup();
+		const onSuccess = vi.fn();
+		const onClose = vi.fn();
+		renderModal({ onSuccess, onClose });
+
+		expect(screen.getByText('Create User')).toBeInTheDocument();
+
+		await user.type(screen.getByLabelText(/name/i), 'New');
+		await user.click(screen.getByRole('button', { name: /submit/i }));
+
+		await waitFor(() => expect(onSuccess).toHaveBeenCalledWith(expect.objectContaining({ id: 9 })));
+		expect(onClose).toHaveBeenCalled();
+
+		const createRequest = requests.find(r => r.method === 'POST' && r.url.endsWith('/users'));
+		expect(createRequest?.body).toMatchObject({ name: 'New' });
+	});
+
+	it('edit mode: prefills from the fetched record and posts to the update endpoint', async () => {
+		const user = userEvent.setup();
+		const onSuccess = vi.fn();
+		renderModal({ mode: 'edit', recordId: 7, onSuccess });
+
+		// Title uses the fetched record title
+		expect(await screen.findByText('Editing "Jane"')).toBeInTheDocument();
+		const input = (await screen.findByLabelText(/name/i)) as HTMLInputElement;
+		await waitFor(() => expect(input.value).toBe('Jane'));
+
+		await user.clear(input);
+		await user.type(input, 'Updated');
+		await user.click(screen.getByRole('button', { name: /submit/i }));
+
+		await waitFor(() => expect(onSuccess).toHaveBeenCalled());
+		const updateRequest = requests.find(r => r.url.includes('/users/update/7'));
+		expect(updateRequest?.body).toMatchObject({ name: 'Updated' });
+	});
+
+	it('shows a server error message on failed submission', async () => {
+		restoreFetch();
+		mockFetch([{ match: '/users', method: 'POST', status: 422, body: { message: 'Name already taken' } }]);
+
+		const user = userEvent.setup();
+		const onClose = vi.fn();
+		renderModal({ onClose });
+
+		await user.click(screen.getByRole('button', { name: /submit/i }));
+		expect(await screen.findByText('Name already taken')).toBeInTheDocument();
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
+	it('applies transformPayload before submitting', async () => {
+		const user = userEvent.setup();
+		renderModal({ transformPayload: data => ({ ...data, parentId: 'p1' }) });
+
+		await user.click(screen.getByRole('button', { name: /submit/i }));
+		await waitFor(() => {
+			const createRequest = requests.find(r => r.method === 'POST' && r.url.endsWith('/users'));
+			expect(createRequest?.body).toMatchObject({ parentId: 'p1' });
+		});
+	});
+});

package/src/components/modals/ResourceFormModal.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+import { FormRenderer } from '../../FormRenderer';
+import { ModalDrawer } from '../ModalDrawer';
+import { ErrorAlert } from '../ui/ErrorAlert';
+import { Spinner } from '../ui/Spinner';
+import { useResourceForm, ResourceFormMode } from './useResourceForm';
+import { RecordEnvelope } from '../../api/resourceApi';
+import { translate } from '../../i18n/activeLocale';
+
+export interface ResourceFormModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	mode: ResourceFormMode;
+	resourceSlug: string;
+	resourceName?: string;
+	apiBaseUrl: string;
+	formSchema: SerializedForm;
+	/** Edit mode */
+	recordId?: any;
+	/** Action mode */
+	recordIds?: string[];
+	actionName?: string;
+	actionLabel?: string;
+	isBulk?: boolean;
+	requiresConfirmation?: boolean;
+	modalDescription?: string;
+	/** Adjust the payload before submitting (e.g. inject a relation foreign key) */
+	transformPayload?: (formData: any) => any;
+	/** Override the submit call entirely (e.g. relation create endpoint) */
+	submit?: (payload: any) => Promise<RecordEnvelope>;
+	onSuccess?: (record?: any) => void;
+	depth?: number;
+	onCloseAll?: () => void;
+	/** Show the copy-URL button (edit mode) */
+	copyUrlPath?: string;
+}
+
+/**
+ * The single form modal driving create, edit and action flows.
+ * Replaces v1's CreateModal / EditModal / CreateRelationModal and the form
+ * part of ActionFormModal.
+ */
+export function ResourceFormModal({
+	isOpen,
+	onClose,
+	mode,
+	resourceSlug,
+	resourceName,
+	apiBaseUrl,
+	formSchema,
+	recordId,
+	recordIds,
+	actionName,
+	actionLabel,
+	isBulk,
+	requiresConfirmation,
+	modalDescription,
+	transformPayload,
+	submit,
+	onSuccess,
+	depth = 0,
+	onCloseAll,
+	copyUrlPath,
+}: ResourceFormModalProps) {
+	const [urlCopied, setUrlCopied] = useState(false);
+
+	const form = useResourceForm({
+		mode,
+		resourceSlug,
+		resourceName,
+		apiBaseUrl,
+		recordId,
+		recordIds,
+		actionName,
+		actionLabel,
+		isBulk,
+		requiresConfirmation,
+		modalDescription,
+		transformPayload,
+		submit,
+		onSuccess,
+		onClose,
+		isOpen,
+	});
+
+	const handleCopyUrl = copyUrlPath
+		? () => {
+				navigator.clipboard.writeText(`${window.location.origin}${copyUrlPath}`).then(() => {
+					setUrlCopied(true);
+					setTimeout(() => setUrlCopied(false), 2000);
+				});
+			}
+		: undefined;
+
+	const operation = mode === 'edit' ? 'edit' : mode === 'create' ? 'create' : undefined;
+
+	return (
+		<ModalDrawer
+			isOpen={isOpen}
+			onClose={onClose}
+			title={form.modalTitle}
+			width="max-w-2xl"
+			depth={depth}
+			onCloseAll={onCloseAll}
+			onCopyUrl={handleCopyUrl}
+			urlCopied={urlCopied}>
+			{form.loading && (
+				<div className="flex items-center justify-center py-12">
+					<Spinner size="lg" label={translate('core:common.loading_ellipsis')} />
+				</div>
+			)}
+
+			{form.error && <ErrorAlert className="mb-4" message={form.error} onDismiss={() => form.setError(null)} />}
+
+			{!form.loading && formSchema && (
+				<FormRenderer
+					schema={formSchema}
+					onSubmit={form.handleSubmit}
+					defaultValues={mode === 'edit' ? form.recordData : undefined}
+					apiBaseUrl={apiBaseUrl}
+					resource={resourceSlug}
+					operation={operation}
+				/>
+			)}
+		</ModalDrawer>
+	);
+}

package/src/components/modals/useResourceForm.ts

@@ -0,0 +1,207 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ApiError } from '../../api/http';
+import { createRecord, getRecord, updateRecord, RecordEnvelope } from '../../api/resourceApi';
+import { executeAction, executeBulkAction } from '../../api/actionsApi';
+import { handleRedirect } from '../../utils/redirectHandler';
+import { useConfirm } from '../ui/ConfirmDialog';
+import { useToast } from '../ui/Toast';
+import { usePanelMetadata } from '../../contexts/PanelMetadataContext';
+import { useResourceModal } from '../../contexts/ResourceModalContext';
+import { translate } from '../../i18n/activeLocale';
+
+export type ResourceFormMode = 'create' | 'edit' | 'action';
+
+export interface UseResourceFormOptions {
+	mode: ResourceFormMode;
+	resourceSlug: string;
+	resourceName?: string;
+	apiBaseUrl: string;
+	/** Edit mode */
+	recordId?: any;
+	/** Action mode */
+	recordIds?: string[];
+	actionName?: string;
+	actionLabel?: string;
+	isBulk?: boolean;
+	requiresConfirmation?: boolean;
+	modalDescription?: string;
+	/** Adjust the payload before submitting (e.g. inject a relation foreign key) */
+	transformPayload?: (formData: any) => any;
+	/** Override the submit call entirely (e.g. relation create endpoint) */
+	submit?: (payload: any) => Promise<RecordEnvelope>;
+	onSuccess?: (record?: any) => void;
+	onClose: () => void;
+	isOpen: boolean;
+}
+
+export interface ResourceFormApi {
+	modalTitle: string;
+	error: string | null;
+	setError: (error: string | null) => void;
+	/** True while fetching the record in edit mode */
+	loading: boolean;
+	recordData: Record<string, any>;
+	handleSubmit: (formData: any) => Promise<void>;
+}
+
+/**
+ * The shared behavior of every form modal (create / edit / action):
+ * record fetch, payload submission, error mapping, redirects, success
+ * toasts and modal-title registration. v1 copy-pasted this across
+ * CreateModal, EditModal, CreateRelationModal and ActionFormModal.
+ */
+export function useResourceForm(options: UseResourceFormOptions): ResourceFormApi {
+	const {
+		mode,
+		resourceSlug,
+		resourceName,
+		apiBaseUrl,
+		recordId,
+		recordIds = [],
+		actionName,
+		actionLabel,
+		isBulk = false,
+		requiresConfirmation = false,
+		modalDescription,
+		transformPayload,
+		submit,
+		onSuccess,
+		onClose,
+		isOpen,
+	} = options;
+
+	const navigate = useNavigate();
+	const confirm = useConfirm();
+	const toast = useToast();
+	const { getResourceLabel } = usePanelMetadata();
+	const { setModalTitle, removeModalTitle } = useResourceModal();
+
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState(mode === 'edit');
+	const [recordData, setRecordData] = useState<Record<string, any>>({});
+	const [recordTitle, setRecordTitle] = useState<string | undefined>(undefined);
+
+	const label = getResourceLabel(resourceSlug) || resourceName || resourceSlug;
+
+	const modalTitle =
+		mode === 'create'
+			? translate('core:form.create_title', { label })
+			: mode === 'edit'
+				? recordTitle
+					? translate('core:form.editing_title', { title: recordTitle })
+					: translate('core:form.edit_title', { label })
+				: actionLabel || actionName || label;
+
+	const modalKey =
+		mode === 'action'
+			? `${resourceSlug}-action-${actionName}-${recordIds.join('-')}`
+			: `${resourceSlug}-${mode}-${recordId ?? 'new'}`;
+
+	// Register the modal title for the breadcrumb
+	useEffect(() => {
+		setModalTitle(modalKey, modalTitle);
+	}, [modalKey, modalTitle, setModalTitle]);
+
+	useEffect(() => {
+		return () => {
+			removeModalTitle(modalKey);
+		};
+	}, [modalKey, removeModalTitle]);
+
+	// Edit mode: fetch the record
+	useEffect(() => {
+		if (mode !== 'edit' || !isOpen || recordId === undefined || recordId === null) return;
+
+		let cancelled = false;
+		const fetchRecord = async () => {
+			setLoading(true);
+			setError(null);
+			try {
+				const result = await getRecord(apiBaseUrl, resourceSlug, recordId);
+				if (cancelled) return;
+				setRecordData(result.data || {});
+				setRecordTitle(result.metadata?.recordTitle);
+			} catch (err: any) {
+				if (!cancelled) setError(err.message);
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		};
+
+		fetchRecord();
+		return () => {
+			cancelled = true;
+		};
+	}, [mode, isOpen, recordId, apiBaseUrl, resourceSlug]);
+
+	const handleSubmit = async (formData: any) => {
+		setError(null);
+		const payload = transformPayload ? transformPayload(formData) : formData;
+
+		if (mode === 'action') {
+			if (requiresConfirmation) {
+				const confirmed = await confirm({
+					title: actionLabel || actionName,
+					message:
+						modalDescription ||
+						(isBulk
+							? translate('core:form.confirm_bulk', { action: actionName, count: recordIds.length })
+							: translate('core:confirm.action_single', { action: actionName })),
+				});
+				if (!confirmed) return;
+			}
+
+			try {
+				const apiUrl = `${apiBaseUrl}/${resourceSlug}`;
+				const result = isBulk
+					? await executeBulkAction(apiUrl, actionName!, recordIds, payload)
+					: await executeAction(apiUrl, actionName!, recordIds[0], payload);
+
+				if (!result.success) {
+					throw new Error(result.message || translate('core:form.action_failed'));
+				}
+
+				if (handleRedirect(result, navigate) || (result.data && handleRedirect(result.data, navigate))) {
+					onClose();
+					return;
+				}
+
+				if (result.message) {
+					toast.success(result.message);
+				}
+				onSuccess?.(result.data);
+				onClose();
+			} catch (err: any) {
+				setError(err.message || translate('core:form.action_failed'));
+			}
+			return;
+		}
+
+		try {
+			const result: RecordEnvelope = submit
+				? await submit(payload)
+				: mode === 'create'
+					? await createRecord(apiBaseUrl, resourceSlug, payload)
+					: await updateRecord(apiBaseUrl, resourceSlug, recordId, payload);
+
+			if (handleRedirect(result, navigate) || handleRedirect(result.data, navigate)) {
+				onClose();
+				return;
+			}
+
+			if (result.metadata?.recordTitle) {
+				setRecordTitle(result.metadata.recordTitle);
+			}
+
+			onSuccess?.(result.data ?? result);
+			onClose();
+		} catch (err: any) {
+			const fallback =
+				mode === 'create' ? translate('core:form.create_failed') : translate('core:form.update_failed');
+			setError(err instanceof ApiError ? err.message : err.message || fallback);
+		}
+	};
+
+	return { modalTitle, error, setError, loading, recordData, handleSubmit };
+}

package/src/components/modals/view/RecordActions.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Edit, Trash2 } from 'lucide-react';
+import { PillButton } from '../../ui/PillButton';
+import { Icon } from '../../utils/Icon';
+import { cn } from '../../../utils/classNames';
+import { translate } from '../../../i18n/activeLocale';
+import { Slot } from '../../../slots/Slot';
+
+export interface RecordActionsProps {
+	actions: any[];
+	canEdit: boolean;
+	canDelete: boolean;
+	onAction: (action: any) => void;
+	onEdit: () => void;
+	onDelete: () => void;
+	/** Resource slug, forwarded to the `detail.actions` slot context. */
+	resourceSlug?: string;
+	/** The loaded record, forwarded to the `detail.actions` slot context. */
+	record?: Record<string, any>;
+}
+
+/**
+ * Sticky action bar at the top of the view modal.
+ */
+export function RecordActions({
+	actions,
+	canEdit,
+	canDelete,
+	onAction,
+	onEdit,
+	onDelete,
+	resourceSlug,
+	record,
+}: RecordActionsProps) {
+	// The action bar renders whenever there are built-in actions OR a slot
+	// contribution; the `empty:hidden` utility collapses it when nothing renders
+	// (the slot wrapper returns no DOM when no contributions are registered).
+	return (
+		<div className="sticky top-0 z-40 flex flex-wrap items-center justify-end gap-1.5 border-b border-border/60 bg-surface px-4 py-3 empty:hidden">
+			<Slot
+				name="detail.actions"
+				context={{ resourceSlug, record }}
+				as="div"
+				className="mr-auto flex flex-wrap items-center gap-1.5 empty:hidden"
+			/>
+			{actions.map(action => (
+				<PillButton
+					key={action.name}
+					onClick={() => onAction(action)}
+					className={cn(action.color)}
+					icon={action.icon ? <Icon name={action.icon} size={16} /> : undefined}>
+					{action.label}
+				</PillButton>
+			))}
+
+			{canEdit && (
+				<PillButton variant="primary" onClick={onEdit} icon={<Edit className="h-4 w-4" />}>
+					{translate('core:common.edit')}
+				</PillButton>
+			)}
+
+			{canDelete && (
+				<PillButton variant="danger" onClick={onDelete} icon={<Trash2 className="h-4 w-4" />}>
+					{translate('core:common.delete')}
+				</PillButton>
+			)}
+		</div>
+	);
+}

package/src/components/modals/view/RecordDetails.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+import { FieldRenderer } from '../../../FieldRenderer';
+import { cn } from '../../../utils/classNames';
+import { getGridClasses } from '../../utils/layoutHelpers';
+import { translate } from '../../../i18n/activeLocale';
+
+export interface RecordDetailsProps {
+	formSchema: SerializedForm;
+	recordData: Record<string, any>;
+	apiBaseUrl?: string;
+	resourceSlug: string;
+}
+
+/**
+ * The "Details" tab of the view modal: renders every form component in
+ * view mode against the loaded record.
+ */
+export function RecordDetails({ formSchema, recordData, apiBaseUrl, resourceSlug }: RecordDetailsProps) {
+	const componentsArray = formSchema.components;
+
+	if (!componentsArray || !Array.isArray(componentsArray) || componentsArray.length === 0) {
+		return <div className="py-8 text-center text-fg-secondary">{translate('core:state.no_fields')}</div>;
+	}
+
+	const detailsGridClasses =
+		!formSchema.columns || formSchema.columns === 1 ? 'space-y-0' : getGridClasses(formSchema.columns, 'gap-0');
+
+	return (
+		<div className={cn('p-6', detailsGridClasses)}>
+			{componentsArray.map((component: any, index: number) => {
+				const fieldValue = component.name ? recordData[component.name] : undefined;
+
+				// Layout components (Group, Section, Tabs, Repeater) need the full
+				// record so nested fields can resolve their values.
+				const needsRecordData =
+					Boolean(component.needsRecordData) || Boolean(component.schema && component.schema.length > 0);
+
+				const componentWithValue = {
+					...component,
+					value: fieldValue,
+					mode: 'view',
+					...(needsRecordData ? { _recordData: recordData } : {}),
+				};
+
+				return (
+					<FieldRenderer
+						key={component.name || index}
+						field={componentWithValue}
+						mode="view"
+						value={fieldValue}
+						apiBaseUrl={apiBaseUrl}
+						resource={resourceSlug}
+						operation="view"
+					/>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/modals/view/RelationPanel.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+import { Plus } from 'lucide-react';
+import { TableRenderer } from '../../../TableRenderer';
+import { SerializedRelation } from '../../../types';
+import { Spinner } from '../../ui/Spinner';
+import { PillButton } from '../../ui/PillButton';
+import { translate } from '../../../i18n/activeLocale';
+
+export interface RelationPanelProps {
+	relation: SerializedRelation;
+	schema: SerializedTable | undefined;
+	apiBaseUrl?: string;
+	parentResourceSlug: string;
+	parentRecordId: string;
+	refreshKey: number;
+	depth: number;
+	onCloseAll?: () => void;
+	onAddRelation: (relation: SerializedRelation) => void;
+}
+
+/**
+ * One relation tab's content: the "Add" button plus the nested relation table.
+ */
+export function RelationPanel({
+	relation,
+	schema,
+	apiBaseUrl,
+	parentResourceSlug,
+	parentRecordId,
+	refreshKey,
+	depth,
+	onCloseAll,
+	onAddRelation,
+}: RelationPanelProps) {
+	if (!schema) {
+		return (
+			<div className="flex justify-center py-8">
+				<Spinner label={translate('core:common.loading_ellipsis')} />
+			</div>
+		);
+	}
+
+	const relatedApiUrl = relation.resourceApiUrl || `${apiBaseUrl}/${relation.resourceSlug}`;
+
+	return (
+		<div className="space-y-3">
+			{schema.canCreate && (
+				<div className="flex justify-end">
+					<PillButton
+						variant="primary"
+						onClick={() => onAddRelation(relation)}
+						icon={<Plus className="h-4 w-4" />}>
+						Add {relation.label}
+					</PillButton>
+				</div>
+			)}
+
+			<TableRenderer
+				isResource={true}
+				key={`${relation.name}-${refreshKey}`}
+				schema={schema}
+				apiUrl={`${apiBaseUrl}/${parentResourceSlug}/${parentRecordId}/relations/${relation.name}`}
+				apiBaseUrl={apiBaseUrl}
+				relatedResourceSlug={relation.resourceSlug}
+				relatedResourceApiUrl={relatedApiUrl}
+				canCreate={schema.canCreate as boolean}
+				canEdit={schema.canEdit as boolean}
+				canDelete={schema.canDelete as boolean}
+				canView={schema.canView as boolean}
+				depth={depth + 1}
+				onCloseAll={onCloseAll}
+			/>
+		</div>
+	);
+}