@firecms/core 3.0.0-canary.235 → 3.0.0-canary.239

package/src/core/EntityEditView.tsx

@@ -182,11 +182,13 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
-    const customViews = collection.entityViews;
+    const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const plugins = customizationController.plugins;
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -212,7 +214,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             }
 
             if (!entityId) {
-                console.error("INTERNAL: entityId is not defined");
                 return null;
             }
 
@@ -384,14 +385,24 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         </Tab>
     );
 
-    const customViewTabs = resolvedEntityViews.map((view) =>
-        <Tab
-            className="text-sm min-w-[120px]"
-            value={view.key}
-            key={`entity_detail_collection_tab_${view.name}`}>
-            {view.name}
-        </Tab>
-    );
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
+    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
@@ -417,11 +428,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {includeJsonView && <Tab
                     disabled={!hasAdditionalViews}
                     value={JSON_TAB_VALUE}
-                    innerClassName={"block"}
                     className={"text-sm"}>
                     <CodeIcon size={"small"}/>
                 </Tab>}
 
+                {customViewTabsStart}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
@@ -430,7 +442,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 </Tab>
 
 
-                {customViewTabs}
+                {customViewTabsEnd}
 
                 {subcollectionTabs}
             </Tabs>}
@@ -453,8 +465,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     </div>;
 
-    const plugins = customizationController.plugins;
-
     if (plugins) {
         plugins.forEach((plugin: FireCMSPlugin) => {
             if (plugin.form?.provider) {

package/src/core/EntitySidePanel.tsx

@@ -19,11 +19,18 @@ import { useLocation, useNavigate } from "react-router-dom";
  */
 export function EntitySidePanel(props: EntitySidePanelProps) {
 
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        formProps,
+    } = props;
+
     const {
         blocked,
         setBlocked,
         setBlockedNavigationMessage,
-        close
+        close,
     } = useSideDialogContext();
 
     const navigate = useNavigate();
@@ -64,21 +71,21 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }
 
     const parentCollectionIds = useMemo(() => {
-        return navigationController.getParentCollectionIds(props.path);
-    }, [navigationController, props.path]);
+        return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
 
     const collection = useMemo(() => {
         if (props.collection) {
             return props.collection;
         }
 
-        const registryCollection = navigationController.getCollection(props.path);
+        const registryCollection = navigationController.getCollection(path);
         if (registryCollection) {
             return registryCollection;
         }
 
-        console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-        throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
+        console.error("ERROR: No collection found in path `", path, "`. Entity id: ", entityId);
+        throw Error("ERROR: No collection found in path `" + path + "`. Make sure you have defined a collection for this path in the root navigation.");
     }, [navigationController, props.collection]);
 
     useEffect(() => {
@@ -126,16 +133,16 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             onClick={onClose}>
                             <CloseIcon size={"small"}/>
                         </IconButton>
-                        <IconButton
+                        {allowFullScreen && <IconButton
                             className="self-center"
                             onClick={() => {
-                                if (props.entityId)
+                                if (entityId)
                                     navigate(location.pathname);
                                 else
                                     navigate(location.pathname + "#new");
                             }}>
                             <OpenInFullIcon size={"small"}/>
-                        </IconButton>
+                        </IconButton>}
                     </>}
                     onTabChange={({
                                       path,
@@ -151,7 +158,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             collection,
                         });
                     }}
-                    formProps={props.formProps}
+                    formProps={formProps}
                 />
             </ErrorBoundary>
 

package/src/form/components/LabelWithIcon.tsx

@@ -24,7 +24,7 @@ export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
         return (
             <div
                 ref={ref}
-                className={cls("inline-flex items-center my-0.5",
+                className={cls("align-middle inline-flex items-center my-0.5",
                     small ? "gap-1" : "gap-2",
                     className)}
             >

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -69,8 +69,6 @@ export function KeyValueFieldBinding({
         title={property.name}
         className={"text-text-secondary dark:text-text-secondary-dark"}/>;
 
-
-    console.log("minimalistView", propertyKey, minimalistView)
     return (
         <>
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -141,7 +141,7 @@ export function MarkdownEditorFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             <div
                 className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -92,7 +92,7 @@ export function MultiSelectFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
                 onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -39,7 +39,7 @@ export function ReadOnlyFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -90,7 +90,7 @@ function ReferenceFieldBindingInternal({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -62,7 +62,7 @@ export function SelectFieldBinding<T extends EnumType>({
                             icon={getIconForProperty(property, "small")}
                             required={property.validation?.required}
                             title={property.name}
-                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
+                            className={"h-6 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={

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(() => {
@@ -447,11 +439,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 +468,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/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/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/types/collections.ts

@@ -337,6 +337,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 +525,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 +542,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";
     };
 
 /**

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[];
 
     /**

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";