@firecms/collection_editor 3.0.0-canary.18 → 3.0.0-canary.182

package/src/ConfigControllerProvider.tsx

@@ -1,8 +1,9 @@
-import React, { PropsWithChildren, useCallback, useEffect } from "react";
+import React, { PropsWithChildren, useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { CollectionsConfigController } from "./types/config_controller";
 import {
+    Entity,
     Property,
     useCustomizationController,
     useNavigationController,
@@ -48,14 +49,21 @@ export interface ConfigControllerProviderProps {
         icon: React.ReactNode
     };
 
-    pathSuggestions?: (path?: string) => Promise<string[]>;
+    getPathSuggestions?: (path?: string) => Promise<string[]>;
 
-    getUser: (uid: string) => User | null
+    getUser?: (uid: string) => User | null
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
+    };
+
 }
 
 export const ConfigControllerProvider = React.memo(
@@ -66,10 +74,11 @@ export const ConfigControllerProvider = React.memo(
                                           reservedGroups,
                                           collectionInference,
                                           extraView,
-                                          pathSuggestions,
+                                          getPathSuggestions,
                                           getUser,
                                           getData,
-                                          onAnalyticsEvent
+                                          onAnalyticsEvent,
+                                          components
                                       }: PropsWithChildren<ConfigControllerProviderProps>) {
 
         const navigation = useNavigationController();
@@ -77,20 +86,6 @@ export const ConfigControllerProvider = React.memo(
         const snackbarController = useSnackbarController();
         const { propertyConfigs } = useCustomizationController();
 
-        const {
-            collections
-        } = navigation;
-        const existingPaths = (collections ?? []).map(col => col.path.trim().toLowerCase());
-
-        const [rootPathSuggestions, setRootPathSuggestions] = React.useState<string[] | undefined>();
-        useEffect(() => {
-            if (pathSuggestions) {
-                pathSuggestions().then((paths) => {
-                    setRootPathSuggestions(paths.filter(p => !existingPaths.includes(p.trim().toLowerCase())));
-                });
-            }
-        }, [pathSuggestions]);
-
         const [currentDialog, setCurrentDialog] = React.useState<{
             isNewCollection: boolean,
             parentCollection?: PersistedCollection,
@@ -102,7 +97,8 @@ export const ConfigControllerProvider = React.memo(
                 group?: string,
                 name?: string
             },
-            redirect: boolean
+            redirect: boolean,
+            existingEntities?: Entity<any>[]
         }>();
 
         const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
@@ -115,6 +111,7 @@ export const ConfigControllerProvider = React.memo(
             fullPath?: string,
             parentCollectionIds: string[],
             collectionEditable: boolean;
+            existingEntities?: Entity<any>[]
         }>();
 
         const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
@@ -123,46 +120,57 @@ export const ConfigControllerProvider = React.memo(
             deleteCollections: true
         }), []);
 
