@firecms/core 3.0.0-canary.24 → 3.0.0-canary.241

package/src/core/EntityEditView.tsx

@@ -1,561 +1,489 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-    Entity,
-    EntityCollection,
-    EntityCustomView,
-    EntityStatus,
-    EntityValues,
-    FireCMSPlugin,
-    FormContext,
-    User
-} from "../types";
-import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary, } from "../components";
+import React, { useEffect, useMemo, useState } from "react";
+import { Entity, EntityCollection, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
+
+import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
 import {
     canEditEntity,
     removeInitialAndTrailingSlashes,
+    resolveCollection,
     resolveDefaultSelectedView,
-    resolveEntityView,
-    useDebouncedCallback
+    resolvedSelectedEntityView
 } from "../util";
 
 import {
-    saveEntityWithCallbacks,
     useAuthController,
     useCustomizationController,
-    useDataSource,
     useEntityFetch,
     useFireCMSContext,
-    useSideEntityController,
-    useSnackbarController
+    useLargeLayout
 } from "../hooks";
-import { EntityForm } from "../form";
-import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
-import { EntityFormSaveParams } from "../form/EntityForm";
-import { FORM_CONTAINER_WIDTH } from "../internal/common";
-import { useSideDialogContext } from "./index";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { getEntityFromCache } from "../util/entity_cache";
+import { EntityForm, EntityFormProps } from "../form";
+import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
+import { EntityJsonPreview } from "../components/EntityJsonPreview";
+import { createFormexStub } from "../util/createFormexStub";
+
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
+
+export type OnUpdateParams = {
+    entity: Entity<any>,
+    status: EntityStatus,
+    path: string,
+    entityId?: string;
+    selectedTab?: string;
+    collection: EntityCollection<any>
+};
 
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+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;
+    /**
+     * The navigation path to the entity.
+     */
+    fullIdPath?: string;
     collection: EntityCollection<M>;
     entityId?: string;
+    databaseId?: string;
     copy?: boolean;
-    selectedSubPath?: string;
+    selectedTab?: string;
     parentCollectionIds: string[];
-    formWidth?: number | string;
-    onValuesAreModified: (modified: boolean) => void;
-    onUpdate?: (params: { entity: Entity<any> }) => void;
-    onClose?: () => void;
+    onValuesModified?: (modified: boolean) => void;
+    onSaved?: (params: OnUpdateParams) => void;
+    onTabChange?: (props: OnTabChangeParams<M>) => void;
+    layout?: "side_panel" | "full_screen";
+    barActions?: React.ReactNode;
+    formProps?: Partial<EntityFormProps<M>>,
 }
 
 /**
  * This is the default view that is used as the content of a side panel when
  * an entity is opened.
- * You probably don't want to use this view directly since it is bound to the
- * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
  */
