@firecms/core 3.4.0-canary.8635253 → 3.4.0-canary.cfeed0b

package/src/components/common/table_url_params.ts

@@ -0,0 +1,172 @@
+import { EntityReference, FilterValues, WhereFilterOp } from "../../types";
+import { decodeEntityId, encodeEntityId } from "../../util/navigation_utils";
+
+/**
+ * Internal helpers used by `useDataSourceTableController` to persist the state of a
+ * collection table (filters, sort and text search) in the URL query string.
+ *
+ * These functions are intentionally NOT re-exported by the package barrel files:
+ * they are pure and live in their own module only so that they can be unit tested.
+ * `encodeFilterAndSort` and `parseFilterAndSort` must stay exact inverses of each
+ * other, otherwise state written to the URL is silently dropped on reload.
+ */
+
+/**
+ * Serialise the state of a collection table into a URL query string,
+ * without the leading `?`. Returns an empty string when there is no state to persist.
+ */
+export function encodeFilterAndSort(filterValues?: FilterValues<string>,
+                                    sortBy?: [string, "asc" | "desc"] | undefined,
+                                    searchString?: string) {
+    const entries: Record<string, string> = {};
+    if (sortBy) {
+        entries["__sort"] = encodeURIComponent(sortBy[0]);
+        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
+    }
+    if (filterValues) {
+        Object.entries(filterValues).forEach(([key, value]) => {
+            if (value) {
+                const [op, val] = value;
+                let encodedValue: any = val;
+                try {
+                    if (typeof val === "object") {
+                        if (val instanceof Date) {
+                            encodedValue = val.toISOString();
+                        } else if (Array.isArray(val)) {
+                            encodedValue = JSON.stringify(val, (key, value) => {
+                                if (value instanceof EntityReference) {
+                                    return encodeRef(value);
+                                }
+                                return value;
+                            });
+                        } else if (val instanceof EntityReference) {
+                            encodedValue = encodeRef(val);
+                        }
+                    } else if (typeof val === "string") {
+                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
+                        // so that decodeString's JSON.parse restores the string type,
+                        // not a number. Without this, "4" round-trips as the number 4.
+                        encodedValue = JSON.stringify(val);
+                    }
+                } catch (e) {
+                    encodedValue = val;
+                }
+                if (encodedValue !== undefined) {
+                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
+                    // Note: check for null/undefined explicitly instead of truthiness,
+                    // otherwise falsy-but-valid values (boolean `false`, number `0`)
+                    // would be serialized as "null" and round-trip back as `null`,
+                    // breaking filters like `archived == false`.
+                    entries[encodeURIComponent(`${key}_value`)] = encodedValue !== null && encodedValue !== undefined
+                        ? encodeURIComponent(encodedValue.toString())
+                        : "null";
+                }
+            }
+        });
+    }
+    // The text search term is encoded once here; `parseFilterAndSort` reads it back with
+    // `URLSearchParams`, which decodes exactly once. Do NOT decode it a second time or
+    // terms containing a literal `%` (e.g. "50%") would throw a URIError.
+    if (searchString) {
+        entries["search"] = encodeURIComponent(searchString);
+    }
+    if (!Object.keys(entries).length) {
+        return "";
+    }
+    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join("&");
+}
+
+/**
+ * Restore the state of a collection table from a URL query string.
+ * The inverse of {@link encodeFilterAndSort}.
+ */
+export function parseFilterAndSort<M>(search: string): {
+    filterValues: FilterValues<string> | undefined,
+    sortBy?: [Extract<keyof M, string>, "asc" | "desc"],
+    searchString?: string
+} {
+    const entries = new URLSearchParams(search);
+    const filterValues: FilterValues<string> = {};
+    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
+    entries.forEach((value, key) => {
+        if (key === "__sort") {
+            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
+        } else if (key.endsWith("_op")) {
+            const field = key.replace("_op", "");
+            const filterOp = decodeURIComponent(value) as WhereFilterOp;
+            const filterValStr = entries.get(`${field}_value`);
+            if (filterValStr !== null) {
+                filterValues[field] = [filterOp, decodeString(filterValStr)];
+            }
+        }
+    });
+
+    // `URLSearchParams` has already percent-decoded the value, so it is used as is.
+    const searchString = entries.get("search") ?? undefined;
+
+    return {
+        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
+        sortBy,
+        searchString: searchString ? searchString : undefined
+    }
+}
+
+function isDate(dateString: string): boolean {
+    // Define a regex pattern that matches the exact date format: 2025-01-07T23:00:00.000Z
+    const regexPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
+
+    // Test the dateString against the regex pattern
+    if (!regexPattern.test(dateString)) {
+        return false;
+    }
+
+    // If the regex matches, further validate if it is a valid UTC date
+    const date = new Date(dateString);
+    return date.toISOString() === dateString;
+}
+
+function encodeRef(val: EntityReference) {
+    return `ref::${val.path}/${encodeEntityId(val.id)}`;
+}
+
+/**
+ * Split a "path/id" reference on its LAST separator: the path may itself be a
+ * subcollection path with several segments, and the id is escaped so it is always exactly
+ * one segment.
+ */
+function decodeRef(encoded: string): EntityReference {
+    const separatorIndex = encoded.lastIndexOf("/");
+    if (separatorIndex < 0) return new EntityReference(encoded, "");
+    return new EntityReference(
+        decodeEntityId(encoded.substring(separatorIndex + 1)),
+        encoded.substring(0, separatorIndex)
+    );
+}
+
+function decodeString(val: string): EntityReference | Date | string {
+    let parsedFilterVal: any = val;
+    if (isDate(val)) {
+        try {
+            parsedFilterVal = new Date(val);
+        } catch (e) {
+            // ignore
+        }
+    }
+    if (typeof parsedFilterVal === "string") {
+        try {
+            parsedFilterVal = JSON.parse(parsedFilterVal, (key, value) => {
+                if (typeof value === "string" && value.startsWith("ref::")) {
+                    return decodeRef(value.substring(5));
+                }
+                return value;
+            });
+        } catch (e) {
+            // ignore
+        }
+    }
+
+    if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
+        return decodeRef(parsedFilterVal.substring(5));
+    }
+    return parsedFilterVal;
+}

