@rebasepro/admin 0.13.0 → 0.13.1-canary.g249daa1

package/src/hooks/useEntityDisplay.tsx

@@ -0,0 +1,262 @@
+import type { AdminCollection, EntityDisplayRole } from "@rebasepro/admin-types";
+import type { Entity, Property } from "@rebasepro/types";
+import { ENTITY_DISPLAY_ROLES } from "@rebasepro/admin-types";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import {
+    EntityDisplayCache,
+    entityDisplayKey,
+    getDisplayPropertyKey,
+    getDisplayResolver,
+    getPropertyInPath,
+    useRebaseContext
+} from "@rebasepro/app";
+import { getValueInPath } from "@rebasepro/utils";
+
+import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
+import { getUserLabel, useResolvedUser } from "./useResolvedUsers";
+
+/**
+ * What fills one display role for one record.
+ *
+ * `value` is `undefined` rather than a placeholder when nothing resolved,
+ * because the substitute differs by surface and each one knows its own better
+ * than this hook does: a page heading wants the singular collection name, a link
+ * wants the id, a draft wants "New customer". A single baked-in fallback is
+ * exactly what produced three different ones scattered across the consumers.
+ */
+export interface ResolvedDisplayValue<T = unknown> {
+    /** What goes in the slot. `undefined` when the record has nothing for it. */
+    value: T | undefined;
+    /**
+     * A resolver is in flight, and `value` currently holds the derived answer or
+     * nothing. Surfaces that can show a skeleton may; none has to.
+     */
+    loading: boolean;
+    /**
+     * Set only when the value came from a property of this collection. Carries
+     * what a rich renderer needs — a status shows as its enum's coloured chip,
+     * an image as a storage thumbnail — which a bare resolved string cannot
+     * describe.
+     */
+    source?: {
+        key: string;
+        property: Property | undefined;
+        value: unknown;
+    };
+}
+
+/**
+ * One shared store, so every surface agrees on a record and resolves it once.
+ *
+ * Module-level rather than a provider: two app instances on one page share a
+ * cache keyed by collection path and record id, which *is* the same record.
+ * Nothing here is user-specific — a resolver that reads per-user data must
+ * invalidate on sign-out, which {@link useEntityDisplayCache} exposes.
+ */
+let sharedCache: EntityDisplayCache | undefined;
+
+/**
+ * The store behind {@link useEntityDisplay}, for invalidating after a write.
+ *
+ * Built on first use rather than at module scope. Importing a module should not
+ * construct anything: it runs during SSR where there is nothing to cache, and it
+ * made this module unimportable from any test that stubs `@rebasepro/app` —
+ * which several do, and which is a legitimate thing for them to do.
+ */
+export function useEntityDisplayCache(): EntityDisplayCache {
+    if (!sharedCache) sharedCache = new EntityDisplayCache();
+    return sharedCache;
+}
+
+export interface UseEntityDisplayParams<M extends Record<string, unknown>> {
+    /**
+     * Optional because several callers look the collection up in the registry by
+     * path and may not find it — a relation into a collection the panel does not
+     * register. A hook that could not be called until that succeeded would have
+     * to sit below an early return, which is not where hooks go.
+     */
+    collection?: AdminCollection<M>;
+    /**
+     * The record. A resolver is handed the whole entity — its id and path are
+     * how it reaches anything the record does not carry — so a computed value is
+     * only available once there is an entity to compute it from.
+     */
+    entity?: Entity<M>;
+    /**
+     * Values to read a declared path from when they are newer than the entity:
+     * the live form values while editing. Falls back to `entity.values`.
+     */
+    values?: Record<string, unknown>;
+    /** Set false to skip resolver work entirely — a draft has nothing to show. */
+    enabled?: boolean;
+}
+
+/**
+ * What fills one display role of one record.
+ *
+ * This is the only implementation. Before it there were seven for the title
+ * alone — the identity bar, the detail header, inline previews, reference cards,
+ * list slots, relation chips and the headless view — each re-deriving it from
+ * `collection.properties` and disagreeing about the answer.
+ *
+ * Resolution order, per role:
+ *
+ * 1. `admin.display[role]` as a **resolver** — awaited, cached per record and
+ *    role, with the derived value showing meanwhile so nothing flickers empty.
+ * 2. `admin.display[role]` as a **property path** (or, for the title, the
+ *    deprecated `titleProperty`).
+ * 3. The **derived** answer: for the title, the best-ranked property carrying a
+ *    readable value; for the rest, today's per-role heuristics.
+ *
+ * A user-picker title resolves to the person behind the id, as it always did —
+ * that path is now here rather than in two of the seven.
+ */
+export function useEntityDisplay<T = unknown, M extends Record<string, unknown> = Record<string, unknown>>(
+    role: EntityDisplayRole,
+    {
+        collection,
+        entity,
+        values: valuesProp,
+        enabled = true
+    }: UseEntityDisplayParams<M>
+): ResolvedDisplayValue<T> {
+
+    const context = useRebaseContext();
+    const cache = useEntityDisplayCache();
+
+    const values = valuesProp ?? entity?.values;
+
+    /* ---- the declared or derived key ------------------------------------- */
+
+    // The title is the one role with a ranking behind it: several candidates,
+    // best first, skipping the ones that hold nothing for *this* record. The
+    // others are a single declared or derived key.
+    const declaredKey = collection ? getDisplayPropertyKey(collection, role) : undefined;
+    const propertyKey = collection && role === "title" && !declaredKey
+        ? getEntityTitlePropertyKeyForEntity(collection, values, entity?.id)
+        : declaredKey;
+
+    const rawValue = values && propertyKey ? getValueInPath(values, propertyKey) : undefined;
+
+    // A user picker stores an auth id and renders the person: resolved like a
+    // relation, and hooked unconditionally so the hook order never changes.
+    const titleUser = useResolvedUser(
+        collection && role === "title" && isUserSelectProperty(collection, propertyKey) && typeof rawValue === "string"
+            ? rawValue
+            : undefined
+    );
+
+    const derived = useMemo<T | undefined>(() => {
+        if (titleUser) return getUserLabel(titleUser) as T;
+        if (rawValue === undefined || rawValue === null) return undefined;
+        // Only text roles get flattened to a string; a date stays a date and an
+        // image stays whatever the storage property holds, so the renderer can
+        // still format them.
+        if (role === "title" || role === "subtitle" || role === "status") {
+            return (resolveTitleToString(rawValue) || undefined) as T | undefined;
+        }
+        return rawValue as T;
+    }, [titleUser, rawValue, role]);
+
+    /* ---- the computed answer --------------------------------------------- */
+
+    const resolver = collection ? getDisplayResolver(collection, role) : undefined;
+    const canResolve = Boolean(enabled && resolver && entity);
+    const key = entity ? entityDisplayKey(entity.path, entity.id, role) : undefined;
+
+    const resolved = useSyncExternalStore<unknown>(
+        // Subscribing unconditionally keeps the hook order stable. The store
+        // only notifies when an entry changes, so a collection with no resolver
+        // never re-renders from it.
+        cb => cache.subscribe(cb),
+        () => (canResolve && key ? cache.peek(key) : undefined),
+        // Server render: nothing is resolved, so every slot starts at its
+        // fallback and hydration does not disagree with the markup.
+        () => undefined
+    );
+
+    const loading = Boolean(canResolve && key && resolved === undefined);
+
+    useEffect(() => {
+        if (!canResolve || !key || !resolver || !entity) return;
+        if (cache.peek(key) !== undefined) return;
+        cache.resolve(key, () => resolver({
+            entity,
+            context
+        })).catch(() => {
+            // Unreachable, and kept only so it stays that way: `resolve` records a
+            // failure as "nothing" and returns a RESOLVED promise, which is why
+            // the warning that used to live here could never run — see the note on
+            // `EntityDisplayCache.resolve`. The cache reports the failure itself
+            // now, once per key. This exists so that if `resolve` ever starts
+            // rejecting, it surfaces as a caught no-op rather than an unhandled
+            // rejection during render.
+        });
+    }, [cache, canResolve, key, resolver, entity, context, role]);
+
+    /* ---- the answer ------------------------------------------------------ */
+
+    // A resolver that produced nothing falls back to the derived value rather
+    // than to blank: it said this record has no computed answer for the role,
+    // not that the role should be empty.
+    const computed = canResolve && resolved !== null ? resolved as T | undefined : undefined;
+    const value = computed ?? derived;
+
+    return useMemo(() => ({
+        value,
+        loading,
+        source: collection && propertyKey && value === derived && derived !== undefined
+            ? {
+                key: propertyKey,
+                property: getPropertyInPath(collection.properties, propertyKey),
+                value: rawValue
+            }
+            : undefined
+    }), [value, loading, propertyKey, derived, collection, rawValue]);
+}
+
+/**
+ * Every display role of a record at once — what a list row, a card or a board
+ * card needs, in one call rather than six.
+ *
+ * The role list is iterated from {@link ENTITY_DISPLAY_ROLES} so the hook order
+ * is fixed and adding a role does not mean editing every caller.
+ */
+export function useEntityDisplayValues<M extends Record<string, unknown>>(
+    params: UseEntityDisplayParams<M>
+): Record<EntityDisplayRole, ResolvedDisplayValue> & { loading: boolean } {
+
+    // Not a loop over `useEntityDisplay`: the number of hooks a component calls
+    // has to be fixed at compile time, and a role added to the array later would
+    // silently change it. Written out, it is checked by the return type.
+    const title = useEntityDisplay<string, M>("title", params);
+    const subtitle = useEntityDisplay<string, M>("subtitle", params);
+    const image = useEntityDisplay<string, M>("image", params);
+    const status = useEntityDisplay<string, M>("status", params);
+    const date = useEntityDisplay<Date | string | number, M>("date", params);
+    const tags = useEntityDisplay<string[] | string, M>("tags", params);
+
+    return useMemo(() => ({
+        title,
+        subtitle,
+        image,
+        status,
+        date,
+        tags,
+        loading: title.loading || subtitle.loading || image.loading
+            || status.loading || date.loading || tags.loading
+    }), [title, subtitle, image, status, date, tags]);
+}
+
+/**
+ * What the record is called — the one role asked for often enough on its own to
+ * deserve a name.
+ */
+export function useEntityTitle<M extends Record<string, unknown>>(
+    params: UseEntityDisplayParams<M>
+): ResolvedDisplayValue<string> {
+    return useEntityDisplay<string, M>("title", params);
+}
+
+/** Re-exported so a caller can iterate roles without reaching into types. */
+export { ENTITY_DISPLAY_ROLES };

