@firecms/core 3.0.0-canary.210 → 3.0.0-canary.212

package/src/core/EntityEditView.tsx

@@ -16,12 +16,14 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
+import { EntityJsonPreview } from "../components/EntityJsonPreview";
 
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -141,7 +143,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        barActions,
                                                                        status,
                                                                        setStatus,
-                                                                       formProps,
+                                                                       formProps
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
@@ -186,7 +188,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const includeJsonView = true;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
     const {
         resolvedEntityViews,
@@ -229,6 +232,17 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const globalLoading = dataLoading && !usedEntity;
 
+    const jsonView = <div
+        className={cls("relative flex-1 h-full overflow-auto w-full",
+            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+        key={"json_view"}
+        role="tabpanel">
+        <ErrorBoundary>
+            <EntityJsonPreview
+                values={formContext?.values ?? {}}/>
+        </ErrorBoundary>
+    </div>;
+
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.id ?? subcollection.path;
         const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
@@ -269,7 +283,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection,
+                collection
             });
         }
     };
@@ -303,7 +317,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         onSaved={(params) => {
             const res = {
                 ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
             };
             onSaved?.(res);
             formProps?.onSaved?.(res);
@@ -350,6 +364,14 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     onSideTabClick(value);
                 }}>
 
+                {includeJsonView && <Tab
+                    disabled={!hasAdditionalViews}
+                    value={JSON_TAB_VALUE}
+                    innerClassName={"block"}
+                    className={"text-sm"}>
+                    <CodeIcon size={"small"}/>
+                </Tab>}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
@@ -357,6 +379,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     {collection.singularName ?? collection.name}
                 </Tab>
 
+
                 {customViewTabs}
 
                 {subcollectionTabs}
@@ -369,7 +392,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </div>
             : entityView}
 
-        {/*{secondaryForms}*/}
+        {jsonView}
 
         {customViewsView}
 

package/src/core/FireCMS.tsx

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from "react";
 import { CenteredView, Typography } from "@firecms/ui";
-import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
 import { useCustomizationController, useFireCMSContext } from "../hooks";
@@ -53,17 +53,8 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         apiKey
     } = props;
 
-    /**
-     * Controller in charge of fetching and persisting data
-     */
-    const dataSource = useBuildDataSource({
-        delegate: dataSourceDelegate,
-        propertyConfigs,
-        navigationController
-    });
-
     const sideDialogsController = useBuildSideDialogsController();
-    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController);
+    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 
     const pluginsLoading = plugins?.some(p => p.loading) ?? false;
 
@@ -90,6 +81,16 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         plugins
     });
 
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceDelegate,
+        propertyConfigs,
+        navigationController,
+        authController
+    });
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }

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,
@@ -116,6 +118,7 @@ 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);
 
@@ -204,7 +207,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 +225,6 @@ export function EntityForm<M extends Record<string, any>>({
         }
     });
 
-
     useEffect(() => {
 
         const handleKeyDown = (e: KeyboardEvent) => {
@@ -251,7 +253,8 @@ 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) => {
@@ -679,7 +682,7 @@ export function EntityForm<M extends Record<string, any>>({
             <form
                 onSubmit={formContext.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)}>
@@ -716,17 +719,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) {

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";
@@ -90,6 +90,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      onPropertyChange
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     return (
@@ -107,7 +108,8 @@ 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);
@@ -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>>;
                 }

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/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/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/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
         })
     }
 
