@wildo-ai/saas-frontend-lib 1.1.5 → 1.1.7

package/dist/esm/components/resources/ResourceLayout_List.js

@@ -25,7 +25,8 @@ import { extractErrorInfo } from '../../core/errors/errors.frontend.schemas.js';
 import { useUserFacingErrorMessage } from '../../core/errors/useUserFacingErrorMessage.js';
 import { useUI } from '../../core/ui/useUI.js';
 import { UIBehavior, InteractiveVariant } from '@wildo-ai/presets-components-models';
-import { ResourceEmptyState } from '../../components/feedback/resource-empty-state.js';
+import { ResourceEmptyState, useResourceEmptyStateOffersPrimaryAction } from '../../components/feedback/resource-empty-state.js';
+import { isCollectionNarrowed, toolbarOffersCreate } from './collection-create-placement.utils.js';
 import { useInlineSearch } from '../../components/resources/useInlineSearch.js';
 import { ResourceCollectionToolbar } from '../../components/resources/ResourceCollectionToolbar.js';
 import { ResourceCollectionBody_Table } from '../../components/resources/ResourceCollectionBody_Table.js';
@@ -82,6 +83,7 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     // into the standard filter state, the grouping is applied to the fetched page).
     const quickFilterFieldName = collectionDisplayConfig?.quickFilterField;
     const presetFilters = collectionDisplayConfig?.presetFilters;
+    const filterPanel = collectionDisplayConfig?.filterPanel;
     const temporalGroupField = collectionDisplayConfig?.temporalGroupField;
     const enumGroupField = collectionDisplayConfig?.enumGroupField;
     // CARDS arrangement (list vs N-column grid) + per-card action placement +
@@ -289,8 +291,10 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
             : undefined);
         const searchEnabled = listOp?.searchEnabled ?? true;
         const filtersEnabled = listOp?.filtersEnabled ?? true;
-        return { sortFields, filterFields, searchEnabled, filtersEnabled };
-    }, [availableOperations.search, operation, registry, resourceConfig, contextualParameters, resourceContext.parentResourcesRequirements]);
+        // A field the host pinned is not the reader's to filter (#1630): its value is fixed on every fetch.
+        const readerFilterFields = ResourceLayoutUtils.withoutPinnedFilterFields(filterFields, resourceContext.pinnedFilters);
+        return { sortFields, filterFields: readerFilterFields, searchEnabled, filtersEnabled };
+    }, [availableOperations.search, operation, registry, resourceConfig, contextualParameters, resourceContext.parentResourcesRequirements, resourceContext.pinnedFilters]);
     // Split the promoted quick-filter field OUT of the panel fields: exactly one
     // control owns each filter field (tabs OR panel, never both). A misauthored
     // promotion (unknown field / non-enum / no values) degrades gracefully — no
@@ -380,6 +384,9 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     resourceContextRef.current = resourceContext;
     const sortKey = sortStates.map(s => `${s.field}:${s.direction}`).join(',');
     const filterKey = useMemo(() => JSON.stringify(filterValues), [filterValues]);
+    // Host-pinned filters (#1630) are part of the fetch identity: a host that re-pins refetches.
+    const pinnedFilters = resourceContext.pinnedFilters;
+    const pinnedFiltersKey = useMemo(() => JSON.stringify(pinnedFilters ?? {}), [pinnedFilters]);
     // Announce this collection surface's ACTIVE FILTER SET. The surface states a
     // fact about itself and owns no scope semantics — `AppScopeContext` decides
     // whether a filter lands on a declared app-scope field (so the app-shell
@@ -414,6 +421,8 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
         }),
     }), [contextualParameters, operation, resourceConfig?.resourceFieldIdentifier, resourceContext, resourceType]);
     const { lastRefreshAt: collectionRefreshAt } = resourceCollectionRefreshEvent({ ctx: collectionRefreshContext });
