@firecms/core 3.0.0-beta.12 → 3.0.0-beta.14

package/src/routes/FireCMSRoute.tsx

@@ -13,6 +13,7 @@ import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { toArray } from "../util/arrays";
 import { EntityCollectionView, NotFoundPage } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+import { EntityCollection } from "../types";
 
 export function FireCMSRoute() {
 
@@ -68,7 +69,10 @@ export function FireCMSRoute() {
     }
 
     if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
-        const collection = navigation.getCollection(navigationEntries[0].path);
+        let collection: EntityCollection<any> | undefined;
+        collection = navigation.getCollectionById(navigationEntries[0].id);
+        if (!collection)
+            collection = navigation.getCollection(navigationEntries[0].path);
         if (!collection)
             return null;
         return <EntityCollectionView
@@ -84,11 +88,16 @@ export function FireCMSRoute() {
     if (isSidePanel) {
         const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
         if (lastCollectionEntry) {
-            const collection = navigation.getCollection(lastCollectionEntry.path);
+            let collection: EntityCollection<any> | undefined;
+            const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
+            collection = navigation.getCollectionById(firstEntry.id);
+            if (!collection)
+                collection = navigation.getCollection(firstEntry.path);
             if (!collection)
                 return null;
             return <EntityCollectionView
                 key={`collection_view_${collection.id ?? collection.path}`}
+                fullIdPath={collection.id}
                 isSubCollection={false}
                 parentCollectionIds={[]}
                 fullPath={collection.id}
@@ -175,7 +184,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");
@@ -189,12 +198,14 @@ function EntityFullScreenRoute({
     }
 
     const collection = isNew ? lastCollectionEntry!.collection : lastEntityEntry!.parentCollection;
-    const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry!.path : lastEntityEntry!.path);
+    const fullIdPath = isNew ? lastCollectionEntry!.path : lastEntityEntry!.path;
+    const collectionPath = navigation.resolveIdsFrom(fullIdPath);
 
     return <>
         <EntityEditView
             key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
             entityId={isNew ? undefined : entityId}
+            fullIdPath={fullIdPath}
             collection={collection}
             layout={"full_screen"}
             path={collectionPath}

package/src/types/collections.ts

@@ -112,7 +112,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * `hidden` in the property definition, will be ignored.
      * `propertiesOrder` has precedence over `hidden`.
      *     - For properties use the property key.
-     *     - For additional columns use the column id.
+     *     - For additional fields use the field key.
      *     - If you have subcollections, you get a column for each subcollection,
      *       with the path (or alias) as the subcollection, prefixed with
      *       `subcollection:`. e.g. `subcollection:orders`.
@@ -127,7 +127,8 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
-     * collection are loaded.
+     * collection are loaded. This means that when reaching the end of the
+     * collection, the CMS will load more entities.
      * You can specify a number to specify the pagination size (50 by default)
      * Defaults to `true`
      */
@@ -215,6 +216,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Force a filter in this view. If applied, the rest of the filters will
      * be disabled. Filters applied with this prop cannot be changed.
      * e.g. `forceFilter: { age: [">=", 18] }`
+     * e.g. `forceFilter: { related_user: ["==", new EntityReference("sdc43dsw2", "users")] }`
      */
     forceFilter?: FilterValues<Extract<keyof M, string>>;
 
@@ -222,6 +224,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Initial filters applied to the collection this collection is related to.
      * Defaults to none. Filters applied with this prop can be changed.
      * e.g. `initialFilter: { age: [">=", 18] }`
+     * e.g. `initialFilter: { related_user: ["==", new EntityReference("sdc43dsw2", "users")] }`
      */
     initialFilter?: FilterValues<Extract<keyof M, string>>; // setting FilterValues<M> can break defining collections by code
 
@@ -330,6 +333,17 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Defaults to false.
      */
     alwaysApplyDefaultValues?: boolean;
+
+    /**
+     * If set to true, a tab including the JSON representation of the entity will be included.
+     */
+    includeJsonView?: boolean;
+
+    /**
+     * If set to true, changes to the entity will be saved in a subcollection.
+     * This prop has no effect if the history plugin is not enabled
+     */
+    history?: boolean;
 }
 
 /**
@@ -512,6 +526,11 @@ export type EntityCustomView<M extends Record<string, any> = any> =
          */
         name: string;
 
+        /**
+         * Render this custom view in the tab of the entity view, instead of the name
+         */
+        tabComponent?: React.ReactNode;
+
         /**
          * If set to true, the actions of the entity (save, discard,delete) will be
          * included in the view. By default the actions are located in the right or bottom,
@@ -524,6 +543,11 @@ export type EntityCustomView<M extends Record<string, any> = any> =
          * Builder for rendering the custom view
          */
         Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+
+        /**
+         * Position of this tab in the entity view. Defaults to `end`.
+         */
+        position?: "start" | "end";
     };
 
 /**
@@ -554,6 +578,11 @@ export interface EntityCustomViewParams<M extends Record<string, any> = any> {
      * Use the form context to access the form state and methods
      */
     formContext: FormContext;
+
+    /**
+     * If this is a subcollection, this is the path of the parent collections
+     */
+    parentCollectionIds?: string[];
 }
 
 export type InferCollectionType<S extends EntityCollection> = S extends EntityCollection<infer M> ? M : never;

package/src/types/fields.tsx

@@ -171,9 +171,13 @@ 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>;
+
+    disabled: boolean;
 }
 
 /**

package/src/types/firecms.tsx

@@ -47,7 +47,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @group Models
  */
