@firecms/core 3.0.0-canary.24 → 3.0.0-canary.241

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
@@ -17,33 +19,74 @@ import { useSideDialogContext } from "./SideDialogs";
  */
 export function EntitySidePanel(props: EntitySidePanelProps) {
 
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        formProps,
+    } = props;
+
     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]);
+        return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
 
     const collection = useMemo(() => {
-        if (!props) return undefined;
-        let usedCollection = props.collection;
+        if (props.collection) {
+            return props.collection;
+        }
 
-        const registryCollection = navigationController.getCollection(props.path, props.entityId);
+        const registryCollection = navigationController.getCollection(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 `", path, "`. Entity id: ", entityId);
+        throw Error("ERROR: No collection found in path `" + 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 +106,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,10 +122,43 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             <ErrorBoundary>
                 <EntityEditView
                     {...props}
-                    formWidth={props.width}
+                    layout={"side_panel"}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
-                    onValuesAreModified={onValuesAreModified}
+                    onValuesModified={onValuesModified}
+                    onSaved={onUpdate}
+                    barActions={<>
+                        <IconButton
+                            className="self-center"
+                            onClick={onClose}>
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                        {allowFullScreen && <IconButton
+                            className="self-center"
+                            onClick={() => {
+                                if (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={formProps}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -1,9 +1,11 @@
-import React, { useMemo } from "react";
+"use client";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import React, { useMemo } from "react";
+import { CenteredView, Typography } from "@firecms/ui";
+import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
-import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
+import { useCustomizationController, useFireCMSContext } from "../hooks";
 import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
 import { ErrorView } from "../components";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
@@ -12,14 +14,12 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { useLocaleConfig } from "../internal/useLocaleConfig";
-import { CenteredView, Typography } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
-import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 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
@@ -30,12 +30,11 @@ import { useProjectLog } from "../hooks/useProjectLog";
  *
  * You only need to use this component if you are building a custom app.
  *
- * @constructor
+
  * @group Core
  */
-export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
+export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
 
-    const modeController = useModeController();
     const {
         children,
         entityLinkBuilder,
@@ -45,33 +44,29 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins,
+        plugins: pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
         components,
         navigationController,
+        apiKey
     } = props;
 
-    useLocaleConfig(locale);
+    if (pluginsProp) {
+        console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
+    }
 
-    /**
-     * Controller in charge of fetching and persisting data
-     */
-    const dataSource = useBuildDataSource({
-        delegate: dataSourceDelegate,
-        propertyConfigs,
-        navigationController
-    });
+    const plugins = navigationController.plugins ?? pluginsProp;
 
     const sideDialogsController = useBuildSideDialogsController();
-    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController);
+    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 
     const pluginsLoading = plugins?.some(p => p.loading) ?? false;
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const customizationController = useBuildCustomizationController({
+    const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,
         entityLinkBuilder,
@@ -79,13 +74,32 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    });
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
-    const accessResponse = useProjectLog(authController, plugins);
+    const accessResponse = useProjectLog({
+        apiKey,
+        authController,
+        dataSourceDelegate,
+        plugins
+    });
+
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceDelegate,
+        propertyConfigs,
+        navigationController,
+        authController
+    });
+
+    if (accessResponse?.message) {
+        console.warn(accessResponse.message);
+    }
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -109,54 +123,54 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     if (accessResponse?.blocked) {
         return (
-            <CenteredView maxWidth={"md"} fullScreen={true}>
-                <Typography variant={"h4"}>
-                    Access blocked
+            <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                <Typography variant={"h4"} gutterBottom>
+                    License needed
                 </Typography>
                 <Typography>
-                    This app has been blocked. Please reach out at <a
+                    You need a valid license to use FireCMS PRO. Please reach out at <a
                     href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
                 </Typography>
                 {accessResponse?.message &&
-                    <Typography>Response from the server: {accessResponse?.message}</Typography>}
+                    <Typography>{accessResponse?.message}</Typography>}
             </CenteredView>
         );
     }
 
     return (
-        <ModeControllerContext.Provider value={modeController}>
-            <AnalyticsContext.Provider value={analyticsController}>
-                <CustomizationControllerContext.Provider value={customizationController}>
-                    <UserConfigurationPersistenceContext.Provider
-                        value={userConfigPersistence}>
-                        <StorageSourceContext.Provider
-                            value={storageSource}>
-                            <DataSourceContext.Provider
-                                value={dataSource}>
-                                <AuthControllerContext.Provider
-                                    value={authController}>
-                                    <SideDialogsControllerContext.Provider
-                                        value={sideDialogsController}>
-                                        <SideEntityControllerContext.Provider
-                                            value={sideEntityController}>
-                                            <NavigationContext.Provider
-                                                value={navigationController}>
-                                                <DialogsProvider>
+        <AnalyticsContext.Provider value={analyticsController}>
+            <CustomizationControllerContext.Provider value={customizationController}>
+                <UserConfigurationPersistenceContext.Provider
+                    value={userConfigPersistence}>
+                    <StorageSourceContext.Provider
+                        value={storageSource}>
+                        <DataSourceContext.Provider
+                            value={dataSource}>
+                            <AuthControllerContext.Provider
+                                value={authController}>
+                                <SideDialogsControllerContext.Provider
+                                    value={sideDialogsController}>
+                                    <SideEntityControllerContext.Provider
+                                        value={sideEntityController}>
+                                        <NavigationContext.Provider
+                                            value={navigationController}>
+                                            <DialogsProvider>
+                                                <BreadcrumbsProvider>
                                                     <FireCMSInternal
                                                         loading={loading}>
                                                         {children}
                                                     </FireCMSInternal>
-                                                </DialogsProvider>
-                                            </NavigationContext.Provider>
-                                        </SideEntityControllerContext.Provider>
-                                    </SideDialogsControllerContext.Provider>
-                                </AuthControllerContext.Provider>
-                            </DataSourceContext.Provider>
-                        </StorageSourceContext.Provider>
-                    </UserConfigurationPersistenceContext.Provider>
-                </CustomizationControllerContext.Provider>
-            </AnalyticsContext.Provider>
-        </ModeControllerContext.Provider>
+                                                </BreadcrumbsProvider>
+                                            </DialogsProvider>
+                                        </NavigationContext.Provider>
+                                    </SideEntityControllerContext.Provider>
+                                </SideDialogsControllerContext.Provider>
+                            </AuthControllerContext.Provider>
+                        </DataSourceContext.Provider>
+                    </StorageSourceContext.Provider>
+                </UserConfigurationPersistenceContext.Provider>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.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
+        }
+    ])}/>;
+}