+    // The READER's filters only, not the host's pins (#1630): the announcement feeds the app-shell scope
+    // control, which mirrors a reader's choice — an embed pinned to its host must not retarget the app's scope.
     useEffect(() => {
         emitFrontendEvent(FrontendEvents.RESOURCE_COLLECTION_FILTERS_CHANGED, {
             resourceType,
@@ -425,7 +434,7 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     }, [filterKey, resourceType, emitFrontendEvent]);
     // Whether the current fetch delegates to SEARCH (inline search active)
     const isUsingInlineSearch = debouncedInlineSearch.length > 0 && !!searchOperationPathKey;
-    const fetchKey = `${resourceType}|${isUsingInlineSearch ? searchOperationPathKey : operationPathKey}|${contextualParametersKey}|${pagination.page}|${pagination.limit}|${sortKey}|${filterKey}|${debouncedInlineSearch}|${collectionRefreshAt ?? 0}`;
+    const fetchKey = `${resourceType}|${isUsingInlineSearch ? searchOperationPathKey : operationPathKey}|${contextualParametersKey}|${pagination.page}|${pagination.limit}|${sortKey}|${filterKey}|${pinnedFiltersKey}|${debouncedInlineSearch}|${collectionRefreshAt ?? 0}`;
     // Fetch data - use refs to avoid dependency on unstable functions.
     // StrictMode double-mounts run this effect twice; the `cancelled` flag plus
     // cleanup disposes of the first mount's in-flight fetch so the second
@@ -449,8 +458,10 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                 // When inline search is active, delegate to SEARCH operation
                 if (isUsingInlineSearch && searchOperationPathKey) {
                     logDebug('Calling doOperation (SEARCH via inline search)', { searchOperationPathKey, query: debouncedInlineSearch });
-                    const activeFilters = Object.keys(filterValuesRef.current).length > 0
-                        ? filterValuesRef.current
+                    // The host's pins apply on top of the reader's filters, and win on a shared key.
+                    const mergedFilters = ResourceLayoutUtils.withPinnedFilters(filterValuesRef.current, resourceContextRef.current.pinnedFilters);
+                    const activeFilters = Object.keys(mergedFilters).length > 0
+                        ? mergedFilters
                         : undefined;
                     const searchCallParams = {
                         contextualParameters,
@@ -477,14 +488,12 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                         // LIST controller parses this via `parseCollectionQuerySort`.
                         queryParameters.sort = sortStatesRef.current.map(s => `${s.field}:${s.direction}`).join(',');
                     }
-                    // Serialize active filters into query parameters
-                    if (Object.keys(filterValuesRef.current).length > 0) {
-                        Object.entries(filterValuesRef.current).forEach(([key, value]) => {
-                            if (value !== undefined && value !== null && value !== '') {
-                                queryParameters[key] = value;
-                            }
-                        });
-                    }
+                    // Serialize active filters into query parameters — the reader's, then the host's pins (#1630), which win.
+                    Object.entries(ResourceLayoutUtils.withPinnedFilters(filterValuesRef.current, resourceContextRef.current.pinnedFilters)).forEach(([key, value]) => {
+                        if (value !== undefined && value !== null && value !== '') {
+                            queryParameters[key] = value;
+                        }
+                    });
                     result = await doOperationRef.current(operationPathKey, {
                         contextualParameters,
                         queryParameters,
@@ -810,6 +819,13 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
     // `data-slot="collection-create"` is the i18n-independent automation hook
     // (the label is the runtime-translated per-resource CREATE title) — attribute only.
     _jsxs(Button, { onClick: handleCreate, size: ButtonSize.SM, "data-slot": "collection-create", className: "inline-flex items-center gap-element", children: [addIcon, _jsx("span", { children: createLabel })] })) : undefined;
+    // One create, one place — see `collection-create-placement.utils.ts` for the rule. "Narrowed" is the READER's
+    // narrowing only: a host's pins (#1630) are what the collection IS, so an empty pinned embed is "none yet".
+    const isNarrowed = isCollectionNarrowed({ isSearchActive: isUsingInlineSearch, filterValues: filterValues });
+    const emptyStateOffersCreate = useResourceEmptyStateOffersPrimaryAction(emptyStateConfig, !!availableOperations.create);
+    const toolbarCreateButton = toolbarOffersCreate({ hasLoadedOnce, itemCount: items.length, isNarrowed, emptyStateOffersCreate })
+        ? createButton
+        : undefined;
     // Whole-scope maintenance actions (collection-scoped operations, e.g. "retry
     // all" / "purge all"). Built ONLY when the resource declares at least one, so
     // the toolbar's trailing cluster stays absent for the many read-only
@@ -847,13 +863,14 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
             // `parseCollectionQuerySort` reads it identically. Two encodings would drift.
             params.sort = sortStates.map((state) => `${state.field}:${state.direction}`).join(',');
         }
-        for (const [key, value] of Object.entries(filterValues)) {
+        // The host's pins included (#1630): an export of a pinned embed is the rows it shows, never more.
+        for (const [key, value] of Object.entries(ResourceLayoutUtils.withPinnedFilters(filterValues, pinnedFilters))) {
             if (value === undefined || value === null || value === '')
                 continue;
             params[key] = value;
         }
         return { params, isSearchActive: Boolean(debouncedInlineSearch) };
-    }, [pagination.page, pagination.limit, sortStates, filterValues, debouncedInlineSearch]);
+    }, [pagination.page, pagination.limit, sortStates, filterValues, pinnedFilters, debouncedInlineSearch]);
     const collectionActionsNode = hasCollectionScopedOps ? (_jsx(ResourceLayout_CollectionActions, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, collectionExportQuery: collectionExportQuery })) : undefined;
     // searchIcon and clearIcon are now rendered inside InlineSearchInput
     if (!isReady)
