@firecms/core 3.0.0-canary.197 → 3.0.0-canary.199

package/dist/types/side_entity_controller.d.ts

@@ -1,6 +1,7 @@
 import { EntityCollection } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { Entity } from "./entities";
+import { EntityFormProps } from "../form";
 /**
  * Props used to open a side dialog
  * @group Hooks and utilities
@@ -55,6 +56,10 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Should this panel close when saving
      */
     closeOnSave?: boolean;
+    /**
+     * Override some form properties
+     */
+    formProps?: Partial<EntityFormProps<M>>;
 }
 /**
  * Controller to open the side dialog displaying entity forms

package/dist/util/navigation_from_path.d.ts

@@ -18,6 +18,7 @@ export interface NavigationViewEntityCustomInternal<M extends Record<string, any
     type: "custom_view";
     path: string;
     fullPath: string;
+    entityId: string;
     view: EntityCustomView<M>;
 }
 export declare function getNavigationEntriesFromPath(props: {

package/package.json

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

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -348,7 +348,7 @@ export const EntityCollectionView = React.memo(
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
 
             const saveProps: SaveEntityProps = {
-                path: fullPath,
+                path: entity.path ?? fullPath,
                 entityId: entity.id,
                 values: updatedValues,
                 previousValues: entity.values,

package/src/core/EntityEditView.tsx

@@ -13,7 +13,7 @@ import {
 } from "../hooks";
 import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
-import { EntityForm, FormLayoutInner } from "../form";
+import { EntityForm, EntityFormProps, FormLayoutInner } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -47,6 +47,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>>
 }
 
 /**
@@ -172,6 +173,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        barActions,
                                                                        status,
                                                                        setStatus,
+                                                                       formProps,
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
@@ -331,20 +333,34 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         path={path}
         entityId={entityId ?? usedEntity?.id}
         onValuesModified={onValuesModified}
-        onSaved={onSaved ? (params) => onSaved({
-            ...params,
-            selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
-        }) : undefined}
         entity={entity}
-        cachedDirtyValues={cachedDirtyValues}
+        initialDirtyValues={cachedDirtyValues}
         openEntityMode={layout}
-        onFormContextReady={setFormContext}
         forceActionsAtTheBottom={actionsAtTheBottom}
         initialStatus={status}
-        onStatusChange={setStatus}
-        className={!mainViewVisible ? "hidden" : ""}
+        className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
         EntityFormActionsComponent={EntityEditViewFormActions}
-        onEntityChange={setUsedEntity}
+        {...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);
+        }}
     />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>

package/src/core/EntityEditViewFormActions.tsx

@@ -18,7 +18,8 @@ export function EntityEditViewFormActions({
                                               disabled,
                                               status,
                                               pluginActions,
-                                              openEntityMode
+                                              openEntityMode,
+                                              showDefaultActions = true
                                           }: EntityFormActionsProps) {
 
     const authController = useAuthController();
@@ -40,7 +41,7 @@ export function EntityEditViewFormActions({
         return actions;
     }, [authController, collection, path]);
 
-    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
+    const formActions = showDefaultActions ? entityActions.filter(a => a.includeInForm === undefined || a.includeInForm) : [];
 
     return layout === "bottom"
         ? buildBottomActions({
@@ -55,7 +56,7 @@ export function EntityEditViewFormActions({
             status,
             sideDialogContext,
             pluginActions,
-            openEntityMode
+            openEntityMode,
         })
         : buildSideActions({
             savingError,
@@ -69,7 +70,7 @@ export function EntityEditViewFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
         });
 }
 
@@ -100,7 +101,7 @@ function buildBottomActions<M extends object>({
                                                   status,
                                                   sideDialogContext,
                                                   pluginActions,
-                                                  openEntityMode
+                                                  openEntityMode,
                                               }: ActionsViewProps<M>) {
 
     const canClose = openEntityMode === "side_panel";

package/src/core/EntitySidePanel.tsx

@@ -33,8 +33,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const navigationController = useNavigationController();
     const sideDialogsController = useSideDialogContext();
 
-    console.log("sideDialogsController", sideDialogsController);
-
     const onClose = () => {
         if (props.onClose) {
             props.onClose();
@@ -153,6 +151,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             collection
                         });
                     }}
+                    formProps={props.formProps}
                 />
             </ErrorBoundary>
 

package/src/form/EntityForm.tsx

@@ -25,11 +25,9 @@ import {
 
 import {
     saveEntityWithCallbacks,
-    useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext, useSideDialogsController,
-    useSideEntityController,
+    useFireCMSContext,
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
@@ -42,7 +40,6 @@ import { CustomIdField } from "../form/components/CustomIdField";
 import { ErrorFocus } from "../form/components/ErrorFocus";
 import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
 import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
-import { useSideDialogContext } from "../core";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -53,7 +50,7 @@ export type OnUpdateParams = {
     collection: EntityCollection<any>
 };
 
-type EntityFormProps<M extends Record<string, any>> = {
+export type EntityFormProps<M extends Record<string, any>> = {
     path: string;
     collection: EntityCollection<M>;
     entityId?: string;
@@ -62,7 +59,7 @@ type EntityFormProps<M extends Record<string, any>> = {
     onIdChange?: (id: string) => void;
     onValuesModified?: (modified: boolean) => void;
     onSaved?: (params: OnUpdateParams) => void;
-    cachedDirtyValues?: Partial<M>; // dirty cached entity in memory
+    initialDirtyValues?: Partial<M>; // dirty cached entity in memory
     onFormContextReady?: (formContext: FormContext) => void;
     forceActionsAtTheBottom?: boolean;
     className?: string;
@@ -71,6 +68,16 @@ type EntityFormProps<M extends Record<string, any>> = {
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
     openEntityMode?: "side_panel" | "full_screen";
+    /**
+     * Include the copy and delete actions in the form
+     */
+    showDefaultActions?: boolean;
+
+    /**
+     * Display the entity path in the form
+     */
+    showEntityPath?: boolean;
+
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 };
 
