@firecms/core 3.0.0-rc.1 → 3.0.0-rc.3

package/src/core/EntityEditView.tsx

@@ -3,6 +3,7 @@ import {
     Entity,
     EntityCollection,
     EntityStatus,
+    EntityValues,
     FireCMSPlugin,
     FormContext,
     PluginFormActionProps,
@@ -26,7 +27,7 @@ import {
     useLargeLayout
 } from "../hooks";
 import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
-import { getEntityFromCache } from "../util/entity_cache";
+import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
@@ -44,6 +45,13 @@ export type OnUpdateParams = {
     collection: EntityCollection<any>
 };
 
+export type BarActionsParams = {
+    values: object,
+    status: EntityStatus,
+    path: string,
+    entityId?: string;
+};
+
 export type OnTabChangeParams<M extends Record<string, any>> = {
     path: string;
     entityId?: string;
@@ -67,11 +75,11 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     copy?: boolean;
     selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values:M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
-    barActions?: React.ReactNode;
+    barActions?: (params: BarActionsParams) => React.ReactNode;
     formProps?: Partial<EntityFormProps<M>>,
 }
 
@@ -97,9 +105,9 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         useCache: false
     });
 
-    const cachedValues = entityId
-        ? getEntityFromCache(props.path + "/" + entityId)
-        : getEntityFromCache(props.path + "#new");
+    const initialDirtyValues = entityId
+        ? getEntityFromMemoryCache(props.path + "/" + entityId)
+        : getEntityFromMemoryCache(props.path + "#new");
 
     const authController = useAuthController();
 
@@ -114,18 +122,18 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         }
     }, [authController, entity, status]);
 