@@ -875,11 +892,11 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                     query: inlineSearch.query,
                     onChange: inlineSearch.handleChange,
                     onClear: inlineSearch.handleClear,
-                } : undefined, filterFields: filtersEnabled ? panelFilterFields : [], filterValues: filterValues, onFiltersChange: handleFiltersChange, sort: viewMode === CollectionDisplayMode.CARDS && sortFields.length > 0 ? {
+                } : undefined, filterFields: filtersEnabled ? panelFilterFields : [], filterPanel: filterPanel, filterValues: filterValues, onFiltersChange: handleFiltersChange, sort: viewMode === CollectionDisplayMode.CARDS && sortFields.length > 0 ? {
                     sortFields,
                     sortStates,
                     onSortChange: handleSortChange,
-                } : undefined, viewMode: userSwitchableViewMode ? { viewMode, onViewModeChange: setViewMode } : undefined, primaryAction: createButton, collectionActions: collectionActionsNode, selection: selectionEnabled ? {
+                } : undefined, viewMode: userSwitchableViewMode ? { viewMode, onViewModeChange: setViewMode } : undefined, primaryAction: toolbarCreateButton, collectionActions: collectionActionsNode, selection: selectionEnabled ? {
                     count: selection.selectionCount,
                     onClear: selection.clearSelection,
                     // Offered only once the page selection has stopped meaning what the person wants: every
@@ -891,7 +908,8 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                             matchAllOffer: {
                                 matchedCount: pagination.total,
                                 onSelectAllMatching: () => selection.selectAllMatching({
-                                    filters: filterValues,
+                                    // The host's pins included (#1630): "all matching" is what this listing matches.
+                                    filters: ResourceLayoutUtils.withPinnedFilters(filterValues, pinnedFilters),
                                     ...(debouncedInlineSearch ? { search: debouncedInlineSearch } : {}),
                                     matchedCount: pagination.total,
                                 }),
@@ -899,7 +917,10 @@ export const ResourceLayoutPreset_List_Default = ({ resourceContext, navigationZ
                         }
                         : {}),
                     ...(selection.matchAllSelection ? { isMatchAllSelected: true } : {}),
-                } : undefined, bulkActions: selectionEnabled ? (_jsx(ResourceLayout_OperationBulk, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, selectedItems: selection.selectedItems, matchAllSelection: selection.matchAllSelection, explicitIdSelection: selection.explicitIdSelection, onSelectIds: selection.selectIds, idField: selectionIdField, onSelectionClear: selection.clearSelection, onSelectionReplace: selection.selectAll, fallback: createButton })) : undefined }), _jsx(LoadingGate, { i18nKeys: i18nKeys, loadingScopes: loadingScopes, readiness: readiness, renderLoading: () => (_jsx(Skeleton, { template: viewMode === CollectionDisplayMode.TABLE ? 'table' : isCardGrid ? 'card' : 'list', density: "auto", count: pagination.limit, "aria-hidden": "true" })), children: _jsxs("div", { className: "space-y-section", children: [_jsx(ResourceLayout_InsertedViews, { resourceContext: resourceContext, navigationZone: navigationZone, showCharts: showCharts }), inPlaceHost.isCreateActive && (_jsx(ResourceInPlaceOperationRow, { navigationZone: navigationZone, className: "border border-border rounded-lg" })), items.length === 0 ? (isUsingInlineSearch ? (_jsx("div", { className: "text-center py-section text-muted-foreground text-sm", role: "status", children: noSearchResultsLabel })) : (_jsx(ResourceEmptyState, { resourceType: resourceType, config: emptyStateConfig, hasCreateOperation: !!availableOperations.create, onCreateAction: handleCreate }))) : viewMode === CollectionDisplayMode.TABLE ? (_jsx(ResourceCollectionBody_Table, { items: items, resourceType: resourceType, resourceConfig: resourceConfig, navigationZone: navigationZone, summaryFields: summaryFields, fieldLabelsMap: fieldLabelsMap, sortFields: sortFields, sortStates: sortStates, onSortChange: handleSortChange, selectable: selectionEnabled, isRowSelected: selectionIsSelected, onToggleRow: selectionToggle, allSelected: currentPageAllSelected, onToggleAll: handleToggleAllCurrentPage, renderRowActions: renderItemOperations, onRowClick: handleItemClick, canOpenRow: canOpenItem })) : renderedGroups ? (
+                } : undefined, bulkActions: selectionEnabled ? (_jsx(ResourceLayout_OperationBulk, { resourceContext: resourceContext, navigationZone: navigationZone, navigationInitiator: listNavigationInitiator, selectedItems: selection.selectedItems, matchAllSelection: selection.matchAllSelection, explicitIdSelection: selection.explicitIdSelection, onSelectIds: selection.selectIds, idField: selectionIdField, onSelectionClear: selection.clearSelection, onSelectionReplace: selection.selectAll, fallback: createButton })) : undefined }), _jsx(LoadingGate, { i18nKeys: i18nKeys, loadingScopes: loadingScopes, readiness: readiness, renderLoading: () => (_jsx(Skeleton, { template: viewMode === CollectionDisplayMode.TABLE ? 'table' : isCardGrid ? 'card' : 'list', density: "auto", count: pagination.limit, "aria-hidden": "true" })), children: _jsxs("div", { className: "space-y-section", children: [_jsx(ResourceLayout_InsertedViews, { resourceContext: resourceContext, navigationZone: navigationZone, showCharts: showCharts }), inPlaceHost.isCreateActive && (_jsx(ResourceInPlaceOperationRow, { navigationZone: navigationZone, className: "border border-border rounded-lg" })), items.length === 0 ? (
+                        // "Create your first X" belongs to an EMPTY collection. A search or a filter that matched
+                        // nothing says so, and the empty state's "none yet" would be false there.
+                        isNarrowed ? (_jsx("div", { className: "text-center py-section text-muted-foreground text-sm", role: "status", children: noSearchResultsLabel })) : (_jsx(ResourceEmptyState, { resourceType: resourceType, config: emptyStateConfig, hasCreateOperation: !!availableOperations.create, onCreateAction: handleCreate }))) : viewMode === CollectionDisplayMode.TABLE ? (_jsx(ResourceCollectionBody_Table, { items: items, resourceType: resourceType, resourceConfig: resourceConfig, navigationZone: navigationZone, summaryFields: summaryFields, fieldLabelsMap: fieldLabelsMap, sortFields: sortFields, sortStates: sortStates, onSortChange: handleSortChange, selectable: selectionEnabled, isRowSelected: selectionIsSelected, onToggleRow: selectionToggle, allSelected: currentPageAllSelected, onToggleAll: handleToggleAllCurrentPage, renderRowActions: renderItemOperations, onRowClick: handleItemClick, canOpenRow: canOpenItem })) : renderedGroups ? (
                         /* Grouped cards — one heading per bucket, from either grouping axis: temporal day buckets
                            (activity-feed idiom, adjacent-merged in server order) or enum buckets (emitted in the
                            enum's declaration order). Group keys are suffixed with the bucket index: non-adjacent