@firecms/core 3.0.0-beta.13 → 3.0.0-beta.14

package/src/hooks/useBuildNavigationController.tsx

@@ -9,6 +9,7 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    FireCMSPlugin,
     NavigationBlocker,
     NavigationController,
     PermissionsBuilder,
@@ -43,15 +44,7 @@ export type BuildNavigationContextProps<EC extends EntityCollection, USER extend
     viewsOrder?: string[];
     userConfigPersistence?: UserConfigurationPersistence;
     dataSourceDelegate: DataSourceDelegate;
-    /**
-     * Use this method to inject collections to the CMS.
-     * You receive the current collections as a parameter, and you can return
-     * a new list of collections.
-     * @see {@link joinCollectionLists}
-     * @param collections
-     */
-    injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
-
+    plugins?: FireCMSPlugin[];
     /**
      * If true, the navigation logic will not be updated until this flag is false
      */
@@ -68,9 +61,9 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         views: viewsProp,
         adminViews: adminViewsProp,
         viewsOrder,
+        plugins,
         userConfigPersistence,
         dataSourceDelegate,
-        injectCollections,
         disabled
     } = props;
 
@@ -203,7 +196,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         try {
 
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
-                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections),
+                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, plugins),
                     resolveCMSViews(viewsProp, authController, dataSourceDelegate),
                     resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
                 ]
@@ -250,8 +243,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         disabled,
         viewsProp,
         adminViewsProp,
-        computeTopNavigation,
-        injectCollections
+        computeTopNavigation
     ]);
 
     useEffect(() => {
@@ -421,6 +413,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         getParentCollectionIds,
         convertIdsToPaths,
         navigate,
+        plugins
     };
 }
 
@@ -447,11 +440,24 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
+function applyPluginModifyCollection(resolvedCollections: EntityCollection[], modifyCollection: (collection: EntityCollection) => EntityCollection) {
+    return resolvedCollections.map((collection: EntityCollection): EntityCollection => {
+        const modifiedCollection = modifyCollection(collection);
+        if (modifiedCollection.subcollections) {
+            return {
+                ...modifiedCollection,
+                subcollections: applyPluginModifyCollection(modifiedCollection.subcollections, modifyCollection)
+            } satisfies EntityCollection;
+        }
+        return modifiedCollection;
+    });
+}
+
 async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
                                   collectionPermissions: PermissionsBuilder | undefined,
                                   authController: AuthController,
                                   dataSource: DataSourceDelegate,
