@rebasepro/admin 0.13.0 → 0.13.1-canary.g3660bd5

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -14,7 +14,8 @@ export function MapPropertyPreview({
     propertyKey,
     value,
     property,
-    size
+    size,
+    compact
 }: PropertyPreviewProps<MapProperty>) {
 
     if (property.type !== "map") {
@@ -23,6 +24,13 @@ export function MapPropertyPreview({
 
     const mapProperty = property as MapProperty;
 
+    // A map is a table — a row per sub-property — and a card line has room for
+    // neither the rows nor the borders between them.
+    if (compact) {
+        return <CompactMapPreview property={mapProperty}
+            value={value as Record<string, unknown> | undefined}/>;
+    }
+
     if (!mapProperty.properties || Object.keys(mapProperty.properties ?? {}).length === 0) {
         return (
             <KeyValuePreview value={value}/>
@@ -105,6 +113,49 @@ export function MapPropertyPreview({
 
 }
 
+/** How many leaf values a one-line map summary shows before it gives up. */
+const COMPACT_MAP_ENTRIES = 3;
+
+/**
+ * A map in one line: its first few leaf values, labelled, joined by dots.
+ *
+ * Nested maps and arrays are skipped rather than flattened — a line that says
+ * `[object Object]` is worse than a line that says nothing about that field —
+ * and a map with no leaves at all falls back to stating its size, which is at
+ * least true.
+ */
+function CompactMapPreview({
+    property,
+    value
+}: { property: MapProperty, value: Record<string, unknown> | undefined }) {
+
+    if (!value || typeof value !== "object") return <EmptyValue/>;
+
+    const declared = property.properties;
+    const keys = declared ? Object.keys(declared) : Object.keys(value);
+
+    const parts: string[] = [];
+    for (const key of keys) {
+        if (parts.length >= COMPACT_MAP_ENTRIES) break;
+        const childValue = value[key];
+        if (childValue === undefined || childValue === null || childValue === "") continue;
+        if (typeof childValue === "object") continue;
+        const label = declared?.[key]?.name ?? key;
+        parts.push(`${label}: ${String(childValue)}`);
+    }
+
+    if (parts.length === 0) {
+        const count = Object.keys(value).length;
+        return <Typography variant={"caption"}
+            color={"secondary"}
+            className={"truncate"}>
+            {count === 1 ? "1 field" : `${count} fields`}
+        </Typography>;
+    }
+
+    return <span className={"truncate text-sm"}>{parts.join(" · ")}</span>;
+}
+
 export function KeyValuePreview({ value }: { value: any }) {
     if (typeof value !== "object") return null;
     if (!value) return <EmptyValue/>;

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { EnumValuesChip } from "../components/EnumValuesChip";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import { enumToObjectEntries } from "@rebasepro/common";
+import { useCustomizationController } from "@rebasepro/app";
+import { formatNumber } from "../../util/number_format";
 
 /**
  * @group Preview components
@@ -14,6 +16,7 @@ export function NumberPropertyPreview({
     size
 }: PropertyPreviewProps<NumberProperty>): React.ReactElement {
 
+    const customizationController = useCustomizationController();
     const numValue = value as number;
 
     if (property.enum) {
@@ -26,6 +29,11 @@ export function NumberPropertyPreview({
             enumValues={enumValues}
             size={size !== "medium" ? "small" : "medium"}/>;
     } else {
-        return <span className={size === "small" ? "text-sm" : ""}>{numValue}</span>;
+        // `admin.format` only — an undeclared number renders as the number that
+        // is in the database, which is the only thing we can honestly claim to
+        // know about it.
+        return <span className={size === "small" ? "text-sm" : ""}>
+            {formatNumber(numValue, property.admin?.format, customizationController?.locale)}
+        </span>;
     }
 }

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -7,6 +7,7 @@ import type { PropertyPreviewProps } from "../../types/components/PropertyPrevie
 import { UrlComponentPreview } from "../components/UrlComponentPreview";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { Chip, cls, getColorSchemeForSeed } from "@rebasepro/ui";
+import { collapseToSingleLine } from "../compact_text";
 
 /**
  * @group Preview components
@@ -16,7 +17,8 @@ export function StringPropertyPreview({
     value,
     property,
     size,
-    textOnly
+    textOnly,
+    compact
 }: PropertyPreviewProps<StringProperty>): React.ReactElement {
 
     const strValue = value as string;
@@ -45,10 +47,11 @@ export function StringPropertyPreview({
         );
     } else {
         if (!strValue) return <></>;
-        // When used as a title/subtitle (textOnly), collapse newlines so the
-        // parent `truncate` can clamp it to a single line.
-        if (textOnly) {
-            const singleLine = strValue.replace(/\s*\n\s*/g, " ");
+        // A title/subtitle (textOnly) or a card line (compact) is one line, and
+        // `truncate` only clamps text that has no newlines of its own to break
+        // on — so the newlines come out here rather than in CSS.
+        if (textOnly || compact) {
+            const singleLine = collapseToSingleLine(strValue);
             return size === "small"
                 ? <span className={"text-sm"}>{singleLine}</span>
                 : <>{singleLine}</>;

package/src/routes/RebaseRoute.tsx

@@ -6,10 +6,10 @@ import { DetailViewBinding } from "../components/DetailViewBinding";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import { CollectionViewBinding } from "../components/CollectionViewBinding/CollectionViewBinding";
-import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
+import { ErrorView, NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
 import { resolveOpenEntityMode, resolveViewMode } from "../util/view_mode";
 import { UnsavedChangesDialog } from "@rebasepro/app";
-import { CircularProgressCenter } from "@rebasepro/ui";
+import { CenteredView, CircularProgressCenter } from "@rebasepro/ui";
 import { NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/app";
 import { getNavigationEntriesFromPath } from "@rebasepro/app";
 import { toArray } from "@rebasepro/utils";
@@ -94,7 +94,7 @@ export function RebaseRoute() {
             if (!collectionRegistry.initialised) {
                 return <CircularProgressCenter/>;
             }
-            return null;
+            return <UnresolvedCollectionView path={navigationEntries[0].slug}/>;
         }
         return <ResolvedCollectionView
             key={`collection_view_${collection.slug}`}
@@ -117,7 +117,7 @@ export function RebaseRoute() {
                 if (!collectionRegistry.initialised) {
                     return <CircularProgressCenter/>;
                 }
-                return null;
+                return <UnresolvedCollectionView path={firstEntry.slug}/>;
             }
             return <ResolvedCollectionView
                 key={`collection_view_${collection.slug}`}
@@ -233,6 +233,7 @@ function EntityFullScreenRoute({
     const urlController = useUrlController();
     const navigate = useNavigate();
     const location = useLocation();
+    const userConfigPersistence = useUserConfigurationPersistence();
 
     // defaultValues may be carried via location.state when openNewDocument() is called
     // for full-screen mode. We read it once on mount — after that, the form owns its state.
@@ -340,6 +341,30 @@ function EntityFullScreenRoute({
     // Determine if this is a detail-view-first collection showing the view page
     const isDetailMode = collection.defaultEntityAction === "view" && !isNew && !isCopy && entityId && !isEditRoute;
 
+    // A record is full screen either because its collection has no list to show
+    // beside it, or because the user folded that list away. Only the second is
+    // reversible, and it is reversible by dropping `#full` alone: this is the
+    // same URL the split route reads, so the same conditions decide it.
+    const splitListAvailable = !isNew && !isCopy && entityId !== undefined &&
+        navigationEntries[0]?.type === "collection" &&
+        (navigationEntries.length === 2 || navigationEntries.length === 3) &&
+        resolveOpenEntityMode({
+            collection,
+            viewMode: resolveViewMode({
+                collection,
+                search: location.search,
+                savedViewMode: userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode as ViewMode | undefined
+            })
+        }) === "split";
+
+    const showList = splitListAvailable
+        ? () => navigate({
+            pathname,
+            search: location.search,
+            hash: ""
+        })
+        : undefined;
+
     if (isDetailMode) {
         return <>
             <DetailViewBinding
@@ -349,6 +374,7 @@ function EntityFullScreenRoute({
                 layout={"full_screen"}
                 path={collectionPath}
                 selectedTab={selectedTab ?? undefined}
+                onShowList={showList}
                 onEditClick={() => {
                     const editUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}`) + "/edit";
                     navigate(editUrl + hash);
@@ -377,6 +403,7 @@ function EntityFullScreenRoute({
             path={collectionPath}
             copy={isCopy}
             selectedTab={selectedTab ?? undefined}
+            onShowList={showList}
             defaultValues={isNew ? defaultValues : undefined}
             onValuesModified={(modified) => blocked.current = modified}
             navigateBack={() => {
@@ -415,3 +442,34 @@ function EntityFullScreenRoute({
             body={"You have unsaved changes in this entity."}/>
     </>;
 }
+
+/**
+ * Shown when a URL names a collection the registry cannot resolve.
+ *
+ * This used to be `return null`, which renders an empty pane inside the app
+ * chrome: the sidebar, the nav highlight and the breadcrumb all still work,
+ * because those read the collections array directly, while the view itself is
+ * blank. Nothing is thrown, and the only trace is a `console.debug` — so the
+ * panel looks like it lost its data rather than like it failed to find the
+ * collection, and there is no string to search for.
+ *
+ * A slug containing slashes went unresolvable this way and cost an afternoon to
+ * find. The lookup is fixed; this is the part that made it expensive.
+ */
+function UnresolvedCollectionView({ path }: { path: string }) {
+    // Warn, not debug: this is a route that renders nothing useful, and it
+    // should be visible at the console's default level.
+    useEffect(() => {
+        console.warn(
+            `[rebase] No collection is registered for "${path}", so this route has nothing to render. ` +
+            "Check that the collection is in the collections array and that its slug matches the URL."
+        );
+    }, [path]);
+
+    return <CenteredView>
+        <ErrorView
+            title={"Collection not found"}
+            error={`Nothing is registered for "${path}".`}
+            tooltip={"The URL names a collection the panel does not know about. It may have been renamed or removed from the collections array, or the slug may not match the path."}/>
+    </CenteredView>;
+}

package/src/types/components/PropertyPreviewProps.tsx

@@ -61,4 +61,25 @@ export interface PropertyPreviewProps<P extends Property | Property, CustomProps
      */
     textOnly?: boolean;
 
+    /**
+     * The preview has one line and cannot grow — it fills a slot in a card, a
+     * chip, or a table cell of fixed height.
+     *
+     * Properties whose natural rendering is a block (Markdown, multi-line text,
+     * maps, arrays) render a one-line stand-in instead: an opening excerpt, or
+     * a count. Left unset, {@link PropertyPreview} infers it from the entity
+     * preview nesting depth, which is where the constraint actually comes from;
+     * pass it explicitly only to force the compact form somewhere the nesting
+     * does not say so.
+     */
+    compact?: boolean;
+
+    /**
+     * The caller has already labelled this value, so the preview must not
+     * repeat the property name. A boolean is the one that does: it renders its
+     * name beside the checkbox, which reads as a caption in a table cell and as
+     * a stutter under a field label — "VIP" over a checkbox saying "VIP".
+     */
+    hideLabel?: boolean;
+
 }

package/src/util/number_format.ts

@@ -0,0 +1,46 @@
+import type { NumberFormatOptions } from "@rebasepro/admin-types";
+
+/**
+ * Write a number out for reading, per a property's declared `admin.format`.
+ *
+ * Nothing is inferred here. With no options the number is returned as it came
+ * out of the database — `String(value)`, not a locale-grouped rendering — so a
+ * panel that declares nothing shows exactly the stored value, and an author who
+ * wants thousands separators asks for them.
+ *
+ * `Intl.NumberFormat` throws on a bad currency code or an out-of-range fraction
+ * count, and a record must not blank because one property is misconfigured, so a
+ * failure falls back to the raw value.
+ */
+export function formatNumber(
+    value: number,
+    options: NumberFormatOptions | undefined,
+    fallbackLocale?: string
+): string {
+
+    if (!options) return String(value);
+
+    // A currency code is the whole declaration in the common case: writing
+    // `{ currency: "EUR" }` and getting a bare `185.11` because `style` was
+    // omitted is a trap, and there is nothing else `currency` could mean.
+    const style = options.style ?? (options.currency ? "currency" : "decimal");
+
+    if (style === "currency" && !options.currency) {
+        // `Intl` throws on this rather than picking a currency, which is the
+        // right call — there is no sensible default — but the record still has
+        // to render.
+        return String(value);
+    }
+
+    try {
+        return new Intl.NumberFormat(options.locale ?? fallbackLocale ?? undefined, {
+            style,
+            currency: options.currency,
+            minimumFractionDigits: options.minimumFractionDigits,
+            maximumFractionDigits: options.maximumFractionDigits,
+            notation: options.notation
+        }).format(value);
+    } catch {
+        return String(value);
+    }
+}

package/src/util/previews.ts

@@ -1,64 +1,17 @@
 import type { Property } from "@rebasepro/types";
 import type { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
-import { AuthController } from "@rebasepro/admin-types";
-import { isPropertyBuilder } from "@rebasepro/common";
 import { getTitlePropertyKey, getTitlePropertyKeyForValues } from "@rebasepro/app";
-import { isReferenceProperty, isRelationProperty } from "./property_utils";
-
-function isHiddenProperty(property: Property | undefined): boolean {
-    if (!property) return false;
-    return Boolean(property.admin?.hideFromCollection);
-}
+import { isPropertyBuilder } from "@rebasepro/common";
 
 /**
- * Returns true when the property holds file-storage content (single image,
- * array of images, generic upload, …).  These properties are rendered by the
- * dedicated image-slot and should NOT appear as regular preview columns.
+ * Which properties fill a preview surface, best first.
+ *
+ * The implementation lives in `@rebasepro/app` so that the admin package and
+ * the app package cannot disagree about what a record looks like in a card —
+ * they had drifted, and only one of the two copies had learned to keep
+ * relations out of the list.
  */
-function isStorageProperty(property: Property | undefined): boolean {
-    if (!property) return false;
-    // Single string with storage config
-    if (property.type === "string" && property.storage) return true;
-    // String displayed as image URL
-    if (property.type === "string" && property.admin?.urlPreview === "image") return true;
-    // Array whose inner element has storage config or image URL
-    if (property.type === "array" && property.of && !Array.isArray(property.of)) {
-        const inner = property.of;
-        if (inner.type === "string" && (inner.storage || inner.admin?.urlPreview === "image")) return true;
-    }
-    return false;
-}
-
-export function getEntityPreviewKeys(
-    authController: AuthController,
-    targetCollection: AdminCollection<any>,
-    fields: Record<string, PropertyConfig>,
-    previewProperties?: string[],
-    limit = 3) {
-    const allProperties = Object.keys(targetCollection.properties);
-    let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
-    if (!listProperties && targetCollection.previewProperties) {
-        listProperties = targetCollection.previewProperties?.filter(p => allProperties.includes(p as string));
-    }
-    if (listProperties && listProperties.length > 0) {
-        return listProperties;
-    } else {
-        const hasExplicitOrder = !!(targetCollection.propertiesOrder as string[] | undefined);
-        listProperties = (targetCollection.propertiesOrder as string[]) || allProperties;
-        return listProperties
-            .filter(key => {
-                const prop = targetCollection.properties[key];
-                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as { isId?: boolean }).isId);
-                return !isIdProp && key !== "id";
-            })
-            .filter(key => {
-                const property = targetCollection.properties[key];
-                return property && !isPropertyBuilder(property) && !isReferenceProperty(property) && !isHiddenProperty(property)
-                    && !isStorageProperty(property as Property)
-                    && (hasExplicitOrder || !isRelationProperty(property));
-            }).slice(0, limit);
-    }
-}
+export { getEntityPreviewKeys } from "@rebasepro/app";
 
 /**
  * The property that fills the title slot for a collection.