@rebasepro/admin 0.13.0 → 0.13.1-canary.g06dbe5b

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/navigation_utils.ts

@@ -1,6 +1,6 @@
 
 import type { UrlController, SidePanelController, NavigateOptions, AdminCollection } from "@rebasepro/admin-types";
-import { withViewMode } from "./view_mode";
+import { withListState, withViewMode } from "./view_mode";
 
 // Canonical path utilities — single source of truth in @rebasepro/common
 export { removeInitialAndTrailingSlashes, removeInitialSlash, removeTrailingSlash, addInitialSlash, getLastSegment, resolveCollectionPathIds, getCollectionBySlugWithin, getCollectionPathsCombinations } from "@rebasepro/app";
@@ -63,7 +63,9 @@ export function navigateToEntity({
         if (entityId && selectedTab) {
             to += `/${selectedTab}`;
         }
-        to = withViewMode(to);
+        // The whole list state, not just the view mode: a record opened from a
+        // search must come back to that search.
+        to = withListState(to);
         if (!entityId) {
             to += "#new";
         }

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.

package/src/util/property_utils.tsx

@@ -159,8 +159,13 @@ export function getResolvedPropertyInPath(properties: Record<string, Property>,
         }
         if (path.includes(".")) {
             const pathSegments = path.split(".");
+            // A path whose root is not a property at all is simply not found.
+            // Reading `.type` off the miss threw a TypeError instead, which
+            // turned one unresolvable column key into a crash for whatever was
+            // walking the properties — see `propertiesToColumns`, where that is
+            // the whole table. `getPropertyInPath` above already guards this.
             const childProperty = properties[pathSegments[0]];
-            if (childProperty.type === "map" && childProperty.properties) {
+            if (childProperty?.type === "map" && childProperty.properties) {
                 return getResolvedPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."))
             }
         }

package/src/util/view_constants.ts

@@ -4,3 +4,30 @@
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
 export const HISTORY_TAB_VALUE = "__rebase_history";
+
+/**
+ * The tab row belongs to the header band above the record, not to the record
+ * itself, so it carries the same surface the identity bar over it and the form
+ * rail beside it carry. Against that, the active tab takes the record's own
+ * white and reads as connected to what it opens; on a white row it had to be
+ * the tinted one, which is the relationship backwards.
+ */
+export const ENTITY_VIEW_TAB_BAR_CLASS = "bg-surface-50 dark:bg-surface-900";
+
+/**
+ * Every tab in that row, a custom `tabComponent` included.
+ *
+ * `h-full` over the variant's `h-9`: the row is 40px and the tab 36px, so a
+ * centred tab floated ~2px clear of the row's bottom border and the active
+ * tab's underline stopped short of the record it opens. Paired with
+ * `items-stretch` on the Tabs root, which the variant leaves centred.
+ */
+export const ENTITY_VIEW_TAB_CLASS = "h-full data-[state=active]:bg-white dark:data-[state=active]:bg-surface-800";
+
+/**
+ * Added on top for the tabs this row labels itself — a custom `tabComponent`
+ * sizes its own contents. The main tab was the only one rendered without it,
+ * and so the only one left at the boxy variant's `text-xs` while its
+ * neighbours sat at `text-sm`.
+ */
+export const ENTITY_VIEW_TAB_LABEL_CLASS = "text-sm min-w-[90px]";

package/src/util/view_mode.ts

@@ -58,6 +58,42 @@ export function withViewMode(url: string, search?: string): string {
     return `${base}${separator}${VIEW_MODE_PARAM}=${viewMode}${hash}`;
 }
 
+/**
+ * Carry the whole of the collection list's URL state onto a navigation target.
+ *
+ * `withViewMode` exists because losing the view mode mid-session is jarring.
+ * Everything else the list writes to the URL — the search string, the filters,
+ * the sort — is state the user built up deliberately, and losing *that* is
+ * worse: opening a record from a search and pressing back returned an
+ * unfiltered list with an empty search box, so the search had to be retyped
+ * for every record they wanted to look at.
+ *
+ * Copies every param the list currently has rather than an allowlist, because
+ * filters are encoded under the field's own name — there is no fixed set to
+ * list. Params already on the target win: the caller is more specific.
+ *
+ * @param url the URL to decorate. May carry a query string and/or a hash.
+ * @param search query string to read from. Defaults to the browser location.
+ */
+export function withListState(url: string, search?: string): string {
+    const source = search ?? (typeof window !== "undefined" ? window.location.search : "");
+    const carried = new URLSearchParams(source);
+    if ([...carried].length === 0) return url;
+
+    const hashIndex = url.indexOf("#");
+    const hash = hashIndex >= 0 ? url.substring(hashIndex) : "";
+    const base = hashIndex >= 0 ? url.substring(0, hashIndex) : url;
+
+    const [pathname, existing] = base.split("?");
+    const target = new URLSearchParams(existing ?? "");
+    for (const [key, value] of carried) {
+        if (!target.has(key)) target.set(key, value);
+    }
+
+    const query = target.toString();
+    return query ? `${pathname}?${query}${hash}` : `${pathname}${hash}`;
+}
+
 /**
  * Resolve the view mode for a collection, honouring the documented priority:
  * URL param > saved user config > collection default.