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

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
-import equal from "react-fast-compare"
 
 import * as Portal from "@radix-ui/react-portal";
 
@@ -19,20 +18,19 @@ import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
 import { ElementResizeListener } from "./ElementResizeListener";
-import { ErrorView } from "../../../ErrorView";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
-import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
-import { PropertyFieldBinding } from "../../../../form";
-import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
+import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
+import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
-    entity: Entity<M>;
     customFieldValidator?: CustomFieldValidator;
     path: string;
+    entityId: string;
     tableKey: string;
     propertyKey?: Extract<keyof M, string>;
-    collection?: EntityCollection<M>;
+    collection?: EntityCollection<any>;
     cellRect?: DOMRect;
     open: boolean;
     onClose: () => void;
@@ -46,13 +44,54 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
     if (!props.open) return null;
-    return <PopupFormFieldInternal {...props} />;
+    return <PopupFormFieldLoading {...props} />;
 
 }
 
+export function PopupFormFieldLoading<M extends Record<string, any>>({
+                                                                         tableKey,
+                                                                         entityId,
+                                                                         customFieldValidator,
+                                                                         propertyKey,
+                                                                         collection: inputCollection,
+                                                                         path,
+                                                                         cellRect,
+                                                                         open,
+                                                                         onClose,
+                                                                         onCellValueChange,
+                                                                         container
+                                                                     }: PopupFormFieldProps<M>) {
+    const dataSource = useDataSource();
+    const [entity, setEntity] = useState<Entity<M> | undefined>(undefined);
+    useEffect(() => {
+        if (entityId && inputCollection) {
+            dataSource.fetchEntity({
+                path,
+                entityId,
+                collection: inputCollection
+            }).then(setEntity);
+        }
+    }, [entityId, inputCollection]);
+
+    if (!entity) return null;
+    return <PopupFormFieldInternal {...{
+        tableKey,
+        entityId,
+        customFieldValidator,
+        propertyKey,
+        collection: inputCollection,
+        path,
+        cellRect,
+        open,
+        onClose,
+        onCellValueChange,
+        container
+    }} entity={entity}/>;
+}
+
 export function PopupFormFieldInternal<M extends Record<string, any>>({
                                                                           tableKey,
-                                                                          entity: entityProp,
+                                                                          entityId,
                                                                           customFieldValidator,
                                                                           propertyKey,
                                                                           collection: inputCollection,
@@ -61,10 +100,12 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                                                                           open,
                                                                           onClose,
                                                                           onCellValueChange,
-                                                                          container
-                                                                      }: PopupFormFieldProps<M>) {
+                                                                          container,
+                                                                          entity
+                                                                      }: PopupFormFieldProps<M> & {
+    entity?: Entity<M>
+}) {
 
-    // const dataSource = useDataSource();
     const fireCMSContext = useFireCMSContext();
     const customizationController = useCustomizationController();
 
@@ -74,34 +115,13 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         y: number
     }>();
 
-    const entityId = entityProp.id;
-    const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
-    // useEffect(() => {
-    //     if (entityId && inputCollection) {
-    //         return dataSource.listenEntity?.({
-    //             path,
-    //             entityId,
-    //             collection: inputCollection,
-    //             onUpdate: (e) => {
-    //                 setEntity(e);
-    //                 setInternalValue(e?.values);
-    //             }
-    //         });
-    //     } else {
-    //         return () => {
-    //         };
-    //     }
-    // }, [dataSource, entityId, inputCollection, path, open]);
-
-    const [internalValue, setInternalValue] = useState<EntityValues<M> | undefined>(entity?.values);
-
     const collection: ResolvedEntityCollection<M> | undefined = inputCollection
         ? resolveCollection<M>({
             collection: inputCollection,
             path,
-            values: internalValue,
+            values: entity?.values,
             entityId,
-            fields: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs
         })
         : undefined;
 
@@ -214,46 +234,32 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         return Promise.resolve();
     };
 
