@rebasepro/admin 0.5.0 → 0.6.1

package/src/preview/PropertyPreview.tsx

@@ -117,6 +117,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                         size={props.size}
                         reference={new EntityReference({ id: value,
 path: stringProperty.reference.path })}
+                        textOnly={props.textOnly}
                     />;
                 } else {
                     content = <EmptyValue/>;
@@ -213,6 +214,7 @@ path: stringProperty.reference.path })}
                     includeEntityLink={property.includeEntityLink}
                     size={props.size}
                     reference={value as EntityReference}
+                    textOnly={props.textOnly}
                 />;
             } else {
                 content = buildWrongValueType(propertyKey, property.type, value);
@@ -229,7 +231,7 @@ path: stringProperty.reference.path })}
             content = (
                 <div className="flex flex-col w-full gap-0.5">
                     {(value as unknown[]).map((item: unknown, index: number) => {
-                        const entityRelation = normalizeToEntityRelation(item);
+                        const entityRelation = normalizeToEntityRelation(item, "relation");
                         if (!entityRelation) return null;
                         return (
                             <div className="w-full"
@@ -241,6 +243,7 @@ path: stringProperty.reference.path })}
                                     includeEntityLink={property.includeEntityLink}
                                     size={"small"}
                                     relation={entityRelation}
+                                    textOnly={props.textOnly}
                                 />
                             </div>
                         );
@@ -249,7 +252,7 @@ path: stringProperty.reference.path })}
             );
         } else {
             // Single-cardinality relation
-            const relationValue = normalizeToEntityRelation(value);
+            const relationValue = normalizeToEntityRelation(value, "relation");
             if (relationValue) {
                 content = <RelationPreview
                     disabled={!property.relation}
@@ -258,6 +261,7 @@ path: stringProperty.reference.path })}
                     includeEntityLink={property.includeEntityLink}
                     size={props.size}
                     relation={relationValue}
+                    textOnly={props.textOnly}
                 />;
             } else {
                 content = buildWrongValueType(propertyKey, property.type, value);

package/src/preview/components/ReferencePreview.tsx

@@ -3,12 +3,14 @@ import * as React from "react";
 
 import { Entity, EntityReference } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useEntityFetch } from "@rebasepro/core";
