@firecms/core 3.0.0-beta.14 → 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,
@@ -187,8 +220,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
-    const plugins = customizationController.plugins;
-
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -279,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;
@@ -342,6 +373,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     </div> : null;
 
     const entityView = <EntityForm<M>
+        fullIdPath={fullIdPath}
         collection={collection}
         path={path}
         entityId={entityId ?? usedEntity?.id}
@@ -411,17 +443,20 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     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);

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

@@ -23,6 +23,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         allowFullScreen = true,
         path,
         entityId,
+        fullIdPath,
         formProps,
     } = props;
 
@@ -57,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,
@@ -74,7 +76,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
 
-    const collection = props.collection ?? navigationController.getCollection(path);
+    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -110,6 +112,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             <ErrorBoundary>
                 <EntityEditView
                     {...props}
+                    fullIdPath={fullIdPath}
                     layout={"side_panel"}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
@@ -133,7 +136,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         </IconButton>}
                     </>}
                     onTabChange={({
-                                      path,
                                       entityId,
                                       selectedTab,
                                       collection,
@@ -141,6 +143,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         sideEntityController.replace({
                             path,
                             entityId,
+                            fullIdPath: props.fullIdPath,
                             selectedTab,
                             updateUrl: true,
                             collection,

package/src/core/FireCMS.tsx

@@ -48,6 +48,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
+        entityActions,
         components,
         navigationController,
         apiKey
@@ -72,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";
         }

package/src/form/EntityForm.tsx

@@ -32,7 +32,8 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext,
+    useFireCMSContext, useNavigationController,
+    useSideEntityController,
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
@@ -57,6 +58,7 @@ export type OnUpdateParams = {
 
 export type EntityFormProps<M extends Record<string, any>> = {
     path: string;
+    fullIdPath?: string;
     collection: EntityCollection<M>;
     entityId?: string;
     entity?: Entity<M>;
@@ -96,6 +98,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
 
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
+                                                              fullIdPath,
                                                               entityId: entityIdProp,
                                                               collection,
                                                               onValuesModified,
@@ -123,6 +126,19 @@ export function EntityForm<M extends Record<string, any>>({
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
+
+    const sideEntityController = useSideEntityController();
+    const navigationController = useNavigationController();
+
+    const navigateBack = useCallback(() => {
+        if (openEntityMode === "side_panel") {
+            // If we are in side panel mode, we close the side panel
+            sideEntityController.close();
+        } else {
+            window.history.back();
+        }
+    }, []);
+
     const authController = useAuthController();
     const [status, setStatus] = useState<EntityStatus>(initialStatus);
 
@@ -433,14 +449,16 @@ export function EntityForm<M extends Record<string, any>>({
     const plugins = customizationController.plugins;
 
     const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
+    const parentCollectionIds = navigationController.getParentCollectionIds(path);
+
     if (plugins && collection) {
         const actionProps: PluginFormActionProps = {
             entityId,
+            parentCollectionIds,
             path,
             status,
-            collection: collection,
+            collection,
             context,
-            currentEntityId: entityId,
             formContext,
             openEntityMode,
             disabled: actionsDisabled,
@@ -625,7 +643,13 @@ export function EntityForm<M extends Record<string, any>>({
                     variant={"h4"}>
                     {title ?? collection.singularName ?? collection.name}
                 </Typography>
-                {showEntityPath && <Alert color={"base"} className={"w-full"} size={"small"}>
+
+                {!entity?.values && initialStatus === "existing" &&
+                    <Alert color={"warning"} size={"small"} outerClassName={"w-full mb-4 text-xs"}>
+                        This entity does not exist in the database
+                    </Alert>}
+
+                {showEntityPath && <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
                     <code
                         className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
                         {entity?.path ?? path}/{entityId}
@@ -635,6 +659,10 @@ export function EntityForm<M extends Record<string, any>>({
 
             {children}
 
+            {initialEntityId && !entity && initialStatus !== "new" && <Alert color={"info"} size={"small"}>
+                This entity does not exist in the database
+            </Alert>}
+
             {!Builder && !collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
                                entityId={entityId}
@@ -668,6 +696,8 @@ export function EntityForm<M extends Record<string, any>>({
     const dialogActions = <EntityFormActionsComponent
         collection={resolvedCollection}
         path={path}
+        fullPath={path}
+        fullIdPath={fullIdPath}
         entity={entity}
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
         savingError={savingError}
@@ -677,6 +707,8 @@ export function EntityForm<M extends Record<string, any>>({
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
         showDefaultActions={showDefaultActions}
+        navigateBack={navigateBack}
+        formContext={formContext}
     />;
 
     return (