@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/EntityIdentityBar.tsx

@@ -0,0 +1,288 @@
+import type { AdminCollection } from "@rebasepro/admin-types";
+import type { EntityStatus } from "@rebasepro/types";
+import React, { useState } from "react";
+import { useTranslation } from "@rebasepro/app";
+import {
+    Button,
+    CheckIcon,
+    cls,
+    CodeIcon,
+    CopyIcon,
+    defaultBorderMixin,
+    HistoryIcon,
+    IconButton,
+    iconSize,
+    LoadingButton,
+    ArrowLeftIcon,
+    Menu,
+    MenuItem,
+    MoreVerticalIcon,
+    Separator,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+
+export interface EntityIdentityBarProps {
+    /** Plural collection name, shown as the breadcrumb ahead of the title. */
+    collection: AdminCollection;
+    /** Resolved record title, already guarded against showing a field default. */
+    title: string;
+    entityId?: string | number;
+    status: EntityStatus;
+
+    dirty: boolean;
+    saving: boolean;
+    /** Undefined hides the Save button — read-only views, or a custom form. */
+    onSave?: () => void;
+    onDiscard?: () => void;
+    saveDisabled?: boolean;
+    hasErrors?: boolean;
+
+    /**
+     * Save and dismiss, for the side panel and the dialog where the dominant
+     * action is "done with this record" rather than "keep editing".
+     */
+    onSaveAndClose?: () => void;
+
+    onBack?: () => void;
+    onInspect?: () => void;
+    /** Opens the inspector straight on its history tab. */
+    onViewHistory?: () => void;
+
+    /**
+     * Actions performed *on* the record — copy, delete, whatever the collection
+     * adds — as menu items under the overflow button. They live here rather
+     * than in a footer, which is what let the footer go away entirely.
+     */
+    recordActions?: React.ReactNode;
+
+    /** Plugin-contributed actions, rendered inline before Save. */
+    pluginActions?: React.ReactNode;
+
+    /** Close / full-screen buttons supplied by the panel that owns this view. */
+    trailing?: React.ReactNode;
+
+    /**
+     * Controls the owning panel puts at the bar's leading edge, ahead of the
+     * breadcrumb — where the side panel's close button lives.
+     */
+    leading?: React.ReactNode;
+}
+
+/**
+ * The persistent header of an entity view: who this record is, and what you can
+ * do to it.
+ *
+ * The title and the id used to live inside the scrolling form, above 72px of
+ * empty space — 219px of chrome that carried nothing and scrolled away the
+ * moment you touched the wheel, leaving no indication of which record you were
+ * editing. They live here instead, and the left half of a bar that was
+ * previously empty now does the work.
+ */
+export function EntityIdentityBar({
+    collection,
+    title,
+    entityId,
+    status,
+    dirty,
+    saving,
+    onSave,
+    onDiscard,
+    saveDisabled,
+    hasErrors,
+    onSaveAndClose,
+    onBack,
+    onInspect,
+    onViewHistory,
+    recordActions,
+    pluginActions,
+    trailing,
+    leading
+}: EntityIdentityBarProps) {
+
+    const { t } = useTranslation();
+
+    const saveLabel = status === "existing"
+        ? t("save")
+        : status === "copy" ? t("create_copy") : t("create");
+    const closeLabel = status === "existing"
+        ? t("save_and_close")
+        : status === "copy" ? t("create_copy_and_close") : t("create_and_close");
+    const hasMenu = Boolean(recordActions) || Boolean(onInspect) || Boolean(onViewHistory);
+
+    return (
+        <div className={cls(
+            "h-[52px] shrink-0 flex items-center gap-2 pl-1.5 pr-2 border-b",
+            "bg-surface-50 dark:bg-surface-900",
+            defaultBorderMixin
+        )}>
+            {leading}
+
+            {onBack && (
+                <Tooltip title={t("back")}>
+                    <IconButton size={"small"} onClick={onBack} aria-label={t("back")}>
+                        <ArrowLeftIcon size={iconSize.smallest}/>
+                    </IconButton>
+                </Tooltip>
+            )}
+
+            <Typography variant={"caption"}
+                className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
+                {collection.name}&nbsp;/
+            </Typography>
+
+            <span className={"font-headers font-semibold text-[15px] tracking-tight truncate min-w-0"}
+                title={title}>
+                {title}
+            </span>
+
+            {entityId !== undefined && <IdChip value={String(entityId)}/>}
+
+            <div className={"flex-1"}/>
+
+            {/* Only where there is something to save. The read-only detail
+                view has no Save button, and reporting "Saved" there implies an
+                editing session the user never started. */}
+            {onSave && <SaveState dirty={dirty} saving={saving} status={status} t={t}/>}
+
+            {pluginActions}
+
+            {onDiscard && dirty && !saving && (
+                <Button variant={"text"} size={"small"} onClick={onDiscard}>
+                    {status === "existing" ? t("discard") : t("clear")}
+                </Button>
+            )}
+
+            {onSave && (
+                <Tooltip title={hasErrors
+                    ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving")
+                    : undefined}>
+                    <LoadingButton
+                        // Where there is something to close, closing is the
+                        // dominant intent and takes the filled treatment.
+                        variant={onSaveAndClose ? "text" : "filled"}
+                        color={"primary"}
+                        size={"small"}
+                        loading={saving && !onSaveAndClose}
+                        disabled={saveDisabled}
+                        onClick={onSave}>
+                        {saveLabel}
+                    </LoadingButton>
+                </Tooltip>
+            )}
+
+            {onSaveAndClose && (
+                <LoadingButton variant={"filled"}
+                    color={"primary"}
+                    size={"small"}
+                    loading={saving}
+                    disabled={saveDisabled}
+                    onClick={onSaveAndClose}>
+                    {closeLabel}
+                </LoadingButton>
+            )}
+
+            {hasMenu && (
+                <Menu align={"end"}
+                    trigger={
+                        <IconButton size={"small"} aria-label={t("more_actions") ?? "More actions"}>
+                            <MoreVerticalIcon size={iconSize.smallest}/>
+                        </IconButton>
+                    }>
+                    {recordActions}
+                    {recordActions && (onInspect || onViewHistory) && <Separator orientation={"horizontal"}/>}
+                    {onViewHistory && (
+                        <MenuItem onClick={onViewHistory}>
+                            <HistoryIcon size={iconSize.smallest}/>
+                            {t("record_history") ?? "History"}
+                        </MenuItem>
+                    )}
+                    {onInspect && (
+                        <MenuItem onClick={onInspect}>
+                            <CodeIcon size={iconSize.smallest}/>
+                            {t("inspect_record") ?? "Inspect record"}
+                        </MenuItem>
+                    )}
+                </Menu>
+            )}
+
+            {trailing}
+        </div>
+    );
+}
+
+/**
+ * The words the unlabelled floating circle never said.
+ *
+ * That indicator was a ✓ / pencil / spinner chip stuck to the top-right of the
+ * scroll area in an `h-0 overflow-visible` container, so it drifted across
+ * field values as you scrolled — and it duplicated what the Save button was
+ * already able to tell you.
+ */
+function SaveState({
+    dirty,
+    saving,
+    status,
+    t
+}: {
+    dirty: boolean;
+    saving: boolean;
+    status: EntityStatus;
+    t: (key: string) => string;
+}) {
+    if (saving) {
+        return <StateText>{t("saving")}</StateText>;
+    }
+    if (dirty) {
+        return <StateText>{t("unsaved_changes_title")}</StateText>;
+    }
+    if (status === "existing") {
+        return <StateText>{t("entity_saved") ?? "Saved"}</StateText>;
+    }
+    return null;
+}
+
+function StateText({ children }: { children: React.ReactNode }) {
+    return (
+        <span className={"text-xs text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden md:inline"}>
+            {children}
+        </span>
+    );
+}
+
+/**
+ * The id, as a chip you can copy rather than a full-width alert holding a UUID.
+ */
+function IdChip({ value }: { value: string }) {
+
+    const { t } = useTranslation();
+    const [copied, setCopied] = useState(false);
+
+    const truncated = value.length > 14
+        ? `${value.slice(0, 8)}…${value.slice(-4)}`
+        : value;
+
+    const copy = () => {
+        navigator.clipboard?.writeText(value).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1600);
+        }, () => undefined);
+    };
+
+    return (
+        <Tooltip title={copied ? t("copied") : value}>
+            <button type={"button"}
+                onClick={copy}
+                aria-label={`${t("copy_id")} ${value}`}
+                className={cls(
+                    "hidden md:inline-flex items-center gap-1.5 shrink-0 px-2 py-0.5 rounded-md",
+                    "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark",
+                    "bg-surface-accent-200/50 dark:bg-white/[0.055]",
+                    "hover:bg-surface-accent-200/75 dark:hover:bg-white/[0.09] transition-colors"
+                )}>
+                {truncated}
+                {copied ? <CheckIcon size={iconSize.smallest}/> : <CopyIcon size={iconSize.smallest}/>}
+            </button>
+        </Tooltip>
+    );
+}

