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

package/src/form/EntityFormActions.tsx

@@ -1,5 +1,12 @@
 import React from "react";
-import { Entity, EntityAction, FireCMSContext, ResolvedEntityCollection, SideEntityController } from "../types";
+import {
+    Entity,
+    EntityAction,
+    FireCMSContext,
+    FormContext,
+    ResolvedEntityCollection,
+    SideEntityController
+} from "../types";
 import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
 import { useFireCMSContext, useSideEntityController } from "../hooks";
@@ -18,6 +25,8 @@ export interface EntityFormActionsProps {
     pluginActions: React.ReactNode[];
     openEntityMode: "side_panel" | "full_screen";
     showDefaultActions?: boolean;
+    navigateBack: () => void;
+    formContext: FormContext
 }
 
 export function EntityFormActions({
@@ -31,7 +40,9 @@ export function EntityFormActions({
                                       disabled,
                                       status,
                                       pluginActions,
-                                      openEntityMode
+                                      openEntityMode,
+                                      navigateBack,
+                                      formContext
                                   }: EntityFormActionsProps) {
 
     const context = useFireCMSContext();
@@ -50,7 +61,9 @@ export function EntityFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
+            navigateBack,
+            formContext
         })
         : buildSideActions({
             fullPath,
@@ -64,7 +77,9 @@ export function EntityFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
+            navigateBack,
+            formContext
         });
 }
 