-export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
+export type FireCMSProps<USER extends User> = {
 
     /**
      * Use this function to return the components you want to render under
@@ -92,7 +92,6 @@ export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
      *
      * You can also define an entity view from the UI.
      */
-
     entityViews?: EntityCustomView[];
 
     /**
@@ -129,7 +128,8 @@ export type FireCMSProps<USER extends User, EC extends EntityCollection> = {
 
     /**
      * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
+     * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
      */
     plugins?: FireCMSPlugin<any, any, any>[];
 

package/src/types/navigation.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { EntityCollection } from "./collections";
 import { EntityReference } from "./entities";
+import { FireCMSPlugin } from "./plugins";
 
 /**
  * Controller that includes the resolved navigation and utility methods and
@@ -59,6 +60,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     getCollection: (pathOrId: string, includeUserOverride?: boolean) => EC | undefined;
 
+    /**
+     * Get the top level collection configuration for a given id
+     */
+    getCollectionById: (id: string) => EC | undefined;
+
     /**
      * Get the collection configuration from its parent ids.
      */
@@ -147,6 +153,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     navigate: (to: string, options?: NavigateOptions) => void;
 
+    /**
+     * Plugin system allowing to extend the CMS functionality.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+
 }
 
 export interface NavigateOptions {

package/src/types/plugins.tsx

@@ -158,6 +158,22 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     }
 
+    collection?: {
+
+        /**
+         * Use this method to modify a single collection before it is rendered.
+         * @param collection
+         */
+        modifyCollection?: (collection: EntityCollection) => EntityCollection;
+
+        /**
+         * Use this method to modify, add or remove collections.
+         * @param collections
+         */
+        injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+
+    }
+
 }
 
 /**
@@ -192,6 +208,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     path: string;
     status: EntityStatus;
     collection: EC;
+    disabled: boolean;
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;

package/src/types/properties.ts

@@ -5,6 +5,7 @@ import { EntityReference, EntityValues, GeoPoint, Vector } from "./entities";
 import { ResolvedArrayProperty, ResolvedStringProperty } from "./resolved_entities";
 import { FilterValues } from "./collections";
 import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
+import { AuthController } from "./auth";
 
 /**
  * @group Entity properties
@@ -270,6 +271,11 @@ export type PropertyBuilderProps<M extends Record<string, any> = any> =
          * Entity ID
          */
         entityId?: string;
+
+        /**
+         * Controller to manage authentication
+         */
+        authController: AuthController;
     };
 
 /**
@@ -285,7 +291,8 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
          propertyValue,
          index,
          path,
-         entityId
+         entityId,
+         authController
      }: PropertyBuilderProps<M>) => Property<T> | null;
 
 /**
@@ -481,6 +488,18 @@ export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSTyp
      */
     minimalistView?: boolean;
 
+    /**
+     * Can the elements in this array be reordered. Defaults to `true`.
+     * This prop has no effect if `disabled` is set to true.
+     */
+    sortable?: boolean;
+
+    /**
+     * Can the elements in this array be added. Defaults to `true`
+     * This prop has no effect if `disabled` is set to true.
+     */
+    canAddElements?: boolean;
+
 }
 
 /**
@@ -796,6 +815,13 @@ export type StorageConfig = {
      */
     maxSize?: number,
 
+    /**
+     * Use this callback to process the file before uploading it to the storage.
+     * If nothing is returned, the file is uploaded as it is.
+     * @param file
+     */
+    processFile?: (file: File) => Promise<File> | undefined;
+
     /**
      * Postprocess the saved value (storage path or URL)
      * after it has been resolved.

package/src/types/side_entity_controller.tsx

@@ -71,6 +71,11 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Override some form properties
      */
     formProps?: Partial<EntityFormProps<M>>;
