@firecms/core 3.0.0-alpha.45 → 3.0.0-alpha.47

package/src/{hooks → internal}/useBuildNavigationController.tsx

@@ -5,7 +5,7 @@ import {
     AuthController,
     CMSView,
     CMSViewsBuilder,
-    DataSource, DataSourceDelegate,
+    DataSourceDelegate,
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
@@ -78,10 +78,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         const navigationEntries: TopNavigationEntry[] = [
             ...(collections ?? []).map(collection => (!collection.hideFromNavigation
                 ? {
-                    url: buildUrlCollectionPath(collection.alias ?? collection.path),
+                    url: buildUrlCollectionPath(collection.id ?? collection.path),
                     type: "collection",
                     name: collection.name.trim(),
-                    path: collection.alias ?? collection.path,
+                    path: collection.id ?? collection.path,
                     collection,
                     description: collection.description?.trim(),
                     group: collection.group?.trim()
@@ -134,14 +134,14 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         setNavigationLoading(false);
         setInitialised(true);
-    }, [baseCollections, authController.user, authController.initialLoading, dataSource, plugins, baseViews, computeTopNavigation]);
+    }, [baseCollections, authController.user, authController.initialLoading, plugins, baseViews, computeTopNavigation]);
 
     useEffect(() => {
         refreshNavigation();
     }, [refreshNavigation]);
 
     const getCollection = useCallback(<EC extends EntityCollection>(
-        pathOrAlias: string,
+        idOrPath: string,
         entityId?: string,
         includeUserOverride = false
     ): EC | undefined => {
@@ -149,9 +149,9 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         if (!collections)
             return undefined;
 
-        const baseCollection = getCollectionByPathOrAlias(removeInitialAndTrailingSlashes(pathOrAlias), collections);
+        const baseCollection = getCollectionByPathOrAlias(removeInitialAndTrailingSlashes(idOrPath), collections);
 
-        const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(pathOrAlias) : undefined;
+        const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
 
         const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride) : undefined;
 
@@ -186,7 +186,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         for (let i = 0; i < pathSegments.length; i++) {
             const pathSegment = pathSegments[i];
-            const collection: EntityCollection | undefined = currentCollections!.find(c => c.alias === pathSegment || c.path === pathSegment);
+            const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === pathSegment || c.path === pathSegment);
             if (!collection)
                 return undefined;
             currentCollections = collection.subcollections;
@@ -198,6 +198,25 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
     }, [collections]);
 
+    const getCollectionFromIds = useCallback(<EC extends EntityCollection>(ids: string[]): EC | undefined => {
+        let currentCollections = collections;
+        if (!currentCollections)
+            throw Error("Collections have not been initialised yet");
+
+        for (let i = 0; i < ids.length; i++) {
+            const id = ids[i];
+            const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
+            if (!collection)
+                return undefined;
+            currentCollections = collection.subcollections;
+            if (i === ids.length - 1)
+                return collection as EC;
+        }
+
+        return undefined;
+
+    }, [collections]);
+
     const isUrlCollectionPath = useCallback(
         (path: string): boolean => removeInitialAndTrailingSlashes(path + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"),
         [fullCollectionPath]);
@@ -238,6 +257,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         });
     }, [collections]);
 
+    const getParentCollectionIds = useCallback((path: string): string[] => {
+        return getAllParentCollectionsForPath(path).map(r => r.id);
+    }, [getAllParentCollectionsForPath])
+
     return useMemo(() => ({
         collections: collections ?? [],
         views: views ?? [],
@@ -249,6 +272,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         initialised,
         getCollection,
         getCollectionFromPaths,
+        getCollectionFromIds,
         isUrlCollectionPath,
         urlPathToDataPath,
         buildUrlCollectionPath,
@@ -258,7 +282,8 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         topLevelNavigation,
         baseLocation,
         refreshNavigation,
-        getParentReferencesFromPath: getAllParentCollectionsForPath
+        getParentReferencesFromPath: getAllParentCollectionsForPath,
+        getParentCollectionIds
     }), [baseCollectionPath, baseLocation, basePath, buildCMSUrlPath, buildUrlCollectionPath, buildUrlEditCollectionPath, collections, getAllParentCollectionsForPath, getCollection, getCollectionFromPaths, homeUrl, initialised, isUrlCollectionPath, navigationLoading, navigationLoadingError, refreshNavigation, resolveAliasesFrom, topLevelNavigation, urlPathToDataPath, views]);
 }
 

