@firecms/core 3.0.0-beta.8 → 3.0.0-beta.9

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,11 +1,18 @@
 import React, { useCallback } from "react";
 
-import { ArrayProperty, FieldProps, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../types";
+import {
+    ArrayProperty,
+    FieldProps,
+    PropertyOrBuilder,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
+    StorageConfig
+} from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
-import { getIconForProperty, isReadOnly } from "../../util";
+import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
@@ -16,7 +23,6 @@ import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    focusedMixin,
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
@@ -44,7 +50,7 @@ export function StorageUploadFieldBinding({
                                               error,
                                               showError,
                                               autoFocus,
-                                              tableMode,
+                                              minimalistView,
                                               property,
                                               includeDescription,
                                               context,
@@ -83,22 +89,28 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     return (
 
         <>
 
-            {!tableMode &&
-                <LabelWithIcon icon={getIconForProperty(property, "small")}
-                               required={property.validation?.required}
-                               title={property.name}
-                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+            {!minimalistView &&
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
                 name={propertyKey}
                 disabled={disabled ?? false}
                 autoFocus={autoFocus ?? false}
-                property={property}
+                property={resolvedProperty}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
@@ -170,10 +182,18 @@ function FileDropComponent({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
@@ -188,7 +208,6 @@ function FileDropComponent({
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
-                focusedMixin,
                 {
                     [nonActiveDropClasses]: !isDragActive,
                     [activeDropClasses]: isDragActive,
@@ -246,7 +265,7 @@ function FileDropComponent({
                                     ref={provided.innerRef}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
-                                    className={cls(focusedMixin, "rounded-md")}
+                                    className={cls("rounded-md")}
                                     style={{
                                         ...provided.draggableProps.style
                                     }}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -5,6 +5,7 @@ import { getIconForProperty } from "../../util";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SwitchFieldProps = FieldProps<boolean>;
 
@@ -23,7 +24,7 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
                                                                                    showError,
                                                                                    autoFocus,
                                                                                    disabled,
-                                                                                   touched,
+                                                                                   size = "medium",
                                                                                    property,
                                                                                    includeDescription
                                                                                }: SwitchFieldProps, ref) {
@@ -37,17 +38,20 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
     return (
         <>
 
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
             <BooleanSwitchWithLabel
                 value={value}
                 onValueChange={(v) => setValue(v)}
                 error={showError}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
+                label={<LabelWithIcon
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}/>}
                 disabled={disabled}
                 autoFocus={autoFocus}
-                size={"large"}
+                size={size}
             />
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -6,6 +6,7 @@ import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
 import { PropertyPreview } from "../../preview";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 
 interface TextFieldBindingProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
@@ -18,7 +19,6 @@ interface TextFieldBindingProps<T extends string | number> extends FieldProps<T>
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
-                                                                context,
                                                                 propertyKey,
                                                                 value,
                                                                 setValue,
@@ -28,6 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
+                                                                size = "medium"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
@@ -67,27 +68,29 @@ export function TextFieldBinding<T extends string | number>({
     const isMultiline = Boolean(multiline);
 
     const inputType = property.dataType === "number" ? "number" : undefined;
-    return (
-        <>
-            <TextField
-                value={value}
-                onChange={onChange}
-                autoFocus={autoFocus}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
-                type={inputType}
-                multiline={isMultiline}
-                disabled={disabled}
-                endAdornment={
-                    property.clearable && <IconButton
-                        onClick={handleClearClick}>
-                        <ClearIcon/>
-                    </IconButton>
-                }
-                error={showError ? error : undefined}
-                inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-
+    return (<>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <TextField
+                    size={size}
+                    value={value}
+                    onChange={onChange}
+                    autoFocus={autoFocus}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    type={inputType}
+                    multiline={isMultiline}
+                    disabled={disabled}
+                    endAdornment={
+                        property.clearable && <IconButton
+                            onClick={handleClearClick}>
+                            <ClearIcon/>
+                        </IconButton>
+                    }
+                    error={showError ? error : undefined}
+                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
+            </PropertyIdCopyTooltip>
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
                              error={error}
@@ -100,7 +103,7 @@ export function TextFieldBinding<T extends string | number>({
                 <PropertyPreview
                     value={value}
                     property={property}
-                    size={"medium"}/>
+                    size={size}/>
             </Collapse>}
 
         </>

package/src/form/index.tsx

@@ -1,5 +1,5 @@
 import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
-import { MultiSelectBinding } from "./field_bindings/MultiSelectBinding";
+import { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
 import { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
 import { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
 import { TextFieldBinding } from "./field_bindings/TextFieldBinding";
@@ -11,13 +11,13 @@ import { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
 import { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
 import { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
-import { MarkdownFieldBinding } from "./field_bindings/MarkdownFieldBinding";
+import { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
 import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
 
 export {
     ArrayCustomShapedFieldBinding,
     RepeatFieldBinding,
-    MultiSelectBinding,
+    MultiSelectFieldBinding,
     ArrayOfReferencesFieldBinding,
     BlockFieldBinding,
     DateTimeFieldBinding,
@@ -28,16 +28,11 @@ export {
     SelectFieldBinding,
     StorageUploadFieldBinding,
     SwitchFieldBinding,
-    MarkdownFieldBinding,
+    MarkdownEditorFieldBinding,
     TextFieldBinding
 };
 
 export * from "./components";
 
-// export type { EntityFormProps } from "./EntityForm";
-// export {
-//     EntityForm
-// } from "./EntityForm";
-
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
 export * from "./useClearRestoreValue";

package/src/form/useClearRestoreValue.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { CMSType, ResolvedProperty } from "../types";
+import { CMSType, Property, ResolvedProperty } from "../types";
 
 /**
  * Hook we use to restore a value after it has been cleared
@@ -14,7 +14,7 @@ export function useClearRestoreValue<T extends CMSType>({
                                                             setValue
                                                         }:
                                                             {
-                                                                property: ResolvedProperty<T>,
+                                                                property: Property<T> | ResolvedProperty<T>,
                                                                 value: T,
                                                                 setValue: (value: T | null, shouldValidate?: boolean) => void
                                                             }) {

package/src/hooks/data/delete.ts

@@ -81,7 +81,8 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
         }
     }
     return dataSource.deleteEntity({
-        entity
+        entity,
+        collection
     }).then(() => {
         onDeleteSuccess && onDeleteSuccess(entity);
         try {

package/src/hooks/data/save.ts

@@ -108,7 +108,11 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
-    console.log("Saving entity", entityId, updatedValues);
+    console.log("Saving entity", {
+        entityId,
+        updatedValues,
+        collection
+    });
     return dataSource.saveEntity({
         collection,
         path: resolvedPath,
@@ -117,7 +121,6 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         previousValues,
         status
     }).then((entity) => {
-        console.log("Entity saved");
         try {
             if (callbacks?.onSaveSuccess) {
                 const resolvedCollection = resolveCollection<M>({

package/src/hooks/data/useDataSource.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 import { DataSource, EntityCollection } from "../../types";
 import { DataSourceContext } from "../../contexts/DataSourceContext";
 
@@ -7,8 +7,16 @@ import { DataSourceContext } from "../../contexts/DataSourceContext";
  * @group Hooks and utilities
  */
 export const useDataSource = (collection?: EntityCollection<any, any>): DataSource => {
+    // const customizationController = useCustomizationController();
+    // const navigationController = useNavigationController();
     const defaultDataSource = useContext(DataSourceContext);
-    if (collection?.overrides?.dataSource)
-        return collection?.overrides.dataSource;
+    // if (collection?.overrides?.dataSourceDelegate) {
+    //     console.trace("Using custom data source for collection " + collection.id);
+    //     return useBuildDataSource({
+    //         delegate: collection.overrides.dataSourceDelegate,
+    //         propertyConfigs: customizationController?.propertyConfigs,
+    //         navigationController: navigationController
+    //     });
+    // }
     return defaultDataSource;
 };

package/src/hooks/useBuildNavigationController.tsx

@@ -20,6 +20,7 @@ import {
     applyPermissionsFunctionIfEmpty,
     getCollectionByPathOrId,
     mergeDeep,
+    removeFunctions,
     removeInitialAndTrailingSlashes,
     resolveCollectionPathIds,
     resolvePermissions
@@ -203,6 +204,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
                 collectionsRef.current = resolvedCollections;
                 shouldUpdateTopLevelNav = true;
             }
+            if (collectionsRef.current === undefined) {
+                collectionsRef.current = resolvedCollections;
+                shouldUpdateTopLevelNav = true;
+            }
             if (!equal(viewsRef.current, resolvedViews)) {
                 viewsRef.current = resolvedViews;
                 shouldUpdateTopLevelNav = true;
@@ -221,8 +226,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
             setNavigationLoadingError(e as any);
         }
 
-        setNavigationLoading(false);
-        setInitialised(true);
+        if (navigationLoading)
+            setNavigationLoading(false);
+        if (!initialised)
+            setInitialised(true);
 
     }, [
         collectionsProp,
@@ -505,5 +512,5 @@ function areCollectionsEqual(a: EntityCollection, b: EntityCollection) {
     if (!areCollectionListsEqual(subcollectionsA ?? [], subcollectionsB ?? [])) {
         return false;
     }
-    return equal(restA, restB);
+    return equal(removeFunctions(restA), removeFunctions(restB));
 }

package/src/hooks/useProjectLog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { AuthController, FireCMSPlugin } from "../types";
+import { AuthController, DataSourceDelegate, FireCMSPlugin } from "../types";
 
 export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
 export const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
@@ -9,17 +9,26 @@ export type AccessResponse = {
     message?: string;
 }
 
-async function makeRequest(authController: AuthController, pluginKeys: string[] | undefined) {
-    const firebaseToken = await authController.getAuthToken();
+async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined) {
+    let idToken: string | null;
+    try {
+        idToken = await authController.getAuthToken();
+    } catch (e) {
+        idToken = null;
+    }
     return fetch(DEFAULT_SERVER + "/access_log",
         {
             // mode: "no-cors",
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
-                Authorization: `Basic ${firebaseToken}`,
+                Authorization: `Basic ${idToken}`
             },
-            body: JSON.stringify({ plugins: pluginKeys })
+            body: JSON.stringify({
+                email: authController.user?.email ?? null,
+                datasource: dataSourceKey,
+                plugins: pluginKeys
+            })
         })
         .then(async (res) => {
             return res.json();
@@ -27,15 +36,17 @@ async function makeRequest(authController: AuthController, pluginKeys: string[]
 }
 
 export function useProjectLog(authController: AuthController,
+                              dataSourceDelegate: DataSourceDelegate,
                               plugins?: FireCMSPlugin<any, any, any>[]): AccessResponse | null {
     const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
+    const dataSourceKey = dataSourceDelegate.key;
     const pluginKeys = plugins?.map(plugin => plugin.key);
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController, pluginKeys).then(setAccessResponse);
+            makeRequest(authController, dataSourceKey, pluginKeys).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
-    }, [authController, pluginKeys]);
+    }, [authController, dataSourceKey, pluginKeys]);
     return accessResponse;
 }