@firecms/core 3.0.0-alpha.46 → 3.0.0-alpha.48

package/dist/internal/EntityView.d.ts

@@ -5,6 +5,7 @@ export interface EntityViewProps<M extends Record<string, any>> {
     entityId?: string;
     copy?: boolean;
     selectedSubPath?: string;
+    parentCollectionIds: string[];
     formWidth?: number | string;
     onValuesAreModified: (modified: boolean) => void;
     onUpdate?: (params: {
@@ -18,4 +19,4 @@ export interface EntityViewProps<M extends Record<string, any>> {
  * You probably don't want to use this view directly since it is bound to the
  * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
  */
-export declare function EntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, onValuesAreModified, formWidth, onUpdate, onClose }: EntityViewProps<M>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: EntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/types/collections.d.ts

@@ -16,6 +16,13 @@ import { ExportConfig } from "./export_import";
  * @group Models
  */
 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`
@@ -41,13 +48,6 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * property to `true` to indicate that this collection is a collection group.
      */
     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:
@@ -262,7 +262,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/dist/types/index.d.ts

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

package/dist/types/modify_collections.d.ts

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

package/dist/types/navigation.d.ts

@@ -42,6 +42,10 @@ export type NavigationController = {
      * The collection is resolved from the given path or alias.
      */
     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.
      */
@@ -106,6 +110,11 @@ 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[];
 };
 /**
  * Custom additional views created by the developer, added to the main

package/dist/types/plugins.d.ts

@@ -95,7 +95,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;
         }>;
@@ -105,7 +105,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
          */
         AddColumnComponent?: React.ComponentType<{
             fullPath: string;
-            parentPathSegments: string[];
+            parentCollectionIds: string[];
             collection: EC;
         }>;
     };

package/dist/ui/ExpandablePanel.d.ts

@@ -1,8 +1,9 @@
 import React, { PropsWithChildren } from "react";
-export declare function ExpandablePanel({ title, children, invisible, initiallyExpanded: initiallyOpen, onExpandedChange, titleClassName, asField, className }: PropsWithChildren<{
+export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className }: PropsWithChildren<{
     title: React.ReactNode;
     invisible?: boolean;
     initiallyExpanded?: boolean;
+    expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
     titleClassName?: string;
     asField?: boolean;

package/dist/util/join_collections.d.ts

@@ -1,13 +1,9 @@
-import { EntityCollection } from "../types";
+import { EntityCollection, ModifyCollectionProps } from "../types";
 /**
  *
- * @param storedCollections
- * @param codedCollections
  */
-export declare function joinCollectionLists(storedCollections: EntityCollection[], codedCollections: EntityCollection[] | undefined): EntityCollection[];
+export declare function joinCollectionLists(targetCollections: EntityCollection[], sourceCollections: EntityCollection[] | undefined, parentPaths?: string[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void): EntityCollection[];
 /**
  *
- * @param target
- * @param source
  */
-export declare function mergeCollection(target: EntityCollection, source: EntityCollection): EntityCollection;
+export declare function mergeCollection(target: EntityCollection, source: EntityCollection, parentPaths?: string[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void): EntityCollection;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@firecms/core",
-    "version": "3.0.0-alpha.46",
+    "version": "3.0.0-alpha.48",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -133,7 +133,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "53ef13adab3db13baeea2ad7953e37cf3552fd62",
+    "gitHead": "04d4690b0b71a4dd56a01a77e4c639d6af79be86",
     "publishConfig": {
         "access": "public"
     }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -142,6 +142,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
         const onRowClick = useCallback(({ rowData }: {
             rowData: Entity<M>
         }) => {
+            console.debug("EntityCollectionTable click");
             if (inlineEditing)
                 return;
             return onEntityClick && onEntityClick(rowData);

package/src/components/EntityCollectionTable/internal/EntityCollectionRowActions.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, Tooltip, Typography, Skeleton } from "../../../ui";
+import { Checkbox, cn, IconButton, Menu, MenuItem, Skeleton, Tooltip, Typography } from "../../../ui";
 import { useFireCMSContext, useLargeLayout } from "../../../hooks";
 import { MoreVertIcon } from "../../../icons";
 

package/src/components/EntityCollectionTable/internal/common.tsx

@@ -66,5 +66,5 @@ export function getTablePropertyColumnWidth(property: ResolvedProperty): number
 }
 
 export function getSubcollectionColumnId(collection: EntityCollection) {
-    return `subcollection:${collection.alias ?? collection.path}`;
+    return `subcollection:${collection.id ?? collection.path}`;
 }

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -69,7 +69,7 @@ const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
  */
 export type EntityCollectionViewProps<M extends Record<string, any>> = {
     fullPath: string;
-    parentPathSegments?: string[];
+    parentCollectionIds?: string[];
     isSubCollection?: boolean;
     className?: string;
 } & EntityCollection<M>;
@@ -101,7 +101,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
                                                                      fullPath,
-                                                                     parentPathSegments,
+                                                                     parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
                                                                      ...collectionProp
@@ -238,7 +238,7 @@ export const EntityCollectionView = React.memo(
 
         let AddColumnComponent: React.ComponentType<{
             fullPath: string,
-            parentPathSegments: string[],
+            parentCollectionIds: string[],
             collection: EntityCollection;
         }> | undefined
 
@@ -367,7 +367,7 @@ export const EntityCollectionView = React.memo(
                                     sideEntityController.open({
                                         path: fullPath,
                                         entityId: entity.id,
-                                        selectedSubPath: subcollection.alias ?? subcollection.path,
+                                        selectedSubPath: subcollection.id ?? subcollection.path,
                                         collection,
                                         updateUrl: true
                                     });
@@ -529,7 +529,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
-                            parentPathSegments={parentPathSegments ?? []}/>;
+                            parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
         }
@@ -538,7 +538,7 @@ export const EntityCollectionView = React.memo(
             ? function () {
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
-                                               parentPathSegments={parentPathSegments ?? []}
+                                               parentCollectionIds={parentCollectionIds ?? []}
                                                collection={collection}/>;
                 return null;
             }
@@ -565,7 +565,7 @@ export const EntityCollectionView = React.memo(
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
                     actions={<EntityCollectionViewActions
-                        parentPathSegments={parentPathSegments ?? []}
+                        parentCollectionIds={parentCollectionIds ?? []}
                         collection={collection}
                         tableController={tableController}
                         onMultipleDeleteClick={onMultipleDeleteClick}

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -12,7 +12,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
     path: string;
     relativePath: string;
-    parentPathSegments: string[];
+    parentCollectionIds: string[];
     selectionEnabled: boolean;
     onNewClick: () => void;
     onMultipleDeleteClick: () => void;
@@ -24,7 +24,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
 export function EntityCollectionViewActions<M extends Record<string, any>>({
                                                                                collection,
                                                                                relativePath,
-                                                                               parentPathSegments,
+                                                                               parentCollectionIds,
                                                                                onNewClick,
                                                                                onMultipleDeleteClick,
                                                                                selectionEnabled,
@@ -95,7 +95,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
     const actionProps: CollectionActionsProps = {
         path,
         relativePath,
-        parentPathSegments,
+        parentCollectionIds,
         collection,
         selectionController,
         context,

package/src/components/ReferenceSelectionInner.tsx

@@ -19,6 +19,7 @@ import { useEntityCollectionTableController } from "./EntityCollectionTable/useE
 import { AddIcon } from "../icons";
 import { useColumnIds } from "./EntityCollectionView/useColumnsIds";
 import { useSideDialogContext } from "../core";
+import { useTraceUpdate } from "../util/useTraceUpdate";
 
 /**
  * @group Components
@@ -99,6 +100,8 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         maxSelection
     }: ReferenceSelectionInnerProps<M>) {
 
+    console.log("ReferenceSelectionInner");
+
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
@@ -142,7 +145,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         };
     }, [dataSource, fullPath, selectedEntityIdsProp, collection, selectionController.setSelectedEntities]);
 
-    const onClear = useCallback(() => {
+    const onClear = () => {
         context.onAnalyticsEvent?.("reference_selection_clear", {
             path: fullPath
         });
@@ -152,9 +155,10 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         } else if (onMultipleEntitiesSelected) {
             onMultipleEntitiesSelected([]);
         }
-    }, [multiselect, onMultipleEntitiesSelected, onSingleEntitySelected]);
+    };
 
-    const toggleEntitySelection = useCallback((entity: Entity<any>) => {
+    const toggleEntitySelection = (entity: Entity<any>) => {
+        console.debug("ReferenceSelectionInner toggleEntitySelection", entity);
         let newValue;
         const selectedEntities = selectionController.selectedEntities;
 
@@ -176,9 +180,10 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             if (onMultipleEntitiesSelected)
                 onMultipleEntitiesSelected(newValue);
         }
-    }, [onMultipleEntitiesSelected, selectionController.selectedEntities]);
+    };
 
-    const onEntityClick = useCallback((entity: Entity<any>) => {
+    const onEntityClick = (entity: Entity<any>) => {
+        console.debug("ReferenceSelectionInner onEntityClick", entity);
 
         if (!multiselect && onSingleEntitySelected) {
             context.onAnalyticsEvent?.("reference_selected_single", {
@@ -190,32 +195,31 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
         } else {
             toggleEntitySelection(entity);
         }
-    }, [sideDialogContext, multiselect, onSingleEntitySelected, toggleEntitySelection]);
+    };
 
     // create a new entity from within the reference dialog
-    const onNewClick = useCallback(() => {
-            context.onAnalyticsEvent?.("reference_selection_new_entity", {
-                path: fullPath
-            });
-            sideEntityController.open({
-                path: fullPath,
-                collection,
-                updateUrl: true,
-                onUpdate: ({ entity }) => {
-                    setEntitiesDisplayedFirst([entity, ...entitiesDisplayedFirst]);
-                    onEntityClick(entity);
-                },
-                closeOnSave: true
-            });
-        },
-        [sideEntityController, fullPath, collection, entitiesDisplayedFirst, onEntityClick]);
-
-    const tableRowActionsBuilder = useCallback(({
-                                                    entity,
-                                                    size,
-                                                    width,
-                                                    frozen
-                                                }: {
+    const onNewClick = () => {
+        context.onAnalyticsEvent?.("reference_selection_new_entity", {
+            path: fullPath
+        });
+        sideEntityController.open({
+            path: fullPath,
+            collection,
+            updateUrl: true,
+            onUpdate: ({ entity }) => {
+                setEntitiesDisplayedFirst([entity, ...entitiesDisplayedFirst]);
+                onEntityClick(entity);
+            },
+            closeOnSave: true
+        });
+    };
+
+    const tableRowActionsBuilder = ({
+                                        entity,
+                                        size,
+                                        width,
+                                        frozen
+                                    }: {
         entity: Entity<any>,
         size: CollectionSize,
         width: number,
@@ -234,7 +238,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             fullPath={fullPath}
             selectionController={selectionController}/>;
 
-    }, [multiselect, selectionController.selectedEntities, toggleEntitySelection, collection?.hideIdFromCollection]);
+    };
 
     const onDone = useCallback((event: React.SyntheticEvent) => {
         event.stopPropagation();

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -15,16 +15,18 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                     size,
                                     style,
                                     hoverRow,
-                                    rowClassName,
+                                    rowClassName
                                 }: VirtualTableRowProps<T>) {
 
-        const onClick = useCallback((event: React.SyntheticEvent) => onRowClick
-            ? onRowClick({
-                rowData,
-                rowIndex,
-                event
-            })
-            : undefined, [onRowClick, rowData, rowIndex]);
+        const onClick = useCallback((event: React.SyntheticEvent) => {
+            console.debug("VirtualTableRow click");
+            if (onRowClick)
+                onRowClick({
+                    rowData,
+                    rowIndex,
+                    event
+                })
+        }, [onRowClick, rowData, rowIndex]);
 
         return (
             <div

package/src/core/EntitySidePanel.tsx

@@ -25,6 +25,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const navigationController = useNavigationController();
 
+    const parentCollectionIds = useMemo(() => {
+        return navigationController.getParentCollectionIds(props.path);
+    }, [navigationController, props.path]);
+
     const collection = useMemo(() => {
         if (!props) return undefined;
         let usedCollection = props.collection;
@@ -76,6 +80,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     {...props}
                     formWidth={props.width}
                     collection={collection}
+                    parentCollectionIds={parentCollectionIds}
                     onValuesAreModified={onValuesAreModified}
                 />
             </ErrorBoundary>

package/src/core/NavigationRoutes.tsx

@@ -67,19 +67,19 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const collectionRoutes = sortedCollections
             .map((collection) => {
-                    const urlPath = navigation.buildUrlCollectionPath(collection.alias ?? collection.path);
+                    const urlPath = navigation.buildUrlCollectionPath(collection.id ?? collection.path);
                     return <Route path={urlPath + "/*"}
-                                  key={`navigation_${collection.alias ?? collection.path}`}
+                                  key={`navigation_${collection.id ?? collection.path}`}
                                   element={
                                       <RouteWrapper
                                           path={urlPath}
                                           title={collection.name}
                                           type={"collection"}>
                                           <EntityCollectionView
-                                              key={`collection_view_${collection.alias ?? collection.path}`}
+                                              key={`collection_view_${collection.id ?? collection.path}`}
                                               isSubCollection={false}
-                                              parentPathSegments={[]}
-                                              fullPath={collection.alias ?? collection.path}
+                                              parentCollectionIds={[]}
+                                              fullPath={collection.id ?? collection.path}
                                               {...collection}
                                               Actions={toArray(collection.Actions)}/>
                                       </RouteWrapper>

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -56,6 +56,7 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        console.debug("onMultipleEntitiesSelected", entities);
         setValue(entities.map(e => getReferenceFrom(e)));
     }, [setValue]);
 

package/src/internal/EntityView.tsx

@@ -45,18 +45,13 @@ export interface EntityViewProps<M extends Record<string, any>> {
     entityId?: string;
     copy?: boolean;
     selectedSubPath?: string;
+    parentCollectionIds: string[];
     formWidth?: number | string;
     onValuesAreModified: (modified: boolean) => void;
     onUpdate?: (params: { entity: Entity<any> }) => void;
     onClose?: () => void;
 }
 
-type EntityViewView = {
-    label: string;
-    component: React.ReactNode;
-    size: "full" | "half";
-}
-
 /**
  * This is the default view that is used as the content of a side panel when
  * an entity is opened.
@@ -69,12 +64,14 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                                                                                      selectedSubPath,
                                                                                      copy,
                                                                                      collection,
+                                                                                     parentCollectionIds,
                                                                                      onValuesAreModified,
                                                                                      formWidth,
                                                                                      onUpdate,
                                                                                      onClose
                                                                                  }: EntityViewProps<M>) {
 
+
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
@@ -343,7 +340,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
     const subCollectionsViews = subcollections && subcollections.map(
         (subcollection, colIndex) => {
-            const subcollectionId = subcollection.alias ?? subcollection.path;
+            const subcollectionId = subcollection.id ?? subcollection.path;
             const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
             if (selectedTabRef.current !== subcollectionId)
                 return null;
@@ -359,7 +356,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                         (usedEntity && fullPath
                             ? <EntityCollectionView
                                 fullPath={fullPath}
-                                parentPathSegments={fullPathToCollectionSegments(path)}
+                                parentCollectionIds={[...parentCollectionIds, collection.id]}
                                 isSubCollection={true}
                                 {...subcollection}/>
                             : <div
@@ -480,7 +477,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
         (subcollection) =>
             <Tab
                 className="text-sm min-w-[140px]"
-                value={subcollection.path}
+                value={subcollection.id}
                 key={`entity_detail_collection_tab_${subcollection.name}`}>
                 {subcollection.name}
             </Tab>
@@ -533,9 +530,6 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
                             <Tab
                                 disabled={!hasAdditionalViews}
-                                // onClick={() => {
-                                //     onSideTabClick(-1);
-                                // }}
                                 value={MAIN_TAB_VALUE}
                                 className={`${
                                     !hasAdditionalViews ? "hidden" : ""