@firecms/core 3.4.0-canary.63041d0 → 3.4.0-canary.cb27f16

package/src/hooks/data/useEntityFetch.tsx

@@ -3,6 +3,7 @@ import { Entity, EntityCollection, FireCMSContext, User } from "../../types";
 import { useDataSource } from "./useDataSource";
 import { useNavigationController } from "../useNavigationController";
 import { useFireCMSContext } from "../useFireCMSContext";
+import { entityCacheKey } from "../../util/entity_cache";
 
 /**
  * @group Hooks and utilities
@@ -11,7 +12,10 @@ export interface EntityFetchProps<M extends Record<string, any>, USER extends Us
     path: string;
     /**
      * `path` split at its real segment boundaries. Forwarded to the datasource so a parent
-     * entity id containing "/" stays unambiguous. Defaults to splitting the resolved path.
+     * entity id containing "/" stays unambiguous.
+     *
+     * 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[];
     entityId?: string;
@@ -54,8 +58,19 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveIdsFrom(inputPath);
-    const pathSegments = inputPathSegments ?? path.split("/");
+    // Never fabricate segments. If the caller did not thread them, pass undefined so a
+    // delegate can tell "not provided" from a real answer — splitting `path` here would
+    // produce a confidently wrong array for any id containing "/".
+    //
+    // When they were threaded, both representations are resolved from them together, so
+    // `path` cannot end up describing a different chain than `pathSegments`.
+    // `resolveSegmentsFrom` is optional on the controller: a host app may be supplying one
+    // built against an earlier version. Falling back to the segments as given is what
+    // happened before it existed — they are used unresolved, never invented.
+    const pathSegments = inputPathSegments
+        ? (navigationController.resolveSegmentsFrom?.(inputPathSegments) ?? inputPathSegments)
+        : undefined;
+    const path = navigationController.resolveIdsFrom(inputPath, inputPathSegments);
 
     const context: FireCMSContext<USER> = useFireCMSContext();
 
@@ -68,11 +83,18 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
         setDataLoading(true);
 
         const onEntityUpdate = async (updatedEntity: Entity<M> | undefined) => {
+            // Attach the segments this entity was loaded with, so anything derived from it
+            // later — a reference, a delete — stays resolvable without re-deriving them
+            // from the flattened path. Delegates are not required to set this themselves.
+            if (updatedEntity && pathSegments && !updatedEntity.pathSegments) {
+                updatedEntity = { ...updatedEntity, pathSegments };
+            }
             if (collection.callbacks?.onFetch && updatedEntity) {
                 try {
                     updatedEntity = await collection.callbacks.onFetch({
                         collection,
                         path,
+                        pathSegments,
                         entity: updatedEntity,
                         context
                     });
@@ -80,7 +102,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                     console.error(e);
                 }
             }
-            CACHE[`${path}/${entityId}`] = updatedEntity;
+            CACHE[entityCacheKey(path, entityId)] = updatedEntity;
             setEntity(updatedEntity);
             setDataLoading(false);
             setDataLoadingError(undefined);
@@ -93,8 +115,8 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
             setDataLoadingError(error);
         };
 
-        if (entityId && useCache && CACHE[`${path}/${entityId}`]) {
-            setEntity(CACHE[`${path}/${entityId}`]);
+        if (entityId && useCache && CACHE[entityCacheKey(path, entityId)]) {
+            setEntity(CACHE[entityCacheKey(path, entityId)]);
             setDataLoading(false);
             setDataLoadingError(undefined);
             // eslint-disable-next-line @typescript-eslint/no-empty-function

package/src/hooks/useBuildNavigationController.tsx

@@ -22,11 +22,14 @@ import {
 } from "../types";
 import {
     applyPermissionsFunctionIfEmpty,
+    collectionSegmentsFrom,
+    fullPathToCollectionSegments,
     getCollectionByPathOrId,
     mergeDeep,
     removeFunctions,
     removeInitialAndTrailingSlashes,
     resolveCollectionPathIds,
+    resolveCollectionPathSegments,
     resolvePermissions
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
@@ -405,13 +408,14 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const getCollection = useCallback((
         idOrPath: string,
-        includeUserOverride = false
+        includeUserOverride = false,
+        pathSegments?: string[]
     ): EC | undefined => {
         const collections = collectionsRef.current;
         if (!collections)
             return undefined;
 
-        const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections);
+        const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections, pathSegments);
 
         const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
         let overriddenCollection = baseCollection;
@@ -505,23 +509,33 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
-    const resolveIdsFrom = useCallback((path: string): string => {
+    const resolveIdsFrom = useCallback((path: string, pathSegments?: string[]): string => {
         const collections = collectionsRef.current ?? [];
-        return resolveCollectionPathIds(path, collections);
+        return resolveCollectionPathIds(path, collections, pathSegments);
     }, []);
 
-    const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
+    const resolveSegmentsFrom = useCallback((pathSegments: string[]): string[] => {
+        const collections = collectionsRef.current ?? [];
+        return resolveCollectionPathSegments(pathSegments, collections);
+    }, []);
+
+    const getAllParentReferencesForPath = useCallback((path: string, pathSegments?: string[]): EntityReference[] => {
         const collections = collectionsRef.current ?? [];
         return getParentReferencesFromPath({
             path,
+            pathSegments,
             collections
         });
     }, []);
 
-    const getParentCollectionIds = useCallback((path: string): string[] => {
+    const getParentCollectionIds = useCallback((path: string, pathSegments?: string[]): string[] => {
 
-        const strings = path.split("/");
-        const oddPathSegments = strings.filter((_, i) => i % 2 === 0);
+        // Positional filtering only picks out the collection segments while no entity id
+        // contains "/"; with one, every following segment shifts. Given the real boundaries
+        // the same rule applies correctly; without them this is the historical reading.
+        const oddPathSegments = pathSegments
+            ? collectionSegmentsFrom(pathSegments)
+            : fullPathToCollectionSegments(path);
         oddPathSegments.pop();
 
         const result: string[][] = [];
@@ -567,6 +581,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         urlPathToDataPath,
         buildUrlCollectionPath,
         resolveIdsFrom,
+        resolveSegmentsFrom,
         topLevelNavigation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -80,12 +80,14 @@ export function resolveNavigationFrom<M extends Record<string, any>, USER extend
             if (entry.type === "collection") {
                 return Promise.resolve(entry);
             } else if (entry.type === "entity") {
-                const collection = navigation.getCollection(entry.path);
+                const collection = navigation.getCollection(entry.path, false, entry.pathSegments);
                 if (!collection) {
                     throw Error(`No collection defined in the navigation for the entity with path ${entry.path}`);
                 }
                 return dataSource.fetchEntity({
                     path: entry.path,
+                    // The navigation entry already knows the real segment boundaries.
+                    pathSegments: entry.pathSegments,
                     entityId: entry.entityId,
                     collection
                 })

package/src/i18n/FireCMSi18nProvider.tsx

@@ -1,6 +1,6 @@
-import React, { PropsWithChildren, useEffect, useRef } from "react";
+import React, { PropsWithChildren, useContext, useEffect, useMemo, useRef } from "react";
 import i18next, { i18n } from "i18next";
-import { I18nextProvider, initReactI18next } from "react-i18next";
+import { I18nContext, I18nextProvider, initReactI18next } from "react-i18next";
 import { en } from "../locales/en";
 import { es } from "../locales/es";
 import { de } from "../locales/de";
@@ -50,16 +50,48 @@ export function FireCMSi18nProvider({
     translations,
     children
 }: PropsWithChildren<FireCMSi18nProviderProps>) {
+
+    // A FireCMS i18next instance already in context means this provider is nested —
+    // e.g. FireCMSCloudApp mounts one inside the one the host app already mounted.
+    // A second instance built only from the defaults would shadow the parent's and
+    // silently drop every translation the host registered, leaving the host's own
+    // strings to render as raw keys.
+    //
+    // So the nested instance is *seeded* from the parent's resources rather than
+    // sharing them. Sharing one mutable instance was the obvious alternative and is
+    // wrong: bundles added by one provider outlive it, so opening one project's app
+    // and then switching to another left the first project's translations answering
+    // for keys the second never defined. Copying keeps each provider's strings to
+    // itself, which is also how this behaved before nesting was handled at all.
+    const parentI18n = useContext(I18nContext)?.i18n;
+    const parentInstance = parentI18n?.hasResourceBundle?.("en", FIRECMS_NS)
+        ? parentI18n
+        : undefined;
+
     const i18nRef = useRef<i18n | null>(null);
     const [ready, setReady] = React.useState(false);
 
     if (!i18nRef.current) {
         const instance = i18next.createInstance();
 
-        // Build the initial resources: English baseline + any consumer overrides
+        // English baseline + this provider's overrides, with anything the parent
+        // already resolved layered in underneath the overrides.
         const resources = buildResources(translations);
+        if (parentInstance) {
+            const inherited: Record<string, any> = parentInstance.services?.resourceStore?.data ?? {};
+            for (const [lang, namespaces] of Object.entries(inherited)) {
+                const bundle = (namespaces as any)?.[FIRECMS_NS];
+                if (!bundle) continue;
+                resources[lang] = {
+                    [FIRECMS_NS]: {
+                        ...bundle,
+                        ...(translations?.[lang] ?? {})
+                    }
+                };
+            }
+        }
 
-        let initialLocale = locale;
+        let initialLocale = parentInstance?.language ?? locale;
         if (typeof window !== "undefined") {
             const stored = localStorage.getItem(FIRECMS_LOCALE_STORAGE_KEY);
             if (stored) initialLocale = stored;
@@ -90,6 +122,18 @@ export function FireCMSi18nProvider({
         i18nRef.current = instance;
     }
 
+    // Follow the parent's language, so a switch made outside this provider is not
+    // stranded on the other side of the boundary.
+    useEffect(() => {
+        if (!parentInstance || !i18nRef.current) return;
+        const instance = i18nRef.current;
+        const follow = (lng: string) => {
+            if (instance.language !== lng) instance.changeLanguage(lng);
+        };
+        parentInstance.on("languageChanged", follow);
+        return () => { parentInstance.off("languageChanged", follow); };
+    }, [parentInstance]);
+
     // When `locale` prop changes, switch language on the existing instance
     // ONLY if the user hasn't explicitly set a preference
     useEffect(() => {

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

@@ -0,0 +1,91 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { useTranslation } from "react-i18next";
+import { FireCMSi18nProvider } from "../FireCMSi18nProvider";
+
+/** Reads a key through the same channel application code uses. */
+function Str({ k }: { k: string }) {
+    const { t } = useTranslation("firecms_core");
+    return <span data-testid={k}>{t(k)}</span>;
+}
+
+const HOST_TRANSLATIONS = {
+    en: {
+        host_only_key: "Explore your Firestore data",
+        save: "Publish"      // an override of a real core key
+    }
+} as any;
+
+describe("FireCMSi18nProvider", () => {
+
+    beforeEach(() => {
+        window.localStorage.clear();
+    });
+
+    it("resolves its own translations", () => {
+        render(
+            <FireCMSi18nProvider translations={HOST_TRANSLATIONS}>
+                <Str k={"host_only_key"}/>
+            </FireCMSi18nProvider>
+        );
+        expect(screen.getByTestId("host_only_key").textContent).toBe("Explore your Firestore data");
+    });
+
+    it("keeps the host's translations when a nested provider is mounted without any", () => {
+        // This is the FireCMSCloudApp case: it mounts its own provider with
+        // `translations={appConfig?.translations}`, which is undefined for every
+        // project that has not deployed custom code. A nested provider that built its
+        // own isolated instance would shadow the host's and render the raw key.
+        render(
+            <FireCMSi18nProvider translations={HOST_TRANSLATIONS}>
+                <FireCMSi18nProvider translations={undefined}>
+                    <Str k={"host_only_key"}/>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        expect(screen.getByTestId("host_only_key").textContent).toBe("Explore your Firestore data");
+        expect(screen.getByTestId("host_only_key").textContent).not.toBe("host_only_key");
+    });
+
+    it("does not let a nested provider clobber a host override", () => {
+        render(
+            <FireCMSi18nProvider translations={HOST_TRANSLATIONS}>
+                <FireCMSi18nProvider translations={undefined}>
+                    <Str k={"save"}/>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        expect(screen.getByTestId("save").textContent).toBe("Publish");
+    });
+
+    it("lets a nested provider add its own translations on top of the host's", () => {
+        render(
+            <FireCMSi18nProvider translations={HOST_TRANSLATIONS}>
+                <FireCMSi18nProvider translations={{ en: { nested_key: "From the nested provider" } } as any}>
+                    <>
+                        <Str k={"host_only_key"}/>
+                        <Str k={"nested_key"}/>
+                    </>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        expect(screen.getByTestId("host_only_key").textContent).toBe("Explore your Firestore data");
+        expect(screen.getByTestId("nested_key").textContent).toBe("From the nested provider");
+    });
+
+    it("still serves the built-in core strings through a nested provider", () => {
+        render(
+            <FireCMSi18nProvider>
+                <FireCMSi18nProvider translations={undefined}>
+                    <Str k={"discard"}/>
+                </FireCMSi18nProvider>
+            </FireCMSi18nProvider>
+        );
+        const el = screen.getByTestId("discard");
+        expect(el.textContent).not.toBe("discard");
+        expect(el.textContent?.length).toBeGreaterThan(0);
+    });
+});

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>;
             });
@@ -303,12 +309,15 @@ export function useBuildDataSource({
         deleteEntity: useCallback(<M extends Record<string, any>>(
             {
                 entity,
+                pathSegments,
                 collection
             }: DeleteEntityProps<M>
         ): Promise<void> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
             return usedDelegate.deleteEntity({
                 entity,
+                // Falls back to what the entity carries from the fetch that produced it.
+                pathSegments: pathSegments ?? entity.pathSegments,
                 collection
             });
         }, [delegate.deleteEntity]),
@@ -328,33 +337,32 @@ export function useBuildDataSource({
             name: string,
             value: any,
             entityId?: string,
-            collection?: EntityCollection
+            collection?: EntityCollection,
+            pathSegments?: string[]
         ): Promise<boolean> => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
-            return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
+            return usedDelegate.checkUniqueField(path, name, value, entityId, collection, pathSegments);
         }, [delegate.checkUniqueField]),
 
-        generateEntityId: useCallback((path: string, collection: EntityCollection): string => {
+        generateEntityId: useCallback((path: string, collection: EntityCollection, pathSegments?: string[]): string => {
             const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
-            return usedDelegate.generateEntityId(path, collection);
+            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,
             collection,
             filter,
             order,
             orderBy
-        }: {
-            path: 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,
+                pathSegments,
                 filter,
                 orderBy,
                 order,
@@ -364,11 +372,13 @@ export function useBuildDataSource({
 
         isFilterCombinationValid: useCallback(({
             path,
+            pathSegments,
             databaseId,
             filterValues,
             sortBy
         }: {
             path: string,
+            pathSegments?: string[],
             databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
@@ -378,6 +388,7 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    pathSegments,
                     databaseId,
                     filterValues,
                     sortBy

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}