-export function EntityEditView<M extends Record<string, any>, UserType extends User>({
-                                                                                         path,
-                                                                                         entityId,
-                                                                                         selectedSubPath,
-                                                                                         copy,
-                                                                                         collection,
-                                                                                         parentCollectionIds,
-                                                                                         onValuesAreModified,
-                                                                                         formWidth,
-                                                                                         onUpdate,
-                                                                                         onClose,
-                                                                                     }: EntityEditViewProps<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`);
+export function EntityEditView<M extends Record<string, any>, USER extends User>({
+                                                                                     entityId,
+                                                                                     ...props
+                                                                                 }: EntityEditViewProps<M>) {
+
+    const {
+        entity,
+        dataLoading,
+        // eslint-disable-next-line no-unused-vars
+        dataLoadingError
+    } = useEntityFetch<M, USER>({
+        path: props.path,
+        entityId: entityId,
+        collection: props.collection,
+        databaseId: props.databaseId,
+        useCache: false
+    });
+
+    const cachedValues = entityId
+        ? getEntityFromCache(props.path + "/" + entityId)
+        : getEntityFromCache(props.path + "#new");
+
+    const authController = useAuthController();
+
+    const initialStatus = props.copy ? "copy" : (entityId ? "existing" : "new");
+    const [status, setStatus] = useState<EntityStatus>(initialStatus);
+
+    const canEdit = useMemo(() => {
+        if (status === "new" || status === "copy") {
+            return true;
+        } else {
+            return entity ? canEditEntity(props.collection, authController, props.path, entity ?? null) : undefined;
+        }
+    }, [authController, entity, status]);
+
+    if ((dataLoading && !cachedValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
+        return <CircularProgressCenter/>;
     }
 
-    const [saving, setSaving] = useState(false);
-    /**
-     * These are the values that are being saved. They are debounced.
-     * We use this only when autoSave is enabled.
-     */
-    const [valuesToBeSaved, setValuesToBeSaved] = useState<EntityValues<M> | undefined>(undefined);
-    useDebouncedCallback(valuesToBeSaved, () => {
-        if (valuesToBeSaved)
-            saveEntity({
-                entityId: usedEntity?.id,
-                collection,
-                path,
-                values: valuesToBeSaved,
-                closeAfterSave: false
-            });
-    }, false, 2000);
+    if (entityId && !entity && !cachedValues) {
+        console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
+    }
 
-    // const largeLayout = useLargeLayout();
-    // const largeLayoutTabSelected = useRef(!largeLayout);
+    return <EntityEditViewInner<M> {...props}
+                                   entityId={entityId}
+                                   entity={entity}
+                                   cachedDirtyValues={cachedValues as Partial<M>}
+                                   dataLoading={dataLoading}
+                                   status={status}
+                                   setStatus={setStatus}
+                                   canEdit={canEdit}
+    />;
+}
 
-    const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
+export function EntityEditViewInner<M extends Record<string, any>>({
+                                                                       path,
+                                                                       fullIdPath,
+                                                                       entityId,
+                                                                       selectedTab: selectedTabProp,
+                                                                       collection,
+                                                                       parentCollectionIds,
+                                                                       onValuesModified,
+                                                                       onSaved,
+                                                                       onTabChange,
+                                                                       entity,
+                                                                       cachedDirtyValues,
+                                                                       dataLoading,
+                                                                       layout = "side_panel",
+                                                                       barActions,
+                                                                       status,
+                                                                       setStatus,
+                                                                       formProps,
+                                                                       canEdit
+                                                                   }: EntityEditViewProps<M> & {
+    entity?: Entity<M>,
+    cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
+    dataLoading: boolean,
+    status: EntityStatus,
+    setStatus: (status: EntityStatus) => void,
+    canEdit?: boolean,
+}) {
 
-    const dataSource = useDataSource(collection);
-    const sideDialogContext = useSideDialogContext();
-    const sideEntityController = useSideEntityController();
-    const snackbarController = useSnackbarController();
-    const customizationController = useCustomizationController();
     const context = useFireCMSContext();
-    const authController = useAuthController<UserType>();
 
-    const [formContext, setFormContext] = useState<FormContext<M> | undefined>(undefined);
+    const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
 
-    const [status, setStatus] = useState<EntityStatus>(copy ? "copy" : (entityId ? "existing" : "new"));
+    useEffect(() => {
+        if (entity)
+            setUsedEntity(entity);
+    }, [entity]);
 
-    const modifiedValuesRef = useRef<EntityValues<M> | undefined>(undefined);
-    const modifiedValues = modifiedValuesRef.current;
+    // Instead of using a ref (which does not trigger re-render), we use state for the form context.
+    const [formContext, setFormContext] = useState<FormContext<M> | undefined>(undefined);
 
-    const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
-    const subcollectionsCount = subcollections?.length ?? 0;
-    const customViews = collection.entityViews;
-    const customViewsCount = customViews?.length ?? 0;
-    const autoSave = collection.formAutoSave && !collection.customId;
+    const largeLayout = useLargeLayout();
 
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const customizationController = useCustomizationController();
 
-    const defaultSelectedView = selectedSubPath ?? resolveDefaultSelectedView(
+    const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
         collection ? collection.defaultSelectedView : undefined,
         {
             status,
             entityId
         }
-    );
+    ), []);
 
-    const selectedTabRef = useRef<string>(defaultSelectedView ?? MAIN_TAB_VALUE);
+    const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+    useEffect(() => {
+        if ((selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE) !== selectedTab) {
+            setSelectedTab(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        }
+    }, [selectedTabProp]);
 
-    const mainViewVisible = selectedTabRef.current === MAIN_TAB_VALUE;
+    const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
+    const subcollectionsCount = subcollections?.length ?? 0;
+    const customViews = collection.entityViews ?? [];
+    const customViewsCount = customViews?.length ?? 0;
+    const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
-    const {
-        entity,
-        dataLoading,
-        // eslint-disable-next-line no-unused-vars
-        dataLoadingError
-    } = useEntityFetch<M, UserType>({
-        path,
-        entityId,
-        collection,
-        useCache: false
-    });
+    const plugins = customizationController.plugins;
 
-    const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
-    const [readOnly, setReadOnly] = useState<boolean | undefined>(undefined);
+    const {
+        resolvedEntityViews,
+        selectedEntityView,
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
 
-    useEffect(() => {
-        if (entity)
-            setUsedEntity(entity);
-    }, [entity]);
+    const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
-    useEffect(() => {
-        if (status === "new") {
-            setReadOnly(false);
-        } else {
-            const editEnabled = usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
-            if (usedEntity)
-                setReadOnly(!editEnabled);
-        }
-    }, [authController, usedEntity, status]);
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
-    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]);
+    const authController = useAuthController();
 
-    const onSaveSuccess = (updatedEntity: Entity<M>, closeAfterSave: boolean) => {
+    const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
+        .filter(e => !e.includeActions)
+        .map((customView) => {
 
-        setSaving(false);
-        if (!autoSave)
-            snackbarController.open({
-                type: "success",
-                message: `${collection.singularName ?? collection.name}: Saved correctly`
-            });
+            if (!customView)
+                return null;
+            const Builder = customView.Builder;
+            if (!Builder) {
+                console.error("INTERNAL: customView.Builder is not defined");
+                return null;
+            }
 
-        setUsedEntity(updatedEntity);
-        setStatus("existing");
+            if (!entityId) {
+                return null;
+            }
 
-        onValuesAreModified(false);
+            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+            const usedFormContext: FormContext = formContext ?? {
+                entityId,
+                disabled: false,
+                openEntityMode: layout,
+                status: status,
+                values: usedEntity?.values ?? {},
+                setFieldValue: (key: string, value: any) => {
+                    throw new Error("You can't update values in read only mode");
+                },
+                save: () => {
+                    throw new Error("You can't save in read only mode");
+                },
+                collection: resolveCollection<M>({
+                    collection,
+                    path,
+                    entityId,
+                    values: usedEntity?.values ?? {},
+                    previousValues: usedEntity?.values ?? {},
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController
+                }),
+                path,
+                entity: usedEntity,
+                savingError: undefined,
+                formex: formexStub
+            };
+
+            return <div
+                className={cls(defaultBorderMixin,
+                    "relative flex-1 w-full h-full overflow-auto",
+                    { "hidden": selectedTab !== customView.key }
+                )}
+                key={`custom_view_${customView.key}`}
+                role="tabpanel">
+                <ErrorBoundary>
+                    {usedFormContext && <Builder
+                        collection={collection}
+                        entity={usedEntity}
+                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                        formContext={usedFormContext}
+                    />}
+                </ErrorBoundary>
+            </div>;
+        }).filter(Boolean);
+
+    const globalLoading = dataLoading && !usedEntity;
+
+    const jsonView = <div
+        className={cls("relative flex-1 h-full overflow-auto w-full",
+            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+        key={"json_view"}
+        role="tabpanel">
+        <ErrorBoundary>
+            <EntityJsonPreview
+                values={formContext?.values ?? entity?.values ?? {}}/>
+        </ErrorBoundary>
+    </div>;
+
+    const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
+        const subcollectionId = subcollection.id ?? subcollection.path;
+        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        const newFullIdPath = fullIdPath ? `${fullIdPath}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+
+        if (selectedTab !== subcollectionId) return null;
+        return (
+            <div
+                className={"relative flex-1 h-full overflow-auto w-full"}
+                key={`subcol_${subcollectionId}`}
+                role="tabpanel">
+
+                {globalLoading && <CircularProgressCenter/>}
+
+                {!globalLoading &&
+                    (usedEntity && newFullPath
+                        ? <EntityCollectionView
+                            fullPath={newFullPath}
+                            fullIdPath={newFullIdPath}
+                            parentCollectionIds={[...parentCollectionIds, collection.id]}
+                            isSubCollection={true}
+                            updateUrl={false}
+                            {...subcollection}
+                            openEntityMode={layout}/>
+                        : <div className="flex items-center justify-center w-full h-full p-3">
+                            <Typography variant={"label"}>
+                                You need to save your entity before
+                                adding additional collections
+                            </Typography>
+                        </div>)
+                }
 
-        if (onUpdate)
-            onUpdate({ entity: updatedEntity });
+            </div>
+        );
+    }).filter(Boolean);
 