@@ -81,13 +84,16 @@ export function RepeatFieldBinding<T extends Array<any>>({
         </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/StorageUploadFieldBinding.tsx

@@ -13,7 +13,7 @@ import { PreviewSize } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
 import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
-import { useSnackbarController, useStorageSource } from "../../hooks";
+import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
@@ -57,6 +57,8 @@ export function StorageUploadFieldBinding({
                                               isSubmitting,
                                           }: StorageUploadFieldProps) {
 
+    const authController = useAuthController();
+
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
@@ -91,6 +93,7 @@ export function StorageUploadFieldBinding({
 
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
+        authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     return (

package/src/hooks/data/save.ts

@@ -1,12 +1,4 @@
-import {
-    DataSource,
-    Entity,
-    EntityCollection,
-    EntityValues,
-    FireCMSContext,
-    SaveEntityProps,
-    User
-} from "../../types";
+import { DataSource, Entity, EntityCollection, EntityValues, FireCMSContext, SaveEntityProps, User } from "../../types";
 import { useDataSource } from "./useDataSource";
 import { resolveCollection } from "../../util";
 
@@ -49,23 +41,23 @@ export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
  * @group Hooks and utilities
  */
 export async function saveEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
-                                                                                                        collection,
-                                                                                                        path,
-                                                                                                        entityId,
-                                                                                                        values,
-                                                                                                        previousValues,
-                                                                                                        status,
-                                                                                                        dataSource,
-                                                                                                        context,
-                                                                                                        onSaveSuccess,
-                                                                                                        onSaveFailure,
-                                                                                                        onPreSaveHookError,
-                                                                                                        onSaveSuccessHookError
-                                                                                                    }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, USER>,
-                                                                                                        dataSource: DataSource,
-                                                                                                        context: FireCMSContext<USER>,
-                                                                                                    }
+                                                                                                    collection,
+                                                                                                    path,
+                                                                                                    entityId,
+                                                                                                    values,
+                                                                                                    previousValues,
+                                                                                                    status,
+                                                                                                    dataSource,
+                                                                                                    context,
+                                                                                                    onSaveSuccess,
+                                                                                                    onSaveFailure,
+                                                                                                    onPreSaveHookError,
+                                                                                                    onSaveSuccessHookError
+                                                                                                }: SaveEntityWithCallbacksProps<M> & {
+                                                                                                    collection: EntityCollection<M, USER>,
+                                                                                                    dataSource: DataSource,
+                                                                                                    context: FireCMSContext,
+                                                                                                }
 ): Promise<void> {
 
     if (status !== "new" && !entityId) {
@@ -85,7 +77,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                propertyConfigs: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController: context.authController
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -127,7 +120,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    propertyConfigs: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -156,7 +150,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    propertyConfigs: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/useFireCMSContext.tsx

@@ -67,33 +67,3 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
 
     return fireCMSContextRef.current;
 }
-
-// export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
-//
-//     const authController = useAuthController<USER, AuthControllerType>();
-//     const sideDialogsController = useSideDialogsController();
-//     const sideEntityController = useSideEntityController();
-//     const navigation = useNavigationController();
-//     const dataSource = useDataSource();
-//     const storageSource = useStorageSource();
-//     const snackbarController = useSnackbarController();
-//     const userConfigPersistence = useUserConfigurationPersistence();
-//     const dialogsController = useDialogsController();
-//     const customizationController = useCustomizationController();
-//     const analyticsController = useAnalyticsController();
-//
-//     return {
-//         authController,
-//         sideDialogsController,
-//         sideEntityController,
-//         navigation,
-//         dataSource,
-//         storageSource,
-//         snackbarController,
-//         userConfigPersistence,
-//         dialogsController,
-//         customizationController,
-//         analyticsController
-//     };
-//
-// };

package/src/internal/useBuildDataSource.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import {
+    AuthController,
     DataSource,
     DataSourceDelegate,
     DeleteEntityProps,
@@ -27,11 +28,13 @@ import { resolveCollection, updateDateAutoValues } from "../util";
 export function useBuildDataSource({
                                        delegate,
                                        propertyConfigs,
-                                       navigationController
+                                       navigationController,
+                                       authController
                                    }: {
     delegate: DataSourceDelegate,
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
+    authController: AuthController;
 }): DataSource {
 
     return {
@@ -209,26 +212,27 @@ export function useBuildDataSource({
                     collection,
                     path,
                     entityId,
-                    propertyConfigs: propertyConfigs
+                    propertyConfigs: propertyConfigs,
+                    authController
                 })
                 : undefined;
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = usedDelegate.cmsToDelegateModel(
+            const delegateValues = usedDelegate.cmsToDelegateModel(
                 values,
             );
 
             const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
-                        inputValues: firestoreValues,
+                        inputValues: delegateValues,
                         properties,
                         status,
                         timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
                         setDateToMidnight: usedDelegate.setDateToMidnight
                     })
-                : firestoreValues;
+                : delegateValues;
 
             return usedDelegate.saveEntity({
                 path,