+import { useCustomizationController, useEntityFetch, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 import { Skeleton } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView } from "@rebasepro/core";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 import { useCollectionRegistryController } from "../../index";
+import { getEntityTitlePropertyKey } from "../../util/previews";
+import { getValueInPath } from "@rebasepro/utils";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -19,6 +21,7 @@ export type ReferencePreviewProps = {
     hover?: boolean;
     includeEntityLink?: boolean;
     includeId?: boolean;
+    textOnly?: boolean;
 };
 
 /**
@@ -28,6 +31,9 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
+        if (props.textOnly) {
+            return <span>{String(reference)}</span>;
+        }
         return <EntityPreviewContainer
             onClick={props.onClick}
             size={props.size ?? "medium"}>
@@ -40,7 +46,9 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
     </ErrorBoundary>;
 };
 
-function ReferencePreviewInternal({
+const DefaultMissingReference: React.FC<{ path: string }> = () => null;
+
+function ReferencePreviewInternalInner({
     disabled,
     reference,
     previewProperties,
@@ -48,18 +56,19 @@ function ReferencePreviewInternal({
     hover,
     onClick,
     includeEntityLink = true,
-    includeId = true
-}: ReferencePreviewProps) {
-
-    const customizationController = useCustomizationController();
-
-    const collectionRegistryController = useCollectionRegistryController();
+    includeId = true,
+    textOnly,
+    collection
+}: ReferencePreviewProps & { collection?: EntityCollection }) {
+    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
 
-    const collection = collectionRegistryController.getCollection(reference.path);
     if (!collection) {
-        if (customizationController.components?.missingReference) {
-            return <customizationController.components.missingReference path={reference.path}/>;
+        if (ResolvedMissingReference !== DefaultMissingReference) {
+            return <ResolvedMissingReference path={reference.path}/>;
         } else {
+            if (textOnly) {
+                return <span>{reference.path}</span>;
+            }
             return <EntityPreviewContainer
                 onClick={onClick}
                 size={size ?? "medium"}>
@@ -78,9 +87,31 @@ function ReferencePreviewInternal({
         includeEntityLink={includeEntityLink}
         includeId={includeId}
         onClick={onClick}
+        textOnly={textOnly}
         hover={hover}/>
 }
 
+function ReferencePreviewInternal(props: ReferencePreviewProps) {
+    const collectionRegistryController = useCollectionRegistryController();
+    const collection = collectionRegistryController.getCollection(props.reference.path);
+
+    const content = (
+        <ReferencePreviewInternalInner
+            {...props}
+            collection={collection}
+        />
+    );
+
+    if (collection?.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={collection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
+}
+
 function ReferencePreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
     reference,
     collection,
@@ -90,11 +121,15 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     includeEntityLink,
     includeId,
     onClick,
-    hover
+    hover,
+    textOnly
 }: ReferencePreviewProps & {
     collection: EntityCollection<M>
 }) {
 
+    const ResolvedEntityPreview = useComponentOverride("Entity.Preview", EntityPreview);
+    const customizationController = useCustomizationController();
+
     const {
         entity,
         dataLoading,
@@ -121,6 +156,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
             tooltip={reference.path}/>;
     }
     if (body) {
+        if (textOnly) {
+            return <span>{reference.id}</span>;
+        }
 
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -132,6 +170,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (dataLoading && !usedEntity) {
+        if (textOnly) {
+            return <Skeleton className="inline-block w-20 h-4" />;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -142,6 +183,9 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
     }
 
     if (!usedEntity) {
+        if (textOnly) {
+            return <span>{reference.id}</span>;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -151,7 +195,14 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         );
     }
 
-    return <EntityPreview size={size}
+    if (textOnly) {
+        const titleProperty = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+        const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : undefined;
+        const displayValue = titleValue !== undefined && titleValue !== null ? String(titleValue) : String(reference.id);
+        return <span className="truncate">{displayValue}</span>;
+    }
+
+    return <ResolvedEntityPreview size={size}
         previewKeys={previewProperties}
         disabled={disabled}
         entity={usedEntity}

package/src/preview/components/RelationPreview.tsx

@@ -3,10 +3,12 @@ import * as React from "react";
 
 import { Entity, EntityRelation } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useEntityFetch, ErrorView } from "@rebasepro/core";
+import { useCustomizationController, useEntityFetch, ErrorView, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 import { Skeleton } from "@rebasepro/ui";
 import { EntityPreview, EntityPreviewContainer } from "../../components";
 import { useCollectionRegistryController } from "../../index";
+import { getEntityTitlePropertyKey } from "../../util/previews";
+import { getValueInPath } from "@rebasepro/utils";
 
 export type RelationPreviewProps = {
     disabled?: boolean;
@@ -17,8 +19,45 @@ export type RelationPreviewProps = {
     hover?: boolean;
     includeEntityLink?: boolean;
     includeId?: boolean;
+    textOnly?: boolean;
 };
 
+/**
+ * Extract a display name from a plain relation-shaped object that isn't
+ * a proper EntityRelation instance. Tries common name fields in the
+ * entity's values, then falls back to the id.
+ */
+function extractDisplayFromPlainObject(obj: unknown): string {
+    if (!obj || typeof obj !== "object") return "—";
+    const record = obj as Record<string, unknown>;
+
+    // Try data.values.{name,title,...} (EntityRelation.data is an Entity with .values)
+    const data = record.data;
+    if (data && typeof data === "object") {
+        const dataRecord = data as Record<string, unknown>;
+        const values = (dataRecord.values && typeof dataRecord.values === "object")
+            ? dataRecord.values as Record<string, unknown>
+            : dataRecord;
+        const nameFields = ["name", "title", "label", "display_name", "displayName", "email", "username"];
+        for (const field of nameFields) {
+            const v = values[field];
+            if (v && typeof v === "string") return v;
+        }
+    }
+
+    // Try direct fields on the object itself (some serialization paths flatten the data)
+    const directFields = ["name", "title", "label", "display_name", "displayName", "email"];
+    for (const field of directFields) {
+        const v = record[field];
+        if (v && typeof v === "string") return v;
+    }
+
+    // Last resort: show the id
+    if ("id" in record && record.id != null) return String(record.id);
+
+    return "—";
+}
+
 /**
  * @group Preview components
  */
