@firecms/core 3.0.0-canary.257 → 3.0.0-canary.259

package/src/components/common/default_entity_actions.tsx

@@ -5,10 +5,11 @@ import { addRecentId } from "../EntityCollectionView/utils";
 import { navigateToEntity, resolveDefaultSelectedView } from "../../util";
 
 export const editEntityAction: EntityAction = {
-    icon: <EditIcon/>,
+    icon: <EditIcon size={"small"}/>,
     key: "edit",
     name: "Edit",
     collapsed: false,
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 collection,
@@ -20,6 +21,10 @@ export const editEntityAction: EntityAction = {
                 openEntityMode
             }): Promise<void> {
 
+        if (!entity) {
+            throw new Error("INTERNAL: editEntityAction: Entity is undefined");
+        }
+
         highlightEntity?.(entity);
 
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
@@ -57,9 +62,10 @@ export const editEntityAction: EntityAction = {
 }
 
 export const copyEntityAction: EntityAction = {
-    icon: <FileCopyIcon/>,
+    icon: <FileCopyIcon size={"small"}/>,
     name: "Copy",
     key: "copy",
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 collection,
@@ -69,6 +75,9 @@ export const copyEntityAction: EntityAction = {
                 unhighlightEntity,
                 openEntityMode
             }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: copyEntityAction: Entity is undefined");
+        }
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
@@ -94,9 +103,10 @@ export const copyEntityAction: EntityAction = {
 }
 
 export const deleteEntityAction: EntityAction = {
-    icon: <DeleteIcon/>,
+    icon: <DeleteIcon size={"small"}/>,
     name: "Delete",
     key: "delete",
+    isEnabled: ({ entity }) => Boolean(entity),
     onClick({
                 entity,
                 fullPath,
@@ -104,8 +114,11 @@ export const deleteEntityAction: EntityAction = {
                 context,
                 selectionController,
                 onCollectionChange,
-                sideEntityController
+                navigateBack
             }): Promise<void> {
+        if (!entity) {
+            throw new Error("INTERNAL: deleteEntityAction: Entity is undefined");
+        }
         const { closeDialog } = context.dialogsController.open({
             key: "delete_entity_dialog_" + entity.id,
             Component: ({ open }) => {
@@ -123,7 +136,7 @@ export const deleteEntityAction: EntityAction = {
                         });
                         selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
                         onCollectionChange?.();
-                        sideEntityController?.close();
+                        navigateBack?.();
                     }}
                     onClose={closeDialog}/>;
             }

package/src/components/common/useDataSourceTableController.tsx

@@ -334,7 +334,7 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
                 }
                 if (encodedValue !== undefined) {
                     entries[encodeURIComponent(`${key}_op`)] = encodeURIComponent(op);
-                    entries[encodeURIComponent(`${key}_value`)] = encodeURIComponent(encodedValue.toString());
+                    entries[encodeURIComponent(`${key}_value`)] = encodedValue ? encodeURIComponent(encodedValue.toString()) : "null";
                 }
             }
         });

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 {
@@ -162,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,
@@ -191,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,
@@ -285,13 +312,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         const subcollectionId = subcollection.id ?? subcollection.path;
         const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.path)}` : undefined;
         const newFullIdPath = fullIdPath ? `${fullIdPath}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
-        console.debug("Rendering subcollection", {
-            subcollectionId,
-            fullIdPath,
-            newFullPath,
-            newFullIdPath,
-            selectedTab
-        });
 
         if (selectedTab !== subcollectionId) return null;
         return (
@@ -423,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

@@ -76,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) {

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/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";
@@ -121,11 +122,23 @@ export function EntityForm<M extends Record<string, any>>({
                                                               children
                                                           }: EntityFormProps<M>) {
 
-
     if (collection.customId && collection.formAutoSave) {
         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);
 
@@ -436,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,
@@ -628,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}
@@ -638,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,7 +693,6 @@ export function EntityForm<M extends Record<string, any>>({
         throw Error("INTERNAL: Collection and path must be defined in form context");
     }
 
-
     const dialogActions = <EntityFormActionsComponent
         collection={resolvedCollection}
         path={path}
@@ -683,6 +707,8 @@ export function EntityForm<M extends Record<string, any>>({
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
         showDefaultActions={showDefaultActions}
+        navigateBack={navigateBack}
+        formContext={formContext}
     />;
 
     return (