@firecms/core 3.0.0-canary.287 → 3.0.0-canary.289

package/dist/util/entity_cache.d.ts

@@ -25,3 +25,4 @@ export declare function removeEntityFromCache(path: string): void;
  * Clears the entire in-memory cache and removes all related entities from `localStorage`.
  */
 export declare function clearEntityCache(): void;
+export declare function flattenKeys(obj: any, prefix?: string, result?: string[]): string[];

package/dist/util/objects.d.ts

@@ -1,5 +1,6 @@
 export declare const pick: <T>(obj: T, ...args: any[]) => T;
 export declare function isObject(item: any): any;
+export declare function isPlainObject(obj: any): boolean;
 export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U, ignoreUndefined?: boolean): T & U;
 export declare function getValueInPath(o: object | undefined, path: string): any;
 export declare function removeInPath(o: object, path: string): object | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.287",
+  "version": "3.0.0-canary.289",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.287",
-    "@firecms/formex": "^3.0.0-canary.287",
-    "@firecms/ui": "^3.0.0-canary.287",
+    "@firecms/editor": "^3.0.0-canary.289",
+    "@firecms/formex": "^3.0.0-canary.289",
+    "@firecms/ui": "^3.0.0-canary.289",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "c6606ddc2309cbdaeacb3103fbb2bb50a20418ce",
+  "gitHead": "ca236e0e8d9a91d1106bc7836b5f8945cdba35e9",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,20 +1,9 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import {
-    Checkbox,
-    Chip,
-    cls,
-    EditIcon,
-    IconButton,
-    Menu,
-    MenuItem,
-    MoreVertIcon,
-    Skeleton,
-    Tooltip
-} from "@firecms/ui";
+import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { getEntityFromCache, hasEntityInCache } from "../../util/entity_cache";
+import { getEntityFromCache } from "../../util/entity_cache";
 import { getLocalChangesBackup } from "../../util";
 
 /**
@@ -82,7 +71,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
     const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
-
+    const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
     return (
         <div
             className={cls(
@@ -102,37 +91,50 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
             {(hasActions || selectionEnabled) &&
                 <div className="w-34 flex justify-center">
 
-                    {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index}
-                                 title={action.name}
-                                 asChild={true}>
-                            <IconButton
-                                onClick={(event: MouseEvent) => {
-                                    event.stopPropagation();
-                                    action.onClick({
-                                        view: "collection",
-                                        entity,
-                                        fullPath,
-                                        fullIdPath,
-                                        collection,
-                                        context,
-                                        selectionController,
-                                        highlightEntity,
-                                        unhighlightEntity,
-                                        onCollectionChange,
-                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
-                                    });
-                                }}
-                                size={largeLayout ? "medium" : "small"}>
-                                {action.icon}
-                            </IconButton>
-                        </Tooltip>
-                    ))}
+                    {uncollapsedActions.map((action, index) => {
+                        const isEditAction = action.key === "edit";
+                        const tooltip = isEditAction && hasDraft ? "Local unsaved changes" : action.name;
+
+                        let iconButton = <IconButton
+                            onClick={(event: MouseEvent) => {
+                                event.stopPropagation();
+                                action.onClick({
+                                    view: "collection",
+                                    entity,
+                                    fullPath,
+                                    fullIdPath,
+                                    collection,
+                                    context,
+                                    selectionController,
+                                    highlightEntity,
+                                    unhighlightEntity,
+                                    onCollectionChange,
+                                    openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                });
+                            }}
+                            size={iconSize}>
+                            {action.icon}
+                        </IconButton>;
+                        if (isEditAction && hasDraft) {
+                            iconButton = (
+                                <Badge color={"warning"}>
+                                    {iconButton}
+                                </Badge>
+                            );
+                        }
+                        return (
+                            <Tooltip key={index}
+                                     title={tooltip}
+                                     asChild={true}>
+                                {iconButton}
+                            </Tooltip>
+                        );
+                    })}
 
                     {hasCollapsedActions &&
                         <Menu
                             trigger={<IconButton
-                                size={largeLayout ? "medium" : "small"}>
+                                size={iconSize}>
                                 <MoreVertIcon/>
                             </IconButton>}>
                             {collapsedActions.map((action, index) => (
@@ -164,7 +166,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     {selectionEnabled &&
                         <Tooltip title={`Select ${entity.id}`}>
                             <Checkbox
-                                size={largeLayout ? "medium" : "small"}
+                                size={iconSize}
                                 checked={Boolean(isSelected)}
                                 onCheckedChange={onCheckedChange}
                             />
@@ -178,11 +180,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-                    {hasDraft && <Tooltip title={"Local unsaved changes"} className={"inline"}>
-                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
-                            <EditIcon size={12}/>
-                        </Chip>
-                    </Tooltip>}
                     <span className="min-w-0 truncate text-center">
                         {entity
                             ? entity.id

package/src/components/EntityView.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from "react";
-import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
 import { useAuthController } from "../hooks";
+import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
  * @group Components
@@ -40,47 +40,36 @@ export function EntityView<M extends Record<string, any>>(
 
     return (
         <div className={"w-full " + className}>
-            <div className={"w-full mb-4"}>
-                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                    <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-surface-600">Id</span>
+            <div className={"w-full mb-4 p-4"}>
+
+                <div className={`grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            Id
+                        </Typography>
                     </div>
-                    <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
-                        <span className="flex-grow mr-2">{entity.id}</span>
-                        {customizationController?.entityLinkBuilder &&
-                            <a href={customizationController.entityLinkBuilder({ entity })}
-                               rel="noopener noreferrer"
-                               target="_blank">
-                                <IconButton>
-                                    <OpenInNewIcon
-                                        size={"small"}/>
-                                </IconButton>
-                            </a>}
+                    <div className="col-span-8">
+                        <div
+                            className="flex-grow text-surface-900 dark:text-white flex items-center">
+                            <span className="flex-grow mr-2">{entity.id}</span>
+                            {customizationController?.entityLinkBuilder &&
+                                <a href={customizationController.entityLinkBuilder({ entity })}
+                                   rel="noopener noreferrer"
+                                   target="_blank">
+                                    <IconButton>
+                                        <OpenInNewIcon
+                                            size={"small"}/>
+                                    </IconButton>
+                                </a>}
+                        </div>
                     </div>
                 </div>
-                {Object.entries(properties)
-                    .map(([key, property]) => {
-                        const value = entity.values?.[key];
-                        return (
-                            <div
-                                key={`reference_previews_${key}`}
-                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                                <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
-                                </div>
-                                <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
-                                    <PropertyPreview
-                                        propertyKey={key}
-                                        value={value}
-                                        // entity={entity}
-                                        property={property}
-                                        size={"medium"}/>
-                                </div>
-                            </div>
-                        )
-                    })}
+
+                <PropertyCollectionView data={entity.values} properties={properties} size={"medium"}/>
+
             </div>
         </div>
     );

package/src/components/PropertyCollectionView.tsx

@@ -0,0 +1,329 @@
+import React from "react";
+import { defaultBorderMixin, Typography } from "@firecms/ui";
+import { PreviewSize, PropertyPreview } from "../preview";
+import { ResolvedProperties, ResolvedProperty } from "../types";
+import { getValueInPath } from "../util";
+
+/**
+ * Build a readable label for a path and resolve the property
+ * Supports map and array (including arrays of maps)
+ */
+export function buildPropertyLabelAndGetProperty(
+    properties: ResolvedProperties,
+    key: string
+): { label: string; property: ResolvedProperty | undefined } {
+    if (!key) return {
+        label: "",
+        property: undefined
+    };
+
+    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
+    const segments: (string | number)[] = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(key)) !== null) {
+        if (m[1] !== undefined) segments.push(m[1]);
+        else if (m[2] !== undefined) segments.push(Number(m[2]));
+    }
+
+    let currentProps: ResolvedProperties | undefined = properties;
+    let currentProp: ResolvedProperty | undefined;
+    let lastLabel = "";
+
+    const getArrayOfProp = (p?: ResolvedProperty): ResolvedProperty | undefined => {
+        if (!p || p.dataType !== "array") return undefined;
+        return Array.isArray(p.of) ? (p.of[0] as ResolvedProperty) : (p.of as ResolvedProperty | undefined);
+    };
+
+    for (const seg of segments) {
+        if (typeof seg === "number") {
+            // Last segment label should be the index itself
+            lastLabel = `[${seg}]`;
+
+            // Move schema context into the array element
+            if (currentProp?.dataType === "array") {
+                currentProp = getArrayOfProp(currentProp);
+                if (currentProp?.dataType === "map" && currentProp.properties) {
+                    currentProps = currentProp.properties as ResolvedProperties;
+                } else {
+                    currentProps = undefined;
+                }
+            } else {
+                // Index without array schema context
+                currentProp = undefined;
+                currentProps = undefined;
+            }
+            continue;
+        }
+
+        // seg is a string key
+        if (currentProps && (currentProps as any)[seg]) {
+            const nextProp = (currentProps as any)[seg] as ResolvedProperty;
+            currentProp = nextProp;
+            // Last segment label should be the property name (or the raw key)
+            lastLabel = nextProp.name || String(seg);
+
+            if (nextProp.dataType === "map" && nextProp.properties) {
+                currentProps = nextProp.properties as ResolvedProperties;
+            } else if (nextProp.dataType === "array") {
+                // Keep array prop; the next segment (index) will step into its element schema
+                currentProps = undefined;
+            } else {
+                currentProps = undefined;
+            }
+        } else {
+            // Unknown key or no schema context
+            currentProp = undefined;
+            currentProps = undefined;
+            lastLabel = String(seg);
+        }
+    }
+
+    return {
+        label: lastLabel,
+        property: currentProp
+    };
+}
+
+const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
+
+/**
+ * Improved simple layout for nested changes:
+ * - Map or Array-of-Map -> section header + indented rows
+ * - Leaf or Array-of-Primitives -> single row with label and value
+ */
+export const PropertyCollectionView = ({
+                                           data,
+                                           properties,
+                                           baseKey = "",
+                                           suppressHeader = false,
+                                           size = "small"
+                                       }: {
+    data: any;
+    properties: ResolvedProperties;
+    baseKey?: string;
+    suppressHeader?: boolean;
+    size?: PreviewSize;
+}) => {
+
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+
+    // Arrays
+    if (Array.isArray(data)) {
+        const {
+            label: arrayLabel,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        const ofProp = property?.dataType === "array"
+            ? (Array.isArray(property.of) ? property.of[0] : property.of) as ResolvedProperty | undefined
+            : undefined;
+
+        const isArrayOfMaps = ofProp?.dataType === "map";
+        const isArrayOfPrimitives = property?.dataType === "array" && ofProp && ofProp.dataType !== "map";
+
+        // Array of primitives -> single row
+        if (baseKey && property && isArrayOfPrimitives) {
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {arrayLabel}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                {baseKey && arrayLabel && !suppressHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}>
+                        {arrayLabel}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {data.map((item, index) => {
+                        if (item === null || item === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+
+                        // Combined header text
+                        const itemHeader = isArrayOfMaps && ofProp?.name
+                            ? `${ofProp.name} [${index}]`
+                            : `[${index}]`;
+
+                        return (
+                            <div key={currentKey} className="py-1">
+                                <Typography variant="caption"
+                                            color={"secondary"}
+                                            component={"span"}>
+                                    {itemHeader}
+                                </Typography>
+                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
+                                    <PropertyCollectionView
+                                        data={item}
+                                        properties={properties}
+                                        baseKey={currentKey}
+                                        suppressHeader={true} // don’t repeat the inner map header
+                                        size={size}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Objects (maps or plain objects)
+    if (typeof data === "object" && data !== null) {
+        const {
+            label,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        // Non-map leaf-like object -> single row
+        if (baseKey && (!property || property.dataType !== "map" || !property.properties)) {
+            if (!property) return null;
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {label}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Map with defined properties -> show map header only if not suppressed
+        const showMapHeader =
+            baseKey &&
+            !suppressHeader &&
+            property?.dataType === "map" &&
+            (property.name || !pathEndsWithIndex(baseKey));
+
+        const headerText = property?.name || label;
+
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                {showMapHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                    >
+                        {headerText}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {Object.entries(data).map(([key, value]) => {
+                        if (value === null || value === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
+                        return (
+                            <PropertyCollectionView
+                                key={currentKey}
+                                data={value}
+                                properties={properties}
+                                baseKey={currentKey}
+                                size={size}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Primitives
+    if (baseKey) {
+        const {
+            label,
+            property
+        } = buildPropertyLabelAndGetProperty(properties, baseKey);
+        if (!property) return null;
+        return (
+            <div
+                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin}` : ""}`}>
+                <div className="col-span-4 pr-2">
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                                className="break-words">
+                        {label}
+                    </Typography>
+                </div>
+                <div className="col-span-8">
+                    <PropertyPreview propertyKey={baseKey}
+                                     value={data}
+                                     property={property}
+                                     size={size}/>
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export function buildDataFromPaths(values: object, paths: string[]): object {
+    const result = {};
+    paths.forEach(path => {
+        const value = getValueInPath(values, path);
+        if (value === undefined) return;
+
+        // lodash.set would be perfect here
+        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let current: any = result;
+        segments.forEach((segment, index) => {
+            if (index === segments.length - 1) {
+                current[segment] = value;
+            } else {
+                const nextSegment = segments[index + 1];
+                const isNextAnIndex = /^\d+$/.test(nextSegment);
+                if (!current[segment]) {
+                    if (isNextAnIndex) {
+                        current[segment] = [];
+                    } else {
+                        current[segment] = {};
+                    }
+                }
+                current = current[segment];
+            }
+        });
+    });
+    return result;
+}