package/src/components/EntityInspector.tsx

@@ -0,0 +1,137 @@
+import type { AdminCollection } from "@rebasepro/admin-types";
+import type { Entity } from "@rebasepro/types";
+import type { FormContext } from "../types/fields";
+import React, { lazy, Suspense, useEffect } from "react";
+import {
+    CircularProgressCenter,
+    cls,
+    defaultBorderMixin,
+    ErrorBoundary,
+    IconButton,
+    iconSize,
+    Tab,
+    Tabs,
+    XIcon
+} from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
+import { JsonPreviewBinding } from "./JsonPreviewBinding";
+
+const EntityHistoryView = lazy(() => import("./history").then(m => ({ default: m.EntityHistoryView })));
+
+export type InspectorTab = "json" | "history";
+
+export interface EntityInspectorProps {
+    /** The open tab, or null when the panel is closed. */
+    tab: InspectorTab | null;
+    onTabChange: (tab: InspectorTab) => void;
+    onClose: () => void;
+    collection: AdminCollection;
+    entity?: Entity<Record<string, unknown>>;
+    formContext?: FormContext<Record<string, unknown>>;
+    values?: Record<string, unknown>;
+    /** History is only offered when the collection records it. */
+    includeHistory: boolean;
+    /**
+     * Bumped once per save by the view that owns the form. The panel stays open
+     * across a save — the bar's Save button sits above it — so without this the
+     * history list would still be the one fetched when the panel opened.
+     */
+    refreshToken?: number;
+}
+
+/**
+ * Raw values and revision history, as an inspector rather than as tabs.
+ *
+ * These were the first two entries in the entity tab strip — two icon-only tabs
+ * with no label and no tooltip, sitting *before* the record you opened the page
+ * to edit. They are developer tools, not places the record lives, so they belong
+ * behind one affordance in the bar; a content editor should never meet `<>`.
+ *
+ * The panel sits below the identity bar and beside the record deliberately: you
+ * keep seeing which record you are inspecting, and keep being able to edit it.
+ */
+export function EntityInspector({
+    tab,
+    onTabChange,
+    onClose,
+    collection,
+    entity,
+    formContext,
+    values,
+    includeHistory,
+    refreshToken
+}: EntityInspectorProps) {
+
+    const { t } = useTranslation();
+    const open = tab !== null;
+
+    useEffect(() => {
+        if (!open) return;
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                onClose();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [open, onClose]);
+
+    if (!open) return null;
+
+    return (
+        // Docked beside the record rather than over it. As an overlay with a
+        // scrim this was modal in effect: the first click into the form went to
+        // the scrim and closed the panel, so a revision list could never be
+        // open while you edited the record it belongs to — which is the only
+        // time watching it is worth anything.
+        <div className={cls(
+            "relative flex flex-col shrink-0 h-full w-full max-w-md border-l",
+            "bg-white dark:bg-surface-800",
+            defaultBorderMixin
+        )}
+        role={"complementary"}
+        aria-label={t("inspect_record") ?? "Inspect record"}>
+
+            <div className={cls("h-11 shrink-0 flex items-center gap-2 pl-4 pr-1.5 border-b", defaultBorderMixin)}>
+                <span className={"text-sm font-semibold"}>{t("inspect") ?? "Inspect"}</span>
+
+                <div className={"flex-1"}/>
+
+                {includeHistory
+                    ? <Tabs value={tab ?? "json"}
+                        className={"!w-fit"}
+                        onValueChange={(v) => onTabChange(v as InspectorTab)}>
+                        <Tab value={"json"} className={"text-xs"}>{t("json")}</Tab>
+                        <Tab value={"history"} className={"text-xs"}>
+                            {t("record_history") ?? "History"}
+                        </Tab>
+                    </Tabs>
+                    : null}
+
+                <IconButton size={"small"} onClick={onClose}
+                    aria-label={t("close_inspector") ?? "Close inspector"}>
+                    <XIcon size={iconSize.smallest}/>
+                </IconButton>
+            </div>
+
+            <div className={"flex-1 min-h-0 overflow-auto"}>
+                <ErrorBoundary>
+                    {tab === "json" && (
+                        <JsonPreviewBinding values={values ?? entity?.values ?? {}}/>
+                    )}
+                    {tab === "history" && includeHistory && formContext && (
+                        <Suspense fallback={<CircularProgressCenter/>}>
+                            <EntityHistoryView
+                                collection={collection}
+                                entity={entity}
+                                formContext={formContext}
+                                refreshToken={refreshToken}
+                                modifiedValues={values ?? entity?.values}/>
+                        </Suspense>
+                    )}
+                </ErrorBoundary>
+            </div>
+        </div>
+    );
+}

package/src/components/EntityPreviewBinding.tsx

@@ -29,6 +29,7 @@ import { getEntityPreviewKeys, getEntityTitlePropertyKeyForEntity } from "../uti
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
+import { NestedEntityPreviewBoundary } from "./EntityPreviewNesting";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
 export type EntityPreviewBindingProps = {
@@ -114,7 +115,10 @@ export function EntityPreviewBindingData({
         : undefined;
 
     return (
-        <>
+        // Everything below renders *inside* this preview: a reference or
+        // relation among the preview properties collapses to one line instead
+        // of nesting another bordered card with its own id and action button.
+        <NestedEntityPreviewBoundary>
             <div className={cls("flex  shrink-0", {
                 "w-6 h-6 mx-1 my-0.5": size === "small" || size === "smallest",
                 "w-8 h-8 ml-1 mr-2 m-2 self-start": size === "medium",
@@ -214,7 +218,7 @@ export function EntityPreviewBindingData({
                 </div>}
 
             {actions && <div className="flex-shrink-0">{actions}</div>}
-        </>
+        </NestedEntityPreviewBoundary>
     );
 }
 

package/src/components/EntityPreviewNesting.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+/**
+ * How deep the current entity preview is nested inside another one.
+ *
+ * A reference or relation rendered on its own (a form field, a table cell) is
+ * at depth 0 and gets the full card treatment: image slot, id, title, preview
+ * properties and a link to the side panel. A reference rendered *inside*
+ * another entity preview is at depth 1+, where repeating that card produces a
+ * box-inside-a-box with its own borders, id line and action button. Nested
+ * previews collapse to a compact chip instead.
+ */
+const EntityPreviewDepthContext = React.createContext<number>(0);
+
+/**
+ * Current entity preview nesting depth. 0 means "not inside another preview".
+ */
+export function useEntityPreviewDepth(): number {
+    return React.useContext(EntityPreviewDepthContext);
+}
+
+/**
+ * True when the preview being rendered lives inside another entity preview,
+ * and should therefore render its compact variant.
+ */
+export function useIsNestedEntityPreview(): boolean {
+    return useEntityPreviewDepth() > 0;
+}
+
+/**
+ * Marks its children as being rendered inside an entity preview, so any
+ * reference or relation below collapses to a chip.
+ */
+export function NestedEntityPreviewBoundary({ children }: { children: React.ReactNode }) {
+    const depth = useEntityPreviewDepth();
+    return <EntityPreviewDepthContext.Provider value={depth + 1}>
+        {children}
+    </EntityPreviewDepthContext.Provider>;
+}
+
+/**
+ * Resets the nesting depth back to 0. Used by surfaces that open a fresh
+ * rendering context for an entity — a side panel, a dialog — from within a
+ * preview, where the children are no longer visually nested.
+ */
+export function RootEntityPreviewBoundary({ children }: { children: React.ReactNode }) {
+    return <EntityPreviewDepthContext.Provider value={0}>
+        {children}
+    </EntityPreviewDepthContext.Provider>;
+}

package/src/components/EntityViewBinding.tsx

@@ -3,10 +3,8 @@ import type { Properties } from "@rebasepro/types";
 import type { CustomizationController, AdminCollection } from "@rebasepro/admin-types";
 import React from "react";
 import { Entity } from "@rebasepro/types";
-import { cls, defaultBorderMixin, ExternalLinkIcon, IconButton, Typography } from "@rebasepro/ui";
-;
+import { ExternalLinkIcon, IconButton, Tooltip } from "@rebasepro/ui";
 import { useCustomizationController } from "@rebasepro/app";
-import { useAuthController } from "@rebasepro/app";
 import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
@@ -19,6 +17,15 @@ export interface EntityViewBindingProps<M extends Record<string, unknown>> {
     className?: string;
 }
 
+/**
+ * The read-only rendering of a record's values.
+ *
+ * This used to prepend a synthetic `Id` row of its own. Between that row, the
+ * collection's own id property, and the `path/id` chip above it, the same UUID
+ * appeared three times — and in the ~340px split pane each copy wrapped over
+ * four lines, so most of the first screen was one id repeated. The id is now a
+ * copyable chip in the identity bar, once.
+ */
 export function EntityViewBinding<M extends Record<string, unknown>>(
     {
         entity,
@@ -29,40 +36,36 @@ export function EntityViewBinding<M extends Record<string, unknown>>(
 
     const customizationController: CustomizationController = useCustomizationController();
 
-    const properties: Properties = collection.properties;
+    // A single surrogate id is the chip in the identity bar, so listing it again
+    // as the first row here is the duplication the form already removed.
+    //
+    // A composite key is different: `entity.id` is then a synthesised address
+    // (`a:::b`), and the real key columns are data — on a junction row they say
+    // which two records this joins. Those stay in the table.
+    const properties: Properties = React.useMemo(() => {
+        const entries = Object.entries(collection.properties ?? {});
+        const idKeys = entries.filter(([, p]) => p && "isId" in p && p.isId);
+        if (idKeys.length !== 1) return collection.properties;
+        return Object.fromEntries(entries.filter(([key]) => key !== idKeys[0][0])) as Properties;
+    }, [collection.properties]);
+    const externalLink = customizationController?.entityLinkBuilder?.({ entity });
 
     return (
-        <div className={"w-full " + className}>
-            <div className={"w-full mb-4 p-4"}>
+        <div className={"w-full " + (className ?? "")}>
 
-                <div className={`grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`}>
-                    <div className="col-span-4 pr-2">
-                        <Typography variant="caption"
-                            color={"secondary"}
-                            component={"span"}
-                            className="break-words">
-                            Id
-                        </Typography>
-                    </div>
-                    <div className="col-span-8">
-                        <div
-                            className="flex-grow text-surface-900 dark:text-white flex items-center">
-                            <span className="flex-grow mr-2">{entity.id}</span>
-                            {customizationController?.entityLinkBuilder &&
-                                <a href={customizationController.entityLinkBuilder({ entity })}
-                                    rel="noopener noreferrer"
-                                    target="_blank">
-                                    <IconButton>
-                                        <ExternalLinkIcon/>
-                                    </IconButton>
-                                </a>}
-                        </div>
-                    </div>
+            {externalLink && (
+                <div className={"flex justify-end mb-2"}>
+                    <Tooltip title={"Open in the live site"}>
+                        <a href={externalLink} rel={"noopener noreferrer"} target={"_blank"}>
+                            <IconButton size={"small"}>
+                                <ExternalLinkIcon/>
+                            </IconButton>
+                        </a>
+                    </Tooltip>
                 </div>
+            )}
 
-                <PropertyCollectionView data={entity.values} properties={properties} size={"medium"}/>
-
-            </div>
+            <PropertyCollectionView data={entity.values} properties={properties} size={"medium"}/>
         </div>
     );
 }

package/src/components/HomePage/FavouritesView.tsx

@@ -1,5 +1,5 @@
 import type { NavigationEntry } from "@rebasepro/admin-types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 ;
 import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
 import { useUserConfigurationPersistence } from "@rebasepro/app";

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,6 +1,6 @@
 
 import type { NavigationEntry, AdminCollection } from "@rebasepro/admin-types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 ;
 import { IconButton, StarIcon, Tooltip } from "@rebasepro/ui";
 import { NavigationCard } from "./NavigationCard";

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,6 +1,6 @@
 import { cardClickableMixin, cardMixin, cls, Typography } from "@rebasepro/ui";
 
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export type SmallNavigationCardProps = {
     name: string,