@rebasepro/admin 0.13.1-canary.gef9608c → 0.14.0

package/src/preview/PropertyPreview.tsx

@@ -4,7 +4,7 @@ import { deepEqual as equal } from "fast-equals"
 
 import { EntityReference, EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../types/components/PropertyPreviewProps";
-import { resolveProperty, normalizeToEntityRelation } from "@rebasepro/common";
+import { resolveProperty, normalizeToEntityRelation, getRelationTargetPath } from "@rebasepro/common";
 import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/app";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
@@ -234,12 +234,16 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         }
 
     } else if (property.type === "relation") {
+        // A relation column arrives either hydrated or as the bare foreign key,
+        // depending on the fetch path. The declared target resolves the latter;
+        // see `normalizeToEntityRelation`.
+        const relationTargetPath = getRelationTargetPath(property);
         if (!value) {
             content = <EmptyValue/>;
         } else if (Array.isArray(value)) {
             // Many-cardinality relation: value is an array of EntityRelation (or plain objects)
             const relations = (value as unknown[])
-                .map(item => normalizeToEntityRelation(item, "relation"))
+                .map(item => normalizeToEntityRelation(item, "relation", relationTargetPath))
                 .filter(Boolean) as EntityRelation[];
             const renderRelation = (entityRelation: EntityRelation, index: number) => <RelationPreview
                 key={`preview_rel_${propertyKey}_${index}`}
@@ -268,7 +272,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                 );
         } else {
             // Single-cardinality relation
-            const relationValue = normalizeToEntityRelation(value, "relation");
+            const relationValue = normalizeToEntityRelation(value, "relation", relationTargetPath);
             if (relationValue) {
                 content = <RelationPreview
                     disabled={!property.relation}

package/src/preview/components/DatePreview.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import { format } from "date-fns";
-import * as locales from "date-fns/locale";
 import { useCustomizationController } from "@rebasepro/app";
 import { defaultDateFormat } from "@rebasepro/utils";
+import { getLoadedDateFnsLocale, loadDateFnsLocale } from "./date_fns_locales";
 
 export interface DatePreviewProps {
     date: Date;
@@ -28,7 +28,20 @@ export function DatePreview({
 }: DatePreviewProps): React.ReactElement {
 
     const customizationController = useCustomizationController();
-    const dateUtilsLocale = customizationController?.locale ? (locales as Record<string, locales.Locale>)[customizationController.locale] : undefined;
+    const configuredLocale = customizationController?.locale;
+
+    // The locale arrives asynchronously now (see `date_fns_locales`). Seed from
+    // the cache so only the very first date on a page renders un-localised: by
+    // the time a table of them mounts, the module is already resolved and there
+    // is no second pass.
+    const [dateUtilsLocale, setDateUtilsLocale] = React.useState(() => getLoadedDateFnsLocale(configuredLocale));
+    React.useEffect(() => {
+        let cancelled = false;
+        loadDateFnsLocale(configuredLocale)
+            .then(loaded => { if (!cancelled) setDateUtilsLocale(loaded); })
+            .catch(error => console.error(`[rebase] could not load the "${configuredLocale}" date locale`, error));
+        return () => { cancelled = true; };
+    }, [configuredLocale]);
 
     if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
         return <></>;

package/src/preview/components/ReferencePreview.tsx

@@ -1,7 +1,7 @@
 
 import * as React from "react";
 
-import { Entity, EntityReference } from "@rebasepro/types";
+import { EntityReference } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { useCustomizationController, useFetch, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { Skeleton } from "@rebasepro/ui";
@@ -157,11 +157,10 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         useCache: true
     });
 
-    if (entity) {
-        referencesCache.set(reference.pathWithId, entity);
-    }
-
-    const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
+    // Only what the fetch currently reports — see the note in RelationPreview:
+    // the module-level Map that used to back this kept a deleted row on screen
+    // for the rest of the session, and across a sign-out.
+    const usedEntity = entity;
 
     let body: React.ReactNode;
 
@@ -234,5 +233,3 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         hover={hover}/>;
 
 }
-
-const referencesCache = new Map<string, Entity<any>>();

package/src/preview/components/RelationPreview.tsx

@@ -189,11 +189,14 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
         useCache: true
     });
 
-    if (entity) {
-        relationsCache.set(relation.pathWithId, entity);
-    }
-
-    const usedEntity = passedEntity ?? entity ?? relationsCache.get(relation.pathWithId);
+    // Only what the fetch currently reports. There used to be a module-level
+    // Map behind this, written on every successful fetch and never invalidated:
+    // when the target row was deleted `useFetch` correctly reported it gone and
+    // the card carried on rendering the copy in the Map, so the "missing"
+    // branches below were unreachable for anything previewed this session — and
+    // the Map outlived a sign-out. `useFetch` keeps its own cache, seeds the
+    // first render from it, and clears the entry when the row disappears.
+    const usedEntity = passedEntity ?? entity;
 
     let body: React.ReactNode;
 
