@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
 
 const EMPTY_ARRAY: any[] = [];
+const DEFAULT_ENTITY_OPEN_MODE = "split";
 
 import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, PartialEntityCollection, SaveEntityProps, ViewMode } from "@rebasepro/types";
 import {
@@ -29,7 +30,8 @@ import {
     useLargeLayout,
     usePermissions,
     useTranslation,
-    useSlot
+    useSlot,
+    IconForView
 } from "@rebasepro/core";
 import { useUserConfigurationPersistence } from "@rebasepro/core";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
@@ -62,15 +64,15 @@ import { mergeDeep } from "@rebasepro/utils";
 import { useCollectionRegistryController, useUrlController, useSideEntityController, useCMSContext } from "../../index";
 import { useBreadcrumbsController } from "../../index";
 
-const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" | "split" = "split";
-
 function getOpenEntityMode(
     viewMode: ViewMode,
     configuredMode?: "side_panel" | "full_screen" | "split"
 ): "side_panel" | "full_screen" | "split" {
     if (configuredMode) return configuredMode;
     if (viewMode === "kanban") return "side_panel";
-    return DEFAULT_ENTITY_OPEN_MODE;
+    if (viewMode === "table" || viewMode === "cards") return "full_screen";
+    // "list" view defaults to split
+    return "split";
 }
 
 /**
@@ -89,7 +91,7 @@ export type EntityCollectionViewProps<M extends Record<string, unknown>> = {
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
     /**
      * Whether this is a subcollection or not.
      */
@@ -144,7 +146,7 @@ export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, unknown>>({
         path: pathProp,
 
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         isSubCollection,
         className,
         updateUrl,
@@ -173,9 +175,10 @@ export const EntityCollectionView = React.memo(
         const scrollRestoration = useScrollRestoration();
 
         const collection = useMemo(() => {
+            const registryCollection = collectionRegistry.getCollection(path) || collectionProp;
             const userOverride = userConfigPersistence?.getCollectionConfig<M>(path);
-            return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
-        }, [collectionProp, path, userConfigPersistence?.getCollectionConfig]);
+            return (userOverride ? mergeDeep(registryCollection, userOverride) : registryCollection) as EntityCollection<M>;
+        }, [collectionProp, path, userConfigPersistence, collectionRegistry]);
 
         const collectionRef = React.useRef(collection);
         useEffect(() => {
@@ -371,6 +374,23 @@ export const EntityCollectionView = React.memo(
             })
         }, [path, sideEntityController]);
 
+        const openNewDocument = useCallback((defaultValues?: Record<string, unknown>) => {
+            const collection = collectionRef.current;
+            analyticsController.onAnalyticsEvent?.("new_entity_click", {
+                path: path
+            });
+            navigateToEntity({
+                openEntityMode,
+                collection,
+                entityId: undefined,
+                defaultValues,
+                path: path,
+                sideEntityController,
+                navigation: urlController,
+                onClose: unselectNavigatedEntity
+            });
+        }, [path, sideEntityController, openEntityMode, urlController, unselectNavigatedEntity]);
+
         const onMultipleDeleteClick = () => {
             analyticsController.onAnalyticsEvent?.("multiple_delete_dialog_open", {
                 path: path
@@ -399,14 +419,14 @@ export const EntityCollectionView = React.memo(
 
         const pluginAddColumnComponents = useSlot("collection.add-column", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection,
             tableController
         });
 
         const pluginToolbarWidgets = useSlot("collection.toolbar", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection: collection,
             tableController: tableController,
             selectionController: usedSelectionController
@@ -414,7 +434,7 @@ export const EntityCollectionView = React.memo(
 
         const pluginEmptyStates = useSlot("collection.empty-state", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection,
             canCreate: canCreateEntities,
             onNewClick
@@ -422,7 +442,7 @@ export const EntityCollectionView = React.memo(
 
         const pluginInsights = useSlot("collection.insights", {
             path,
-            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
             collection
         });
 
@@ -714,9 +734,11 @@ export const EntityCollectionView = React.memo(
         }, [updateLastDeleteTimestamp, usedSelectionController]);
 
         // Update breadcrumb count when count changes
+        const updateCountRef = React.useRef(breadcrumbs.updateCount);
+        updateCountRef.current = breadcrumbs.updateCount;
         useEffect(() => {
-            breadcrumbs.updateCount(path, docsCount);
-        }, [docsCount, path, breadcrumbs.updateCount]);
+            updateCountRef.current(path, docsCount);
+        }, [docsCount, path]);
 
         // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
         const countFetcher = <EntitiesCount
@@ -751,14 +773,14 @@ export const EntityCollectionView = React.memo(
                 path,
                 collection: collection as unknown as EntityCollection,
                 tableController: tableController as unknown as EntityTableController,
-                parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY
+                parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY
             };
             return <>{headerActionContributions.map((s, i) => (
                 <ErrorBoundary key={`header_action_${propertyKey}_${i}`}>
                     <s.Component {...headerSlotProps} {...(s.props ?? {})}/>
                 </ErrorBoundary>
             ))}</>;
-        }, [headerActionContributions, path, parentCollectionIds]);
+        }, [headerActionContributions, path, parentCollectionSlugs]);
 
         const addColumnComponentInternal = pluginAddColumnComponents.length > 0
             ? function () {
@@ -794,13 +816,13 @@ export const EntityCollectionView = React.memo(
                     .forEach(plugin => {
                         plugin.hooks!.onColumnsReorder!({
                             fullPath: path,
-                            parentCollectionIds: parentCollectionIds ?? EMPTY_ARRAY,
+                            parentCollectionSlugs: parentCollectionSlugs ?? EMPTY_ARRAY, parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
                             collection,
                             newPropertiesOrder
                         });
                     });
             }
-        }, [collection, setLocalPropertiesOrder, customizationController, path, parentCollectionIds]);
+        }, [collection, setLocalPropertiesOrder, customizationController, path, parentCollectionSlugs]);
 
         // Popover open state managed at parent level to prevent closing when view changes
         const [viewModePopoverOpen, setViewModePopoverOpen] = useState(false);