@@ -26,6 +65,10 @@ export const RelationPreview = function RelationPreview(props: RelationPreviewPr
     const relation = props.relation;
     if (!(typeof relation === "object" && "isEntityRelation" in relation && relation.isEntityRelation())) {
         console.warn("Relation preview received value of type", typeof relation);
+        if (props.textOnly) {
+            const display = extractDisplayFromPlainObject(relation);
+            return <span className="truncate">{display}</span>;
+        }
         return <EntityPreviewContainer
             onClick={props.onClick}
             size={props.size}>
@@ -36,7 +79,9 @@ export const RelationPreview = function RelationPreview(props: RelationPreviewPr
     return <RelationPreviewInternal {...props}/>;
 };
 
-function RelationPreviewInternal({
+const DefaultMissingReference: React.FC<{ path: string }> = () => null;
+
+function RelationPreviewInternalInner({
     disabled,
     relation,
     previewProperties,
@@ -44,18 +89,19 @@ function RelationPreviewInternal({
     hover,
     onClick,
     includeEntityLink = true,
-    includeId = true
-}: RelationPreviewProps) {
-
-    const customizationController = useCustomizationController();
-
-    const collectionRegistryController = useCollectionRegistryController();
+    includeId = true,
+    textOnly,
+    collection
+}: RelationPreviewProps & { collection?: EntityCollection }) {
+    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
 
-    const collection = collectionRegistryController.getCollection(relation.path);
     if (!collection) {
-        if (customizationController.components?.missingReference) {
-            return <customizationController.components.missingReference path={relation.path}/>;
+        if (ResolvedMissingReference !== DefaultMissingReference) {
+            return <ResolvedMissingReference path={relation.path}/>;
         } else {
+            if (textOnly) {
+                return <span>{relation.path}</span>;
+            }
             return <EntityPreviewContainer size={size}>
                 <ErrorView error={`Collection not found: ${relation.path}`}/>
             </EntityPreviewContainer>;
@@ -71,9 +117,31 @@ function RelationPreviewInternal({
         includeEntityLink={includeEntityLink}
         includeId={includeId}
         onClick={onClick}
+        textOnly={textOnly}
         hover={hover}/>
 }
 
+function RelationPreviewInternal(props: RelationPreviewProps) {
+    const collectionRegistryController = useCollectionRegistryController();
+    const collection = collectionRegistryController.getCollection(props.relation.path);
+
+    const content = (
+        <RelationPreviewInternalInner
+            {...props}
+            collection={collection}
+        />
+    );
+
+    if (collection?.components) {
+        return (
+            <CollectionComponentOverrideProvider overrides={collection.components}>
+                {content}
+            </CollectionComponentOverrideProvider>
+        );
+    }
+    return content;
+}
+
 function RelationPreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
     relation,
     collection,
@@ -83,12 +151,15 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     includeEntityLink,
     includeId,
     onClick,
-    hover
+    hover,
+    textOnly
 }: RelationPreviewProps & {
     collection: EntityCollection<M>
 }) {
 
     const passedEntity = relation.data;
+    const ResolvedEntityPreview = useComponentOverride("Entity.Preview", EntityPreview);
+    const customizationController = useCustomizationController();
 
     const {
         entity,
@@ -117,6 +188,9 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (body) {
+        if (textOnly) {
+            return <span>{relation.id}</span>;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -127,6 +201,9 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (dataLoading && !usedEntity) {
+        if (textOnly) {
+            return <Skeleton className="inline-block w-20 h-4" />;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -137,6 +214,9 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (!usedEntity) {
+        if (textOnly) {
+            return <span>{relation.id}</span>;
+        }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                 hover={disabled ? undefined : hover}
@@ -145,7 +225,15 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
             </EntityPreviewContainer>
         );
     }
-    return <EntityPreview size={size}
+
+    if (textOnly) {
+        const titleProperty = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
+        const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : undefined;
+        const displayValue = titleValue !== undefined && titleValue !== null ? String(titleValue) : String(relation.id);
+        return <span className="truncate">{displayValue}</span>;
+    }
+
+    return <ResolvedEntityPreview size={size}
         previewKeys={previewProperties}
         disabled={disabled}
         entity={usedEntity}

package/src/preview/components/UserPreview.tsx

@@ -1,30 +1,21 @@
-
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import type { StringProperty } from "@rebasepro/types";
 import React from "react";
-import { useInternalUserManagementController } from "@rebasepro/core";
-import { UserDisplay } from "@rebasepro/core";
 import { EmptyValue } from "./EmptyValue";
 import { Typography } from "@rebasepro/ui";
-import { User } from "@rebasepro/types";
 
 /**
- * Preview component for displaying user information.
- * This is a simple wrapper around UserDisplay.
+ * Preview component for displaying a user reference value.
+ *
+ * Shows the raw user ID. Collection-based user management means
+ * user records are fetched through the standard data layer.
  *
  * @group Preview components
  */
 export function UserPreview({ value }: PropertyPreviewProps<StringProperty>) {
-    const getUser = useInternalUserManagementController<User>()?.getUser;
-
     if (typeof value !== "string" || !value) {
         return <EmptyValue/>;
     }
 
-    const user = getUser?.(value);
-    if (!user) {
-        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
-    }
-
-    return <UserDisplay user={user}/>;
+    return <Typography variant={"caption"} color={"secondary"}>{value}</Typography>;
 }

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -25,7 +25,7 @@ export function ArrayOfMapsPreview({
     const mapProperty = property.of;
     const properties = mapProperty.properties;
     if (!properties) {
-        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property '${propertyKey}'${mapProperty.name ? ` ("${mapProperty.name}")` : ""}`);
     }
     const values = value as Record<string, unknown>[];
     const previewProperties: string[] | undefined = (mapProperty as MapProperty).previewProperties;

package/src/routes/RebaseRoute.tsx

@@ -5,7 +5,7 @@ import { EntityDetailView } from "../components/EntityDetailView";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { EntityCollectionView } from "../components";
-import { NotFoundPage, useUserConfigurationPersistence } from "@rebasepro/core";
+import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride } from "@rebasepro/core";
 import { UnsavedChangesDialog } from "@rebasepro/core";
 import { CircularProgressCenter } from "@rebasepro/ui";
 import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
@@ -20,6 +20,7 @@ export function RebaseRoute() {
     const urlController = useUrlController();
     const breadcrumbs = useBreadcrumbsController();
     const userConfigPersistence = useUserConfigurationPersistence();
+    const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
 
     const hash = location.hash;
     const isSidePanel = hash.includes("#side");
@@ -91,7 +92,7 @@ export function RebaseRoute() {
             }
             return null;
         }
-        return <EntityCollectionView
+        return <ResolvedCollectionView
             key={`collection_view_${collection.slug}`}
             {...collection}
             parentCollectionSlugs={[]} parentEntityIds={[]}
@@ -114,7 +115,7 @@ export function RebaseRoute() {
                 }
                 return null;
             }
-            return <EntityCollectionView
+            return <ResolvedCollectionView
                 key={`collection_view_${collection.slug}`}
                 {...collection}
                 parentCollectionSlugs={[]} parentEntityIds={[]}
@@ -185,7 +186,7 @@ export function RebaseRoute() {
                     }
                 }
             }
-            return <EntityCollectionView
+            return <ResolvedCollectionView
                 key={`collection_view_${collection.slug}`}
                 {...collection}
                 parentCollectionSlugs={[]} parentEntityIds={[]}

package/src/types/components/PropertyPreviewProps.tsx

@@ -56,4 +56,9 @@ export interface PropertyPreviewProps<P extends Property | Property, CustomProps
      */
     fill?: boolean;
 
+    /**
+     * If true, relations/references will render as plain text strings rather than full cards.
+     */
+    textOnly?: boolean;
+
 }

package/src/types/components/formex.tsx

@@ -1,46 +1,2 @@
-import React, { FormEvent } from "react";
+export type { FormexController, FormexResetProps } from "@rebasepro/formex";
 
-// this is duplicated from the formex package
-export type FormexController<T extends object> = {
-    values: T;
-    initialValues: T;
-    setValues: (values: T) => void;
-    setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
-    touched: Record<string, boolean>;
-    setFieldTouched: (key: string, touched: boolean, shouldValidate?: boolean) => void;
-    setTouched: (touched: Record<string, boolean>) => void;
-    dirty: boolean;
-    setDirty: (dirty: boolean) => void;
-    setSubmitCount: (submitCount: number) => void;
-    errors: Record<string, string>;
-    setFieldError: (key: string, error?: string) => void;
-    handleChange: (event: React.SyntheticEvent) => void,
-    handleBlur: (event: React.FocusEvent) => void,
-    handleSubmit: (event?: FormEvent<HTMLFormElement>) => void;
-    validate: () => void;
-    resetForm: (props?: FormexResetProps<T>) => void;
-    submitCount: number;
-    isSubmitting: boolean;
-    setSubmitting: (isSubmitting: boolean) => void;
-    isValidating: boolean;
-    /**
-     * The version of the form. This is incremented every time the form is reset
-     * or the form is submitted.
-     */
-    version: number;
-
-    debugId?: string;
-
-    undo: () => void;
-    redo: () => void;
-
-    canUndo: boolean;
-    canRedo: boolean;
-}
-
-export type FormexResetProps<T extends object> = {
-    values?: T;
-    submitCount?: number;
-    errors?: Record<string, string>;
-    touched?: Record<string, boolean>;
-};

package/src/types/fields.tsx

@@ -179,10 +179,19 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
     setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
 
     /**
-     * Save the entity.
+     * Quietly persist the entity to the database without any UI feedback
+     * (no validation, no snackbar, no form reset).
+     * Use this for programmatic/background saves from custom views.
      */
     save: (values: M) => void;
 
+    /**
+     * Submit the form — validates, saves, resets the form, and shows
+     * a success snackbar. This is what the Save button calls.
+     * Use this from custom views when you want the full "user saved" experience.
+     */
+    submit: () => void;
+
     /**
      * Collection of the entity being modified
      */

package/src/util/navigation_utils.ts

@@ -1,4 +1,4 @@
-import type { EntityCollection, UrlController, SideEntityController } from "@rebasepro/types";
+import type { EntityCollection, UrlController, SideEntityController, NavigateOptions } from "@rebasepro/types";
 
 // Canonical path utilities — single source of truth in @rebasepro/common
 export {
@@ -26,7 +26,8 @@ export function navigateToEntity({
     defaultValues,
     sideEntityController,
     onClose,
-    navigation
+    navigation,
+    replace
 }:
 
     {
@@ -47,7 +48,8 @@ export function navigateToEntity({
         path: string;
         sideEntityController: SideEntityController;
         onClose?: () => void;
-        navigation: UrlController
+        navigation: UrlController;
+        replace?: boolean;
     }) {
 
     if (openEntityMode === "side_panel" || openEntityMode === "dialog") {
@@ -83,7 +85,15 @@ export function navigateToEntity({
         // Use React Router location.state to carry defaultValues — the correct SPA
         // approach. No URL size limits, no encoding, nothing in the address bar.
         // EntityFullScreenRoute reads location.state.defaultValues on mount.
-        navigation.navigate(to, defaultValues ? { state: { defaultValues } } : undefined);
+        const navigateOptions: NavigateOptions = {};
+        if (replace !== undefined) {
+            navigateOptions.replace = replace;
+        }
+        if (defaultValues) {
+            navigateOptions.state = { defaultValues };
+        }
+        const hasOptions = Object.keys(navigateOptions).length > 0;
+        navigation.navigate(to, hasOptions ? navigateOptions : undefined);
     }
 
 }