@rebasepro/admin 0.4.0 → 0.6.0

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);
     }
 
 }

package/src/util/previews.ts

@@ -22,16 +22,18 @@ export function getEntityPreviewKeys(
     if (listProperties && listProperties.length > 0) {
         return listProperties;
     } else {
-        listProperties = allProperties;
+        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;
+                return !isIdProp && key !== "id";
             })
             .filter(key => {
                 const property = targetCollection.properties[key];
-                return property && !isPropertyBuilder(property) && !isReferenceProperty(property) && !isRelationProperty(property) && !isHiddenProperty(property);
+                return property && !isPropertyBuilder(property) && !isReferenceProperty(property) && !isHiddenProperty(property)
+                    && (hasExplicitOrder || !isRelationProperty(property));
             }).slice(0, limit);
     }
 }
@@ -40,8 +42,27 @@ export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(col
     if (collection.titleProperty) {
         return collection.titleProperty as string;
     }
-    
+
+    const hasExplicitOrder = !!(collection.propertiesOrder as string[] | undefined);
     const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
+
+    // If explicit propertiesOrder is set, allow the first non-ID relation or string to be the titleKey
+    if (hasExplicitOrder) {
+        for (const key of orderToSearch) {
+            const property = collection.properties[key];
+            if (property && !isPropertyBuilder(property)) {
+                const prop = property as Property;
+                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as { isId?: boolean }).isId);
+                if (isIdProp || key === "id" || isHiddenProperty(prop)) {
+                    continue;
+                }
+                if (prop.type === "relation" || prop.type === "string") {
+                    return key;
+                }
+            }
+        }
+    }
+
     let firstStringCandidate: string | undefined;
 
     for (const key of orderToSearch) {
@@ -65,3 +86,79 @@ export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(col
     return firstStringCandidate;
 }
 
+/**
+ * Attempt to turn a title value (which might be a relation, reference, date, array, or other complex object)
+ * into a renderable, human-readable string.
+ */
+export function resolveTitleToString(title: any): string {
+    if (title === null || title === undefined) {
+        return "";
+    }
+
+    if (typeof title !== "object") {
+        return String(title);
+    }
+
+    // Check if it's a relation shape: { __type: "relation", id, path, data }
+    if ("__type" in title && title.__type === "relation") {
+        if (title.data && title.data.values) {
+            const values = title.data.values;
+            // Prioritize common title fields in eagerly loaded relation data
+            for (const key of ["name", "title", "label", "displayName"]) {
+                if (values[key] !== undefined && values[key] !== null) {
+                    return String(values[key]);
+                }
+            }
+            // Fallback: search for first short string value in values
+            for (const val of Object.values(values)) {
+                if (typeof val === "string" && val.length > 0 && val.length < 200) {
+                    return val;
+                }
+            }
+        }
+        if (title.id !== undefined && title.id !== null) {
+            return String(title.id);
+        }
+    }
+
+    // Check if it's a reference shape: { isEntityReference() } or similar
+    if ("isEntityReference" in title && typeof title.isEntityReference === "function" && title.isEntityReference()) {
+        return String(title.id);
+    }
+    if ("id" in title && "path" in title && !("__type" in title)) {
+        // Flat reference/relation-like object
+        return String(title.id);
+    }
+
+    // Check if it's a Date
+    if (title instanceof Date) {
+        return title.toLocaleDateString();
+    }
+
+    // Check if it has a string/number property like name/title/label/id
+    if ("name" in title && title.name !== undefined && title.name !== null && typeof title.name !== "object") {
+        return String(title.name);
+    }
+    if ("title" in title && title.title !== undefined && title.title !== null && typeof title.title !== "object") {
+        return String(title.title);
+    }
+    if ("label" in title && title.label !== undefined && title.label !== null && typeof title.label !== "object") {
+        return String(title.label);
+    }
+    if ("id" in title && title.id !== undefined && title.id !== null && typeof title.id !== "object") {
+        return String(title.id);
+    }
+
+    // Fallback: try converting to string, or JSON.stringify if it looks like a generic object
+    try {
+        const str = String(title);
+        if (str !== "[object Object]") {
+            return str;
+        }
+        return JSON.stringify(title);
+    } catch {
+        return "";
+    }
+}
+
+