@firecms/collection_editor 3.0.0-canary.2 → 3.0.0-canary.200

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { EntityCollection, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
+import { EntityCollection, FieldCaption, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
 import {
     Autocomplete,
     AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
-    cn,
+    CloseIcon,
+    cls,
     Container,
     DebouncedTextField,
     Dialog,
@@ -20,8 +21,9 @@ import {
     useAutoComplete
 } from "@firecms/ui";
 
-import { FieldHelperView } from "./properties/FieldHelperView";
 import { Field, getIn, useFormex } from "@firecms/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
+import { LayoutModeSwitch } from "./LayoutModeSwitch";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -29,7 +31,8 @@ export function CollectionDetailsForm({
                                           existingPaths,
                                           existingIds,
                                           groups,
-                                          parentCollection
+                                          parentCollection,
+                                          children
                                       }: {
     isNewCollection: boolean,
     reservedGroups?: string[];
@@ -38,6 +41,7 @@ export function CollectionDetailsForm({
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
+    children?: React.ReactNode;
 }) {
 
     const groupRef = React.useRef<HTMLInputElement>(null);
@@ -52,9 +56,15 @@ export function CollectionDetailsForm({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const collectionEditor = useCollectionEditorController();
+
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
 
+    const updateDatabaseId = (databaseId: string) => {
+        setFieldValue("databaseId", databaseId ?? undefined);
+    }
+
     const updateName = (name: string) => {
         setFieldValue("name", name);
 
@@ -113,11 +123,15 @@ export function CollectionDetailsForm({
 
                 <div>
                     <div
-                        className="flex flex-row py-2 pt-3 items-center">
+                        className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
-                        <Tooltip title={"Change icon"}>
+                        <DefaultDatabaseField databaseId={values.databaseId}
+                                              onDatabaseIdUpdate={updateDatabaseId}/>
+
+                        <Tooltip title={"Change icon"}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -140,14 +154,15 @@ export function CollectionDetailsForm({
                             value={values.name ?? ""}
                             onChange={(e: any) => updateName(e.target.value)}
                             label={"Name"}
+                            autoFocus={true}
                             required
                             error={showErrors && Boolean(errors.name)}/>
-                        <FieldHelperView error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
-                        </FieldHelperView>
+                        <FieldCaption error={touched.name && Boolean(errors.name)}>
+                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
+                        </FieldCaption>
                     </div>
 
-                    <div className={cn("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
+                    <div className={cls("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
@@ -155,11 +170,11 @@ export function CollectionDetailsForm({
                                required
                                error={showErrors && Boolean(errors.path)}/>
 
-                        <FieldHelperView error={touched.path && Boolean(errors.path)}>
+                        <FieldCaption error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
                                 ? errors.path
                                 : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database"}
-                        </FieldHelperView>
+                        </FieldCaption>
 
                     </div>
 
@@ -190,17 +205,24 @@ export function CollectionDetailsForm({
                                 </AutocompleteItem>;
                             })}
                         </Autocomplete>
-                        <FieldHelperView>
-                            {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
-                        </FieldHelperView>
+                        <FieldCaption>
+                            {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}
+                        </FieldCaption>
+
+
                     </div>}
 
-                    <div className={"col-span-12"}>
+                    <LayoutModeSwitch
+                        className={"col-span-12"}
+                        value={values.openEntityMode ?? "side_panel"}
+                        onChange={(value) => setFieldValue("openEntityMode", value)}/>
+
+                    <div className={"col-span-12 mt-8"}>
                         <ExpandablePanel
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
                             title={
-                                <div className="flex flex-row text-gray-500">
+                                <div className="flex flex-row text-surface-500">
                                     <SettingsIcon/>
                                     <Typography variant={"subtitle2"}
                                                 className="ml-2">
@@ -216,9 +238,9 @@ export function CollectionDetailsForm({
                                            disabled={!isNewCollection}
                                            label={"Collection id"}
                                            error={showErrors && Boolean(errors.id)}/>
-                                    <FieldHelperView error={touched.id && Boolean(errors.id)}>
-                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection"}
-                                    </FieldHelperView>
+                                    <FieldCaption error={touched.id && Boolean(errors.id)}>
+                                        {touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path."}
+                                    </FieldCaption>
                                 </div>
 
                                 <div className={"col-span-12"}>
@@ -232,9 +254,38 @@ export function CollectionDetailsForm({
                                         }}
                                         value={values.singularName ?? ""}
                                         label={"Singular name"}/>
-                                    <FieldHelperView error={showErrors && Boolean(errors.singularName)}>
+                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
                                         {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
-                                    </FieldHelperView>
+                                    </FieldCaption>
+                                </div>
+                                <div className={"col-span-12"}>
+                                    <TextField
+                                        error={showErrors && Boolean(errors.sideDialogWidth)}
+                                        name={"sideDialogWidth"}
+                                        type={"number"}
+                                        aria-describedby={"sideDialogWidth-helper"}
+                                        onChange={(e) => {
+                                            setFieldTouched("sideDialogWidth", true);
+                                            const value = e.target.value;
+                                            if (!value) {
+                                                setFieldValue("sideDialogWidth", null);
+                                            } else if (!isNaN(Number(value))) {
+                                                setFieldValue("sideDialogWidth", Number(value));
+                                            }
+                                        }}
+                                        endAdornment={<IconButton
+                                            size={"small"}
+                                            onClick={() => {
+                                                setFieldValue("sideDialogWidth", null);
+                                            }}
+                                            disabled={!values.sideDialogWidth}>
+                                            <CloseIcon size={"small"}/>
+                                        </IconButton>}
+                                        value={values.sideDialogWidth ?? ""}
+                                        label={"Side dialog width"}/>
+                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
+                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px"}
+                                    </FieldCaption>
                                 </div>
                                 <div className={"col-span-12"}>
                                     <TextField
@@ -247,14 +298,16 @@ export function CollectionDetailsForm({
                                         aria-describedby="description-helper-text"
                                         label="Description"
                                     />
-                                    <FieldHelperView error={showErrors && Boolean(errors.description)}>
+                                    <FieldCaption error={showErrors && Boolean(errors.description)}>
                                         {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
 
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="defaultSize"
+                                        size={"large"}
+                                        fullWidth={true}
                                         label="Default row size"
                                         position={"item-aligned"}
                                         onChange={handleChange}
@@ -273,8 +326,10 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
-                                        label="Data IDs generation"
+                                        label="Document IDs generation"
                                         position={"item-aligned"}
+                                        size={"large"}
+                                        fullWidth={true}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {
                                             if (v === "code_defined")
@@ -316,11 +371,11 @@ export function CollectionDetailsForm({
                                         onValueChange={(v) => setFieldValue("collectionGroup", v)}
                                         value={values.collectionGroup ?? false}
                                     />
-                                    <FieldHelperView>
+                                    <FieldCaption>
                                         A collection group consists of all collections with the same path. This allows
                                         you
                                         to query over multiple collections at once.
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
                                 <div className={"col-span-12"}>
                                     <BooleanSwitchWithLabel
@@ -329,15 +384,19 @@ export function CollectionDetailsForm({
                                         onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
                                         value={values.textSearchEnabled ?? false}
                                     />
-                                    <FieldHelperView>
+                                    <FieldCaption>
                                         Allow text search for this collection. If you have not specified a text search
                                         delegate, this will use the built-in local text search. This is not recommended
                                         for large collections, as it may incur in performance and cost issues.
-                                    </FieldHelperView>
+                                    </FieldCaption>
                                 </div>
+
+
                             </div>
                         </ExpandablePanel>
 
+                        {children}
+
                     </div>
 
                 </div>
@@ -364,3 +423,20 @@ export function CollectionDetailsForm({
         </div>
     );
 }
+
+function DefaultDatabaseField({
+                                  databaseId,
+                                  onDatabaseIdUpdate
+                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    return <Tooltip title={"Database ID"}
+                    side={"top"}
+                    align={"start"}>
+        <TextField size={"small"}
+                   invisible={true}
+                   inputClassName={"text-end"}
+                   value={databaseId ?? ""}
+                   onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
+                   placeholder={"(default)"}></TextField>
+    </Tooltip>
+}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
+    ConfirmationDialog,
+    Entity,
     EntityCollection,
     ErrorView,
     isPropertyBuilder,
@@ -25,17 +27,19 @@ import {
 import {
     ArrowBackIcon,
     Button,
-    cn,
+    CheckIcon,
+    cls,
     coolIconKeys,
     defaultBorderMixin,
     Dialog,
     DialogActions,
     DialogContent,
-    DoneIcon,
+    DialogTitle,
     IconButton,
     LoadingButton,
     Tab,
-    Tabs
+    Tabs,
+    Typography
 } from "@firecms/ui";
 import { YupSchema } from "./CollectionYupValidation";
 import { CollectionDetailsForm } from "./CollectionDetailsForm";
@@ -76,9 +80,10 @@ 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;
+    existingEntities?: Entity<any>[];
 }
 
 export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
@@ -88,13 +93,13 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
     const [formDirty, setFormDirty] = React.useState<boolean>(false);
     const [unsavedChangesDialogOpen, setUnsavedChangesDialogOpen] = React.useState<boolean>(false);
 
-    const handleCancel = useCallback(() => {
+    const handleCancel = () => {
         if (!formDirty) {
             props.handleClose(undefined);
         } else {
             setUnsavedChangesDialogOpen(true);
         }
-    }, [formDirty, props.handleClose]);
+    };
 
     useEffect(() => {
         if (!open) {
@@ -112,6 +117,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
+            <DialogTitle hidden>Collection editor</DialogTitle>
             {open && <CollectionEditor {...props}
                                        handleCancel={handleCancel}
                                        setFormDirty={setFormDirty}/>}
@@ -136,7 +142,7 @@ type EditorView = "welcome"
     | "extra_view"
     | "subcollections";
 
-export function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
     setFormDirty: (dirty: boolean) => void
 }) {
@@ -154,14 +160,14 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
     const collectionsInThisLevel = (props.parentCollection ? props.parentCollection.subcollections : collections) ?? [];
     const existingPaths = collectionsInThisLevel.map(col => col.path.trim().toLowerCase());
     const existingIds = collectionsInThisLevel.map(col => col.id?.trim().toLowerCase()).filter(Boolean) as string[];
-    const [collection, setCollection] = React.useState<PersistedCollection<M> | undefined>();
+    const [collection, setCollection] = React.useState<PersistedCollection<any> | undefined>();
     const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
 
     useEffect(() => {
         try {
             if (navigation.initialised) {
                 if (props.editedCollectionId) {
-                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
+                    setCollection(navigation.getCollectionFromPaths([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
                 } else {
                     setCollection(undefined);
                 }
@@ -170,7 +176,8 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
         } catch (e) {
             console.error(e);
         }
-    }, [navigation.getCollectionFromPaths, props.editedCollectionId, props.parentCollectionIds, navigation.initialised]);
+    }, [props.editedCollectionId, props.parentCollectionIds, navigation.initialised, navigation.getCollectionFromPaths]);
+
     if (!topLevelNavigation) {
         throw Error("Internal: Navigation not ready in collection editor");
     }
@@ -186,14 +193,14 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
         }
         : undefined;
 
-    const initialValues: PersistedCollection<M> = initialCollection
+    const initialValues: PersistedCollection<any> = initialCollection
         ? applyPropertyConfigs(initialCollection, propertyConfigs)
         : {
             id: initialValuesProp?.path ?? randomString(16),
             path: initialValuesProp?.path ?? "",
             name: initialValuesProp?.name ?? "",
             group: initialValuesProp?.group ?? "",
-            properties: {} as PropertiesOrBuilders<M>,
+            properties: {} as PropertiesOrBuilders,
             propertiesOrder: [],
             icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
             ownerId: authController.user?.uid ?? ""
@@ -243,7 +250,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                                                      setCollection,
                                                                      initialValues,
                                                                      propertyConfigs,
-                                                                     groups
+                                                                     groups,
+                                                                     existingEntities
                                                                  }: CollectionEditorDialogProps & {
                                                                      handleCancel: () => void,
                                                                      setFormDirty: (dirty: boolean) => void,
@@ -272,6 +280,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     const saveCollection = (updatedCollection: PersistedCollection<M>): Promise<boolean> => {
         const id = updatedCollection.id || updatedCollection.path;
+
         return configController.saveCollection({
             id,
             collectionData: updatedCollection,
@@ -293,7 +302,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             });
     };
 
-    const setNextMode = useCallback(() => {
+    const setNextMode = () => {
         if (currentView === "details") {
             if (importConfig.inUse) {
                 setCurrentView("import_data_saving");
@@ -314,14 +323,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             setCurrentView("details");
         }
 
-    }, [currentView, importConfig.inUse, extraView]);
+    };
 
-    const doCollectionInference = useCallback((collection: PersistedCollection<any>) => {
+    const doCollectionInference = (collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
-        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentCollectionIds ?? []);
-    }, [collectionInference, parentCollectionIds]);
+        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPaths ?? []);
+    };
 
-    const inferCollectionFromData = useCallback(async (newCollection: PersistedCollection<M>) => {
+    const inferCollectionFromData = async (newCollection: PersistedCollection<M>) => {
 
         try {
             if (!doCollectionInference) {
@@ -365,15 +374,15 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             });
             return newCollection;
         }
-    }, [parentCollectionIds, doCollectionInference]);
+    };
 
     const onSubmit = (newCollectionState: PersistedCollection<M>, formexController: FormexController<PersistedCollection<M>>) => {
-        console.log("Submitting collection", newCollectionState);
+        console.debug("Submitting collection", newCollectionState);
         try {
 
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
-                    formexController.resetForm({ values: initialValues });
+                    formexController.resetForm();
                     handleClose(newCollectionState);
                 });
                 return;
@@ -462,7 +471,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const formController = useCreateFormex<PersistedCollection<M>>({
         initialValues,
         onSubmit,
-        validation
+        validation,
+        debugId: "COLLECTION_EDITOR"
     });
 
     const {
@@ -473,31 +483,43 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         submitCount
     } = formController;
 
-    const path = values.path ?? editedCollectionId;
+    // TODO: getting data is only working in root collections with this code
+    const path = values.path;
     const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
     const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
 
     const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
-    const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
-    const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath, parentPaths ?? []) : undefined;
+    const resolvedPath = !pathError ? navigation.resolveIdsFrom(updatedFullPath) : undefined;
+    const getDataWithPath = resolvedPath && getData ? async () => {
+        const data = await getData(resolvedPath, parentPaths ?? []);
+        if (existingEntities) {
+            const existingData = existingEntities.map(e => e.values);
+            data.push(...existingData);
+        }
+        return data;
+    } : undefined;
 
     useEffect(() => {
         setFormDirty(dirty);
     }, [dirty]);
 
-    function onImportDataSet(data: object[]) {
+    function onImportDataSet(data: object[], propertiesOrder?: string[]) {
         importConfig.setInUse(true);
         buildEntityPropertiesFromData(data, getInferenceType)
             .then((properties) => {
                 const res = cleanPropertiesFromImport(properties);
 
-                setFieldValue("properties", res.properties);
-                setFieldValue("propertiesOrder", Object.keys(res.properties));
-
                 importConfig.setIdColumn(res.idColumn);
                 importConfig.setImportData(data);
                 importConfig.setHeadersMapping(res.headersMapping);
+                const filteredHeadingsOrder = ((propertiesOrder ?? [])
+                    .filter((key) => res.headersMapping[key]) as string[]) ?? Object.keys(res.properties);
+                importConfig.setHeadingsOrder(filteredHeadingsOrder);
                 importConfig.setOriginProperties(res.properties);
+
+                const mappedHeadings = (propertiesOrder ?? []).map((key) => res.headersMapping[key]).filter(Boolean) as string[] ?? Object.keys(res.properties);
+                setFieldValue("properties", res.properties);
+                setFieldValue("propertiesOrder", mappedHeadings);
             });
     }
 
@@ -513,14 +535,30 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     };
 
     const editable = collection?.editable === undefined || collection?.editable === true;
+    // @ts-ignore
+    const isMergedCollection = collection?.merged ?? false;
     const collectionEditable = editable || isNewCollection;
 
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = () => {
+        if (!collection) return;
+        configController?.deleteCollection({ id: collection.id }).then(() => {
+            setDeleteRequested(false);
+            handleCancel();
+            snackbarController.open({
+                message: "Collection deleted",
+                type: "success"
+            });
+        });
+    };
+
     return <DialogContent fullHeight={true}>
         <Formex value={formController}>
 
             <>
                 {!isNewCollection && <Tabs value={currentView}
-                                           className={cn(defaultBorderMixin, "justify-end bg-gray-50 dark:bg-gray-950 border-b")}
+                                           innerClassName={cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b")}
                                            onValueChange={(v) => setCurrentView(v as EditorView)}>
                     <Tab value={"details"}>
                         Details
@@ -535,7 +573,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                 <form noValidate
                       onSubmit={formController.handleSubmit}
-                      className={cn(
+                      className={cls(
                           isNewCollection ? "h-full" : "h-[calc(100%-48px)]",
                           "flex-grow flex flex-col relative")}>
 
@@ -550,9 +588,10 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "welcome" &&
                         <CollectionEditorWelcomeView
                             path={path}
-                            onContinue={(importData) => {
+                            onContinue={(importData, propertiesOrder) => {
+                                // console.log("Import data", importData, propertiesOrder)
                                 if (importData) {
-                                    onImportDataSet(importData);
+                                    onImportDataSet(importData, propertiesOrder);
                                     setCurrentView("import_data_mapping");
                                 } else {
                                     setCurrentView("details");
@@ -575,6 +614,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "import_data_saving" && importConfig &&
                         <ImportSaveInProgress importConfig={importConfig}
                                               collection={values}
+                                              path={path}
                                               onImportSuccess={async (importedCollection) => {
                                                   snackbarController.open({
                                                       type: "info",
@@ -592,7 +632,18 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             groups={groups}
                             parentCollectionIds={parentCollectionIds}
                             parentCollection={parentCollection}
-                            isNewCollection={isNewCollection}/>}
+                            isNewCollection={isNewCollection}>
+                            {!isNewCollection && isMergedCollection && <div className={"flex flex-col gap-4 mt-8"}>
+                                <Typography variant={"body2"} color={"secondary"}>This collection is defined in code.
+                                    The changes done in this editor will override the properties defined in code.
+                                    You can delete the overridden values to revert to the state defined in code.
+                                </Typography>
+                                <Button variant={"neutral"}
+                                        onClick={() => {
+                                            setDeleteRequested(true);
+                                        }}>Reset to code</Button>
+                            </div>}
+                        </CollectionDetailsForm>}
 
                     {currentView === "subcollections" && collection &&
                         <SubcollectionsEditTab
@@ -704,7 +755,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 loading={isSubmitting}
                                 disabled={isSubmitting || (currentView === "details" && !validValues)}
                                 startIcon={currentView === "properties"
-                                    ? <DoneIcon/>
+                                    ? <CheckIcon/>
                                     : undefined}
                             >
                                 {currentView === "details" && "Next"}
@@ -726,18 +777,35 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
         </Formex>
 
+        <ConfirmationDialog
+            open={deleteRequested}
+            onAccept={deleteCollection}
+            onCancel={() => setDeleteRequested(false)}
+            title={<>Delete the stored config?</>}
+            body={<> This will <b>not
+                delete any data</b>, only
+                the stored config, and reset to the code state.</>}/>
+
     </DialogContent>
 
 }
 
 function applyPropertyConfigs<M extends Record<string, any> = any>(collection: PersistedCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): PersistedCollection<M> {
-    const { properties, ...rest } = collection;
+    const {
+        properties,
+        ...rest
+    } = collection;
     const propertiesResult: PropertiesOrBuilders<any> = {};
-    Object.keys(properties).forEach((key) => {
-        propertiesResult[key] = applyPropertiesConfig(properties[key] as PropertyOrBuilder, propertyConfigs);
-    });
+    if (properties) {
+        Object.keys(properties).forEach((key) => {
+            propertiesResult[key] = applyPropertiesConfig(properties[key] as PropertyOrBuilder, propertyConfigs);
+        });
+    }
 
-    return { ...rest, properties: propertiesResult };
+    return {
+        ...rest,
+        properties: propertiesResult
+    };
 }
 
 function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Record<string, PropertyConfig<any>>) {
@@ -757,7 +825,10 @@ function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Rec
                 Object.keys(internalProperty.properties).forEach((key) => {
                     properties[key] = applyPropertiesConfig(((internalProperty as MapProperty).properties as Properties)[key] as Property, propertyConfigs);
                 });
-                internalProperty = { ...internalProperty, properties };
+                internalProperty = {
+                    ...internalProperty,
+                    properties
+                };
             }
 
         }