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

package/src/form/EntityForm.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import {
+    AuthController,
     CMSAnalyticsEvent,
     Entity,
     EntityCollection,
@@ -28,6 +29,7 @@ import {
 
 import {
     saveEntityWithCallbacks,
+    useAuthController,
     useCustomizationController,
     useDataSource,
     useFireCMSContext,
@@ -71,6 +73,10 @@ export type EntityFormProps<M extends Record<string, any>> = {
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
     openEntityMode?: "side_panel" | "full_screen";
+    /**
+     * If true, the form will be disabled and no actions will be available
+     */
+    disabled?: boolean;
     /**
      * Include the copy and delete actions in the form
      */
@@ -105,6 +111,7 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
+                                                              disabled: disabledProp,
                                                               Builder,
                                                               EntityFormActionsComponent = EntityFormActions,
                                                               showDefaultActions = true,
@@ -116,8 +123,8 @@ export function EntityForm<M extends Record<string, any>>({
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
+    const authController = useAuthController();
     const [status, setStatus] = useState<EntityStatus>(initialStatus);
-    const [saving, setSaving] = useState(false);
 
     const updateStatus = (status: EntityStatus) => {
         setStatus(status);
@@ -204,7 +211,7 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
-        initialValues: (initialDirtyValues ?? getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs)) as M,
+        initialValues: (initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)) as M,
         initialDirty: Boolean(initialDirtyValues),
         onSubmit,
         onReset: () => {
@@ -222,7 +229,6 @@ export function EntityForm<M extends Record<string, any>>({
         }
     });
 
-
     useEffect(() => {
 
         const handleKeyDown = (e: KeyboardEvent) => {
@@ -251,11 +257,11 @@ export function EntityForm<M extends Record<string, any>>({
         entityId,
         values: formex.values,
         previousValues: formex.initialValues,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path, entityId, formex.values, formex.initialValues, customizationController.propertyConfigs]);
 
     const onPreSaveHookError = useCallback((e: Error) => {
-        setSaving(false);
         snackbarController.open({
             type: "error",
             message: "Error before saving: " + e?.message
@@ -264,7 +270,6 @@ export function EntityForm<M extends Record<string, any>>({
     }, [snackbarController]);
 
     const onSaveSuccessHookError = useCallback((e: Error) => {
-        setSaving(false);
         snackbarController.open({
             type: "error",
             message: "Error after saving (entity is saved): " + e?.message
@@ -284,7 +289,6 @@ export function EntityForm<M extends Record<string, any>>({
 
         clearDirtyCache();
         onValuesModified?.(false);
-        setSaving(false);
         if (!autoSave)
             snackbarController.open({
                 type: "success",
@@ -306,7 +310,6 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const onSaveFailure = useCallback((e: Error) => {
-        setSaving(false);
         snackbarController.open({
             type: "error",
             message: "Error saving: " + e?.message
@@ -328,7 +331,6 @@ export function EntityForm<M extends Record<string, any>>({
         values: M,
         previousValues?: M,
     }) => {
-        setSaving(true);
         return saveEntityWithCallbacks({
             path,
             entityId,
@@ -338,7 +340,7 @@ export function EntityForm<M extends Record<string, any>>({
             status,
             dataSource,
             context,
-            onSaveSuccess: (updatedEntity: Entity<M>) => onSaveSuccess(updatedEntity),
+            onSaveSuccess,
             onSaveFailure,
             onPreSaveHookError,
             onSaveSuccessHookError
@@ -398,6 +400,8 @@ export function EntityForm<M extends Record<string, any>>({
         });
     };
 
+    const disabled = formex.isSubmitting || Boolean(disabledProp);
+
     const formContext: FormContext<M> = {
         // @ts-ignore
         setFieldValue: useCallback(formex.setFieldValue, []),
@@ -410,7 +414,8 @@ export function EntityForm<M extends Record<string, any>>({
         entity,
         savingError,
         status,
-        openEntityMode
+        openEntityMode,
+        disabled
     };
 
     useEffect(() => {
@@ -427,6 +432,7 @@ export function EntityForm<M extends Record<string, any>>({
     const pluginActions: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
 
+    const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
     if (plugins && collection) {
         const actionProps: PluginFormActionProps = {
             entityId,
@@ -436,7 +442,8 @@ export function EntityForm<M extends Record<string, any>>({
             context,
             currentEntityId: entityId,
             formContext,
-            openEntityMode
+            openEntityMode,
+            disabled: actionsDisabled,
         };
         pluginActions.push(...plugins.map((plugin) => (
             plugin.form?.Actions
@@ -544,7 +551,7 @@ export function EntityForm<M extends Record<string, any>>({
                             !!underlyingChanges &&
                             Object.keys(underlyingChanges).includes(key) &&
                             formex.touched[key];
-                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const disabled = disabledProp || (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
                         const hidden = isHidden(property);
                         if (hidden) return null;
                         const widthPercentage = property.widthPercentage ?? 100;
@@ -614,7 +621,7 @@ export function EntityForm<M extends Record<string, any>>({
         <>
             {!Builder && <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
                 <Typography
-                    className={"py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0")}
+                    className={"my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : "")}
                     variant={"h4"}>
                     {title ?? collection.singularName ?? collection.name}
                 </Typography>
@@ -654,8 +661,6 @@ export function EntityForm<M extends Record<string, any>>({
             onIdChange(entityId);
     }, [entityId, onIdChange]);
 
-    const disabled = formex.isSubmitting || (!formex.dirty && status === "existing");
-
     if (!resolvedCollection || !path) {
         throw Error("INTERNAL: Collection and path must be defined in form context");
     }
@@ -667,7 +672,7 @@ export function EntityForm<M extends Record<string, any>>({
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
         savingError={savingError}
         formex={formex}
-        disabled={disabled}
+        disabled={actionsDisabled}
         status={status}
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
@@ -675,11 +680,11 @@ export function EntityForm<M extends Record<string, any>>({
     />;
 
     return (
-        <Formex value={formContext.formex}>
+        <Formex value={formex}>
             <form
-                onSubmit={formContext.formex.handleSubmit}
+                onSubmit={formex.handleSubmit}
                 onReset={() => formex.resetForm({
-                    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs) as M
+                    values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs) as M
                 })}
                 noValidate
                 className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
@@ -689,8 +694,8 @@ export function EntityForm<M extends Record<string, any>>({
 
                     <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
 
-                        {formContext.formex.dirty
-                            ? <Tooltip title={"Unsaved changes"}
+                        {formex.dirty
+                            ? <Tooltip title={"Local unsaved changes"}
                                        className={"self-end sticky top-4 z-10"}>
                                 <Chip size={"small"} colorScheme={"orangeDarker"}>
                                     <EditIcon size={"smallest"}/>
@@ -716,17 +721,19 @@ export function EntityForm<M extends Record<string, any>>({
 }
 
 function getInitialEntityValues<M extends object>(
+    authController: AuthController,
     collection: EntityCollection,
     path: string,
     status: "new" | "existing" | "copy",
     entity: Entity<M> | undefined,
-    propertyConfigs?: Record<string, PropertyConfig>
+    propertyConfigs?: Record<string, PropertyConfig>,
 ): Partial<EntityValues<M>> {
     const resolvedCollection = resolveCollection({
         collection,
         path,
         values: entity?.values,
-        propertyConfigs
+        propertyConfigs,
+        authController
     });
     const properties = resolvedCollection.properties;
     if ((status === "existing" || status === "copy") && entity) {
@@ -772,3 +779,4 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
+

package/src/form/PropertyFieldBinding.tsx

@@ -17,7 +17,7 @@ import {
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -87,9 +87,10 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      autoFocus,
      index,
      size,
-     onPropertyChange
+     onPropertyChange,
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     return (
@@ -107,10 +108,11 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     path: context.path,
                     entityId: context.entityId,
                     propertyConfigs: customizationController.propertyConfigs,
-                    index
+                    index,
+                    authController
                 });
 
-                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled) || context.disabled;
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
@@ -139,7 +141,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         path: context.path,
                         entityId: context.entityId,
                         propertyConfigs: customizationController.propertyConfigs,
-                        index
+                        index,
+                        authController
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }
@@ -211,7 +214,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
     const customFieldProps: any = property.customProps;
     const value = formexFieldProps.field.value;
-    // const initialValue = formexFieldProps.meta.initialValue;
     const error = getIn(formexFieldProps.form.errors, propertyKey);
     const touched = getIn(formexFieldProps.form.touched, propertyKey);
 

package/src/form/components/CustomIdField.tsx

@@ -103,7 +103,9 @@ export function CustomIdField<M extends Record<string, any>>({
                     size={"large"}
                     error={error}
                     fullWidth={true}
-                    onValueChange={(v) => onChange(v as string)}
+                    onValueChange={(v) => {
+                        onChange(v as string);
+                    }}
                     {...fieldProps}
                     renderValue={(option) => {
                         const enumConfig = enumValues.find(e => e.id === option);

package/src/form/components/LabelWithIcon.tsx

@@ -24,7 +24,7 @@ export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
         return (
             <div
                 ref={ref}
-                className={cls("inline-flex items-center my-0.5",
+                className={cls("align-middle inline-flex items-center my-0.5",
                     small ? "gap-1" : "gap-2",
                     className)}
             >

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -5,6 +5,7 @@ import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Array field used for custom
@@ -27,6 +28,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
+    const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
 
     let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
@@ -35,7 +37,8 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             propertyValue: value,
             propertyKey,
             property,
-            ignoreMissingFields: false
+            ignoreMissingFields: false,
+            authController
         })
     }
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -6,7 +6,7 @@ import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -120,17 +120,19 @@ export function ArrayOfReferencesFieldBinding({
                             value={value}
                             disabled={isSubmitting}
                             buildEntry={buildEntry}
+                            canAddElements={false}
                             addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
                             newDefaultEntry={property.of.defaultValue}
                             onValueChange={(value) => setFieldValue(propertyKey, value)}
             />
 
             <Button
-                className="my-4 justify-center text-left"
+                className="ml-3.5 my-4 justify-center text-left"
                 variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
+                <EditIcon size={"small"}/>
                 Edit {property.name}
             </Button>
         </div>}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -88,7 +88,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
                                  disabled={isSubmitting || Boolean(property.disabled)}
-                                 includeAddButton={!property.disabled}
+                                 canAddElements={!property.disabled}
                                  onValueChange={(value) => setFieldValue(propertyKey, value)}
                                  newDefaultEntry={{
                                      [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -329,7 +329,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                 addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
-                                includeAddButton={true}
+                                canAddElements={true}
                                 onValueChange={(newValue) => {
                                     setValue({
                                         ...value,

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -21,6 +21,7 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
+                                    partOfArray,
                                     minimalistView: minimalistViewProp,
                                     includeDescription,
                                     autoFocus,
@@ -51,7 +52,8 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-            <div className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            <div
+                className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
                 {Object.entries(mapProperties)
                     .filter(([_, property]) => !isHidden(property))
                     .map(([entryKey, childProperty], index) => {
@@ -81,8 +83,7 @@ export function MapFieldBinding({
                                             {...fieldBindingProps}/>
                                     </ErrorBoundary>
                                 </div>
-                            )
-                                ;
+                            )                                ;
                         }
                     )
                 }
@@ -117,7 +118,7 @@ export function MapFieldBinding({
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError ?? false}
-                             error={error ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                             error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
                              disabled={disabled}
                              property={property}/>
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -8,6 +8,7 @@ import {
     randomString,
     ResolvedArrayProperty,
     ResolvedStringProperty,
+    useAuthController,
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
@@ -34,6 +35,7 @@ export function MarkdownEditorFieldBinding({
                                                customProps,
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
+    const authController = useAuthController();
     const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
@@ -62,7 +64,8 @@ export function MarkdownEditorFieldBinding({
 
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
-        values: entityValues
+        values: entityValues,
+        authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     const fileNameBuilder = useCallback(async (file: File) => {
@@ -89,7 +92,8 @@ export function MarkdownEditorFieldBinding({
         if (!storage) return "/";
         const resolvedProperty = resolveProperty({
             propertyOrBuilder: property,
-            values: entityValues
+            values: entityValues,
+            authController
         }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
         return resolveStoragePathString({
             input: storage.storagePath,

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -23,7 +23,7 @@ export function MultiSelectFieldBinding({
                                             disabled,
                                             property,
                                             includeDescription,
-                                            size = "medium",
+                                            size = "large",
                                             autoFocus
                                         }: FieldProps<EnumType[], any, any>) {
 
@@ -83,8 +83,8 @@ export function MultiSelectFieldBinding({
         <>
             <MultiSelect
                 className={"w-full mt-2"}
-                size={size === "medium" ? "medium" : "small"}
-                value={validValue ? value.map((v) => v.toString()) : []}
+                size={size}
+                value={validValue ? value.map((v) => v?.toString()) : []}
                 disabled={disabled}
                 modalPopover={true}
                 label={<LabelWithIconAndTooltip

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -6,6 +6,7 @@ import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mer
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -31,6 +32,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              disabled
                                                          }: FieldProps<T>) {
 
+    const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
 
     if (!property.of)
@@ -42,7 +44,8 @@ export function RepeatFieldBinding<T extends Array<any>>({
             propertyValue: value,
             propertyKey,
             property,
-            ignoreMissingFields: false
+            ignoreMissingFields: false,
+            authController
         })
     }
 
@@ -76,18 +79,22 @@ export function RepeatFieldBinding<T extends Array<any>>({
             minimalistView: false,
             autoFocus: internalId === lastAddedId,
         };
+        console.debug("Building entry for", index, fieldProps);
         return <ErrorBoundary>
             <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
+    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
                                            addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}
                                            disabled={isSubmitting || Boolean(property.disabled)}
-                                           includeAddButton={!property.disabled}
+                                           canAddElements={canAddElements}
+                                           sortable={sortable}
                                            newDefaultEntry={getDefaultValueFor(property.of)}
                                            onValueChange={(value) => setFieldValue(propertyKey, value)}
                                            className={property.widthPercentage !== undefined ? "mt-8" : undefined}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -66,9 +66,10 @@ export function SelectFieldBinding<T extends EnumType>({
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
-                    property.clearable && <IconButton
+                    property.clearable && !disabled && <IconButton
+                        size="small"
                         onClick={handleClearClick}>
-                        <CloseIcon/>
+                        <CloseIcon size={"small"}/>
                     </IconButton>
                 }
                 onValueChange={(updatedValue: string) => {