@firecms/core 3.0.0-canary.286 → 3.0.0-canary.288

package/dist/types/collections.d.ts

@@ -308,12 +308,16 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     history?: boolean;
     /**
-     * If set to true, local changes to entities in this collection will be backed up
-     * in the browser's local storage. This allows users to recover unsaved changes
-     * in case of accidental navigation or browser crashes.
-     * Defaults to `true`.
-     */
-    enableLocalChangesBackup?: boolean;
+     * Should local changes be backed up in local storage, to prevent data loss on
+     * accidental navigations.
+     * - `manual_apply`: When the user navigates back to an entity with local changes,
+     *   they will be prompted to restore the changes.
+     * - `auto_apply`: When the user navigates back to an entity with local changes,
+     *   the changes will be automatically applied.
+     * - `false`: Local changes will not be backed up.
+     * Defaults to `manual_apply`.
+     */
+    localChangesBackup?: "manual_apply" | "auto_apply" | false;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/util/collections.d.ts

@@ -9,3 +9,4 @@ export declare function resolveDefaultSelectedView(defaultSelectedView: string |
  * @param permissionsBuilder
  */
 export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder<any, any>) => EntityCollection[];
+export declare function getLocalChangesBackup(collection: EntityCollection): "manual_apply" | "auto_apply";

package/dist/util/entity_cache.d.ts

@@ -4,6 +4,10 @@
  * @param data - The data to cache and persist.
  */
 export declare function saveEntityToCache(path: string, data: object): void;
+export declare function removeEntityFromMemoryCache(path: string): void;
+export declare function saveEntityToMemoryCache(path: string, data: object): void;
+export declare function getEntityFromMemoryCache(path: string): object | undefined;
+export declare function hasEntityInCache(path: string): boolean;
 /**
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
@@ -11,8 +15,7 @@ export declare function saveEntityToCache(path: string, data: object): void;
  * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
-export declare function getEntityFromCache(path: string, useLocalStorage?: boolean): object | undefined;
-export declare function hasEntityInCache(path: string): boolean;
+export declare function getEntityFromCache(path: string): object | undefined;
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.
  * @param path - The unique path/key for the entity to remove.
@@ -22,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.286",
+  "version": "3.0.0-canary.288",
   "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.286",
-    "@firecms/formex": "^3.0.0-canary.286",
-    "@firecms/ui": "^3.0.0-canary.286",
+    "@firecms/editor": "^3.0.0-canary.288",
+    "@firecms/formex": "^3.0.0-canary.288",
+    "@firecms/ui": "^3.0.0-canary.288",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "67c7145be1866d52ac71fc6281537c388d074722",
+  "gitHead": "e609cafa0c505803a4628324a77404ebdfbb62c4",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -14,7 +14,8 @@ import {
     Tooltip
 } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { hasEntityInCache } from "../../util/entity_cache";
+import { getEntityFromCache, hasEntityInCache } from "../../util/entity_cache";
+import { getLocalChangesBackup } from "../../util";
 
 /**
  *
@@ -79,8 +80,8 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
-    const enableLocalChangesBackup = collection?.enableLocalChangesBackup !== undefined ? collection?.enableLocalChangesBackup : true;
-    const hasDraft = enableLocalChangesBackup ? hasEntityInCache(fullPath + "/" + entity.id) : false;
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
 
     return (
         <div

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -694,7 +694,7 @@ export const EntityCollectionView = React.memo(
                                 className="mt-4"
                             >
                                 <AddIcon/>
-                                Create your first entity
+                                Create your first entry
                             </Button>
                         </div>
                         : <Typography variant={"label"}>No results with the applied filter/sort</Typography>

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

package/src/core/EntityEditView.tsx

@@ -3,6 +3,7 @@ import {
     Entity,
     EntityCollection,
     EntityStatus,
+    EntityValues,
     FireCMSPlugin,
     FormContext,
     PluginFormActionProps,
@@ -26,7 +27,7 @@ import {
     useLargeLayout
 } from "../hooks";
 import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
-import { getEntityFromCache } from "../util/entity_cache";
+import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
@@ -44,6 +45,13 @@ export type OnUpdateParams = {
     collection: EntityCollection<any>
 };
 
+export type BarActionsParams = {
+    values: object,
+    status: EntityStatus,
+    path: string,
+    entityId?: string;
+};
+
 export type OnTabChangeParams<M extends Record<string, any>> = {
     path: string;
     entityId?: string;
@@ -67,11 +75,11 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     copy?: boolean;
     selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values:M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
-    barActions?: React.ReactNode;
+    barActions?: (params: BarActionsParams) => React.ReactNode;
     formProps?: Partial<EntityFormProps<M>>,
 }
 
@@ -97,11 +105,9 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         useCache: false
     });
 
-    const enableLocalChangesBackup = props.collection.enableLocalChangesBackup !== undefined ? props.collection.enableLocalChangesBackup : true;
-
     const initialDirtyValues = entityId
-        ? getEntityFromCache(props.path + "/" + entityId, enableLocalChangesBackup)
-        : getEntityFromCache(props.path + "#new", enableLocalChangesBackup);
+        ? getEntityFromMemoryCache(props.path + "/" + entityId)
+        : getEntityFromMemoryCache(props.path + "#new");
 
     const authController = useAuthController();
 
@@ -390,6 +396,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
+            console.log("333 EntityEditView onEntityChange:", entity);
             setUsedEntity(entity);
             formProps?.onEntityChange?.(entity);
         }}
@@ -447,7 +454,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         {shouldShowTopBar && <div
             className={cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
-            {barActions}
+            {barActions?.({
+                path: fullIdPath ?? path,
+                entityId,
+                values: formContext?.values ?? usedEntity?.values ?? {},
+                status
+            })}
 
             <div className={"flex-grow"}/>
 

package/src/core/EntitySidePanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
-import { EntitySidePanelProps } from "../types";
+import { EntityCollection, EntitySidePanelProps } from "../types";
 import { useNavigationController, useSideEntityController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
@@ -8,6 +8,7 @@ import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
 import { useLocation, useNavigate } from "react-router-dom";
+import { saveEntityToMemoryCache } from "../util/entity_cache";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -114,11 +115,14 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     {...props}
                     fullIdPath={fullIdPath}
                     layout={"side_panel"}
-                    collection={collection}
+                    collection={collection as EntityCollection}
                     parentCollectionIds={parentCollectionIds}
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
-                    barActions={<>
+                    barActions={({
+                                     status,
+                                     values
+                                 }) => <>
                         <IconButton
                             className="self-center"
                             onClick={onClose}>
@@ -127,6 +131,8 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         {allowFullScreen && <IconButton
                             className="self-center"
                             onClick={() => {
+                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                saveEntityToMemoryCache(key, values);
                                 if (entityId)
                                     navigate(location.pathname);
                                 else