@@ -825,7 +847,7 @@ export const EntityCollectionView = React.memo(
         const pluginErrorViews = useSlot("collection.error", {
             path,
             collection,
-            parentCollectionIds,
+            parentCollectionSlugs, parentEntityIds,
             error: tableController.dataLoadingError as Error
         });
         const pluginErrorView = tableController.dataLoadingError && pluginErrorViews.length > 0
@@ -833,7 +855,8 @@ export const EntityCollectionView = React.memo(
             : null;
 
         // Shared empty state — plugin slot takes priority, then default
-        const isFilteredOrSorted = tableController.filterValues !== undefined || tableController.sortBy !== undefined;
+        const isSearching = !!tableController.searchString;
+        const isFilteredOrSorted = tableController.filterValues !== undefined || tableController.sortBy !== undefined || isSearching;
         const emptyComponent = pluginEmptyStates.length > 0
             ? <>{pluginEmptyStates}</>
             : canCreateEntities && !isFilteredOrSorted
@@ -847,16 +870,21 @@ export const EntityCollectionView = React.memo(
                         {t("create_your_first_entry")}
                     </Button>
                 </div>
-                : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>;
+                : <Typography variant={"label"}>
+                    {isSearching
+                        ? t("no_results_search", { search: tableController.searchString ?? "" })
+                        : t("no_results_filter_sort")}
+                </Typography>;
 
         const toolbarNode = (
             <CollectionTableToolbar
                 compact={isCompact}
                 loading={tableController.dataLoading}
                 onTextSearch={tableController.setSearchString}
+                initialSearchText={tableController.searchString}
                 viewModeToggle={viewModeToggleElement}
                 actionsStart={<EntityCollectionViewStartActions
-                    parentCollectionIds={parentCollectionIds ?? EMPTY_ARRAY}
+                    parentCollectionSlugs={parentCollectionSlugs ?? EMPTY_ARRAY} parentEntityIds={parentEntityIds ?? EMPTY_ARRAY}
                     collection={collection}
                     tableController={tableController}
                     path={path}
@@ -864,14 +892,16 @@ export const EntityCollectionView = React.memo(
                     selectionController={usedSelectionController}
                     collectionEntitiesCount={docsCount ?? undefined}
                     resolvedProperties={resolvedCollection.properties}
+                    openNewDocument={openNewDocument}
                     compact={isCompact}/>}
                 actions={
                     <EntityCollectionViewActions
-                        parentCollectionIds={parentCollectionIds ?? EMPTY_ARRAY}
+                        parentCollectionSlugs={parentCollectionSlugs ?? EMPTY_ARRAY} parentEntityIds={parentEntityIds ?? EMPTY_ARRAY}
                         collection={collection}
                         tableController={tableController}
                         onMultipleDeleteClick={onMultipleDeleteClick}
                         onNewClick={onNewClick}
+                        openNewDocument={openNewDocument}
                         path={path}
                         relativePath={collection.slug}
                         selectionController={usedSelectionController}
@@ -889,7 +919,7 @@ export const EntityCollectionView = React.memo(
                 collection={collection}
                 tableController={tableController}
                 fullPath={path}
-                parentCollectionIds={parentCollectionIds}
+                parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                 columnProperty={selectedKanbanProperty}
                 onEntityClick={onEntityClick}
                 selectionController={usedSelectionController}
@@ -987,7 +1017,7 @@ export const EntityCollectionView = React.memo(
                         size={listSize}
                         emptyComponent={emptyComponent}
                         path={path}
-                        parentCollectionIds={parentCollectionIds}
+                        parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                         selectedEntityId={selectedEntityIdProp}
                         selectedTab={selectedTabProp}
                         toolbar={toolbarNode}
@@ -1000,7 +1030,7 @@ export const EntityCollectionView = React.memo(
                                 className={cls(
                                     "flex flex-col w-full",
                                     selectedEntityIdProp === undefined
-                                        ? "max-w-6xl mx-auto px-3 md:px-4 lg-px-6 py-4"
+                                        ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
                                         : ""
                                 )}
                             >
@@ -1020,8 +1050,17 @@ export const EntityCollectionView = React.memo(
                                     </div>
                                 </div>
                                 {pluginInsights.length > 0 && (
-                                    <div className="flex-shrink-0">
-                                        {pluginInsights}
+                                    <div
+                                        className={cls(
+                                            "grid transition-[grid-template-rows] duration-150 ease-out",
+                                            selectedEntityIdProp === undefined
+                                                ? "grid-rows-[1fr]"
+                                                : "grid-rows-[0fr]"
+                                        )}
+                                    >
+                                        <div className="overflow-hidden flex-shrink-0">
+                                            {pluginInsights}
+                                        </div>
                                     </div>
                                 )}
                                 <EntityCollectionListView
@@ -1042,15 +1081,44 @@ export const EntityCollectionView = React.memo(
                         )}
                     </SplitListView>
                 ) : (
-                    <>
+                    <div className="flex flex-col w-full h-full">
                         {toolbarNode}
-                        {pluginInsights.length > 0 && (viewMode === "list" || viewMode === "table") && (
-                            <div className="px-3 md:px-4 lg:px-6 max-w-6xl mx-auto w-full flex-shrink-0">
-                                {pluginInsights}
-                            </div>
-                        )}
-                        {innerView}
-                    </>
+                        <div className="flex-1 flex flex-col overflow-y-auto">
+                            {viewMode === "list" ? (
+                                <div
+                                    className={cls(
+                                        "flex flex-col w-full",
+                                        selectedEntityIdProp === undefined
+                                            ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
+                                            : ""
+                                    )}
+                                >
+                                    <div
+                                        className={cls(
+                                            "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
+                                            selectedEntityIdProp === undefined
+                                                ? "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
+                                                : "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
+                                        )}
+                                    >
+                                        <div className="overflow-hidden flex items-center gap-4">
+                                            <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
+                                                {collection.name}
+                                            </Typography>
+                                        </div>
+                                    </div>
+                                    {pluginInsights.length > 0 && (
+                                        <div className="flex-shrink-0">
+                                            {pluginInsights}
+                                        </div>
+                                    )}
+                                    {innerView}
+                                </div>
+                            ) : (
+                                innerView
+                            )}
+                        </div>
+                    </div>
                 )}
 
                 {popupCell && <PopupFormField
@@ -1082,7 +1150,7 @@ export const EntityCollectionView = React.memo(
         );
     }, (a, b) => {
         return equal(a.path, b.path) &&
-            equal(a.parentCollectionIds, b.parentCollectionIds) &&
+            equal(a.parentCollectionSlugs, b.parentCollectionSlugs) && equal(a.parentEntityIds, b.parentEntityIds) &&
             equal(a.isSubCollection, b.isSubCollection) &&
             equal(a.className, b.className) &&
             equal(a.properties, b.properties) &&
@@ -1099,11 +1167,18 @@ export const EntityCollectionView = React.memo(
             equal(a.openEntityMode, b.openEntityMode) &&
             equal(a.exportable, b.exportable) &&
             equal(a.history, b.history) &&
-            equal(a.forceFilter, b.forceFilter) &&
+            equal(a.fixedFilter, b.fixedFilter) &&
             equal(a.selectedEntityId, b.selectedEntityId) &&
             equal(a.selectedTab, b.selectedTab);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
+/**
+ * Inflight count request deduplication map.
+ * Keyed by `path|filterKey|sortByProperty|sortDir` so that concurrent
+ * callers (e.g. React StrictMode double-mount) share the same promise.
+ */
+const inflightCountRequests = new Map<string, Promise<number>>();
+
 function EntitiesCount({
     path,
     collection,
@@ -1119,52 +1194,71 @@ function EntitiesCount({
 }) {
 
     const dataClient = useData();
-    const navigation = useCollectionRegistryController();
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
-    // v4: use path directly instead of resolveIdsFrom
-    const resolvedPath = path;
+
+    // Use refs for values that should NOT trigger re-fetches
+    const dataClientRef = React.useRef(dataClient);
+    dataClientRef.current = dataClient;
+    const onCountChangeRef = React.useRef(onCountChange);
+    onCountChangeRef.current = onCountChange;
+
+    // Serialize filter to a stable string to avoid re-fetches on object identity changes
+    const filterKey = React.useMemo(() => filter ? JSON.stringify(filter) : "", [filter]);
 
     useEffect(() => {
-        const accessor = dataClient.collection(resolvedPath);
-        if (accessor.count) {
-            if (onCountChange) onCountChange(null);
-
-            // Convert filterValues to PostgREST where clause
-            const whereMap: Record<string, string> = {};
-            if (filter) {
-                Object.entries(filter).forEach(([key, value]) => {
-                    if (value && Array.isArray(value)) {
-                        const [op, val] = value;
-                        const postgrestOp = op === "==" ? "eq" : op === "!=" ? "neq" : op === ">" ? "gt" : op === ">=" ? "gte" : op === "<" ? "lt" : op === "<=" ? "lte" : op === "in" ? "in" : op === "not-in" ? "nin" : op === "array-contains" ? "cs" : op === "array-contains-any" ? "csa" : "eq";
-
-                        let stringVal: string;
-                        if (Array.isArray(val)) {
-                            stringVal = `(${val.join(",")})`;
-                        } else {
-                            stringVal = String(val);
-                        }
-                        whereMap[key] = `${postgrestOp}.${stringVal}`;
-                    }
-                });
-            }
-            const whereParams = Object.keys(whereMap).length > 0 ? whereMap : undefined;
-            const orderByParams = sortByProperty ? `${String(sortByProperty)}:${currentSort}` : undefined;
+        const accessor = dataClientRef.current.collection(path);
+        if (!accessor.count) {
+            onCountChangeRef.current?.(undefined);
+            return;
+        }
 
-            accessor.count({
+        let cancelled = false;
+
+        // Convert filterValues to PostgREST where clause
+        const whereMap: Record<string, string> = {};
+        if (filter) {
+            Object.entries(filter).forEach(([key, value]) => {
+                if (value && Array.isArray(value)) {
+                    const [op, val] = value;
+                    const postgrestOp = op === "==" ? "eq" : op === "!=" ? "neq" : op === ">" ? "gt" : op === ">=" ? "gte" : op === "<" ? "lt" : op === "<=" ? "lte" : op === "in" ? "in" : op === "not-in" ? "nin" : op === "array-contains" ? "cs" : op === "array-contains-any" ? "csa" : "eq";
+
+                    let stringVal: string;
+                    if (Array.isArray(val)) {
+                        stringVal = `(${val.join(",")})`;
+                    } else {
+                        stringVal = String(val);
+                    }
+                    whereMap[key] = `${postgrestOp}.${stringVal}`;
+                }
+            });
+        }
+        const whereParams = Object.keys(whereMap).length > 0 ? whereMap : undefined;
+        const orderByParams = sortByProperty ? `${String(sortByProperty)}:${currentSort}` : undefined;
+
+        // Deduplicate inflight count requests (e.g. React StrictMode double-mount)
+        const cacheKey = `${path}|${filterKey}|${sortByProperty ?? ""}|${currentSort ?? ""}`;
+        let countPromise = inflightCountRequests.get(cacheKey);
+        if (!countPromise) {
+            countPromise = accessor.count({
                 where: whereParams,
                 orderBy: orderByParams
-            }).then((c) => {
-                if (onCountChange) onCountChange(c);
-            }).catch((e) => {
-                console.warn("Error fetching count", e);
-                if (onCountChange) onCountChange(undefined);
             });
-        } else {
-            if (onCountChange) onCountChange(undefined);
+            inflightCountRequests.set(cacheKey, countPromise);
+            // Clean up the inflight entry once resolved/rejected
+            countPromise.finally(() => inflightCountRequests.delete(cacheKey));
         }
-    }, [path, resolvedPath, collection, filter, sortByProperty, currentSort, dataClient]);
+
+        countPromise.then((c) => {
+            if (!cancelled) onCountChangeRef.current?.(c);
+        }).catch((e) => {
+            console.warn("Error fetching count", e);
+            if (!cancelled) onCountChangeRef.current?.(undefined);
+        });
+
+        return () => { cancelled = true; };
+    }, [path, filterKey, sortByProperty, currentSort]);
 
     // Count is now displayed in the breadcrumb bar, this component only fetches and reports
     return null;
@@ -1175,7 +1269,7 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
         const [parentKey, ...childKey] = key.split(".");
         return { properties: { [parentKey]: buildPropertyWidthOverwrite(childKey.join("."), width) } } as PartialEntityCollection;
     }
-    return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
+    return { properties: { [key]: { ui: { columnWidth: width } } } } as PartialEntityCollection;
 }
 
 function EntityIdHeaderWidget({

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -2,7 +2,7 @@
 import type { EntityCollection } from "@rebasepro/types";
 import React, { lazy, Suspense } from "react";
 
-import { useLargeLayout, useTranslation, useSlot } from "@rebasepro/core";
+import { useLargeLayout, useTranslation, useSlot, resolveComponentRef } from "@rebasepro/core";
 import { CollectionActionsProps, EntityTableController, SelectionController } from "@rebasepro/types";
 import { Button, IconButton, Tooltip, Popover, iconSize } from "@rebasepro/ui";
 import { PlusIcon, Trash2Icon, MoreVerticalIcon } from "lucide-react";
@@ -20,7 +20,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, unknown>>
     collection: EntityCollection<M>;
     path: string;
     relativePath: string;
-    parentCollectionIds: string[];
+    parentCollectionSlugs: string[], parentEntityIds: string[];
     selectionEnabled: boolean;
     onNewClick: () => void;
     onMultipleDeleteClick: () => void;
@@ -29,12 +29,13 @@ export type EntityCollectionViewActionsProps<M extends Record<string, unknown>>
     collectionEntitiesCount?: number;
     compact?: boolean;
     children?: React.ReactNode;
+    openNewDocument: (defaultValues?: Record<string, unknown>) => void;
 }
 
 export function EntityCollectionViewActions<M extends Record<string, unknown>>({
     collection,
     relativePath,
-    parentCollectionIds,
+    parentCollectionSlugs, parentEntityIds,
     onNewClick,
     onMultipleDeleteClick,
     selectionEnabled,
@@ -43,7 +44,8 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
     tableController,
     collectionEntitiesCount,
     compact,
-    children
+    children,
+    openNewDocument
 }: EntityCollectionViewActionsProps<M>) {
     const context = useCMSContext();
 
@@ -64,6 +66,7 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
                 id={`add_entity_${path}`}
                 onClick={onNewClick}
                 startIcon={<PlusIcon size={iconSize.small}/>}
+                size="small"
                 variant="filled"
                 color="primary">
                 Add {collection.singularName ?? collection.name}
@@ -71,9 +74,9 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
             : <Button
                 id={`add_entity_${path}`}
                 onClick={onNewClick}
-                variant={compact ? "filled" : "filled"}
+                variant="filled"
                 color={compact ? "neutral" : "primary"}
-                size={compact ? "small" : "medium"}
+                size="small"
             >
                 <PlusIcon size={iconSize.small}/>
             </Button>);
@@ -110,20 +113,27 @@ export function EntityCollectionViewActions<M extends Record<string, unknown>>({
     const actionProps: CollectionActionsProps<M> = {
         path,
         relativePath,
-        parentCollectionIds,
+        parentCollectionSlugs, parentEntityIds,
         collection,
         selectionController,
         context,
         tableController,
-        collectionEntitiesCount
+        collectionEntitiesCount,
+        openNewDocument
     };
 
     const actions = toArray(collection.Actions)
-        .map((Action, i) => (
-            <ErrorBoundary key={`actions_${i}`}>
-                <Action {...actionProps}/>
-            </ErrorBoundary>
-        ));
+        .map((actionRef, i) => {
+            const Action = resolveComponentRef(actionRef);
+            if (!Action) return null;
+            return (
+                <ErrorBoundary key={`actions_${i}`}>
+                    <Suspense fallback={null}>
+                        <Action {...actionProps}/>
+                    </Suspense>
+                </ErrorBoundary>
+            );
+        });
 
     const pluginActions = useSlot("collection.actions", actionProps as any);