package/src/internal/useBuildSideEntityController.tsx

@@ -125,7 +125,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
                 if (previousEntry.type === "entity") {
                     const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
                     if (lastSidePanel)
-                        lastSidePanel.selectedSubPath = navigationEntry.collection.alias ?? navigationEntry.collection.path;
+                        lastSidePanel.selectedSubPath = navigationEntry.collection.id ?? navigationEntry.collection.path;
                 }
             }
         }

package/src/preview/PropertyPreview.tsx

@@ -17,7 +17,6 @@ import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
 import { Markdown } from "../ui";
 import { StringPropertyPreview } from "./property_previews/StringPropertyPreview";
-import { ArrayOfMapsPreview } from "./property_previews/ArrayOfMapsPreview";
 import { ArrayPropertyPreview } from "./property_previews/ArrayPropertyPreview";
 import { ArrayOfReferencesPreview } from "./property_previews/ArrayOfReferencesPreview";
 import { ArrayOfStorageComponentsPreview } from "./property_previews/ArrayOfStorageComponentsPreview";

package/src/types/collections.ts

@@ -18,6 +18,14 @@ import { ExportConfig } from "./export_import";
  */
 export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
 
+    /**
+     * You can set an alias that will be used internally instead of the `path`.
+     * The `alias` value will be used to determine the URL of the collection,
+     * while `path` will still be used in the datasource.
+     * Note that you can use this value in reference properties too.
+     */
+    id: string;
+
     /**
      * Name of the collection, typically plural.
      * E.g. `Products`, `Blog`
@@ -48,14 +56,6 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      */
     collectionGroup?: boolean;
 
-    /**
-     * You can set an alias that will be used internally instead of the `path`.
-     * The `alias` value will be used to determine the URL of the collection,
-     * while `path` will still be used in the datasource.
-     * Note that you can use this value in reference properties too.
-     */
-    alias?: string;
-
     /**
      * Icon key to use in this collection.
      * You can use any of the icons in the Material specs:
@@ -300,7 +300,7 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, Use
     /**
      * Array of the parent path segments like `['users']`
      */
-    parentPathSegments: string[];
+    parentCollectionIds: string[];
 
     /**
      * The collection configuration

package/src/types/firecms.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { User } from "./user";
 import { AuthController } from "./auth";
-import { DataSource, DataSourceDelegate } from "./datasource";
+import { DataSourceDelegate } from "./datasource";
 import { EntityCollection, EntityCustomView } from "./collections";
-import { CMSView, NavigationController } from "./navigation";
+import { CMSView } from "./navigation";
 import { FireCMSContext } from "./firecms_context";
 import { PropertyConfig } from "./property_config";
 import { Locale } from "./locales";
@@ -67,6 +67,20 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
         loading: boolean;
     }) => React.ReactNode;
 
+    /**
+     * List of the mapped collections in the CMS.
+     * Each entry relates to a collection in the root database.
+     * Each of the navigation entries in this field
+     * generates an entry in the main menu.
+     */
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
+
+    /**
+     * Custom additional views created by the developer, added to the main
+     * navigation
+     */
+    views?: CMSView[] | CMSViewsBuilder;
+
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in
@@ -98,7 +112,7 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     /**
      * Connector to your database
      */
