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

package/src/components/EntityPreview.tsx

@@ -63,7 +63,7 @@ export function EntityPreview({
 
     const navigationController = useNavigationController();
 
-    const collection = collectionProp ?? navigationController.getCollection(entity.path);
+    const collection = collectionProp ?? navigationController.getCollection(entity.path, false, entity.pathSegments);
 
     if (!collection) {
         throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
@@ -177,6 +177,9 @@ export function EntityPreview({
                         sideEntityController.open({
                             entityId: entity.id,
                             path: entity.path,
+                            // Paired with `entity.path` above; undefined if the entity was
+                            // loaded without them.
+                            pathSegments: entity.pathSegments,
                             collection,
                             updateUrl: true
                         });

package/src/components/ErrorBoundary.tsx

@@ -4,17 +4,16 @@ import { useTranslation } from "../hooks/useTranslation";
 import { ErrorIcon, Typography } from "@firecms/ui";
 
 export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
-    hasError: boolean,
-    error?: Error
+    error: Error | null
 }> {
     constructor(props: any) {
         super(props);
-        this.state = { hasError: false };
+        this.state = { error: null };
     }
 
     // eslint-disable-next-line n/handle-callback-err
     static getDerivedStateFromError(error: Error) {
-        return { hasError: true, error };
+        return { error };
     }
 
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -23,9 +22,8 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
     }
 
     render() {
-        if (this.state.hasError) {
-            // You can render any custom fallback UI
-            return <FallbackView message={this.state.error?.message}/>;
+        if (this.state.error) {
+            return <FallbackView message={this.state.error.message}/>;
         }
 
         return this.props.children;
@@ -35,18 +33,14 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
 function FallbackView({ message }: { message?: string }) {
     const { t } = useTranslation();
     return (
-        <div className="h-full w-full bg-slate-100 dark:bg-surface-900 flex items-center justify-center p-4">
-            <div
-                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-surface-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-surface-700">
-                <div className="flex items-center mb-4 text-red-500 dark:text-red-400">
-                    <ErrorIcon/>
-                    <div className="ml-4">{t("error")}</div>
-                </div>
-                <div className="flex justify-center text-gray-500 dark:text-gray-400">
-                    {/* Error message is purposely removed since it's hard to access state here, but typical ErrorBoundary fallback doesn't always show the raw message */}
-                    {t("see_console_details")}
-                </div>
+        <div className="flex flex-col m-2">
+            <div className="flex items-center m-2">
+                <ErrorIcon color={"error"} size={"small"}/>
+                <div className="ml-4">{t("error")}</div>
             </div>
+            <Typography variant={"caption"}>
+                {message ?? t("see_console_details")}
+            </Typography>
         </div>
     );
 }

package/src/components/LicenseBanner.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from "react";
+import { Alert, Button, CloseIcon, IconButton } from "@firecms/ui";
+import { AccessResponse } from "../types";
+import { getLicenseSubscribeUrl } from "../core/pro_plugins";
+import { useLicenseStatus } from "../hooks/useLicenseStatus";
+import { useTranslation } from "../hooks/useTranslation";
+
+const DISMISSED_STORAGE_KEY = "firecms_license_banner_dismissed";
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * @group Components
+ */
+export interface LicenseBannerProps {
+    /**
+     * Applied to the banner's outer element when there is something to show.
+     */
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+type BannerContent = {
+    state: string;
+    color: "info" | "warning";
+    message: string;
+    linkLabel: string;
+    href: string;
+    dismissible: boolean;
+};
+
+/**
+ * Tells the user where their FireCMS PRO license stands: days left in the
+ * trial, a paused state, or a license that covers fewer projects than are
+ * linked to it. Renders nothing when licensed, when no license is needed, and
+ * while the status is unknown.
+ *
+ * The default `Scaffold` already renders it above the main content. Place it
+ * yourself only in a custom layout.
+ *
+ * @group Components
+ */
+export function LicenseBanner({
+                                  className,
+                                  style
+                              }: LicenseBannerProps) {
+
+    const licenseStatus = useLicenseStatus();
+    const { t, i18n } = useTranslation();
+
+    // States dismissed in this browser session; a different state shows again.
+    const [dismissed, setDismissed] = useState<string[]>(readDismissed);
+
+    // `language`, not `resolvedLanguage`: locale bundles are added after init,
+    // and `resolvedLanguage` stays on the English fallback when they are.
+    const content = licenseStatus
+        ? buildBannerContent(licenseStatus, t, i18n?.language)
+        : null;
+
+    if (!content || (content.dismissible && dismissed.includes(content.state)))
+        return null;
+
+    const dismiss = () => {
+        const next = [...dismissed, content.state];
+        writeDismissed(next);
+        setDismissed(next);
+    };
+
+    return (
+        <div className={className} style={style}>
+            <Alert
+                color={content.color}
+                size={"small"}
+                className={"text-sm"}
+                action={<div className={"flex flex-row items-center gap-1 flex-shrink-0"}>
+                    <Button
+                        variant={"text"}
+                        size={"small"}
+                        component={"a"}
+                        href={content.href}
+                        target={"_blank"}
+                        rel={"noopener noreferrer"}>
+                        {content.linkLabel}
+                    </Button>
+                    {content.dismissible && <IconButton
+                        size={"small"}
+                        aria-label={t("close")}
+                        onClick={dismiss}>
+                        <CloseIcon size={"small"}/>
+                    </IconButton>}
+                </div>}>
+                {content.message}
+            </Alert>
+        </div>
+    );
+}
+
+type Translate = ReturnType<typeof useTranslation>["t"];
+
+function buildBannerContent(status: AccessResponse,
+                            t: Translate,
+                            language: string | undefined): BannerContent | null {
+    const href = getLicenseSubscribeUrl(status);
+    switch (status.licenseState) {
+        case "trial": {
+            const days = trialDaysLeft(status);
+            if (days === null) return null;
+            return {
+                state: "trial",
+                color: "info",
+                message: t("license_trial_banner", {
+                    count: days,
+                    days: String(days)
+                }),
+                linkLabel: t("license_get_license"),
+                href,
+                dismissible: true
+            };
+        }
+        case "expired": {
+            const date = formatDate(status.trialEndsAt, language);
+            return {
+                state: "expired",
+                color: "warning",
+                message: date
+                    ? t("license_expired_banner", { date })
+                    : t("license_expired_banner_undated"),
+                linkLabel: t("license_get_license"),
+                href,
+                dismissible: false
+            };
+        }
+        case "invalid_project":
+            return {
+                state: "invalid_project",
+                color: "warning",
+                message: status.projectId
+                    ? t("license_invalid_project_banner", { projectId: status.projectId })
+                    : t("license_invalid_project_banner_unnamed"),
+                linkLabel: t("license_add_project_to_license"),
+                href,
+                dismissible: false
+            };
+        case "over_quota": {
+            const licensed = status.licensedProjects;
+            const actual = status.linkedProjects;
+            if (!isCount(licensed) || !isCount(actual)) return null;
+            return {
+                state: "over_quota",
+                color: "info",
+                message: t("license_over_quota_banner", {
+                    count: licensed,
+                    licensed: String(licensed),
+                    actual: String(actual)
+                }),
+                linkLabel: t("license_update_license"),
+                href,
+                dismissible: true
+            };
+        }
+        default:
+            // licensed, not_required, whitelisted, and servers too old to say
+            return null;
+    }
+}
+
+function isCount(value: unknown): value is number {
+    return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
+
+function trialDaysLeft(status: AccessResponse): number | null {
+    if (isCount(status.daysLeft)) return Math.ceil(status.daysLeft);
+    const end = status.trialEndsAt ? new Date(status.trialEndsAt).getTime() : NaN;
+    if (Number.isNaN(end)) return null;
+    return Math.max(0, Math.ceil((end - Date.now()) / DAY_MS));
+}
+
+function formatDate(iso: string | undefined, language: string | undefined): string | null {
+    if (!iso) return null;
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return null;
+    const options: Intl.DateTimeFormatOptions = {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+    };
+    try {
+        return new Intl.DateTimeFormat(language, options).format(date);
+    } catch {
+        return date.toLocaleDateString(undefined, options);
+    }
+}
+
+function readDismissed(): string[] {
+    try {
+        const value = sessionStorage.getItem(DISMISSED_STORAGE_KEY);
+        const parsed = value ? JSON.parse(value) : [];
+        return Array.isArray(parsed) ? parsed.filter((s): s is string => typeof s === "string") : [];
+    } catch {
+        return [];
+    }
+}
+
+function writeDismissed(states: string[]) {
+    try {
+        sessionStorage.setItem(DISMISSED_STORAGE_KEY, JSON.stringify(states));
+    } catch {
+        // Private mode or storage disabled: dismissed for this page view only.
+    }
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -120,7 +120,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveIdsFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput, pathSegments);
 
     const dataSource = useDataSource(collection);
 
@@ -215,6 +215,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         });
         sideEntityController.open({
             path: fullPath,
+            pathSegments,
             collection,
             updateUrl: true,
             onUpdate: ({ entity }) => {
@@ -288,6 +289,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         textSearchEnabled
     } =
         useTableSearchHelper({
+            pathSegments,
             collection,
             fullPath,
         });
@@ -326,6 +328,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         actions={<ReferenceDialogActions
                             collection={collection}
                             path={fullPath}
+                            pathSegments={pathSegments}
                             onNewClick={onNewClick}
                             onClear={onClear}/>
                         }
@@ -352,11 +355,14 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 function ReferenceDialogActions({
                                     collection,
                                     path,
+                                    pathSegments,
                                     onClear,
                                     onNewClick
                                 }: {
     collection: EntityCollection<any>,
     path: string,
+    /** `path` split at its real segment boundaries, when known. Never derived from `path`. */
+    pathSegments?: string[],
     onClear: () => void,
     onNewClick: () => void
 }) {
@@ -371,7 +377,7 @@ function ReferenceDialogActions({
             onNewClick();
         }
         : undefined;
-    const addButton = canCreateEntity(collection, authController, path, null) &&
+    const addButton = canCreateEntity(collection, authController, path, null, pathSegments) &&
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}

package/src/components/common/default_entity_actions.tsx

@@ -18,6 +18,7 @@ export const editEntityAction: EntityAction = {
                 entity,
                 collection,
                 fullPath,
+                pathSegments,
                 fullIdPath,
                 context,
                 highlightEntity,
@@ -41,6 +42,12 @@ export const editEntityAction: EntityAction = {
         }
 
         const path = collection?.collectionGroup ? entity.path : (fullPath ?? collection?.path ?? entity.path);
+        // In a collection group `path` is the entity's own, so the entity's segments describe
+        // it. Otherwise the caller's segments win, falling back to the ones the entity was
+        // loaded with — both describe the same collection. Never derived from `path`.
+        const resolvedPathSegments = collection?.collectionGroup
+            ? entity.pathSegments
+            : (pathSegments ?? entity.pathSegments);
         const newFullIdPath = collection?.collectionGroup ? collection.id : (fullIdPath ?? collection?.id ?? entity.path);
         const defaultSelectedView = resolveDefaultSelectedView(
             collection ? collection.defaultSelectedView : undefined,
@@ -54,6 +61,7 @@ export const editEntityAction: EntityAction = {
             collection,
             entityId: entity.id,
             path,
+            pathSegments: resolvedPathSegments,
             fullIdPath: newFullIdPath,
             sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
@@ -75,6 +83,8 @@ export const copyEntityAction: EntityAction = {
                 collection,
                 context,
                 fullPath,
+                pathSegments,
+                fullIdPath,
                 highlightEntity,
                 unhighlightEntity,
                 openEntityMode
@@ -89,13 +99,23 @@ export const copyEntityAction: EntityAction = {
         });
 
         const path = collection?.collectionGroup ? collection.path : (fullPath ?? collection?.path ?? entity.path);
-        const fullIdPath = collection?.collectionGroup ? collection.id : (fullPath ?? collection?.id ?? entity.path);
+        // In a collection group `path` is the group's own root, which the entity's segments
+        // (its real nested location) do not describe — so they are deliberately not reused,
+        // and no substitute is invented.
+        const resolvedPathSegments = collection?.collectionGroup
+            ? undefined
+            : (pathSegments ?? entity.pathSegments);
+        // `fullIdPath` is the ESCAPED chain and is what becomes the URL; `fullPath` is the raw
+        // datasource path, whose parent ids may contain "/". Using the latter here wrote a URL
+        // that read back as a different entity. Mirrors editEntityAction.
+        const newFullIdPath = collection?.collectionGroup ? collection.id : (fullIdPath ?? collection?.id);
         navigateToEntity({
             openEntityMode,
             collection,
             entityId: entity.id,
             path,
-            fullIdPath,
+            pathSegments: resolvedPathSegments,
+            fullIdPath: newFullIdPath,
             copy: true,
             sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),

package/src/components/common/useDataSourceTableController.tsx

@@ -27,8 +27,10 @@ export type DataSourceTableControllerProps<M extends Record<string, any> = any>
     fullPath: string;
     /**
      * `fullPath` split at its real segment boundaries. Passed through to the datasource so
-     * a parent entity id containing "/" stays unambiguous. Defaults to splitting
-     * `fullPath`, which is correct for any backend whose ids cannot contain "/".
+     * 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[];
     /**
@@ -94,9 +96,12 @@ 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]);
-    // Passed through as-is; never derived from `resolvedPath` (see useEntityFetch).
-    const resolvedPathSegments = pathSegments;
+    // 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);
@@ -189,11 +194,23 @@ export function useDataSourceTableController<M extends Record<string, any> = any
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
-    const collectionScroll = scrollRestoration?.getCollectionScroll(fullPath, filterValues);
-    const initialItemCount = collectionScroll?.data.length ?? pageSize;
+    // Keyed by `resolvedPath`, not `fullPath`, so the read agrees with the two writes below
+    // and in `onScroll`. What the cache holds is a slice of a dataset plus the offset into
+    // it, and the dataset is identified by what the datasource was actually queried with:
+    // `resolvedPath` + filters. Reading with the unresolved `fullPath` meant that for every
+    // collection reached through an id alias, or a subcollection whose parent ids need
+    // resolving, the entry was written under one key and looked up under another, so scroll
+    // restoration silently did nothing there.
+    const collectionScroll = scrollRestoration?.getCollectionScroll(resolvedPath, filterValues);
+    const initialItemCount = collectionScroll?.data.length || pageSize;
 
     useEffect(() => {
-        if (scrollRestoration) {
+        // Only re-seed an entry we actually have something to restore for. Writing an empty
+        // `data` array here poisoned the cache: this is a module level Map that outlives the
+        // mount, so the next mount of the same collection read `data.length === 0` back as the
+        // initial item count and called the datasource with `limit: 0`. Custom datasources
+        // treat that as falsy and drop the limit altogether, loading the whole collection.
+        if (scrollRestoration && rawData.length > 0) {
             scrollRestoration.updateCollectionScroll({
                 fullPath: resolvedPath,
                 scrollOffset: collectionScroll?.scrollOffset ?? 0,
@@ -247,6 +264,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
                             collection.callbacks!.onFetch!({
                                 collection,
                                 path: resolvedPath,
+                                pathSegments: resolvedPathSegments,
                                 entity,
                                 context
                             })));

package/src/components/common/useTableSearchHelper.ts

@@ -6,6 +6,8 @@ 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
@@ -18,6 +20,7 @@ export interface UseTableSearchHelperParams<M extends Record<string, any>> {
 export function useTableSearchHelper<M extends Record<string, any>>({
                                                                         collection,
                                                                         fullPath,
+                                                                        pathSegments,
                                                                         parentCollectionIds,
                                                                         initialSearchString
                                                                     }: UseTableSearchHelperParams<M>) {
@@ -36,6 +39,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
     const props = {
         context,
         path: fullPath,
+        pathSegments,
         databaseId: collection.databaseId,
         collection,
         parentCollectionIds
@@ -62,6 +66,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
                             promises.push(p.collectionView.onTextSearchClick({
                                 context,
                                 path: fullPath,
+                                pathSegments,
                                 collection,
                                 parentCollectionIds
                             }));

package/src/components/index.tsx

@@ -43,3 +43,4 @@ export * from "./EntityPreview";
 
 export * from "./AIIcon";
 export * from "./LanguageToggle";
+export * from "./LicenseBanner";

package/src/contexts/LicenseStatusContext.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { AccessResponse } from "../types";
+
+/**
+ * License status of the enclosing `FireCMS`. `undefined` means there is no
+ * `FireCMS` above; `null` means the check has not answered (or was skipped).
+ * @internal
+ */
+export const LicenseStatusContext = React.createContext<AccessResponse | null | undefined>(undefined);
+
+/*
+ * The same status, published outside React's tree.
+ *
+ * `useBuildNavigationController` runs in the app component that renders
+ * `<FireCMS>`, above it, so it cannot read the context. It still has to know
+ * when PRO is paused: it applies the plugins' collection, view and home page
+ * navigation contributions itself. `FireCMS` publishes here, and the navigation
+ * controller subscribes with `useSyncExternalStore`.
+ *
+ * One value per page: two `FireCMS` instances on one page would share it, which
+ * is harmless because both check the same project.
+ */
+
+let currentStatus: AccessResponse | null = null;
+const listeners = new Set<() => void>();
+
+/** @internal */
+export function getLicenseStatusSnapshot(): AccessResponse | null {
+    return currentStatus;
+}
+
+/** @internal */
+export function getServerLicenseStatusSnapshot(): AccessResponse | null {
+    return null;
+}
+
+/** @internal */
+export function subscribeLicenseStatus(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+
+/** @internal */
+export function publishLicenseStatus(status: AccessResponse | null): void {
+    if (status === currentStatus) return;
+    currentStatus = status;
+    listeners.forEach(listener => listener());
+}

package/src/core/DefaultAppBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Link, useNavigate } from "react-router-dom";
-import { ErrorBoundary, FireCMSLogo, LanguageToggle } from "../components";
+import { ErrorBoundary, LanguageToggle } from "../components";
 import {
     Avatar,
     BrightnessMediumIcon,
@@ -20,6 +20,7 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { DrawerLogo } from "./DefaultDrawer";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
@@ -119,32 +120,43 @@ export const DefaultAppBar = function DefaultAppBar({
                 "flex flex-row gap-2 px-4 items-center",
                 {
                     "pl-[19rem]": drawerOpen && largeLayout,
-                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
+                    // The title has to sit at the same x whether or not a Drawer
+                    // is mounted, so the bar reserves the collapsed rail's width
+                    // in both cases. Only a pinned-open drawer moves it, in step
+                    // with the drawer itself.
+                    "pl-24": !(drawerOpen && largeLayout) && (hasDrawer || largeLayout),
                     "z-10": largeLayout,
                     "duration-100": drawerOpen && largeLayout,
                 },
                 className)}>
 
 
+            {/* Rendering DrawerLogo itself, rather than rebuilding its box here,
+                is what keeps the mark from moving when a screen with a drawer
+                follows one without: matching it by hand still left it 4px high,
+                because DrawerLogo centres a 40px box under `pt-4` instead of
+                centring in the 64px bar.
+
+                Gated on `largeLayout`, not on `lg:`: useLargeLayout resolves at
+                min-width 1025px while Tailwind's `lg:` starts at 1024px, and at
+                exactly 1024px the logo would render into a bar that had not
+                reserved room for it, landing on top of the title. */}
+            {navigation && !hasDrawer && largeLayout &&
+                <div className={"absolute left-0 top-0"}>
+                    <DrawerLogo logo={logo} />
+                </div>}
+
             {navigation && <div className="mr-2 hidden lg:block">
                 <Link
                     className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
-                    <div className={"flex flex-row gap-4"}>
-                        {!hasDrawer && (logo
-                            ? <img src={logo}
-                                alt="Logo"
-                                className={cls("w-[32px] h-[32px] object-contain")} />
-                            : <FireCMSLogo width={"32px"} height={"32px"} />)}
-
-                        {typeof title === "string"
-                            ? <Typography variant="subtitle1"
-                                noWrap>
-                                {title}
-                            </Typography>
-                            : title}
-                    </div>
+                    {typeof title === "string"
+                        ? <Typography variant="subtitle1"
+                            noWrap>
+                            {title}
+                        </Typography>
+                        : title}
                 </Link>
             </div>}