-        const editCollection = useCallback(({
-                                                id,
-                                                fullPath,
-                                                parentCollectionIds,
-                                                parentCollection
-                                            }: {
+        const editCollection = ({
+                                    id,
+                                    fullPath,
+                                    parentCollectionIds,
+                                    parentCollection,
+                                    existingEntities
+                                }: {
             id?: string,
             fullPath?: string,
             parentCollectionIds: string[],
-            parentCollection?: PersistedCollection
+            parentCollection?: PersistedCollection,
+            existingEntities?: Entity<any>[]
         }) => {
             console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
-            onAnalyticsEvent?.("edit_collection", { id, fullPath });
+            onAnalyticsEvent?.("edit_collection", {
+                id,
+                fullPath
+            });
             setCurrentDialog({
                 editedCollectionId: id,
                 fullPath,
                 parentCollectionIds,
                 isNewCollection: false,
                 parentCollection,
-                redirect: false
+                redirect: false,
+                existingEntities
             });
-        }, []);
+        };
 
-        const editProperty = useCallback(({
-                                              propertyKey,
-                                              property,
-                                              editedCollectionId,
-                                              currentPropertiesOrder,
-                                              parentCollectionIds,
-                                              collection
-                                          }: {
+        const editProperty = ({
+                                  propertyKey,
+                                  property,
+                                  editedCollectionId,
+                                  currentPropertiesOrder,
+                                  parentCollectionIds,
+                                  collection,
+                                  existingEntities
+                              }: {
             propertyKey?: string,
             property?: Property,
             currentPropertiesOrder?: string[],
             editedCollectionId: string,
             parentCollectionIds: string[],
             collection: PersistedCollection,
+            existingEntities?: Entity<any>[]
         }) => {
             console.debug("Edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
-            onAnalyticsEvent?.("edit_property", { propertyKey, editedCollectionId });
+            onAnalyticsEvent?.("edit_property", {
+                propertyKey,
+                editedCollectionId
+            });
             // namespace is all the path until the last dot
             const namespace = propertyKey && propertyKey.includes(".")
                 ? propertyKey.substring(0, propertyKey.lastIndexOf("."))
@@ -175,19 +183,20 @@ export const ConfigControllerProvider = React.memo(
                 property,
                 namespace,
                 currentPropertiesOrder,
-                editedCollectionId: editedCollectionId,
+                editedCollectionId,
                 parentCollectionIds,
-                collectionEditable: collection?.editable ?? false
+                collectionEditable: collection?.editable ?? false,
+                existingEntities
             });
-        }, []);
+        };
 
-        const createCollection = React.useCallback(({
-                                                        parentCollectionIds,
-                                                        parentCollection,
-                                                        initialValues,
-                                                        redirect,
-                                                        sourceClick
-                                                    }: {
+        const createCollection = ({
+                                      parentCollectionIds,
+                                      parentCollection,
+                                      initialValues,
+                                      redirect,
+                                      sourceClick
+                                  }: {
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
             initialValues?: {
@@ -198,8 +207,20 @@ export const ConfigControllerProvider = React.memo(
             redirect: boolean,
             sourceClick?: string
         }) => {
-            console.debug("Create collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
-            onAnalyticsEvent?.("create_collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
+            console.debug("Create collection", {
+                parentCollectionIds,
+                parentCollection,
+                initialValues,
+                redirect,
+                sourceClick
+            });
+            onAnalyticsEvent?.("create_collection", {
+                parentCollectionIds,
+                parentCollection,
+                initialValues,
+                redirect,
+                sourceClick
+            });
             setCurrentDialog({
                 isNewCollection: true,
                 parentCollectionIds,
@@ -207,17 +228,7 @@ export const ConfigControllerProvider = React.memo(
                 initialValues,
                 redirect
             });
-        }, []);
-
-        const getPathSuggestions = !pathSuggestions
-            ? undefined
-            : (path?: string) => {
-                if (!path && rootPathSuggestions)
-                    return Promise.resolve(rootPathSuggestions);
-                else {
-                    return pathSuggestions?.(path);
-                }
-            }
+        };
 
         return (
             <ConfigControllerContext.Provider value={collectionConfigController}>
@@ -227,7 +238,8 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
-                        rootPathSuggestions
+                        getPathSuggestions,
+                        components
                     }}>
 
                     {children}
@@ -265,7 +277,7 @@ export const ConfigControllerProvider = React.memo(
                         getData={getData && currentPropertyDialog?.editedCollectionId
                             ? () => {
                                 console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
-                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId!)
+                                const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId!)
                                 return getData(resolvedPath, []);
                             }
                             : undefined}

package/src/index.ts

@@ -12,6 +12,7 @@ export {
 export {
     editableProperty, removeNonEditableProperties
 } from "./utils/entities";
+export * from "./utils/collections";
 
 export type {
     CollectionsConfigController, DeleteCollectionParams, SaveCollectionParams, UpdateCollectionParams

package/src/types/collection_editor_controller.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -12,7 +13,8 @@ export interface CollectionEditorController {
         id?: string,
         fullPath?: string,
         parentCollectionIds: string[],
-        parentCollection?: PersistedCollection
+        parentCollection?: PersistedCollection,
+        existingEntities?: Entity<any>[]
     }) => void;
 
     createCollection: (props: {
@@ -33,11 +35,19 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[],
         editedCollectionId: string,
         parentCollectionIds: string[],
-        collection: PersistedCollection
+        collection: PersistedCollection,
+        existingEntities: Entity<any>[]
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
-    rootPathSuggestions?: string[];
+    getPathSuggestions?: (path: string) => Promise<string[]>;
+
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }>;
+    };
 
 }

package/src/types/collection_inference.ts

@@ -1,3 +1,3 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionIds: string[]) => Promise<Partial<EntityCollection> | null>;
+export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;

package/src/types/config_permissions.ts

@@ -1,6 +1,6 @@
 import { EntityCollection } from "@firecms/core";
 
-export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: { user: UserType | null, collection?: EC }) => CollectionEditorPermissions;
+export type CollectionEditorPermissionsBuilder<USER = any, EC extends EntityCollection = EntityCollection> = (params: { user: USER | null, collection?: EC }) => CollectionEditorPermissions;
 
 export type CollectionEditorPermissions = {
     /**

package/src/types/persisted_collection.ts

@@ -1,8 +1,7 @@
 import { EntityCollection, User } from "@firecms/core";
 
-export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User>
-    = Omit<EntityCollection<M, UserType>, "subcollections"> & {
-    // properties: Properties<M>;
+export type PersistedCollection<M extends Record<string, any> = any, USER extends User = User>
+    = Omit<EntityCollection<M, USER>, "subcollections"> & {
     ownerId?: string;
     subcollections?: PersistedCollection<any, any>[];
     editable?: boolean;

package/src/ui/CollectionViewHeaderAction.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip } from "@firecms/ui";
 import React from "react";
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -10,7 +10,8 @@ export function CollectionViewHeaderAction({
                                                property,
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     property: ResolvedProperty,
     propertyKey: string,
@@ -18,21 +19,25 @@ export function CollectionViewHeaderAction({
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const collectionEditorController = useCollectionEditorController();
 
     return (
-        <Tooltip title={"Edit"}>
+        <Tooltip
+            asChild={true}
+            title={"Edit"}>
             <IconButton
-                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                className={onHover ? "bg-white dark:bg-surface-950" : "hidden"}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         propertyKey,
                         property,
                         editedCollectionId: collection.id,
                         parentCollectionIds,
-                        collection
+                        collection,
+                        existingEntities: tableController.data ?? []
                     });
                 }}
                 size={"small"}>

package/src/ui/EditorCollectionAction.tsx

@@ -1,16 +1,7 @@
-import equal from "react-fast-compare"
-
-import {
-    CollectionActionsProps,
-    mergeDeep,
-    useAuthController,
-    useNavigationController,
-    useSnackbarController
-} from "@firecms/core";
-import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCollectionsConfigController } from "../useCollectionsConfigController";
 import { PersistedCollection } from "../types/persisted_collection";
 
 export function EditorCollectionAction({
@@ -23,8 +14,6 @@ export function EditorCollectionAction({
     const authController = useAuthController();
     const navigationController = useNavigationController();
     const collectionEditorController = useCollectionEditorController();
-    const configController = useCollectionsConfigController();
-    const snackbarController = useSnackbarController();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
 
@@ -35,68 +24,26 @@ export function EditorCollectionAction({
         }).editCollections
         : true;
 
-    let saveDefaultFilterButton = null;
-    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
-        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
-        saveDefaultFilterButton = <>
-            {(collection.initialFilter || collection.initialSort) && <Tooltip
-                title={"Reset to default filter and sort"}>
-                <Button
-                    color={"primary"}
-                    size={"small"}
-                    variant={"text"}
-                    onClick={() => {
-                        tableController.clearFilter?.();
-                        if (collection?.initialFilter)
-                            tableController.setFilterValues?.(collection?.initialFilter);
-                        if (collection?.initialSort)
-                            tableController.setSortBy?.(collection?.initialSort);
-                    }}>
-                    <UndoIcon/>
-                </Button>
-            </Tooltip>}
-
-            <Tooltip
-                title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
-                <Button
-                    color={"primary"}
-                    size={"small"}
-                    variant={"outlined"}
-                    onClick={() => configController
-                        ?.saveCollection({
-                            id: collection.id,
-                            parentCollectionIds,
-                            collectionData: mergeDeep(collection as PersistedCollection,
-                                {
-                                    initialFilter: tableController.filterValues ?? null,
-                                    initialSort: tableController.sortBy ?? null
-                                })
-                        }).then(() => {
-                            snackbarController.open({
-                                type: "success",
-                                message: "Default config saved"
-                            });
-                        })}>
-                    <SaveIcon/>
-                </Button>
-            </Tooltip>
-        </>;
-    }
-
     const editorButton = <Tooltip
+        asChild={true}
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ id: collection.id, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.id,
+                    fullPath,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as PersistedCollection,
+                    existingEntities: tableController?.data ?? []
+                })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>
     </Tooltip>;
 
     return <>
-        {canEditCollection && saveDefaultFilterButton}
         {editorButton}
     </>
 

package/src/ui/EditorCollectionActionStart.tsx

@@ -0,0 +1,88 @@
+import equal from "react-fast-compare"
+
+import { CollectionActionsProps, mergeDeep, useAuthController, useSnackbarController } from "@firecms/core";
+import { Button, SaveIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function EditorCollectionActionStart({
+                                           path: fullPath,
+                                           parentCollectionIds,
+                                           collection,
+                                           tableController
+                                       }: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    let saveDefaultFilterButton = null;
+    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.initialFilter)) ||
+        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
+        saveDefaultFilterButton = <>
+            <Tooltip
+                asChild={true}
+                title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
+                <Button
+                    color={"primary"}
+                    size={"small"}
+                    variant={"outlined"}
+                    onClick={() => configController
+                        ?.saveCollection({
+                            id: collection.id,
+                            parentCollectionIds,
+                            collectionData: mergeDeep(collection as PersistedCollection,
+                                {
+                                    initialFilter: tableController.filterValues ?? null,
+                                    initialSort: tableController.sortBy ?? null
+                                })
+                        }).then(() => {
+                            snackbarController.open({
+                                type: "success",
+                                message: "Default config saved"
+                            });
+                        })}>
+                    <SaveIcon/>
+                </Button>
+            </Tooltip>
+
+            {(collection.initialFilter || collection.initialSort) && <Tooltip
+                title={"Reset to default filter and sort"}>
+                <Button
+                    color={"primary"}
+                    size={"small"}
+                    variant={"text"}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        if (collection?.initialFilter)
+                            tableController.setFilterValues?.(collection?.initialFilter);
+                        if (collection?.initialSort)
+                            tableController.setSortBy?.(collection?.initialSort);
+                    }}>
+                    <UndoIcon/>
+                </Button>
+            </Tooltip>}
+        </>;
+    }
+
+    return <>
+        {canEditCollection && saveDefaultFilterButton}
+    </>
+
+}
+
+function getObjectOrNull(o?: object): object | null {
+    if (o && Object.keys(o).length === 0)
+        return o
+    return o ?? null;
+}

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -1,12 +1,12 @@
 import {
-    DeleteConfirmationDialog,
+    ConfirmationDialog,
     PluginHomePageActionsProps,
     useAuthController,
     useSnackbarController
 } from "@firecms/core";
 import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
@@ -14,6 +14,7 @@ export function HomePageEditorCollectionAction({
                                                    collection
                                                }: PluginHomePageActionsProps) {
 
+
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const configController = useCollectionsConfigController();
@@ -24,13 +25,16 @@ export function HomePageEditorCollectionAction({
         collection
     });
 
-    const onEditCollectionClicked = useCallback(() => {
-        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
-    }, [collectionEditorController, path]);
+    const onEditCollectionClicked = () => {
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
+    };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
-    const deleteCollection = useCallback(() => {
+    const deleteCollection = () => {
         configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
@@ -38,7 +42,7 @@ export function HomePageEditorCollectionAction({
                 type: "success"
             });
         });
-    }, [path, configController]);
+    };
 
     return <>
 
@@ -49,11 +53,13 @@ export function HomePageEditorCollectionAction({
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
-                    <MenuItem onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDeleteRequested(true);
-                    }}>
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
                         <DeleteIcon/>
                         Delete
                     </MenuItem>
@@ -71,7 +77,7 @@ export function HomePageEditorCollectionAction({
                 </IconButton>}
         </div>
 
-        <DeleteConfirmationDialog
+        <ConfirmationDialog
             open={deleteRequested}
             onAccept={deleteCollection}
             onCancel={() => setDeleteRequested(false)}

package/src/ui/NewCollectionButton.tsx

@@ -3,7 +3,7 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
         <Button className={"min-w-fit"}
                 variant={"outlined"}
                 onClick={() => collectionEditorController.createCollection({