@firecms/core 3.0.0-canary.6 → 3.0.0-canary.61

package/src/core/FireCMS.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from "react";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
-import { AuthControllerContext, ModeControllerContext } from "../contexts";
+import { CustomizationController, EntityCollection, 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,11 +12,9 @@ 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 } from "@firecms/ui";
+import { CenteredView, Typography, useLocaleConfig } 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";
@@ -35,7 +33,6 @@ import { useProjectLog } from "../hooks/useProjectLog";
  */
 export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
 
-    const modeController = useModeController();
     const {
         children,
         entityLinkBuilder,
@@ -71,7 +68,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const customizationController = useBuildCustomizationController({
+    const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,
         entityLinkBuilder,
@@ -79,13 +76,13 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    });
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
-    useProjectLog(authController);
+    const accessResponse = useProjectLog(authController, plugins);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -107,40 +104,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
+                </Typography>
+                <Typography>
+                    This app has been blocked. 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>}
+            </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>
-                                                    <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>
+        <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>
+                                                <FireCMSInternal
+                                                    loading={loading}>
+                                                    {children}
+                                                </FireCMSInternal>
+                                            </DialogsProvider>
+                                        </NavigationContext.Provider>
+                                    </SideEntityControllerContext.Provider>
+                                </SideDialogsControllerContext.Provider>
+                            </AuthControllerContext.Provider>
+                        </DataSourceContext.Provider>
+                    </StorageSourceContext.Provider>
+                </UserConfigurationPersistenceContext.Provider>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.Provider>
     );
 
 }

package/src/core/NavigationRoutes.tsx

@@ -13,7 +13,7 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
     customRoutes?: React.ReactNode[]
 
@@ -28,10 +28,9 @@ export type NavigationRoutesProps = {
  * @constructor
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
+                                  homePage = <DefaultHomePage/>,
                                   customRoutes
                               }: NavigationRoutesProps) {
 
@@ -59,6 +58,14 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
             });
         }
+        if (navigation.adminViews) {
+            navigation.adminViews.forEach((cmsView) => {
+                if (Array.isArray(cmsView.path))
+                    cmsViews.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+                else
+                    cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
+            });
+        }
 
         // we reorder collections so that nested paths are included first
         const sortedCollections = [...(navigation.collections ?? [])]
@@ -85,7 +92,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}

package/src/core/Scaffold.tsx

@@ -5,19 +5,35 @@ import { Link } from "react-router-dom";
 import { Drawer as DefaultDrawer, DrawerProps } from "./Drawer";
 import { useLargeLayout, useNavigationController } from "../hooks";
 import { ErrorBoundary, FireCMSAppBar as DefaultFireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
-import { ChevronLeftIcon, cn, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
 
 export const DRAWER_WIDTH = 280;
 
+const DrawerContext = React.createContext<DrawerProps>({
+    hovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useDrawer() {
+    return React.useContext(DrawerContext);
+}
+
 /**
  * @group Core
  */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
+export interface ScaffoldProps<ExtraAppbarProps = object> {
 
     /**
      * Name of the app, displayed as the main title and in the tab title
      */
-    name: string;
+    name?: React.ReactNode;
 
     /**
      * Logo to be displayed in the drawer of the CMS
@@ -30,15 +46,10 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     includeDrawer?: boolean;
 
     /**
-     * In case you need to override the view that gets rendered as a drawer
-     * @see DefaultDrawer
-     */
-    Drawer?: React.ComponentType<DrawerProps<ExtraDrawerProps>>;
-
-    /**
-     * Additional props passed to the custom Drawer
+     * You can define a custom drawer to be displayed in the scaffold.
+     * Use the hook `useDrawer` to access the context values.
      */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
+    drawer?: React.ReactNode;
 
     /**
      * Open the drawer on hover
@@ -46,8 +57,7 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     autoOpenDrawer?: boolean;
 
     /**
-     * A component that gets rendered on the upper side of the main toolbar.
-     * `toolbarExtraWidget` has no effect if this is set.
+     * The AppBar component to be used in the scaffold.
      */
     FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
 
@@ -78,8 +88,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             logo,
             includeDrawer = true,
             autoOpenDrawer,
-            Drawer = DefaultDrawer,
-            drawerProps,
+            drawer = <DefaultDrawer/>,
             FireCMSAppBar = DefaultFireCMSAppBar,
             fireCMSAppBarProps,
         } = props;
@@ -92,60 +101,65 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
         }, []);
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+
         return (
-            <div
-                className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
-                style={{
-                    paddingTop: "env(safe-area-inset-top)",
-                    paddingLeft: "env(safe-area-inset-left)",
-                    paddingRight: "env(safe-area-inset-right)",
-                    paddingBottom: "env(safe-area-inset-bottom)",
-                    height: "100dvh"
-                    // "@supports (height: 100dvh)": {
-                    //     height: "100dvh"
-                    // }
-                }}>
-
-                <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
-
-                <StyledDrawer
-                    displayed={includeDrawer}
-                    onMouseEnter={setOnHoverTrue}
-                    onMouseMove={setOnHoverTrue}
-                    onMouseLeave={setOnHoverFalse}
-                    open={computedDrawerOpen}
-                    logo={logo}
-                    hovered={onHover}
-                    setDrawerOpen={setDrawerOpen}>
-                    {includeDrawer && (
-                        <Drawer
-                            hovered={onHover}
-                            drawerOpen={computedDrawerOpen}
-                            closeDrawer={handleDrawerClose}
-                            {...drawerProps}/>)}
-                </StyledDrawer>
-
-                <main
-                    className="flex flex-col flex-grow overflow-auto">
-                    <DrawerHeader/>
-                    <div
-                        className={cn(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
-
-                        <ErrorBoundary>
-                            {children}
-                        </ErrorBoundary>
-
-                    </div>
-                </main>
-            </div>
+            <DrawerContext.Provider value={{
+                hovered: onHover,
+                drawerOpen: computedDrawerOpen,
+                closeDrawer: handleDrawerClose,
+                openDrawer: handleDrawerOpen,
+                autoOpenDrawer
+            }}>
+                <div
+                    className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh"
+                    }}>
+
+                    <FireCMSAppBar title={name}
+                                   includeDrawer={includeDrawer}
+                                   logo={logo}
+                                   drawerOpen={computedDrawerOpen}
+                                   {...fireCMSAppBarProps}/>
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={computedDrawerOpen}
+                        logo={logo}
+                        hovered={onHover}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawer}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col flex-grow overflow-auto">
+                        <DrawerHeader/>
+                        <div
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+
+                            <ErrorBoundary>
+                                {children}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </DrawerContext.Provider>
         );
     },
     equal