-                                  injectCollections?: (collections: EntityCollection[]) => EntityCollection[]): Promise<EntityCollection[]> {
+                                  plugins: FireCMSPlugin[] | undefined): Promise<EntityCollection[]> {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({
@@ -463,8 +469,16 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
         resolvedCollections = collections;
     }
 
-    if (injectCollections) {
-        resolvedCollections = injectCollections(resolvedCollections ?? []);
+    if (plugins) {
+        for (const plugin of plugins) {
+            if (plugin.collection?.modifyCollection) {
+                resolvedCollections = applyPluginModifyCollection(resolvedCollections, plugin.collection.modifyCollection);
+            }
+
+            if (plugin.collection?.injectCollections) {
+                resolvedCollections = plugin.collection.injectCollections(resolvedCollections ?? []);
+            }
+        }
     }
 
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);

package/src/internal/useBuildSideEntityController.tsx

@@ -33,7 +33,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
 
-    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
 
     let resolvedWidth: string | undefined;
     if (props.width) {

package/src/preview/components/ImagePreview.tsx

@@ -62,7 +62,7 @@ export function ImagePreview({
                     title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e) => {
                             e.stopPropagation();
                             e.preventDefault();
@@ -81,7 +81,7 @@ export function ImagePreview({
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
                         <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}

package/src/preview/components/ReferencePreview.tsx

@@ -141,7 +141,7 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
         );
     }
     return <EntityPreview size={size}
-                          previewProperties={previewProperties}
+                          previewKeys={previewProperties}
                           disabled={disabled}
                           entity={usedEntity}
                           collection={collection}

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const previewProperties: string[] | undefined = mapProperty.previewKeys;
 
     if (!values) return null;
 

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -128,7 +128,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {childValue && <Typography>
+                            {childValue && typeof childValue !== "object" && <Typography>
                                 <ErrorBoundary>
                                     {childValue.toString()}
                                 </ErrorBoundary>

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -46,7 +46,7 @@ export function SkeletonPropertyComponent({
                 content = <>{arrayProperty.of.map((p, i) => renderGenericArrayCell(p, i))} </>;
             } else {
                 if (arrayProperty.of.dataType === "map" && arrayProperty.of.properties) {
-                    content = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewProperties);
+                    content = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewKeys);
                 } else if (arrayProperty.of.dataType === "string") {
                     if (arrayProperty.of.enumValues) {
                         content = renderArrayEnumTableCell();

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -45,7 +45,7 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cls("overflow-x-scroll", size === "small" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>

package/src/types/collections.ts

@@ -112,7 +112,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * `hidden` in the property definition, will be ignored.
      * `propertiesOrder` has precedence over `hidden`.
      *     - For properties use the property key.
-     *     - For additional columns use the column id.
+     *     - For additional fields use the field key.
      *     - If you have subcollections, you get a column for each subcollection,
      *       with the path (or alias) as the subcollection, prefixed with
      *       `subcollection:`. e.g. `subcollection:orders`.
@@ -127,7 +127,8 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
-     * collection are loaded.
+     * collection are loaded. This means that when reaching the end of the
+     * collection, the CMS will load more entities.
      * You can specify a number to specify the pagination size (50 by default)
      * Defaults to `true`
      */
@@ -337,6 +338,12 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * If set to true, a tab including the JSON representation of the entity will be included.
      */
     includeJsonView?: boolean;
+
+    /**
+     * If set to true, changes to the entity will be saved in a subcollection.
+     * This prop has no effect if the history plugin is not enabled
+     */
+    history?: boolean;
 }
 
 /**
@@ -519,6 +526,11 @@ export type EntityCustomView<M extends Record<string, any> = any> =
          */
         name: string;
 
+        /**
+         * Render this custom view in the tab of the entity view, instead of the name
+         */
+        tabComponent?: React.ReactNode;
+
         /**
          * If set to true, the actions of the entity (save, discard,delete) will be
          * included in the view. By default the actions are located in the right or bottom,
@@ -531,6 +543,11 @@ export type EntityCustomView<M extends Record<string, any> = any> =
          * Builder for rendering the custom view
          */
         Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+
+        /**
+         * Position of this tab in the entity view. Defaults to `end`.
+         */
+        position?: "start" | "end";
     };
 
 /**
@@ -561,6 +578,11 @@ export interface EntityCustomViewParams<M extends Record<string, any> = any> {
      * Use the form context to access the form state and methods
      */
     formContext: FormContext;
+
+    /**
+     * If this is a subcollection, this is the path of the parent collections
+     */
+    parentCollectionIds?: string[];
 }
 
 export type InferCollectionType<S extends EntityCollection> = S extends EntityCollection<infer M> ? M : never;

package/src/types/firecms.tsx

@@ -92,7 +92,6 @@ export type FireCMSProps<USER extends User> = {
      *
      * You can also define an entity view from the UI.
      */
-
     entityViews?: EntityCustomView[];
 
     /**
@@ -129,7 +128,8 @@ export type FireCMSProps<USER extends User> = {
 
     /**
      * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
+     * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
      */
     plugins?: FireCMSPlugin<any, any, any>[];
 

package/src/types/navigation.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { EntityCollection } from "./collections";
 import { EntityReference } from "./entities";
+import { FireCMSPlugin } from "./plugins";
 
 /**
  * Controller that includes the resolved navigation and utility methods and
@@ -152,6 +153,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     navigate: (to: string, options?: NavigateOptions) => void;
 
+    /**
+     * Plugin system allowing to extend the CMS functionality.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+
 }
 
 export interface NavigateOptions {

package/src/types/plugins.tsx

@@ -158,6 +158,22 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     }
 
+    collection?: {
+
+        /**
+         * Use this method to modify a single collection before it is rendered.
+         * @param collection
+         */
+        modifyCollection?: (collection: EntityCollection) => EntityCollection;
+
+        /**
+         * Use this method to modify, add or remove collections.
+         * @param collections
+         */
+        injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+
+    }
+
 }
 
 /**

package/src/types/side_entity_controller.tsx

@@ -20,11 +20,6 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      */
     entityId?: string;
 
-    // /**
-    //  * Navigation path with ids of the entity
-    //  */
-    // fullIdPath: string;
-
     /**
      * Set this flag to true if you want to make a copy of an existing entity
      */
@@ -76,6 +71,11 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Override some form properties
      */
     formProps?: Partial<EntityFormProps<M>>;
+
+    /**
+     * Allow the user to open the entity fullscreen
+     */
+    allowFullScreen?: boolean;
 }
 
 /**

package/src/util/callbacks.ts

@@ -0,0 +1,119 @@
+import { EntityCallbacks } from "../types";
+
+export const mergeCallbacks = (
+    baseCallbacks: EntityCallbacks = {},
+    pluginCallbacks: EntityCallbacks = {}
+): EntityCallbacks | undefined => {
+
+    if (!baseCallbacks && !pluginCallbacks) {
+        return undefined;
+    }
+
+    const mergedCallbacks: EntityCallbacks = {};
+
+    // Handle onFetch - returns Entity<M> or Promise<Entity<M>>
+    if (baseCallbacks.onFetch || pluginCallbacks.onFetch) {
+        mergedCallbacks.onFetch = async (props) => {
+            let entity = props.entity;
+            if (baseCallbacks.onFetch) {
+                entity = await Promise.resolve(baseCallbacks.onFetch(props));
+            }
+            if (pluginCallbacks.onFetch) {
+                entity = await Promise.resolve(pluginCallbacks.onFetch({
+                    ...props,
+                    entity
+                }));
+            }
+            return entity;
+        };
+    }
+
+    // Handle onSaveSuccess - returns void or Promise<void>
+    if (baseCallbacks.onSaveSuccess || pluginCallbacks.onSaveSuccess) {
+        mergedCallbacks.onSaveSuccess = async (props) => {
+            if (baseCallbacks.onSaveSuccess) {
+                await Promise.resolve(baseCallbacks.onSaveSuccess(props));
+            }
+            if (pluginCallbacks.onSaveSuccess) {
+                await Promise.resolve(pluginCallbacks.onSaveSuccess(props));
+            }
+        };
+    }
+
+    // Handle onSaveFailure - returns void or Promise<void>
+    if (baseCallbacks.onSaveFailure || pluginCallbacks.onSaveFailure) {
+        mergedCallbacks.onSaveFailure = async (props) => {
+            if (baseCallbacks.onSaveFailure) {
+                await Promise.resolve(baseCallbacks.onSaveFailure(props));
+            }
+            if (pluginCallbacks.onSaveFailure) {
+                await Promise.resolve(pluginCallbacks.onSaveFailure(props));
+            }
+        };
+    }
+
+    // Handle onPreSave - returns Partial<EntityValues<M>> or Promise<Partial<EntityValues<M>>>
+    if (baseCallbacks.onPreSave || pluginCallbacks.onPreSave) {
+        mergedCallbacks.onPreSave = async (props) => {
+            let values = { ...props.values };
+            if (baseCallbacks.onPreSave) {
+                const baseValues = await Promise.resolve(baseCallbacks.onPreSave(props));
+                values = { ...values, ...baseValues };
+            }
+            if (pluginCallbacks.onPreSave) {
+                const pluginValues = await Promise.resolve(pluginCallbacks.onPreSave({
+                    ...props,
+                    values
+                }));
+                values = { ...values, ...pluginValues };
+            }
+            return values;
+        };
+    }
+
+    // Handle onPreDelete - returns void
+    if (baseCallbacks.onPreDelete || pluginCallbacks.onPreDelete) {
+        mergedCallbacks.onPreDelete = (props) => {
+            if (baseCallbacks.onPreDelete) {
+                baseCallbacks.onPreDelete(props);
+            }
+            if (pluginCallbacks.onPreDelete) {
+                pluginCallbacks.onPreDelete(props);
+            }
+        };
+    }
+
+    // Handle onDelete - returns void
+    if (baseCallbacks.onDelete || pluginCallbacks.onDelete) {
+        mergedCallbacks.onDelete = (props) => {
+            if (baseCallbacks.onDelete) {
+                baseCallbacks.onDelete(props);
+            }
+            if (pluginCallbacks.onDelete) {
+                pluginCallbacks.onDelete(props);
+            }
+        };
+    }
+
+    // Handle onIdUpdate - returns string or Promise<string>
+    if (baseCallbacks.onIdUpdate || pluginCallbacks.onIdUpdate) {
+        mergedCallbacks.onIdUpdate = async (props) => {
+            let id = props.entityId || "";
+
+            if (baseCallbacks.onIdUpdate) {
+                id = await Promise.resolve(baseCallbacks.onIdUpdate(props));
+            }
+
+            if (pluginCallbacks.onIdUpdate) {
+                id = await Promise.resolve(pluginCallbacks.onIdUpdate({
+                    ...props,
+                    entityId: id
+                }));
+            }
+
+            return id;
+        };
+    }
+
+    return Object.keys(mergedCallbacks).length > 0 ? mergedCallbacks : undefined;
+};

package/src/util/index.ts

@@ -23,3 +23,4 @@ export * from "./join_collections";
 export * from "./builders";
 export * from "./useTraceUpdate";
 export * from "./storage";
+export * from "./callbacks";

package/src/util/navigation_utils.ts

@@ -32,75 +32,90 @@ export function getLastSegment(path: string) {
 }
 
 export function resolveCollectionPathIds(path: string, allCollections: EntityCollection[]): string {
-    const cleanPath = removeInitialAndTrailingSlashes(path);
-    const subpaths = cleanPath.split("/");
-
-    if (subpaths.length % 2 === 0) {
-        throw Error(`resolveCollectionPathIds: Collection paths must have an odd number of segments: ${path}`);
-    }
-
-    // Check if the path exactly matches a collection path
-    const exactMatch = allCollections.find(col => col.path === cleanPath);
-    if (exactMatch) {
-        return exactMatch.path;
+    let remainingPath = removeInitialAndTrailingSlashes(path);
+    if (!remainingPath) {
+        return "";
     }
 
-    if (subpaths.length === 1) {
-        // Find collection by ID and return its path
-        const aliasedCollection = allCollections.find((col) => col.id === subpaths[0]);
-        return aliasedCollection?.path ?? subpaths[0];
-    }
+    let currentCollections: EntityCollection[] | undefined = allCollections;
+    const resolvedPathParts: string[] = [];
 
-    // Try to match a multi-segment collection path
-    let matchingCollection: EntityCollection | undefined;
-    let entityIndex = 1;
-
-    // Check if the path starts with a multi-segment collection path
-    for (const collection of allCollections) {
-        const pathSegments = collection.path.split("/");
-        if (pathSegments.length > 1 &&
-            subpaths.slice(0, pathSegments.length).join("/") === collection.path) {
-            matchingCollection = collection;
-            entityIndex = pathSegments.length;
+    while (remainingPath.length > 0) {
+        if (!currentCollections || currentCollections.length === 0) {
+            // We have remaining path segments but no more collections to match against
+            console.warn(`resolveCollectionPathIds: Path structure implies subcollections, but none found before segment starting with "${remainingPath}" in original path "${path}". Appending remaining original path.`);
+            resolvedPathParts.push(remainingPath);
+            remainingPath = ""; // Stop processing
             break;
         }
-    }
-
-    // If no multi-segment match, fall back to single segment matching
-    if (!matchingCollection) {
-        const matchingCollections = allCollections.filter(col =>
-            col.id === subpaths[0] || col.path === subpaths[0]
-        );
 
-        if (!matchingCollections.length) {
-            return cleanPath;
-        }
+        let foundMatch = false;
+        // Sort potential matches by length descending to prioritize longer matches (e.g., "a/b" over "a")
+        const potentialMatches: { col: EntityCollection; match: string; }[] = currentCollections
+            .flatMap(col => [{
+                col,
+                match: col.path
+            }, {
+                col,
+                match: col.id
+            }])
+            .filter(p => p.match && remainingPath.startsWith(p.match))
+            .sort((a, b) => b.match.length - a.match.length);
+
+        if (potentialMatches.length > 0) {
+            const {
+                col: foundCollection,
+                match: matchString
+            } = potentialMatches[0];
+
+            resolvedPathParts.push(foundCollection.path); // Use the defined path
+            remainingPath = removeInitialSlash(remainingPath.substring(matchString.length));
+
+            // Check if we are at the end of the path
+            if (remainingPath.length === 0) {
+                foundMatch = true;
+                break; // Path ends with a collection segment
+            }
 
-        matchingCollection = matchingCollections[0];
-    }
+            // The next segment must be an entity ID
+            const idSeparatorIndex = remainingPath.indexOf("/");
+            let entityId: string;
+            if (idSeparatorIndex > -1) {
+                entityId = remainingPath.substring(0, idSeparatorIndex);
+                remainingPath = remainingPath.substring(idSeparatorIndex + 1);
+            } else {
+                // This should not happen if the original path is valid (odd segments)
+                // but handle it defensively: assume the rest is the ID
+                entityId = remainingPath;
+                remainingPath = "";
+                console.warn(`resolveCollectionPathIds: Path seems to end with an entity ID "${entityId}" instead of a collection segment in original path "${path}". This might indicate an invalid input path.`);
+                // Even if it ends here, we still need to push the ID
+            }
 
-    const entityId = subpaths[entityIndex];
-    const remainingPath = subpaths.slice(entityIndex + 1);
+            resolvedPathParts.push(entityId); // Append entity ID
+            currentCollections = foundCollection.subcollections; // Move to subcollections
+            foundMatch = true;
 
-    // If we have a subcollection ID, try to resolve it
-    if (remainingPath.length > 0) {
-        const subcollectionId = remainingPath[0];
-        const subcollection = matchingCollection.subcollections?.find(
-            subcol => subcol.id === subcollectionId
-        );
+            if (!currentCollections && remainingPath.length > 0) {
+                // Warn if the path continues but no subcollections were defined
+                console.warn(`resolveCollectionPathIds: Path continues after entity ID "${entityId}", but no subcollections are defined for the preceding collection "${foundCollection.path}" in path "${path}". Appending remaining original path.`);
+                resolvedPathParts.push(remainingPath); // Append the rest
+                remainingPath = ""; // Stop processing
+                break;
+            }
 
-        if (subcollection) {
-            return `${matchingCollection.path}/${entityId}/${subcollection.path}`;
         }
-    }
 
-    // If there are no remaining path segments, just return the collection path with entity ID
-    if (remainingPath.length === 0) {
-        return `${matchingCollection.path}/${entityId}`;
+        if (!foundMatch) {
+            // Collection definition not found for the start of the remaining path
+            console.warn(`resolveCollectionPathIds: Collection definition not found for segment starting with "${remainingPath}" in original path "${path}". Appending remaining original path.`);
+            resolvedPathParts.push(remainingPath); // Append the rest
+            remainingPath = ""; // Stop processing
+            break;
+        }
     }
 
-    // Default case - couldn't match subcollection
-    return `${matchingCollection.path}/${entityId}/${remainingPath.join("/")}`;
+    return resolvedPathParts.join("/");
 }
 
 /**