-        if (closeAfterSave) {
-            sideDialogContext.setBlocked(false);
-            sideDialogContext.close(true);
-            onClose?.();
-        } else if (status !== "existing") {
-            sideEntityController.replace({
-                path,
-                entityId: updatedEntity.id,
-                selectedSubPath: selectedTabRef.current,
-                updateUrl: true,
-                collection,
+    const onSideTabClick = (value: string) => {
+        setSelectedTab(value);
+        if (status === "existing") {
+            onTabChange?.({
+                path: fullIdPath ?? path,
+                entityId,
+                selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
+                collection
             });
         }
-
     };
 
-    const onSaveFailure = useCallback((e: Error) => {
+    const entityReadOnlyView = !canEdit && entity ? <div
+        className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
+        <div
+            className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
+            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
+                {collection.singularName ?? collection.name}
+            </Typography>
+            <EntityView
+                className={"px-8 h-full overflow-auto"}
+                entity={entity}
+                path={path}
+                collection={collection}/>
+        </div>
+    </div> : null;
+
+    const entityView = <EntityForm<M>
+        collection={collection}
+        path={path}
+        entityId={entityId ?? usedEntity?.id}
+        onValuesModified={onValuesModified}
+        entity={entity}
+        initialDirtyValues={cachedDirtyValues}
+        openEntityMode={layout}
+        forceActionsAtTheBottom={actionsAtTheBottom}
+        initialStatus={status}
+        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
+        EntityFormActionsComponent={EntityEditViewFormActions}
+        disabled={!canEdit}
+        {...formProps}
+        onEntityChange={(entity) => {
+            setUsedEntity(entity);
+            formProps?.onEntityChange?.(entity);
+        }}
+        onStatusChange={(status) => {
+            setStatus(status);
+            formProps?.onStatusChange?.(status);
+        }}
+        onFormContextReady={(formContext) => {
+            setFormContext(formContext);
+            formProps?.onFormContextReady?.(formContext);
+        }}
+        onSaved={(params) => {
+            const res = {
+                ...params,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+            };
+            onSaved?.(res);
+            formProps?.onSaved?.(res);
+        }}
+        Builder={selectedSecondaryForm?.Builder}
+    />;
+
+    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+        <Tab
+            className="text-sm min-w-[120px]"
+            value={subcollection.id}
+            key={`entity_detail_collection_tab_${subcollection.name}`}>
+            {subcollection.name}
+        </Tab>
+    );
 
-        setSaving(false);
-        snackbarController.open({
-            type: "error",
-            message: "Error saving: " + e?.message
-        });
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
+    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
 
-        console.error("Error saving entity", path, entityId);
-        console.error(e);
-    }, [entityId, path, snackbarController]);
-
-    const saveEntity = ({
-                            values,
-                            previousValues,
-                            closeAfterSave,
-                            entityId,
-                            collection,
-                            path
-                        }: {
-        collection: EntityCollection<M>,
-        path: string,
-        entityId: string | undefined,
-        values: M,
-        previousValues?: M,
-        closeAfterSave: boolean,
-    }) => {
-        setSaving(true);
-        saveEntityWithCallbacks({
-            path,
-            entityId,
-            values,
-            previousValues,
-            collection,
-            status,
-            dataSource,
-            context,
-            onSaveSuccess: (updatedEntity: Entity<M>) => onSaveSuccess(updatedEntity, closeAfterSave),
-            onSaveFailure,
-            onPreSaveHookError,
-            onSaveSuccessHookError
-        }).then();
-    };
+    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
-    const onSaveEntityRequest = async ({
-                                           collection,
-                                           path,
-                                           entityId,
-                                           values,
-                                           previousValues,
-                                           closeAfterSave,
-                                           autoSave
-                                       }: EntityFormSaveParams<M>): Promise<void> => {
-        if (!status)
-            return;
-
-        if (autoSave) {
-            setValuesToBeSaved(values);
-        } else {
-            saveEntity({
-                collection,
-                path,
-                entityId,
-                values,
-                previousValues,
-                closeAfterSave
-            });
-        }
-    };
+    let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
-    const resolvedEntityViews = customViews ? customViews
-            .map(e => resolveEntityView(e, customizationController.entityViews))
-            .filter(Boolean) as EntityCustomView[]
-        : [];
+        {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)}>
 
-    const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
-        .map(
-            (customView, colIndex) => {
-                if (!customView)
-                    return null;
-                if (selectedTabRef.current !== customView.key)
-                    return null;
-                const Builder = customView.Builder;
-                if (!Builder) {
-                    console.error("customView.Builder is not defined");
-                    return null;
-                }
-                return <div
-                    className={cn(defaultBorderMixin,
-                        "relative flex-grow w-full h-full overflow-auto ")}
-                    key={`custom_view_${customView.key}`}
-                    role="tabpanel">
-                    <ErrorBoundary>
-                        {formContext && <Builder
-                            collection={collection}
-                            entity={usedEntity}
-                            modifiedValues={modifiedValues ?? usedEntity?.values}
-                            formContext={formContext}
-                        />}
-                    </ErrorBoundary>
-                </div>;
-            }
-        ).filter(Boolean);
+            {barActions}
 
-    const globalLoading = (dataLoading && !usedEntity) ||
-        ((!usedEntity || readOnly === undefined) && (status === "existing" || status === "copy"));
+            <div className={"flex-grow"}/>
 
-    const loading = globalLoading || saving;
+            {globalLoading && <div className="self-center">
+                <CircularProgress size={"small"}/>
+            </div>}
 
-    const subCollectionsViews = subcollections && subcollections.map(
-        (subcollection, colIndex) => {
-            const subcollectionId = subcollection.id ?? subcollection.path;
-            const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
-            if (selectedTabRef.current !== subcollectionId)
-                return null;
-            return (
-                <div
-                    className={"relative flex-grow h-full overflow-auto w-full"}
-                    key={`subcol_${subcollectionId}`}
-                    role="tabpanel">
-
-                    {loading && <CircularProgressCenter/>}
-
-                    {!globalLoading &&
-                        (usedEntity && fullPath
-                            ? <EntityCollectionView
-                                fullPath={fullPath}
-                                parentCollectionIds={[...parentCollectionIds, collection.id]}
-                                isSubCollection={true}
-                                {...subcollection}/>
-                            : <div
-                                className="flex items-center justify-center w-full h-full p-3">
-                                <Typography variant={"label"}>
-                                    You need to save your entity before
-                                    adding additional collections
-                                </Typography>
-                            </div>)
-                    }
-
-                </div>
-            );
-        }
-    ).filter(Boolean);
+            {hasAdditionalViews && <Tabs
+                value={selectedTab}
+                onValueChange={(value) => {
+                    onSideTabClick(value);
+                }}>
 
-    const onDiscard = useCallback(() => {
-        onValuesAreModified(false);
-    }, []);
+                {includeJsonView && <Tab
+                    disabled={!hasAdditionalViews}
+                    value={JSON_TAB_VALUE}
+                    className={"text-sm"}>
+                    <CodeIcon size={"small"}/>
+                </Tab>}
 
-    const onSideTabClick = (value: string) => {
-        selectedTabRef.current = value;
-        sideEntityController.replace({
-            path,
-            entityId,
-            selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
-            updateUrl: true,
-            collection,
-        });
-    };
+                {customViewTabsStart}
 
-    const onValuesChanged = useCallback((values?: EntityValues<M>) => {
-        modifiedValuesRef.current = values;
-    }, []);
+                <Tab
+                    disabled={!hasAdditionalViews}
+                    value={MAIN_TAB_VALUE}
+                    className={"text-sm min-w-[120px]"}>
+                    {collection.singularName ?? collection.name}
+                </Tab>
 
-    // eslint-disable-next-line n/handle-callback-err
-    const onIdUpdateError = useCallback((error: any) => {
-        snackbarController.open({
-            type: "error",
-            message: "Error updating id, check the console"
-        });
-    }, []);
 
-    const onIdChange = useCallback((id: string) => {
-        setUsedEntity((prevEntity) => prevEntity
-            ? {
-                ...prevEntity,
-                id
-            }
-            : undefined);
-    }, []);
+                {customViewTabsEnd}
 
-    const onModified = (dirty: boolean) => {
-        if (!autoSave)
-            onValuesAreModified(dirty);
-    }
+                {subcollectionTabs}
+            </Tabs>}
+        </div>}
 
