@firecms/core 3.0.0-canary.216 → 3.0.0-canary.218

package/dist/types/fields.d.ts

@@ -138,7 +138,9 @@ export interface FormContext<M extends Record<string, any> = any> {
     savingError?: Error;
     openEntityMode: "side_panel" | "full_screen";
     /**
-     * This is the underlying formex controller that powers the form
+     * This is the underlying formex controller that powers the form.
+     * If you are in a red only mode, the formex controller is there, but you can't
+     * operate with it
      */
     formex: FormexController<M>;
 }

package/dist/util/createFormexStub.d.ts

@@ -0,0 +1,2 @@
+import { FormexController } from "@firecms/formex";
+export declare function createFormexStub<T extends object>(values: T): FormexController<T>;

package/dist/util/objects.d.ts

@@ -1,6 +1,6 @@
 export declare const pick: <T>(obj: T, ...args: any[]) => T;
 export declare function isObject(item: any): any;
-export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U): T & U;
+export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U, ignoreUndefined?: boolean): T & U;
 export declare function getValueInPath(o: object | undefined, path: string): any;
 export declare function removeInPath(o: object, path: string): object | undefined;
 export declare function removeFunctions(o: object | undefined): any;

package/dist/util/resolutions.d.ts

@@ -81,8 +81,8 @@ export declare function resolveProperties<M extends Record<string, any>>({ prope
 export declare function resolvePropertyEnum(property: StringProperty | NumberProperty, fromBuilder?: boolean): ResolvedStringProperty | ResolvedNumberProperty;
 export declare function resolveEnumValues(input: EnumValues): EnumValueConfig[] | undefined;
 export declare function resolveEntityView(entityView: string | EntityCustomView<any>, contextEntityViews?: EntityCustomView<any>[]): EntityCustomView<any> | undefined;
-export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string): {
-    resolvedEntityViews: EntityCustomView[];
-    selectedEntityView: EntityCustomView | undefined;
-    selectedSecondaryForm: EntityCustomView | undefined;
+export declare function resolvedSelectedEntityView<M extends Record<string, any>>(customViews: (string | EntityCustomView<M>)[] | undefined, customizationController: CustomizationController, selectedTab?: string, canEdit?: boolean): {
+    resolvedEntityViews: EntityCustomView<M>[];
+    selectedEntityView: EntityCustomView<M> | undefined;
+    selectedSecondaryForm: EntityCustomView<M> | undefined;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.216",
+  "version": "3.0.0-canary.218",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.216",
-    "@firecms/formex": "^3.0.0-canary.216",
-    "@firecms/ui": "^3.0.0-canary.216",
+    "@firecms/editor": "^3.0.0-canary.218",
+    "@firecms/formex": "^3.0.0-canary.218",
+    "@firecms/ui": "^3.0.0-canary.218",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -105,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "806f397ce4c02424b832311615c8864939a4f4d5",
+  "gitHead": "c0efa30360fec2f9be27b9d47bc6a800b17d34f2",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityJsonPreview.tsx

@@ -38,7 +38,7 @@ export function EntityJsonPreview({ values }: { values: object }) {
 
     return (
         <Highlight
-            theme={mode === "dark" ? themes.vsDark : themes.vsLight}
+            theme={mode === "dark" ? themes.vsDark : themes.github}
             code={code}
             language="json"
         >
@@ -48,9 +48,9 @@ export function EntityJsonPreview({ values }: { values: object }) {
                     ref={preRef}
                     style={{
                         ...style,
-                        background: "inherit"
+                        backgroundColor: "inherit"
                     }}
-                    className="container mx-auto p-8 rounded text-sm"
+                    className="max-w-6xl mx-auto p-8 rounded text-sm"
                 >
           {tokens.map((line, i) => (
               <div key={i} {...getLineProps({ line })} className="text-wrap">

package/src/core/EntityEditView.tsx

@@ -5,6 +5,7 @@ import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary
 import {
     canEditEntity,
     removeInitialAndTrailingSlashes,
+    resolveCollection,
     resolveDefaultSelectedView,
     resolvedSelectedEntityView
 } from "../util";
@@ -21,6 +22,7 @@ import { getEntityFromCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
+import { createFormexStub } from "../util/createFormexStub";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -54,7 +56,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
     barActions?: React.ReactNode;
-    formProps?: Partial<EntityFormProps<M>>
+    formProps?: Partial<EntityFormProps<M>>,
 }
 
 /**
@@ -104,19 +106,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
 
-    if (!canEdit) {
-        return <div className={"flex flex-col"}>
-            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
-                {props.collection.singularName ?? props.collection.name}
-            </Typography>
-            <EntityView
-                className={"px-8"}
-                entity={entity as Entity<M>}
-                path={props.path}
-                collection={props.collection}/>
-        </div>
-    }
-
     return <EntityEditViewInner<M> {...props}
                                    entityId={entityId}
                                    entity={entity}
@@ -124,9 +113,11 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
                                    dataLoading={dataLoading}
                                    status={status}
                                    setStatus={setStatus}
+                                   canEdit={canEdit}
     />;
 }
 
+
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId,
@@ -143,13 +134,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        barActions,
                                                                        status,
                                                                        setStatus,
-                                                                       formProps
+                                                                       formProps,
+                                                                       canEdit
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
     status: EntityStatus,
     setStatus: (status: EntityStatus) => void,
+    canEdit?: boolean,
 }) {
 
     const context = useFireCMSContext();
@@ -177,10 +170,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     ), []);
 
     const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
-
     useEffect(() => {
-        if ((selectedTabProp ?? MAIN_TAB_VALUE) !== selectedTab) {
-            setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
+        if ((selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE) !== selectedTab) {
+            setSelectedTab(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
         }
     }, [selectedTabProp]);
 
@@ -195,23 +187,58 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         resolvedEntityViews,
         selectedEntityView,
         selectedSecondaryForm
-    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
 
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
+    const authController = useAuthController();
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => !e.includeActions)
         .map((customView) => {
+
             if (!customView)
                 return null;
             const Builder = customView.Builder;
             if (!Builder) {
-                console.error("customView.Builder is not defined");
+                console.error("INTERNAL: customView.Builder is not defined");
                 return null;
             }
 
+            if (!entityId) {
+                console.error("INTERNAL: entityId is not defined");
+                return null;
+            }
+
+            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+            const usedFormContext: FormContext = formContext ?? {
+                entityId,
+                openEntityMode: layout,
+                status: status,
+                values: usedEntity?.values ?? {},
+                setFieldValue: (key: string, value: any) => {
+                    throw new Error("You can't update values in read only mode");
+                },
+                save: () => {
+                    throw new Error("You can't save in read only mode");
+                },
+                collection: resolveCollection<M>({
+                    collection,
+                    path,
+                    entityId,
+                    values: usedEntity?.values ?? {},
+                    previousValues: usedEntity?.values ?? {},
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController
+                }),
+                path,
+                entity: usedEntity,
+                savingError: undefined,
+                formex: formexStub
+            };
+
             return <div
                 className={cls(defaultBorderMixin,
                     "relative flex-1 w-full h-full overflow-auto",
@@ -220,11 +247,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 key={`custom_view_${customView.key}`}
                 role="tabpanel">
                 <ErrorBoundary>
-                    {formContext && <Builder
+                    {usedFormContext && <Builder
                         collection={collection}
                         entity={usedEntity}
-                        modifiedValues={formContext.formex.values ?? usedEntity?.values}
-                        formContext={formContext}
+                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                        formContext={usedFormContext}
                     />}
                 </ErrorBoundary>
             </div>;
@@ -239,7 +266,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         role="tabpanel">
         <ErrorBoundary>
             <EntityJsonPreview
-                values={formContext?.values ?? {}}/>
+                values={formContext?.values ?? entity?.values ?? {}}/>
         </ErrorBoundary>
     </div>;
 
@@ -288,42 +315,61 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     };
 
-    // Render the main entity form view (or a read-only view if the user cannot edit)
-    const entityView = <EntityForm<M>
-        collection={collection}
-        path={path}
-        entityId={entityId ?? usedEntity?.id}
-        onValuesModified={onValuesModified}
-        entity={entity}
-        initialDirtyValues={cachedDirtyValues}
-        openEntityMode={layout}
-        forceActionsAtTheBottom={actionsAtTheBottom}
-        initialStatus={status}
-        className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
-        EntityFormActionsComponent={EntityEditViewFormActions}
-        {...formProps}
-        onEntityChange={(entity) => {
-            setUsedEntity(entity);
-            formProps?.onEntityChange?.(entity);
-        }}
-        onStatusChange={(status) => {
-            setStatus(status);
-            formProps?.onStatusChange?.(status);
-        }}
-        onFormContextReady={(formContext) => {
-            setFormContext(formContext);
-            formProps?.onFormContextReady?.(formContext);
-        }}
-        onSaved={(params) => {
-            const res = {
-                ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
-            };
-            onSaved?.(res);
-            formProps?.onSaved?.(res);
-        }}
-        Builder={selectedSecondaryForm?.Builder}
-    />;
+    const entityView = !canEdit ?
+        (
+            <div
+                className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", !mainViewVisible ? "hidden" : "")}>
+                <div
+                    className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
+                    <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
+                        {collection.singularName ?? collection.name}
+                    </Typography>
+                    <EntityView
+                        className={"px-8 h-full overflow-auto"}
+                        entity={entity as Entity<M>}
+                        path={path}
+                        collection={collection}/>
+                </div>
+            </div>
+)
+:
+    (
+        <EntityForm<M>
+            collection={collection}
+            path={path}
+            entityId={entityId ?? usedEntity?.id}
+            onValuesModified={onValuesModified}
+            entity={entity}
+            initialDirtyValues={cachedDirtyValues}
+                openEntityMode={layout}
+                forceActionsAtTheBottom={actionsAtTheBottom}
+                initialStatus={status}
+                className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
+                EntityFormActionsComponent={EntityEditViewFormActions}
+                {...formProps}
+                onEntityChange={(entity) => {
+                    setUsedEntity(entity);
+                    formProps?.onEntityChange?.(entity);
+                }}
+                onStatusChange={(status) => {
+                    setStatus(status);
+                    formProps?.onStatusChange?.(status);
+                }}
+                onFormContextReady={(formContext) => {
+                    setFormContext(formContext);
+                    formProps?.onFormContextReady?.(formContext);
+                }}
+                onSaved={(params) => {
+                    const res = {
+                        ...params,
+                        selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+                    };
+                    onSaved?.(res);
+                    formProps?.onSaved?.(res);
+                }}
+                Builder={selectedSecondaryForm?.Builder}
+            />
+        );
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
         <Tab

package/src/form/EntityForm.tsx

@@ -90,6 +90,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
     children?: React.ReactNode;
 };
 
+
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
                                                               entityId: entityIdProp,
@@ -678,9 +679,9 @@ 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(authController, collection, path, status, entity, customizationController.propertyConfigs) as M
                 })}
@@ -692,7 +693,7 @@ 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
+                        {formex.dirty
                             ? <Tooltip title={"Local unsaved changes"}
                                        className={"self-end sticky top-4 z-10"}>
                                 <Chip size={"small"} colorScheme={"orangeDarker"}>
@@ -777,3 +778,4 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
+

package/src/hooks/useBuildNavigationController.tsx

@@ -528,7 +528,7 @@ function useCustomBlocker(): NavigationBlocker {
             return shouldBlock;
         });
     } catch (e) {
-        console.warn("Blocker not available, navigation will not be blocked");
+        // console.warn("Blocker not available, navigation will not be blocked");
     }
 
     const updateBlockListener = (path: string, block: boolean, basePath?: string) => {

package/src/routes/FireCMSRoute.tsx

@@ -175,7 +175,7 @@ function EntityFullScreenRoute({
             return blocked.current;
         });
     } catch (e) {
-        console.warn("Blocker not available, navigation will not be blocked");
+        // console.warn("Blocker not available, navigation will not be blocked");
     }
 
     const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");

package/src/types/fields.tsx

@@ -171,7 +171,9 @@ export interface FormContext<M extends Record<string, any> = any> {
     openEntityMode: "side_panel" | "full_screen";
 
     /**
-     * This is the underlying formex controller that powers the form
+     * This is the underlying formex controller that powers the form.
+     * If you are in a red only mode, the formex controller is there, but you can't
+     * operate with it
      */
     formex: FormexController<M>;
 }

package/src/util/createFormexStub.tsx

@@ -0,0 +1,62 @@
+import { FormexController } from "@firecms/formex";
+
+export function createFormexStub<T extends object>(values: T): FormexController<T> {
+    const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
+
+    return {
+        values,
+        initialValues: values,
+        touched: {} as Record<string, boolean>,
+        dirty: false,
+        errors: {} as Record<string, string>,
+        submitCount: 0,
+        isSubmitting: false,
+        isValidating: false,
+        version: 0,
+        canUndo: false,
+        canRedo: false,
+
+        setValues: () => {
+            throw new Error(errorMessage);
+        },
+        setFieldValue: () => {
+            throw new Error(errorMessage);
+        },
+        setFieldTouched: () => {
+            throw new Error(errorMessage);
+        },
+        setDirty: () => {
+            throw new Error(errorMessage);
+        },
+        setSubmitCount: () => {
+            throw new Error(errorMessage);
+        },
+        setFieldError: () => {
+            throw new Error(errorMessage);
+        },
+        handleChange: () => {
+            throw new Error(errorMessage);
+        },
+        handleBlur: () => {
+            throw new Error(errorMessage);
+        },
+        handleSubmit: () => {
+            throw new Error(errorMessage);
+        },
+        validate: () => {
+            throw new Error(errorMessage);
+        },
+        resetForm: () => {
+            throw new Error(errorMessage);
+        },
+        setSubmitting: () => {
+            throw new Error(errorMessage);
+        },
+        undo: () => {
+            throw new Error(errorMessage);
+        },
+        redo: () => {
+            throw new Error(errorMessage);
+        }
+    };
+}

package/src/util/join_collections.ts

@@ -78,6 +78,7 @@ export function mergeCollection(target: EntityCollection,
                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
 ): EntityCollection {
 
+
     const subcollectionsMerged = joinCollectionLists(
         target?.subcollections ?? [],
         source?.subcollections ?? [],
@@ -94,7 +95,7 @@ export function mergeCollection(target: EntityCollection,
             propertiesMerged[key] = source.properties[key] as PropertyOrBuilder;
     });
 
-    const mergedCollection = mergeDeep(target, source);
+    const mergedCollection = mergeDeep(target, source, true);
     const targetPropertiesOrder = getCollectionKeys(target);
     const sourcePropertiesOrder = getCollectionKeys(source);
     const mergedPropertiesOrder = [...new Set([...sourcePropertiesOrder, ...targetPropertiesOrder])];
@@ -118,6 +119,7 @@ export function mergeCollection(target: EntityCollection,
 
     // @ts-ignore
     resultCollection["merged"] = true;
+
     return resultCollection
 }
 

package/src/util/objects.ts

@@ -12,12 +12,16 @@ export function isObject(item: any) {
     return item && typeof item === "object" && !Array.isArray(item);
 }
 
-export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U): T & U {
+export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U, ignoreUndefined: boolean = false): T & U {
     const targetIsObject = isObject(target);
     const output = targetIsObject ? { ...target } : target;
     if (targetIsObject && isObject(source)) {
         Object.keys(source).forEach(key => {
             const sourceElement = source[key];
+            // Skip undefined values when ignoreUndefined is true
+            if (ignoreUndefined && sourceElement === undefined) {
+                return;
+            }
             if (sourceElement instanceof Date) {
                 // Assign a new Date instance with the same time value
                 Object.assign(output, { [key]: new Date(sourceElement.getTime()) });

package/src/util/resolutions.ts

@@ -441,11 +441,13 @@ export function resolveEntityView(entityView: string | EntityCustomView<any>, co
 export function resolvedSelectedEntityView<M extends Record<string, any>>(
     customViews: (string | EntityCustomView<M>)[] | undefined,
     customizationController: CustomizationController,
-    selectedTab?: string
+    selectedTab?: string,
+    canEdit?: boolean,
 ) {
     const resolvedEntityViews = customViews ? customViews
             .map(e => resolveEntityView(e, customizationController.entityViews))
-            .filter(Boolean) as EntityCustomView[]
+            .filter((e): e is EntityCustomView<M> => Boolean(e))
+            .filter((e) => canEdit || !e.includeActions)
         : [];
 
     const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);