-    if (!entity)
-        return <></>;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const formex = useCreateFormex<M>({
         initialValues: (entity?.values ?? {}) as EntityValues<M>,
         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;
-                });
+                .catch(yupToFormErrors);
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
             saveValue(values)
-                .then(() => onClose())
+                .then(() => {
+                    formex.resetForm({
+                        values: values
+                    })
+                    onClose();
+                })
                 .finally(() => actions.setSubmitting(false));
         }
     });
 
-    const { values, isSubmitting, setFieldValue, handleSubmit } = formex;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        if (!equal(values, internalValue)) {
-            setInternalValue(values);
-        }
-    }, [values]);
-
-    if (!entity)
-        return <ErrorView
-            error={"PopupFormField misconfiguration"}/>;
-
-    if (!collection)
-        return <></>;
+    const {
+        values,
+        isSubmitting,
+        setFieldValue,
+        handleSubmit
+    } = formex;
 
     const disabled = isSubmitting;
 
@@ -264,10 +270,12 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         path,
         setFieldValue,
         save: saveValue,
-        formex
+        formex,
+        status: "existing",
+        openEntityMode: "side_panel",
     };
 
-    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
+    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);
     const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
         ? {
             propertyKey: propertyKey as string,
@@ -285,7 +293,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     let internalForm = <>
         <div
             key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
-            className="w-[560px] max-w-full max-h-[85vh]">
+            className="w-[700px] max-w-full max-h-[85vh]">
             <form
                 onSubmit={handleSubmit}
                 noValidate>
@@ -320,10 +328,6 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     const plugins = customizationController.plugins;
     if (plugins) {
-        // const formController: FormContext<M> = {
-        //     values,
-        //     setFieldValue
-        // }
         plugins.forEach((plugin: FireCMSPlugin) => {
             if (plugin.form?.provider) {
                 internalForm = (
@@ -343,7 +347,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         });
     }
     const form = <div
-        className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+        className={`text-surface-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-surface-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
 
         {internalForm}
 
@@ -360,7 +364,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             style={{
                 boxShadow: "0 0 0 2px rgba(128,128,128,0.2)",
             }}
-            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-gray-950 ${
+            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${
                 !open ? "invisible" : "visible"
             } cursor-grab overflow-visible`}
             ref={draggableRef}>
@@ -373,7 +377,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                 {form}
 
                 <div
-                    className="absolute -top-3.5 -right-3.5 bg-gray-500 rounded-full"
+                    className="absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full"
                     style={{
                         width: "32px",
                         height: "32px"
@@ -384,7 +388,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                             event.stopPropagation();
                             onClose();
                         }}>
-                        <ClearIcon className="text-white"
+                        <CloseIcon className="text-white"
                                    size={"small"}/>
                     </IconButton>
                 </div>

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
@@ -98,6 +104,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>;
 
 /**
@@ -130,6 +141,7 @@ export const EntityCollectionView = React.memo(
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
+                                                                     updateUrl,
                                                                      ...collectionProp
                                                                  }: EntityCollectionViewProps<M>
     ) {
@@ -146,11 +158,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 +209,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 +231,21 @@ 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,
+                sideEntityController,
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
+                entityId: clickedEntity.id
             });
+
         }, [unselectNavigatedEntity, sideEntityController]);
 
         const onNewClick = useCallback(() => {
@@ -232,12 +254,15 @@ 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,
+                sideEntityController,
+                navigation,
+                onClose: unselectNavigatedEntity
+            })
         }, [fullPath, sideEntityController]);
 
         const onMultipleDeleteClick = () => {
@@ -323,7 +348,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 +374,11 @@ export const EntityCollectionView = React.memo(
 
         };
 
-        const resolvedFullPath = navigation.resolveAliasesFrom(fullPath);
+        const resolvedFullPath = navigation.resolveIdsFrom(fullPath);
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            fields: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
@@ -374,7 +399,7 @@ export const EntityCollectionView = React.memo(
                 path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
-                fields: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs
             });
         }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
@@ -393,13 +418,15 @@ 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,
+                                        navigation,
+                                        sideEntityController
+                                    })
                                 }}>
                             {subcollection.name}
                         </Button>
@@ -422,7 +449,7 @@ export const EntityCollectionView = React.memo(
                                         <ReferencePreview
                                             key={reference.path + "/" + reference.id}
                                             reference={reference}
-                                            size={"smallest"}/>
+                                            size={"small"}/>
                                     );
                                 })}
                             </div>
@@ -458,7 +485,7 @@ export const EntityCollectionView = React.memo(
             if (deleteEnabled)
                 actions.push(deleteEntityAction);
             if (customEntityActions)
-                actions.push(...customEntityActions);
+                return mergeEntityActions(actions, customEntityActions);
             return actions;
         };
 
@@ -482,7 +509,7 @@ export const EntityCollectionView = React.memo(
             frozen?: boolean
         }) => {
 
-            const isSelected = usedSelectionController.selectedEntities.map(e => e.id).includes(entity.id);
+            const isSelected = Boolean(usedSelectionController.selectedEntities.find(e => e.id == entity.id && e.path == entity.path));
 
             const actions = getActionsForEntity({
                 entity,
@@ -505,6 +532,7 @@ export const EntityCollectionView = React.memo(
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
                     selectionController={usedSelectionController}
+                    openEntityMode={openEntityMode}
                 />
             );
 
@@ -538,7 +566,7 @@ export const EntityCollectionView = React.memo(
             </div>}
         >
 
-            {collection.description && <div className="m-4 text-gray-900 dark:text-white">
+            {collection.description && <div className="m-4 text-surface-900 dark:text-white">
                 <Markdown source={collection.description}/>
             </div>}
 
@@ -617,6 +645,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
@@ -662,16 +692,17 @@ export const EntityCollectionView = React.memo(
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
                         collection={collection}/>}
+                    openEntityMode={openEntityMode}
                 />
 
                 {popupCell && <PopupFormField
-                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entity?.id}`}
+                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`}
                     open={Boolean(popupCell)}
                     onClose={onPopupClose}
                     cellRect={popupCell?.cellRect}
                     propertyKey={popupCell?.propertyKey}
                     collection={collection}
-                    entity={popupCell.entity}
+                    entityId={popupCell.entityId}
                     tableKey={tableKey.current}
                     customFieldValidator={uniqueFieldValidator}
                     path={resolvedFullPath}
@@ -692,7 +723,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 +740,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 +765,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)
@@ -780,11 +812,14 @@ function EntityIdHeaderWidget({
     collection: EntityCollection,
     path: 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}>
@@ -799,19 +834,23 @@ function EntityIdHeaderWidget({
                         <SearchIcon size={"small"}/>
                     </IconButton>
                 }>
-                <div className={cls("my-2 rounded-lg bg-gray-50 dark:bg-gray-950 text-gray-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,
+                                  sideEntityController,
+                                  navigation
+                              })
                           }}
                           className={"w-96 max-w-full"}>
 
@@ -824,7 +863,7 @@ function EntityIdHeaderWidget({
                                     setSearchString(e.target.value);
                                 }}
                                 value={searchString}
-                                className={"rounded-lg bg-white dark:bg-gray-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
                             <Button variant={"text"}
                                     disabled={!(searchString.trim())}
                                     type={"submit"}
@@ -838,12 +877,14 @@ function EntityIdHeaderWidget({
                                               hover={true}
                                               onClick={() => {
                                                   setOpenPopup(false);
-                                                  sideEntityController.open({
+                                                  navigateToEntity({
+                                                      openEntityMode,
+                                                      collection,
                                                       entityId: id,
                                                       path,
-                                                      collection,
-                                                      updateUrl: true
-                                                  });
+                                                      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}
         </>