@@ -82,6 +97,8 @@ type ActionsViewProps<M extends object> = {
     status: "new" | "existing" | "copy",
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext
 };
 
 function buildBottomActions<M extends object>({
@@ -97,7 +114,9 @@ function buildBottomActions<M extends object>({
                                                   disabled,
                                                   status,
                                                   pluginActions,
-                                                  openEntityMode
+                                                  openEntityMode,
+                                                  navigateBack,
+                                                  formContext
                                               }: ActionsViewProps<M>) {
 
     return <DialogActions position={"absolute"}>
@@ -115,13 +134,16 @@ function buildBottomActions<M extends object>({
                         event.stopPropagation();
                         if (entity)
                             action.onClick({
+                                view: "form",
                                 entity,
                                 fullPath: fullPath ?? collection.path,
                                 fullIdPath: fullIdPath ?? collection.id,
                                 collection: collection,
                                 context,
                                 sideEntityController,
-                                openEntityMode: openEntityMode
+                                openEntityMode: openEntityMode,
+                                navigateBack,
+                                formContext
                             });
                     }}>
                     {action.icon}
@@ -129,10 +151,14 @@ function buildBottomActions<M extends object>({
             ))}
         </div>}
         {pluginActions}
-        <Button variant="text" disabled={disabled || isSubmitting} type="reset">
+        <Button variant="text" disabled={disabled || isSubmitting}
+                color={"primary"}
+                type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
-        <Button variant={"filled"} color="primary" type="submit"
+        <Button variant={"filled"}
+                color="primary"
+                type="submit"
                 disabled={disabled || isSubmitting}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
@@ -146,6 +172,9 @@ function buildSideActions<M extends object>({
                                                 savingError,
                                                 entity,
                                                 formActions,
+                                                fullPath,
+                                                fullIdPath,
+                                                openEntityMode,
                                                 collection,
                                                 context,
                                                 sideEntityController,

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -46,11 +46,13 @@ export function MarkdownEditorFieldBinding({
     const entityId = context.entityId;
     const path = context.path;
 
-    // const fieldVersion = useRef(0);
     const [fieldVersion, setFieldVersion] = useState(0);
-    const internalValue = useRef(value);
+    const internalValue = useRef<string | null>(value);
 
     const onContentChange = useCallback((content: string) => {
+        if (content === value || (value === null && content === "")) {
+            return;
+        }
         internalValue.current = content;
         setValue(content);
     }, [setValue]);

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -114,7 +114,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"h-8text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}

package/src/types/collections.ts

@@ -196,8 +196,11 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      *     }
      * }
      * ```
+     *
+     * You can also pass the action as a string that represents the `key`, in which case it will
+     * use the action defined in the main configuration under `entityActions`.
      */
-    entityActions?: EntityAction<M, USER>[];
+    entityActions?: (EntityAction<M, USER> | string)[];
 
     /**
      * Pass your own selection controller if you want to control selected

package/src/types/customization_controller.tsx

@@ -4,6 +4,7 @@ import { FireCMSPlugin } from "./plugins";
 import { EntityCustomView } from "./collections";
 import { Locale } from "./locales";
 import { PropertyConfig } from "./property_config";
+import { EntityAction } from "./entity_actions";
 
 export type CustomizationController = {
 
@@ -26,6 +27,14 @@ export type CustomizationController = {
      */
     entityViews?: EntityCustomView[];
 
+    /**
+     * List of actions that can be performed on entities.
+     * These actions are displayed in the entity view and in the collection view.
+     * You can later reuse these actions in the `entityActions` prop of a collection,
+     * by specifying the `key` of the action.
+     */
+    entityActions?: EntityAction<any, any>[];
+
     /**
      * Format of the dates in the CMS.
      * Defaults to 'MMMM dd, yyyy, HH:mm:ss'

package/src/types/entity_actions.tsx

@@ -4,6 +4,7 @@ import { Entity } from "./entities";
 import { EntityCollection, SelectionController } from "./collections";
 import { User } from "./user";
 import { SideEntityController } from "./side_entity_controller";
+import { FormContext } from "./fields";
 
 /**
  * An entity action is a custom action that can be performed on an entity.
@@ -17,7 +18,10 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
 
     /**
      * Key of the action. You only need to provide this if you want to
-     * override the default actions.
+     * override the default actions, or if you are not passing the action
+     * directly to the `entityActions` prop of a collection.
+     * You can define your actions at the app level, in which case you
+     * must provide a key.
      * The default actions are:
      * - edit
      * - delete
@@ -36,6 +40,12 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
      */
     onClick: (props: EntityActionClickProps<M, USER>) => Promise<void> | void;
 
+    /**
+     * Optional callback in case you want to disable the action
+     * @param props
+     */
+    isEnabled?: (props: EntityActionClickProps<M, USER>) => boolean;
+
     /**
      * Show this action collapsed in the menu of the collection view.
      * Defaults to true
@@ -51,19 +61,59 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
 }
 
 export type EntityActionClickProps<M extends object, USER extends User = User> = {
-    entity: Entity<M>;
+    entity?: Entity<M>;
     context: FireCMSContext<USER>;
+
     fullPath?: string;
     fullIdPath?: string;
     collection?: EntityCollection<M>;
+
+    /**
+     * Optional form context, present if the action is being called from a form.
+     * This allows you to access the form state and methods, including modifying the form values.
+     */
+    formContext?: FormContext;
+
+    /**
+     * Present if this actions is being called from a side dialog only
+     */
+    sideEntityController?: SideEntityController;
+
+    /**
+     * Is the action being called from the collection view or from the entity form view?
+     */
+    view: "collection" | "form";
+
+    /**
+     * If the action is rendered in the form, is it open in a side panel or full screen?
+     */
+    openEntityMode: "side_panel" | "full_screen";
+
+    /**
+     * Optional selection controller, present if the action is being called from a collection view
+     */
     selectionController?: SelectionController;
+
+    /**
+     * Optional highlight function to highlight the entity in the collection view
+     * @param entity
+     */
     highlightEntity?: (entity: Entity<any>) => void;
+
+    /**
+     * Optional unhighlight function to remove the highlight from the entity in the collection view
+     * @param entity
+     */
     unhighlightEntity?: (entity: Entity<any>) => void;
-    onCollectionChange?: () => void;
+
     /**
-     * If this actions is being called from a side dialog
+     * Optional function to navigate back (e.g. when deleting an entity or navigating from a form)
      */
-    sideEntityController?: SideEntityController;
+    navigateBack?: () => void;
+
+    /**
+     * Callback to be called when the collection changes, e.g. after an entity is deleted or created.
+     */
+    onCollectionChange?: () => void;
 
-    openEntityMode: "side_panel" | "full_screen";
 };

package/src/types/firecms.tsx

@@ -12,6 +12,7 @@ import { EntityLinkBuilder } from "./entity_link_builder";
 import { UserConfigurationPersistence } from "./local_config_persistence";
 import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
+import { EntityAction } from "./entity_actions";
 
 /**
  * Use this callback to build entity collections dynamically.
@@ -94,6 +95,14 @@ export type FireCMSProps<USER extends User> = {
      */
     entityViews?: EntityCustomView[];
 
+    /**
+     * List of actions that can be performed on entities.
+     * These actions are displayed in the entity view and in the collection view.
+     * You can later reuse these actions in the `entityActions` prop of a collection,
+     * by specifying the `key` of the action.
+     */
+    entityActions?: EntityAction[];
+
     /**
      * Format of the dates in the CMS.
      * Defaults to 'MMMM dd, yyyy, HH:mm:ss'

package/src/types/plugins.tsx

@@ -166,8 +166,16 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             props?: FORM_PROPS;
         }
 
+        /**
+         * Add custom actions to the default ones ("Save", "Discard"...)
+         */
         Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
 
+        /**
+         * Add custom actions to the top of the form
+         */
+        ActionsTop?: React.ComponentType<PluginFormActionProps<any, EC>>;
+
         fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
 
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
@@ -221,12 +229,12 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
 export interface PluginFormActionProps<USER extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
+    parentCollectionIds: string[];
     status: EntityStatus;
     collection: EC;
     disabled: boolean;
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
-    currentEntityId?: string;
     openEntityMode: "side_panel" | "full_screen";
 }
 

package/src/util/join_collections.ts

@@ -100,13 +100,15 @@ export function mergeCollection(target: EntityCollection,
     const sourcePropertiesOrder = getCollectionKeys(source);
     const mergedPropertiesOrder = [...new Set([...sourcePropertiesOrder, ...targetPropertiesOrder])];
     const mergedEntityViews = [...new Set([...(target.entityViews ?? []), ...(source.entityViews ?? [])])];
+    const mergedEntityActions = [...new Set([...(target.entityActions ?? []), ...(source.entityActions ?? [])])];
 
     let resultCollection: EntityCollection = {
         ...mergedCollection,
         subcollections: subcollectionsMerged,
         properties: sortProperties(propertiesMerged, mergedPropertiesOrder),
         propertiesOrder: mergedPropertiesOrder,
-        entityViews: mergedEntityViews
+        entityViews: mergedEntityViews,
+        entityActions: mergedEntityActions,
     };
     if (modifyCollection) {
         const modifiedCollection = modifyCollection({

package/src/util/resolutions.ts

@@ -3,6 +3,7 @@ import {
     AuthController,
     CMSType,
     CustomizationController,
+    EntityAction,
     EntityCollection,
     EntityCustomView,
     EntityValues,
@@ -438,6 +439,17 @@ export function resolveEntityView(entityView: string | EntityCustomView<any>, co
     }
 }
 
+export function resolveEntityAction<M extends Record<string, any>>(
+    entityAction: string | EntityAction<M>,
+    contextEntityActions?: EntityAction<M>[]
+): EntityAction<M> | undefined {
+    if (typeof entityAction === "string") {
+        return contextEntityActions?.find((entry) => entry.key === entityAction);
+    } else {
+        return entityAction;
+    }
+}
+
 export function resolvedSelectedEntityView<M extends Record<string, any>>(
     customViews: (string | EntityCustomView<M>)[] | undefined,
     customizationController: CustomizationController,
@@ -447,7 +459,7 @@ export function resolvedSelectedEntityView<M extends Record<string, any>>(
     const resolvedEntityViews = customViews ? customViews
             .map(e => resolveEntityView(e, customizationController.entityViews))
             .filter((e): e is EntityCustomView<M> => Boolean(e))
-            // .filter((e) => canEdit || !e.includeActions)
+        // .filter((e) => canEdit || !e.includeActions)
         : [];
 
     const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);