package/src/components/common/useDataSourceTableController.tsx

@@ -7,18 +7,16 @@ import {
     DataType,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityTableController,
     FilterValues,
     FireCMSContext,
     SelectedCellProps,
-    User,
-    WhereFilterOp
+    User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
 import { ScrollRestorationController } from "./useScrollRestoration";
 import { isDataTypeFilterable } from "../../util";
-import { decodeEntityId, encodeEntityId } from "../../util/navigation_utils";
+import { encodeFilterAndSort, parseFilterAndSort } from "./table_url_params";
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -27,6 +25,14 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
      * Full path where the data of this table is located
      */
     fullPath: string;
+    /**
+     * `fullPath` split at its real segment boundaries. Passed through to the datasource so
+     * a parent entity id containing "/" stays unambiguous.
+     *
+     * Optional, and never derived by splitting `fullPath` — a guess would be wrong in
+     * exactly the case the field exists for. Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
     /**
      * The collection that is represented by this config.
      */
@@ -71,6 +77,7 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
 export function useDataSourceTableController<M extends Record<string, any> = any, USER extends User = User>(
     {
         fullPath,
+        pathSegments,
         collection,
         scrollRestoration,
         entitiesDisplayedFirst,
@@ -89,20 +96,24 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const navigation = useNavigationController();
     const dataSource = useDataSource(collection);
-    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
+    // Resolved together so the two representations always describe the same chain.
+    // Segments are resolved, never derived (see useEntityFetch).
+    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath, pathSegments), [fullPath, pathSegments, navigation.resolveIdsFrom]);
+    const resolvedPathSegments = useMemo(() => pathSegments
+        ? (navigation.resolveSegmentsFrom?.(pathSegments) ?? pathSegments)
+        : undefined, [pathSegments, navigation.resolveSegmentsFrom]);
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
     const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
     const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
 
-    const [searchString, setSearchString] = React.useState<string | undefined>();
-
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
         sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
             return true;
         return dataSource.isFilterCombinationValid({
             path: resolvedPath,
+            pathSegments: resolvedPathSegments,
             collection,
             filterValues,
             sortBy
@@ -137,8 +148,9 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const {
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
+        searchString: initialSearchUrl
     } = parseFilterAndSort(location.search);
-    
+
     const availableFilterKeys = collection.allowedFilters ?? Object.keys(collection.properties);
     const forcedFilterKeys = collection.forceFilter ? Object.keys(collection.forceFilter) : [];
 
@@ -174,6 +186,11 @@ export function useDataSourceTableController<M extends Record<string, any> = any
 
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(removeUnallowedFilters(initFilters));
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
+    // Like the filters and the sort, the text search term is only restored from the URL when
+    // this controller owns the URL. Controllers rendered inside a dialog (e.g. a reference
+    // selection dialog) get `updateUrl: false` and must not inherit the state of the
+    // collection behind them. See https://github.com/firecmsco/firecms/issues/702
+    const [searchString, setSearchString] = React.useState<string | undefined>(updateUrl ? initialSearchUrl : undefined);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
@@ -223,6 +240,11 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         setDataLoading(true);
 
         const onEntitiesUpdate = async (entities: Entity<M>[]) => {
+            // See useEntityFetch: entities carry the segments they were loaded with, so a
+            // reference or a delete derived from a table row stays resolvable.
+            if (resolvedPathSegments) {
+                entities = entities.map(e => e.pathSegments ? e : { ...e, pathSegments: resolvedPathSegments });
+            }
             if (collection.callbacks?.onFetch) {
                 try {
                     entities = await Promise.all(
@@ -230,6 +252,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
                             collection.callbacks!.onFetch!({
                                 collection,
                                 path: resolvedPath,
+                                pathSegments: resolvedPathSegments,
                                 entity,
                                 context
                             })));
@@ -253,32 +276,45 @@ export function useDataSourceTableController<M extends Record<string, any> = any
             setDataLoadingError(error);
         };
 
-        if (dataSource.listenCollection) {
-            return dataSource.listenCollection<M>({
-                path: resolvedPath,
-                collection,
-                onUpdate: onEntitiesUpdate,
-                onError,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            });
-        } else {
-            dataSource.fetchCollection<M>({
-                path: resolvedPath,
-                collection,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            })
-                .then(onEntitiesUpdate)
-                .catch(onError);
+        // Data sources may throw synchronously, e.g. when a text search is requested before
+        // the text search backend of the collection has been initialised. That can happen
+        // when the search term is restored from the URL instead of typed in the search bar,
+        // so it is reported as a data loading error rather than being left to blow up the
+        // whole view from inside this effect.
+        try {
+            if (dataSource.listenCollection) {
+                return dataSource.listenCollection<M>({
+                    path: resolvedPath,
+                    pathSegments: resolvedPathSegments,
+                    collection,
+                    onUpdate: onEntitiesUpdate,
+                    onError,
+                    searchString,
+                    filter: filterValues,
+                    limit: itemCount,
+                    startAfter: undefined,
+                    orderBy: sortByProperty,
+                    order: currentSort
+                });
+            } else {
+                dataSource.fetchCollection<M>({
+                    path: resolvedPath,
+                    pathSegments: resolvedPathSegments,
+                    collection,
+                    searchString,
+                    filter: filterValues,
+                    limit: itemCount,
+                    startAfter: undefined,
+                    orderBy: sortByProperty,
+                    order: currentSort
+                })
+                    .then(onEntitiesUpdate)
+                    .catch(onError);
+                return () => {
+                };
+            }
+        } catch (e: any) {
+            onError(e instanceof Error ? e : new Error(String(e)));
             return () => {
             };
         }
@@ -332,9 +368,7 @@ function useUpdateUrl<M extends Record<string, any> = any>(
 
     useEffect(() => {
         if (updateUrl) {
-            const newUrl = encodeFilterAndSort(filterValues, sortBy);
-            const search = searchString ? `&search=${encodeURIComponent(searchString)}` : "";
-            const state = `${newUrl}${search}`;
+            const state = encodeFilterAndSort(filterValues, sortBy, searchString);
             const hash = window.location.hash;
             if (state === "")
                 window.history.replaceState({}, "", `${window.location.pathname}${hash}`);
@@ -343,142 +377,3 @@ function useUpdateUrl<M extends Record<string, any> = any>(
         }
     }, [filterValues, sortBy, searchString, updateUrl]);
 }
-
-function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [string, "asc" | "desc"] | undefined) {
-    const entries: Record<string, string> = {};
-    if (sortBy) {
-        entries["__sort"] = encodeURIComponent(sortBy[0]);
-        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
-    }
-    if (filterValues) {
-        Object.entries(filterValues).forEach(([key, value]) => {
-            if (value) {
-                const [op, val] = value;
-                let encodedValue: any = val;
-                try {
-                    if (typeof val === "object") {
-                        if (val instanceof Date) {
-                            encodedValue = val.toISOString();
-                        } else if (Array.isArray(val)) {
-                            encodedValue = JSON.stringify(val, (key, value) => {
-                                if (value instanceof EntityReference) {
-                                    return encodeRef(value);
-                                }
-                                return value;
-                            });
-                        } else if (val instanceof EntityReference) {
-                            encodedValue = encodeRef(val);
-                        }
-                    } else if (typeof val === "string") {
-                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
-                        // so that decodeString's JSON.parse restores the string type,
-                        // not a number. Without this, "4" round-trips as the number 4.
-                        encodedValue = JSON.stringify(val);
-                    }
-                } catch (e) {
-                    encodedValue = val;
-                }
-                if (encodedValue !== undefined) {
-                    entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
-                    // Note: check for null/undefined explicitly instead of truthiness,
-                    // otherwise falsy-but-valid values (boolean `false`, number `0`)
-                    // would be serialized as "null" and round-trip back as `null`,
-                    // breaking filters like `archived == false`.
-                    entries[encodeURIComponent(`${key}_value`)] = encodedValue !== null && encodedValue !== undefined
-                        ? encodeURIComponent(encodedValue.toString())
-                        : "null";
-                }
-            }
-        });
-    }
-    if (!Object.keys(entries).length) {
-        return "";
-    }
-    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join("&");
-}
-
-function parseFilterAndSort<M>(search: string): {
-    filterValues: FilterValues<string> | undefined,
-    sortBy?: [Extract<keyof M, string>, "asc" | "desc"]
-} {
-    const entries = new URLSearchParams(search);
-    const filterValues: FilterValues<string> = {};
-    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
-    entries.forEach((value, key) => {
-        if (key === "__sort") {
-            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
-        } else if (key.endsWith("_op")) {
-            const field = key.replace("_op", "");
-            const filterOp = decodeURIComponent(value) as WhereFilterOp;
-            const filterValStr = entries.get(`${field}_value`);
-            if (filterValStr !== null) {
-                filterValues[field] = [filterOp, decodeString(filterValStr)];
-            }
-        }
-    });
-
-    return {
-        filterValues: Object.keys(filterValues).length ? filterValues : undefined,
-        sortBy
-    }
-}
-
-function isDate(dateString: string): boolean {
-    // Define a regex pattern that matches the exact date format: 2025-01-07T23:00:00.000Z
-    const regexPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
-
-    // Test the dateString against the regex pattern
-    if (!regexPattern.test(dateString)) {
-        return false;
-    }
-
-    // If the regex matches, further validate if it is a valid UTC date
-    const date = new Date(dateString);
-    return date.toISOString() === dateString;
-}
-
-function encodeRef(val: EntityReference) {
-    return `ref::${val.path}/${encodeEntityId(val.id)}`;
-}
-
-/**
- * Split a "path/id" reference on its LAST separator: the path may itself be a
- * subcollection path with several segments, and the id is escaped so it is always exactly
- * one segment.
- */
-function decodeRef(encoded: string): EntityReference {
-    const separatorIndex = encoded.lastIndexOf("/");
-    if (separatorIndex < 0) return new EntityReference(encoded, "");
-    return new EntityReference(
-        decodeEntityId(encoded.substring(separatorIndex + 1)),
-        encoded.substring(0, separatorIndex)
-    );
-}
-
-function decodeString(val: string): EntityReference | Date | string {
-    let parsedFilterVal: any = val;
-    if (isDate(val)) {
-        try {
-            parsedFilterVal = new Date(val);
-        } catch (e) {
-            // ignore
-        }
-    }
-    if (typeof parsedFilterVal === "string") {
-        try {
-            parsedFilterVal = JSON.parse(parsedFilterVal, (key, value) => {
-                if (typeof value === "string" && value.startsWith("ref::")) {
-                    return decodeRef(value.substring(5));
-                }
-                return value;
-            });
-        } catch (e) {
-            // ignore
-        }
-    }
-
-    if (typeof parsedFilterVal === "string" && parsedFilterVal.startsWith("ref::")) {
-        return decodeRef(parsedFilterVal.substring(5));
-    }
-    return parsedFilterVal;
-}

package/src/components/common/useTableSearchHelper.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { EntityCollection } from "../../types";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
@@ -6,13 +6,23 @@ import { useCustomizationController, useDataSource, useFireCMSContext } from "..
 export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     collection: EntityCollection<M>;
     fullPath: string;
+    /** `fullPath` split at its real segment boundaries, when known. Never derived from it. */
+    pathSegments?: string[];
     parentCollectionIds?: string[];
+    /**
+     * Search term that is already being applied without the user having gone through the
+     * search bar, e.g. one restored from the URL query params. When set, text search is
+     * initialised automatically instead of waiting for a click on the search bar.
+     */
+    initialSearchString?: string;
 }
 
 export function useTableSearchHelper<M extends Record<string, any>>({
                                                                         collection,
                                                                         fullPath,
-                                                                        parentCollectionIds
+                                                                        pathSegments,
+                                                                        parentCollectionIds,
+                                                                        initialSearchString
                                                                     }: UseTableSearchHelperParams<M>) {
 
     const context = useFireCMSContext();
@@ -21,6 +31,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+    const autoInitialisedRef = useRef<boolean>(false);
 
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
@@ -28,6 +39,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
     const props = {
         context,
         path: fullPath,
+        pathSegments,
         databaseId: collection.databaseId,
         collection,
         parentCollectionIds
@@ -54,6 +66,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                             promises.push(p.collectionView.onTextSearchClick({
                                 context,
                                 path: fullPath,
+                                pathSegments,
                                 collection,
                                 parentCollectionIds
                             }));
@@ -79,6 +92,17 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                 }
         })
     }
+
+    // Only ever runs once, and only when a search term was restored from outside the search
+    // bar: otherwise the search bar would show a term the user can neither edit nor clear,
+    // because it stays read only until text search is initialised.
+    const shouldAutoInitialise = Boolean(initialSearchString) && textSearchEnabled && !textSearchInitialised && Boolean(onTextSearchClick);
+    useEffect(() => {
+        if (autoInitialisedRef.current || !shouldAutoInitialise) return;
+        autoInitialisedRef.current = true;
+        onTextSearchClick?.();
+    }, [shouldAutoInitialise]);
+
     return {
         textSearchLoading,
         textSearchInitialised,

package/src/contexts/SnackbarProvider.tsx

@@ -1,12 +1,25 @@
 "use client";
 
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect, useState } from "react";
 import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
 
 export const SnackbarProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
 
+    // Notistack renders the snackbars inline, right where this provider sits in the
+    // tree, unless it is given a `domRoot`. Dialogs and side dialogs, on the other
+    // hand, are portalled to the body, so any ancestor of this provider that creates
+    // a stacking context (a transform, a filter, an `isolate`, a positioned element
+    // with a z-index...) traps the snackbars underneath them. Portalling the
+    // snackbars to the body as well puts them in the same stacking context as the
+    // dialogs, where their z-index actually wins.
+    const [domRoot, setDomRoot] = useState<HTMLElement | undefined>(undefined);
+    useEffect(() => {
+        setDomRoot(document.body);
+    }, []);
+
     return (
         <NotistackSnackbarProvider maxSnack={3}
+                                   domRoot={domRoot}
                                    autoHideDuration={3500}>
             {children}
         </NotistackSnackbarProvider>