@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/core/EntityEditViewFormActions.tsx

@@ -0,0 +1,199 @@
+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,
+                                              showDefaultActions = true
+                                          }: 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 = showDefaultActions ? 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

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import { EntitySidePanelProps } from "../types";
-import { useNavigationController } from "../hooks";
+import { useNavigationController, useSideEntityController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityEditView } from "./EntityEditView";
+import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
+import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
+import { useLocation, useNavigate } from "react-router-dom";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -20,30 +22,64 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const {
         blocked,
         setBlocked,
-        setBlockedNavigationMessage
+        setBlockedNavigationMessage,
+        close
     } = useSideDialogContext();
 
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
+    const sideDialogsController = useSideDialogContext();
+
+    const onClose = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+
+        setBlocked(false);
+        close(true);
+    }
+
+    const onUpdate = (params: OnUpdateParams) => {
+        if (props.onUpdate) {
+            props.onUpdate(params);
+        }
+        if (params.status !== "existing") {
+            sideEntityController.replace({
+                path: params.path,
+                entityId: params.entityId,
+                selectedTab: params.selectedTab,
+                updateUrl: true,
+                collection: params.collection,
+            });
+        }
+
+        if (sideDialogsController.pendingClose) {
+            sideDialogsController.setPendingClose(false);
+            onClose();
+        }
+
+    }
 
     const parentCollectionIds = useMemo(() => {
         return navigationController.getParentCollectionIds(props.path);
     }, [navigationController, props.path]);
 
     const collection = useMemo(() => {
-        if (!props) return undefined;
-        let usedCollection = props.collection;
+        if (props.collection) {
+            return props.collection;
+        }
 
         const registryCollection = navigationController.getCollection(props.path);
         if (registryCollection) {
-            usedCollection = registryCollection;
-        }
-        if (!usedCollection) {
-            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.");
+            return registryCollection;
         }
 
-        return usedCollection;
-    }, [navigationController, props]);
+        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]);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -63,11 +99,11 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     }, [blocked, collection]);
 
-    const onValuesAreModified = useCallback((modified: boolean) => {
-        setBlocked(modified);
+    const onValuesModified = useCallback((modified: boolean) => {
         setBlockedNavigationMessage(modified
             ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
             : undefined)
+        setBlocked(modified);
     }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
 
     if (!props || !collection) {
@@ -79,9 +115,43 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             <ErrorBoundary>
                 <EntityEditView
                     {...props}
+                    layout={"side_panel"}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
-                    onValuesAreModified={onValuesAreModified}
+                    onValuesModified={onValuesModified}
+                    onSaved={onUpdate}
+                    barActions={<>
+                        <IconButton
+                            className="self-center"
+                            onClick={onClose}>
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                        <IconButton
+                            className="self-center"
+                            onClick={() => {
+                                if (props.entityId)
+                                    navigate(location.pathname);
+                                else
+                                    navigate(location.pathname + "#new");
+                            }}>
+                            <OpenInFullIcon size={"small"}/>
+                        </IconButton>
+                    </>}
+                    onTabChange={({
+                                      path,
+                                      entityId,
+                                      selectedTab,
+                                      collection,
+                                  }) => {
+                        sideEntityController.replace({
+                            path,
+                            entityId,
+                            selectedTab,
+                            updateUrl: true,
+                            collection,
+                        });
+                    }}
+                    formProps={props.formProps}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -1,5 +1,7 @@
-import React, { useMemo } from "react";
+"use client";
 
+import React, { useMemo } from "react";
+import { CenteredView, Typography } from "@firecms/ui";
 import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
@@ -12,12 +14,12 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
+import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 
 /**
  * If you are using independent components of the CMS
@@ -31,7 +33,7 @@ import { useProjectLog } from "../hooks/useProjectLog";
 
  * @group Core
  */
-export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
+export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
 
     const {
         children,
@@ -51,8 +53,6 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         apiKey
     } = props;
 
-    useLocaleConfig(locale);
-
     /**
      * Controller in charge of fetching and persisting data
      */
@@ -89,6 +89,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         dataSourceDelegate,
         plugins
     });
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }
@@ -147,10 +148,12 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
                                         <NavigationContext.Provider
                                             value={navigationController}>
                                             <DialogsProvider>
-                                                <FireCMSInternal
-                                                    loading={loading}>
-                                                    {children}
-                                                </FireCMSInternal>
+                                                <BreadcrumbsProvider>
+                                                    <FireCMSInternal
+                                                        loading={loading}>
+                                                        {children}
+                                                    </FireCMSInternal>
+                                                </BreadcrumbsProvider>
                                             </DialogsProvider>
                                         </NavigationContext.Provider>
                                     </SideEntityControllerContext.Provider>

package/src/core/FireCMSRouter.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { removeInitialAndTrailingSlashes } from "../util";
+
+export function FireCMSRouter({
+                           children,
+                           basePath
+                       }: {
+    children: React.ReactNode,
+    basePath?: string;
+}) {
+    return <RouterProvider router={createBrowserRouter([
+        {
+            path: basePath ? `${removeInitialAndTrailingSlashes(basePath)}/*` : "/*",
+            element: children
+        }
+    ])}/>;
+}

package/src/core/NavigationRoutes.tsx

@@ -2,9 +2,11 @@ import React from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 import { CMSView } from "../types";
-import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
+import { DefaultHomePage, ErrorBoundary, NotFoundPage } from "../components";
 import { useNavigationController } from "../hooks";
-import { toArray } from "../util/arrays";
+import { FireCMSRoute } from "../routes/FireCMSRoute";
+import { CustomCMSRoute } from "../routes/CustomCMSRoute";
+import { HomePageRoute } from "../routes/HomePageRoute";
 
 /**
  * @group Components
@@ -25,7 +27,6 @@ export type NavigationRoutesProps = {
  * or the home route) related to a {@link NavigationController}.
  * This component needs a parent {@link FireCMS}
  *
-
  * @group Components
  */
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
@@ -67,43 +68,33 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
             });
         }
 