@@ -266,5 +269,3 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
         hover={hover}/>;
 
 }
-
-const relationsCache = new Map<string, Entity<any>>();

package/src/preview/components/date_fns_locales.ts

@@ -0,0 +1,125 @@
+import type { Locale as LocaleKey } from "@rebasepro/admin-types";
+import type { Locale as DateFnsLocale } from "date-fns";
+
+/**
+ * One date-fns locale, fetched when the admin is actually configured to use it.
+ *
+ * `DatePreview` used to open with:
+ *
+ *     import * as locales from "date-fns/locale";
+ *
+ * and then index that namespace with the configured locale. A namespace import
+ * of a barrel is a reference to every member of it, so all ~77 locales were
+ * bundled — 640 kB, in the entry chunk's static graph, to format dates in the
+ * one locale a given deployment has configured (and `undefined`, meaning
+ * en-US, for nearly all of them).
+ *
+ * A map of thunks is written out rather than derived from the locale key,
+ * because `import(`date-fns/locale/${name}`)` is not statically analysable:
+ * the bundler cannot see which modules it must emit, and the import fails at
+ * runtime in a build. Each entry below is its own async chunk, and exactly one
+ * of them is ever fetched.
+ *
+ * `fil` is in the `Locale` union and has no date-fns locale to import; it
+ * resolved to `undefined` through the namespace too, so it still does.
+ */
+const dateFnsLocaleLoaders: Partial<Record<LocaleKey, () => Promise<DateFnsLocale>>> = {
+    af: () => import("date-fns/locale/af").then(m => m.af),
+    ar: () => import("date-fns/locale/ar").then(m => m.ar),
+    arDZ: () => import("date-fns/locale/ar-DZ").then(m => m.arDZ),
+    arMA: () => import("date-fns/locale/ar-MA").then(m => m.arMA),
+    arSA: () => import("date-fns/locale/ar-SA").then(m => m.arSA),
+    az: () => import("date-fns/locale/az").then(m => m.az),
+    be: () => import("date-fns/locale/be").then(m => m.be),
+    bg: () => import("date-fns/locale/bg").then(m => m.bg),
+    bn: () => import("date-fns/locale/bn").then(m => m.bn),
+    ca: () => import("date-fns/locale/ca").then(m => m.ca),
+    cs: () => import("date-fns/locale/cs").then(m => m.cs),
+    cy: () => import("date-fns/locale/cy").then(m => m.cy),
+    da: () => import("date-fns/locale/da").then(m => m.da),
+    de: () => import("date-fns/locale/de").then(m => m.de),
+    el: () => import("date-fns/locale/el").then(m => m.el),
+    enAU: () => import("date-fns/locale/en-AU").then(m => m.enAU),
+    enCA: () => import("date-fns/locale/en-CA").then(m => m.enCA),
+    enGB: () => import("date-fns/locale/en-GB").then(m => m.enGB),
+    enIN: () => import("date-fns/locale/en-IN").then(m => m.enIN),
+    enNZ: () => import("date-fns/locale/en-NZ").then(m => m.enNZ),
+    enUS: () => import("date-fns/locale/en-US").then(m => m.enUS),
+    eo: () => import("date-fns/locale/eo").then(m => m.eo),
+    es: () => import("date-fns/locale/es").then(m => m.es),
+    et: () => import("date-fns/locale/et").then(m => m.et),
+    eu: () => import("date-fns/locale/eu").then(m => m.eu),
+    faIR: () => import("date-fns/locale/fa-IR").then(m => m.faIR),
+    fi: () => import("date-fns/locale/fi").then(m => m.fi),
+    fr: () => import("date-fns/locale/fr").then(m => m.fr),
+    frCA: () => import("date-fns/locale/fr-CA").then(m => m.frCA),
+    frCH: () => import("date-fns/locale/fr-CH").then(m => m.frCH),
+    gd: () => import("date-fns/locale/gd").then(m => m.gd),
+    gl: () => import("date-fns/locale/gl").then(m => m.gl),
+    gu: () => import("date-fns/locale/gu").then(m => m.gu),
+    he: () => import("date-fns/locale/he").then(m => m.he),
+    hi: () => import("date-fns/locale/hi").then(m => m.hi),
+    hr: () => import("date-fns/locale/hr").then(m => m.hr),
+    hu: () => import("date-fns/locale/hu").then(m => m.hu),
+    hy: () => import("date-fns/locale/hy").then(m => m.hy),
+    id: () => import("date-fns/locale/id").then(m => m.id),
+    is: () => import("date-fns/locale/is").then(m => m.is),
+    it: () => import("date-fns/locale/it").then(m => m.it),
+    ja: () => import("date-fns/locale/ja").then(m => m.ja),
+    ka: () => import("date-fns/locale/ka").then(m => m.ka),
+    kk: () => import("date-fns/locale/kk").then(m => m.kk),
+    kn: () => import("date-fns/locale/kn").then(m => m.kn),
+    ko: () => import("date-fns/locale/ko").then(m => m.ko),
+    lb: () => import("date-fns/locale/lb").then(m => m.lb),
+    lt: () => import("date-fns/locale/lt").then(m => m.lt),
+    lv: () => import("date-fns/locale/lv").then(m => m.lv),
+    mk: () => import("date-fns/locale/mk").then(m => m.mk),
+    ms: () => import("date-fns/locale/ms").then(m => m.ms),
+    mt: () => import("date-fns/locale/mt").then(m => m.mt),
+    nb: () => import("date-fns/locale/nb").then(m => m.nb),
+    nl: () => import("date-fns/locale/nl").then(m => m.nl),
+    nlBE: () => import("date-fns/locale/nl-BE").then(m => m.nlBE),
+    nn: () => import("date-fns/locale/nn").then(m => m.nn),
+    pl: () => import("date-fns/locale/pl").then(m => m.pl),
+    pt: () => import("date-fns/locale/pt").then(m => m.pt),
+    ptBR: () => import("date-fns/locale/pt-BR").then(m => m.ptBR),
+    ro: () => import("date-fns/locale/ro").then(m => m.ro),
+    ru: () => import("date-fns/locale/ru").then(m => m.ru),
+    sk: () => import("date-fns/locale/sk").then(m => m.sk),
+    sl: () => import("date-fns/locale/sl").then(m => m.sl),
+    sr: () => import("date-fns/locale/sr").then(m => m.sr),
+    srLatn: () => import("date-fns/locale/sr-Latn").then(m => m.srLatn),
+    sv: () => import("date-fns/locale/sv").then(m => m.sv),
+    ta: () => import("date-fns/locale/ta").then(m => m.ta),
+    te: () => import("date-fns/locale/te").then(m => m.te),
+    th: () => import("date-fns/locale/th").then(m => m.th),
+    tr: () => import("date-fns/locale/tr").then(m => m.tr),
+    ug: () => import("date-fns/locale/ug").then(m => m.ug),
+    uk: () => import("date-fns/locale/uk").then(m => m.uk),
+    uz: () => import("date-fns/locale/uz").then(m => m.uz),
+    vi: () => import("date-fns/locale/vi").then(m => m.vi),
+    zhCN: () => import("date-fns/locale/zh-CN").then(m => m.zhCN),
+    zhTW: () => import("date-fns/locale/zh-TW").then(m => m.zhTW),
+};
+
+const cache = new Map<LocaleKey, DateFnsLocale>();
+
+/** The locale if it has already been fetched, otherwise `undefined`. Never fetches. */
+export function getLoadedDateFnsLocale(locale: LocaleKey | undefined): DateFnsLocale | undefined {
+    return locale ? cache.get(locale) : undefined;
+}
+
+/**
+ * Fetch a date-fns locale. Resolves to `undefined` for a locale date-fns does
+ * not ship, which is what indexing the namespace used to yield.
+ */
+export async function loadDateFnsLocale(locale: LocaleKey | undefined): Promise<DateFnsLocale | undefined> {
+    if (!locale) return undefined;
+    const cached = cache.get(locale);
+    if (cached) return cached;
+    const loader = dateFnsLocaleLoaders[locale];
+    if (!loader) return undefined;
+    const loaded = await loader();
+    cache.set(locale, loaded);
+    return loaded;
+}

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -1,7 +1,7 @@
 import type { ArrayProperty, RelationProperty } from "@rebasepro/types";
 import { EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { normalizeToEntityRelation } from "@rebasepro/common";
+import { normalizeToEntityRelation, getRelationTargetPath } from "@rebasepro/common";
 import { RelationPreview } from "../components/RelationPreview";
 import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
 import { InlineEntityListPreview } from "../components/InlineEntityListPreview";
@@ -27,11 +27,14 @@ export function ArrayOfRelationsPreview({
         throw Error("Picked wrong preview component ArrayOfRelationsPreview");
 
     const ofProperty = property.of as RelationProperty;
+    // Elements arrive hydrated or as bare foreign keys depending on the fetch
+    // path; the declared target resolves the latter rather than dropping them.
+    const relationTargetPath = getRelationTargetPath(ofProperty);
 
     // See ArrayOfReferencesPreview: nested lists stay on one wrapping line.
     if (nested || textOnly) {
         const relations = ((value ?? []) as unknown[])
-            .map(relation => normalizeToEntityRelation(relation))
+            .map(relation => normalizeToEntityRelation(relation, "relation", relationTargetPath))
             .filter((relation): relation is EntityRelation => Boolean(relation));
         return <InlineEntityListPreview
             items={relations}
@@ -51,7 +54,7 @@ export function ArrayOfRelationsPreview({
         <div className="flex flex-col w-full gap-0.5">
             {value ?
                 (value as unknown[]).map((relation: unknown, index: number) => {
-                    const entityRelation = normalizeToEntityRelation(relation);
+                    const entityRelation = normalizeToEntityRelation(relation, "relation", relationTargetPath);
 
                     if (!entityRelation) return null;
 

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