@protobase/ui 0.20.0 → 0.21.0

package/dist/app/create/create-values.js

@@ -29,6 +29,7 @@ const createSections = (model, view) => {
 		fields: rest
 	}];
 };
+/** A chosen record's key as the API takes it: a number when the target's key is an integer. */
 const keyValue = (target, key) => {
 	return (target?.primaryKey.length === 1 ? target.fields[target.primaryKey[0]]?.type : void 0) === "integer" ? Number(key) : key;
 };
@@ -68,4 +69,4 @@ const initialDraft = (model, sections, given = {}) => Object.fromEntries(section
 })));
 const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
 //#endregion
-export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired };
+export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired, keyValue };

package/dist/app/field-editor.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
+import { buttonClass } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
@@ -14,6 +15,7 @@ import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
+import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -42,17 +44,33 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		placeholder,
 		onChange
 	});
-	if (field.type === "relation" && relationPicker && !field.readOnly) return /* @__PURE__ */ jsx(RelationPicker, {
-		target: relationPicker.target,
-		view: relationPicker.view,
-		value: String(value),
-		label: relationLabel,
-		invalid,
-		onChange: (next, label) => onChange({
-			key: next,
-			label
-		})
-	});
+	if (field.type === "relation" && relationPicker && !field.readOnly && !locked) {
+		const picker = /* @__PURE__ */ jsx(RelationPicker, {
+			target: relationPicker.target,
+			view: relationPicker.view,
+			value: String(value),
+			label: relationLabel,
+			invalid,
+			onChange: (next, label) => onChange({
+				key: next,
+				label
+			})
+		});
+		if (!relationTo) return picker;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: picker
+			}), /* @__PURE__ */ jsx(AppLink, {
+				to: relationTo,
+				"aria-label": `Open ${relationLabel ?? String(value)}`,
+				title: "Open",
+				className: cn(buttonClass({ variant: "ghost" }), "w-8 px-0"),
+				children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+			})]
+		});
+	}
 	if (field.type === "boolean" && locked) return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5 text-muted-foreground",
 		children: displayValue(field, stored, hints)

package/dist/app/history/describe-change.js

@@ -0,0 +1,44 @@
+import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
+//#region src/app/history/describe-change.ts
+const verbs = {
+	create: "created this",
+	update: "changed",
+	delete: "deleted this",
+	undelete: "restored this"
+};
+/** Who made a change: their name, else their id; a write from outside the app names the database role. */
+const changedBy = (change) => {
+	if (change.actor) return change.actor.name ?? change.actor.id;
+	return change.databaseRole ? `Database (${change.databaseRole})` : "Database";
+};
+/**
+* A change as the record page tells it: who, what they did, and for an update each changed field the model still has,
+* before and after, as the view labels and formats it.
+*/
+const describeChange = (change, model, view) => {
+	const fields = (change.operation === "create" ? [] : change.changed).flatMap((name) => {
+		const field = model.fields[name];
+		if (!field || name === model.softDelete) return [];
+		const hints = view?.fields[name];
+		const label = hints?.label ?? humanize(name);
+		if (field.sensitive || !change.before || !change.after) return [{
+			name,
+			label
+		}];
+		return [{
+			name,
+			label,
+			before: displayValue(field, change.before[name], hints),
+			after: displayValue(field, change.after[name], hints)
+		}];
+	});
+	const verb = change.operation === "update" && fields.length === 0 ? "changed this" : verbs[change.operation];
+	return {
+		who: changedBy(change),
+		verb,
+		fields
+	};
+};
+//#endregion
+export { changedBy, describeChange };

package/dist/app/history/history-section.js

