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

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -72,6 +72,21 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     onColumnResize?(params: OnColumnResizeParams): void;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Callback when the selected size of the table is changed
      */
@@ -90,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -136,6 +151,8 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     textSearchLoading?: boolean;
 
     enablePopupIcon: boolean;
+
+    openEntityMode?: "side_panel" | "full_screen";
 };
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/components/EntityCollectionTable/index.tsx

@@ -8,5 +8,5 @@ export type {
 
 export * from "./PropertyTableCell";
 export * from "./EntityCollectionRowActions";
-export * from "../common/useDataSourceEntityCollectionTableController";
+export * from "../common/useDataSourceTableController";
 export * from "./column_utils";

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -56,7 +56,7 @@ export function CollectionTableToolbar({
             <Select
                 value={size as string}
                 className="w-16 h-10"
-                size={"medium"}
+                size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
             >
@@ -87,9 +87,9 @@ export function CollectionTableToolbar({
 
             <div className="flex items-center gap-2">
 
-                {largeLayout && <div className="w-[22px]">
+                {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&
-                        <CircularProgress size={"small"}/>}
+                        <CircularProgress size={"smallest"}/>}
                 </div>}
 
                 {(onTextSearch || onTextSearchClick) &&

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

@@ -20,10 +20,9 @@ import { useWindowSize } from "./useWindowSize";
 import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
-import { PropertyFieldBinding } from "../../../../form";
-import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
+import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
+import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
-import { yupToFormErrors } from "../../../../core/EntityEditView";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
     customFieldValidator?: CustomFieldValidator;
@@ -108,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>();
@@ -122,7 +122,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             path,
             values: entity?.values,
             entityId,
-            propertyConfigs: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController
         })
         : undefined;
 
@@ -240,14 +241,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
                 .then(() => ({}))
-                .catch((e) => {
-                    // const errors: Record<string, string> = {};
-                    // e.inner.forEach((error: any) => {
-                    //     errors[error.path] = error.message;
-                    // });
-                    // return errors;
-                    return yupToFormErrors(e);
-                });
+                .catch(yupToFormErrors);
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
@@ -278,7 +272,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         path,
         setFieldValue,
         save: saveValue,
-        formex
+        formex,
+        status: "existing",
+        openEntityMode: "side_panel",
+        disabled: false,
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -19,7 +19,7 @@ import {
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 
 import {
@@ -28,6 +28,8 @@ import {
     canEditEntity,
     getPropertyInPath,
     mergeDeep,
+    mergeEntityActions,
+    navigateToEntity,
     resolveCollection,
     resolveProperty
 } from "../../util";
@@ -61,6 +63,10 @@ import {
 import { setIn } from "@firecms/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import {
+    COLLECTION_GROUP_PARENT_ID,
+    copyEntityAction,
+    deleteEntityAction,
+    editEntityAction,
     OnCellValueChange,
     OnColumnResizeParams,
     UniqueFieldValidator,
@@ -69,14 +75,14 @@ import {
 } from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
-import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
+import { useScrollRestoration } from "../common/useScrollRestoration";
 
-const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
 
 /**
  * @group Components
@@ -87,6 +93,10 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * It defaults to the collection path if not provided.
      */
     fullPath?: string;
+    /**
+     * Full path using navigation ids.
+     */
+    fullIdPath?: string;
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
@@ -98,6 +108,11 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 
     className?: string;
 
+    /**
+     * If true, this view will store its filter and sorting status in the url params
+     */
+    updateUrl?: boolean;
+
 } & EntityCollection<M>;
 
 /**
@@ -127,17 +142,20 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
                                                                      fullPath: fullPathProp,
+                                                                     fullIdPath,
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
+                                                                     updateUrl,
                                                                      ...collectionProp
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+
         const context = useFireCMSContext();
+        const navigation = useNavigationController();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
-        const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();
@@ -146,11 +164,15 @@ export const EntityCollectionView = React.memo(
 
         const containerRef = React.useRef<HTMLDivElement>(null);
 
+        const scrollRestoration = useScrollRestoration();
+
         const collection = useMemo(() => {
             const userOverride = userConfigPersistence?.getCollectionConfig<M>(fullPath);
             return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
+        const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
         const collectionRef = React.useRef(collection);
         useEffect(() => {
             collectionRef.current = collection;
@@ -193,14 +215,12 @@ export const EntityCollectionView = React.memo(
             setSelectedEntities
         } = usedSelectionController;
 
-        // useEffect(() => {
-        //     setDeleteEntityClicked(undefined);
-        // }, [selectedEntities]);
-
-        const tableController = useDataSourceEntityCollectionTableController<M>({
+        const tableController = useDataSourceTableController<M>({
             fullPath,
             collection,
-            lastDeleteTimestamp
+            lastDeleteTimestamp,
+            scrollRestoration,
+            updateUrl
         });
 
         const tableKey = React.useRef<string>(Math.random().toString(36));
@@ -217,13 +237,22 @@ export const EntityCollectionView = React.memo(
                 path: clickedEntity.path,
                 entityId: clickedEntity.id
             });
-            return sideEntityController.open({
-                entityId: clickedEntity.id,
-                path: clickedEntity.path,
+
+            if (collection) {
+                addRecentId(collection.id, clickedEntity.id);
+            }
+
+            const path = collection?.collectionGroup ? clickedEntity.path : (fullPath ?? clickedEntity.path);
+            navigateToEntity({
+                navigation,
+                path,
+                fullIdPath,
+                sideEntityController,
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
+                entityId: clickedEntity.id
             });
+
         }, [unselectNavigatedEntity, sideEntityController]);
 
         const onNewClick = useCallback(() => {
@@ -232,12 +261,16 @@ export const EntityCollectionView = React.memo(
             analyticsController.onAnalyticsEvent?.("new_entity_click", {
                 path: fullPath
             });
-            sideEntityController.open({
-                path: fullPath,
+            navigateToEntity({
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
-            });
+                entityId: undefined,
+                path: fullPath,
+                fullIdPath,
+                sideEntityController,
+                navigation,
+                onClose: unselectNavigatedEntity
+            })
         }, [fullPath, sideEntityController]);
 
         const onMultipleDeleteClick = () => {
@@ -323,7 +356,7 @@ export const EntityCollectionView = React.memo(
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
 
             const saveProps: SaveEntityProps = {
-                path: fullPath,
+                path: entity.path ?? fullPath,
                 entityId: entity.id,
                 values: updatedValues,
                 previousValues: entity.values,
@@ -349,11 +382,12 @@ export const EntityCollectionView = React.memo(
 
         };
 
-        const resolvedFullPath = navigation.resolveAliasesFrom(fullPath);
+        const resolvedFullPath = navigation.resolveIdsFrom(fullPath);
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            propertyConfigs: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController,
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
@@ -374,7 +408,8 @@ export const EntityCollectionView = React.memo(
                 path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
-                propertyConfigs: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController
             });
         }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
@@ -393,13 +428,16 @@ export const EntityCollectionView = React.memo(
                                 startIcon={<KeyboardTabIcon size={"small"}/>}
                                 onClick={(event: any) => {
                                     event.stopPropagation();
-                                    sideEntityController.open({
-                                        path: fullPath,
-                                        entityId: entity.id,
-                                        selectedSubPath: subcollection.id ?? subcollection.path,
+                                    navigateToEntity({
+                                        openEntityMode,
                                         collection,
-                                        updateUrl: true,
-                                    });
+                                        entityId: entity.id,
+                                        selectedTab: subcollection.id ?? subcollection.path,
+                                        path: fullPath,
+                                        fullIdPath,
+                                        navigation,
+                                        sideEntityController
+                                    })
                                 }}>
                             {subcollection.name}
                         </Button>
@@ -458,7 +496,7 @@ export const EntityCollectionView = React.memo(
             if (deleteEnabled)
                 actions.push(deleteEntityAction);
             if (customEntityActions)
-                actions.push(...customEntityActions);
+                return mergeEntityActions(actions, customEntityActions);
             return actions;
         };
 
@@ -500,11 +538,12 @@ export const EntityCollectionView = React.memo(
                     highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
-                    fullPath={fullPath}
+                    fullPath={fullIdPath ?? fullPath}
                     actions={actions}
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
                     selectionController={usedSelectionController}
+                    openEntityMode={openEntityMode}
                 />
             );
 
@@ -617,6 +656,8 @@ export const EntityCollectionView = React.memo(
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
                     onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
+                    onScroll={tableController.onScroll}
+                    initialScroll={tableController.initialScroll}
                     textSearchLoading={textSearchLoading}
                     textSearchEnabled={textSearchEnabled}
                     actionsStart={<EntityCollectionViewStartActions
@@ -661,7 +702,9 @@ export const EntityCollectionView = React.memo(
                     getIdColumnWidth={getIdColumnWidth}
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
+                        fullIdPath={fullIdPath ?? fullPath}
                         collection={collection}/>}
+                    openEntityMode={openEntityMode}
                 />
 
                 {popupCell && <PopupFormField
@@ -692,7 +735,7 @@ export const EntityCollectionView = React.memo(
             </div>
         );
     }, (a, b) => {
-        return equal(a.fullPath, b.fullPath) &&
+        return equal(a.path, b.path) &&
             equal(a.parentCollectionIds, b.parentCollectionIds) &&
             equal(a.isSubCollection, b.isSubCollection) &&
             equal(a.className, b.className) &&
@@ -709,6 +752,7 @@ export const EntityCollectionView = React.memo(
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
+            equal(a.openEntityMode, b.openEntityMode) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -733,7 +777,7 @@ function EntitiesCount({
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
-    const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
+    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
 
     useEffect(() => {
         if (dataSource.countEntities)
@@ -775,16 +819,22 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
 
 function EntityIdHeaderWidget({
                                   collection,
-                                  path
+                                  path,
+                                  fullIdPath
                               }: {
     collection: EntityCollection,
-    path: string
+    path: string,
+    fullIdPath: string
 }) {
+
+    const navigation = useNavigationController();
     const [openPopup, setOpenPopup] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
     const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
     const sideEntityController = useSideEntityController();
 
+    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
     return (
         <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
@@ -798,19 +848,24 @@ function EntityIdHeaderWidget({
                         <SearchIcon size={"small"}/>
                     </IconButton>
                 }>
-                <div className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                <div
+                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
                     <form noValidate={true}
                           onSubmit={(e) => {
                               e.preventDefault();
                               if (!searchString) return;
                               setOpenPopup(false);
-                              setRecentIds(addRecentId(collection.id, searchString.trim()));
-                              return sideEntityController.open({
-                                  entityId: searchString.trim(),
-                                  path,
+                              const entityId = searchString.trim();
+                              setRecentIds(addRecentId(collection.id, entityId));
+                              navigateToEntity({
+                                  openEntityMode,
                                   collection,
-                                  updateUrl: true
-                              });
+                                  entityId,
+                                  path,
+                                  fullIdPath,
+                                  sideEntityController,
+                                  navigation
+                              })
                           }}
                           className={"w-96 max-w-full"}>
 
@@ -837,12 +892,15 @@ function EntityIdHeaderWidget({
                                               hover={true}
                                               onClick={() => {
                                                   setOpenPopup(false);
-                                                  sideEntityController.open({
+                                                  navigateToEntity({
+                                                      openEntityMode,
+                                                      collection,
                                                       entityId: id,
                                                       path,
-                                                      collection,
-                                                      updateUrl: true
-                                                  });
+                                                      fullIdPath,
+                                                      sideEntityController,
+                                                      navigation
+                                                  })
                                               }}
                                               includeEntityLink={false}
                                               size={"small"}/>

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
+import { canCreateEntity, canDeleteEntity } from "../../util";
 import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
@@ -124,7 +124,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     return (
         <>
-            {actions}
+            <ErrorBoundary>
+                {actions}
+            </ErrorBoundary>
             {multipleDeleteButton}
             {addButton}
         </>

package/src/components/EntityJsonPreview.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+    const preRef = useRef<HTMLPreElement>(null);
+
+    // Global keydown handler
+    // const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    //     // Check for Control (Windows/Linux) or Command (macOS) + "a":
+    //     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+    //         // If our code view is mounted, perform selection
+    //         if (preRef.current) {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //
+    //             const selection = window.getSelection();
+    //             const range = document.createRange();
+    //             range.selectNodeContents(preRef.current);
+    //             if (selection) {
+    //                 selection.removeAllRanges();
+    //                 selection.addRange(range);
+    //             }
+    //         }
+    //     }
+    // }, []);
+
+    // // Attach the global keydown listener when component mounts,
+    // // and remove it when it unmounts.
+    // useEffect(() => {
+    //     document.addEventListener("keydown", handleGlobalKeyDown);
+    //     return () => {
+    //         document.removeEventListener("keydown", handleGlobalKeyDown);
+    //     };
+    // }, [handleGlobalKeyDown]);
+
+    return (
+        <Highlight
+            theme={mode === "dark" ? themes.vsDark : themes.github}
+            code={code}
+            language="json"
+        >
+            {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                    // Bind the ref to our pre element so we can select its contents.
+                    ref={preRef}
+                    style={{
+                        ...style,
+                        backgroundColor: "inherit"
+                    }}
+                    className="max-w-6xl mx-auto p-8 rounded text-sm"
+                >
+          {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} className="text-wrap">
+                  {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} className="word-break" />
+                  ))}
+              </div>
+          ))}
+        </pre>
+            )}
+        </Highlight>
+    );
+}

package/src/components/EntityPreview.tsx

@@ -13,7 +13,12 @@ import {
 } from "../util";
 import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
-import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
+import {
+    useAuthController,
+    useCustomizationController,
+    useNavigationController,
+    useSideEntityController
+} from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 export type EntityPreviewProps = {
@@ -46,6 +51,7 @@ export function EntityPreview({
                                   entity
                               }: EntityPreviewProps) {
 
+    const authController = useAuthController();
     const analyticsController = useAnalyticsController();
     const sideEntityController = useSideEntityController();
     const customizationController = useCustomizationController();
@@ -62,10 +68,11 @@ export function EntityPreview({
         collection,
         path: entity.path,
         values: entity.values,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
+    const listProperties = useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);

package/src/components/EntityView.tsx

@@ -5,6 +5,7 @@ import { resolveCollection } from "../util";
 import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
+import { useAuthController } from "../hooks";
 
 /**
  * @group Components
@@ -24,13 +25,15 @@ export function EntityView<M extends Record<string, any>>(
         className
     }: EntityViewProps<M>) {
 
+    const authController = useAuthController();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
         path,
         entityId: entity.id,
         values: entity.values,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;

package/src/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
 
 export function NotFoundPage() {
@@ -17,7 +17,7 @@ export function NotFoundPage() {
                 </Typography>
                 <Button
                     variant={"text"}
-                    component={ReactLink}
+                    component={Link}
                     to={"/"}>Back to home</Button>
             </div>
         </div>