-        // we reorder collections so that nested paths are included first
-        const sortedCollections = [...(navigation.collections ?? [])]
-            .sort((a, b) => b.path.length - a.path.length);
-
-        const collectionRoutes = sortedCollections
-            .map((collection) => {
-                    const urlPath = navigation.buildUrlCollectionPath(collection.id ?? collection.path);
-                    return <Route path={urlPath + "/*"}
-                                  key={`navigation_${collection.id ?? collection.path}`}
-                                  element={
-                                      <ErrorBoundary>
-                                          <EntityCollectionView
-                                              key={`collection_view_${collection.id ?? collection.path}`}
-                                              isSubCollection={false}
-                                              parentCollectionIds={[]}
-                                              fullPath={collection.id ?? collection.path}
-                                              {...collection}
-                                              Actions={toArray(collection.Actions)}/>
-                                      </ErrorBoundary>
-                                  }/>;
-                }
-            );
+        const collectionUrlPath = navigation.buildUrlCollectionPath("");
+        const collectionRoute = (
+            <Route path={collectionUrlPath + "/*"}
+                   key={`navigation_entity`}
+                   element={
+                       <ErrorBoundary>
+                           <FireCMSRoute/>
+                       </ErrorBoundary>
+                   }/>
+        );
 
         const homeRoute = (
             <Route path={"/"}
-                   element={homePage}/>
+                   element={<HomePageRoute>{homePage}</HomePageRoute>}/>
         );
 
-        const notFoundRoute = <Route path={"*"}
-                                     element={
-                                         <NotFoundPage/>
-                                     }/>;
+        const notFoundRoute = (
+            <Route path={"*"}
+                   element={
+                       <NotFoundPage/>
+                   }/>
+        );
 
         return (
             <Routes location={baseLocation}>
 
-                {collectionRoutes}
+                {collectionRoute}
 
                 {cmsViews}
 
@@ -121,6 +112,6 @@ const buildCMSViewRoute = (path: string, cmsView: CMSView) => {
     return <Route
         key={"navigation_view_" + path}
         path={path}
-        element={cmsView.view}
+        element={<CustomCMSRoute cmsView={cmsView}/>}
     />;
 };

package/src/core/SideDialogs.tsx

@@ -1,19 +1,22 @@
-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";
-import { UnsavedChangesDialog, useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
 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) => {
@@ -21,6 +24,10 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
     setBlockedNavigationMessage: (message?: React.ReactNode) => {
     },
     close: () => {
+    },
+    pendingClose: false,
+    setPendingClose: () => {
+
     }
 });
 
@@ -29,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
@@ -72,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;
 
@@ -111,8 +120,6 @@ function SideDialogView({
         }
     };
 
-    // const offsetClass = offsetPosition > 0 ? `transform translate-x-${offsetPosition}` : "";
-
     return (
         <SideDialogContext.Provider
             value={{
@@ -120,7 +127,9 @@ function SideDialogView({
                 setBlocked,
                 setBlockedNavigationMessage,
                 width,
-                close: onCloseRequest
+                close: onCloseRequest,
+                pendingClose,
+                setPendingClose
             }}>
 
             <Sheet
@@ -130,10 +139,10 @@ function SideDialogView({
             >
                 {panel &&
                     <div
-                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-gray-900 "}
+                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
                         style={{
                             width: panel.width,
-                            transform: `translateX(-${offsetPosition * 200}px)`
+                            transform: `translateX(-${offsetPosition * 200}px)`,
                         }}
                     >
                         <ErrorBoundary>
@@ -146,7 +155,7 @@ function SideDialogView({
             </Sheet>
 
             <UnsavedChangesDialog
-                open={navigationWasBlocked || drawerCloseRequested}
+                open={drawerCloseRequested}
                 handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
                 handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
                 body={blockedNavigationMessage}/>

package/src/core/field_configs.tsx

@@ -23,7 +23,6 @@ import {
     AddLinkIcon,
     BallotIcon,
     DriveFolderUploadIcon,
-    EmailIcon,
     FlagIcon,
     FormatListNumberedIcon,
     FormatQuoteIcon,
@@ -31,6 +30,7 @@ import {
     LinkIcon,
     ListAltIcon,
     ListIcon,
+    MailIcon,
     NumbersIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -96,7 +96,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         key: "email",
         name: "Email",
         description: "Text with email validation",
-        Icon: EmailIcon,
+        Icon: MailIcon,
         color: "#154fb3",
         property: {
             dataType: "string",
@@ -129,7 +129,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     },
     multi_select: {
         key: "multi_select",
-        name: "Multi select",
+        name: "Multi select (enum)",
         description: "Select multiple text values from within an enumeration",
         Icon: ListAltIcon,
         color: "#4223c9",
@@ -300,7 +300,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     block: {
         key: "block",
         name: "Block",
-        description: "A complex field that allows the user to compose different fields together, with a key->value format",
+        description: "A complex field that allows the user to compose different fields together, with a key/value format",
         Icon: ViewStreamIcon,
         color: "#ff9408",
         property: {