@@ -0,0 +1,92 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { formatDateTime, formatRelativeTime } from "../../format/date.js";
+import { Button } from "../../primitives/button.js";
+import { Section } from "../../record-view/section.js";
+import { ErrorBanner } from "../error-banner.js";
+import { describeChange } from "./describe-change.js";
+import { useRecordHistory } from "./use-record-history.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/history/history-section.tsx
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+});
+const Change = ({ change, model, view }) => {
+	const { who, verb, fields } = describeChange(change, model, view);
+	const at = Date.parse(change.at);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col gap-1.5 py-3 first:pt-0 last:pb-0",
+		children: [/* @__PURE__ */ jsxs("p", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: who
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: verb
+			}),
+			" ",
+			/* @__PURE__ */ jsxs("time", {
+				dateTime: change.at,
+				title: formatDateTime(at),
+				className: "text-muted-foreground",
+				children: ["· ", formatRelativeTime(Math.max(0, Math.round((Date.now() - at) / 1e3)))]
+			})
+		] }), fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1",
+			children: fields.map((field) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "text-muted-foreground",
+					children: field.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "min-w-0 break-words",
+					children: field.before === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "changed"
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("del", {
+							className: "text-muted-foreground",
+							children: field.before
+						}),
+						" → ",
+						/* @__PURE__ */ jsx("ins", {
+							className: "no-underline",
+							children: field.after
+						})
+					] })
+				})]
+			}, field.name))
+		})]
+	});
+};
+/** The record's changes, newest first, with who made each and the fields before and after; Show more pages further back. */
+const HistorySection = ({ item, model, view, recordKey, etag }) => {
+	const history = useRecordHistory(model.name, recordKey, item.limit ?? 10, etag);
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: history.isPending ? /* @__PURE__ */ jsx(Loading, {}) : history.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the history",
+			error: history.error
+		}) : history.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "No changes kept yet."
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ol", {
+			className: "divide-y divide-border",
+			children: history.items.map((change) => /* @__PURE__ */ jsx(Change, {
+				change,
+				model,
+				view
+			}, change.id))
+		}), history.hasNextPage && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			className: "mt-4",
+			disabled: history.isFetchingNextPage,
+			onClick: () => void history.fetchNextPage(),
+			children: "Show more"
+		})] })
+	});
+};
+//#endregion
+export { HistorySection };

package/dist/app/history/use-record-history.js

@@ -0,0 +1,34 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useEffect } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+//#region src/app/history/use-record-history.ts
+/** How long after a save the history looks again: the server keeps a change just after its write commits. */
+const afterSave = 1500;
+/**
+* A record's changes, newest first, `pageSize` at a time. Its key starts with the record's, so refreshing the record
+* refreshes it too; it looks again shortly after `etag` changes, once the server has kept the save.
+*/
+const useRecordHistory = (resource, recordKey, pageSize, etag) => {
+	const client = useClient();
+	const query = useInfiniteQuery({
+		queryKey: keys.history(resource, recordKey, pageSize),
+		initialPageParam: "",
+		queryFn: ({ pageParam }) => client.history(resource, recordKey, {
+			pageSize,
+			pageToken: pageParam
+		}),
+		getNextPageParam: (last) => last.nextPageToken || void 0
+	});
+	const { refetch } = query;
+	useEffect(() => {
+		const timer = setTimeout(() => void refetch(), afterSave);
+		return () => clearTimeout(timer);
+	}, [etag, refetch]);
+	return {
+		...query,
+		items: query.data?.pages.flatMap((page) => page.items) ?? []
+	};
+};
+//#endregion
+export { useRecordHistory };

package/dist/app/record-page.js

@@ -18,8 +18,9 @@ import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
-import { isRequiredOnEdit } from "../live/field-values.js";
+import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
+import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
@@ -45,6 +46,7 @@ import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
+import { HistorySection } from "./history/history-section.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
@@ -57,8 +59,9 @@ import { enumLabel } from "@protobase/schema";
 //#region src/app/record-page.tsx
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
-* The view's layout, or one section with the editable fields when the view has none. The read view, which is all a
-* user who may only read the resource gets, shows every field: the record rather than what can be changed.
+* The view's layout, or one section with the editable fields when the view has none, then History when the resource
+* keeps it. The read view, which is all a user who may only read the resource gets, shows every field: the record rather
+* than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
@@ -68,7 +71,10 @@ const layoutFor = (model, view, read) => {
 		kind: "section",
 		title: "Details",
 		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
-	}];
+	}, ...model.history ? [{
+		kind: "history",
+		title: "History"
+	}] : []];
 };
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
@@ -152,6 +158,24 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
 	});
 	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	const pickTarget = (name) => {
+		const field = model.fields[name];
+		const target = field?.relation ? meta.resources[field.relation.resource] : void 0;
+		if (!target || target.primaryKey.length !== 1 || name === model.tenant || model.primaryKey.includes(name)) return void 0;
+		return target;
+	};
+	const picked = Object.values(model.fields).filter((field) => pickTarget(field.name));
+	const drafted = {
+		...stored.record,
+		...Object.fromEntries(picked.map((field) => [field.name, fromDraft(field, editor.value(field.name))]))
+	};
+	const chosen = useRelatedRecords(model, view, meta.resources, meta.views, drafted, basePath);
+	const pick = (name, next) => {
+		const target = pickTarget(name);
+		if (!target || !isChosen(next)) return editor.change(name, next);
+		queryClient.setQueryData(keys.relatedLabel(target.name, next.key), next.label);
+		editor.change(name, keyValue(target, next.key));
+	};
 	const { fields: fieldTypes } = useProjectUi();
 	const layout = layoutFor(model, view, shown === "read").filter((item) => whenShown(item.when, editing));
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
@@ -167,6 +191,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		const access = fieldAccess(stored.permissions, name);
 		if (!field || access === "hidden") return null;
 		const conflict = editor.conflicts[name];