package/src/hooks/useEntityDisplayTitle.tsx

@@ -1,60 +1,49 @@
 import type { AdminCollection } from "@rebasepro/admin-types";
-import type { EntityStatus } from "@rebasepro/types";
-import { getValueInPath } from "@rebasepro/utils";
-import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
-import { getUserLabel, useResolvedUser } from "./useResolvedUsers";
+import type { Entity, EntityStatus } from "@rebasepro/types";
+import { useEntityTitle } from "./useEntityDisplay";
 
 export interface UseEntityDisplayTitleParams<M extends Record<string, unknown>> {
     collection: AdminCollection<M>;
+    /** The record. Needed for a computed title; see {@link useEntityTitle}. */
+    entity?: Entity<M>;
+    /** Live form values, when they are ahead of the entity. */
     values?: Record<string, unknown>;
-    entityId?: string | number;
     status: EntityStatus;
 }
 
 /**
- * The human name for a record, for the identity bar and the breadcrumb.
+ * The heading for a record: the identity bar and the breadcrumb.
  *
- * The guard on `status` is the point. The title resolver walks candidate
- * properties and returns the first non-empty one, and on a brand new entity the
- * only populated values are the property defaults — so creating a blog post
- * opened a page headed **draft**, the default of its `status` enum. A record
- * that does not exist yet has no name; it has an intent.
+ * Everything about *what a record is called* lives in {@link useEntityTitle}.
+ * What is left here is the heading's own two rules, which are presentation, not
+ * identity:
+ *
+ * The guard on `status` is the first. The title resolver returns the first
+ * candidate carrying a value, and on a brand new entity the only values are the
+ * property defaults — so creating a blog post opened a page headed **draft**,
+ * the default of its `status` enum. A record that does not exist yet has no
+ * name; it has an intent.
+ *
+ * The fallback is the second. A page needs a heading even when the record has
+ * nothing readable in it, and the honest one is what kind of thing it is.
  */
 export function useEntityDisplayTitle<M extends Record<string, unknown>>({
     collection,
+    entity,
     values,
-    entityId,
     status
 }: UseEntityDisplayTitleParams<M>): string {
 
     const isNew = status === "new";
-
-    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, values, entityId);
-    const rawTitle = !isNew && values && titlePropertyKey
-        ? getValueInPath(values, titlePropertyKey)
-        : undefined;
-
-    // A user picker stores an id: resolve it to the person, like a relation.
-    const titleUser = useResolvedUser(
-        isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
-            ? rawTitle
-            : undefined
-    );
-
     const singular = collection.singularName ?? collection.name;
 