-    if ((dataLoading && !cachedValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
+    if ((dataLoading && !initialDirtyValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
         return <CircularProgressCenter/>;
     }
 
-    if (entityId && !entity && !cachedValues) {
+    if (entityId && !entity && !initialDirtyValues) {
         console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
 
     return <EntityEditViewInner<M> {...props}
                                    entityId={entityId}
                                    entity={entity}
-                                   cachedDirtyValues={cachedValues as Partial<M>}
+                                   initialDirtyValues={initialDirtyValues as Partial<M>}
                                    dataLoading={dataLoading}
                                    status={status}
                                    setStatus={setStatus}
@@ -144,7 +152,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        onSaved,
                                                                        onTabChange,
                                                                        entity,
-                                                                       cachedDirtyValues,
+                                                                       initialDirtyValues,
                                                                        dataLoading,
                                                                        layout = "side_panel",
                                                                        barActions,
@@ -154,7 +162,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        canEdit
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
-    cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
+    initialDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
     status: EntityStatus,
     setStatus: (status: EntityStatus) => void,
@@ -379,7 +387,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         entityId={entityId ?? usedEntity?.id}
         onValuesModified={onValuesModified}
         entity={entity}
-        initialDirtyValues={cachedDirtyValues}
+        initialDirtyValues={initialDirtyValues}
         openEntityMode={layout}
         forceActionsAtTheBottom={actionsAtTheBottom}
         initialStatus={status}
@@ -388,6 +396,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
+            console.log("333 EntityEditView onEntityChange:", entity);
             setUsedEntity(entity);
             formProps?.onEntityChange?.(entity);
         }}
@@ -445,7 +454,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         {shouldShowTopBar && <div
             className={cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
-            {barActions}
+            {barActions?.({
+                path: fullIdPath ?? path,
+                entityId,
+                values: formContext?.values ?? usedEntity?.values ?? {},
+                status
+            })}
 
             <div className={"flex-grow"}/>
 
@@ -523,4 +537,3 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     return result;
 }
-

package/src/core/EntityEditViewFormActions.tsx

@@ -17,6 +17,7 @@ import {
     cls,
     defaultBorderMixin,
     DialogActions,
+    ErrorIcon,
     IconButton,
     LoadingButton,
     Tooltip,
@@ -31,6 +32,8 @@ import {
 } from "../hooks";
 import { EntityFormActionsProps } from "../form/EntityFormActions";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
+import { FormexController } from "@firecms/formex";
+import { ErrorTooltip } from "../components/ErrorTooltip";
 
 export function EntityEditViewFormActions({
                                               collection,
@@ -80,14 +83,14 @@ export function EntityEditViewFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             disabled,
             status,
             sideDialogContext,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         })
         : buildSideActions({
             savingError,
@@ -96,14 +99,14 @@ export function EntityEditViewFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             sideDialogContext,
             disabled,
             status,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         });
 }
 
@@ -114,14 +117,14 @@ type ActionsViewProps<M extends object> = {
     collection: ResolvedEntityCollection,
     context: FireCMSContext,
     sideEntityController: SideEntityController,
-    isSubmitting: boolean,
     disabled: boolean,
     status: "new" | "existing" | "copy",
     sideDialogContext: SideDialogController,
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext
+    formContext: FormContext,
+    formex: FormexController<any>;
 };
 
 function buildBottomActions<M extends object>({
@@ -131,16 +134,17 @@ function buildBottomActions<M extends object>({
                                                   collection,
                                                   context,
                                                   sideEntityController,
-                                                  isSubmitting,
                                                   disabled,
                                                   status,
                                                   sideDialogContext,
                                                   pluginActions,
                                                   openEntityMode,
                                                   navigateBack,
-                                                  formContext
+                                                  formContext,
+                                                  formex
                                               }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
     const canClose = openEntityMode === "side_panel";
     return <DialogActions
         position={"absolute"}>
@@ -179,16 +183,20 @@ function buildBottomActions<M extends object>({
 
         {pluginActions}
 
+        {hasErrors ?
+            <ErrorTooltip title={"This form has errors"}>
+                <ErrorIcon className="ml-4" color="error" size={"smallest"}/>
+            </ErrorTooltip> : null}
         <Button variant="text"
                 color="primary"
-                disabled={disabled || isSubmitting}
+                disabled={disabled || formex.isSubmitting}
                 type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
         <Button variant={canClose ? "text" : "filled"}
                 color="primary"
                 type="submit"
-                disabled={disabled || isSubmitting}
+                disabled={disabled || formex.isSubmitting}
                 onClick={() => {
                     sideDialogContext.setPendingClose(false);
                 }}>
@@ -199,7 +207,7 @@ function buildBottomActions<M extends object>({
         {canClose && <LoadingButton variant="filled"
                                     color="primary"
                                     type="submit"
-                                    loading={isSubmitting}
+                                    loading={formex.isSubmitting}
                                     disabled={disabled}
                                     onClick={() => {
                                         sideDialogContext.setPendingClose?.(true);
@@ -218,28 +226,35 @@ function buildSideActions<M extends object>({
                                                 collection,
                                                 context,
                                                 sideEntityController,
-                                                isSubmitting,
                                                 disabled,
                                                 status,
                                                 sideDialogContext,
                                                 pluginActions,
                                                 openEntityMode,
                                                 navigateBack,
-                                                formContext
+                                                formContext,
+                                                formex
                                             }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
     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);
-        }}>
+        <LoadingButton fullWidth={true}
+                       variant="filled"
+                       color="primary"
+                       type="submit"
+                       size={"large"}
+                       startIcon={hasErrors ? <ErrorIcon/> : undefined}
+                       disabled={disabled || formex.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">
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
 

package/src/core/EntitySidePanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
-import { EntitySidePanelProps } from "../types";
+import { EntityCollection, EntitySidePanelProps } from "../types";
 import { useNavigationController, useSideEntityController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
@@ -8,6 +8,7 @@ import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
 import { useLocation, useNavigate } from "react-router-dom";
+import { saveEntityToMemoryCache } from "../util/entity_cache";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -114,11 +115,14 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     {...props}
                     fullIdPath={fullIdPath}
                     layout={"side_panel"}
-                    collection={collection}
+                    collection={collection as EntityCollection}
                     parentCollectionIds={parentCollectionIds}
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
-                    barActions={<>
+                    barActions={({
+                                     status,
+                                     values
+                                 }) => <>
                         <IconButton
                             className="self-center"
                             onClick={onClose}>
@@ -127,6 +131,8 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                         {allowFullScreen && <IconButton
                             className="self-center"
                             onClick={() => {
+                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                saveEntityToMemoryCache(key, values);
                                 if (entityId)
                                     navigate(location.pathname);
                                 else

package/src/core/FireCMS.tsx

@@ -20,6 +20,7 @@ import { CustomizationControllerContext } from "../contexts/CustomizationControl
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
+import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
 
 /**
  * If you are using independent components of the CMS
@@ -30,7 +31,6 @@ import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
  *
  * You only need to use this component if you are building a custom app.
  *
-
  * @group Core
  */
 export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
@@ -44,21 +44,28 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins: pluginsProp,
+        plugins: _pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
         entityActions,
         components,
         navigationController,
-        apiKey
+        apiKey,
+        userManagement: _userManagement
     } = props;
 
-    if (pluginsProp) {
+    if (_pluginsProp) {
         console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
     }
 
-    const plugins = navigationController.plugins ?? pluginsProp;
+    const plugins = navigationController.plugins ?? _pluginsProp;
+    const userManagement = plugins?.find(p => p.userManagement)?.userManagement
+        ?? _userManagement
+        ?? {
+            users: [],
+            getUser: (uid: string) => null
+        };
 
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
@@ -156,14 +163,16 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
                                         value={sideEntityController}>
                                         <NavigationContext.Provider
                                             value={navigationController}>
-                                            <DialogsProvider>
-                                                <BreadcrumbsProvider>
-                                                    <FireCMSInternal
-                                                        loading={loading}>
-                                                        {children}
-                                                    </FireCMSInternal>
-                                                </BreadcrumbsProvider>
-                                            </DialogsProvider>
+                                            <InternalUserManagementContext.Provider value={userManagement}>
+                                                <DialogsProvider>
+                                                    <BreadcrumbsProvider>
+                                                        <FireCMSInternal
+                                                            loading={loading}>
+                                                            {children}
+                                                        </FireCMSInternal>
+                                                    </BreadcrumbsProvider>
+                                                </DialogsProvider>
+                                            </InternalUserManagementContext.Provider>
                                         </NavigationContext.Provider>
                                     </SideEntityControllerContext.Provider>
                                 </SideDialogsControllerContext.Provider>

package/src/core/field_configs.tsx

@@ -32,14 +32,16 @@ import {
     ListAltIcon,
     ListIcon,
     MailIcon,
-    NumbersIcon,
+    NumbersIcon, PersonIcon,
     RepeatIcon,
     ScheduleIcon,
     ShortTextIcon,
     SubjectIcon,
     UploadFileIcon,
+    VerifiedUserIcon,
     ViewStreamIcon
 } from "@firecms/ui";
+import { UserSelectFieldBinding } from "../form/field_bindings/UserSelectFieldBinding";
 
 export function isDefaultFieldConfigId(id: string) {
     return Object.keys(DEFAULT_FIELD_CONFIGS).includes(id);
@@ -143,6 +145,16 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: MultiSelectFieldBinding
         }
     },
+    user_select: {
+        key: "user_select",
+        name: "User select",
+        description: "Select a user from the user management system. Store the user ID.",
+        Icon: PersonIcon,
+        property: {
+            dataType: "string",
+            Field: UserSelectFieldBinding
+        }
+    },
     number_input: {
         key: "number_input",
         name: "Number input",
@@ -360,6 +372,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "email";
         } else if (property.enumValues) {
             return "select";
+        } else if (property.userSelect) {
+            return "user_select";
         } else if (property.reference) {
             return "reference_as_string";
         } else {