+
+    /**
+     * Allow the user to open the entity fullscreen
+     */
+    allowFullScreen?: boolean;
 }
 
 /**

package/src/util/callbacks.ts

@@ -0,0 +1,119 @@
+import { EntityCallbacks } from "../types";
+
+export const mergeCallbacks = (
+    baseCallbacks: EntityCallbacks = {},
+    pluginCallbacks: EntityCallbacks = {}
+): EntityCallbacks | undefined => {
+
+    if (!baseCallbacks && !pluginCallbacks) {
+        return undefined;
+    }
+
+    const mergedCallbacks: EntityCallbacks = {};
+
+    // Handle onFetch - returns Entity<M> or Promise<Entity<M>>
+    if (baseCallbacks.onFetch || pluginCallbacks.onFetch) {
+        mergedCallbacks.onFetch = async (props) => {
+            let entity = props.entity;
+            if (baseCallbacks.onFetch) {
+                entity = await Promise.resolve(baseCallbacks.onFetch(props));
+            }
+            if (pluginCallbacks.onFetch) {
+                entity = await Promise.resolve(pluginCallbacks.onFetch({
+                    ...props,
+                    entity
+                }));
+            }
+            return entity;
+        };
+    }
+
+    // Handle onSaveSuccess - returns void or Promise<void>
+    if (baseCallbacks.onSaveSuccess || pluginCallbacks.onSaveSuccess) {
+        mergedCallbacks.onSaveSuccess = async (props) => {
+            if (baseCallbacks.onSaveSuccess) {
+                await Promise.resolve(baseCallbacks.onSaveSuccess(props));
+            }
+            if (pluginCallbacks.onSaveSuccess) {
+                await Promise.resolve(pluginCallbacks.onSaveSuccess(props));
+            }
+        };
+    }
+
+    // Handle onSaveFailure - returns void or Promise<void>
+    if (baseCallbacks.onSaveFailure || pluginCallbacks.onSaveFailure) {
+        mergedCallbacks.onSaveFailure = async (props) => {
+            if (baseCallbacks.onSaveFailure) {
+                await Promise.resolve(baseCallbacks.onSaveFailure(props));
+            }
+            if (pluginCallbacks.onSaveFailure) {
+                await Promise.resolve(pluginCallbacks.onSaveFailure(props));
+            }
+        };
+    }
+
+    // Handle onPreSave - returns Partial<EntityValues<M>> or Promise<Partial<EntityValues<M>>>
+    if (baseCallbacks.onPreSave || pluginCallbacks.onPreSave) {
+        mergedCallbacks.onPreSave = async (props) => {
+            let values = { ...props.values };
+            if (baseCallbacks.onPreSave) {
+                const baseValues = await Promise.resolve(baseCallbacks.onPreSave(props));
+                values = { ...values, ...baseValues };
+            }
+            if (pluginCallbacks.onPreSave) {
+                const pluginValues = await Promise.resolve(pluginCallbacks.onPreSave({
+                    ...props,
+                    values
+                }));
+                values = { ...values, ...pluginValues };
+            }
+            return values;
+        };
+    }
+
+    // Handle onPreDelete - returns void
+    if (baseCallbacks.onPreDelete || pluginCallbacks.onPreDelete) {
+        mergedCallbacks.onPreDelete = (props) => {
+            if (baseCallbacks.onPreDelete) {
+                baseCallbacks.onPreDelete(props);
+            }
+            if (pluginCallbacks.onPreDelete) {
+                pluginCallbacks.onPreDelete(props);
+            }
+        };
+    }
+
+    // Handle onDelete - returns void
+    if (baseCallbacks.onDelete || pluginCallbacks.onDelete) {
+        mergedCallbacks.onDelete = (props) => {
+            if (baseCallbacks.onDelete) {
+                baseCallbacks.onDelete(props);
+            }
+            if (pluginCallbacks.onDelete) {
+                pluginCallbacks.onDelete(props);
+            }
+        };
+    }
+
+    // Handle onIdUpdate - returns string or Promise<string>
+    if (baseCallbacks.onIdUpdate || pluginCallbacks.onIdUpdate) {
+        mergedCallbacks.onIdUpdate = async (props) => {
+            let id = props.entityId || "";
+
+            if (baseCallbacks.onIdUpdate) {
+                id = await Promise.resolve(baseCallbacks.onIdUpdate(props));
+            }
+
+            if (pluginCallbacks.onIdUpdate) {
+                id = await Promise.resolve(pluginCallbacks.onIdUpdate({
+                    ...props,
+                    entityId: id
+                }));
+            }
+
+            return id;
+        };
+    }
+
+    return Object.keys(mergedCallbacks).length > 0 ? mergedCallbacks : undefined;
+};

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/index.ts

@@ -23,3 +23,4 @@ export * from "./join_collections";
 export * from "./builders";
 export * from "./useTraceUpdate";
 export * from "./storage";
+export * from "./callbacks";

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/navigation_from_path.ts

@@ -51,7 +51,11 @@ export function getNavigationEntriesFromPath(props: {
     for (let i = 0; i < subpathCombinations.length; i++) {
         const subpathCombination = subpathCombinations[i];
 
-        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
+        let collection: EntityCollection<any> | undefined;
+        collection = collections && collections.find((entry) => entry.id === subpathCombination);
+        if (!collection) {
+            collection = collections && collections.find((entry) => entry.path === subpathCombination);
+        }
 
         if (collection) {
             const pathOrAlias = collection.id ?? collection.path;