-    function buildForm() {
-        const plugins = customizationController.plugins;
-        let form = <EntityForm
-            status={status}
-            path={path}
-            collection={collection}
-            onEntitySaveRequested={onSaveEntityRequest}
-            onDiscard={onDiscard}
-            onValuesChanged={onValuesChanged}
-            onModified={onModified}
-            entity={usedEntity}
-            onIdChange={onIdChange}
-            onFormContextChange={setFormContext}
-            hideId={collection.hideIdFromForm}
-            autoSave={autoSave}
-            onIdUpdateError={onIdUpdateError}
-        />;
-        if (plugins) {
-            plugins.forEach((plugin: FireCMSPlugin) => {
-                if (plugin.form?.provider) {
-                    form = (
-                        <plugin.form.provider.Component
-                            status={status}
-                            path={path}
-                            collection={collection}
-                            onDiscard={onDiscard}
-                            onValuesChanged={onValuesChanged}
-                            onModified={onModified}
-                            entity={usedEntity}
-                            context={context}
-                            formContext={formContext}
-                            {...plugin.form.provider.props}>
-                            {form}
-                        </plugin.form.provider.Component>
-                    );
-                }
-            });
-        }
-        return <ErrorBoundary>{form}</ErrorBoundary>;
-    }
+        {globalLoading
+            ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
+                <CircularProgressCenter/>
+            </div>
+            : <>
+                {entityReadOnlyView}
+                {entityView}
+            </>}
 
