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

package/src/hooks/useBuildNavigationController.tsx

@@ -9,6 +9,7 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    FireCMSPlugin,
     NavigationBlocker,
     NavigationController,
     PermissionsBuilder,
@@ -43,15 +44,7 @@ export type BuildNavigationContextProps<EC extends EntityCollection, USER extend
     viewsOrder?: string[];
     userConfigPersistence?: UserConfigurationPersistence;
     dataSourceDelegate: DataSourceDelegate;
-    /**
-     * Use this method to inject collections to the CMS.
-     * You receive the current collections as a parameter, and you can return
-     * a new list of collections.
-     * @see {@link joinCollectionLists}
-     * @param collections
-     */
-    injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
-
+    plugins?: FireCMSPlugin[];
     /**
      * If true, the navigation logic will not be updated until this flag is false
      */
@@ -68,9 +61,9 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         views: viewsProp,
         adminViews: adminViewsProp,
         viewsOrder,
+        plugins,
         userConfigPersistence,
         dataSourceDelegate,
-        injectCollections,
         disabled
     } = props;
 
@@ -203,7 +196,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
-                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections),
+                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins),
                     resolveCMSViews(viewsProp, authController, dataSourceDelegate),
                     resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
                 ]
@@ -250,8 +243,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         disabled,
         viewsProp,
         adminViewsProp,
-        computeTopNavigation,
-        injectCollections
+        computeTopNavigation
     ]);
 
     useEffect(() => {
@@ -291,6 +283,16 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     }, [userConfigPersistence]);
 
+    const getCollectionById = useCallback((id: string): EC | undefined => {
+        const collections = collectionsRef.current;
+        if (collections === undefined)
+            throw Error("getCollectionById: Collections have not been initialised yet");
+        const collection: EntityCollection | undefined = collections.find(c => c.id === id);
+        if (!collection)
+            return undefined;
+        return collection as EC;
+    }, []);
+
     const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
 
         const collections = collectionsRef.current;
@@ -398,6 +400,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         baseCollectionPath,
         initialised,
         getCollection,
+        getCollectionById,
         getCollectionFromPaths,
         getCollectionFromIds,
         isUrlCollectionPath,
@@ -410,6 +413,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         getParentCollectionIds,
         convertIdsToPaths,
         navigate,
+        plugins
     };
 }
 
@@ -436,11 +440,24 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
+function applyPluginModifyCollection(resolvedCollections: EntityCollection[], modifyCollection: (collection: EntityCollection) => EntityCollection) {
+    return resolvedCollections.map((collection: EntityCollection): EntityCollection => {
+        const modifiedCollection = modifyCollection(collection);
+        if (modifiedCollection.subcollections) {
+            return {
+                ...modifiedCollection,
+                subcollections: applyPluginModifyCollection(modifiedCollection.subcollections, modifyCollection)
+            } satisfies EntityCollection;
+        }
+        return modifiedCollection;
+    });
+}
+
 async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
                                   collectionPermissions: PermissionsBuilder | undefined,
                                   authController: AuthController,
                                   dataSource: DataSourceDelegate,
