@firecms/core 3.4.0-canary.0ef7442 → 3.4.0-canary.2575a08

package/src/i18n/__tests__/nested_provider_lifecycle.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { useTranslation } from "react-i18next";
+import { FireCMSi18nProvider } from "../FireCMSi18nProvider";
+
+function Str({ k }: { k: string }) {
+    const { t } = useTranslation("firecms_core");
+    return <span data-testid={k}>{t(k)}</span>;
+}
+
+const host = { en: { host_key: "Host" } } as any;
+const projectA = { en: { only_in_a: "From project A" } } as any;
+const projectB = { en: { only_in_b: "From project B" } } as any;
+
+describe("nested provider lifecycle", () => {
+    beforeEach(() => window.localStorage.clear());
+
+    it("does not carry one project's translations into the next", () => {
+        // The real shape of a project switch: App.tsx's provider stays mounted while
+        // FireCMSCloudApp's inner one is torn down and rebuilt with another project's
+        // translations. Both share the outer i18next instance now, so anything the
+        // first project added could outlive it.
+        const { rerender } = render(
+            <FireCMSi18nProvider translations={host}>
+                <FireCMSi18nProvider key={"a"} translations={projectA}>
+                    <Str k={"only_in_a"}/>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        expect(screen.getByTestId("only_in_a").textContent).toBe("From project A");
+
+        rerender(
+            <FireCMSi18nProvider translations={host}>
+                <FireCMSi18nProvider key={"b"} translations={projectB}>
+                    <>
+                        <Str k={"only_in_b"}/>
+                        <Str k={"only_in_a"}/>
+                    </>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+
+        expect(screen.getByTestId("only_in_b").textContent).toBe("From project B");
+        expect(screen.getByTestId("only_in_a").textContent).toBe("only_in_a");
+    });
+
+    it("keeps the host's own translations across the switch", () => {
+        const { rerender } = render(
+            <FireCMSi18nProvider translations={host}>
+                <FireCMSi18nProvider key={"a"} translations={projectA}>
+                    <Str k={"host_key"}/>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        rerender(
+            <FireCMSi18nProvider translations={host}>
+                <FireCMSi18nProvider key={"b"} translations={projectB}>
+                    <Str k={"host_key"}/>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        expect(screen.getByTestId("host_key").textContent).toBe("Host");
+    });
+});

package/src/internal/useBuildDataSource.ts

@@ -112,7 +112,7 @@ export function useBuildDataSource({
                 }: ListenCollectionProps<M>
             ): () => void => {
 
-                const collection = collectionProp ?? navigationController.getCollection(path);
+                const collection = collectionProp ?? navigationController.getCollection(path, false, pathSegments);
                 const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
                 if (!usedDelegate.listenCollection)
@@ -213,7 +213,7 @@ export function useBuildDataSource({
                 status
             }: SaveEntityProps<M>): Promise<Entity<M>> => {
 
-            const collection = collectionProp ?? navigationController.getCollection(path);
+            const collection = collectionProp ?? navigationController.getCollection(path, false, pathSegments);
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
             const resolvedCollection = collection
@@ -286,9 +286,15 @@ export function useBuildDataSource({
                 values: finalValues,
                 status
             }).then((res) => {
+                // Keep everything the delegate resolved — `databaseId`, and `pathSegments` in
+                // particular — so a just-saved entity is as resolvable as a fetched one.
+                // Only the values are re-mapped back to the CMS model.
                 return {
-                    id: res.id,
-                    path: res.path,
+                    ...res,
+                    // A delegate that predates `pathSegments` returns none; the segments we
+                    // just saved with describe exactly this entity's collection, so they are
+                    // the authoritative answer rather than a guess.
+                    pathSegments: res.pathSegments ?? pathSegments,
                     values: usedDelegate.delegateToCMSModel(finalValues)
                 } as Entity<M>;
             });
@@ -343,6 +349,8 @@ export function useBuildDataSource({
             return usedDelegate.generateEntityId(path, collection, pathSegments);
         }, [delegate.generateEntityId]),
 
+        // Typed with the declared props rather than an inline duplicate: the duplicate is
+        // free to drift from the interface, and a field it forgets is dropped in silence.
         countEntities: delegate.countEntities ? async ({
             path,
             pathSegments,
@@ -350,14 +358,7 @@ export function useBuildDataSource({
             filter,
             order,
             orderBy
-        }: {
-            path: string,
-            pathSegments?: string[],
-            collection: EntityCollection<any>,
-            filter?: FilterValues<Extract<keyof any, string>>,
-            orderBy?: string,
-            order?: "desc" | "asc",
-        }): Promise<number> => {
+        }: FetchCollectionProps<any>): Promise<number> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.countEntities!({
                 path,

package/src/internal/useBuildSideEntityController.tsx

@@ -281,11 +281,17 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     locationSearch: string
 ): SideDialogPanelProps => {
 
-    const collectionPath = removeInitialAndTrailingSlashes(props.path);
+    // The URL is the ESCAPED representation of the chain — it is what `buildSidePanelsFromUrl`
+    // and `FireCMSRoute` parse back on reload, on a deep link, and on every pathname change.
+    // `props.path` is the RAW datasource path, so a parent entity id containing "/" reads back
+    // there as extra collection/entity hops and resolves to a different entity entirely.
+    // `fullIdPath` carries the same chain with its ids already escaped, which is what it is
+    // threaded alongside `path` for.
+    const urlChain = removeInitialAndTrailingSlashes(props.fullIdPath ?? props.path);
 
     const urlPath = props.entityId
-        ? buildUrlCollectionPath(`${collectionPath}/${encodeEntityId(props.entityId)}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
-        : buildUrlCollectionPath(`${collectionPath}${locationSearch}#${NEW_URL_HASH}`);
+        ? buildUrlCollectionPath(`${urlChain}/${encodeEntityId(props.entityId)}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
+        : buildUrlCollectionPath(`${urlChain}${locationSearch}#${NEW_URL_HASH}`);
 
     const resolvedPanelProps: EntitySidePanelProps<any> = {
         ...props,
@@ -294,10 +300,12 @@ const propsToSidePanel = (props: EntitySidePanelProps,
 
     const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController, authController);
     return {
-        key: `${props.path}/${props.entityId}`,
+        // Built from the escaped chain so that two different chains which happen to flatten
+        // to the same raw string are still two different panels.
+        key: `${urlChain}/${props.entityId ? encodeEntityId(props.entityId) : ""}`,
         component: undefined, // Lazy render in SideDialogs for better performance
         urlPath: urlPath,
-        parentUrlPath: buildUrlCollectionPath(collectionPath),
+        parentUrlPath: buildUrlCollectionPath(urlChain),
         width: entityViewWidth,
         onClose: props.onClose,
         additional: resolvedPanelProps

package/src/preview/components/ReferencePreview.tsx

@@ -7,6 +7,7 @@ import { Skeleton } from "@firecms/ui";
 import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 import { jsonStringifyReplacer } from "../../util/objects";
+import { entityCacheKey } from "../../util/entity_cache";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -53,7 +54,7 @@ function ReferencePreviewInternal({
 
     const navigationController = useNavigationController();
 
-    const collection = navigationController.getCollection(reference.path);
+    const collection = navigationController.getCollection(reference.path, false, reference.pathSegments);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;
@@ -99,16 +100,19 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
         dataLoadingError
     } = useEntityFetch({
         path: reference.path,
+        // References carry the segments of the collection they point at, when the code that
+        // built them knew them (see getReferenceFrom).
+        pathSegments: reference.pathSegments,
         entityId: reference.id,
         collection,
         useCache: true
     });
 
     if (entity) {
-        referencesCache.set(reference.pathWithId, entity);
+        referencesCache.set(entityCacheKey(reference.path, reference.id), entity);
     }
 
-    const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
+    const usedEntity = entity ?? referencesCache.get(entityCacheKey(reference.path, reference.id));
 
     let body: React.ReactNode;
 

package/src/routes/FireCMSRoute.tsx

@@ -90,7 +90,7 @@ export function FireCMSRoute() {
         let collection: EntityCollection<any> | undefined;
         collection = navigation.getCollectionById(navigationEntries[0].id);
         if (!collection)
-            collection = navigation.getCollection(navigationEntries[0].path);
+            collection = navigation.getCollection(navigationEntries[0].path, false, navigationEntries[0].pathSegments);
         if (!collection)
             return null;
         return <React.Suspense fallback={null}>
@@ -114,7 +114,7 @@ export function FireCMSRoute() {
             const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
             collection = navigation.getCollectionById(firstEntry.id);
             if (!collection)
-                collection = navigation.getCollection(firstEntry.path);
+                collection = navigation.getCollection(firstEntry.path, false, firstEntry.pathSegments);
             if (!collection)
                 return null;
             return <React.Suspense fallback={null}>
@@ -186,6 +186,8 @@ function EntityFullScreenRoute({
     const urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
     const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
 
+    // `navigationPath` comes from the URL, where entity ids are still escaped (see
+    // encodeEntityId), so splitting it on "/" inside is correct and no segments are needed.
     const parentCollectionIds = navigation.getParentCollectionIds(navigationPath);
     useEffect(() => {
         if (urlTab !== selectedTab) {
@@ -250,14 +252,17 @@ function EntityFullScreenRoute({
     // `fullIdPath` is used downstream to build URLs, so it carries the escaped chain;
     // `collectionPath` addresses the datasource, so it is resolved from the raw one.
     const fullIdPath = isNew ? lastCollectionEntry!.fullPath : (parentCollectionEntry?.fullPath ?? lastEntityEntry!.fullPath);
-    const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry!.path : lastEntityEntry!.path);
+    // The navigation entries know the real segment boundaries, so the path is resolved
+    // from them rather than re-parsed out of the flattened string.
+    const pathSegments = isNew ? lastCollectionEntry!.pathSegments : lastEntityEntry!.pathSegments;
+    const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry!.path : lastEntityEntry!.path, pathSegments);
     return <>
         <React.Suspense fallback={null}>
             <EntityEditView
                 key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
                 entityId={isNew ? undefined : entityId}
                 fullIdPath={fullIdPath}
-                pathSegments={isNew ? lastCollectionEntry!.pathSegments : lastEntityEntry!.pathSegments}
+                pathSegments={pathSegments}
                 collection={collection}
                 layout={"full_screen"}
                 path={collectionPath}

package/src/types/collections.ts

@@ -497,6 +497,14 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, USE
      */
     path: string;
 
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * Optional, and never derived by splitting `path` — a parent entity id may itself
+     * contain "/". Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
+
     /**
      * Path of the last collection, like `addresses`
      */

package/src/types/datasource.ts

@@ -283,6 +283,10 @@ export interface DataSource {
     initTextSearch?: (props: {
         context: FireCMSContext,
         path: string,
+    /**
+     * `path` split at its real segment boundaries, when known. Never derived from `path`.
+     */
+    pathSegments?: string[],
         collection: EntityCollection,
         parentCollectionIds?: string[]
     }) => Promise<boolean>;
@@ -453,6 +457,10 @@ export interface DataSourceDelegate {
     initTextSearch?: (props: {
         context: FireCMSContext,
         path: string,
+    /**
+     * `path` split at its real segment boundaries, when known. Never derived from `path`.
+     */
+    pathSegments?: string[],
         databaseId?: string,
         collection: EntityCollection,
         parentCollectionIds?: string[]

package/src/types/entity_actions.tsx

@@ -65,6 +65,12 @@ export type EntityActionClickProps<M extends object, USER extends User = User> =
     context: FireCMSContext<USER>;
 
     fullPath?: string;
+    /**
+     * `fullPath` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`,
+     * when the caller knows them. Absent means "not known here" — never derived from
+     * `fullPath`, since a parent id may itself contain "/".
+     */
+    pathSegments?: string[];
     fullIdPath?: string;
     collection?: EntityCollection<M>;
 

package/src/types/entity_callbacks.ts

@@ -86,6 +86,14 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, USER ex
      */
     path: string;
 
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * Optional, and never derived by splitting `path` — a parent entity id may itself
+     * contain "/". Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
+
     /**
      * Fetched entity
      */
@@ -133,6 +141,14 @@ export interface EntityOnSaveProps<M extends Record<string, any> = any, USER ext
      */
     path: string;
 
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * Optional, and never derived by splitting `path` — a parent entity id may itself
+     * contain "/". Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
+
     /**
      * Full path where this entity is being saved, with alias resolved
      */
@@ -180,6 +196,14 @@ export interface EntityOnDeleteProps<M extends Record<string, any> = any, USER e
      */
     path: string;
 
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * Optional, and never derived by splitting `path` — a parent entity id may itself
+     * contain "/". Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
+
     /**
      * Deleted entity id
      */

package/src/types/navigation.ts

@@ -57,8 +57,12 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
     /**
      * Get the collection configuration for a given path.
      * The collection is resolved from the given path or alias.
+     *
+     * Pass `pathSegments` when you have them: without them the path is split on "/" and
+     * asserted to have an odd number of parts, which a chain containing a slash-bearing
+     * entity id fails — it throws instead of resolving.
      */
-    getCollection: (pathOrId: string, includeUserOverride?: boolean) => EC | undefined;
+    getCollection: (pathOrId: string, includeUserOverride?: boolean, pathSegments?: string[]) => EC | undefined;
 
     /**
      * Get the top level collection configuration for a given id
@@ -118,9 +122,30 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
     /**
      * Turn a path with collection ids into a resolved path.
      * The ids (typically used in urls) will be replaced with relative paths (typically used in database paths)
+     *
+     * Pass `pathSegments` whenever you have them. Without them this has to find the entity
+     * ids inside the flattened string by reading up to the next "/", which is wrong for any
+     * id that contains one — the chain then shifts by a segment and resolution fails.
+     *
      * @param pathWithAliases
+     * @param pathSegments `pathWithAliases` split at its real segment boundaries, if known
      */
-    resolveIdsFrom: (pathWithAliases: string) => string;
+    resolveIdsFrom: (pathWithAliases: string, pathSegments?: string[]) => string;
+
+    /**
+     * The segment-wise counterpart of {@link resolveIdsFrom}: replaces collection ids with
+     * their real paths while carrying every entity id through whole, slashes included.
+     *
+     * Idempotent — segments that are already resolved pass through unchanged.
+     *
+     * Optional so that a `navigationController` built against an earlier version keeps
+     * working: callers fall back to using the segments as given, which is what happened
+     * before this method existed. Controllers built by `useBuildNavigationController`
+     * always provide it.
+     *
+     * @param pathSegments
+     */
+    resolveSegmentsFrom?: (pathSegments: string[]) => string[];
 
     /**
      * Call this method to recalculate the navigation
@@ -128,16 +153,21 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
     refreshNavigation: () => void;
 
     /**
-     * Retrieve all the related parent references for a given path
+     * Retrieve all the related parent references for a given path.
+     *
+     * `path` is expected escaped, as it comes from the URL. Pass `pathSegments` when the
+     * path at hand is a raw datasource path, whose ids may contain a bare "/".
+     *
      * @param path
+     * @param pathSegments `path` split at its real segment boundaries, with raw ids
      */
-    getParentReferencesFromPath: (path: string) => EntityReference[];
+    getParentReferencesFromPath: (path: string, pathSegments?: string[]) => EntityReference[];
 
     /**
      * Retrieve all the related parent collection ids for a given path
      * @param path
      */
-    getParentCollectionIds: (path: string) => string[];
+    getParentCollectionIds: (path: string, pathSegments?: string[]) => string[];
 
     /**
      * Resolve paths from a list of ids

package/src/types/plugins.tsx

@@ -146,6 +146,8 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         blockSearch?: (props: {
             context: FireCMSContext,
             path: string,
+            /** `path` split at its real segment boundaries, when known. */
+            pathSegments?: string[],
             collection: EC,
             parentCollectionIds?: string[]
         }) => boolean;
@@ -153,6 +155,8 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         showTextSearchBar?: (props: {
             context: FireCMSContext,
             path: string,
+            /** `path` split at its real segment boundaries, when known. */
+            pathSegments?: string[],
             collection: EC,
             parentCollectionIds?: string[]
         }) => boolean;
@@ -160,6 +164,8 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         onTextSearchClick?: (props: {
             context: FireCMSContext,
             path: string,
+            /** `path` split at its real segment boundaries, when known. */
+            pathSegments?: string[],
             collection: EC,
             parentCollectionIds?: string[]
         }) => Promise<boolean>;
@@ -308,6 +314,13 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
 export interface PluginFormActionProps<USER extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
+    /**
+     * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     *
+     * Optional, and never derived by splitting `path` — a parent entity id may itself
+     * contain "/". Absent means "not known here", not "no slashes".
+     */
+    pathSegments?: string[];
     parentCollectionIds: string[];
     status: EntityStatus;
     collection: EC;

package/src/types/side_entity_controller.tsx

@@ -21,8 +21,9 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
     fullIdPath?: string;
     /**
      * `path` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
-     * Optional: when omitted the panel falls back to splitting `path`, which is correct for
-     * any backend whose entity ids cannot contain "/".
+     *
+     * Optional, and never derived by splitting `path` — a guess would be wrong in exactly
+     * the case the field exists for. Absent means "not known here", not "no slashes".
      */
     pathSegments?: string[];
 

package/src/util/entity_cache.ts

@@ -1,5 +1,23 @@
 import { EntityReference, GeoPoint, Vector } from "../types";
 import { isObject, isPlainObject } from "./objects";
+import { encodeEntityId } from "./navigation_utils";
+
+/**
+ * Key identifying one entity in a cache.
+ *
+ * The id is escaped so that a `(path, entityId)` pair maps to exactly one key. Without it
+ * `("a", "b/c")` and `("a/b", "c")` both flatten to `"a/b/c"`, and one entity's cached
+ * values are served for the other.
+ *
+ * `encodeEntityId` is the identity for any id without "/", "?", "#" or "%", so this changes
+ * no key in an app whose ids cannot contain them.
+ */
+export function entityCacheKey(path: string | undefined, entityId: string | undefined): string {
+    // Either part may be undefined at a call site that used to build the key by string
+    // concatenation; both are stringified exactly as `path + "/" + entityId` did, so such a
+    // caller keeps the key it had.
+    return `${path}/${entityId === undefined ? entityId : encodeEntityId(entityId)}`;
+}
 
 // Define a unique prefix for entity keys in localStorage to avoid key collisions
 const LOCAL_STORAGE_PREFIX = "entity_cache::";

package/src/util/navigation_from_path.ts

@@ -147,7 +147,12 @@ export function getNavigationEntriesFromPath(props: {
                             path: newPath,
                             collections: collection.subcollections,
                             currentFullPath: fullPath,
-                            currentFullIdPath: fullIdPath,
+                            // The entity id is a hop in the id chain exactly as it is in the
+                            // other two. Without it a nested `fullIdPath` was
+                            // "products/locales" rather than "products/pid/locales", so any
+                            // URL built from it pointed at a collection that does not exist.
+                            // Escaped, because `fullIdPath` is URL-facing.
+                            currentFullIdPath: fullIdPath + "/" + encodedEntityId,
                             currentFullUrlPath: fullUrlPath,
                             currentPathSegments: entitySegments,
                             contextEntityViews: props.contextEntityViews