@firecms/core 3.0.0-beta.13 → 3.0.0-beta.15

package/src/form/EntityForm.tsx

@@ -32,7 +32,8 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext,
+    useFireCMSContext, useNavigationController,
+    useSideEntityController,
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
@@ -57,6 +58,7 @@ export type OnUpdateParams = {
 
 export type EntityFormProps<M extends Record<string, any>> = {
     path: string;
+    fullIdPath?: string;
     collection: EntityCollection<M>;
     entityId?: string;
     entity?: Entity<M>;
@@ -96,6 +98,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
 
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
+                                                              fullIdPath,
                                                               entityId: entityIdProp,
                                                               collection,
                                                               onValuesModified,
@@ -123,6 +126,19 @@ 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 sideEntityController = useSideEntityController();
+    const navigationController = useNavigationController();
+
+    const navigateBack = useCallback(() => {
+        if (openEntityMode === "side_panel") {
+            // If we are in side panel mode, we close the side panel
+            sideEntityController.close();
+        } else {
+            window.history.back();
+        }
+    }, []);
+
     const authController = useAuthController();
     const [status, setStatus] = useState<EntityStatus>(initialStatus);
 
@@ -433,14 +449,16 @@ export function EntityForm<M extends Record<string, any>>({
     const plugins = customizationController.plugins;
 
     const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
+    const parentCollectionIds = navigationController.getParentCollectionIds(path);
+
     if (plugins && collection) {
         const actionProps: PluginFormActionProps = {
             entityId,
+            parentCollectionIds,
             path,
             status,
-            collection: collection,
+            collection,
             context,
-            currentEntityId: entityId,
             formContext,
             openEntityMode,
             disabled: actionsDisabled,
@@ -621,11 +639,17 @@ 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>
-                {showEntityPath && <Alert color={"base"} className={"w-full"} size={"small"}>
+
+                {!entity?.values && initialStatus === "existing" &&
+                    <Alert color={"warning"} size={"small"} outerClassName={"w-full mb-4 text-xs"}>
+                        This entity does not exist in the database
+                    </Alert>}
+
+                {showEntityPath && <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
                     <code
                         className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
                         {entity?.path ?? path}/{entityId}
@@ -635,6 +659,10 @@ export function EntityForm<M extends Record<string, any>>({
 
             {children}
 
+            {initialEntityId && !entity && initialStatus !== "new" && <Alert color={"info"} size={"small"}>
+                This entity does not exist in the database
+            </Alert>}
+
             {!Builder && !collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
                                entityId={entityId}
@@ -668,6 +696,8 @@ export function EntityForm<M extends Record<string, any>>({
     const dialogActions = <EntityFormActionsComponent
         collection={resolvedCollection}
         path={path}
+        fullPath={path}
+        fullIdPath={fullIdPath}
         entity={entity}
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
         savingError={savingError}
@@ -677,6 +707,8 @@ export function EntityForm<M extends Record<string, any>>({
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
         showDefaultActions={showDefaultActions}
+        navigateBack={navigateBack}
+        formContext={formContext}
     />;
 
     return (

package/src/form/EntityFormActions.tsx

@@ -1,10 +1,19 @@
 import React from "react";
-import { Entity, EntityAction, FireCMSContext, ResolvedEntityCollection, SideEntityController } from "../types";
+import {
+    Entity,
+    EntityAction,
+    FireCMSContext,
+    FormContext,
+    ResolvedEntityCollection,
+    SideEntityController
+} from "../types";
 import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
 import { useFireCMSContext, useSideEntityController } from "../hooks";
 
 export interface EntityFormActionsProps {
+    fullPath: string;
+    fullIdPath?: string;
     collection: ResolvedEntityCollection;
     path: string;
     entity?: Entity;
@@ -16,9 +25,13 @@ export interface EntityFormActionsProps {
     pluginActions: React.ReactNode[];
     openEntityMode: "side_panel" | "full_screen";
     showDefaultActions?: boolean;
+    navigateBack: () => void;
+    formContext: FormContext
 }
 
 export function EntityFormActions({
+                                      fullPath,
+                                      fullIdPath,
                                       collection,
                                       entity,
                                       layout,
@@ -27,7 +40,9 @@ export function EntityFormActions({
                                       disabled,
                                       status,
                                       pluginActions,
-                                      openEntityMode
+                                      openEntityMode,
+                                      navigateBack,
+                                      formContext
                                   }: EntityFormActionsProps) {
 
     const context = useFireCMSContext();
@@ -35,6 +50,8 @@ export function EntityFormActions({
 
     return layout === "bottom"
         ? buildBottomActions({
+            fullPath,
+            fullIdPath,
             savingError,
             entity,
             collection,
@@ -44,9 +61,13 @@ export function EntityFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
+            navigateBack,
+            formContext
         })
         : buildSideActions({
+            fullPath,
+            fullIdPath,
             savingError,
             entity,
             collection,
@@ -56,11 +77,15 @@ export function EntityFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
+            navigateBack,
+            formContext
         });
 }
 
 type ActionsViewProps<M extends object> = {
+    fullPath: string,
+    fullIdPath?: string,
     savingError: Error | undefined,
     entity: Entity<M> | undefined,
     formActions?: EntityAction[],
@@ -72,11 +97,15 @@ type ActionsViewProps<M extends object> = {
     status: "new" | "existing" | "copy",
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext
 };
 
 function buildBottomActions<M extends object>({
                                                   savingError,
                                                   entity,
+                                                  fullPath,
+                                                  fullIdPath,
                                                   formActions,
                                                   collection,
                                                   context,
@@ -85,7 +114,9 @@ function buildBottomActions<M extends object>({
                                                   disabled,
                                                   status,
                                                   pluginActions,
-                                                  openEntityMode
+                                                  openEntityMode,
+                                                  navigateBack,
+                                                  formContext
                                               }: ActionsViewProps<M>) {
 
     return <DialogActions position={"absolute"}>
@@ -103,12 +134,16 @@ function buildBottomActions<M extends object>({
                         event.stopPropagation();
                         if (entity)
                             action.onClick({
+                                view: "form",
                                 entity,
-                                fullPath: collection.path,
+                                fullPath: fullPath ?? collection.path,
+                                fullIdPath: fullIdPath ?? collection.id,
                                 collection: collection,
                                 context,
                                 sideEntityController,
-                                openEntityMode: openEntityMode
+                                openEntityMode: openEntityMode,
+                                navigateBack,
+                                formContext
                             });
                     }}>
                     {action.icon}
@@ -116,10 +151,14 @@ function buildBottomActions<M extends object>({
             ))}
         </div>}
         {pluginActions}
-        <Button variant="text" disabled={disabled || isSubmitting} type="reset">
+        <Button variant="text" disabled={disabled || isSubmitting}
+                color={"primary"}
+                type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
-        <Button variant={"filled"} color="primary" type="submit"
+        <Button variant={"filled"}
+                color="primary"
+                type="submit"
                 disabled={disabled || isSubmitting}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
@@ -133,6 +172,9 @@ function buildSideActions<M extends object>({
                                                 savingError,
                                                 entity,
                                                 formActions,
+                                                fullPath,
+                                                fullIdPath,
+                                                openEntityMode,
                                                 collection,
                                                 context,
                                                 sideEntityController,

package/src/form/PropertyFieldBinding.tsx

@@ -214,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/components/StorageItemPreview.tsx

@@ -30,7 +30,7 @@ export function StorageItemPreview({
 
     return (
         <div className={cls(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+            "relative border-box flex items-center justify-center",
             size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
             className)}>
 

package/src/form/components/StorageUploadProgress.tsx

@@ -79,7 +79,7 @@ export function StorageUploadProgress({
     }, [entry.file, entry.fileName, upload]);
 
     if (simple) {
-        return <div className={`m-4 w-${imageSize} h-${imageSize}`}>
+        return <div className={`w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
@@ -88,11 +88,11 @@ export function StorageUploadProgress({
     return (
 
         <div className={cls(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+            "p-4 relative border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="m-4 w-full h-full"/>}
+                <Skeleton className="w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

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[]>;
@@ -127,11 +127,12 @@ export function ArrayOfReferencesFieldBinding({
             />
 
             <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/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

@@ -46,11 +46,13 @@ export function MarkdownEditorFieldBinding({
     const entityId = context.entityId;
     const path = context.path;
 
-    // const fieldVersion = useRef(0);
     const [fieldVersion, setFieldVersion] = useState(0);
-    const internalValue = useRef(value);
+    const internalValue = useRef<string | null>(value);
 
     const onContentChange = useCallback((content: string) => {
+        if (content === value || (value === null && content === "")) {
+            return;
+        }
         internalValue.current = content;
         setValue(content);
     }, [setValue]);

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -84,7 +84,7 @@ export function MultiSelectFieldBinding({
             <MultiSelect
                 className={"w-full mt-2"}
                 size={size}
-                value={validValue ? value.map((v) => v.toString()) : []}
+                value={validValue ? value.map((v) => v?.toString()) : []}
                 disabled={disabled}
                 modalPopover={true}
                 label={<LabelWithIconAndTooltip

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, IconForView } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
+
+/**
+ * Field that opens a reference selection dialog and stores the entity ID as a string.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceAsStringFieldBinding(props: FieldProps<string>) {
+    if (typeof props.property.reference?.path !== "string") {
+        return <ReadOnlyFieldBinding {...props}/>;
+    }
+
+    return <ReferenceAsStringFieldBindingInternal {...props}/>;
+}
+
+function ReferenceAsStringFieldBindingInternal({
+                                                   propertyKey,
+                                                   value,
+                                                   setValue,
+                                                   error,
+                                                   showError,
+                                                   isSubmitting,
+                                                   disabled,
+                                                   minimalistView,
+                                                   property,
+                                                   includeDescription,
+                                                   size = "medium"
+                                               }: FieldProps<string>) {
+    if (!property.reference?.path) {
+        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useNavigationController();
+    const path = property.reference.path;
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.getCollection(path) : undefined;
+    }, [path]);
+
+    const referenceValue: EntityReference | undefined = useMemo(() => {
+        if (value && path) {
+            return new EntityReference(value, path);
+        }
+        return undefined;
+    }, [value, path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? e.id : null);
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: false,
+            path: path,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: value ? [value] : undefined,
+            forceFilter: property.reference.forceFilter
+        }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {referenceValue && <ReferencePreview
+                    disabled={!path}
+                    previewProperties={property.reference?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={referenceValue}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer
+                        className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/SelectFieldBinding.tsx

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