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

package/dist/internal/useBuildDataSource.d.ts

@@ -1,11 +1,12 @@
-import { DataSource, DataSourceDelegate, NavigationController, PropertyConfig } from "../types";
+import { AuthController, DataSource, DataSourceDelegate, NavigationController, PropertyConfig } from "../types";
 /**
  * Use this hook to build a {@link DataSource} based on Firestore
  * @param firebaseApp
  * @group Firebase
  */
-export declare function useBuildDataSource({ delegate, propertyConfigs, navigationController }: {
+export declare function useBuildDataSource({ delegate, propertyConfigs, navigationController, authController }: {
     delegate: DataSourceDelegate;
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
+    authController: AuthController;
 }): DataSource;

package/dist/internal/useBuildSideEntityController.d.ts

@@ -1,4 +1,4 @@
-import { CustomizationController, EntityCollection, EntitySidePanelProps, NavigationController, SideDialogsController, SideEntityController } from "../types";
-export declare function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string;
-export declare const useBuildSideEntityController: (navigation: NavigationController, sideDialogsController: SideDialogsController) => SideEntityController;
+import { AuthController, CustomizationController, EntityCollection, EntitySidePanelProps, NavigationController, SideDialogsController, SideEntityController } from "../types";
+export declare function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController, authController: AuthController): string;
+export declare const useBuildSideEntityController: (navigation: NavigationController, sideDialogsController: SideDialogsController, authController: AuthController) => SideEntityController;
 export declare function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[];

package/dist/types/collections.d.ts

@@ -189,12 +189,14 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Force a filter in this view. If applied, the rest of the filters will
      * be disabled. Filters applied with this prop cannot be changed.
      * e.g. `forceFilter: { age: [">=", 18] }`
+     * e.g. `forceFilter: { related_user: ["==", new EntityReference("sdc43dsw2", "users")] }`
      */
     forceFilter?: FilterValues<Extract<keyof M, string>>;
     /**
      * Initial filters applied to the collection this collection is related to.
      * Defaults to none. Filters applied with this prop can be changed.
      * e.g. `initialFilter: { age: [">=", 18] }`
+     * e.g. `initialFilter: { related_user: ["==", new EntityReference("sdc43dsw2", "users")] }`
      */
     initialFilter?: FilterValues<Extract<keyof M, string>>;
     /**
@@ -287,6 +289,10 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Defaults to false.
      */
     alwaysApplyDefaultValues?: boolean;
+    /**
+     * If set to true, a tab including the JSON representation of the entity will be included.
+     */
+    includeJsonView?: boolean;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/types/fields.d.ts

@@ -138,9 +138,12 @@ export interface FormContext<M extends Record<string, any> = any> {
     savingError?: Error;
     openEntityMode: "side_panel" | "full_screen";
     /**
-     * This is the underlying formex controller that powers the form
+     * This is the underlying formex controller that powers the form.
+     * If you are in a red only mode, the formex controller is there, but you can't
+     * operate with it
      */
     formex: FormexController<M>;
+    disabled: boolean;
 }
 /**
  * In case you need to render a field bound to a Property inside your

package/dist/types/firecms.d.ts

@@ -44,7 +44,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @group Models
  */
-export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
+export type FireCMSProps<USER extends User> = {
     /**
      * Use this function to return the components you want to render under
      * FireCMS

package/dist/types/navigation.d.ts

@@ -49,6 +49,10 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * The collection is resolved from the given path or alias.
      */
     getCollection: (pathOrId: string, includeUserOverride?: boolean) => EC | undefined;
+    /**
+     * Get the top level collection configuration for a given id
+     */
+    getCollectionById: (id: string) => EC | undefined;
     /**
      * Get the collection configuration from its parent ids.
      */

package/dist/types/plugins.d.ts

@@ -159,6 +159,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     path: string;
     status: EntityStatus;
     collection: EC;
+    disabled: boolean;
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;

package/dist/types/properties.d.ts

@@ -5,6 +5,7 @@ import { EntityReference, EntityValues, GeoPoint, Vector } from "./entities";
 import { ResolvedArrayProperty, ResolvedStringProperty } from "./resolved_entities";
 import { FilterValues } from "./collections";
 import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
+import { AuthController } from "./auth";
 /**
  * @group Entity properties
  */
@@ -205,6 +206,10 @@ export type PropertyBuilderProps<M extends Record<string, any> = any> = {
      * Entity ID
      */
     entityId?: string;
+    /**
+     * Controller to manage authentication
+     */
+    authController: AuthController;
 };
 /**
  * You can use this type to define a property dynamically, based
@@ -212,7 +217,7 @@ export type PropertyBuilderProps<M extends Record<string, any> = any> = {
  * current value of the property, as well as the path and entity ID.
  * @group Entity properties
  */
-export type PropertyBuilder<T extends CMSType = any, M extends Record<string, any> = any> = ({ values, previousValues, propertyValue, index, path, entityId }: PropertyBuilderProps<M>) => Property<T> | null;
+export type PropertyBuilder<T extends CMSType = any, M extends Record<string, any> = any> = ({ values, previousValues, propertyValue, index, path, entityId, authController }: PropertyBuilderProps<M>) => Property<T> | null;
 /**
  * @group Entity properties
  */
@@ -371,6 +376,16 @@ export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSTyp
      * extendable panel.
      */
     minimalistView?: boolean;
+    /**
+     * Can the elements in this array be reordered. Defaults to `true`.
+     * This prop has no effect if `disabled` is set to true.
+     */
+    sortable?: boolean;
+    /**
+     * Can the elements in this array be added. Defaults to `true`
+     * This prop has no effect if `disabled` is set to true.
+     */
+    canAddElements?: boolean;
 }
 /**
  * @group Entity properties
@@ -638,6 +653,12 @@ export type StorageConfig = {
      * Define maximal file size in bytes
      */
     maxSize?: number;
+    /**
+     * Use this callback to process the file before uploading it to the storage.
+     * If nothing is returned, the file is uploaded as it is.
+     * @param file
+     */
+    processFile?: (file: File) => Promise<File> | undefined;
     /**
      * Postprocess the saved value (storage path or URL)
      * after it has been resolved.

package/dist/util/createFormexStub.d.ts

@@ -0,0 +1,2 @@
+import { FormexController } from "@firecms/formex";
+export declare function createFormexStub<T extends object>(values: T): FormexController<T>;

package/dist/util/navigation_utils.d.ts

@@ -18,13 +18,14 @@ export declare function getCollectionByPathOrId(pathOrId: string, collections: E
  * @param subpaths
  */
 export declare function getCollectionPathsCombinations(subpaths: string[]): string[];
-export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, selectedTab, sideEntityController, onClose, navigation }: {
+export declare function navigateToEntity({ openEntityMode, collection, entityId, copy, path, fullIdPath, selectedTab, sideEntityController, onClose, navigation }: {
     openEntityMode: "side_panel" | "full_screen";
     collection?: EntityCollection;
     entityId?: string;
     selectedTab?: string;
     copy?: boolean;
     path: string;
+    fullIdPath?: string;
     sideEntityController: SideEntityController;
     onClose?: () => void;
     navigation: NavigationController;

package/dist/util/objects.d.ts

@@ -1,6 +1,6 @@
 export declare const pick: <T>(obj: T, ...args: any[]) => T;
 export declare function isObject(item: any): any;
-export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U): T & U;
+export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U, ignoreUndefined?: boolean): T & U;
 export declare function getValueInPath(o: object | undefined, path: string): any;
 export declare function removeInPath(o: object, path: string): object | undefined;
 export declare function removeFunctions(o: object | undefined): any;

package/dist/util/property_utils.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
-export declare function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
+import { AuthController, EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
+export declare function isReferenceProperty(authController: AuthController, propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
 export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
 export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;

package/dist/util/references.d.ts

@@ -1,4 +1,4 @@
-import { EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
-export declare function getEntityPreviewKeys(targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
+import { AuthController, EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
+export declare function getEntityPreviewKeys(authController: AuthController, targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
 export declare function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): string | undefined;
 export declare function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined;

package/dist/util/resolutions.d.ts

@@ -1,5 +1,5 @@
-import { ArrayProperty, CMSType, CustomizationController, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
-export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields }: {
+import { ArrayProperty, AuthController, CMSType, CustomizationController, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
+export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields, authController }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
     entityId?: string;
@@ -8,6 +8,7 @@ export declare const resolveCollection: <M extends Record<string, any>>({ collec
     userConfigPersistence?: UserConfigurationPersistence;
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }) => ResolvedEntityCollection<M>;
 /**
  * Resolve property builders, enums and arrays.
@@ -25,6 +26,7 @@ export declare function resolveProperty<T extends CMSType = CMSType, M extends R
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig<any>>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedProperty<T> | null;
 export declare function getArrayResolvedProperties<M>({ propertyKey, propertyValue, property, ...props }: {
     propertyValue: any;
@@ -38,6 +40,7 @@ export declare function getArrayResolvedProperties<M>({ propertyKey, propertyVal
     index?: number;
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig>;
+    authController: AuthController;
 }): ResolvedProperty[];
 export declare function resolveArrayProperty<T extends any[], M>({ propertyKey, property, ignoreMissingFields, ...props }: {
     propertyKey?: string;
@@ -50,6 +53,7 @@ export declare function resolveArrayProperty<T extends any[], M>({ propertyKey,
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedArrayProperty;
 /**
  * Resolve enums and arrays for properties
@@ -67,6 +71,7 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
     fromBuilder?: boolean;
     propertyConfigs?: Record<string, PropertyConfig>;
     ignoreMissingFields?: boolean;
+    authController: AuthController;
 }): ResolvedProperties<M>;
 /**
  * Resolve enum aliases for a string or number property
@@ -76,8 +81,8 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
 export declare function resolvePropertyEnum(property: StringProperty | NumberProperty, fromBuilder?: boolean): ResolvedStringProperty | ResolvedNumberProperty;
 export declare function resolveEnumValues(input: EnumValues): EnumValueConfig[] | undefined;
 export declare function resolveEntityView(entityView: string | EntityCustomView<any>, contextEntityViews?: EntityCustomView<any>[]): EntityCustomView<any> | undefined;
-export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string): {
-    resolvedEntityViews: EntityCustomView[];
-    selectedEntityView: EntityCustomView | undefined;
-    selectedSecondaryForm: EntityCustomView | undefined;
+export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string, canEdit?: boolean): {
+    resolvedEntityViews: EntityCustomView<M>[];
+    selectedEntityView: EntityCustomView<M> | undefined;
+    selectedSecondaryForm: EntityCustomView<M> | undefined;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-beta.12",
-    "@firecms/formex": "^3.0.0-beta.12",
-    "@firecms/ui": "^3.0.0-beta.12",
+    "@firecms/editor": "^3.0.0-beta.13",
+    "@firecms/formex": "^3.0.0-beta.13",
+    "@firecms/ui": "^3.0.0-beta.13",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -62,6 +62,7 @@
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
+    "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
@@ -104,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "8de3edb4560643922fe44e9c357985f64c3951c1",
+  "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821",
   "publishConfig": {
     "access": "public"
   },

package/src/app/Scaffold.tsx

@@ -23,6 +23,11 @@ export interface ScaffoldProps {
      */
     logo?: string;
 
+    /**
+     * If true, the main content will be padded in large layouts. Defaults to true.
+     */
+    padding?: boolean;
+
     className?: string;
 
     style?: React.CSSProperties;
@@ -47,7 +52,8 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             autoOpenDrawer,
             logo,
             className,
-            style
+            style,
+            padding = true
         } = props;
 
         const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
@@ -116,10 +122,14 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                     <main
                         className="flex flex-col flex-grow overflow-auto">
+
                         {hasAppBar && <DrawerHeader/>}
+
                         <div
-                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1", {
-                                "lg:mt-4": !hasAppBar
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
+                                "lg:mt-4": !hasAppBar,
+                                "mt-1 lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid": padding,
+                                "border-t": hasAppBar && !padding,
                             })}>
 
                             <ErrorBoundary>

package/src/components/ArrayContainer.tsx

@@ -37,7 +37,12 @@ export interface ArrayContainerProps<T> {
     disabled?: boolean;
     size?: "small" | "medium";
     onInternalIdAdded?: (id: number) => void;
+    /**
+     * @deprecated Use `canAddElements` instead
+     */
     includeAddButton?: boolean;
+    canAddElements?: boolean;
+    sortable?: boolean;
     newDefaultEntry: T;
     onValueChange: (value: T[]) => void,
     className?: string;
@@ -66,7 +71,9 @@ export function ArrayContainer<T>({
                                       buildEntry,
                                       size = "medium",
                                       onInternalIdAdded,
-                                      includeAddButton,
+                                      includeAddButton: deprecatedIncludeAddButton,
+                                      canAddElements: canAddElementsProp = true,
+                                      sortable = true,
                                       newDefaultEntry,
                                       onValueChange,
                                       className,
@@ -74,6 +81,9 @@ export function ArrayContainer<T>({
                                       max = Infinity
                                   }: ArrayContainerProps<T>) {
 
+    const canAddElements = (canAddElementsProp || canAddElementsProp === undefined)
+        && (deprecatedIncludeAddButton === undefined || deprecatedIncludeAddButton);
+
     const hasValue = value && Array.isArray(value) && value.length > 0;
 
     // Used to track the ids that have displayed the initial show animation
@@ -193,7 +203,8 @@ export function ArrayContainer<T>({
                                    storedProps={itemCustomPropsRef.current[internalId]}
                                    updateItemCustomProps={updateItemCustomProps}
                                    addInIndex={addInIndex}
-                                   includeAddButton={includeAddButton}
+                                   canAddElements={canAddElements}
+                                   sortable={sortable}
                                />
                            );
                        }}
@@ -208,7 +219,7 @@ export function ArrayContainer<T>({
                                 <Draggable
                                     key={`array_field_${internalId}`}
                                     draggableId={`array_field_${internalId}`}
-                                    isDragDisabled={disabled}
+                                    isDragDisabled={disabled || !sortable}
                                     index={index}>
                                     {(provided, snapshot) => (
                                         <ArrayContainerItem
@@ -224,7 +235,8 @@ export function ArrayContainer<T>({
                                             storedProps={itemCustomPropsRef.current[internalId]}
                                             updateItemCustomProps={updateItemCustomProps}
                                             addInIndex={addInIndex}
-                                            includeAddButton={includeAddButton}
+                                            canAddElements={canAddElements}
+                                            sortable={sortable}
                                         />
                                     )}
                                 </Draggable>
@@ -233,7 +245,7 @@ export function ArrayContainer<T>({
 
                         {droppableProvided.placeholder}
 
-                        {includeAddButton && (
+                        {canAddElements && (
                             <div className="my-4 justify-center text-left">
                                 <Button
                                     variant={"text"}
@@ -263,7 +275,8 @@ type ArrayContainerItemProps = {
     remove: (index: number) => void,
     copy: (index: number) => void,
     addInIndex?: (index: number) => void,
-    includeAddButton?: boolean,
+    canAddElements?: boolean,
+    sortable: boolean,
     isDragging: boolean,
     storedProps?: object,
     updateItemCustomProps: (internalId: number, props: object) => void
@@ -278,7 +291,8 @@ export function ArrayContainerItem({
                                        buildEntry,
                                        remove,
                                        addInIndex,
-                                       includeAddButton,
+                                       canAddElements,
+                                       sortable,
                                        copy,
                                        isDragging,
                                        storedProps,
@@ -311,7 +325,8 @@ export function ArrayContainerItem({
                               index={index}
                               provided={provided}
                               addInIndex={addInIndex}
-                              includeAddButton={includeAddButton}
+                              canAddElements={canAddElements}
+                              sortable={sortable}
                               copy={copy}/>
         </div>
     </div>;
@@ -324,7 +339,8 @@ export function ArrayItemOptions({
                                      index,
                                      provided,
                                      copy,
-                                     includeAddButton,
+                                     canAddElements,
+                                     sortable,
                                      addInIndex
                                  }: {
     direction?: "row" | "column",
@@ -333,7 +349,8 @@ export function ArrayItemOptions({
     index: number,
     provided: any,
     copy: (index: number) => void,
-    includeAddButton?: boolean,
+    sortable: boolean,
+    canAddElements?: boolean,
     addInIndex?: (index: number) => void
 }) {
 
@@ -349,10 +366,10 @@ export function ArrayItemOptions({
             delayDuration={400}
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
-            title="Drag to move. Click for more options">
+            title={!disabled && sortable ? "Drag to move. Click for more options" : undefined}>
             <IconButton
                 size="small"
-                disabled={disabled}
+                disabled={disabled || !canAddElements}
                 onClick={(e) => {
                     e.preventDefault();
                     setMenuOpen(true);
@@ -360,7 +377,7 @@ export function ArrayItemOptions({
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
-                className={`cursor-${disabled ? "inherit" : "grab"}`}>
+                className={disabled || !sortable ? "cursor-inherit" : "cursor-grab"}>
                 <HandleIcon/>
             </IconButton>
 
@@ -384,20 +401,20 @@ export function ArrayItemOptions({
                     Copy
                 </MenuItem>
 
-                {includeAddButton && addInIndex && <MenuItem dense
-                                                             onClick={() => {
-                                                                 setMenuOpen(false);
-                                                                 addInIndex(index);
-                                                             }}>
+                {addInIndex && <MenuItem dense
+                                         onClick={() => {
+                                             setMenuOpen(false);
+                                             addInIndex(index);
+                                         }}>
                     <KeyboardArrowUpIcon size={"small"}/>
                     Add on top
                 </MenuItem>}
 
-                {includeAddButton && addInIndex && <MenuItem dense
-                                                             onClick={() => {
-                                                                 setMenuOpen(false);
-                                                                 addInIndex(index + 1);
-                                                             }}>
+                {addInIndex && <MenuItem dense
+                                         onClick={() => {
+                                             setMenuOpen(false);
+                                             addInIndex(index + 1);
+                                         }}>
                     <KeyboardArrowDownIcon size={"small"}/>
                     Add below
                 </MenuItem>}

package/src/components/DeleteEntityDialog.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
+    useAuthController,
     useCustomizationController,
     useDataSource,
     useFireCMSContext,
@@ -34,7 +35,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                       onMultipleEntitiesDelete,
                                                                       path
                                                                   }: DeleteEntityDialogProps<M>) {
-
+    const authController = useAuthController();
     const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
@@ -50,7 +51,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -165,19 +165,21 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
             {!hideId && size !== "xs" && (
                 <div
-                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center flex items-center justify-center gap-1"
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-                    {hasDraft && <Tooltip title={"Unsaved changes"} className={"inline"}>
+                    {hasDraft && <Tooltip title={"Local unsaved changes"} className={"inline"}>
                         <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
                             <EditIcon size={12}/>
                         </Chip>
                     </Tooltip>}
-                    {entity
-                        ? entity.id
-                        : <Skeleton/>
-                    }
+                    <span className="min-w-0 truncate text-center">
+                        {entity
+                            ? entity.id
+                            : <Skeleton/>
+                        }
+                    </span>
                 </div>
             )}
 

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -21,7 +21,7 @@ import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
-import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
+import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
@@ -107,6 +107,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 }) {
 
     const fireCMSContext = useFireCMSContext();
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     const [savingError, setSavingError] = React.useState<any>();
@@ -121,7 +122,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             path,
             values: entity?.values,
             entityId,
-            propertyConfigs: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController
         })
         : undefined;
 
@@ -273,6 +275,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         formex,
         status: "existing",
         openEntityMode: "side_panel",
+        disabled: false,
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);