@firecms/core 3.0.0-canary.204 → 3.0.0-canary.205

package/dist/internal/useBuildSideEntityController.d.ts

@@ -1,4 +1,4 @@
-import { EntityCollection, EntitySidePanelProps, NavigationController, SideDialogsController, SideEntityController } from "../types";
-export declare function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string;
+import { CustomizationController, EntityCollection, EntitySidePanelProps, NavigationController, SideDialogsController, SideEntityController } from "../types";
+export declare function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string;
 export declare const useBuildSideEntityController: (navigation: NavigationController, sideDialogsController: SideDialogsController) => SideEntityController;
 export declare function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[];

package/dist/util/resolutions.d.ts

@@ -1,4 +1,4 @@
-import { ArrayProperty, CMSType, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
+import { ArrayProperty, CMSType, CustomizationController, EntityCollection, EntityCustomView, EntityValues, EnumValueConfig, EnumValues, NumberProperty, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedArrayProperty, ResolvedEntityCollection, ResolvedNumberProperty, ResolvedProperties, ResolvedProperty, ResolvedStringProperty, StringProperty, UserConfigurationPersistence } from "../types";
 export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, propertyConfigs, ignoreMissingFields }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
@@ -76,3 +76,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;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.204",
+  "version": "3.0.0-canary.205",
   "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.204",
-    "@firecms/formex": "^3.0.0-canary.204",
-    "@firecms/ui": "^3.0.0-canary.204",
+    "@firecms/editor": "^3.0.0-canary.205",
+    "@firecms/formex": "^3.0.0-canary.205",
+    "@firecms/ui": "^3.0.0-canary.205",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "2fb107e78d8fc3ade463adaf00908e3a8c812a0f",
+  "gitHead": "b3a2a795ce5eb7edc68efea5caa69b8d477901be",
   "publishConfig": {
     "access": "public"
   },

package/src/core/EntityEditView.tsx

@@ -1,8 +1,13 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Entity, EntityCollection, EntityCustomView, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
+import { Entity, EntityCollection, EntityStatus, FireCMSPlugin, FormContext, User } from "../types";
 
 import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
-import { canEditEntity, removeInitialAndTrailingSlashes, resolveDefaultSelectedView, resolveEntityView } from "../util";
+import {
+    canEditEntity,
+    removeInitialAndTrailingSlashes,
+    resolveDefaultSelectedView,
+    resolvedSelectedEntityView
+} from "../util";
 
 import {
     useAuthController,
@@ -13,7 +18,7 @@ import {
 } from "../hooks";
 import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
-import { EntityForm, EntityFormProps, FormLayoutInner } from "../form";
+import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -120,43 +125,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     />;
 }
 
-function SecondaryForm<M extends object>({
-                                             collection,
-                                             className,
-                                             customView,
-                                             entity,
-                                             formContext,
-                                             forceActionsAtTheBottom,
-                                         }: {
-    className?: string,
-    customView: EntityCustomView,
-    formContext: FormContext<M>,
-    collection: EntityCollection<M>,
-    forceActionsAtTheBottom?: boolean,
-    entity: Entity<M> | undefined,
-}) {
-
-    if (!customView.Builder) {
-        console.error("customView.Builder is not defined");
-        return null;
-    }
-
-    return <FormLayoutInner
-        className={className}
-        forceActionsAtTheBottom={forceActionsAtTheBottom}
-        formContext={formContext}
-        EntityFormActionsComponent={EntityEditViewFormActions}>
-        <ErrorBoundary>
-            {formContext && <customView.Builder
-                collection={collection}
-                entity={entity}
-                modifiedValues={formContext.formex.values ?? entity?.values}
-                formContext={formContext}
-            />}
-        </ErrorBoundary>
-    </FormLayoutInner>;
-}
-
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId,
@@ -220,15 +188,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const customViewsCount = customViews?.length ?? 0;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
 