@@ -157,7 +171,7 @@ const DrawerHeader = () => {
     );
 };
 
-function StyledDrawer(props: {
+function DrawerWrapper(props: {
     children: React.ReactNode,
     displayed: boolean,
     open: boolean,
@@ -204,7 +218,7 @@ function StyledDrawer(props: {
                     transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
                     padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
                 }}
-                className={cn("cursor-pointer")}>
+                className={cls("cursor-pointer")}>
 
                 <Tooltip title={"Home"}
                          sideOffset={20}
@@ -214,7 +228,7 @@ function StyledDrawer(props: {
                         {props.logo
                             ? <img src={props.logo}
                                    alt="Logo"
-                                   className={cn("max-w-full max-h-full",
+                                   className={cls("max-w-full max-h-full",
                                        props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 

package/src/core/field_configs.tsx

@@ -331,7 +331,7 @@ export function getFieldConfig(property: Property | ResolvedProperty, propertyCo
     }
     const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
     const customField = fieldId ? propertyConfigs[fieldId] : undefined;
-    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {} as PropertyConfig);
 }
 
 export function getDefaultFieldId(property: Property | ResolvedProperty) {
@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;

package/src/core/index.tsx

@@ -1,10 +1,9 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
+export * from "./Scaffold";
 
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./Drawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";
 

package/src/form/EntityForm.tsx

@@ -19,8 +19,9 @@ import equal from "react-fast-compare"
 import {
     canCreateEntity,
     canDeleteEntity,
-    fullPathToCollectionSegments,
     getDefaultValuesFor,
+    getEntityTitlePropertyKey,
+    getValueInPath,
     isHidden,
     isReadOnly,
     resolveCollection
@@ -34,12 +35,9 @@ import {
 } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
-import { ErrorBoundary } from "../components";
-import {
-    copyEntityAction,
-    deleteEntityAction
-} from "../components/EntityCollectionTable/internal/default_entity_actions";
+import { Alert, Button, CircularProgress, cls, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { CircularProgressCenter, ErrorBoundary } from "../components";
+import { copyEntityAction, deleteEntityAction } from "../components/common/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { ValidationError } from "yup";
 import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
@@ -171,7 +169,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                onFormContextChange,
                                                                hideId,
                                                                autoSave,
-                                                               onIdUpdateError
+                                                               onIdUpdateError,
                                                            }: EntityFormProps<M>) {
 
     const analyticsController = useAnalyticsController();
@@ -179,7 +177,7 @@ function EntityFormInternal<M extends Record<string, any>>({
     const customizationController = useCustomizationController();
 
     const context = useFireCMSContext();
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(inputCollection);
     const plugins = customizationController.plugins;
 
     const initialResolvedCollection = useMemo(() => resolveCollection({
@@ -187,7 +185,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         path,
         values: entity?.values,
         fields: customizationController.propertyConfigs
-    }), [entity?.values, path]);
+    }), [entity?.values, path, customizationController.propertyConfigs]);
 
     const mustSetCustomId: boolean = (status === "new" || status === "copy") &&
         (Boolean(initialResolvedCollection.customId) && initialResolvedCollection.customId !== "optional");
@@ -344,6 +342,9 @@ function EntityFormInternal<M extends Record<string, any>>({
         fields: customizationController.propertyConfigs
     });
 
+    const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
+    const title = internalValues && titlePropertyKey ? getValueInPath(internalValues, titlePropertyKey) : undefined;
+
     const onIdUpdate = inputCollection.callbacks?.onIdUpdate;
 
     const doOnIdUpdate = useCallback(async () => {
@@ -389,12 +390,15 @@ function EntityFormInternal<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
-    const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+    const getActionsForEntity = useCallback(({
+                                                 entity,
+                                                 customEntityActions
+                                             }: {
         entity?: Entity<M>,
         customEntityActions?: EntityAction[]
     }): EntityAction[] => {
-        const createEnabled = canCreateEntity(inputCollection, authController, fullPathToCollectionSegments(path), null);
-        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, fullPathToCollectionSegments(path), entity) : true;
+        const createEnabled = canCreateEntity(inputCollection, authController, path, null);
+        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, path, entity) : true;
         const actions: EntityAction[] = [];
         if (createEnabled)
             actions.push(copyEntityAction);
@@ -408,7 +412,8 @@ function EntityFormInternal<M extends Record<string, any>>({
     const pluginActions: React.ReactNode[] = [];
 
     const formContext: FormContext<M> = {
-        setFieldValue: formex.setFieldValue,
+        // @ts-ignore
+        setFieldValue: useCallback(formex.setFieldValue, []),
         values: formex.values,
         collection: resolvedCollection,
         entityId,
@@ -416,12 +421,14 @@ function EntityFormInternal<M extends Record<string, any>>({
         save
     };
 
+    const submittedFormContext = useRef<FormContext<M> | null>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-        if (onFormContextChange) {
+        if (onFormContextChange && !formContextsEqual(submittedFormContext.current ?? undefined, formContext)) {
             onFormContextChange(formContext);
+            submittedFormContext.current = formContext;
         }
-    }, [onFormContextChange, formContext]);
+    }, [formContext, onFormContextChange]);
 
     if (plugins && inputCollection) {
         const actionProps: PluginFormActionProps = {
@@ -436,7 +443,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         pluginActions.push(...plugins.map((plugin, i) => (
             plugin.form?.Actions
                 ? <plugin.form.Actions
-                    key={`actions_${plugin.name}`} {...actionProps}/>
+                    key={`actions_${plugin.key}`} {...actionProps}/>
                 : null
         )).filter(Boolean));
     }
@@ -445,7 +452,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         <div className="h-full overflow-auto">
 
             {pluginActions.length > 0 && <div
-                className={cn("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
+                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
                 {pluginActions}
             </div>}
 
@@ -454,8 +461,8 @@ function EntityFormInternal<M extends Record<string, any>>({
                     className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
 
                     <Typography
-                        className={"mt-4 flex-grow " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                        variant={"h4"}>{inputCollection.singularName ?? inputCollection.name}
+                        className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
+                        variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
                     </Typography>
                     <Alert color={"base"} className={"w-full"} size={"small"}>
                         <code className={"text-xs select-all"}>{path}/{entityId}</code>
@@ -508,7 +515,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
     savingError?: Error,
     closeAfterSaveRef: MutableRefObject<boolean>,
     autoSave?: boolean,
-    entityActions: EntityAction[]
+    entityActions: EntityAction[],
 }) {
 
     const {
@@ -530,7 +537,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
         dirty,
         closeAfterSaveRef,
         autoSave,
-        entityActions
+        entityActions,
     } = props;
 
     const context = useFireCMSContext();
@@ -598,6 +605,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                                 <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
                                          delayDuration={800}
                                          side={"left"}
+                                         align={"start"}
                                          sideOffset={16}>
                                     <PropertyFieldBinding {...cmsFormFieldProps}/>
                                 </Tooltip>
@@ -655,17 +663,17 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                                         fullPath: resolvedCollection.path,
                                         collection: resolvedCollection,
                                         context,
-                                        sideEntityController
+                                        sideEntityController,
                                     });
                             }}>
                             {action.icon}
                         </IconButton>
                     ))}
                 </div>}
-
+                {isSubmitting && <CircularProgress size={"small"}/>}
                 <Button
                     variant="text"
-                    disabled={disabled}
+                    disabled={disabled || isSubmitting}
                     type="reset"
                 >
                     {status === "existing" ? "Discard" : "Clear"}
@@ -675,7 +683,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                     variant="text"
                     color="primary"
                     type="submit"
-                    disabled={disabled}
+                    disabled={disabled || isSubmitting}
                     onClick={() => {
                         closeAfterSaveRef.current = false;
                     }}
@@ -689,7 +697,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                     variant="filled"
                     color="primary"
                     type="submit"
-                    disabled={disabled}
+                    disabled={disabled || isSubmitting}
                     onClick={() => {
                         closeAfterSaveRef.current = true;
                     }}
@@ -718,3 +726,10 @@ export function yupToFormErrors(yupError: ValidationError): Record<string, any>
     }
     return errors;
 }
+
+function formContextsEqual(a: FormContext<any> | undefined, b: FormContext<any> | undefined): boolean {
+    return a?.path === b?.path &&
+        a?.entityId === b?.entityId &&
+        equal(a?.values, b?.values) &&
+        equal(a?.collection, b?.collection);
+}