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

package/src/core/EntityEditView.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Entity, EntityCollection, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
+import {
+    Entity,
+    EntityCollection,
+    EntityStatus,
+    FireCMSPlugin,
+    FormContext,
+    PluginFormActionProps,
+    User
+} from "../types";
 
 import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
 import {
@@ -41,9 +49,13 @@ export type OnTabChangeParams<M extends Record<string, any>> = {
     entityId?: string;
     selectedTab?: string;
     collection: EntityCollection<M>;
+
 };
 
 export interface EntityEditViewProps<M extends Record<string, any>> {
+    /**
+     * The database path of the entity, e.g. "users" or "products".
+     */
     path: string;
     /**
      * The navigation path to the entity.
@@ -158,12 +170,33 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             setUsedEntity(entity);
     }, [entity]);
 
-    // Instead of using a ref (which does not trigger re-render), we use state for the form context.
     const [formContext, setFormContext] = useState<FormContext<M> | undefined>(undefined);
 
     const largeLayout = useLargeLayout();
 
     const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins;
+    const pluginActionsTop: React.ReactNode[] = [];
+
+    if (plugins && collection) {
+        const actionProps: PluginFormActionProps = {
+            entityId,
+            parentCollectionIds,
+            path,
+            status,
+            collection,
+            context,
+            formContext,
+            openEntityMode: layout,
+            disabled: false
+        };
+        pluginActionsTop.push(...plugins.map((plugin) => (
+            plugin.form?.ActionsTop
+                ? <plugin.form.ActionsTop
+                    key={`actions_${plugin.key}`} {...actionProps} />
+                : null
+        )).filter(Boolean));
+    }
 
     const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
         collection ? collection.defaultSelectedView : undefined,
@@ -182,7 +215,7 @@ 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;
@@ -212,7 +245,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             }
 
             if (!entityId) {
-                console.error("INTERNAL: entityId is not defined");
                 return null;
             }
 
@@ -254,6 +286,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 <ErrorBoundary>
                     {usedFormContext && <Builder
                         collection={collection}
+                        parentCollectionIds={parentCollectionIds}
                         entity={usedEntity}
                         modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
                         formContext={usedFormContext}
@@ -277,7 +310,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.id ?? subcollection.path;
-        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.path)}` : undefined;
         const newFullIdPath = fullIdPath ? `${fullIdPath}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
 
         if (selectedTab !== subcollectionId) return null;
@@ -335,10 +368,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 entity={entity}
                 path={path}
                 collection={collection}/>
+            <div className="h-16"/>
         </div>
     </div> : null;
 
     const entityView = <EntityForm<M>
+        fullIdPath={fullIdPath}
         collection={collection}
         path={path}
         entityId={entityId ?? usedEntity?.id}
@@ -384,31 +419,44 @@ 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;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
-            className={cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+            className={cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
             {barActions}
 
             <div className={"flex-grow"}/>
 
+            {pluginActionsTop}
+
             {globalLoading && <div className="self-center">
                 <CircularProgress size={"small"}/>
             </div>}
 
             {hasAdditionalViews && <Tabs
+                className={"self-end"}
                 value={selectedTab}
                 onValueChange={(value) => {
                     onSideTabClick(value);
@@ -417,11 +465,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 +479,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 </Tab>
 
 
-                {customViewTabs}
+                {customViewTabsEnd}
 
                 {subcollectionTabs}
             </Tabs>}
@@ -453,8 +502,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/EntityEditViewFormActions.tsx

@@ -1,10 +1,34 @@
 import React, { useMemo } from "react";
-import { Entity, EntityAction, FireCMSContext, ResolvedEntityCollection, SideEntityController } from "../types";
+import {
+    Entity,
+    EntityAction,
+    EntityActionClickProps,
+    FireCMSContext,
+    FormContext,
+    ResolvedEntityCollection,
+    SideEntityController
+} from "../types";
 
 import { copyEntityAction, deleteEntityAction } from "../components";
-import { canCreateEntity, canDeleteEntity, mergeEntityActions } from "../util";
-import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
-import { useAuthController, useFireCMSContext, useSideEntityController } from "../hooks";
+import { canCreateEntity, canDeleteEntity, mergeEntityActions, resolveEntityAction } from "../util";
+import {
+    Button,
+    CircularProgress,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    IconButton,
+    LoadingButton,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
+import {
+    useAuthController,
+    useCustomizationController,
+    useFireCMSContext,
+    useSideEntityController,
+    useSnackbarController
+} from "../hooks";
 import { EntityFormActionsProps } from "../form/EntityFormActions";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
 
@@ -19,16 +43,21 @@ export function EntityEditViewFormActions({
                                               status,
                                               pluginActions,
                                               openEntityMode,
-                                              showDefaultActions = true
+                                              showDefaultActions = true,
+                                              navigateBack,
+                                              formContext
                                           }: EntityFormActionsProps) {
 
     const authController = useAuthController();
     const context = useFireCMSContext();
     const sideEntityController = useSideEntityController();
     const sideDialogContext = useSideDialogContext();
+    const customizationController = useCustomizationController();
 
     const entityActions = useMemo((): EntityAction[] => {
-        const customEntityActions = collection.entityActions
+        const customEntityActions = (collection.entityActions ?? [])
+            .map(action => resolveEntityAction(action, customizationController.entityActions))
+            .filter(Boolean) as EntityAction[];
         const createEnabled = canCreateEntity(collection, authController, path, null);
         const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity) : false;
         const actions: EntityAction[] = [];
@@ -39,7 +68,7 @@ export function EntityEditViewFormActions({
         if (customEntityActions)
             return mergeEntityActions(actions, customEntityActions);
         return actions;
-    }, [authController, collection, path]);
+    }, [authController, collection, path, customizationController.entityActions?.length]);
 
     const formActions = showDefaultActions ? entityActions.filter(a => a.includeInForm === undefined || a.includeInForm) : [];
 
@@ -57,6 +86,8 @@ export function EntityEditViewFormActions({
             sideDialogContext,
             pluginActions,
             openEntityMode,
+            navigateBack,
+            formContext
         })
         : buildSideActions({
             savingError,
@@ -71,6 +102,8 @@ export function EntityEditViewFormActions({
             status,
             pluginActions,
             openEntityMode,
+            navigateBack,
+            formContext
         });
 }
 
@@ -87,6 +120,8 @@ type ActionsViewProps<M extends object> = {
     sideDialogContext: SideDialogController,
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext
 };
 
 function buildBottomActions<M extends object>({
@@ -102,37 +137,48 @@ function buildBottomActions<M extends object>({
                                                   sideDialogContext,
                                                   pluginActions,
                                                   openEntityMode,
+                                                  navigateBack,
+                                                  formContext
                                               }: ActionsViewProps<M>) {
 
     const canClose = openEntityMode === "side_panel";
-    return <DialogActions position={"absolute"}>
+    return <DialogActions
+        position={"absolute"}>
         {savingError &&
             <div className="text-right">
                 <Typography color={"error"}>{savingError.message}</Typography>
             </div>
         }
-        {entity && formActions.length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
-            {formActions.map(action => (
-                <IconButton
-                    key={action.name}
-                    color="primary"
-                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                        event.stopPropagation();
-                        if (entity)
-                            action.onClick({
-                                entity,
-                                fullPath: collection.path,
-                                collection: collection,
-                                context,
-                                sideEntityController,
-                                openEntityMode: openEntityMode
-                            });
-                    }}>
-                    {action.icon}
-                </IconButton>
-            ))}
+
+        {formActions.length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
+            {formActions.map(action => {
+
+                const props = {
+                    view: "form",
+                    entity,
+                    fullPath: collection.path,
+                    collection: collection,
+                    context,
+                    sideEntityController,
+                    openEntityMode,
+                    navigateBack,
+                    formContext
+                } satisfies EntityActionClickProps<any>;
+
+                const isEnabled = !action.isEnabled || action.isEnabled(props);
+                return (
+                    <EntityActionButton
+                        key={action.key}
+                        action={action}
+                        enabled={isEnabled}
+                        props={props}
+                    />
+                );
+            })}
         </div>}
+
         {pluginActions}
+
         <Button variant="text" disabled={disabled || isSubmitting} type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
@@ -171,7 +217,10 @@ function buildSideActions<M extends object>({
                                                 disabled,
                                                 status,
                                                 sideDialogContext,
-                                                pluginActions
+                                                pluginActions,
+                                                openEntityMode,
+                                                navigateBack,
+                                                formContext
                                             }: ActionsViewProps<M>) {
 
     return <div
@@ -184,12 +233,33 @@ function buildSideActions<M extends object>({
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
         </LoadingButton>
+
         <Button fullWidth={true} variant="text" disabled={disabled || isSubmitting} type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
 
         {pluginActions}
 
+        {formActions.length > 0 && <div className="flex flex-row flex-wrap mt-2">
+            {formActions.map(action => {
+                const props = {
+                    view: "form",
+                    entity,
+                    fullPath: collection.path,
+                    collection: collection,
+                    context,
+                    sideEntityController,
+                    openEntityMode,
+                    navigateBack,
+                    formContext
+                } satisfies EntityActionClickProps<any>;
+                const isEnabled = !action.isEnabled || action.isEnabled(props);
+                return (
+                    <EntityActionButton key={action.key} action={action} enabled={isEnabled} props={props}/>
+                );
+            })}
+        </div>}
+
         {savingError &&
             <div className="text-right">
                 <Typography color={"error"}>{savingError.message}</Typography>
@@ -197,3 +267,58 @@ function buildSideActions<M extends object>({
         }
     </div>;
 }
+
+function EntityActionButton({
+                                action,
+                                enabled,
+                                props
+                            }: {
+    action: EntityAction,
+    enabled: boolean,
+    props: EntityActionClickProps<any, any>
+}) {
+    const snackbarController = useSnackbarController();
+    const [loading, setLoading] = React.useState(false);
+    return <Tooltip
+        title={action.name}>
+        <IconButton
+            color="primary"
+            disabled={!enabled}
+            onClick={(event) => {
+                console.debug("Executing action", action.key, props);
+                try {
+                    event.stopPropagation();
+                    if (props.entity) {
+                        const onClick = action.onClick(props);
+                        // If the action returns a promise, we can handle it
+                        if (onClick instanceof Promise) {
+                            setLoading(true);
+                            onClick
+                                .catch((error) => {
+                                    console.error("Error executing action", action.key, error);
+                                    snackbarController.open({
+                                        message: `Error executing action: ${error.message}`,
+                                        type: "error"
+                                    })
+                                })
+                                .finally(() => setLoading(false));
+                        } else {
+                            snackbarController.open({
+                                message: `Action ${action.name} executed successfully`,
+                                type: "success"
+                            });
+                        }
+
+                    }
+                } catch (e: any) {
+                    console.error("Error executing action", action.key, e);
+                    snackbarController.open({
+                        message: `Error executing action: ${e.message}`,
+                        type: "error"
+                    });
+                }
+            }}>
+            {loading ? <CircularProgress size={"smallest"}/> : action.icon}
+        </IconButton>
+    </Tooltip>;
+}

package/src/core/EntitySidePanel.tsx

@@ -19,11 +19,19 @@ import { useLocation, useNavigate } from "react-router-dom";
  */
 export function EntitySidePanel(props: EntitySidePanelProps) {
 
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        fullIdPath,
+        formProps,
+    } = props;
+
     const {
         blocked,
         setBlocked,
         setBlockedNavigationMessage,
-        close
+        close,
     } = useSideDialogContext();
 
     const navigate = useNavigate();
@@ -50,6 +58,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             sideEntityController.replace({
                 path: params.path,
                 entityId: params.entityId,
+                fullIdPath: props.fullIdPath,
                 selectedTab: params.selectedTab,
                 updateUrl: true,
                 collection: params.collection,
@@ -64,22 +73,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }
 
     const parentCollectionIds = useMemo(() => {
-        return navigationController.getParentCollectionIds(props.path);
-    }, [navigationController, props.path]);
-
-    const collection = useMemo(() => {
-        if (props.collection) {
-            return props.collection;
-        }
+        return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
 
-        const registryCollection = navigationController.getCollection(props.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.");
-    }, [navigationController, props.collection]);
+    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -115,6 +112,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             <ErrorBoundary>
                 <EntityEditView
                     {...props}
+                    fullIdPath={fullIdPath}
                     layout={"side_panel"}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
@@ -126,19 +124,18 @@ 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,
                                       entityId,
                                       selectedTab,
                                       collection,
@@ -146,12 +143,13 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         sideEntityController.replace({
                             path,
                             entityId,
+                            fullIdPath: props.fullIdPath,
                             selectedTab,
                             updateUrl: true,
                             collection,
                         });
                     }}
-                    formProps={props.formProps}
+                    formProps={formProps}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -44,15 +44,22 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins,
+        plugins: pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
+        entityActions,
         components,
         navigationController,
         apiKey
     } = props;
 
+    if (pluginsProp) {
+        console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
+    }
+
+    const plugins = navigationController.plugins ?? pluginsProp;
+
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 
@@ -66,6 +73,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         entityLinkBuilder,
         plugins,
         entityViews: entityViews ?? [],
+        entityActions: entityActions ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
     };

package/src/core/field_configs.tsx

@@ -10,6 +10,7 @@ import {
     MapFieldBinding,
     MarkdownEditorFieldBinding,
     MultiSelectFieldBinding,
+    ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -211,10 +212,21 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: StorageUploadFieldBinding
         }
     },
+    reference_as_string: {
+        key: "reference_as_string",
+        name: "Reference (as string)",
+        description: "The value refers to a different collection (it is saved as a string)",
+        Icon: LinkIcon,
+        color: "#154fb3",
+        property: {
+            dataType: "string",
+            Field: ReferenceAsStringFieldBinding
+        }
+    },
     reference: {
         key: "reference",
         name: "Reference",
-        description: "The value refers to a different collection",
+        description: "The value refers to a different collection (it is saved as a reference)",
         Icon: LinkIcon,
         color: "#ff0042",
         property: {
@@ -348,6 +360,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "email";
         } else if (property.enumValues) {
             return "select";
+        } else if (property.reference) {
+            return "reference_as_string";
         } else {
             return "text_field";
         }