-    const resolvedEntityViews = customViews ? customViews
-            .map(e => resolveEntityView(e, customizationController.entityViews))
-            .filter(Boolean) as EntityCustomView[]
-        : [];
-
-    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
-    const selectedSecondaryForm = formContext
-        && customViews
-        && resolvedEntityViews.filter(e => e.includeActions).find(e => e.key === selectedTab);
+    const {
+        resolvedEntityViews,
+        selectedEntityView,
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
 
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
@@ -305,7 +269,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection
+                collection,
             });
         }
     };

package/src/core/EntitySidePanel.tsx

@@ -141,14 +141,14 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                       path,
                                       entityId,
                                       selectedTab,
-                                      collection
+                                      collection,
                                   }) => {
                         sideEntityController.replace({
                             path,
                             entityId,
                             selectedTab,
                             updateUrl: true,
-                            collection
+                            collection,
                         });
                     }}
                     formProps={props.formProps}

package/src/form/EntityForm.tsx

@@ -589,7 +589,7 @@ export function EntityForm<M extends Record<string, any>>({
 
     const formView = <ErrorBoundary>
         <>
-            <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
+            {!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")}
                     variant={"h4"}>
@@ -601,11 +601,11 @@ export function EntityForm<M extends Record<string, any>>({
                         {entity?.path ?? path}/{entityId}
                     </code>
                 </Alert>}
-            </div>
+            </div>}
 
             {children}
 
-            {!collection.hideIdFromForm &&
+            {!Builder && !collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
                                entityId={entityId}
                                status={status}
@@ -631,104 +631,14 @@ export function EntityForm<M extends Record<string, any>>({
             onIdChange(entityId);
     }, [entityId, onIdChange]);
 
-    return (
-        <FormLayoutInner
-            className={className}
-            id={`form_${path}`}
-            pluginActions={pluginActions}
-            forceActionsAtTheBottom={forceActionsAtTheBottom}
-            EntityFormActionsComponent={EntityFormActionsComponent}
-            formContext={formContext}
-            showDefaultActions={showDefaultActions}>
-            {formView}
-        </FormLayoutInner>
-    );
-}
-
-function getInitialEntityValues<M extends object>(
-    collection: EntityCollection,
-    path: string,
-    status: "new" | "existing" | "copy",
-    entity: Entity<M> | undefined,
-    propertyConfigs?: Record<string, PropertyConfig>
-): Partial<EntityValues<M>> {
-    const resolvedCollection = resolveCollection({
-        collection,
-        path,
-        values: entity?.values,
-        propertyConfigs
-    });
-    const properties = resolvedCollection.properties;
-    if ((status === "existing" || status === "copy") && entity) {
-        if (!collection.alwaysApplyDefaultValues) {
-            return entity.values ?? getDefaultValuesFor(properties);
-        } else {
-            const defaultValues = getDefaultValuesFor(properties);
-            return mergeDeep(defaultValues, entity.values ?? {});
-        }
-    } else if (status === "new") {
-        return getDefaultValuesFor(properties);
-    } else {
-        console.error({
-            status,
-            entity
-        });
-        throw new Error("Form has not been initialised with the correct parameters");
-    }
-}
-
-export function yupToFormErrors(yupError: ValidationError): Record<string, any> {
-    let errors: Record<string, any> = {};
-    if (yupError.inner) {
-        if (yupError.inner.length === 0) {
-            return setIn(errors, yupError.path!, yupError.message);
-        }
-        for (const err of yupError.inner) {
-            if (!getIn(errors, err.path!)) {
-                errors = setIn(errors, err.path!, err.message);
-            }
-        }
-    }
-    return errors;
-}
-
-export function FormLayoutInner({
-                                    id,
-                                    formContext,
-                                    children,
-                                    className,
-                                    forceActionsAtTheBottom,
-                                    pluginActions,
-                                    EntityFormActionsComponent,
-                                    showDefaultActions,
-                                }: {
-    id?: string,
-    formContext: FormContext,
-    children: React.ReactNode,
-    className?: string,
-    forceActionsAtTheBottom?: boolean,
-    pluginActions?: React.ReactNode[],
-    EntityFormActionsComponent: React.FC<EntityFormActionsProps>;
-    showDefaultActions?: boolean;
-}) {
-
-    const formex = formContext.formex;
-    const collection = formContext.collection;
-    const path = formContext.path;
-    const entity = formContext.entity;
-    const savingError = formContext.savingError;
-    const status = formContext.status;
-    const openEntityMode = formContext.openEntityMode;
     const disabled = formex.isSubmitting || (!formex.dirty && status === "existing");
 
-    const customizationController = useCustomizationController();
-
-    if (!collection || !path) {
+    if (!resolvedCollection || !path) {
         throw Error("INTERNAL: Collection and path must be defined in form context");
     }
 
     const dialogActions = <EntityFormActionsComponent
-        collection={collection}
+        collection={resolvedCollection}
         path={path}
         entity={entity}
         layout={forceActionsAtTheBottom ? "bottom" : "side"}
@@ -746,12 +656,12 @@ export function FormLayoutInner({
             <form
                 onSubmit={formContext.formex.handleSubmit}
                 onReset={() => formex.resetForm({
-                    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs),
+                    values: getInitialEntityValues(collection, path, status, entity, customizationController.propertyConfigs) as M,
                 })}
                 noValidate
                 className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
                 <div
-                    id={id}
+                    id={`form_${path}`}
                     className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
 
                     <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
@@ -769,7 +679,8 @@ export function FormLayoutInner({
                                     <CheckIcon size={"smallest"}/>
                                 </Chip>
                             </Tooltip>}
-                        {children}
+
+                        {formView}
 
                     </div>
 
@@ -781,6 +692,53 @@ export function FormLayoutInner({
     );
 }
 
+function getInitialEntityValues<M extends object>(
+    collection: EntityCollection,
+    path: string,
+    status: "new" | "existing" | "copy",
+    entity: Entity<M> | undefined,
+    propertyConfigs?: Record<string, PropertyConfig>
+): Partial<EntityValues<M>> {
+    const resolvedCollection = resolveCollection({
+        collection,
+        path,
+        values: entity?.values,
+        propertyConfigs
+    });
+    const properties = resolvedCollection.properties;
+    if ((status === "existing" || status === "copy") && entity) {
+        if (!collection.alwaysApplyDefaultValues) {
+            return entity.values ?? getDefaultValuesFor(properties);
+        } else {
+            const defaultValues = getDefaultValuesFor(properties);
+            return mergeDeep(defaultValues, entity.values ?? {});
+        }
+    } else if (status === "new") {
+        return getDefaultValuesFor(properties);
+    } else {
+        console.error({
+            status,
+            entity
+        });
+        throw new Error("Form has not been initialised with the correct parameters");
+    }
+}
+
+export function yupToFormErrors(yupError: ValidationError): Record<string, any> {
+    let errors: Record<string, any> = {};
+    if (yupError.inner) {
+        if (yupError.inner.length === 0) {
+            return setIn(errors, yupError.path!, yupError.message);
+        }
+        for (const err of yupError.inner) {
+            if (!getIn(errors, err.path!)) {
+                errors = setIn(errors, err.path!, err.message);
+            }
+        }
+    }
+    return errors;
+}
+
 function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<any>, lastSavedValues: any, save: (values: EntityValues<any>) => Promise<void>) {
     if (!autoSave) return;
     useEffect(() => {

package/src/internal/useBuildSideEntityController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import {
+    CustomizationController,
     EntityCollection,
     EntitySidePanelProps,
     NavigationController,
@@ -10,17 +11,28 @@ import {
 } from "../types";
 import { getNavigationEntriesFromPath, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
-import { removeInitialAndTrailingSlashes, resolveCollection, resolveDefaultSelectedView } from "../util";
+import {
+    removeInitialAndTrailingSlashes,
+    resolveCollection,
+    resolveDefaultSelectedView,
+    resolvedSelectedEntityView
+} from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
-import { useLargeLayout } from "../hooks";
+import { useCustomizationController, useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
 
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
 
-export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string {
     if (small) return CONTAINER_FULL_WIDTH;
-    const mainViewSelected = !props.selectedTab;
+
+    const {
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
+
+    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+
     let resolvedWidth: string | undefined;
     if (props.width) {
         resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
@@ -28,7 +40,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
     }
 
-    if (!mainViewSelected) {
+    if (!shouldUseSmallLayout) {
         return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
     } else {
         if (resolvedWidth) {
@@ -89,6 +101,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
     const location = useLocation();
     const initialised = useRef<boolean>(false);
+    const customizationController = useCustomizationController();
 
     const smallLayout = !useLargeLayout();
 
@@ -105,9 +118,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const props = panelsFromUrl[i];
                     if (i === 0)
-                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
+                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
                     else
-                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout))
+                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController))
                 }
             }
             initialised.current = true;
@@ -127,7 +140,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                     return;
                 }
                 const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
-                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout);
+                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
                 const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : undefined;
                 if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
                     sideDialogsController.replace(panelProps);
@@ -140,7 +153,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     useEffect(() => {
         const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
             if (sidePanelProps.additional) {
-                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout);
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
             }
             return sidePanelProps;
         });
@@ -172,7 +185,8 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 },
                 navigation.buildUrlCollectionPath,
                 navigation.resolveIdsFrom,
-                smallLayout
+                smallLayout,
+                customizationController
             ));
 
     }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout]);
@@ -183,7 +197,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
 
     }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout]);
 