@@ -82,7 +89,7 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onIdChange,
                                                               onSaved,
                                                               entity,
-                                                              cachedDirtyValues,
+                                                              initialDirtyValues,
                                                               onFormContextReady,
                                                               forceActionsAtTheBottom,
                                                               initialStatus,
@@ -91,7 +98,9 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
-                                                              EntityFormActionsComponent = EntityFormActions
+                                                              EntityFormActionsComponent = EntityFormActions,
+                                                              showDefaultActions = true,
+                                                              showEntityPath = true
                                                           }: EntityFormProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
@@ -186,8 +195,8 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
-        initialValues: (cachedDirtyValues ?? getInitialEntityValues(collection, path, status, entity)) as M,
-        initialDirty: Boolean(cachedDirtyValues),
+        initialValues: (initialDirtyValues ?? getInitialEntityValues(collection, path, status, entity)) as M,
+        initialDirty: Boolean(initialDirtyValues),
         onSubmit,
         onReset: () => {
             clearDirtyCache();
@@ -485,77 +494,76 @@ export function EntityForm<M extends Record<string, any>>({
     const formFieldKeys = getFormFieldKeys(resolvedCollection);
 
     const formFields = () => (
-            <FormLayout>
-                {formFieldKeys.map((key) => {
-                    const property = resolvedCollection.properties[key];
-                    if (property) {
-                        const underlyingValueHasChanged: boolean =
-                            !!underlyingChanges &&
-                            Object.keys(underlyingChanges).includes(key) &&
-                            formex.touched[key];
-                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
-                        const hidden = isHidden(property);
-                        if (hidden) return null;
-                        const widthPercentage = property.widthPercentage ?? 100;
-                        const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
-                            propertyKey: key,
-                            disabled,
-                            property,
-                            includeDescription: property.description || property.longDescription,
-                            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-                            context: formContext,
-                            partOfArray: false,
-                            minimalistView: false,
-                            autoFocus: false
-                        };
-
-                        return (
-                            <FormEntry propertyKey={key}
-                                       widthPercentage={widthPercentage}
-                                       key={`field_${key}`}>
-                                <PropertyFieldBinding {...cmsFormFieldProps} />
-                            </FormEntry>
-                        );
-                    }
+        <FormLayout>
+            {formFieldKeys.map((key) => {
+                const property = resolvedCollection.properties[key];
+                if (property) {
+                    const underlyingValueHasChanged: boolean =
+                        !!underlyingChanges &&
+                        Object.keys(underlyingChanges).includes(key) &&
+                        formex.touched[key];
+                    const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                    const hidden = isHidden(property);
+                    if (hidden) return null;
+                    const widthPercentage = property.widthPercentage ?? 100;
+                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
+                        propertyKey: key,
+                        disabled,
+                        property,
+                        includeDescription: property.description || property.longDescription,
+                        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+                        context: formContext,
+                        partOfArray: false,
+                        minimalistView: false,
+                        autoFocus: false
+                    };
+
+                    return (
+                        <FormEntry propertyKey={key}
+                                   widthPercentage={widthPercentage}
+                                   key={`field_${key}`}>
+                            <PropertyFieldBinding {...cmsFormFieldProps} />
+                        </FormEntry>
+                    );
+                }
 
-                    const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
-                    if (additionalField && entity) {
-                        const Builder = additionalField.Builder;
-                        if (!Builder && !additionalField.value) {
-                            throw new Error("When using additional fields you need to provide a Builder or a value");
-                        }
-                        const child = Builder
-                            ? <Builder entity={entity} context={context}/>
-                            : <div className={"w-full"}>
-                                {additionalField.value?.({
-                                    entity,
-                                    context
-                                })?.toString()}
-                            </div>;
-
-                        return (
-                            <div key={`additional_${key}`} className={"w-full"}>
-                                <LabelWithIconAndTooltip
-                                    propertyKey={key}
-                                    icon={<NotesIcon size={"small"}/>}
-                                    title={additionalField.name}
-                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-                                <div
-                                    className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
-                                    <ErrorBoundary>
-                                        {child}
-                                    </ErrorBoundary>
-                                </div>
-                            </div>
-                        );
+                const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
+                if (additionalField && entity) {
+                    const Builder = additionalField.Builder;
+                    if (!Builder && !additionalField.value) {
+                        throw new Error("When using additional fields you need to provide a Builder or a value");
                     }
+                    const child = Builder
+                        ? <Builder entity={entity} context={context}/>
+                        : <div className={"w-full"}>
+                            {additionalField.value?.({
+                                entity,
+                                context
+                            })?.toString()}
+                        </div>;
+
+                    return (
+                        <div key={`additional_${key}`} className={"w-full"}>
+                            <LabelWithIconAndTooltip
+                                propertyKey={key}
+                                icon={<NotesIcon size={"small"}/>}
+                                title={additionalField.name}
+                                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                            <div
+                                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                                <ErrorBoundary>
+                                    {child}
+                                </ErrorBoundary>
+                            </div>
+                        </div>
+                    );
+                }
 
-                    console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
-                    return null;
-                }).filter(Boolean)}
-            </FormLayout>
-        )
-    ;
+                console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+                return null;
+            }).filter(Boolean)}
+        </FormLayout>
+    );
 
     const formRef = useRef<HTMLDivElement>(null);
 
@@ -567,12 +575,12 @@ export function EntityForm<M extends Record<string, any>>({
                     variant={"h4"}>
                     {title ?? collection.singularName ?? collection.name}
                 </Typography>
-                <Alert color={"base"} className={"w-full"} size={"small"}>
+                {showEntityPath && <Alert color={"base"} className={"w-full"} size={"small"}>
                     <code
                         className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
                         {entity?.path ?? path}/{entityId}
                     </code>
-                </Alert>
+                </Alert>}
             </div>
 
             {!collection.hideIdFromForm &&
@@ -608,7 +616,8 @@ export function EntityForm<M extends Record<string, any>>({
             pluginActions={pluginActions}
             forceActionsAtTheBottom={forceActionsAtTheBottom}
             EntityFormActionsComponent={EntityFormActionsComponent}
-            formContext={formContext}>
+            formContext={formContext}
+            showDefaultActions={showDefaultActions}>
             {formView}
         </FormLayoutInner>
     );
@@ -661,7 +670,8 @@ export function FormLayoutInner({
                                     className,
                                     forceActionsAtTheBottom,
                                     pluginActions,
-                                    EntityFormActionsComponent
+                                    EntityFormActionsComponent,
+                                    showDefaultActions
                                 }: {
     id?: string,
     formContext: FormContext,
@@ -670,6 +680,7 @@ export function FormLayoutInner({
     forceActionsAtTheBottom?: boolean,
     pluginActions?: React.ReactNode[],
     EntityFormActionsComponent: React.FC<EntityFormActionsProps>;
+    showDefaultActions?: boolean;
 }) {
 
     const formex = formContext.formex;
@@ -696,6 +707,7 @@ export function FormLayoutInner({
         status={status}
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
+        showDefaultActions={showDefaultActions}
     />;
 
     return (

package/src/form/EntityFormActions.tsx

@@ -15,6 +15,7 @@ export interface EntityFormActionsProps {
     status: "new" | "existing" | "copy";
     pluginActions: React.ReactNode[];
     openEntityMode: "side_panel" | "full_screen";
+    showDefaultActions?: boolean;
 }
 
 export function EntityFormActions({

package/src/internal/useBuildSideEntityController.tsx

@@ -104,12 +104,10 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const props = panelsFromUrl[i];
-                    // setTimeout(() => {
                     if (i === 0)
                         sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout));
                     else
                         sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout))
-                    // }, 1);
                 }
             }
             initialised.current = true;
@@ -260,6 +258,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     const resolvedPanelProps: EntitySidePanelProps<any> = {
         ...props,
         path: resolvedPath,
+        formProps: props.formProps
     };
 
     const entityViewWidth = getEntityViewWidth(props, smallLayout);

package/src/routes/FireCMSRoute.tsx

@@ -107,6 +107,19 @@ export function FireCMSRoute() {
 
 }
 
+function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined) {
+    if (isNew) {
+        return undefined;
+    } else if (lastCustomView) {
+        if (lastCustomView.type === "custom_view") {
+            return lastCustomView.view.key;
+        } else if (lastCustomView.type === "collection") {
+            return lastCustomView.id ?? lastCustomView.path;
+        }
+    }
+    return undefined;
+}
+
 function EntityFullScreenRoute({
                                    pathname,
                                    navigationEntries,
@@ -136,7 +149,7 @@ function EntityFullScreenRoute({
 
     const entityId = lastEntityEntry?.entityId;
 
-    const urlTab = isNew ? undefined : (lastCustomView && "id" in lastCustomView ? lastCustomView?.id : undefined) ?? lastCustomView?.path;
+    const urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
     const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
 
     const parentCollectionIds = navigation.getParentCollectionIds(navigationPath);

package/src/types/side_dialogs_controller.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { EntityFormProps } from "../form";
 
 /**
  * Controller to open the side dialog
@@ -78,4 +79,5 @@ export interface SideDialogPanelProps {
      * Use this prop to store additional data in the panel
      */
     additional?: any;
+
 }

package/src/types/side_entity_controller.tsx

@@ -2,6 +2,7 @@ import { EntityCollection } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { Entity } from "./entities";
 import { EntityOverrides } from "./entity_overrides";
+import { EntityFormProps } from "../form";
 
 /**
  * Props used to open a side dialog
@@ -66,6 +67,10 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      */
     closeOnSave?: boolean;
 
+    /**
+     * Override some form properties
+     */
+    formProps?: Partial<EntityFormProps<M>>;
 }
 
 /**

package/src/util/navigation_from_path.ts

@@ -27,6 +27,7 @@ export interface NavigationViewEntityCustomInternal<M extends Record<string, any
     type: "custom_view";
     path: string;
     fullPath: string;
+    entityId: string;
     view: EntityCustomView<M>;
 }
 
@@ -88,13 +89,11 @@ export function getNavigationEntriesFromPath(props: {
                         .filter(Boolean)
                         .find((entry) => entry!.key === newPath);
                     if (customView) {
-                        const path = currentFullPath && currentFullPath.length > 0
-                            ? (currentFullPath + "/" + customView.key)
-                            : customView.key;
                         result.push({
                             type: "custom_view",
-                            path,
-                            fullPath: fullPath + "/" + path,
+                            path: collectionPath,
+                            entityId: entityId,
+                            fullPath: fullPath + "/" + customView.key,
                             view: customView
                         });
                     } else if (collection.subcollections) {