-                                  injectCollections?: (collections: EntityCollection[]) => EntityCollection[]): Promise<EntityCollection[]> {
+                                  plugins: FireCMSPlugin[] | undefined): Promise<EntityCollection[]> {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({
@@ -452,8 +469,16 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
         resolvedCollections = collections;
     }
 
-    if (injectCollections) {
-        resolvedCollections = injectCollections(resolvedCollections ?? []);
+    if (plugins) {
+        for (const plugin of plugins) {
+            if (plugin.collection?.modifyCollection) {
+                resolvedCollections = applyPluginModifyCollection(resolvedCollections, plugin.collection.modifyCollection);
+            }
+
+            if (plugin.collection?.injectCollections) {
+                resolvedCollections = plugin.collection.injectCollections(resolvedCollections ?? []);
+            }
+        }
     }
 
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
@@ -528,7 +553,7 @@ function useCustomBlocker(): NavigationBlocker {
             return shouldBlock;
         });
     } catch (e) {
-        console.warn("Blocker not available, navigation will not be blocked");
+        // console.warn("Blocker not available, navigation will not be blocked");
     }
 
     const updateBlockListener = (path: string, block: boolean, basePath?: string) => {

package/src/hooks/useFireCMSContext.tsx

@@ -67,33 +67,3 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
 
     return fireCMSContextRef.current;
 }
-
-// export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
-//
-//     const authController = useAuthController<USER, AuthControllerType>();
-//     const sideDialogsController = useSideDialogsController();
-//     const sideEntityController = useSideEntityController();
-//     const navigation = useNavigationController();
-//     const dataSource = useDataSource();
-//     const storageSource = useStorageSource();
-//     const snackbarController = useSnackbarController();
-//     const userConfigPersistence = useUserConfigurationPersistence();
-//     const dialogsController = useDialogsController();
-//     const customizationController = useCustomizationController();
-//     const analyticsController = useAnalyticsController();
-//
-//     return {
-//         authController,
-//         sideDialogsController,
-//         sideEntityController,
-//         navigation,
-//         dataSource,
-//         storageSource,
-//         snackbarController,
-//         userConfigPersistence,
-//         dialogsController,
-//         customizationController,
-//         analyticsController
-//     };
-//
-// };

package/src/internal/useBuildDataSource.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import {
+    AuthController,
     DataSource,
     DataSourceDelegate,
     DeleteEntityProps,
@@ -27,11 +28,13 @@ import { resolveCollection, updateDateAutoValues } from "../util";
 export function useBuildDataSource({
                                        delegate,
                                        propertyConfigs,
-                                       navigationController
+                                       navigationController,
+                                       authController
                                    }: {
     delegate: DataSourceDelegate,
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
+    authController: AuthController;
 }): DataSource {
 
     return {
@@ -209,26 +212,27 @@ export function useBuildDataSource({
                     collection,
                     path,
                     entityId,
-                    propertyConfigs: propertyConfigs
+                    propertyConfigs: propertyConfigs,
+                    authController
                 })
                 : undefined;
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = usedDelegate.cmsToDelegateModel(
+            const delegateValues = usedDelegate.cmsToDelegateModel(
                 values,
             );
 
             const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
-                        inputValues: firestoreValues,
+                        inputValues: delegateValues,
                         properties,
                         status,
                         timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
                         setDateToMidnight: usedDelegate.setDateToMidnight
                     })
-                : firestoreValues;
+                : delegateValues;
 
             return usedDelegate.saveEntity({
                 path,

package/src/internal/useBuildSideEntityController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import {
+    AuthController,
     CustomizationController,
     EntityCollection,
     EntitySidePanelProps,
@@ -20,18 +21,19 @@ import {
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useCustomizationController, useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
+import { JSON_TAB_VALUE } from "../core/EntityEditView";
 
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
 
-export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string {
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController, authController: AuthController): string {
     if (small) return CONTAINER_FULL_WIDTH;
 
     const {
         selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
 
-    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
 
     let resolvedWidth: string | undefined;
     if (props.width) {
@@ -48,21 +50,22 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         } else if (!props.collection) {
             return FORM_CONTAINER_WIDTH;
         } else {
-            return calculateCollectionDesiredWidth(props.collection);
+            return calculateCollectionDesiredWidth(props.collection, authController);
         }
     }
 }
 
 const collectionViewWidthCache: { [key: string]: string } = {};
 
-function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>, authController: AuthController): string {
     if (collectionViewWidthCache[collection.id]) {
         return collectionViewWidthCache[collection.id];
     }
     const resolvedCollection = resolveCollection({
         collection,
         path: "__ignored",
-        ignoreMissingFields: true
+        ignoreMissingFields: true,
+        authController
     });
 
     let result = FORM_CONTAINER_WIDTH
@@ -97,7 +100,9 @@ function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: numbe
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
-                                             sideDialogsController: SideDialogsController): SideEntityController => {
+                                             sideDialogsController: SideDialogsController,
+                                             authController: AuthController
+): SideEntityController => {
 
     const location = useLocation();
     const initialised = useRef<boolean>(false);
@@ -105,7 +110,6 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
     const smallLayout = !useLargeLayout();
 
-    // only on initialisation, create panels from URL
     useEffect(() => {
 
         const newFlag = location.hash === `#${NEW_URL_HASH}`;
@@ -118,9 +122,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const props = panelsFromUrl[i];
                     if (i === 0)
-                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController));
                     else
-                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController))
+                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController))
                 }
             }
             initialised.current = true;
@@ -140,7 +144,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                     return;
                 }
                 const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
-                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController);
                 const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : undefined;
                 if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
                     sideDialogsController.replace(panelProps);
@@ -153,7 +157,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     useEffect(() => {
         const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
             if (sidePanelProps.additional) {
-                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController);
             }
             return sidePanelProps;
         });
@@ -186,10 +190,11 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 navigation.buildUrlCollectionPath,
                 navigation.resolveIdsFrom,
                 smallLayout,
-                customizationController
+                customizationController,
+                authController
             ));
 
-    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, authController.user]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -197,9 +202,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController));
 