@@ -242,11 +256,11 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanel ? [sidePanel] : [];
 }
 
-
 const propsToSidePanel = (props: EntitySidePanelProps,
                           buildUrlCollectionPath: (path: string) => string,
                           resolveIdsFrom: (pathWithAliases: string) => string,
-                          smallLayout: boolean): SideDialogPanelProps => {
+                          smallLayout: boolean,
+                          customizationController: CustomizationController): SideDialogPanelProps => {
 
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
@@ -261,7 +275,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
         formProps: props.formProps
     };
 
-    const entityViewWidth = getEntityViewWidth(props, smallLayout);
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
 
     return {
         key: `${props.path}/${props.entityId}`,

package/src/util/resolutions.ts

@@ -1,6 +1,7 @@
 import {
     ArrayProperty,
     CMSType,
+    CustomizationController,
     EntityCollection,
     EntityCustomView,
     EntityValues,
@@ -218,11 +219,11 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
 }
 
 export function getArrayResolvedProperties<M>({
-                                           propertyKey,
-                                           propertyValue,
-                                           property,
-                                           ...props
-                                       }: {
+                                                  propertyKey,
+                                                  propertyValue,
+                                                  property,
+                                                  ...props
+                                              }: {
     propertyValue: any,
     propertyKey?: string,
     property: ArrayProperty<any> | ResolvedArrayProperty<any>,
@@ -430,3 +431,23 @@ export function resolveEntityView(entityView: string | EntityCustomView<any>, co
         return entityView;
     }
 }
+
+export function resolvedSelectedEntityView<M extends Record<string, any>>(
+    customViews: (string | EntityCustomView<M>)[] | undefined,
+    customizationController: CustomizationController,
+    selectedTab?: string
+) {
+    const resolvedEntityViews = customViews ? customViews
+            .map(e => resolveEntityView(e, customizationController.entityViews))
+            .filter(Boolean) as EntityCustomView[]
+        : [];
+
+    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
+    const selectedSecondaryForm = customViews
+        && resolvedEntityViews.filter(e => e.includeActions).find(e => e.key === selectedTab);
+    return {
+        resolvedEntityViews,
+        selectedEntityView,
+        selectedSecondaryForm
+    };
+}