@firecms/core 3.0.0-canary.19 → 3.0.0-canary.191

package/src/form/EntityForm.tsx

@@ -1,9 +1,7 @@
-import React, { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import {
     CMSAnalyticsEvent,
     Entity,
-    EntityAction,
     EntityCollection,
     EntityStatus,
     EntityValues,
@@ -12,233 +10,143 @@ import {
     PropertyFieldBindingProps,
     ResolvedEntityCollection
 } from "../types";
-import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
-import { PropertyFieldBinding } from "./PropertyFieldBinding";
-import { CustomFieldValidator, getYupEntitySchema } from "./validation";
-import equal from "react-fast-compare"
+import equal from "react-fast-compare";
+
+import { ErrorBoundary, getFormFieldKeys } from "../components";
 import {
-    canCreateEntity,
-    canDeleteEntity,
     getDefaultValuesFor,
     getEntityTitlePropertyKey,
     getValueInPath,
     isHidden,
     isReadOnly,
-    resolveCollection
+    resolveCollection,
+    useDebouncedCallback
 } from "../util";
+
 import {
+    saveEntityWithCallbacks,
     useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext,
-    useSideEntityController
+    useFireCMSContext, useSideDialogsController,
+    useSideEntityController,
+    useSnackbarController
 } from "../hooks";
-import { ErrorFocus } from "./components/ErrorFocus";
-import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
-import { ErrorBoundary } from "../components";
-import {
-    copyEntityAction,
-    deleteEntityAction
-} from "../components/EntityCollectionTable/internal/default_entity_actions";
+import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
+import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
+import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
-import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
-
-/**
- * @group Components
- */
-export interface EntityFormProps<M extends Record<string, any>> {
-
-    /**
-     * New or existing status
-     */
-    status: EntityStatus;
+import { removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
+import { CustomIdField } from "../form/components/CustomIdField";
+import { ErrorFocus } from "../form/components/ErrorFocus";
+import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
+import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
+import { useSideDialogContext } from "../core";
+
+export type OnUpdateParams = {
+    entity: Entity<any>,
+    status: EntityStatus,
+    path: string,
+    entityId?: string;
+    selectedTab?: string;
+    collection: EntityCollection<any>
+};
 
-    /**
-     * Path of the collection this entity is located
-     */
+type EntityFormProps<M extends Record<string, any>> = {
     path: string;
-
-    /**
-     * The collection is used to build the fields of the form
-     */
-    collection: EntityCollection<M>
-
-    /**
-     * The updated entity is passed from the parent component when the underlying data
-     * has changed in the datasource
-     */
+    collection: EntityCollection<M>;
+    entityId?: string;
     entity?: Entity<M>;
-
-    /**
-     * The callback function called when Save is clicked and validation is correct
-     */
-    onEntitySaveRequested: (
-        props: EntityFormSaveParams<M>
-    ) => Promise<void>;
-
-    /**
-     * The callback function called when discard is clicked
-     */
-    onDiscard?: () => void;
-
-    /**
-     * The callback function when the form is dirty, so the values are different
-     * from the original ones
-     */
-    onModified?: (dirty: boolean) => void;
-
-    /**
-     * The callback function when the form original values have been modified
-     */
-    onValuesChanged?: (values?: EntityValues<M>) => void;
-
-    /**
-     *
-     * @param id
-     */
+    databaseId?: string;
     onIdChange?: (id: string) => void;
-
-    currentEntityId?: string;
-
-    onFormContextChange?: (formContext: FormContext<M>) => void;
-
-    hideId?: boolean;
-
-    autoSave?: boolean;
-
-    onIdUpdateError?: (error: any) => void;
-
-}
-
-export type EntityFormSaveParams<M extends Record<string, any>> = {
-    collection: ResolvedEntityCollection<M>,
-    path: string,
-    entityId: string | undefined,
-    values: EntityValues<M>,
-    previousValues?: EntityValues<M>,
-    closeAfterSave: boolean,
-    autoSave: boolean
+    onValuesModified?: (modified: boolean) => void;
+    onSaved?: (params: OnUpdateParams) => void;
+    cachedDirtyValues?: Partial<M>; // dirty cached entity in memory
+    onFormContextReady?: (formContext: FormContext) => void;
+    forceActionsAtTheBottom?: boolean;
+    className?: string;
+    initialStatus: EntityStatus;
+    onStatusChange?: (status: EntityStatus) => void;
+    onEntityChange?: (entity: Entity<M>) => void;
+    formex?: FormexController<M>;
+    openEntityMode?: "side_panel" | "full_screen";
+    EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 };
 
-/**
- * This is the form used internally by the CMS
- * @param status
- * @param path
- * @param collection
- * @param entity
- * @param onEntitySave
- * @param onDiscard
- * @param onModified
- * @param onValuesChanged
- * @constructor
- * @group Components
- */
-export const EntityForm = React.memo<EntityFormProps<any>>(EntityFormInternal,
-    (a: EntityFormProps<any>, b: EntityFormProps<any>) => {
-        return a.status === b.status &&
-            a.path === b.path &&
-            equal(a.entity?.values, b.entity?.values);
-    }) as typeof EntityFormInternal;
-
-function getDataSourceEntityValues<M extends object>(initialResolvedCollection: ResolvedEntityCollection,
-                                                     status: "new" | "existing" | "copy",
-                                                     entity: Entity<M> | undefined): Partial<EntityValues<M>> {
-    const properties = initialResolvedCollection.properties;
-    if ((status === "existing" || status === "copy") && entity) {
-        return entity.values ?? getDefaultValuesFor(properties);
-    } else if (status === "new") {
-        return getDefaultValuesFor(properties);
-    } else {
-        console.error({
-            status,
-            entity
-        });
-        throw new Error("Form has not been initialised with the correct parameters");
+export function EntityForm<M extends Record<string, any>>({
+                                                              path,
+                                                              entityId: entityIdProp,
+                                                              collection,
+                                                              onValuesModified,
+                                                              onIdChange,
+                                                              onSaved,
+                                                              entity,
+                                                              cachedDirtyValues,
+                                                              onFormContextReady,
+                                                              forceActionsAtTheBottom,
+                                                              initialStatus,
+                                                              className,
+                                                              onStatusChange,
+                                                              onEntityChange,
+                                                              openEntityMode = "full_screen",
+                                                              formex: formexProp,
+                                                              EntityFormActionsComponent = EntityFormActions
+                                                          }: EntityFormProps<M>) {
+
+    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`);
     }
-}
 
-function EntityFormInternal<M extends Record<string, any>>({
-                                                               status,
-                                                               path,
-                                                               collection: inputCollection,
-                                                               entity,
-                                                               onEntitySaveRequested,
-                                                               onDiscard,
-                                                               onModified,
-                                                               onValuesChanged,
-                                                               onIdChange,
-                                                               onFormContextChange,
-                                                               hideId,
-                                                               autoSave,
-                                                               onIdUpdateError,
-                                                           }: EntityFormProps<M>) {
+    const [status, setStatus] = useState<EntityStatus>(initialStatus);
+    const [saving, setSaving] = useState(false);
 
-    const analyticsController = useAnalyticsController();
+    const updateStatus = (status: EntityStatus) => {
+        setStatus(status);
+        onStatusChange?.(status);
+    };
 
-    const customizationController = useCustomizationController();
+    const [valuesToBeSaved, setValuesToBeSaved] = useState<EntityValues<M> | undefined>(undefined);
+    useDebouncedCallback(valuesToBeSaved, () => {
+        if (valuesToBeSaved)
+            saveEntity({
+                entityId: entityIdProp,
+                collection,
+                path,
+                values: valuesToBeSaved,
+            });
+    }, false, 2000);
 
+    const dataSource = useDataSource(collection);
+    const snackbarController = useSnackbarController();
+    const customizationController = useCustomizationController();
     const context = useFireCMSContext();
-    const dataSource = useDataSource(inputCollection);
-    const plugins = customizationController.plugins;
+    const analyticsController = useAnalyticsController();
 
-    const initialResolvedCollection = useMemo(() => resolveCollection({
-        collection: inputCollection,
-        path,
-        values: entity?.values,
-        fields: customizationController.propertyConfigs
-    }), [entity?.values, path]);
+    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
+
+    const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
     const mustSetCustomId: boolean = (status === "new" || status === "copy") &&
-        (Boolean(initialResolvedCollection.customId) && initialResolvedCollection.customId !== "optional");
+        (Boolean(collection.customId) && collection.customId !== "optional");
 
-    const initialEntityId = useMemo(() => {
+    const initialEntityId: string | undefined = useMemo((): string | undefined => {
         if (status === "new" || status === "copy") {
             if (mustSetCustomId) {
                 return undefined;
             } else {
-                return dataSource.generateEntityId(path);
+                return dataSource.generateEntityId(path, collection);
             }
         } else {
-            return entity?.id;
+            return entityIdProp;
         }
-    }, []);
-
-    const closeAfterSaveRef = useRef(false);
-
-    const baseDataSourceValuesRef = useRef<Partial<EntityValues<M>>>(getDataSourceEntityValues(initialResolvedCollection, status, entity));
-
-    const [entityId, setEntityId] = React.useState<string | undefined>(initialEntityId);
-    const [entityIdError, setEntityIdError] = React.useState<boolean>(false);
-    const [savingError, setSavingError] = React.useState<Error | undefined>();
+    }, [entityIdProp, status]);
 
-    const [customIdLoading, setCustomIdLoading] = React.useState<boolean>(false);
+    const [entityId, setEntityId] = useState<string | undefined>(initialEntityId);
+    const [entityIdError, setEntityIdError] = useState<boolean>(false);
+    const [savingError, setSavingError] = useState<Error | undefined>();
 
-    // const initialValuesRef = useRef<EntityValues<M>>(entity?.values ?? baseDataSourceValues as EntityValues<M>);
-    const [internalValues, setInternalValues] = useState<EntityValues<M> | undefined>(entity?.values ?? baseDataSourceValuesRef.current as EntityValues<M>);
-
-    const save = (values: EntityValues<M>): Promise<void> => {
-        return onEntitySaveRequested({
-            collection: resolvedCollection,
-            path,
-            entityId,
-            values,
-            previousValues: entity?.values,
-            closeAfterSave: closeAfterSaveRef.current,
-            autoSave: autoSave ?? false
-        }).then(_ => {
-            const eventName: CMSAnalyticsEvent = status === "new"
-                ? "new_entity_saved"
-                : (status === "copy" ? "entity_copied" : (status === "existing" ? "entity_edited" : "unmapped_event"));
-            analyticsController.onAnalyticsEvent?.(eventName, { path });
-        }).catch(e => {
-            console.error(e);
-            setSavingError(e);
-        }).finally(() => {
-            closeAfterSaveRef.current = false;
-        });
-    };
+    const autoSave = collection.formAutoSave && !collection.customId;
 
     const onSubmit = (values: EntityValues<M>, formexController: FormexController<EntityValues<M>>) => {
 
@@ -255,8 +163,8 @@ function EntityFormInternal<M extends Record<string, any>>({
         if (status === "existing") {
             if (!entity?.id) throw Error("Form misconfiguration when saving, no id for existing entity");
         } else if (status === "new" || status === "copy") {
-            if (inputCollection.customId) {
-                if (inputCollection.customId !== "optional" && !entityId) {
+            if (collection.customId) {
+                if (collection.customId !== "optional" && !entityId) {
                     throw Error("Form misconfiguration when saving, entityId should be set");
                 }
             }
@@ -275,112 +183,272 @@ function EntityFormInternal<M extends Record<string, any>>({
             .finally(() => {
                 formexController.setSubmitting(false);
             });
-
     };
 
-    const formex: FormexController<M> = useCreateFormex<M>({
-        initialValues: baseDataSourceValuesRef.current as M,
+    const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
+        initialValues: (cachedDirtyValues ?? getInitialEntityValues(collection, path, status, entity)) as M,
+        initialDirty: Boolean(cachedDirtyValues),
         onSubmit,
+        onReset: () => {
+            clearDirtyCache();
+            onValuesModified?.(false);
+        },
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
                 .then(() => {
                     return {};
                 })
-                .catch((e) => {
-
-                    const errors: Record<string, string> = {};
-                    e.inner.forEach((error: any) => {
-                        errors[error.path] = error.message;
-                    });
+                .catch((e: any) => {
                     return yupToFormErrors(e);
                 });
         }
     });
 
-    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>>
-            );
+    const resolvedCollection = useMemo(() => resolveCollection<M>({
+        collection,
+        path,
+        entityId,
+        values: formex.values,
+        previousValues: formex.initialValues,
+        propertyConfigs: customizationController.propertyConfigs
+    }), [collection, path, entityId, formex.values, formex.initialValues, customizationController.propertyConfigs]);
+
+    const onPreSaveHookError = useCallback((e: Error) => {
+        setSaving(false);
+        snackbarController.open({
+            type: "error",
+            message: "Error before saving: " + e?.message
+        });
+        console.error(e);
+    }, [snackbarController]);
+
+    const onSaveSuccessHookError = useCallback((e: Error) => {
+        setSaving(false);
+        snackbarController.open({
+            type: "error",
+            message: "Error after saving (entity is saved): " + e?.message
+        });
+        console.error(e);
+    }, [snackbarController]);
+
+    function clearDirtyCache() {
+        if (status === "new" || status === "copy") {
+            removeEntityFromCache(path + "#new");
         } else {
-            setUnderlyingChanges({});
+            removeEntityFromCache(path + "/" + entityId);
         }
-    }, [entity, initialResolvedCollection, status]);
-
-    const doOnValuesChanges = (values?: EntityValues<M>) => {
-        const initialValues = formex.initialValues;
-        setInternalValues(values);
-        if (onValuesChanged)
-            onValuesChanged(values);
-        if (autoSave && values && !equal(values, initialValues)) {
-            save(values);
+    }
+
+    const onSaveSuccess = (updatedEntity: Entity<M>) => {
+
+        clearDirtyCache();
+        onValuesModified?.(false);
+        setSaving(false);
+        if (!autoSave)
+            snackbarController.open({
+                type: "success",
+                message: `${collection.singularName ?? collection.name}: Saved correctly`
+            });
+        onEntityChange?.(updatedEntity);
+        updateStatus("existing");
+        setEntityId(updatedEntity.id);
+
+        if (onSaved) {
+            onSaved({
+                entity: updatedEntity,
+                status,
+                path,
+                entityId: updatedEntity.id,
+                collection
+            });
         }
     };
 
-    useEffect(() => {
-        if (entityId && onIdChange)
-            onIdChange(entityId);
-    }, [entityId, onIdChange]);
+    const onSaveFailure = useCallback((e: Error) => {
+        setSaving(false);
+        snackbarController.open({
+            type: "error",
+            message: "Error saving: " + e?.message
+        });
+        console.error("Error saving entity", path, entityId);
+        console.error(e);
+    }, [entityId, path, snackbarController]);
+
+    const saveEntity = ({
+                            values,
+                            previousValues,
+                            entityId,
+                            collection,
+                            path
+                        }: {
+        collection: EntityCollection<M>,
+        path: string,
+        entityId: string | undefined,
+        values: M,
+        previousValues?: M,
+    }) => {
+        setSaving(true);
+        return saveEntityWithCallbacks({
+            path,
+            entityId,
+            values,
+            previousValues,
+            collection,
+            status,
+            dataSource,
+            context,
+            onSaveSuccess: (updatedEntity: Entity<M>) => onSaveSuccess(updatedEntity),
+            onSaveFailure,
+            onPreSaveHookError,
+            onSaveSuccessHookError
+        }).then();
+    };
 
-    const resolvedCollection = resolveCollection<M>({
-        collection: inputCollection,
+    type EntityFormSaveParams<M extends Record<string, any>> = {
+        collection: ResolvedEntityCollection<M>,
+        path: string,
+        entityId: string | undefined,
+        values: EntityValues<M>,
+        previousValues?: EntityValues<M>,
+        autoSave: boolean
+    };
+
+    const onSaveEntityRequest = async ({
+                                           collection,
+                                           path,
+                                           entityId,
+                                           values,
+                                           previousValues,
+                                           autoSave
+                                       }: EntityFormSaveParams<M>): Promise<void> => {
+        if (!status)
+            return;
+        if (autoSave) {
+            setValuesToBeSaved(values);
+        } else {
+            return saveEntity({
+                collection,
+                path,
+                entityId,
+                values,
+                previousValues,
+            });
+        }
+    };
+
+    const lastSavedValues = useRef<EntityValues<M> | undefined>(entity?.values);
+    const save = (values: EntityValues<M>): Promise<void> => {
+        lastSavedValues.current = values;
+        return onSaveEntityRequest({
+            collection: resolvedCollection,
+            path,
+            entityId,
+            values,
+            previousValues: entity?.values,
+            autoSave: autoSave ?? false
+        }).then((res) => {
+            const eventName: CMSAnalyticsEvent = status === "new"
+                ? "new_entity_saved"
+                : (status === "copy" ? "entity_copied" : (status === "existing" ? "entity_edited" : "unmapped_event"));
+            analyticsController.onAnalyticsEvent?.(eventName, { path });
+        }).catch(e => {
+            console.error(e);
+            setSavingError(e);
+        });
+    };
+
+    const formContext: FormContext<M> = {
+        // @ts-ignore
+        setFieldValue: useCallback(formex.setFieldValue, []),
+        values: formex.values,
+        collection: resolvedCollection,
+        entityId: entityId as string,
         path,
-        entityId,
-        values: internalValues,
-        previousValues: formex.initialValues,
-        fields: customizationController.propertyConfigs
-    });
+        save,
+        formex,
+        entity,
+        savingError,
+        status,
+        openEntityMode
+    };
 
-    const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const title = internalValues && titlePropertyKey ? getValueInPath(internalValues, titlePropertyKey) : undefined;
+    useEffect(() => {
+        onFormContextReady?.(formContext);
+    }, [formex.version, resolvedCollection, entityId, path]);
+
+    const onIdUpdateError = useCallback((error: any) => {
+        snackbarController.open({
+            type: "error",
+            message: "Error updating id, check the console"
+        });
+    }, []);
+
+    const pluginActions: React.ReactNode[] = [];
+    const plugins = customizationController.plugins;
+
+    if (plugins && collection) {
+        const actionProps: PluginFormActionProps = {
+            entityId,
+            path,
+            status,
+            collection: collection,
+            context,
+            currentEntityId: entityId,
+            formContext,
+            openEntityMode
+        };
+        pluginActions.push(...plugins.map((plugin) => (
+            plugin.form?.Actions
+                ? <plugin.form.Actions
+                    key={`actions_${plugin.key}`} {...actionProps} />
+                : null
+        )).filter(Boolean));
+    }
 
-    const onIdUpdate = inputCollection.callbacks?.onIdUpdate;
+    const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
+    const title = (formex.values && titlePropertyKey ? getValueInPath(formex.values, titlePropertyKey) : undefined)
+        ?? collection.singularName
+        ?? collection.name;
 
+    const onIdUpdate = collection.callbacks?.onIdUpdate;
     const doOnIdUpdate = useCallback(async () => {
-        if (onIdUpdate && internalValues && (status === "new" || status === "copy")) {
+        if (onIdUpdate && formex.values && (status === "new" || status === "copy")) {
             setCustomIdLoading(true);
             try {
                 const updatedId = await onIdUpdate({
                     collection: resolvedCollection,
                     path,
                     entityId,
-                    values: internalValues,
+                    values: formex.values,
                     context
                 });
                 setEntityId(updatedId);
             } catch (e) {
-                onIdUpdateError && onIdUpdateError(e);
+                onIdUpdateError?.(e);
                 console.error(e);
             }
             setCustomIdLoading(false);
         }
-    }, [entityId, internalValues, status]);
+    }, [entityId, formex.values, status, onIdUpdate, resolvedCollection, path, context, onIdUpdateError]);
 
     useEffect(() => {
         doOnIdUpdate();
     }, [doOnIdUpdate]);
 
-    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    useEffect(() => {
+        if (!autoSave) {
+            onValuesModified?.(modified);
+        }
+    }, [formex.dirty]);
+
+    const deferredValues = useDeferredValue(formex.values);
+    const modified = formex.dirty;
 
     const uniqueFieldValidator: CustomFieldValidator = useCallback(({
                                                                         name,
                                                                         value,
                                                                         property
-                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId),
+                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId
@@ -391,327 +459,186 @@ function EntityFormInternal<M extends Record<string, any>>({
             : undefined,
         [entityId, resolvedCollection.properties, uniqueFieldValidator]);
 
-    const authController = useAuthController();
-
-    const getActionsForEntity = useCallback(({
-                                                 entity,
-                                                 customEntityActions
-                                             }: {
-        entity?: Entity<M>,
-        customEntityActions?: EntityAction[]
-    }): EntityAction[] => {
-        const createEnabled = canCreateEntity(inputCollection, authController, path, null);
-        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, path, entity) : true;
-        const actions: EntityAction[] = [];
-        if (createEnabled)
-            actions.push(copyEntityAction);
-        if (deleteEnabled)
-            actions.push(deleteEntityAction);
-        if (customEntityActions)
-            actions.push(...customEntityActions);
-        return actions;
-    }, [authController, inputCollection, path]);
-
-    const pluginActions: React.ReactNode[] = [];
-
-    const formContext: FormContext<M> = {
-        setFieldValue: formex.setFieldValue,
-        values: formex.values,
-        collection: resolvedCollection,
-        entityId,
-        path,
-        save
-    };
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-        if (onFormContextChange) {
-            onFormContextChange(formContext);
+        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+        if (modified) {
+            saveEntityToCache(key, deferredValues);
         }
-    }, [onFormContextChange, formContext]);
+    }, [deferredValues, modified, path, entityId, status]);
 
-    if (plugins && inputCollection) {
-        const actionProps: PluginFormActionProps = {
-            entityId,
-            path,
-            status,
-            collection: inputCollection,
-            context,
-            currentEntityId: entityId,
-            formContext
-        };
-        pluginActions.push(...plugins.map((plugin, i) => (
-            plugin.form?.Actions
-                ? <plugin.form.Actions
-                    key={`actions_${plugin.key}`} {...actionProps}/>
-                : null
-        )).filter(Boolean));
-    }
-
-    return <Formex value={formex}>
-        <div className="h-full overflow-auto">
+    useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
-            {pluginActions.length > 0 && <div
-                className={cn("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
-                {pluginActions}
-            </div>}
-
-            <div className="pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-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>
-
-                {!hideId &&
-                    <CustomIdField customId={inputCollection.customId}
-                                   entityId={entityId}
-                                   status={status}
-                                   onChange={setEntityId}
-                                   error={entityIdError}
-                                   loading={customIdLoading}
-                                   entity={entity}/>}
-
-                {entityId && <InnerForm
-                    {...formex}
-                    initialValues={formex.initialValues}
-                    onModified={onModified}
-                    onDiscard={onDiscard}
-                    onValuesChanged={doOnValuesChanges}
-                    underlyingChanges={underlyingChanges}
-                    entity={entity}
-                    resolvedCollection={resolvedCollection}
-                    formContext={formContext}
-                    status={status}
-                    savingError={savingError}
-                    closeAfterSaveRef={closeAfterSaveRef}
-                    autoSave={autoSave}
-                    entityActions={getActionsForEntity({
-                        entity,
-                        customEntityActions: inputCollection.entityActions
-                    })}/>}
-
-            </div>
-        </div>
-    </Formex>
-}
-
-function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
-    initialValues: EntityValues<M>,
-    onModified: ((modified: boolean) => void) | undefined,
-    onValuesChanged?: (changedValues?: EntityValues<M>) => void,
-    underlyingChanges: Partial<M>,
-    entity: Entity<M> | undefined,
-    resolvedCollection: ResolvedEntityCollection<M>,
-    formContext: FormContext<M>,
-    onDiscard?: () => void,
-    status: "new" | "existing" | "copy",
-    savingError?: Error,
-    closeAfterSaveRef: MutableRefObject<boolean>,
-    autoSave?: boolean,
-    entityActions: EntityAction[],
-}) {
-
-    const {
-        values,
-        onDiscard,
-        onModified,
-        onValuesChanged,
-        underlyingChanges,
-        formContext,
-        entity,
-        touched,
-        setFieldValue,
-        resolvedCollection,
-        isSubmitting,
-        status,
-        handleSubmit,
-        resetForm,
-        savingError,
-        dirty,
-        closeAfterSaveRef,
-        autoSave,
-        entityActions,
-    } = props;
-
-    const context = useFireCMSContext();
-    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
-    const sideEntityController = useSideEntityController();
-
-    const modified = dirty;
     useEffect(() => {
-        if (onModified)
-            onModified(modified);
-        if (onValuesChanged)
-            onValuesChanged(values);
-    }, [modified, values]);
-
-    useEffect(() => {
-        if (!autoSave && !isSubmitting && underlyingChanges && entity) {
+        if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
             // we update the form fields from the Firestore data
             // if they were not touched
             Object.entries(underlyingChanges).forEach(([key, value]) => {
-                const formValue = values[key];
-                if (!equal(value, formValue) && !touched[key]) {
+                const formValue = formex.values[key];
+                if (!equal(value, formValue) && !formex.touched[key]) {
                     console.debug("Updated value from the datasource:", key, value);
-                    setFieldValue(key, value !== undefined ? value : null);
+                    formex.setFieldValue(key, value !== undefined ? value : null);
                 }
             });
         }
-    }, [isSubmitting, autoSave, underlyingChanges, entity, values, touched, setFieldValue]);
+    }, [formex.isSubmitting, autoSave, underlyingChanges, entity, formex.values, formex.touched, formex.setFieldValue]);
 
-    const formFields = (
-        <div className={"flex flex-col gap-8"}>
-            {(resolvedCollection.propertiesOrder ?? Object.keys(resolvedCollection.properties))
-                .map((key) => {
+    const formFieldKeys = getFormFieldKeys(resolvedCollection);
 
+    const formFields = () => (
+            <FormLayout>
+                {formFieldKeys.map((key) => {
                     const property = resolvedCollection.properties[key];
-                    if (!property) {
-                        console.warn(`Property ${key} not found in collection ${resolvedCollection.name}`);
-                        return null;
+                    if (property) {
+                        const underlyingValueHasChanged: boolean =
+                            !!underlyingChanges &&
+                            Object.keys(underlyingChanges).includes(key) &&
+                            formex.touched[key];
+                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const hidden = isHidden(property);
+                        if (hidden) return null;
+                        const widthPercentage = property.widthPercentage ?? 100;
+                        const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
+                            propertyKey: key,
+                            disabled,
+                            property,
+                            includeDescription: property.description || property.longDescription,
+                            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+                            context: formContext,
+                            partOfArray: false,
+                            minimalistView: false,
+                            autoFocus: false
+                        };
+
+                        return (
+                            <FormEntry propertyKey={key}
+                                       widthPercentage={widthPercentage}
+                                       key={`field_${key}`}>
+                                <PropertyFieldBinding {...cmsFormFieldProps} />
+                            </FormEntry>
+                        );
                     }
 
-                    const underlyingValueHasChanged: boolean =
-                        !!underlyingChanges &&
-                        Object.keys(underlyingChanges).includes(key) &&
-                        !!touched[key];
-
-                    const disabled = (!autoSave && isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
-                    const hidden = isHidden(property);
-                    if (hidden) return null;
-                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
-                        propertyKey: key,
-                        disabled,
-                        property,
-                        includeDescription: property.description || property.longDescription,
-                        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-                        context: formContext,
-                        tableMode: false,
-                        partOfArray: false,
-                        partOfBlock: false,
-                        autoFocus: false
-                    };
-
-                    return (
-                        <div id={`form_field_${key}`}
-                             key={`field_${resolvedCollection.name}_${key}`}>
-                            <ErrorBoundary>
-                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
-                                         delayDuration={800}
-                                         side={"left"}
-                                         align={"start"}
-                                         sideOffset={16}>
-                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
-                                </Tooltip>
-                            </ErrorBoundary>
-                        </div>
-                    );
-                })
-                .filter(Boolean)}
-
-        </div>
-    );
-
-    const disabled = isSubmitting || (!modified && status === "existing");
-    const formRef = React.useRef<HTMLDivElement>(null);
+                    const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
+                    if (additionalField && entity) {
+                        const Builder = additionalField.Builder;
+                        if (!Builder && !additionalField.value) {
+                            throw new Error("When using additional fields you need to provide a Builder or a value");
+                        }
+                        const child = Builder
+                            ? <Builder entity={entity} context={context}/>
+                            : <div className={"w-full"}>
+                                {additionalField.value?.({
+                                    entity,
+                                    context
+                                })?.toString()}
+                            </div>;
+
+                        return (
+                            <div key={`additional_${key}`} className={"w-full"}>
+                                <LabelWithIconAndTooltip
+                                    propertyKey={key}
+                                    icon={<NotesIcon size={"small"}/>}
+                                    title={additionalField.name}
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                <div
+                                    className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                                    <ErrorBoundary>
+                                        {child}
+                                    </ErrorBoundary>
+                                </div>
+                            </div>
+                        );
+                    }
 
-    return (
+                    console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+                    return null;
+                }).filter(Boolean)}
+            </FormLayout>
+        )
+    ;
+
+    const formRef = useRef<HTMLDivElement>(null);
+
+    const formView = <ErrorBoundary>
+        <>
+            <div className={"w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8"}>
+                <Typography
+                    className={"py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0")}
+                    variant={"h4"}>
+                    {title ?? collection.singularName ?? collection.name}
+                </Typography>
+                <Alert color={"base"} className={"w-full"} size={"small"}>
+                    <code
+                        className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
+                        {entity?.path ?? path}/{entityId}
+                    </code>
+                </Alert>
+            </div>
 
-        <form onSubmit={handleSubmit}
-              onReset={() => {
-                  console.debug("Resetting form")
-                  resetForm();
-                  return onDiscard && onDiscard();
-              }}
-              noValidate>
-            <div className="mt-12"
-                 ref={formRef}>
+            {!collection.hideIdFromForm &&
+                <CustomIdField customId={collection.customId}
+                               entityId={entityId}
+                               status={status}
+                               onChange={setEntityId}
+                               error={entityIdError}
+                               loading={customIdLoading}
+                               entity={entity}/>
+            }
 
-                {formFields}
+            {entityId && formContext && <>
+                <div className="mt-12 flex flex-col gap-8" ref={formRef}>
+                    {formFields()}
+                    <ErrorFocus containerRef={formRef}/>
+                </div>
+            </>}
 
-                <ErrorFocus containerRef={formRef}/>
+            {forceActionsAtTheBottom && <div className="h-16"/>}
+        </>
+    </ErrorBoundary>;
 
-            </div>
+    useEffect(() => {
+        if (entityId && onIdChange)
+            onIdChange(entityId);
+    }, [entityId, onIdChange]);
 
-            <div className="h-14"/>
-
-            {!autoSave && <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,
-                                    });
-                            }}>
-                            {action.icon}
-                        </IconButton>
-                    ))}
-                </div>}
-
-                <Button
-                    variant="text"
-                    disabled={disabled}
-                    type="reset"
-                >
-                    {status === "existing" ? "Discard" : "Clear"}
-                </Button>
-
-                <Button
-                    variant="text"
-                    color="primary"
-                    type="submit"
-                    disabled={disabled}
-                    onClick={() => {
-                        closeAfterSaveRef.current = false;
-                    }}
-                >
-                    {status === "existing" && "Save"}
-                    {status === "copy" && "Create copy"}
-                    {status === "new" && "Create"}
-                </Button>
-
-                <Button
-                    variant="filled"
-                    color="primary"
-                    type="submit"
-                    disabled={disabled}
-                    onClick={() => {
-                        closeAfterSaveRef.current = true;
-                    }}
-                >
-                    {status === "existing" && "Save and close"}
-                    {status === "copy" && "Create copy and close"}
-                    {status === "new" && "Create and close"}
-                </Button>
-
-            </DialogActions>}
-        </form>
+    return (
+        <FormLayoutInner
+            className={className}
+            id={`form_${path}`}
+            pluginActions={pluginActions}
+            forceActionsAtTheBottom={forceActionsAtTheBottom}
+            EntityFormActionsComponent={EntityFormActionsComponent}
+            formContext={formContext}>
+            {formView}
+        </FormLayoutInner>
     );
 }
 
+function getInitialEntityValues<M extends object>(
+    collection: EntityCollection,
+    path: string,
+    status: "new" | "existing" | "copy",
+    entity: Entity<M> | undefined
+): Partial<EntityValues<M>> {
+    const resolvedCollection = resolveCollection({
+        collection,
+        path,
+        values: entity?.values,
+    });
+    const properties = resolvedCollection.properties;
+    if ((status === "existing" || status === "copy") && entity) {
+        return entity.values ?? getDefaultValuesFor(properties);
+    } else if (status === "new") {
+        return getDefaultValuesFor(properties);
+    } else {
+        console.error({
+            status,
+            entity
+        });
+        throw new Error("Form has not been initialised with the correct parameters");
+    }
+}
+
 export function yupToFormErrors(yupError: ValidationError): Record<string, any> {
     let errors: Record<string, any> = {};
     if (yupError.inner) {
@@ -726,3 +653,98 @@ export function yupToFormErrors(yupError: ValidationError): Record<string, any>
     }
     return errors;
 }
+
+export function FormLayoutInner({
+                                    id,
+                                    formContext,
+                                    children,
+                                    className,
+                                    forceActionsAtTheBottom,
+                                    pluginActions,
+                                    EntityFormActionsComponent
+                                }: {
+    id?: string,
+    formContext: FormContext,
+    children: React.ReactNode,
+    className?: string,
+    forceActionsAtTheBottom?: boolean,
+    pluginActions?: React.ReactNode[],
+    EntityFormActionsComponent: React.FC<EntityFormActionsProps>;
+}) {
+
+    const formex = formContext.formex;
+    const collection = formContext.collection;
+    const path = formContext.path;
+    const entity = formContext.entity;
+    const savingError = formContext.savingError;
+    const status = formContext.status;
+    const openEntityMode = formContext.openEntityMode;
+    const disabled = formex.isSubmitting || (!formex.dirty && status === "existing");
+
+    if (!collection || !path) {
+        throw Error("INTERNAL: Collection and path must be defined in form context");
+    }
+
+    const dialogActions = <EntityFormActionsComponent
+        collection={collection}
+        path={path}
+        entity={entity}
+        layout={forceActionsAtTheBottom ? "bottom" : "side"}
+        savingError={savingError}
+        formex={formex}
+        disabled={disabled}
+        status={status}
+        pluginActions={pluginActions ?? []}
+        openEntityMode={openEntityMode}
+    />;
+
+    return (
+        <Formex value={formContext.formex}>
+            <form
+                onSubmit={formContext.formex.handleSubmit}
+                onReset={() => formex.resetForm({
+                    values: getInitialEntityValues(collection, path, status, entity),
+                })}
+                noValidate
+                className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
+                <div
+                    id={id}
+                    className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
+
+                    <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
+
+                        {formContext.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>}
+                        {children}
+
+                    </div>
+
+                </div>
+                {dialogActions}
+            </form>
+
+        </Formex>
+    );
+}
+
+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]);
+}