@firecms/core 3.4.0-canary.0ef7442 → 3.4.0-canary.1faa2a9

package/src/types/firecms_context.tsx

@@ -11,6 +11,7 @@ import { DialogsController } from "./dialogs_controller";
 import { CustomizationController } from "./customization_controller";
 import { AnalyticsController } from "./analytics_controller";
 import { InternalUserManagement } from "./internal_user_management";
+import { AccessResponse } from "./license";
 
 /**
  * Context that includes the internal controllers and contexts used by the app.
@@ -97,4 +98,12 @@ export type FireCMSContext<USER extends User = User, AuthControllerType extends
      */
     userManagement: InternalUserManagement<USER>
 
+    /**
+     * FireCMS license status of this project, `null` until the license check
+     * answers or when it is not sent. PRO plugins are paused while `blocked`
+     * is true.
+     * @see useLicenseStatus
+     */
+    licenseStatus?: AccessResponse | null;
+
 };

package/src/types/index.ts

@@ -29,3 +29,4 @@ export * from "./modify_collections";
 export * from "./analytics_controller";
 export * from "./customization_controller";
 export * from "./translations";
+export * from "./license";

package/src/types/license.ts

@@ -0,0 +1,62 @@
+/**
+ * What the FireCMS license check says about this project.
+ *
+ * - `not_required`: no PRO plugin is mounted.
+ * - `whitelisted`: the project is exempt from licensing.
+ * - `licensed`: a license covers this project.
+ * - `trial`: PRO plugins run on the free trial; see `daysLeft` and `trialEndsAt`.
+ * - `expired`: the trial ended without a license. PRO plugins are paused.
+ * - `invalid_project`: a license key was presented, but this project is not
+ *   linked to that license. PRO plugins are paused.
+ * - `over_quota`: the license has more projects linked than it pays for.
+ *   Nothing is paused.
+ *
+ * @group Models
+ */
+export type LicenseState =
+    | "not_required"
+    | "whitelisted"
+    | "licensed"
+    | "trial"
+    | "expired"
+    | "invalid_project"
+    | "over_quota";
+
+/**
+ * Response of the FireCMS license check (`POST https://api.firecms.co/access_log`).
+ *
+ * Servers older than the PRO relaunch send only `blocked` and `message`, so
+ * treat a missing `licenseState` as unknown. `blocked` is honoured either way.
+ *
+ * @group Models
+ */
+export type AccessResponse = {
+    /**
+     * True when the PRO plugins must be paused. The core CMS is never blocked.
+     */
+    blocked?: boolean;
+    licenseState?: LicenseState;
+    /**
+     * Number of projects the license pays for. Present with `licensed` and `over_quota`.
+     */
+    licensedProjects?: number;
+    /**
+     * Number of projects linked to the license.
+     */
+    linkedProjects?: number;
+    projectId?: string;
+    licenseId?: string;
+    /**
+     * ISO date the trial ends or ended. Present with `trial` and `expired`.
+     */
+    trialEndsAt?: string;
+    /**
+     * Whole days left in the trial, present with `trial`.
+     */
+    daysLeft?: number;
+    /**
+     * Where to get or update a license for this project.
+     */
+    subscribeUrl?: string;
+    message?: string;
+};

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

@@ -15,6 +15,9 @@ import { InternalUserManagement } from "./internal_user_management";
  * NOTE: This is a work in progress and the API is not stable yet.
  * @group Core
  */
