@firecms/core 3.0.0-canary.168 → 3.0.0-canary.169

package/src/core/EntityEditView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import {
     CMSAnalyticsEvent,
     Entity,
@@ -7,11 +7,13 @@ import {
     EntityCustomView,
     EntityStatus,
     EntityValues,
+    FireCMSContext,
     FireCMSPlugin,
     FormContext,
     PluginFormActionProps,
     PropertyFieldBindingProps,
     ResolvedEntityCollection,
+    SideEntityController,
     User
 } from "../types";
 import equal from "react-fast-compare"
@@ -23,7 +25,7 @@ import {
     EntityCollectionView,
     EntityView,
     ErrorBoundary,
-    getFormFieldKeys,
+    getFormFieldKeys
 } from "../components";
 import {
     canCreateEntity,
@@ -49,25 +51,29 @@ import {
     useDataSource,
     useEntityFetch,
     useFireCMSContext,
+    useLargeLayout,
     useSideEntityController,
     useSnackbarController
 } from "../hooks";
 import {
     Alert,
     Button,
+    CheckIcon,
+    Chip,
     CircularProgress,
-    CloseIcon,
     cls,
     defaultBorderMixin,
     DialogActions,
+    EditIcon,
     IconButton,
+    LoadingButton,
     NotesIcon,
     paperMixin,
     Tab,
     Tabs,
+    Tooltip,
     Typography
 } from "@firecms/ui";
-import { useSideDialogContext } from "./index";
 import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { CustomIdField } from "../form/components/CustomIdField";
@@ -75,19 +81,40 @@ import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
 import { ErrorFocus } from "../form/components/ErrorFocus";
 import { LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
+import { getEntityFromCache, removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 
+export type OnUpdateParams = {
+    entity: Entity<any>,
+    status: EntityStatus,
+    path: string
+    entityId?: string;
+    selectedTab?: string;
+    collection: EntityCollection<any>
+};
+
+export type OnTabChangeParams<M extends Record<string, any>> = {
+    path: string;
+    entityId?: string;
+    selectedTab?: string;
+    collection: EntityCollection<M>;
+};
+
 export interface EntityEditViewProps<M extends Record<string, any>> {
     path: string;
     collection: EntityCollection<M>;
     entityId?: string;
+    databaseId?: string;
     copy?: boolean;
-    selectedSubPath?: string;
+    selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesAreModified: (modified: boolean) => void;
-    onUpdate?: (params: { entity: Entity<any> }) => void;
+    onValuesModified?: (modified: boolean) => void;
+    onSaved?: (params: OnUpdateParams) => void;
     onClose?: () => void;
+    onTabChange?: (props: OnTabChangeParams<M>) => void;
+    layout?: "side_panel" | "full_screen";
+    barActions?: React.ReactNode;
 }
 
 /**
@@ -109,44 +136,57 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         path: props.path,
         entityId: entityId,
         collection: props.collection,
+        databaseId: props.databaseId,
         useCache: false
     });
 
-    if (dataLoading) {
+    const cachedValues = entityId ? getEntityFromCache(props.path + "/" + entityId) : getEntityFromCache(props.path + "#new");
+
+    if (dataLoading && !cachedValues) {
         return <CircularProgressCenter/>
     }
 
-    if (entityId && !entity) {
-        console.error(`Entity with id ${entityId} not found in collection ${props.collection.path}`);
+    if (entityId && !entity && !cachedValues) {
+        console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
 
     return <EntityEditViewInner<M> {...props}
                                    entityId={entityId}
                                    entity={entity}
-                                   dataLoading={dataLoading}/>;
+                                   cachedDirtyValues={cachedValues as Partial<M>}
+                                   dataLoading={dataLoading}
+    />;
 }
 
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId: entityIdProp,
-                                                                       selectedSubPath: selectedSubPathProp,
+                                                                       selectedTab: selectedTabProp,
                                                                        copy,
                                                                        collection,
                                                                        parentCollectionIds,
-                                                                       onValuesAreModified,
-                                                                       onUpdate,
+                                                                       onValuesModified,
+                                                                       onSaved,
                                                                        onClose,
+                                                                       onTabChange,
                                                                        entity,
-                                                                       dataLoading
+                                                                       cachedDirtyValues,
+                                                                       dataLoading,
+                                                                       layout = "side_panel",
+                                                                       barActions
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
-    dataLoading: boolean
+    cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
+    dataLoading: boolean,
 }) {
 
+    const largeLayout = useLargeLayout();
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
+    const actionsAtTheBottom = !largeLayout || layout === "side_panel";
+
     const [saving, setSaving] = useState(false);
     /**
      * These are the values that are being saved. They are debounced.
@@ -164,15 +204,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             });
     }, false, 2000);
 
-    // const largeLayout = useLargeLayout();
-    // const largeLayoutTabSelected = useRef(!largeLayout);
-    // const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
-
     const inputCollection = collection;
 
     const authController = useAuthController();
     const dataSource = useDataSource(collection);
-    const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const snackbarController = useSnackbarController();
     const customizationController = useCustomizationController();
@@ -209,30 +244,26 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const [entityId, setEntityId] = React.useState<string | undefined>(initialEntityId);
 
-    // const doOnValuesChanges = (values?: EntityValues<M>) => {
-    //     const initialValues = formex.initialValues;
-    //     setInternalValues(values);
-    //     if (onValuesChanged)
-    //         onValuesChanged(values);
-    //     if (autoSave && values && !equal(values, initialValues)) {
-    //         save(values);
-    //     }
-    // };
-
     const [entityIdError, setEntityIdError] = React.useState<boolean>(false);
     const [savingError, setSavingError] = React.useState<Error | undefined>();
 
     const [customIdLoading, setCustomIdLoading] = React.useState<boolean>(false);
 
-    const defaultSelectedView = selectedSubPathProp ?? resolveDefaultSelectedView(
+    const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
         collection ? collection.defaultSelectedView : undefined,
         {
             status,
             entityId
         }
-    );
+    ), []);
+
+    const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
 
-    const [selectedTab, setSelectedTab] = useState<string>(defaultSelectedView ?? MAIN_TAB_VALUE);
+    useEffect(() => {
+        if ((selectedTabProp ?? MAIN_TAB_VALUE) !== selectedTab) {
+            setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
+        }
+    }, [selectedTabProp]);
 
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
 
@@ -247,7 +278,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
     const [readOnly, setReadOnly] = useState<boolean | undefined>(undefined);
 
-    const baseDataSourceValuesRef = useRef<Partial<EntityValues<M>>>(getDataSourceEntityValues(initialResolvedCollection, status, usedEntity));
+    const baseDataSourceValuesRef = useRef<Partial<EntityValues<M>> | null>(cachedDirtyValues ?? getDataSourceEntityValues(initialResolvedCollection, status, usedEntity));
 
     useEffect(() => {
         if (entity)
@@ -282,8 +313,20 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         console.error(e);
     }, [snackbarController]);
 
+    function clearDirtyCache() {
+        if (status === "new" || status === "copy") {
+            removeEntityFromCache(path + "#new");
+        } else {
+            removeEntityFromCache(path + "/" + entityId);
+        }
+    }
+
     const onSaveSuccess = (updatedEntity: Entity<M>, closeAfterSave: boolean) => {
 
+        clearDirtyCache();
+
+        onValuesModified?.(false);
+
         setSaving(false);
         if (!autoSave)
             snackbarController.open({
@@ -293,26 +336,23 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
         setUsedEntity(updatedEntity);
         setStatus("existing");
+        setEntityId(updatedEntity.id);
 
-        onValuesAreModified(false);
-
-        if (onUpdate)
-            onUpdate({ entity: updatedEntity });
-
-        if (closeAfterSave) {
-            sideDialogContext.setBlocked(false);
-            sideDialogContext.close(true);
-            onClose?.();
-        } else if (status !== "existing") {
-            sideEntityController.replace({
+        if (onSaved) {
+            onSaved({
+                entity: updatedEntity,
+                status,
                 path,
                 entityId: updatedEntity.id,
-                selectedSubPath: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
-                updateUrl: true,
-                collection,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+                collection
             });
         }
 
+        if (closeAfterSave) {
+            onClose?.();
+        }
+
     };
 
     const onSaveFailure = useCallback((e: Error) => {
@@ -425,6 +465,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const formex: FormexController<M> = useCreateFormex<M>({
         initialValues: baseDataSourceValuesRef.current as M,
+        initialDirty: Boolean(cachedDirtyValues),
         onSubmit,
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
@@ -499,8 +540,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             (customView, colIndex) => {
                 if (!customView)
                     return null;
-                if (selectedTab !== customView.key)
-                    return null;
                 const Builder = customView.Builder;
                 if (!Builder) {
                     console.error("customView.Builder is not defined");
@@ -508,7 +547,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 }
                 return <div
                     className={cls(defaultBorderMixin,
-                        "relative flex-grow w-full h-full overflow-auto ")}
+                        "relative flex-grow w-full h-full overflow-auto",
+                        {
+                            "hidden": selectedTab !== customView.key
+                        })}
                     key={`custom_view_${customView.key}`}
                     role="tabpanel">
                     <ErrorBoundary>
@@ -526,21 +568,20 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const globalLoading = (dataLoading && !usedEntity) ||
         ((!usedEntity || readOnly === undefined) && (status === "existing" || status === "copy"));
 
-    const loading = globalLoading || saving;
-
     const subCollectionsViews = subcollections && subcollections.map(
         (subcollection, colIndex) => {
             const subcollectionId = subcollection.id ?? subcollection.path;
             const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
-            if (selectedTab !== subcollectionId)
-                return null;
             return (
                 <div
-                    className={"relative flex-grow h-full overflow-auto w-full"}
+                    className={cls("relative flex-grow h-full overflow-auto w-full",
+                        {
+                            "hidden": selectedTab !== subcollectionId
+                        })}
                     key={`subcol_${subcollectionId}`}
                     role="tabpanel">
 
-                    {loading && <CircularProgressCenter/>}
+                    {globalLoading || saving && <CircularProgressCenter/>}
 
                     {!globalLoading &&
                         (usedEntity && fullPath
@@ -548,7 +589,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                 fullPath={fullPath}
                                 parentCollectionIds={[...parentCollectionIds, collection.id]}
                                 isSubCollection={true}
-                                {...subcollection}/>
+                                updateUrl={false}
+                                {...subcollection}
+                                openEntityMode={layout}/>
                             : <div
                                 className="flex items-center justify-center w-full h-full p-3">
                                 <Typography variant={"label"}>
@@ -564,18 +607,17 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     ).filter(Boolean);
 
     const onDiscard = useCallback(() => {
-        onValuesAreModified(false);
+        onValuesModified?.(false);
     }, []);
 
     const onSideTabClick = (value: string) => {
         setSelectedTab(value);
         if (status === "existing") {
-            sideEntityController.replace({
+            onTabChange?.({
                 path,
                 entityId,
-                selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
-                updateUrl: true,
-                collection,
+                selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
+                collection
             });
         }
     };
@@ -596,30 +638,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             : undefined);
     }, []);
 
-    // useEffect(() => {
-    //     baseDataSourceValuesRef.current = getDataSourceEntityValues(initialResolvedCollection, status, entity);
-    //     const initialValues = formex.initialValues;
-    //     if (!formex.isSubmitting && initialValues && status === "existing") {
-    //         setUnderlyingChanges(
-    //             Object.entries(resolvedCollection.properties)
-    //                 .map(([key, property]) => {
-    //                     if (isHidden(property)) {
-    //                         return {};
-    //                     }
-    //                     const initialValue = initialValues[key];
-    //                     const latestValue = baseDataSourceValuesRef.current[key];
-    //                     if (!equal(initialValue, latestValue)) {
-    //                         return { [key]: latestValue };
-    //                     }
-    //                     return {};
-    //                 })
-    //                 .reduce((a, b) => ({ ...a, ...b }), {}) as Partial<EntityValues<M>>
-    //         );
-    //     } else {
-    //         setUnderlyingChanges({});
-    //     }
-    // }, [entity, initialResolvedCollection, status]);
-
     const pluginActions: React.ReactNode[] = [];
 
     const plugins = customizationController.plugins;
@@ -632,7 +650,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             collection: inputCollection,
             context,
             currentEntityId: entityId,
-            formContext
+            formContext,
+            layout
         };
         pluginActions.push(...plugins.map((plugin, i) => (
             plugin.form?.Actions
@@ -707,16 +726,23 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         return actions;
     }, [authController, inputCollection, path]);
 
+    const deferredValues = useDeferredValue(formex.values);
     const modified = formex.dirty;
+
+    useEffect(() => {
+        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+        if (modified) {
+            saveEntityToCache(key, deferredValues);
+        }
+    }, [deferredValues, modified]);
+
     useEffect(() => {
         if (!autoSave) {
-            onValuesAreModified(modified);
-        } else {
-            if (formex.values && !equal(formex.values, lastSavedValues.current)) {
-                save(formex.values);
-            }
+            onValuesModified?.(modified);
         }
-    }, [modified, formex.values]);
+    }, [modified]);
+
+    useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
     useEffect(() => {
         if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
@@ -820,148 +846,97 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     });
     const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
 
-    const dialogActions = <DialogActions position={"absolute"}>
-
-        {savingError &&
-            <div className="text-right">
-                <Typography color={"error"}>
-                    {savingError.message}
-                </Typography>
-            </div>}
-
-        {entity && formActions.length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
-            {formActions.map(action => (
-                <IconButton
-                    key={action.name}
-                    color="primary"
-                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                        event.stopPropagation();
-                        if (entity)
-                            action.onClick({
-                                entity,
-                                fullPath: resolvedCollection.path,
-                                collection: resolvedCollection,
-                                context,
-                                sideEntityController,
-                                formContext
-                            });
-                    }}>
-                    {action.icon}
-                </IconButton>
-            ))}
-        </div>}
-
-        {formex.isSubmitting && <CircularProgress size={"small"}/>}
-
-        <Button
-            variant="text"
-            disabled={disabled || formex.isSubmitting}
-            type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
-        </Button>
-
-        <Button
-            variant="text"
-            color="primary"
-            type="submit"
-            disabled={disabled || formex.isSubmitting}
-            onClick={() => {
-                closeAfterSaveRef.current = false;
-            }}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
-        </Button>
-
-        <Button
-            variant="filled"
-            color="primary"
-            type="submit"
-            disabled={disabled || formex.isSubmitting}
-            onClick={() => {
-                closeAfterSaveRef.current = true;
-            }}>
-            {status === "existing" && "Save and close"}
-            {status === "copy" && "Create copy and close"}
-            {status === "new" && "Create and close"}
-        </Button>
-
-    </DialogActions>;
-
-    function buildForm() {
-
-        let form = <>
-
-            {pluginActions.length > 0 && <div
-                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-surface-accent-200 dark:bg-opacity-60 dark:bg-surface-accent-800 backdrop-blur-md")}>
-                {pluginActions}
-            </div>}
-
-            <div className="pt-12 pb-16 pl-4 sm:px-8 md:px-10">
-                <div
-                    className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
-
-                    <Typography
-                        className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                        variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
-                    </Typography>
-                    <Alert color={"base"} className={"w-full"} size={"small"}>
-                        <code className={"text-xs select-all"}>{path}/{entityId}</code>
-                    </Alert>
-                </div>
+    const dialogActions = actionsAtTheBottom
+        ? buildBottomActions({
+            savingError: savingError,
+            entity: entity,
+            formActions: formActions,
+            resolvedCollection: resolvedCollection,
+            context: context,
+            sideEntityController: sideEntityController,
+            isSubmitting: formex.isSubmitting,
+            disabled: disabled,
+            status: status,
+            setPendingClose: (value: boolean) => {
+                closeAfterSaveRef.current = value;
+            },
+            pluginActions,
+            layout
+        })
+        : buildSideActions({
+            savingError: savingError,
+            entity: entity,
+            formActions: formActions,
+            resolvedCollection: resolvedCollection,
+            context: context,
+            sideEntityController: sideEntityController,
+            isSubmitting: formex.isSubmitting,
+            disabled: disabled,
+            status: status,
+            pluginActions,
+            layout
+        });
 
-                {!collection.hideIdFromForm &&
-                    <CustomIdField customId={inputCollection.customId}
-                                   entityId={entityId}
-                                   status={status}
-                                   onChange={setEntityId}
-                                   error={entityIdError}
-                                   loading={customIdLoading}
-                                   entity={entity}/>}
+    const entityView = (readOnly === undefined)
+        ? <></>
+        : (!readOnly
+            ? (
+                <ErrorBoundary>
+                    <div className="flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
+
+                        {formex.dirty
+                            ? <Tooltip title={"Unsaved changes"}
+                                       className={"self-end sticky top-4 z-10"}>
+                                <Chip size={"small"} colorScheme={"orangeDarker"}>
+                                    <EditIcon size={"smallest"}/>
+                                </Chip>
+                            </Tooltip>
+                            : <Tooltip title={"In sync with the database"}
+                                       className={"self-end sticky top-4 z-10"}>
+                                <Chip size={"small"}>
+                                    <CheckIcon size={"smallest"}/>
+                                </Chip>
+                            </Tooltip>}
+
+                        <div
+                            className={"w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8"}>
+
+                            <Typography
+                                className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
+                                variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
+                            </Typography>
+                            <Alert color={"base"} className={"w-full"} size={"small"}>
+                                <code
+                                    className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>{path}/{entityId}</code>
+                            </Alert>
+                        </div>
+
+                        {!collection.hideIdFromForm &&
+                            <CustomIdField customId={inputCollection.customId}
+                                           entityId={entityId}
+                                           status={status}
+                                           onChange={setEntityId}
+                                           error={entityIdError}
+                                           loading={customIdLoading}
+                                           entity={entity}/>}
+
+                        {entityId && formContext && <>
+                            <div className="mt-12 flex flex-col gap-8"
+                                 ref={formRef}>
+
+                                {formFields}
+
+                                <ErrorFocus containerRef={formRef}/>
 
-                {entityId && formContext && <>
-                    <div className="mt-12 flex flex-col gap-8"
-                         ref={formRef}>
+                            </div>
 
-                        {formFields}
+                            {actionsAtTheBottom && <div className="h-16"/>}
 
-                        <ErrorFocus containerRef={formRef}/>
+                        </>}
 
                     </div>
-
-                    <div className="h-14"/>
-
-                </>}
-
-            </div>
-        </>;
-
-        if (plugins) {
-            plugins.forEach((plugin: FireCMSPlugin) => {
-                if (plugin.form?.provider) {
-                    form = (
-                        <plugin.form.provider.Component
-                            status={status}
-                            path={path}
-                            collection={collection}
-                            onDiscard={onDiscard}
-                            entity={usedEntity}
-                            context={context}
-                            formContext={formContext}
-                            {...plugin.form.provider.props}>
-                            {form}
-                        </plugin.form.provider.Component>
-                    );
-                }
-            });
-        }
-        return <ErrorBoundary>{form}</ErrorBoundary>;
-    }
-
-    const entityView = (readOnly === undefined)
-        ? <></>
-        : (!readOnly
-            ? buildForm()
+                </ErrorBoundary>
+            )
             : (
                 <>
                     <Typography
@@ -980,7 +955,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const subcollectionTabs = subcollections && subcollections.map(
         (subcollection) =>
             <Tab
-                className="text-sm min-w-[140px]"
+                className="text-sm min-w-[120px]"
                 value={subcollection.id}
                 key={`entity_detail_collection_tab_${subcollection.name}`}>
                 {subcollection.name}
@@ -991,7 +966,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         (view) =>
 
             <Tab
-                className="text-sm min-w-[140px]"
+                className="text-sm min-w-[120px]"
                 value={view.key}
                 key={`entity_detail_collection_tab_${view.name}`}>
                 {view.name}
@@ -1003,93 +978,115 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             onIdChange(entityId);
     }, [entityId, onIdChange]);
 
-    return (
-        <Formex value={formex}>
+    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
-            <div className="flex flex-col h-full w-full">
+    let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
-                <div
-                    className={cls(defaultBorderMixin, "no-scrollbar h-16 border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-surface-50 dark:bg-surface-950")}>
-
-                    <div
-                        className="pb-1 self-center">
-                        <IconButton
-                            onClick={() => {
-                                onClose?.();
-                                return sideDialogContext.close(false);
-                            }}>
-                            <CloseIcon size={"small"}/>
-                        </IconButton>
-                    </div>
+        {shouldShowTopBar && <div
+            className={cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+
+            {barActions}
 
-                    <div className={"flex-grow"}/>
+            <div className={"flex-grow"}/>
 
-                    {globalLoading && <div
-                        className="self-center">
-                        <CircularProgress size={"small"}/>
-                    </div>}
+            {globalLoading && <div
+                className="self-center">
+                <CircularProgress size={"small"}/>
+            </div>}
 
-                    <Tabs
-                        value={selectedTab}
-                        onValueChange={(value) => {
-                            onSideTabClick(value);
-                        }}
-                        innerClassName="pl-4 pr-4 pt-0">
+            {hasAdditionalViews && <Tabs
+                value={selectedTab}
+                onValueChange={(value) => {
+                    onSideTabClick(value);
+                }}>
 
-                        <Tab
-                            disabled={!hasAdditionalViews}
-                            value={MAIN_TAB_VALUE}
-                            className={`${
-                                !hasAdditionalViews ? "hidden" : ""
-                            } text-sm min-w-[140px]`}
-                        >{collection.singularName ?? collection.name}</Tab>
+                <Tab
+                    disabled={!hasAdditionalViews}
+                    value={MAIN_TAB_VALUE}
+                    className={"text-sm min-w-[120px]"}
+                >{collection.singularName ?? collection.name}</Tab>
 
-                        {customViewTabs}
+                {customViewTabs}
 
-                        {subcollectionTabs}
-                    </Tabs>
+                {subcollectionTabs}
+            </Tabs>}
 
-                </div>
+        </div>}
 
-                <form
-                    onSubmit={formex.handleSubmit}
-                    onReset={() => {
-                        formex.resetForm();
-                        return onDiscard && onDiscard();
-                    }}
-                    noValidate
-                    className={"flex-grow h-full flex overflow-auto flex-col w-full"}>
-
-                    <div
-                        role="tabpanel"
-                        hidden={!mainViewVisible}
-                        id={`form_${path}`}
-                        className={"relative w-full"}>
-
-                        {globalLoading
-                            ? <CircularProgressCenter/>
-                            : entityView}
+        <form
+            onSubmit={formex.handleSubmit}
+            onReset={() => {
 
-                    </div>
+                clearDirtyCache();
 
-                    {customViewsView}
+                formex.resetForm({
+                    values: getDataSourceEntityValues(initialResolvedCollection, status, entity) as M,
+                });
 
-                    {subCollectionsViews}
+                return onDiscard();
+            }}
+            noValidate
+            className={"flex-1 flex flex-row w-full overflow-y-auto justify-center"}>
 
-                    {shouldShowEntityActions && dialogActions}
+            <div
+                role="tabpanel"
+                hidden={!mainViewVisible}
+                id={`form_${path}`}
+                className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl w-full h-fit", {
+                    "hidden": !mainViewVisible
+                })}>
 
-                </form>
+                {globalLoading
+                    ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"><CircularProgressCenter/></div>
+                    : entityView}
 
             </div>
+
+            {mainViewVisible && shouldShowEntityActions && !actionsAtTheBottom && dialogActions}
+
+            {customViewsView}
+
+            {subCollectionsViews}
+
+            {shouldShowEntityActions && actionsAtTheBottom && dialogActions}
+
+        </form>
+
+    </div>;
+
+    if (plugins) {
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.form?.provider) {
+                result = (
+                    <plugin.form.provider.Component
+                        status={status}
+                        path={path}
+                        collection={collection}
+                        onDiscard={onDiscard}
+                        entity={usedEntity}
+                        context={context}
+                        formContext={formContext}
+                        {...plugin.form.provider.props}>
+                        {result}
+                    </plugin.form.provider.Component>
+                );
+            }
+        });
+    }
+
+    return (
+        <Formex value={formex}>
+
+            {result}
         </Formex>
     );
 }
 
-function getDataSourceEntityValues<M extends object>(initialResolvedCollection: ResolvedEntityCollection,
+function getDataSourceEntityValues<M extends object>(collection: ResolvedEntityCollection,
                                                      status: "new" | "existing" | "copy",
                                                      entity: Entity<M> | undefined): Partial<EntityValues<M>> {
 
-    const properties = initialResolvedCollection.properties;
+    const properties = collection.properties;
     if ((status === "existing" || status === "copy") && entity) {
         return entity.values ?? getDefaultValuesFor(properties);
     } else if (status === "new") {
@@ -1127,3 +1124,167 @@ export function yupToFormErrors(yupError: ValidationError): Record<string, any>
     }
     return errors;
 }
+
+type ActionsViewProps<M extends object> = {
+    savingError: Error | undefined,
+    entity: Entity<M> | undefined,
+    formActions: EntityAction[],
+    resolvedCollection: ResolvedEntityCollection,
+    context: FireCMSContext,
+    sideEntityController: SideEntityController,
+    isSubmitting: boolean,
+    disabled: boolean,
+    status: "new" | "existing" | "copy",
+    setPendingClose?: (value: boolean) => void,
+    pluginActions?: React.ReactNode[],
+    layout: "side_panel" | "full_screen";
+};
+
+function buildBottomActions<M extends object>({
+                                                  savingError,
+                                                  entity,
+                                                  formActions,
+                                                  resolvedCollection,
+                                                  context,
+                                                  sideEntityController,
+                                                  isSubmitting,
+                                                  disabled,
+                                                  status,
+                                                  setPendingClose,
+                                                  pluginActions,
+                                                  layout
+                                              }: ActionsViewProps<M>) {
+
+    return <DialogActions position={"absolute"}>
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>
+                    {savingError.message}
+                </Typography>
+            </div>}
+
+        {entity && formActions.length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
+            {formActions.map(action => (
+                <IconButton
+                    key={action.name}
+                    color="primary"
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                        event.stopPropagation();
+                        if (entity)
+                            action.onClick({
+                                entity,
+                                fullPath: resolvedCollection.path,
+                                collection: resolvedCollection,
+                                context,
+                                sideEntityController,
+                                openEntityMode: layout
+                            });
+                    }}>
+                    {action.icon}
+                </IconButton>
+            ))}
+        </div>}
+
+        {pluginActions}
+
+        <Button
+            variant="text"
+            disabled={disabled || isSubmitting}
+            type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+
+        <Button
+            variant="text"
+            color="primary"
+            type="submit"
+            disabled={disabled || isSubmitting}
+            onClick={() => {
+                setPendingClose?.(false);
+            }}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </Button>
+
+        <LoadingButton
+            variant="filled"
+            color="primary"
+            type="submit"
+            loading={isSubmitting}
+            disabled={disabled}
+            onClick={() => {
+                setPendingClose?.(true);
+            }}>
+            {status === "existing" && "Save and close"}
+            {status === "copy" && "Create copy and close"}
+            {status === "new" && "Create and close"}
+        </LoadingButton>
+
+    </DialogActions>;
+}
+
+function buildSideActions<M extends object>({
+                                                savingError,
+                                                entity,
+                                                formActions,
+                                                resolvedCollection,
+                                                context,
+                                                sideEntityController,
+                                                isSubmitting,
+                                                disabled,
+                                                status,
+                                                setPendingClose,
+                                                pluginActions
+                                            }: ActionsViewProps<M>) {
+
+    return <div
+        className={cls("overflow-auto h-full flex flex-col gap-2 w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
+
+        <LoadingButton
+            fullWidth={true}
+            variant="filled"
+            color="primary"
+            type="submit"
+            size={"large"}
+            disabled={disabled || isSubmitting}
+            onClick={() => {
+                setPendingClose?.(false);
+            }}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </LoadingButton>
+
+        <Button
+            fullWidth={true}
+            variant="text"
+            disabled={disabled || isSubmitting}
+            type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+
+        {pluginActions}
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>
+                    {savingError.message}
+                </Typography>
+            </div>}
+
+    </div>;
+}
+
+function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<any>, lastSavedValues: any, save: (values: EntityValues<any>) => Promise<void>) {
+    if (!autoSave) return;
+    useEffect(() => {
+        if (autoSave) {
+            if (formex.values && !equal(formex.values, lastSavedValues.current)) {
+                save(formex.values);
+            }
+        }
+    }, [formex.values]);
+}
+