-    dataSource: DataSource;
+    dataSourceDelegate: DataSourceDelegate;
 
     /**
      * Connector to your file upload/fetch implementation
@@ -111,10 +125,18 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     authController: AuthController<UserType>;
 
     /**
-     * Controller in charge of managing the collections and views of the CMS.
-     * @see {@link useBuildNavigationController}
+     * Path under the navigation routes of the CMS will be created. Defaults to `/`.
+     * Internally FireCMS uses `react-router` to create the routes, the base path is attached to the
+     * `BrowserRouter` component. If you are using FireCMS in a subpath of your website, you can use
+     * this prop to specify the base path.
      */
-    navigationController: NavigationController;
+    basePath?: string;
+
+    /**
+     * Path under the collection routes of the CMS will be created.
+     * Defaults to `/c`.
+     */
+    baseCollectionPath?: string;
 
     /**
      * Use this controller to access the configuration that is stored locally,
@@ -150,6 +172,4 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
 
     }
 
-
-
 };

package/src/types/index.ts

@@ -24,3 +24,4 @@ export * from "./analytics";
 export * from "./firecms";
 export * from "./appcheck";
 export * from "./export_import";
+export * from "./modify_collections";

package/src/types/modify_collections.tsx

@@ -0,0 +1,6 @@
+import { EntityCollection } from "./collections";
+
+export type ModifyCollectionProps = {
+    collection: EntityCollection,
+    parentPaths: string[],
+};

package/src/types/navigation.ts

@@ -52,6 +52,11 @@ export type NavigationController = {
     getCollection: <EC extends EntityCollection = EntityCollection<any>>(pathOrAlias: string,
                                                                          entityId?: string,
                                                                          includeUserOverride?: boolean) => EC | undefined;
+    /**
+     * Get the collection configuration from its parent path segments.
+     */
+    getCollectionFromIds: <EC extends EntityCollection = EntityCollection<any>>(ids: string[]) => EC | undefined;
+
     /**
      * Get the collection configuration from its parent path segments.
      */
@@ -128,6 +133,12 @@ export type NavigationController = {
      * @param path
      */
     getParentReferencesFromPath: (path: string) => EntityReference[];
+
+    /**
+     * Retrieve all the related parent collection ids for a given path
+     * @param path
+     */
+    getParentCollectionIds: (path: string) => string[];
 }
 
 /**

package/src/types/plugins.tsx

@@ -116,7 +116,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             property: ResolvedProperty,
             propertyKey: string,
             fullPath: string,
-            parentPathSegments: string[],
+            parentCollectionIds: string[],
             onHover: boolean,
             collection: EC;
         }>;
@@ -127,7 +127,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
          */
         AddColumnComponent?: React.ComponentType<{
             fullPath: string,
-            parentPathSegments: string[],
+            parentCollectionIds: string[],
             collection: EC;
         }>;
     }

package/src/ui/ExpandablePanel.tsx

