@firecms/collection_editor 3.0.0-alpha.46 → 3.0.0-alpha.47

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
     Autocomplete,
     AutocompleteItem,
@@ -32,14 +32,14 @@ export function CollectionDetailsForm({
                                           isNewCollection,
                                           reservedGroups,
                                           existingPaths,
-                                          existingAliases,
+                                          existingIds,
                                           groups,
                                           parentCollection
                                       }: {
     isNewCollection: boolean,
     reservedGroups?: string[];
     existingPaths?: string[];
-    existingAliases?: string[];
+    existingIds?: string[];
     groups: string[] | null;
     parentCollection?: EntityCollection;
 }) {
@@ -57,6 +57,7 @@ export function CollectionDetailsForm({
     } = useFormikContext<EntityCollection>();
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
+    const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
 
     const updateName = (name: string) => {
         setFieldValue("name", name);
@@ -66,6 +67,11 @@ export function CollectionDetailsForm({
             setFieldValue("path", toSnakeCase(name));
         }
 
+        const idTouched = getIn(touched, "id");
+        if (!idTouched && isNewCollection && name) {
+            setFieldValue("id", toSnakeCase(name));
+        }
+
         const singularNameTouched = getIn(touched, "singularName");
         if (!singularNameTouched && isNewCollection && name) {
             setFieldValue("singularName", singular(name))
@@ -73,29 +79,13 @@ export function CollectionDetailsForm({
 
     };
 
-    const collectionIcon = getIconForView(values);
-
-    const validatePath = useCallback((value: string) => {
-        let error;
-        if (!value) {
-            error = "You must specify a path in the database for this collection";
+    useEffect(() => {
+        if (errors.id) {
+            setAdvancedPanelExpanded(true);
         }
-        if (isNewCollection && existingAliases?.includes(value.trim().toLowerCase()))
-            error = "There is already a collection which uses this path as an alias";
-        if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()) && !values.alias)
-            error = "There is already a collection with the specified path. If you want to have multiple collections referring to the same database path, you need to define an alias in at least one of the collections";
-        return error;
-    }, [isNewCollection, existingAliases, existingPaths, values.alias]);
-
-    const validateAlias = useCallback((value: string) => {
-        if (!value) return undefined;
-        let error;
-        if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()))
-            error = "There is already a collection that uses this value as a path";
-        if (isNewCollection && existingAliases?.includes(value.trim().toLowerCase()))
-            error = "There is already a collection which uses this alias";
-        return error;
-    }, [isNewCollection, existingPaths, existingAliases]);
+    }, [errors.id]);
+
+    const collectionIcon = getIconForView(values);
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
 
@@ -165,13 +155,12 @@ export function CollectionDetailsForm({
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
-                               validate={validatePath}
                                disabled={!isNewCollection}
                                required
                                error={touched.path && Boolean(errors.path)}/>
 
                         <FieldHelperView error={touched.path && Boolean(errors.path)}>
-                            {touched.path && Boolean(errors.path) ? errors.path : "Path that this collection is stored in"}
+                            {touched.path && Boolean(errors.path) ? errors.path : "Path that this collection is stored in, in the database"}
                         </FieldHelperView>
 
                     </div>
@@ -210,6 +199,8 @@ export function CollectionDetailsForm({
 
                     <div className={"col-span-12"}>
                         <ExpandablePanel
+                            expanded={advancedPanelExpanded}
+                            onExpandedChange={setAdvancedPanelExpanded}
                             title={
                                 <div className="flex flex-row text-gray-500">
                                     <SettingsIcon/>
@@ -252,14 +243,13 @@ export function CollectionDetailsForm({
                                 </div>
 
                                 <div className={"col-span-12"}>
-                                    <Field name={"alias"}
+                                    <Field name={"id"}
                                            as={DebouncedTextField}
                                            disabled={!isNewCollection}
-                                           label={"Alias"}
-                                           validate={validateAlias}
-                                           error={touched.alias && Boolean(errors.alias)}/>
-                                    <FieldHelperView error={touched.alias && Boolean(errors.alias)}>
-                                        {touched.alias && Boolean(errors.alias) ? errors.alias : "Use an alias as an ID when you have multiple collections located in the same path"}
+                                           label={"Collection id"}
+                                           error={touched.id && Boolean(errors.id)}/>
+                                    <FieldHelperView error={touched.id && Boolean(errors.id)}>
+                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
                                     </FieldHelperView>
                                 </div>
 
@@ -284,7 +274,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
-                                        label="ID generation"
+                                        label="Data IDs generation"
                                         position={"item-aligned"}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {
@@ -306,11 +296,11 @@ export function CollectionDetailsForm({
                                             else if (value === "optional")
                                                 return "Users can define an ID, but it is not required";
                                             else
-                                                return "ID is generated automatically";
+                                                return "Document ID is generated automatically";
                                         }}
                                     >
                                         <SelectItem value={"false"}>
-                                            ID is generated automatically
+                                            Document ID is generated automatically
                                         </SelectItem>
                                         <SelectItem value={"true"}>
                                             Users must define an ID
@@ -359,6 +349,5 @@ export function CollectionDetailsForm({
 
             </Container>
         </div>
-    )
-        ;
+    );
 }

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -24,6 +24,7 @@ import {
     Property,
     PropertyConfig,
     PropertyOrBuilder,
+    randomString,
     removeUndefined,
     Tab,
     Tabs,
@@ -60,7 +61,7 @@ export interface CollectionEditorDialogProps {
     }
     editedCollectionPath?: string; // last segment of the path, like `locales`
     fullPath?: string; // full path of this particular collection, like `products/123/locales`
-    parentPathSegments?: string[]; // path segments of the parent collection, like [`products`]
+    parentCollectionIds?: string[]; // path segments of the parent collection, like [`products`]
     handleClose: (collection?: EntityCollection) => void;
     configController: CollectionsConfigController;
     reservedGroups?: string[];
@@ -139,7 +140,7 @@ export function CollectionEditorDialogInternal<M extends {
        initialValues: initialValuesProp,
        configController,
        editedCollectionPath,
-       parentPathSegments,
+       parentCollectionIds,
        fullPath,
        collectionInference,
        handleClose,
@@ -164,10 +165,10 @@ export function CollectionEditorDialogInternal<M extends {
         collections
     } = navigation;
 
-    const includeTemplates = !initialValuesProp?.path && (parentPathSegments ?? []).length === 0;
+    const includeTemplates = !initialValuesProp?.path && (parentCollectionIds ?? []).length === 0;
     const collectionsInThisLevel = (parentCollection ? parentCollection.subcollections : collections) ?? [];
     const existingPaths = collectionsInThisLevel.map(col => col.path.trim().toLowerCase());
-    const existingAliases = collectionsInThisLevel.map(col => col.alias?.trim().toLowerCase()).filter(Boolean) as string[];
+    const existingIds = collectionsInThisLevel.map(col => col.id?.trim().toLowerCase()).filter(Boolean) as string[];
 
     const importConfig = useImportConfig();
 
@@ -198,7 +199,7 @@ export function CollectionEditorDialogInternal<M extends {
         try {
             if (navigation.initialised) {
                 if (editedCollectionPath) {
-                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(parentPathSegments ?? []), editedCollectionPath]));
+                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(parentCollectionIds ?? []), editedCollectionPath]));
                 } else {
                     setCollection(undefined);
                 }
@@ -211,12 +212,12 @@ export function CollectionEditorDialogInternal<M extends {
     }, [navigation.getCollectionFromPaths, editedCollectionPath, initialError, navigation.initialised]);
 
     const saveCollection = (updatedCollection: PersistedCollection<M>): Promise<boolean> => {
-        const fullPath = updatedCollection.alias || updatedCollection.path;
+        const fullPath = updatedCollection.id || updatedCollection.path;
         return configController.saveCollection({
-            path: fullPath,
+            id: fullPath,
             collectionData: updatedCollection,
             previousPath: editedCollectionPath,
-            parentPathSegments
+            parentCollectionIds
         })
             .then(() => {
                 setError(undefined);
@@ -233,15 +234,25 @@ export function CollectionEditorDialogInternal<M extends {
             });
     };
 
-    const initialValues: PersistedCollection<M> = collection ? applyPropertyConfigs(collection, propertyConfigs) : {
-        path: initialValuesProp?.path ?? "",
-        name: initialValuesProp?.name ?? "",
-        group: initialValuesProp?.group ?? "",
-        properties: {} as PropertiesOrBuilders<M>,
-        propertiesOrder: [],
-        icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
-        ownerId: authController.user?.uid ?? ""
-    };
+    const initialCollection = collection
+        ? {
+            ...collection,
+            id: collection.id ?? collection.path ?? randomString(16)
+        }
+        : undefined;
+
+    const initialValues: PersistedCollection<M> = initialCollection
+        ? applyPropertyConfigs(initialCollection, propertyConfigs)
+        : {
+            id: initialValuesProp?.path ?? randomString(16),
+            path: initialValuesProp?.path ?? "",
+            name: initialValuesProp?.name ?? "",
+            group: initialValuesProp?.group ?? "",
+            properties: {} as PropertiesOrBuilders<M>,
+            propertiesOrder: [],
+            icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
+            ownerId: authController.user?.uid ?? ""
+        };
 
     const setNextMode = useCallback(() => {
         if (currentView === "details") {
@@ -268,8 +279,8 @@ export function CollectionEditorDialogInternal<M extends {
 
     const doCollectionInference = useCallback((collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
-        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPathSegments ?? []);
-    }, [collectionInference, parentPathSegments]);
+        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentCollectionIds ?? []);
+    }, [collectionInference, parentCollectionIds]);
 
     const inferCollectionFromData = useCallback(async (newCollection: PersistedCollection<M>) => {
 
@@ -288,7 +299,7 @@ export function CollectionEditorDialogInternal<M extends {
                 return Promise.resolve(newCollection);
             }
             const values = {
-                ...(newCollection ?? {}),
+                ...(newCollection ?? {})
             };
 
             if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
@@ -315,7 +326,7 @@ export function CollectionEditorDialogInternal<M extends {
             });
             return newCollection;
         }
-    }, [parentPathSegments, doCollectionInference]);
+    }, [parentCollectionIds, doCollectionInference]);
 
     const onSubmit = (newCollectionState: PersistedCollection<M>, formikHelpers: FormikHelpers<PersistedCollection<M>>) => {
         try {
@@ -389,22 +400,34 @@ export function CollectionEditorDialogInternal<M extends {
         <Formik
             initialValues={initialValues}
             validationSchema={(currentView === "properties" || currentView === "subcollections" || currentView === "details") && YupSchema}
-            validate={() => {
+            validate={(v) => {
                 if (currentView === "properties") {
                     // return the errors for the properties form
                     return propertyErrorsRef.current;
                 }
-                return undefined;
+                const errors: Record<string, any> = {};
+                if (currentView === "details") {
+                    const pathError = validatePath(v.path, isNewCollection, existingPaths, v.id);
+                    if (pathError) {
+                        errors.path = pathError;
+                    }
+                    const idError = validateId(v.id, isNewCollection, existingPaths, existingIds);
+                    if (idError) {
+                        errors.id = idError;
+                    }
+                }
+                return errors;
             }}
             onSubmit={onSubmit}
         >
-            {({
-                  values,
-                  setFieldValue,
-                  isSubmitting,
-                  dirty,
-                  submitCount
-              }) => {
+            {(formikHelpers) => {
+                const {
+                    values,
+                    setFieldValue,
+                    isSubmitting,
+                    dirty,
+                    submitCount
+                } = formikHelpers;
 
                 const path = values.path ?? editedCollectionPath;
                 const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
@@ -432,7 +455,7 @@ export function CollectionEditorDialogInternal<M extends {
                         });
                 }
 
-                const validValues = Boolean(values.name) && Boolean(values.path);
+                const validValues = Boolean(values.name) && Boolean(values.id);
 
                 const onImportMappingComplete = () => {
                     const updatedProperties = { ...values.properties };
@@ -443,7 +466,7 @@ export function CollectionEditorDialogInternal<M extends {
                     setNextMode();
                     console.log("onImportMappingComplete", {
                         importConfig,
-                        properties: updatedProperties,
+                        properties: updatedProperties
                     })
                 };
 
@@ -517,7 +540,7 @@ export function CollectionEditorDialogInternal<M extends {
                             {currentView === "details" &&
                                 <CollectionDetailsForm
                                     existingPaths={existingPaths}
-                                    existingAliases={existingAliases}
+                                    existingIds={existingIds}
                                     groups={groups}
                                     parentCollection={parentCollection}
                                     isNewCollection={isNewCollection}/>}
@@ -528,7 +551,7 @@ export function CollectionEditorDialogInternal<M extends {
                                     configController={configController}
                                     getUser={getUser}
                                     collectionInference={collectionInference}
-                                    parentPathSegments={parentPathSegments}
+                                    parentCollectionIds={parentCollectionIds}
                                     collection={collection}/>}
 
                             {currentView === "properties" &&
@@ -694,3 +717,28 @@ function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Rec
     return internalProperty;
 
 }
+
+const validatePath = (value: string, isNewCollection: boolean, existingPaths: string[], idValue?: string) => {
+    let error;
+    if (!value) {
+        error = "You must specify a path in the database for this collection";
+    }
+    // if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
+    //     error = "There is already a collection which uses this path as an id";
+    if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()) && !idValue)
+        error = "There is already a collection with the specified path. If you want to have multiple collections referring to the same database path, make sure the have different ids";
+    return error;
+};
+
+const validateId = (value: string, isNewCollection: boolean, existingPaths: string[], existingIds: string[]) => {
+    if (!value) return undefined;
+    let error;
+    if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()))
+        error = "There is already a collection that uses this value as a path";
+    if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
+        error = "There is already a collection which uses this id";
+    // if (error) {
+    //     setAdvancedPanelExpanded(true);
+    // }
+    return error;
+};

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -43,7 +43,7 @@ type CollectionEditorFormProps = {
     extraIcon: React.ReactNode;
     getUser: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
-    doCollectionInference: (collection: PersistedCollection) => Promise<EntityCollection | null> | undefined;
+    doCollectionInference: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
@@ -121,7 +121,7 @@ export function CollectionPropertiesEditorForm({
                         return;
                     }
                     // find properties in the new collection, not present in the current one
-                    const newPropertyKeys = Object.keys(newCollection.properties)
+                    const newPropertyKeys = (newCollection.properties ? Object.keys(newCollection.properties) : [])
                         .filter((propertyKey) => !values.properties[propertyKey]);
                     if (newPropertyKeys.length === 0) {
                         snackbarController.open({
@@ -133,7 +133,7 @@ export function CollectionPropertiesEditorForm({
                     // add them to the current collection
                     const updatedProperties = {
                         ...newPropertyKeys.reduce((acc, propertyKey) => {
-                            acc[propertyKey] = newCollection.properties[propertyKey];
+                            acc[propertyKey] = (newCollection.properties ?? {})[propertyKey];
                             return acc;
                         }, {} as { [key: string]: PropertyOrBuilder }),
                         ...values.properties

package/src/ui/collection_editor/CollectionYupValidation.tsx

@@ -1,6 +1,7 @@
 import * as Yup from "yup";
 
 export const YupSchema = Yup.object().shape({
+    id: Yup.string().required("Required"),
     name: Yup.string().required("Required"),
     path: Yup.string().required("Required")
 });

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -17,7 +17,7 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
 
     const snackbarController = useSnackbarController();
 
-    const code = "const " + camelCase(collection.name) + "Collection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
+    const code = "import { EntityCollection } from \"firecms\";\n\nconst " + camelCase(collection.name) + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>
@@ -60,7 +60,7 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
                     e.preventDefault();
                     snackbarController.open({
                         type: "success",
-                        message: `Copied}`
+                        message: `Copied`
                     })
                     return navigator.clipboard.writeText(code);
                 }}>
@@ -95,13 +95,13 @@ function collectionToCode(collection: EntityCollection): object {
     }
 
     return {
+        id: collection.id,
         name: collection.name,
         singularName: collection.singularName,
-        description: collection.description,
         path: collection.path,
+        description: collection.description,
         editable: true,
         collectionGroup: collection.collectionGroup,
-        alias: collection.alias,
         icon: collection.icon,
         group: collection.group,
         customId: collection.customId,

package/src/ui/collection_editor/PropertySelectItem.tsx

@@ -1,4 +1,4 @@
-import { cn, PropertyConfig, FieldConfigBadge, SelectItem, Typography } from "@firecms/core";
+import { cn, FieldConfigBadge, PropertyConfig, SelectItem, Typography } from "@firecms/core";
 
 export interface PropertySelectItemProps {
     value: string;

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -33,14 +33,14 @@ export function SubcollectionsEditTab({
                                           configController,
                                           collectionInference,
                                           getUser,
-                                          parentPathSegments
+                                          parentCollectionIds
                                       }: {
     collection: PersistedCollection,
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
     getUser: (uid: string) => User | null;
-    parentPathSegments?: string[];
+    parentCollectionIds?: string[];
 }) {
 
     const { entityViews: contextEntityViews } = useFireCMSContext();
@@ -202,7 +202,7 @@ export function SubcollectionsEditTab({
                                           onAccept={() => {
                                               configController.deleteCollection({
                                                   path: subcollectionToDelete,
-                                                  parentPathSegments: [...(parentPathSegments ?? []), collection.path]
+                                                  parentCollectionIds: [...(parentCollectionIds ?? []), collection.path]
                                               });
                                               setSubcollectionToDelete(undefined);
                                           }}
@@ -228,7 +228,7 @@ export function SubcollectionsEditTab({
                 configController={configController}
                 parentCollection={collection}
                 collectionInference={collectionInference}
-                parentPathSegments={[...parentPathSegments ?? [], values.path]}
+                parentCollectionIds={[...parentCollectionIds ?? [], values.id]}
                 isNewCollection={false}
                 {...currentDialog}
                 getUser={getUser}

package/src/ui/collection_editor/properties/BlockPropertyField.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { AddIcon, ArrayProperty, Button, PropertyConfig, Paper, Property, Typography } from "@firecms/core";
+import { AddIcon, ArrayProperty, Button, Paper, Property, PropertyConfig, Typography } from "@firecms/core";
 import { getIn, useFormikContext } from "formik";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -3,10 +3,10 @@ import {
     AddIcon,
     BooleanSwitchWithLabel,
     Button,
-    PropertyConfig,
     MapProperty,
     Paper,
     Property,
+    PropertyConfig,
     Typography
 } from "@firecms/core";
 import { PropertyFormDialog } from "../PropertyEditView";

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Field, getIn, useFormikContext } from "formik";
 import {
     CircularProgress,
-    EntityCollection,
     getIconForView,
     NumberProperty,
     Select,
@@ -114,7 +113,7 @@ export function CollectionsSelect({
                 onChange={handleChange}
                 label={"Target collection"}
                 renderValue={(selected) => {
-                    const selectedCollection = collections.find(collection => collection.alias === selected || collection.path === selected);
+                    const selectedCollection = collections.find(collection => collection.id === selected || collection.path === selected);
                     if (!selectedCollection) return null;
                     const collectionIcon = getIconForView(selectedCollection);
                     return (
@@ -137,8 +136,8 @@ export function CollectionsSelect({
                                 .map((collection) => {
                                     const collectionIcon = getIconForView(collection);
                                     return <SelectItem
-                                        key={`${collection.alias ?? collection.path}-${group}`}
-                                        value={collection.alias ?? collection.path}>
+                                        key={`${collection.id ?? collection.path}-${group}`}
+                                        value={collection.id ?? collection.path}>
                                         <div className="flex flex-row">
                                             {collectionIcon}
                                             <Typography
@@ -158,8 +157,8 @@ export function CollectionsSelect({
                     {ungroupedCollections
                         .map((collection) => {
                             const collectionIcon = getIconForView(collection);
-                            return <SelectItem key={collection.alias ?? collection.path}
-                                               value={collection.alias ?? collection.path}>
+                            return <SelectItem key={collection.id ?? collection.path}
+                                               value={collection.id ?? collection.path}>
                                 <div className="flex flex-row">
                                     {collectionIcon}
                                     <Typography

package/src/ui/collection_editor/properties/RepeatPropertyField.tsx

@@ -1,14 +1,5 @@
 import React, { useCallback, useState } from "react";
-import {
-    ArrayProperty,
-    Button,
-    getFieldConfig,
-    Paper,
-    Property,
-    PropertyConfig,
-    Typography,
-    useFireCMSContext
-} from "@firecms/core";
+import { ArrayProperty, Button, getFieldConfig, Paper, Property, PropertyConfig, Typography } from "@firecms/core";
 import { Field, getIn, useFormikContext } from "formik";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { PropertyFieldPreview } from "../PropertyFieldPreview";

package/src/ui/collection_editor/templates/blog_template.ts

@@ -1,6 +1,7 @@
 import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const blogCollectionTemplate:EntityCollection = {
+    id: "blog",
     path: "blog",
     name: "Blog",
     singularName: "Blog entry",

package/src/ui/collection_editor/templates/products_template.ts

@@ -1,6 +1,7 @@
 import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const productsCollectionTemplate: EntityCollection = {
+    id: "products",
     path: "products",
     name: "Products",
     singularName: "Product",

package/src/ui/collection_editor/templates/users_template.ts

@@ -1,6 +1,7 @@
 import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const usersCollectionTemplate: EntityCollection = {
+    id: "users",
     path: "users",
     name: "Users",
     singularName: "User",

package/src/useCollectionEditorPlugin.tsx

@@ -4,6 +4,7 @@ import {
     FireCMSPlugin,
     joinCollectionLists,
     makePropertiesEditable,
+    ModifyCollectionProps,
     Properties,
     User
 } from "@firecms/core";
@@ -26,6 +27,8 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      */
     collectionConfigController: CollectionsConfigController;
 
+    modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | undefined;
+
     /**
      * Define what actions can be performed on the configuration.
      */
@@ -55,6 +58,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
 }
 
+
 /**
  * Use this hook to initialise the Collection Editor plugin.
  * This is likely the only hook you will need to use.
@@ -69,6 +73,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
 ({
      collectionConfigController,
+    modifyCollection,
      configPermissions,
      reservedGroups,
      extraView,
@@ -84,11 +89,12 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 makePropertiesEditable(c.properties as Properties);
                 c.subcollections?.forEach(markAsEditable);
             };
-            const editableCollections = collectionConfigController.collections ?? [];
-            editableCollections.forEach(markAsEditable);
-            return joinCollectionLists(editableCollections, collections);
+            const storedCollections = collectionConfigController.collections ?? [];
+            storedCollections.forEach(markAsEditable);
+            const joinCollectionLists1 = joinCollectionLists(collections, storedCollections, [], modifyCollection);
+            return joinCollectionLists1;
         },
-        [collectionConfigController.collections]);
+        [collectionConfigController.collections, modifyCollection]);
 
     return {
         name: "Collection Editor",