-    if (isNew) {
-        return `New ${singular.toLowerCase()}`;
-    }
-
-    if (titleUser) {
-        return getUserLabel(titleUser);
-    }
-
-    if (rawTitle !== undefined && rawTitle !== null) {
-        const resolved = resolveTitleToString(rawTitle);
-        if (resolved) return resolved;
-    }
+    const { value: title } = useEntityTitle<M>({
+        collection,
+        entity,
+        values,
+        enabled: !isNew
+    });
 
-    return singular;
+    if (isNew) return `New ${singular.toLowerCase()}`;
+    return title ?? singular;
 }

package/src/index.ts

@@ -44,6 +44,12 @@ export {
     Drawer,
     DefaultDrawer,
     DrawerFooterActions,
+    // The two rows the `Shell.DrawerNavigation*` overrides replace. Public so an
+    // app can wrap the stock ones — pass different props, add a context — instead of
+    // reimplementing a nav row and drifting from the framework's hover, active and
+    // tooltip behaviour on the next release.
+    DrawerNavigationItem,
+    DrawerNavigationGroup,
     AdminModeSyncer,
     // ContentHomePage is lazy-loaded — not re-exported here
     RebaseAdmin,
@@ -60,7 +66,9 @@ export type {
     EntityViewBindingProps,
     SelectionProps,
     SelectableTableProps,
-    CollectionPanelProps
+    CollectionPanelProps,
+    DrawerNavigationGroupProps,
+    DrawerNavigationItemProps
 } from "./components";
 
 export * from "./hooks";

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";
@@ -27,6 +27,7 @@ import { ErrorView } from "@rebasepro/app";
 import { RelationPreview } from "./components/RelationPreview";
 import { InlineEntityListPreview } from "./components/InlineEntityListPreview";
 import { useIsNestedEntityPreview } from "../components/EntityPreviewNesting";
+import { markdownToPlainText } from "./compact_text";
 import { UserPreview } from "./components/UserPreview";
 
 /**
@@ -50,6 +51,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         fill
     } = props;
 
+    // A preview rendered inside an entity preview fills one line of a card and
+    // has no room to grow — see {@link PropertyPreviewProps.compact}. The card
+    // is the thing that knows this, and it says so by opening a nesting
+    // boundary, so the depth is the signal rather than a prop every caller
+    // between here and there would have to forward.
+    const compact = props.compact ?? (nested || Boolean(props.textOnly));
+
     const property = resolveProperty({
         propertyKey,
         property: inputProperty,
@@ -103,7 +111,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                             fill={fill}
                             previewType={stringProperty.admin?.urlPreview}/>;
             } else if (stringProperty.admin?.markdown) {
-                content = <Markdown source={value} size={"small"}/>;
+                content = compact
+                    ? <span className={"text-sm"}>{markdownToPlainText(value)}</span>
+                    : <Markdown source={value} size={"small"}/>;
             } else if (stringProperty.userSelect) {
                 content = <UserPreview
                     value={value}
@@ -113,6 +123,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                 />;
             } else {
                 content = <StringPropertyPreview {...props}
+                    compact={compact}
                     property={stringProperty}
                     value={value}/>;
             }
@@ -129,6 +140,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
             if (arrayProperty.of) {
                 if (Array.isArray(arrayProperty.of)) {
                     content = <ArrayPropertyPreview {...props}
+                        compact={compact}
                         value={value}
                         property={arrayProperty}/>;
                 } else if (arrayProperty.of.type === "reference") {
@@ -153,6 +165,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                     } else {
                         content = <ArrayOfStringsPreview
                             {...props}
+                            compact={compact}
                             property={property as ArrayProperty}
                             value={value as string[]}/>;
                     }
@@ -163,11 +176,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                         property={property as ArrayProperty}/>;
                 } else {
                     content = <ArrayPropertyPreview {...props}
+                        compact={compact}
                         value={value}
                         property={property as ArrayProperty}/>;
                 }
             } else if (arrayProperty.oneOf) {
                 content = <ArrayOneOfPreview {...props}
+                    compact={compact}
                     value={value}
                     property={property as ArrayProperty}/>;
             }
@@ -178,6 +193,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         if (typeof value === "object") {
             content =
                 <MapPropertyPreview {...props}
+                    compact={compact}
                     value={value as Record<string, any>}
                     property={property as MapProperty}/>;
         } else {
@@ -218,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}`}
@@ -252,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}
@@ -270,7 +290,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
 
     } else if (property.type === "boolean") {
         if (typeof value === "boolean") {
-            content = <BooleanPreview value={value} size={size} property={property}/>;
+            content = <BooleanPreview value={value} size={size} property={property} hideLabel={props.hideLabel}/>;
         } else {
             content = buildWrongValueType(propertyKey, property.type, value);
         }

package/src/preview/compact_text.ts

@@ -0,0 +1,68 @@
+/**
+ * Turning block content into the one line a compact preview has room for.
+ *
+ * A preview slot inside a card is a single line that cannot grow. Rendering
+ * Markdown there does not produce a small version of the document — it
+ * produces the whole document, headings and lists included, inside a 44px box.
+ * These helpers take the opening line instead, which is what a person reads
+ * off a card anyway.
+ */
+
+/** Longer than any card line; the cap only keeps the DOM node small. */
+const DEFAULT_MAX_LENGTH = 280;
+
+const FENCED_CODE = /```[\s\S]*?```|~~~[\s\S]*?~~~/g;
+const HTML_TAG = /<[^>]*>/g;
+const IMAGE = /!\[([^\]]*)\]\([^)]*\)/g;
+const LINK = /\[([^\]]*)\]\([^)]*\)/g;
+const REFERENCE_LINK = /\[([^\]]*)\]\[[^\]]*\]/g;
+const HEADING = /^\s{0,3}#{1,6}\s+/gm;
+const BLOCKQUOTE = /^\s{0,3}>\s?/gm;
+const LIST_MARKER = /^\s*(?:[-*+]|\d+[.)])\s+/gm;
+const THEMATIC_BREAK = /^\s{0,3}(?:[-*_]\s*){3,}$/gm;
+const TABLE_PIPE = /[|]/g;
+const EMPHASIS = /(\*\*|__|\*|_|~~|`)/g;
+
+/**
+ * The readable text of a Markdown document, as one line.
+ *
+ * Deliberately a lexical strip rather than a parse: this runs once per preview
+ * cell in a table that can hold hundreds, and the result is truncated to a line
+ * regardless, so the cost of being exactly right is not worth paying. Anything
+ * it fails to strip degrades to a stray `*`, never to a broken layout.
+ */
+export function markdownToPlainText(source: string, maxLength: number = DEFAULT_MAX_LENGTH): string {
+    if (!source) return "";
+
+    const text = source
+        .replace(FENCED_CODE, " ")
+        .replace(IMAGE, "$1")
+        .replace(LINK, "$1")
+        .replace(REFERENCE_LINK, "$1")
+        .replace(THEMATIC_BREAK, " ")
+        .replace(HEADING, "")
+        .replace(BLOCKQUOTE, "")
+        .replace(LIST_MARKER, "")
+        .replace(HTML_TAG, "")
+        .replace(TABLE_PIPE, " ")
+        .replace(EMPHASIS, "");
+
+    return collapseToSingleLine(text, maxLength);
+}
+
+/**
+ * Whitespace — including the newlines that would otherwise let a `truncate`
+ * container grow — collapsed to single spaces, capped to `maxLength`.
+ */
+export function collapseToSingleLine(source: string, maxLength: number = DEFAULT_MAX_LENGTH): string {
+    if (!source) return "";
+    const collapsed = source.replace(/\s+/g, " ").trim();
+    if (collapsed.length <= maxLength) return collapsed;
+    // Cut at a word boundary when there is one nearby, so the line does not end
+    // mid-word for the sake of ten characters.
+    const cut = collapsed.slice(0, maxLength);
+    // The cut already landed between words: keep the last one whole.
+    if (collapsed[maxLength] === " ") return cut.trimEnd() + "…";
+    const lastSpace = cut.lastIndexOf(" ");
+    return (lastSpace > maxLength * 0.6 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
+}

package/src/preview/components/BooleanPreview.tsx

@@ -8,18 +8,21 @@ import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 export function BooleanPreview({
     value,
     size,
-    property
+    property,
+    hideLabel
 }: {
     value: boolean,
     size: PreviewSize,
     property: Property,
+    /** The caller already shows the name — see `PropertyPreviewProps.hideLabel`. */
+    hideLabel?: boolean,
 }): React.ReactElement {
     return <div className={"flex flex-row gap-2 items-center"}>
         <Checkbox checked={value}
             padding={false}
             size={size}
             color={"secondary"}/>
-        {property.name && <span
+        {!hideLabel && property.name && <span
             className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/StorageThumbnail.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
 import { UrlComponentPreview } from "./UrlComponentPreview";
-import { ErrorView, useStorageSource, useStorageSources } from "@rebasepro/app";
+import { ErrorView, useStorageSource, useStorageSources, useTranslation } from "@rebasepro/app";
 import { resolveStorageSource } from "@rebasepro/common";
 import { DownloadConfig, FileType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
@@ -42,6 +42,7 @@ export function StorageThumbnailInternal({
     storageSourceKey
 }: StorageThumbnailProps) {
 
+    const { t } = useTranslation();
     const [error, setError] = React.useState<Error | undefined>(undefined);
     const defaultStorage = useStorageSource();
     const storageSources = useStorageSources();
@@ -85,7 +86,9 @@ export function StorageThumbnailInternal({
             : (filetype?.startsWith("audio") ? "audio" : "file"));
 
     if (downloadConfig?.fileNotFound)
-        return <ErrorView error={"File not found"}></ErrorView>
+        // `file_not_found` is translated into seven locales and this rendered
+        // the English literal, so a German panel said "File not found".
+        return <ErrorView error={t("file_not_found")}></ErrorView>
 
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}

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;