-    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout, authController.user]);
 
     return {
         close,
@@ -228,6 +233,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
         if (navigationEntry.type === "entity") {
             sidePanel = {
                 path: navigationEntry.path,
+                // fullIdPath: navigationEntry.path,
                 entityId: navigationEntry.entityId,
                 copy: false,
                 width: navigationEntry.parentCollection?.sideDialogWidth
@@ -249,6 +255,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     if (newFlag) {
         sidePanel = {
             path: lastCollectionPath,
+            // fullIdPath: lastCollectionPath,
             copy: false
         }
     }
@@ -260,23 +267,22 @@ const propsToSidePanel = (props: EntitySidePanelProps,
                           buildUrlCollectionPath: (path: string) => string,
                           resolveIdsFrom: (pathWithAliases: string) => string,
                           smallLayout: boolean,
-                          customizationController: CustomizationController): SideDialogPanelProps => {
+                          customizationController: CustomizationController,
+                          authController: AuthController
+): SideDialogPanelProps => {
 
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
     const newPath = props.entityId
         ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}#${SIDE_URL_HASH}`)
         : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-    const resolvedPath = resolveIdsFrom(props.path);
 
     const resolvedPanelProps: EntitySidePanelProps<any> = {
         ...props,
-        path: resolvedPath,
         formProps: props.formProps
     };
 
-    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
-
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController, authController);
     return {
         key: `${props.path}/${props.entityId}`,
         component: <EntitySidePanel {...resolvedPanelProps}/>,

package/src/preview/PropertyPreview.tsx

@@ -13,7 +13,7 @@ import {
 import { resolveProperty } from "../util";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -37,6 +37,7 @@ import { ErrorView } from "../components";
  */
 export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     let content: React.ReactNode | any;
@@ -53,7 +54,8 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (property === null) {

package/src/preview/components/ImagePreview.tsx

@@ -62,7 +62,7 @@ export function ImagePreview({
                     title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e) => {
                             e.stopPropagation();
                             e.preventDefault();
@@ -81,7 +81,7 @@ export function ImagePreview({
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
                         <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}

package/src/preview/components/ReferencePreview.tsx

@@ -141,7 +141,7 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
         );
     }
     return <EntityPreview size={size}
-                          previewProperties={previewProperties}
+                          previewKeys={previewProperties}
                           disabled={disabled}
                           entity={usedEntity}
                           collection={collection}

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorBoundary } from "../../components";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { resolveArrayProperty } from "../../util";
@@ -15,12 +15,13 @@ export function ArrayOfMapsPreview({
                                        size,
                                        // entity
                                    }: PropertyPreviewProps<Record<string, any>[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {
@@ -36,7 +37,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const previewProperties: string[] | undefined = mapProperty.previewKeys;
 
     if (!values) return null;
 

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,6 +1,6 @@
 import { ResolvedReferenceProperty } from "../../types";
 import { resolveArrayProperty } from "../../util";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -13,12 +13,13 @@ export function ArrayOfReferencesPreview({
                                              property: inputProperty,
                                              size
                                          }: PropertyPreviewProps<any[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
 
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "../../components";
@@ -19,11 +19,13 @@ export function ArrayOfStorageComponentsPreview({
                                                     size
                                                 }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -3,7 +3,7 @@ import { ResolvedStringProperty } from "../../types";
 
 import { resolveArrayProperty } from "../../util";
 import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -16,12 +16,13 @@ export function ArrayOfStringsPreview({
                                           // entity,
                                           size
                                       }: PropertyPreviewProps<string[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@firecms/ui";
@@ -19,11 +19,13 @@ export function ArrayOneOfPreview({
                                       // entity
                                   }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (property?.dataType !== "array")

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@firecms/ui";
@@ -19,11 +19,13 @@ export function ArrayPropertyPreview({
                                          size
                                      }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (!property.of) {

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -128,7 +128,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {childValue && <Typography>
+                            {childValue && typeof childValue !== "object" && <Typography>
                                 <ErrorBoundary>
                                     {childValue.toString()}
                                 </ErrorBoundary>

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -46,7 +46,7 @@ export function SkeletonPropertyComponent({
                 content = <>{arrayProperty.of.map((p, i) => renderGenericArrayCell(p, i))} </>;
             } else {
                 if (arrayProperty.of.dataType === "map" && arrayProperty.of.properties) {
-                    content = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewProperties);
+                    content = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewKeys);
                 } else if (arrayProperty.of.dataType === "string") {
                     if (arrayProperty.of.enumValues) {
                         content = renderArrayEnumTableCell();

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -45,7 +45,7 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cls("overflow-x-scroll", size === "small" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>