@@ -10,8 +10,9 @@ export function ExpandablePanel({
                                     title,
                                     children,
                                     invisible = false,
-                                    initiallyExpanded: initiallyOpen = true,
+                                    expanded,
                                     onExpandedChange,
+                                    initiallyExpanded = true,
                                     titleClassName,
                                     asField,
                                     className
@@ -19,6 +20,7 @@ export function ExpandablePanel({
     title: React.ReactNode,
     invisible?: boolean,
     initiallyExpanded?: boolean;
+    expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void,
     titleClassName?: string,
     asField?: boolean,
@@ -54,7 +56,7 @@ export function ExpandablePanel({
   }
 }`);
 
-    const [open, setOpen] = useState(initiallyOpen);
+    const [open, setOpen] = useState(expanded !== undefined ? expanded : initiallyExpanded);
     const [allowOverflow, setAllowOverflow] = useState(open);
 
     useEffect(() => {
@@ -67,6 +69,11 @@ export function ExpandablePanel({
         }
     }, [open]);
 
+    useEffect(() => {
+        if (expanded !== undefined)
+            setOpen(expanded);
+    }, [expanded]);
+
     return (<>
             <Collapsible.Root
                 className={cn(

package/src/util/builders.ts

@@ -4,7 +4,8 @@ import {
     BooleanProperty,
     CMSType,
     DateProperty,
-    EntityCallbacks, EntityCollection,
+    EntityCallbacks,
+    EntityCollection,
     EnumValueConfig,
     EnumValues,
     GeopointProperty,

package/src/util/join_collections.ts

@@ -1,43 +1,67 @@
-import { EntityCollection, MapProperty, PropertiesOrBuilders, Property, PropertyOrBuilder } from "../types";
-import { mergeDeep } from "../util/objects";
-import { sortProperties } from "../util/collections";
-import { isPropertyBuilder } from "../util/entities";
+import {
+    EntityCollection,
+    MapProperty,
+    ModifyCollectionProps,
+    PropertiesOrBuilders,
+    Property,
+    PropertyOrBuilder
+} from "../types";
+import { mergeDeep } from "./objects";
+import { sortProperties } from "./collections";
+import { isPropertyBuilder } from "./entities";
 
 /**
  *
- * @param storedCollections
- * @param codedCollections
  */
-export function joinCollectionLists(storedCollections: EntityCollection[], codedCollections: EntityCollection[] | undefined): EntityCollection[] {
+export function joinCollectionLists(targetCollections: EntityCollection[],
+                                    sourceCollections: EntityCollection[] | undefined,
+                                    parentPaths: string[] = [],
+                                    modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | undefined): EntityCollection[] {
 
     // merge collections that are in both lists
-    const updatedCollections = (codedCollections ?? [])
+    const updatedCollections = (sourceCollections ?? [])
         .map((codedCollection) => {
-            const storedCollection = storedCollections?.find((collection) => {
-                return collection.path === codedCollection.path || (collection.alias && codedCollection.alias && collection.alias === codedCollection.alias);
+            const storedCollection = targetCollections?.find((collection) => {
+                return collection.id === codedCollection.id;
+                // return collection.path === codedCollection.path || collection.id && codedCollection.id;
             });
             if (!storedCollection) {
                 return codedCollection;
             } else {
-                return mergeCollection(storedCollection, codedCollection);
+                return mergeCollection(storedCollection, codedCollection, parentPaths, modifyCollection);
             }
         });
 
     // fetched collections that are not in the base collections
-    const resultStoredCollections = storedCollections
-        .filter((col) => !updatedCollections.map(c => c.path).includes(col.path) || !updatedCollections.map(c => c.alias).includes(col.alias));
+    const resultStoredCollections = targetCollections
+        .filter((col) => !updatedCollections.map(c => c.id).includes(col.id))
+        .map((col) => {
+            if (modifyCollection) {
+                const modified = modifyCollection({ collection: col, parentPaths });
+                return modified ?? col;
+            } else {
+                return col;
+            }
+        });
 
     return [...updatedCollections, ...resultStoredCollections];
 }
 
 /**
  *
- * @param target
- * @param source
  */
-export function mergeCollection(target: EntityCollection, source: EntityCollection): EntityCollection {
+export function mergeCollection(target: EntityCollection,
+                                source: EntityCollection,
+                                parentPaths: string[] = [],
+                                modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | undefined
+): EntityCollection {
 
-    const subcollectionsMerged = joinCollectionLists(target?.subcollections ?? [], source?.subcollections ?? []);
+    const subcollectionsMerged = joinCollectionLists(
+        target?.subcollections ?? [],
+        source?.subcollections ?? [],
+        [...parentPaths, target.path],
+        modifyCollection
+    );
 
     const propertiesMerged: PropertiesOrBuilders = { ...target.properties } as PropertiesOrBuilders;
     Object.keys(source.properties).forEach((key) => {
@@ -51,16 +75,22 @@ export function mergeCollection(target: EntityCollection, source: EntityCollecti
     const mergedCollection = mergeDeep(target, source);
     const targetPropertiesOrder = getCollectionKeys(target);
     const sourcePropertiesOrder = getCollectionKeys(source);
-    const mergedPropertiesOrder = [...new Set([...targetPropertiesOrder, ...sourcePropertiesOrder])];
+    const mergedPropertiesOrder = [...new Set([...sourcePropertiesOrder, ...targetPropertiesOrder])];
     const mergedEntityViews = [...new Set([...(target.entityViews ?? []), ...(source.entityViews ?? [])])];
 
-    return {
+    let resultCollection: EntityCollection = {
         ...mergedCollection,
         subcollections: subcollectionsMerged,
         properties: sortProperties(propertiesMerged, mergedPropertiesOrder),
         propertiesOrder: mergedPropertiesOrder,
         entityViews: mergedEntityViews
+    };
+    if (modifyCollection) {
+        const modifiedCollection = modifyCollection({ collection: resultCollection, parentPaths });
+        if (modifiedCollection)
+            resultCollection = modifiedCollection;
     }
+    return resultCollection
 }
 
 function mergePropertyOrBuilder(target: Property, source: PropertyOrBuilder): PropertyOrBuilder {

package/src/util/navigation_from_path.ts

@@ -46,10 +46,10 @@ export function getNavigationEntriesFromPathInternal(props: {
     for (let i = 0; i < subpathCombinations.length; i++) {
         const subpathCombination = subpathCombinations[i];
 
-        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.alias === subpathCombination || entry.path === subpathCombination);
+        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
 
         if (collection) {
-            const pathOrAlias = collection.alias ?? collection.path;
+            const pathOrAlias = collection.id ?? collection.path;
             const collectionPath = currentFullPath && currentFullPath.length > 0
                 ? (currentFullPath + "/" + pathOrAlias)
                 : pathOrAlias;

package/src/util/navigation_utils.ts

@@ -54,7 +54,7 @@ export function resolveCollectionPathAliases(path: string, allCollections: Entit
         throw Error(`Collection paths must have an odd number of segments: ${path}`);
     }
 
-    const aliasedCollection = allCollections.find((col) => col.alias === subpaths[0]);
+    const aliasedCollection = allCollections.find((col) => col.id === subpaths[0]);
     let resolvedAliased;
     if (aliasedCollection) {
         resolvedAliased = aliasedCollection.path;
@@ -90,8 +90,8 @@ export function getCollectionByPathOrAlias(pathOrAlias: string, collections: Ent
     for (let i = 0; i < subpathCombinations.length; i++) {
         const subpathCombination = subpathCombinations[i];
         const navigationEntry = collections && collections
-            .sort((a, b) => (a.alias ?? "").localeCompare(b.alias ?? ""))
-            .find((entry) => entry.alias === subpathCombination || entry.path === subpathCombination);
+            .sort((a, b) => (a.id ?? "").localeCompare(b.id ?? ""))
+            .find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
 
         if (navigationEntry) {
 

package/src/util/parent_references_from_path.ts

@@ -20,10 +20,10 @@ export function getParentReferencesFromPath(props: {
     for (let i = 0; i < subpathCombinations.length; i++) {
         const subpathCombination = subpathCombinations[i];
 
-        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.alias === subpathCombination || entry.path === subpathCombination);
+        const collection: EntityCollection<any> | undefined = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
 
         if (collection) {
-            const pathOrAlias = collection.alias ?? collection.path;
+            const pathOrAlias = collection.id ?? collection.path;
             const collectionPath = currentFullPath && currentFullPath.length > 0
                 ? (currentFullPath + "/" + pathOrAlias)
                 : pathOrAlias;

package/src/util/property_utils.tsx

@@ -1,12 +1,6 @@
 import React from "react";
 
-import {
-    EntityCollection,
-    PropertiesOrBuilders,
-    PropertyConfig,
-    PropertyOrBuilder,
-    ResolvedProperty
-} from "../types";
+import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperty } from "../types";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
 import { CircleIcon, FunctionsIcon } from "../icons";