@firecms/collection_editor 3.0.0-beta.4.pre.2 → 3.0.0-beta.6

package/dist/types/collection_editor_controller.d.ts

@@ -32,5 +32,5 @@ export interface CollectionEditorController {
         collection: PersistedCollection;
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
-    rootPathSuggestions?: string[];
+    getPathSuggestions?: (path: string) => Promise<string[]>;
 }

package/dist/ui/EditorCollectionActionStart.d.ts

@@ -0,0 +1,2 @@
+import { CollectionActionsProps } from "@firecms/core";
+export declare function EditorCollectionActionStart({ path: fullPath, parentCollectionIds, collection, tableController }: CollectionActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -25,12 +25,12 @@ export interface CollectionEditorDialogProps {
         icon: React.ReactNode;
     };
     pathSuggestions?: (path?: string) => Promise<string[]>;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+export declare function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void;
     setFormDirty: (dirty: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts

@@ -4,7 +4,7 @@ export declare function CollectionEditorWelcomeView({ path, pathSuggestions, par
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
-    onContinue: (importData?: object[]) => void;
+    onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
 }): import("react/jsx-runtime").JSX.Element;
 export declare function TemplateButton({ title, subtitle, icon, onClick }: {

package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts

@@ -9,7 +9,7 @@ type CollectionEditorFormProps = {
     setDirty?: (dirty: boolean) => void;
     reservedGroups?: string[];
     extraIcon: React.ReactNode;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
     doCollectionInference: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;

package/dist/ui/collection_editor/PropertyTree.d.ts

@@ -4,17 +4,17 @@ import { DraggableProvided } from "@hello-pangea/dnd";
 export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     [Key: string]: CMSType;
 }>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
-    namespace?: string | undefined;
-    selectedPropertyKey?: string | undefined;
-    onPropertyClick?: ((propertyKey: string, namespace?: string) => void) | undefined;
+    namespace?: string;
+    selectedPropertyKey?: string;
+    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     properties: PropertiesOrBuilders<M>;
-    propertiesOrder?: string[] | undefined;
-    additionalFields?: AdditionalFieldDelegate<M, import("@firecms/core").User>[] | undefined;
+    propertiesOrder?: string[];
+    additionalFields?: AdditionalFieldDelegate<M>[];
     errors: Record<string, any>;
-    onPropertyMove?: ((propertiesOrder: string[], namespace?: string) => void) | undefined;
-    onPropertyRemove?: ((propertyKey: string, namespace?: string) => void) | undefined;
-    className?: string | undefined;
-    inferredPropertyKeys?: string[] | undefined;
+    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
+    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
+    className?: string;
+    inferredPropertyKeys?: string[];
     collectionEditable: boolean;
 }) => import("react/jsx-runtime").JSX.Element)>;
 export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {

package/dist/ui/collection_editor/SubcollectionsEditTab.d.ts

@@ -7,6 +7,6 @@ export declare function SubcollectionsEditTab({ collection, parentCollection, co
     parentCollection?: EntityCollection;
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
 }): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionEditorPlugin.d.ts

@@ -18,19 +18,18 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      * names when creating collections.
      * e.g. ["admin"]
      */
-    reservedGroups: string[];
+    reservedGroups?: string[];
     extraView?: {
         View: React.ComponentType<{
             path: string;
         }>;
         icon: React.ReactNode;
     };
-    pathSuggestions?: (path: string) => Promise<string[]>;
+    getPathSuggestions?: (path?: string) => Promise<string[]>;
     collectionInference?: CollectionInference;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
-    getUser: (uid: string) => UserType | null;
+    getUser?: (uid: string) => UserType | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
-    introMode?: "new_project" | "existing_project";
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -39,11 +38,9 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param pathSuggestions
+ * @param getPathsSuggestions
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, introMode, configPermissions, reservedGroups, extraView, pathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
-export declare function IntroWidget({ introMode }: {
-    introMode?: "new_project" | "existing_project";
-}): import("react/jsx-runtime").JSX.Element;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;

package/dist/utils/collections.d.ts

@@ -0,0 +1,6 @@
+import { EntityCollection, ModifyCollectionProps } from "@firecms/core";
+import { PersistedCollection } from "../types/persisted_collection";
+/**
+ * Function in charge of merging collections defined in code with those stored in the backend.
+ */
+export declare const mergeCollections: (baseCollections: EntityCollection[], backendCollections: PersistedCollection[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void) => EntityCollection<any, any>[];

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.4.pre.2",
+  "version": "3.0.0-beta.6",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-beta.4.pre.2",
-    "@firecms/formex": "^3.0.0-beta.4.pre.2",
-    "@firecms/schema_inference": "^3.0.0-beta.4.pre.2",
-    "@firecms/ui": "^3.0.0-beta.4.pre.2",
+    "@firecms/data_import_export": "^3.0.0-beta.6",
+    "@firecms/formex": "^3.0.0-beta.6",
+    "@firecms/schema_inference": "^3.0.0-beta.6",
+    "@firecms/ui": "^3.0.0-beta.6",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.22.2",
-    "react-router-dom": "^6.22.2"
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0"
   },
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js",
-      "types": "./dist/src/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./package.json": "./package.json"
   },
@@ -54,10 +54,10 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
@@ -70,8 +70,8 @@
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9",
     "vite-plugin-fonts": "^0.7.0"
   },
   "files": [
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77875cc369a0bfe7b0b141e794b14a819d5811df"
+  "gitHead": "ffcbddbd73211bb644ff7503c2c62790bff6202a"
 }