+/** The strings a plugin contributes for one locale. */
+export type PluginTranslations = Record<string, string>;
+
 export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any, COL_ACTIONS_START__PROPS = any> = {
 
     /**
@@ -33,8 +36,14 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
      * locales, specific for this plugin.
      * Keys can be existing `FireCMSTranslations` keys, or new keys if using
      * module augmentation.
+     *
+     * A value may be the strings themselves, or a function returning a promise
+     * of them. Use the function form for locales you ship in the plugin bundle:
+     * only the active language is ever read, so importing all of them statically
+     * puts every language into the bundle of every app that mounts the plugin.
+     * Both forms are supported; a plain record keeps working unchanged.
      */
-    i18n?: Record<string, Record<string, string>>;
+    i18n?: Record<string, PluginTranslations | (() => Promise<PluginTranslations>)>;
 
     /**
      * You can use this prop to add higher order components to the CMS.
@@ -146,6 +155,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 +164,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 +173,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 +323,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/types/translations.ts

@@ -66,8 +66,32 @@ export interface FireCMSTranslations {
     select_from: string;
     done: string;
     log_out: string;
-    license_needed: string;
-    license_description: string;
+    /** License banner during the PRO trial. `{{days}}` is the number of days left; plural form. */
+    license_trial_banner: string;
+    /** `license_trial_banner` when one day is left (i18next `_one` plural form). */
+    license_trial_banner_one: string;
+    /** License banner once the trial has ended. `{{date}}` is the day it ended. */
+    license_expired_banner: string;
+    /** `license_expired_banner` when the end date is not known. */
+    license_expired_banner_undated: string;
+    /** License banner when the license key is not linked to this project. `{{projectId}}` is the Firebase project id. */
+    license_invalid_project_banner: string;
+    /** `license_invalid_project_banner` when the project id is not known. */
+    license_invalid_project_banner_unnamed: string;
+    /** License banner when more projects are linked than the license covers. `{{licensed}}` covered, `{{actual}}` linked; plural form. */
+    license_over_quota_banner: string;
+    /** `license_over_quota_banner` when the license covers one project (i18next `_one` plural form). */
+    license_over_quota_banner_one: string;
+    /** Link in the license banner to buy a license. */
+    license_get_license: string;
+    /** Link in the over-quota banner to the license settings. */
+    license_update_license: string;
+    /** Link in the invalid-project banner to link this project to the license. */
+    license_add_project_to_license: string;
+    /** Title of the notice a PRO view shows while PRO features are paused. */
+    pro_features_paused: string;
+    /** Users and Roles views while PRO features are paused. */
+    user_management_paused_description: string;
     column_cannot_be_edited: string;
     close: string;
     unsaved_local_changes: string;
@@ -470,6 +494,8 @@ export interface FireCMSTranslations {
     roles_menu: string;
     project_settings: string;
     firestore_manager: string;
+    /** The DataTalk product name, keyed so a locale can transliterate it. */
+    datatalk: string;
     manage_your_firestore_data: string;
 
     // ─── FireCMS Cloud Login ──────────────────────────────────────
@@ -486,6 +512,7 @@ export interface FireCMSTranslations {
     not_the_admin_panel: string;
     join_our_newsletter: string;
     by_signing_in_you_agree_to_our: string;
+    please_accept_the_terms_to_continue: string;
     terms_and_conditions: string;
     and_our: string;
     privacy_policy: string;
@@ -528,6 +555,8 @@ export interface FireCMSTranslations {
     licensed_projects_lowercase: string;
     manage: string;
     update_payment_method: string;
+    /** Snackbar when a Stripe billing portal link can't be created. `{{message}}` is the reason. */
+    stripe_portal_error: string;
     your_firecms_cloud_projects: string;
     status_active: string;
     status_trialing: string;

package/src/util/date_fns_locales.ts

@@ -0,0 +1,168 @@
+import { useEffect, useReducer } from "react";
+import type { Locale as DateFnsLocale } from "date-fns";
+import { Locale } from "../types";
+
+/**
+ * On-demand loading of date-fns locales.
+ *
+ * `import * as locales from "date-fns/locale"` pulls in every locale date-fns
+ * ships — 625KB of parsed JavaScript, loaded on every single page view, to
+ * support a `locale` setting that is unset for almost every project. Worse, it
+ * sat on the critical path: `@firecms/core` imported it statically, so the
+ * browser could not render anything until it had come down.
+ *
+ * Each locale now has its own dynamic import, so exactly one small chunk is
+ * fetched, and only when a project actually configures a locale. Projects that
+ * do not configure one (the default) pay nothing at all.
+ *
+ * The map is written out rather than built from a template literal because Vite
+ * and webpack both need the specifier to be statically analysable to emit the
+ * chunks.
+ */
+const loaders: Partial<Record<Locale, () => Promise<DateFnsLocale>>> = {
+    af: () => import("date-fns/locale/af").then(m => m.af),
+    ar: () => import("date-fns/locale/ar").then(m => m.ar),
+    arDZ: () => import("date-fns/locale/ar-DZ").then(m => m.arDZ),
+    arMA: () => import("date-fns/locale/ar-MA").then(m => m.arMA),
+    arSA: () => import("date-fns/locale/ar-SA").then(m => m.arSA),
+    az: () => import("date-fns/locale/az").then(m => m.az),
+    be: () => import("date-fns/locale/be").then(m => m.be),
+    bg: () => import("date-fns/locale/bg").then(m => m.bg),
+    bn: () => import("date-fns/locale/bn").then(m => m.bn),
+    ca: () => import("date-fns/locale/ca").then(m => m.ca),
+    cs: () => import("date-fns/locale/cs").then(m => m.cs),
+    cy: () => import("date-fns/locale/cy").then(m => m.cy),
+    da: () => import("date-fns/locale/da").then(m => m.da),
+    de: () => import("date-fns/locale/de").then(m => m.de),
+    el: () => import("date-fns/locale/el").then(m => m.el),
+    enAU: () => import("date-fns/locale/en-AU").then(m => m.enAU),
+    enCA: () => import("date-fns/locale/en-CA").then(m => m.enCA),
+    enGB: () => import("date-fns/locale/en-GB").then(m => m.enGB),
+    enIN: () => import("date-fns/locale/en-IN").then(m => m.enIN),
+    enNZ: () => import("date-fns/locale/en-NZ").then(m => m.enNZ),
+    enUS: () => import("date-fns/locale/en-US").then(m => m.enUS),
+    eo: () => import("date-fns/locale/eo").then(m => m.eo),
+    es: () => import("date-fns/locale/es").then(m => m.es),
+    et: () => import("date-fns/locale/et").then(m => m.et),
+    eu: () => import("date-fns/locale/eu").then(m => m.eu),
+    faIR: () => import("date-fns/locale/fa-IR").then(m => m.faIR),
+    fi: () => import("date-fns/locale/fi").then(m => m.fi),
+    fr: () => import("date-fns/locale/fr").then(m => m.fr),
+    frCA: () => import("date-fns/locale/fr-CA").then(m => m.frCA),
+    frCH: () => import("date-fns/locale/fr-CH").then(m => m.frCH),
+    gd: () => import("date-fns/locale/gd").then(m => m.gd),
+    gl: () => import("date-fns/locale/gl").then(m => m.gl),
+    gu: () => import("date-fns/locale/gu").then(m => m.gu),
+    he: () => import("date-fns/locale/he").then(m => m.he),
+    hi: () => import("date-fns/locale/hi").then(m => m.hi),
+    hr: () => import("date-fns/locale/hr").then(m => m.hr),
+    hu: () => import("date-fns/locale/hu").then(m => m.hu),
+    hy: () => import("date-fns/locale/hy").then(m => m.hy),
+    id: () => import("date-fns/locale/id").then(m => m.id),
+    is: () => import("date-fns/locale/is").then(m => m.is),
+    it: () => import("date-fns/locale/it").then(m => m.it),
+    ja: () => import("date-fns/locale/ja").then(m => m.ja),
+    ka: () => import("date-fns/locale/ka").then(m => m.ka),
+    kk: () => import("date-fns/locale/kk").then(m => m.kk),
+    kn: () => import("date-fns/locale/kn").then(m => m.kn),
+    ko: () => import("date-fns/locale/ko").then(m => m.ko),
+    lb: () => import("date-fns/locale/lb").then(m => m.lb),
+    lt: () => import("date-fns/locale/lt").then(m => m.lt),
+    lv: () => import("date-fns/locale/lv").then(m => m.lv),
+    mk: () => import("date-fns/locale/mk").then(m => m.mk),
+    ms: () => import("date-fns/locale/ms").then(m => m.ms),
+    mt: () => import("date-fns/locale/mt").then(m => m.mt),
+    nb: () => import("date-fns/locale/nb").then(m => m.nb),
+    nl: () => import("date-fns/locale/nl").then(m => m.nl),
+    nlBE: () => import("date-fns/locale/nl-BE").then(m => m.nlBE),
+    nn: () => import("date-fns/locale/nn").then(m => m.nn),
+    pl: () => import("date-fns/locale/pl").then(m => m.pl),
+    pt: () => import("date-fns/locale/pt").then(m => m.pt),
+    ptBR: () => import("date-fns/locale/pt-BR").then(m => m.ptBR),
+    ro: () => import("date-fns/locale/ro").then(m => m.ro),
+    ru: () => import("date-fns/locale/ru").then(m => m.ru),
+    sk: () => import("date-fns/locale/sk").then(m => m.sk),
+    sl: () => import("date-fns/locale/sl").then(m => m.sl),
+    sr: () => import("date-fns/locale/sr").then(m => m.sr),
+    srLatn: () => import("date-fns/locale/sr-Latn").then(m => m.srLatn),
+    sv: () => import("date-fns/locale/sv").then(m => m.sv),
+    ta: () => import("date-fns/locale/ta").then(m => m.ta),
+    te: () => import("date-fns/locale/te").then(m => m.te),
+    th: () => import("date-fns/locale/th").then(m => m.th),
+    tr: () => import("date-fns/locale/tr").then(m => m.tr),
+    ug: () => import("date-fns/locale/ug").then(m => m.ug),
+    uk: () => import("date-fns/locale/uk").then(m => m.uk),
+    uz: () => import("date-fns/locale/uz").then(m => m.uz),
+    vi: () => import("date-fns/locale/vi").then(m => m.vi),
+    zhCN: () => import("date-fns/locale/zh-CN").then(m => m.zhCN),
+    zhTW: () => import("date-fns/locale/zh-TW").then(m => m.zhTW),
+};
+
+const cache = new Map<Locale, DateFnsLocale>();
+const inFlight = new Map<Locale, Promise<DateFnsLocale | undefined>>();
+
+/**
+ * Load a date-fns locale, resolving from cache when it is already in memory.
+ * Concurrent callers for the same locale share one request.
+ */
+export function loadDateFnsLocale(locale: Locale): Promise<DateFnsLocale | undefined> {
+    const cached = cache.get(locale);
+    if (cached) {
+        return Promise.resolve(cached);
+    }
+    const pending = inFlight.get(locale);
+    if (pending) {
+        return pending;
+    }
+    const loader = loaders[locale];
+    if (!loader) {
+        // An unknown key behaves as it did when the whole barrel was imported:
+        // the lookup missed and date-fns fell back to its built-in English.
+        return Promise.resolve(undefined);
+    }
+    const promise = loader()
+        .then((loaded) => {
+            cache.set(locale, loaded);
+            return loaded;
+        })
+        .catch(() => undefined)
+        .finally(() => {
+            inFlight.delete(locale);
+        });
+    inFlight.set(locale, promise);
+    return promise;
+}
+
+/** The locale if it is already loaded, otherwise undefined. Never suspends. */
+export function getLoadedDateFnsLocale(locale?: Locale): DateFnsLocale | undefined {
+    return locale ? cache.get(locale) : undefined;
+}
+
+/**
+ * The date-fns locale for `locale`, loading it in the background on first use.
+ *
+ * Returns undefined until the chunk arrives, which formats the first paint with
+ * date-fns' built-in English and then re-renders. That is a change only for
+ * projects that set a locale, and only for the few hundred milliseconds before
+ * the chunk lands — in exchange for every project no longer waiting on 625KB.
+ */
+export function useDateFnsLocale(locale?: Locale): DateFnsLocale | undefined {
+    const [, forceUpdate] = useReducer((count: number) => count + 1, 0);
+
+    useEffect(() => {
+        if (!locale || cache.has(locale)) {
+            return;
+        }
+        let active = true;
+        loadDateFnsLocale(locale).then((loaded) => {
+            if (active && loaded) {
+                forceUpdate();
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [locale]);
+
+    return locale ? cache.get(locale) : undefined;
+}

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/index.ts

@@ -28,3 +28,4 @@ export * from "./storage";
 export * from "./callbacks";
 export * from "./conditions";
 export * from "./lazy_eager";
+export * from "./date_fns_locales";

package/src/util/lazy_eager.tsx

@@ -1,9 +1,35 @@
 import React from "react";
 
 /**
- * Returns a React.lazy component that is also preloaded immediately using
- * requestIdleCallback or setTimeout.
- * This ensures that chunks are split, but fetched in the background before they are actually needed.
+ * Prefetch after the page has loaded, never during it.
+ *
+ * An idle callback scheduled at module evaluation time fires in the gaps between
+ * the tasks of the initial load — which is exactly when the critical chunks are
+ * still in flight. With a dozen route components each queueing one, the
+ * background prefetch was competing with the render path for connections and
+ * bandwidth. Waiting for the load event costs the prefetch nothing that matters:
+ * it exists to be ready before a navigation, not before first paint.
+ */
+function schedulePrefetch(load: () => void) {
+    const whenIdle = () => {
+        if ("requestIdleCallback" in window) {
+            (window as any).requestIdleCallback(load);
+        } else {
+            setTimeout(load, 500);
+        }
+    };
+
+    if (document.readyState === "complete") {
+        whenIdle();
+    } else {
+        window.addEventListener("load", whenIdle, { once: true });
+    }
+}
+
+/**
+ * Returns a React.lazy component that is also preloaded in the background, once
+ * the page has finished loading.
+ * This ensures that chunks are split, but fetched before they are actually needed.
  */
 export function lazyEager<T extends React.ComponentType<any>>(
     factory: () => Promise<any>,
@@ -22,11 +48,7 @@ export function lazyEager<T extends React.ComponentType<any>>(
     };
 
     if (typeof window !== "undefined") {
-        if ("requestIdleCallback" in window) {
-            (window as any).requestIdleCallback(load);
-        } else {
-            setTimeout(load, 500);
-        }
+        schedulePrefetch(load);
     }
 
     return React.lazy(load);

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