-    const form = (readOnly === undefined)
-        ? <></>
-        : (!readOnly
-            ? buildForm()
-            : (
-                <>
-                    <Typography
-                        className={"mt-16 mb-8 mx-8"}
-                        variant={"h4"}>{collection.singularName ?? collection.name}
-                    </Typography>
-                    <EntityView
-                        className={"px-12"}
-                        entity={usedEntity as Entity<M>}
-                        path={path}
-                        collection={collection}/>
-                </>
-            ));
+        {jsonView}
 
-    const subcollectionTabs = subcollections && subcollections.map(
-        (subcollection) =>
-            <Tab
-                className="text-sm min-w-[140px]"
-                value={subcollection.id}
-                key={`entity_detail_collection_tab_${subcollection.name}`}>
-                {subcollection.name}
-            </Tab>
-    );
+        {customViewsView}
 
-    const customViewTabs = resolvedEntityViews.map(
-        (view) =>
+        {subCollectionsViews}
 
-            <Tab
-                className="text-sm min-w-[140px]"
-                value={view.key}
-                key={`entity_detail_collection_tab_${view.name}`}>
-                {view.name}
-            </Tab>
-    );
+    </div>;
 
-    return (
-        <div
-            className="flex flex-col h-full w-full transition-width duration-250 ease-in-out">
-            {
-                <>
-
-                    <div
-                        className={cn(defaultBorderMixin, "no-scrollbar border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
-
-                        <div
-                            className="pb-1 self-center">
-                            <IconButton
-                                onClick={() => {
-                                    onClose?.();
-                                    return sideDialogContext.close(false);
-                                }}
-                                size="large">
-                                <CloseIcon/>
-                            </IconButton>
-                        </div>
-
-                        <div className={"flex-grow"}/>
-
-                        {globalLoading && <div
-                            className="self-center">
-                            <CircularProgress size={"small"}/>
-                        </div>}
-
-                        <Tabs
-                            value={selectedTabRef.current}
-                            onValueChange={(value) => {
-                                onSideTabClick(value);
-                            }}
-                            className="pl-4 pr-4 pt-0">
-
-                            <Tab
-                                disabled={!hasAdditionalViews}
-                                value={MAIN_TAB_VALUE}
-                                className={`${
-                                    !hasAdditionalViews ? "hidden" : ""
-                                } text-sm min-w-[140px]`}
-                            >{collection.singularName ?? collection.name}</Tab>
-
-                            {customViewTabs}
-
-                            {subcollectionTabs}
-                        </Tabs>
-
-                    </div>
-
-                    <div
-                        className={"flex-grow h-full flex overflow-auto flex-row w-full "}
-                        style={{
-                            // width: `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedFormWidth})`,
-                            // maxWidth: "100%",
-                            // [`@media (max-width: ${resolvedFormWidth})`]: {
-                            //     width: resolvedFormWidth
-                            // }
-                        }}>
-
-                        <div
-                            role="tabpanel"
-                            hidden={!mainViewVisible}
-                            id={`form_${path}`}
-                            className={" w-full"}>
-
-                            {globalLoading
-                                ? <CircularProgressCenter/>
-                                : form}
-
-                        </div>
-
-                        {customViewsView}
-
-                        {subCollectionsViews}
-
-                    </div>
-
-                </>
+    if (plugins) {
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.form?.provider) {
+                result = (
+                    <plugin.form.provider.Component
+                        status={status}
+                        path={path}
+                        collection={collection}
+                        entity={usedEntity}
+                        context={context}
+                        formContext={formContext}
+                        {...plugin.form.provider.props}>
+                        {result}
+                    </plugin.form.provider.Component>
+                );
             }
+        });
+    }
 
-        </div>
-    );
+    return result;
 }
+