package/src/ConfigControllerProvider.tsx

@@ -1,4 +1,4 @@
-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";
@@ -48,9 +48,9 @@ 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[]>;
 
@@ -66,7 +66,7 @@ export const ConfigControllerProvider = React.memo(
                                           reservedGroups,
                                           collectionInference,
                                           extraView,
-                                          pathSuggestions,
+                                          getPathSuggestions,
                                           getUser,
                                           getData,
                                           onAnalyticsEvent
@@ -77,20 +77,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,
@@ -135,7 +121,10 @@ export const ConfigControllerProvider = React.memo(
             parentCollection?: PersistedCollection
         }) => {
             console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
-            onAnalyticsEvent?.("edit_collection", { id, fullPath });
+            onAnalyticsEvent?.("edit_collection", {
+                id,
+                fullPath
+            });
             setCurrentDialog({
                 editedCollectionId: id,
                 fullPath,
@@ -162,7 +151,10 @@ export const ConfigControllerProvider = React.memo(
             collection: PersistedCollection,
         }) => {
             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,7 +167,7 @@ export const ConfigControllerProvider = React.memo(
                 property,
                 namespace,
                 currentPropertiesOrder,
-                editedCollectionId: editedCollectionId,
+                editedCollectionId,
                 parentCollectionIds,
                 collectionEditable: collection?.editable ?? false
             });
@@ -198,8 +190,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,
@@ -209,16 +213,6 @@ export const ConfigControllerProvider = React.memo(
             });
         }, []);
 
-        const getPathSuggestions = !pathSuggestions
-            ? undefined
-            : (path?: string) => {
-                if (!path && rootPathSuggestions)
-                    return Promise.resolve(rootPathSuggestions);
-                else {
-                    return pathSuggestions?.(path);
-                }
-            }
-
         return (
             <ConfigControllerContext.Provider value={collectionConfigController}>
                 <CollectionEditorContext.Provider
@@ -227,7 +221,7 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
-                        rootPathSuggestions
+                        getPathSuggestions
                     }}>
 
                     {children}

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

@@ -38,6 +38,6 @@ export interface CollectionEditorController {
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
-    rootPathSuggestions?: string[];
+    getPathSuggestions?: (path: string) => Promise<string[]>;
 
 }

package/src/ui/EditorCollectionAction.tsx

@@ -23,8 +23,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,54 +33,6 @@ 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
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
@@ -96,7 +46,6 @@ export function EditorCollectionAction({
     </Tooltip>;
 
     return <>
-        {canEditCollection && saveDefaultFilterButton}
         {editorButton}
     </>
 

package/src/ui/EditorCollectionActionStart.tsx

@@ -0,0 +1,87 @@
+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
+                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/NewCollectionButton.tsx

@@ -3,14 +3,16 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <Button className={"min-w-fit"}
-                   variant={"outlined"}
-                   onClick={() => collectionEditorController.createCollection({
-                       parentCollectionIds: [],
-                       redirect: true,
-                       sourceClick: "new_collection_button"
-                   })}>
-        <AddIcon/>
-        New collection
-    </Button>
+    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+        <Button className={"min-w-fit"}
+                variant={"outlined"}
+                onClick={() => collectionEditorController.createCollection({
+                    parentCollectionIds: [],
+                    redirect: true,
+                    sourceClick: "new_collection_button"
+                })}>
+            <AddIcon/>
+            New collection
+        </Button>
+    </div>
 }

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -216,7 +216,7 @@ export function CollectionDetailsForm({
                                            label={"Collection id"}
                                            error={showErrors && Boolean(errors.id)}/>
                                     <FieldCaption error={touched.id && Boolean(errors.id)}>
-                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
+                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path."}
                                     </FieldCaption>
                                 </div>