@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/form/EntityFormActions.tsx

@@ -9,8 +9,6 @@ import { getIcon } from "@rebasepro/app";
 import {
     AlertCircleIcon,
     Button,
-    cls,
-    defaultBorderMixin,
     DialogActions,
     IconButton,
     LoadingButton,
@@ -19,11 +17,20 @@ import {
 } from "@rebasepro/ui";
 import { FormexController } from "@rebasepro/forms";
 
+/**
+ * The form's own action bar.
+ *
+ * There used to be two variants: this one, and a `w-80 2xl:w-96` sticky rail
+ * holding the same two buttons above several hundred pixels of nothing — a
+ * fifth of a 1440px viewport reserved for a Save button. The rail is gone. When
+ * the container supplies its own actions (the entity view's identity bar does)
+ * it passes `showDefaultActions={false}`, and this renders only what the bar
+ * cannot host: the saving error, plugin actions, and collection form actions.
+ */
 export function EntityFormActions({
     path,
     collection,
     entity,
-    layout,
     savingError,
     formex,
     disabled,
@@ -31,10 +38,11 @@ export function EntityFormActions({
     pluginActions,
     openEntityMode,
     navigateBack,
-    formContext
+    formContext,
+    showDefaultActions = true
 }: EntityFormActionsProps) {
 
-    const bottomActionsProps = {
+    return buildBottomActions({
         path,
         savingError,
         entity,
@@ -46,35 +54,8 @@ export function EntityFormActions({
         navigateBack,
         formContext,
         formex,
-        className: layout === "responsive" ? "@6xl:hidden" : undefined
-    };
-
-    const sideActionsProps = {
-        path,
-        savingError,
-        entity,
-        collection,
-        disabled,
-        status,
-        pluginActions,
-        openEntityMode,
-        navigateBack,
-        formContext,
-        formex,
-        className: layout === "responsive" ? "hidden @6xl:flex" : undefined
-    };
-
-    const bottomActions = buildBottomActions(bottomActionsProps);
-    const sideActions = buildSideActions(sideActionsProps);
-
-    if (layout === "responsive") {
-        return <>
-            {bottomActions}
-            {sideActions}
-        </>;
-    }
-
-    return layout === "bottom" ? bottomActions : sideActions;
+        showDefaultActions
+    });
 }
 
 type ActionsViewProps<M extends Record<string, unknown>> = {
@@ -90,6 +71,7 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     navigateBack: () => void;
     formContext: FormContext,
     formex: FormexController<Record<string, unknown>>;
+    showDefaultActions: boolean;
     className?: string;
 };
 
@@ -106,19 +88,30 @@ function buildBottomActions<M extends Record<string, unknown>>({
     navigateBack,
     formContext,
     formex,
+    showDefaultActions,
     className
 }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+    const entityActions = entity ? (formActions ?? []) : [];
+    const hasPluginActions = Boolean(pluginActions && (pluginActions as React.ReactNode[]).length > 0);
+
+    // Nothing to show means no footer at all, rather than an empty bar pinned
+    // over the last field. This is also what made `showDefaultActions` start
+    // meaning something: it was accepted as a prop and then never read, so
+    // passing `false` silently kept the buttons.
+    if (!showDefaultActions && !savingError && !entityActions.length && !hasPluginActions) {
+        return null;
+    }
 
-    return <DialogActions position={"absolute"} className={className}>
+    return <DialogActions position={"sticky"} className={className}>
         {savingError &&
             <div className="text-right">
                 <Typography color={"error"}>{savingError.message}</Typography>
             </div>
         }
-        {entity && (formActions ?? []).length > 0 && <div className="grow flex overflow-auto no-scrollbar">
-            {(formActions ?? []).map(action => (
+        {entityActions.length > 0 && <div className="grow flex overflow-auto no-scrollbar">
+            {entityActions.map(action => (
                 <IconButton
                     key={action.name}
                     color="primary"
@@ -142,68 +135,26 @@ function buildBottomActions<M extends Record<string, unknown>>({
             ))}
         </div>}
         {pluginActions}
-        <Button variant="text" disabled={disabled || formex.isSubmitting}
-            color={"primary"}
-            type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
-        </Button>
-        <Tooltip title={hasErrors ? "Fix highlighted errors before saving" : undefined}>
-            <LoadingButton variant={"filled"}
-                color="primary"
-                type="submit"
-                loading={formex.isSubmitting}
-                disabled={disabled || formex.isSubmitting}
-                startIcon={hasErrors ? <AlertCircleIcon/> : undefined}>
-                {status === "existing" && "Save"}
-                {status === "copy" && "Create copy"}
-                {status === "new" && "Create"}
-            </LoadingButton>
-        </Tooltip>
 
-    </DialogActions>;
-}
-
-function buildSideActions<M extends Record<string, unknown>>({
-    savingError,
-    entity,
-    formActions,
-    path,
-    openEntityMode,
-    collection,
-    disabled,
-    status,
-    pluginActions,
-    formex,
-    className
-}: ActionsViewProps<M>) {
-
-    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
-
-    return <div
-        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin, className)}>
-        <Tooltip title={hasErrors ? "Fix highlighted errors before saving" : undefined}>
-            <LoadingButton fullWidth={true}
-                variant="filled"
-                color="primary"
-                type="submit"
-                loading={formex.isSubmitting}
-                startIcon={hasErrors ? <AlertCircleIcon/> : undefined}
-                disabled={disabled || formex.isSubmitting}>
-                {status === "existing" && "Save"}
-                {status === "copy" && "Create copy"}
-                {status === "new" && "Create"}
-            </LoadingButton>
-        </Tooltip>
-        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
-        </Button>
-
-        {pluginActions}
+        {showDefaultActions && <>
+            <Button variant="text" disabled={disabled || formex.isSubmitting}
+                color={"primary"}
+                type="reset">
+                {status === "existing" ? "Discard" : "Clear"}
+            </Button>
+            <Tooltip title={hasErrors ? "Fix highlighted errors before saving" : undefined}>
+                <LoadingButton variant={"filled"}
+                    color="primary"
+                    type="submit"
+                    loading={formex.isSubmitting}
+                    disabled={disabled || formex.isSubmitting}
+                    startIcon={hasErrors ? <AlertCircleIcon/> : undefined}>
+                    {status === "existing" && "Save"}
+                    {status === "copy" && "Create copy"}
+                    {status === "new" && "Create"}
+                </LoadingButton>
+            </Tooltip>
+        </>}
 
-        {savingError &&
-            <div className="text-right">
-                <Typography color={"error"}>{savingError.message}</Typography>
-            </div>
-        }
-    </div>;
+    </DialogActions>;
 }

package/src/form/EntityFormBinding.tsx

@@ -287,7 +287,9 @@ export function EntityFormBinding<M extends Record<string, unknown>>({
         disabled: false
     }), [entityId, parentCollectionSlugs, parentEntityIds, path, status, collection, context, openEntityMode]);
 
-    const pluginFormActions = useSlot("form.actions", formActionProps);
+    // `form.actions` is rendered by the entity view's identity bar, which has
+    // the real formContext and does not cost a footer. Rendering it here too
+    // would show Autofill twice.
     const pluginFormBefore = useSlot("form.before", formActionProps);
     const pluginFormAfter = useSlot("form.after", formActionProps);
 
@@ -314,7 +316,7 @@ export function EntityFormBinding<M extends Record<string, unknown>>({
             // Slots
             beforeFields={pluginFormBefore}
             afterFields={pluginFormAfter}
-            pluginActions={pluginFormActions ?? []}
+            pluginActions={[]}
             // Local changes
             computedInitialValues={computedInitialValues as Partial<M>}
             hasLocalChanges={hasLocalChanges}

package/src/form/PropertyFieldBinding.tsx

@@ -78,6 +78,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
      property,
      context,
      includeDescription,
+     hideLabel,
      underlyingValueHasChanged,
      disabled: disabledProp,
      partOfArray,
@@ -154,6 +155,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                     propertyKey,
                     property: resolvedProperty,
                     includeDescription,
+                    hideLabel,
                     underlyingValueHasChanged,
                     context,
                     disabled,
@@ -188,6 +190,7 @@ function FieldInternal<CustomProps, M extends Record<string, unknown>>
          propertyKey,
          property,
          includeDescription,
+         hideLabel,
          underlyingValueHasChanged,
          partOfArray,
          partOfBlock,
@@ -249,6 +252,7 @@ function FieldInternal<CustomProps, M extends Record<string, unknown>>
         showError,
         isSubmitting,
         includeDescription: includeDescription ?? true,
+        hideLabel: hideLabel ?? false,
         property: property as Property,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,

package/src/form/components/FieldBlock.tsx

@@ -0,0 +1,119 @@
+import type { Property } from "@rebasepro/types";
+import React from "react";
+import { cls, ErrorBoundary, Typography } from "@rebasepro/ui";
+import { getIconForProperty } from "../../util/property_utils";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+
+/**
+ * Does this property's editor supply its own heading?
+ *
+ * Arrays, maps, `oneOf` blocks and key-value editors render as a collapsible
+ * panel whose header *is* the label — hiding it would leave a panel you cannot
+ * identify or, worse, cannot expand. Those keep their own; everything else gets
+ * its label from {@link FieldBlock}, which is what makes a text field and a
+ * select finally agree on where a label goes.
+ *
+ * Exported because the layout resolver's span rules and this rule have to stay
+ * in step: the self-labelling types are exactly the ones that take a full row.
+ */
+export function isSelfLabellingProperty(property: Property | undefined): boolean {
+    if (!property) return false;
+    switch (property.type) {
+        case "map":
+            // `spreadChildren` inlines the children into the parent grid, so
+            // there is no panel and therefore no header to reuse as the label.
+            return !property.admin?.spreadChildren;
+        case "array": {
+            // Most arrays render as an expandable panel whose header is the
+            // label — `repeat`, `block`, `custom_array`, `multi_references`.
+            // The exceptions are the ones that resolve to an inline control:
+            // an enum array is a multi-select and a storage array is a
+            // dropzone, and both take their label from the form.
+            //
+            // This mirrors `getFieldConfig`'s array branch. Getting it backwards
+            // is visible: an array of plain strings is a `repeat` panel, and
+            // treating it as inline printed "Available Locales" twice, once
+            // from the form and once from the panel's own header.
+            if (property.oneOf) return true;
+            if (Array.isArray(property.of) || !property.of) return true;
+            const of = property.of;
+            if (of.type === "string" && (of.enum || of.storage)) return false;
+            if (of.type === "number" && of.enum) return false;
+            return true;
+        }
+        default:
+            return false;
+    }
+}
+
+export interface FieldBlockProps {
+    propertyKey: string;
+    property?: Property;
+    /** Rendered by the form rather than by the field, unless self-labelling. */
+    showLabel: boolean;
+    children: React.ReactNode;
+}
+
+/**
+ * One field's worth of the form grid: label, control, description.
+ *
+ * The label carries a small type icon so a number reads differently from a
+ * relation at a glance, and the description sits under the control where it
+ * annotates what you just filled in.
+ */
+export function FieldBlock({
+    propertyKey,
+    property,
+    showLabel,
+    children
+}: FieldBlockProps) {
+
+    const description = property?.description?.trim();
+    const required = Boolean(property?.validation?.required);
+
+    return (
+        // Top-aligned: with the description below the control, every label is a
+        // single line, so the controls line up on their own. (Bottom-aligning
+        // was only needed while the description sat between label and control.)
+        <div
+            id={`form_field_${propertyKey}`}
+            className={"relative flex flex-col min-w-0"}>
+
+            {showLabel && (
+                <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                    <div className={cls(
+                        "flex items-center gap-1.5 text-sm font-medium leading-tight mb-1.5",
+                        "text-text-secondary dark:text-text-secondary-dark"
+                    )}>
+                        {/* Small and quiet: enough to tell a number from a
+                            relation at a glance, not enough to compete with the
+                            field name. */}
+                        {property && (
+                            <span className={"shrink-0 text-text-disabled dark:text-text-disabled-dark"}>
+                                {getIconForProperty(property, "smallest")}
+                            </span>
+                        )}
+                        <span className={"truncate"}>{property?.name ?? propertyKey}</span>
+                        {required && <span className={"text-red-500 dark:text-red-500 -ml-1"}>*</span>}
+                    </div>
+                </PropertyIdCopyTooltip>
+            )}
+
+            <div className={"min-w-0"}>
+                <ErrorBoundary>
+                    {children}
+                </ErrorBoundary>
+            </div>
+
+            {/* Under the control, where it reads as a note about the thing you
+                just filled in rather than a subtitle of the next label. */}
+            {showLabel && description && (
+                <Typography variant={"caption"}
+                    color={"disabled"}
+                    className={"mt-1.5 ml-0.5 leading-snug"}>
+                    {description}
+                </Typography>
+            )}
+        </div>
+    );
+}

package/src/form/components/FormRail.tsx

@@ -0,0 +1,125 @@
+import type { Entity } from "@rebasepro/types";
+import type { ResolvedFormField } from "@rebasepro/app";
+import React from "react";
+import { CheckIcon, cls, CopyIcon, defaultBorderMixin, IconButton, iconSize, Tooltip, Typography } from "@rebasepro/ui";
+
+export interface FormRailProps {
+    fields: ResolvedFormField[];
+    showRecordMeta: boolean;
+    entity?: Entity<Record<string, unknown>>;
+    renderField: (field: ResolvedFormField) => React.ReactNode;
+}
+
+/**
+ * The metadata column beside the form.
+ *
+ * This replaces a `w-80 2xl:w-96` rail that held a Save button and several
+ * hundred pixels of nothing. It renders only when it has something to say, and
+ * the actions it used to hold now live in the identity bar, where they stay
+ * visible while you scroll.
+ */
+export function FormRail({
+    fields,
+    showRecordMeta,
+    entity,
+    renderField
+}: FormRailProps) {
+
+    if (!fields.length && !showRecordMeta) return null;
+
+    return (
+        <aside className={cls(
+            // No responsive hiding here. The caller decides whether the rail is
+            // shown, by measuring; a CSS `hidden` would leave the fields the
+            // resolver moved in here unreachable rather than folding them back.
+            "flex flex-col gap-6 shrink-0 w-72 border-l overflow-y-auto",
+            "px-5 py-6 bg-surface-50 dark:bg-surface-900",
+            defaultBorderMixin
+        )}>
+            {fields.length > 0 && (
+                <div className={"flex flex-col gap-5"}>
+                    {fields.map(renderField)}
+                </div>
+            )}
+
+            {showRecordMeta && entity && <RecordMeta entity={entity}/>}
+        </aside>
+    );
+}
+
+function RecordMeta({ entity }: { entity: Entity<Record<string, unknown>> }) {
+
+    const createdAt = pickDate(entity.values, ["created_at", "createdAt", "created_on"]);
+    const updatedAt = pickDate(entity.values, ["updated_at", "updatedAt", "modified_at"]);
+
+    return (
+        <div className={"flex flex-col gap-2.5"}>
+            <Typography variant={"caption"}
+                className={"text-xs font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark"}>
+                Record
+            </Typography>
+
+            <MetaRow label={"ID"} value={String(entity.id)} copyable/>
+            {createdAt && <MetaRow label={"Created"} value={createdAt}/>}
+            {updatedAt && <MetaRow label={"Updated"} value={updatedAt}/>}
+        </div>
+    );
+}
+
+function MetaRow({
+    label,
+    value,
+    copyable
+}: {
+    label: string;
+    value: string;
+    copyable?: boolean;
+}) {
+    const [copied, setCopied] = React.useState(false);
+
+    const copy = () => {
+        navigator.clipboard?.writeText(value).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1600);
+        }, () => undefined);
+    };
+
+    return (
+        <div className={"flex items-baseline justify-between gap-3 min-w-0"}>
+            <span className={"text-xs text-text-disabled dark:text-text-disabled-dark shrink-0"}>
+                {label}
+            </span>
+            <span className={"flex items-center gap-1 min-w-0"}>
+                <span className={"font-mono text-xs text-text-secondary dark:text-text-secondary-dark truncate"}
+                    title={value}>
+                    {value}
+                </span>
+                {copyable && (
+                    <Tooltip title={copied ? "Copied" : "Copy"}>
+                        <IconButton size={"smallest"} onClick={copy}>
+                            {copied ? <CheckIcon size={iconSize.smallest}/> : <CopyIcon size={iconSize.smallest}/>}
+                        </IconButton>
+                    </Tooltip>
+                )}
+            </span>
+        </div>
+    );
+}
+
+/**
+ * Audit timestamps are a convention, not a contract — a collection may name them
+ * anything or not have them at all — so this reads the values it recognises and
+ * stays quiet otherwise rather than rendering an empty row.
+ */
+function pickDate(values: Record<string, unknown> | undefined, keys: string[]): string | undefined {
+    if (!values) return undefined;
+    for (const key of keys) {
+        const value = values[key];
+        if (value instanceof Date) return value.toLocaleDateString();
+        if (typeof value === "string" && value) {
+            const parsed = new Date(value);
+            if (!Number.isNaN(parsed.getTime())) return parsed.toLocaleDateString();
+        }
+    }
+    return undefined;
+}

package/src/form/components/FormSections.tsx

@@ -0,0 +1,118 @@
+import type { ResolvedFormField, ResolvedFormSection } from "@rebasepro/app";
+import React from "react";
+import { ChevronDownIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+
+export interface FormSectionsProps {
+    sections: ResolvedFormSection[];
+    /** Section keys the user has collapsed. */
+    collapsed: ReadonlySet<string>;
+    onToggle: (key: string) => void;
+    /**
+     * Field keys currently showing a validation error. A section holding one is
+     * forced open — an error that hides inside a collapsed group is a form the
+     * user cannot submit and cannot debug.
+     */
+    errorKeys: ReadonlySet<string>;
+    renderField: (field: ResolvedFormField) => React.ReactNode;
+}
+
+export function FormSections({
+    sections,
+    collapsed,
+    onToggle,
+    errorKeys,
+    renderField
+}: FormSectionsProps) {
+
+    return (
+        <div className={"flex flex-col gap-8"}>
+            {sections.map((section) => {
+
+                const hasError = section.fields.some(f => errorKeys.has(f.key));
+                const isCollapsed = section.collapsible && collapsed.has(section.key) && !hasError;
+
+                return (
+                    <section key={section.key} className={"min-w-0"}>
+
+                        {section.title && (
+                            <Header
+                                title={section.title}
+                                collapsible={section.collapsible}
+                                collapsed={isCollapsed}
+                                controls={`form_section_${section.key}`}
+                                onToggle={() => onToggle(section.key)}/>
+                        )}
+
+                        {!isCollapsed && (
+                            // A container query, not a media query: the form is
+                            // rendered at four very different widths (full
+                            // screen, side panel, split pane, dialog) inside the
+                            // same viewport, so spans have to answer to the
+                            // column they are in, not to the window.
+                            <div id={`form_section_${section.key}`}
+                                className={cls(
+                                    "grid gap-x-4 gap-y-5 min-w-0",
+                                    "grid-cols-1 @2xl:grid-cols-4"
+                                )}>
+                                {section.fields.map(renderField)}
+                            </div>
+                        )}
+                    </section>
+                );
+            })}
+        </div>
+    );
+}
+
+function Header({
+    title,
+    collapsible,
+    collapsed,
+    controls,
+    onToggle
+}: {
+    title: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    /**
+     * Id of the region this header shows and hides. Only referenced while that
+     * region exists — a collapsed section unmounts its fields, and pointing
+     * `aria-controls` at an id that is not in the document is its own defect.
+     */
+    controls: string;
+    onToggle: () => void;
+}) {
+
+    const content = (
+        <>
+            {collapsible && (
+                <ChevronDownIcon
+                    size={iconSize.smallest}
+                    className={cls(
+                        "text-text-disabled dark:text-text-disabled-dark transition-transform duration-150",
+                        collapsed && "-rotate-90"
+                    )}/>
+            )}
+            <span className={"text-xs font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark whitespace-nowrap"}>
+                {title}
+            </span>
+            <span className={cls("flex-1 border-t", defaultBorderMixin)}/>
+        </>
+    );
+
+    const className = "flex items-center gap-2.5 w-full mb-3.5";
+
+    if (!collapsible) {
+        return <div className={className}>{content}</div>;
+    }
+
+    return (
+        <button type={"button"}
+            onClick={onToggle}
+            aria-expanded={!collapsed}
+            aria-controls={collapsed ? undefined : controls}
+            className={cls(className, "text-left hover:opacity-80 transition-opacity")}>
+            {content}
+        </button>
+    );
+}

package/src/form/components/index.tsx

@@ -1,5 +1,6 @@
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
 export * from "./LabelWithIconAndTooltip";
-export * from "./FormEntry";
-export * from "./FormLayout";
+export * from "./FieldBlock";
+export * from "./FormRail";
+export * from "./FormSections";

package/src/form/components/useRailVisible.tsx

@@ -0,0 +1,46 @@
+import React, { useLayoutEffect, useState } from "react";
+
+/**
+ * Below this the form is a single column and the rail is not shown.
+ *
+ * Roughly the 288px rail plus a content column still wide enough to hold a
+ * four-up row. Above it the rail is worth having even in the split view; below
+ * it — a narrow split pane, the side panel, the dialog, a phone — its fields
+ * fold back into the column.
+ */
+export const RAIL_MIN_WIDTH = 1000;
+
+/**
+ * Is there room beside the form for the metadata rail?
+ *
+ * Measured on the form element rather than the viewport, because the same form
+ * renders in a side panel and a dialog inside a wide window — a media query
+ * would say "desktop" and hand a 600px panel a rail it cannot fit.
+ *
+ * This has to be a real measurement rather than a CSS `hidden` class: the
+ * layout resolver *moves* fields into the rail, so hiding it with CSS did not
+ * fold them back into the column, it made them unreachable. Status, category
+ * and any other rail field simply could not be edited in the side panel, the
+ * dialog, or on a phone.
+ */
+export function useRailVisible(ref: React.RefObject<HTMLElement | null>): boolean {
+
+    const [visible, setVisible] = useState(false);
+
+    // Layout effect, not effect: measured before paint, so a wide form does
+    // not render single-column for a frame and then snap the rail in.
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        const measure = () => setVisible(element.getBoundingClientRect().width >= RAIL_MIN_WIDTH);
+        measure();
+
+        if (typeof ResizeObserver === "undefined") return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref]);
+
+    return visible;
+}