@firecms/core 3.0.0-canary.190 → 3.0.0-canary.192

package/dist/types/fields.d.ts

@@ -137,12 +137,6 @@ export interface FormContext<M extends Record<string, any> = any> {
     entity?: Entity<M>;
     savingError?: Error;
     openEntityMode: "side_panel" | "full_screen";
-    /**
-     * If pending close is set to true, the form will close when the user
-     * saves the entity
-     * @param pendingClose
-     */
-    setPendingClose?: (pendingClose: boolean) => void;
     /**
      * This is the underlying formex controller that powers the form
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.190",
+  "version": "3.0.0-canary.192",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.190",
-    "@firecms/formex": "^3.0.0-canary.190",
-    "@firecms/ui": "^3.0.0-canary.190",
+    "@firecms/editor": "^3.0.0-canary.192",
+    "@firecms/formex": "^3.0.0-canary.192",
+    "@firecms/ui": "^3.0.0-canary.192",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "54a510a679c4c6d63949005b879f915b23fb94b7",
+  "gitHead": "ec1250125ee49075f94237f0e34c82cb6d624c1c",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -20,10 +20,9 @@ import { useWindowSize } from "./useWindowSize";
 import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
-import { PropertyFieldBinding } from "../../../../form";
+import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
-import { yupToFormErrors } from "../../../../core/EntityForm";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
     customFieldValidator?: CustomFieldValidator;
@@ -240,14 +239,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
                 .then(() => ({}))
-                .catch((e) => {
-                    // const errors: Record<string, string> = {};
-                    // e.inner.forEach((error: any) => {
-                    //     errors[error.path] = error.message;
-                    // });
-                    // return errors;
-                    return yupToFormErrors(e);
-                });
+                .catch(yupToFormErrors);
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {

package/src/core/EntityEditView.tsx

@@ -1,88 +1,20 @@
-import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
-import {
-    CMSAnalyticsEvent,
-    Entity,
-    EntityAction,
-    EntityCollection,
-    EntityCustomView,
-    EntityStatus,
-    EntityValues,
-    FireCMSContext,
-    FireCMSPlugin,
-    FormContext,
-    PluginFormActionProps,
-    PropertyFieldBindingProps,
-    ResolvedEntityCollection,
-    SideEntityController,
-    User
-} from "../types";
-import equal from "react-fast-compare";
+import React, { useEffect, useMemo, useState } from "react";
+import { Entity, EntityCollection, EntityCustomView, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
 
-import {
-    CircularProgressCenter,
-    copyEntityAction,
-    deleteEntityAction,
-    EntityCollectionView,
-    EntityView,
-    ErrorBoundary,
-    getFormFieldKeys
-} from "../components";
-import {
-    canCreateEntity,
-    canDeleteEntity,
-    canEditEntity,
-    getDefaultValuesFor,
-    getEntityTitlePropertyKey,
-    getValueInPath,
-    isHidden,
-    isReadOnly,
-    mergeEntityActions,
-    removeInitialAndTrailingSlashes,
-    resolveCollection,
-    resolveDefaultSelectedView,
-    resolveEntityView,
-    useDebouncedCallback
-} from "../util";
+import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
+import { canEditEntity, removeInitialAndTrailingSlashes, resolveDefaultSelectedView, resolveEntityView } from "../util";
 
 import {
-    saveEntityWithCallbacks,
     useAuthController,
     useCustomizationController,
-    useDataSource,
     useEntityFetch,
     useFireCMSContext,
-    useLargeLayout,
-    useSideEntityController,
-    useSnackbarController
+    useLargeLayout
 } from "../hooks";
-import {
-    Alert,
-    Button,
-    CheckIcon,
-    Chip,
-    CircularProgress,
-    cls,
-    defaultBorderMixin,
-    DialogActions,
-    EditIcon,
-    IconButton,
-    LoadingButton,
-    NotesIcon,
-    paperMixin,
-    Tab,
-    Tabs,
-    Tooltip,
-    Typography
-} from "@firecms/ui";
-import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
-import { useAnalyticsController } from "../hooks/useAnalyticsController";
-import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
-import { ValidationError } from "yup";
-import { getEntityFromCache, removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
-import { CustomIdField } from "../form/components/CustomIdField";
-import { ErrorFocus } from "../form/components/ErrorFocus";
-import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
-import { EntityForm, FormLayoutInner } from "./EntityForm";
+import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { getEntityFromCache } from "../util/entity_cache";
+import { EntityForm, FormLayoutInner } from "../form";
+import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 
@@ -112,7 +44,6 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     parentCollectionIds: string[];
     onValuesModified?: (modified: boolean) => void;
     onSaved?: (params: OnUpdateParams) => void;
-    onClose?: () => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
     barActions?: React.ReactNode;
@@ -188,21 +119,20 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     />;
 }
 
-
 function SecondaryForm<M extends object>({
                                              collection,
                                              className,
                                              customView,
                                              entity,
                                              formContext,
-                                             forceActionsAtTheBottom
+                                             forceActionsAtTheBottom,
                                          }: {
     className?: string,
     customView: EntityCustomView,
     formContext: FormContext<M>,
     collection: EntityCollection<M>,
     forceActionsAtTheBottom?: boolean,
-    entity: Entity<M> | undefined
+    entity: Entity<M> | undefined,
 }) {
 
     if (!customView.Builder) {
@@ -213,7 +143,8 @@ function SecondaryForm<M extends object>({
     return <FormLayoutInner
         className={className}
         forceActionsAtTheBottom={forceActionsAtTheBottom}
-        formContext={formContext}>
+        formContext={formContext}
+        EntityFormActionsComponent={EntityEditViewFormActions}>
         <ErrorBoundary>
             {formContext && <customView.Builder
                 collection={collection}
@@ -229,12 +160,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId,
                                                                        selectedTab: selectedTabProp,
-                                                                       copy,
                                                                        collection,
                                                                        parentCollectionIds,
                                                                        onValuesModified,
                                                                        onSaved,
-                                                                       onClose,
                                                                        onTabChange,
                                                                        entity,
                                                                        cachedDirtyValues,
@@ -406,7 +335,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             ...params,
             selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
         }) : undefined}
-        onClose={onClose}
         entity={entity}
         cachedDirtyValues={cachedDirtyValues}
         openEntityMode={layout}
@@ -415,6 +343,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         initialStatus={status}
         onStatusChange={setStatus}
         className={!mainViewVisible ? "hidden" : ""}
+        EntityFormActionsComponent={EntityEditViewFormActions}
         onEntityChange={setUsedEntity}
     />;
 

package/src/core/EntityEditViewFormActions.tsx

@@ -0,0 +1,198 @@
+import React, { useMemo } from "react";
+import { Entity, EntityAction, FireCMSContext, 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 { EntityFormActionsProps } from "../form/EntityFormActions";
+import { SideDialogController, useSideDialogContext } from "./SideDialogs";
+
+export function EntityEditViewFormActions({
+                                              collection,
+                                              path,
+                                              entity,
+                                              layout,
+                                              savingError,
+                                              formex,
+                                              disabled,
+                                              status,
+                                              pluginActions,
+                                              openEntityMode
+                                          }: EntityFormActionsProps) {
+
+    const authController = useAuthController();
+    const context = useFireCMSContext();
+    const sideEntityController = useSideEntityController();
+    const sideDialogContext = useSideDialogContext();
+
+    const entityActions = useMemo((): EntityAction[] => {
+        const customEntityActions = collection.entityActions
+        const createEnabled = canCreateEntity(collection, authController, path, null);
+        const deleteEnabled = entity ? canDeleteEntity(collection, authController, path, entity) : false;
+        const actions: EntityAction[] = [];
+        if (createEnabled)
+            actions.push(copyEntityAction);
+        if (deleteEnabled)
+            actions.push(deleteEntityAction);
+        if (customEntityActions)
+            return mergeEntityActions(actions, customEntityActions);
+        return actions;
+    }, [authController, collection, path]);
+
+    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
+
+    return layout === "bottom"
+        ? buildBottomActions({
+            savingError,
+            entity,
+            formActions,
+            collection,
+            context,
+            sideEntityController,
+            isSubmitting: formex.isSubmitting,
+            disabled,
+            status,
+            sideDialogContext,
+            pluginActions,
+            openEntityMode
+        })
+        : buildSideActions({
+            savingError,
+            entity,
+            formActions,
+            collection,
+            context,
+            sideEntityController,
+            isSubmitting: formex.isSubmitting,
+            sideDialogContext,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode
+        });
+}
+
+type ActionsViewProps<M extends object> = {
+    savingError: Error | undefined,
+    entity: Entity<M> | undefined,
+    formActions: EntityAction[],
+    collection: ResolvedEntityCollection,
+    context: FireCMSContext,
+    sideEntityController: SideEntityController,
+    isSubmitting: boolean,
+    disabled: boolean,
+    status: "new" | "existing" | "copy",
+    sideDialogContext: SideDialogController,
+    pluginActions?: React.ReactNode[],
+    openEntityMode: "side_panel" | "full_screen";
+};
+
+function buildBottomActions<M extends object>({
+                                                  savingError,
+                                                  entity,
+                                                  formActions,
+                                                  collection,
+                                                  context,
+                                                  sideEntityController,
+                                                  isSubmitting,
+                                                  disabled,
+                                                  status,
+                                                  sideDialogContext,
+                                                  pluginActions,
+                                                  openEntityMode
+                                              }: ActionsViewProps<M>) {
+
+    const canClose = openEntityMode === "side_panel";
+    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>
+            ))}
+        </div>}
+        {pluginActions}
+        <Button variant="text" disabled={disabled || isSubmitting} type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+        <Button variant={canClose ? "text" : "filled"} color="primary" type="submit"
+                disabled={disabled || isSubmitting}
+                onClick={() => {
+                    sideDialogContext.setPendingClose(false);
+                }}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </Button>
+        {canClose && <LoadingButton variant="filled"
+                                    color="primary"
+                                    type="submit"
+                                    loading={isSubmitting}
+                                    disabled={disabled}
+                                    onClick={() => {
+                                        sideDialogContext.setPendingClose?.(true);
+                                    }}>
+            {status === "existing" && "Save and close"}
+            {status === "copy" && "Create copy and close"}
+            {status === "new" && "Create and close"}
+        </LoadingButton>}
+    </DialogActions>;
+}
+
+function buildSideActions<M extends object>({
+                                                savingError,
+                                                entity,
+                                                formActions,
+                                                collection,
+                                                context,
+                                                sideEntityController,
+                                                isSubmitting,
+                                                disabled,
+                                                status,
+                                                sideDialogContext,
+                                                pluginActions
+                                            }: ActionsViewProps<M>) {
+
+    return <div
+        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
+        <LoadingButton fullWidth={true} variant="filled" color="primary" type="submit" size={"large"}
+                       disabled={disabled || isSubmitting} onClick={() => {
+            sideDialogContext.setPendingClose?.(false);
+        }}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </LoadingButton>
+        <Button fullWidth={true} variant="text" disabled={disabled || isSubmitting} type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+
+        {pluginActions}
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+    </div>;
+}

package/src/core/EntitySidePanel.tsx

@@ -31,6 +31,9 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
+    const sideDialogsController = useSideDialogContext();
+
+    console.log("sideDialogsController", sideDialogsController);
 
     const onClose = () => {
         if (props.onClose) {
@@ -55,6 +58,11 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             });
         }
 
+        if (sideDialogsController.pendingClose) {
+            sideDialogsController.setPendingClose(false);
+            onClose();
+        }
+
     }
 
     const parentCollectionIds = useMemo(() => {
@@ -113,7 +121,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
                     onValuesModified={onValuesModified}
-                    onClose={onClose}
                     onSaved={onUpdate}
                     barActions={<>
                         <IconButton

package/src/core/SideDialogs.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
@@ -6,15 +6,17 @@ import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChanges
 import { ErrorBoundary } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 
-export type SideDialogContextProps = {
+export type SideDialogController = {
     blocked: boolean,
     setBlocked: (blocked: boolean) => void,
     setBlockedNavigationMessage: (message?: React.ReactNode) => void,
     width?: string,
-    close: (force?: boolean) => void
+    close: (force?: boolean) => void;
+    pendingClose: boolean,
+    setPendingClose: (pendingClose: boolean) => void
 }
 
-const SideDialogContext = React.createContext<SideDialogContextProps>({
+const SideDialogContext = React.createContext<SideDialogController>({
     width: "",
     blocked: false,
     setBlocked: (blocked: boolean) => {
@@ -22,6 +24,10 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
     setBlockedNavigationMessage: (message?: React.ReactNode) => {
     },
     close: () => {
+    },
+    pendingClose: false,
+    setPendingClose: () => {
+
     }
 });
 
@@ -30,7 +36,7 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
  * in contrast with {@link useSideDialogsController} which handles the
  * state of all the dialogs.
  */
-export const useSideDialogContext = () => useContext<SideDialogContextProps>(SideDialogContext);
+export const useSideDialogContext = () => useContext<SideDialogController>(SideDialogContext);
 
 /**
  * This is the component in charge of rendering the side dialogs used
@@ -73,6 +79,8 @@ function SideDialogView({
     const [blocked, setBlocked] = useState(false);
     const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
 
+    const [pendingClose, setPendingClose] = useState(false);
+
     const widthRef = React.useRef<string | undefined>(panel?.width);
     const width = widthRef.current;
 
@@ -119,19 +127,15 @@ function SideDialogView({
                 setBlocked,
                 setBlockedNavigationMessage,
                 width,
-                close: onCloseRequest
+                close: onCloseRequest,
+                pendingClose,
+                setPendingClose
             }}>
 
             <Sheet
                 open={Boolean(panel)}
                 onOpenChange={(open) => !open && onCloseRequest()}
                 title={"Side dialog " + panel?.key}
-                // style={{
-                //     zIndex: offsetPosition * 20 + 20,
-                // }}
-                // overlayStyle={{
-                //     zIndex: offsetPosition * 20 + 10,
-                // }}
             >
                 {panel &&
                     <div