+		const target = pickTarget(name);
 		return /* @__PURE__ */ jsx(Field, {
 			label: hint(name)?.label ?? humanize(name),
 			required: shown === "form" && access !== "read" && isRequiredOnEdit(field),
@@ -189,13 +214,17 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				hints: hint(name),
 				value: editor.value(name),
 				stored: stored.record[name],
-				relationLabel: related.labels[name],
-				relationTo: related.addresses[name],
+				relationLabel: chosen.labels[name],
+				relationTo: chosen.addresses[name],
+				relationPicker: target && {
+					target,
+					view: meta.views[target.name]
+				},
 				locked: shown !== "form" || access === "read",
 				invalid: Boolean(editor.errors[name]),
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
-				onChange: (next) => editor.change(name, next)
+				onChange: (next) => pick(name, next)
 			}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-9" })
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
@@ -381,6 +410,13 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										record: stored.record,
 										recordKey
 									}, `gallery:${index}`)];
+									if (item.kind === "history") return [/* @__PURE__ */ jsx(HistorySection, {
+										item,
+										model,
+										view,
+										recordKey,
+										etag: stored.etag
+									}, `history:${index}`)];
 									if (item.kind !== "section") return [];
 									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
 									const facts = shown === "read" && item.presentation === "facts";

package/dist/data/api-provider.d.ts

@@ -16,6 +16,10 @@ export declare const useClient: () => {
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").HistoryPage>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
@@ -57,6 +61,10 @@ export declare const useResourceClient: (resource: string) => {
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").HistoryPage>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;

package/dist/data/query-keys.js

@@ -58,6 +58,14 @@ const keys = {
 		resource,
 		key
 	],
+	/** A record's changes; starts with `record`, so refreshing the record refreshes them too. */
+	history: (resource, key, pageSize) => [
+		"record",
+		resource,
+		key,
+		"history",
+		pageSize
+	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,

package/dist/format/date.js

@@ -25,6 +25,19 @@ const formatAgo = (seconds) => {
 	if (seconds < 86400) return `${Math.floor(seconds / 3600)} h ago`;
 	return `${Math.floor(seconds / 86400)} d ago`;
 };
-new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const units = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
+const formatRelativeTime = (seconds) => {
+	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
+	if (unit === "second" && seconds < 45) return "just now";
+	return relative.format(-Math.floor(seconds / size), unit);
+};
 //#endregion
-export { formatAgo, formatDate, formatDateTime, formatDayShort };
+export { formatAgo, formatDate, formatDateTime, formatDayShort, formatRelativeTime };

package/dist/live/field-values.js

@@ -21,6 +21,7 @@ const toPatchValue = (field, draft) => {
 	const text = String(draft).trim();
 	if (text === "") return field.nullable ? null : "";
 	if (field.type === "integer") return Number(text);
+	if (field.type === "relation") return typeof draft === "number" ? draft : text;
 	if (textEdited.has(field.type) || field.type === "enum") return text;
 	throw new Error(`Not implemented: editing ${field.type} fields`);
 };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.20.0";
+var version = "0.21.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };