@firecms/core 3.0.0-beta.12 → 3.0.0-beta.13

package/src/core/EntityEditView.tsx

@@ -5,6 +5,7 @@ import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary
 import {
     canEditEntity,
     removeInitialAndTrailingSlashes,
+    resolveCollection,
     resolveDefaultSelectedView,
     resolvedSelectedEntityView
 } from "../util";
@@ -16,12 +17,15 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+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";
 
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -41,6 +45,10 @@ export type OnTabChangeParams<M extends Record<string, any>> = {
 
 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;
@@ -52,7 +60,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
     barActions?: React.ReactNode;
-    formProps?: Partial<EntityFormProps<M>>
+    formProps?: Partial<EntityFormProps<M>>,
 }
 
 /**
@@ -102,19 +110,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
 
-    if (!canEdit) {
-        return <div className={"flex flex-col"}>
-            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
-                {props.collection.singularName ?? props.collection.name}
-            </Typography>
-            <EntityView
-                className={"px-8"}
-                entity={entity as Entity<M>}
-                path={props.path}
-                collection={props.collection}/>
-        </div>
-    }
-
     return <EntityEditViewInner<M> {...props}
                                    entityId={entityId}
                                    entity={entity}
@@ -122,11 +117,13 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
                                    dataLoading={dataLoading}
                                    status={status}
                                    setStatus={setStatus}
+                                   canEdit={canEdit}
     />;
 }
 
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
+                                                                       fullIdPath,
                                                                        entityId,
                                                                        selectedTab: selectedTabProp,
                                                                        collection,
@@ -142,12 +139,14 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        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 context = useFireCMSContext();
@@ -175,10 +174,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     ), []);
 
     const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
-
     useEffect(() => {
-        if ((selectedTabProp ?? MAIN_TAB_VALUE) !== selectedTab) {
-            setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
+        if ((selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE) !== selectedTab) {
+            setSelectedTab(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
         }
     }, [selectedTabProp]);
 
@@ -186,29 +184,66 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
     const {
         resolvedEntityViews,
         selectedEntityView,
         selectedSecondaryForm
-    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
 
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
+    const authController = useAuthController();
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => !e.includeActions)
         .map((customView) => {
+
             if (!customView)
                 return null;
             const Builder = customView.Builder;
             if (!Builder) {
-                console.error("customView.Builder is not defined");
+                console.error("INTERNAL: customView.Builder is not defined");
                 return null;
             }
 
+            if (!entityId) {
+                console.error("INTERNAL: entityId is not defined");
+                return null;
+            }
+
+            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",
@@ -217,11 +252,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 key={`custom_view_${customView.key}`}
                 role="tabpanel">
                 <ErrorBoundary>
-                    {formContext && <Builder
+                    {usedFormContext && <Builder
                         collection={collection}
                         entity={usedEntity}
-                        modifiedValues={formContext.formex.values ?? usedEntity?.values}
-                        formContext={formContext}
+                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                        formContext={usedFormContext}
                     />}
                 </ErrorBoundary>
             </div>;
@@ -229,9 +264,22 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     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 fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        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
@@ -242,9 +290,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {globalLoading && <CircularProgressCenter/>}
 
                 {!globalLoading &&
-                    (usedEntity && fullPath
+                    (usedEntity && newFullPath
                         ? <EntityCollectionView
-                            fullPath={fullPath}
+                            fullPath={newFullPath}
+                            fullIdPath={newFullIdPath}
                             parentCollectionIds={[...parentCollectionIds, collection.id]}
                             isSubCollection={true}
                             updateUrl={false}
@@ -266,15 +315,29 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         setSelectedTab(value);
         if (status === "existing") {
             onTabChange?.({
-                path,
+                path: fullIdPath ?? path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection,
+                collection
             });
         }
     };
 
-    // Render the main entity form view (or a read-only view if the user cannot edit)
+    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}
@@ -285,8 +348,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         openEntityMode={layout}
         forceActionsAtTheBottom={actionsAtTheBottom}
         initialStatus={status}
-        className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
+        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
         EntityFormActionsComponent={EntityEditViewFormActions}
+        disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
             setUsedEntity(entity);
@@ -303,7 +367,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         onSaved={(params) => {
             const res = {
                 ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
             };
             onSaved?.(res);
             formProps?.onSaved?.(res);
@@ -350,6 +414,14 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     onSideTabClick(value);
                 }}>
 
+                {includeJsonView && <Tab
+                    disabled={!hasAdditionalViews}
+                    value={JSON_TAB_VALUE}
+                    innerClassName={"block"}
+                    className={"text-sm"}>
+                    <CodeIcon size={"small"}/>
+                </Tab>}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
@@ -357,6 +429,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     {collection.singularName ?? collection.name}
                 </Tab>
 
+
                 {customViewTabs}
 
                 {subcollectionTabs}
@@ -367,9 +440,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
                 <CircularProgressCenter/>
             </div>
-            : entityView}
+            : <>
+                {entityReadOnlyView}
+                {entityView}
+            </>}
 
-        {/*{secondaryForms}*/}
+        {jsonView}
 
         {customViewsView}
 

package/src/core/FireCMS.tsx

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from "react";
 import { CenteredView, Typography } from "@firecms/ui";
-import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
 import { useCustomizationController, useFireCMSContext } from "../hooks";
@@ -33,7 +33,7 @@ import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 
  * @group Core
  */
-export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
+export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
 
     const {
         children,
@@ -53,17 +53,8 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
         apiKey
     } = props;
 
-    /**
-     * Controller in charge of fetching and persisting data
-     */
-    const dataSource = useBuildDataSource({
-        delegate: dataSourceDelegate,
-        propertyConfigs,
-        navigationController
-    });
-
     const sideDialogsController = useBuildSideDialogsController();
-    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController);
+    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 
     const pluginsLoading = plugins?.some(p => p.loading) ?? false;
 
@@ -90,6 +81,16 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
         plugins
     });
 
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceDelegate,
+        propertyConfigs,
+        navigationController,
+        authController
+    });
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }

package/src/form/EntityForm.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import {
+    AuthController,
     CMSAnalyticsEvent,
     Entity,
     EntityCollection,
@@ -28,6 +29,7 @@ import {
 
 import {
     saveEntityWithCallbacks,
+    useAuthController,
     useCustomizationController,
     useDataSource,
     useFireCMSContext,
@@ -71,6 +73,10 @@ export type EntityFormProps<M extends Record<string, any>> = {
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
     openEntityMode?: "side_panel" | "full_screen";
+    /**
+     * If true, the form will be disabled and no actions will be available
+     */
+    disabled?: boolean;
     /**
      * Include the copy and delete actions in the form
      */
@@ -105,6 +111,7 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
+                                                              disabled: disabledProp,
                                                               Builder,
                                                               EntityFormActionsComponent = EntityFormActions,
                                                               showDefaultActions = true,
@@ -116,8 +123,8 @@ export function EntityForm<M extends Record<string, any>>({
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
+    const authController = useAuthController();
     const [status, setStatus] = useState<EntityStatus>(initialStatus);
-    const [saving, setSaving] = useState(false);
 
     const updateStatus = (status: EntityStatus) => {
         setStatus(status);
@@ -204,7 +211,7 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
-        initialValues: (initialDirtyValues ?? getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs)) as M,
+        initialValues: (initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)) as M,
         initialDirty: Boolean(initialDirtyValues),
         onSubmit,
         onReset: () => {
@@ -222,7 +229,6 @@ export function EntityForm<M extends Record<string, any>>({
         }
     });
 
-
     useEffect(() => {
 
         const handleKeyDown = (e: KeyboardEvent) => {
@@ -251,11 +257,11 @@ export function EntityForm<M extends Record<string, any>>({
         entityId,
         values: formex.values,
         previousValues: formex.initialValues,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [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
@@ -264,7 +270,6 @@ export function EntityForm<M extends Record<string, any>>({
     }, [snackbarController]);
 
     const onSaveSuccessHookError = useCallback((e: Error) => {
-        setSaving(false);
         snackbarController.open({
             type: "error",
             message: "Error after saving (entity is saved): " + e?.message
@@ -284,7 +289,6 @@ export function EntityForm<M extends Record<string, any>>({
 
         clearDirtyCache();
         onValuesModified?.(false);
-        setSaving(false);
         if (!autoSave)
             snackbarController.open({
                 type: "success",
@@ -306,7 +310,6 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const onSaveFailure = useCallback((e: Error) => {
-        setSaving(false);
         snackbarController.open({
             type: "error",
             message: "Error saving: " + e?.message
@@ -328,7 +331,6 @@ export function EntityForm<M extends Record<string, any>>({
         values: M,
         previousValues?: M,
     }) => {
-        setSaving(true);
         return saveEntityWithCallbacks({
             path,
             entityId,
@@ -338,7 +340,7 @@ export function EntityForm<M extends Record<string, any>>({
             status,
             dataSource,
             context,
-            onSaveSuccess: (updatedEntity: Entity<M>) => onSaveSuccess(updatedEntity),
+            onSaveSuccess,
             onSaveFailure,
             onPreSaveHookError,
             onSaveSuccessHookError
@@ -398,6 +400,8 @@ export function EntityForm<M extends Record<string, any>>({
         });
     };
 
+    const disabled = formex.isSubmitting || Boolean(disabledProp);
+
     const formContext: FormContext<M> = {
         // @ts-ignore
         setFieldValue: useCallback(formex.setFieldValue, []),
@@ -410,7 +414,8 @@ export function EntityForm<M extends Record<string, any>>({
         entity,
         savingError,
         status,
-        openEntityMode
+        openEntityMode,
+        disabled
     };
 
     useEffect(() => {
@@ -427,6 +432,7 @@ export function EntityForm<M extends Record<string, any>>({
     const pluginActions: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
 
+    const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
     if (plugins && collection) {
         const actionProps: PluginFormActionProps = {
             entityId,
@@ -436,7 +442,8 @@ export function EntityForm<M extends Record<string, any>>({
             context,
             currentEntityId: entityId,
             formContext,
-            openEntityMode
+            openEntityMode,
+            disabled: actionsDisabled,
         };
         pluginActions.push(...plugins.map((plugin) => (
             plugin.form?.Actions
@@ -544,7 +551,7 @@ export function EntityForm<M extends Record<string, any>>({
                             !!underlyingChanges &&
                             Object.keys(underlyingChanges).includes(key) &&
                             formex.touched[key];
-                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const disabled = disabledProp || (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
                         const hidden = isHidden(property);
                         if (hidden) return null;
                         const widthPercentage = property.widthPercentage ?? 100;
@@ -654,8 +661,6 @@ export function EntityForm<M extends Record<string, any>>({
             onIdChange(entityId);
     }, [entityId, onIdChange]);
 
-    const disabled = formex.isSubmitting || (!formex.dirty && status === "existing");
-
     if (!resolvedCollection || !path) {
         throw Error("INTERNAL: Collection and path must be defined in form context");
     }
@@ -667,7 +672,7 @@ export function EntityForm<M extends Record<string, any>>({
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
         savingError={savingError}
         formex={formex}
-        disabled={disabled}
+        disabled={actionsDisabled}
         status={status}
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
@@ -675,11 +680,11 @@ export function EntityForm<M extends Record<string, any>>({
     />;
 
     return (
-        <Formex value={formContext.formex}>
+        <Formex value={formex}>
             <form
-                onSubmit={formContext.formex.handleSubmit}
+                onSubmit={formex.handleSubmit}
                 onReset={() => formex.resetForm({
-                    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs) as M
+                    values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs) as M
                 })}
                 noValidate
                 className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
@@ -689,8 +694,8 @@ export function EntityForm<M extends Record<string, any>>({
 
                     <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"}
+                        {formex.dirty
+                            ? <Tooltip title={"Local unsaved changes"}
                                        className={"self-end sticky top-4 z-10"}>
                                 <Chip size={"small"} colorScheme={"orangeDarker"}>
                                     <EditIcon size={"smallest"}/>
@@ -716,17 +721,19 @@ export function EntityForm<M extends Record<string, any>>({
 }
 
 function getInitialEntityValues<M extends object>(
+    authController: AuthController,
     collection: EntityCollection,
     path: string,
     status: "new" | "existing" | "copy",
     entity: Entity<M> | undefined,
-    propertyConfigs?: Record<string, PropertyConfig>
+    propertyConfigs?: Record<string, PropertyConfig>,
 ): Partial<EntityValues<M>> {
     const resolvedCollection = resolveCollection({
         collection,
         path,
         values: entity?.values,
-        propertyConfigs
+        propertyConfigs,
+        authController
     });
     const properties = resolvedCollection.properties;
     if ((status === "existing" || status === "copy") && entity) {
@@ -772,3 +779,4 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
+

package/src/form/PropertyFieldBinding.tsx

@@ -17,7 +17,7 @@ import {
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -87,9 +87,10 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      autoFocus,
      index,
      size,
-     onPropertyChange
+     onPropertyChange,
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     return (
@@ -107,10 +108,11 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     path: context.path,
                     entityId: context.entityId,
                     propertyConfigs: customizationController.propertyConfigs,
-                    index
+                    index,
+                    authController
                 });
 
-                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled) || context.disabled;
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
@@ -139,7 +141,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         path: context.path,
                         entityId: context.entityId,
                         propertyConfigs: customizationController.propertyConfigs,
-                        index
+                        index,
+                        authController
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -5,6 +5,7 @@ import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Array field used for custom
@@ -27,6 +28,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
+    const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
 
     let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
@@ -35,7 +37,8 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             propertyValue: value,
             propertyKey,
             property,
-            ignoreMissingFields: false
+            ignoreMissingFields: false,
+            authController
         })
     }
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -120,6 +120,7 @@ export function ArrayOfReferencesFieldBinding({
                             value={value}
                             disabled={isSubmitting}
                             buildEntry={buildEntry}
+                            canAddElements={false}
                             addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
                             newDefaultEntry={property.of.defaultValue}
                             onValueChange={(value) => setFieldValue(propertyKey, value)}