@firecms/collection_editor 3.0.0-beta.10 → 3.0.0-beta.12

package/dist/types/collection_editor_controller.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
 import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
@@ -36,13 +35,4 @@ export interface CollectionEditorController {
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
     getPathSuggestions?: (path: string) => Promise<string[]>;
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{
-            databaseId?: string;
-            onDatabaseIdUpdate: (databaseId: string) => void;
-        }>;
-    };
 }

package/dist/types/config_permissions.d.ts

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

package/dist/types/persisted_collection.d.ts

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

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

@@ -1,5 +1,6 @@
+import React from "react";
 import { EntityCollection } from "@firecms/core";
-export declare function CollectionDetailsForm({ isNewCollection, reservedGroups, existingPaths, existingIds, groups, parentCollection }: {
+export declare function CollectionDetailsForm({ isNewCollection, reservedGroups, existingPaths, existingIds, groups, parentCollection, children }: {
     isNewCollection: boolean;
     reservedGroups?: string[];
     existingPaths?: string[];
@@ -7,4 +8,5 @@ export declare function CollectionDetailsForm({ isNewCollection, reservedGroups,
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
+    children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare function LayoutModeSwitch({ value, onChange, className }: {
+    value: "side_panel" | "full_screen";
+    onChange: (value: "side_panel" | "full_screen") => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionEditorPlugin.d.ts

@@ -4,7 +4,7 @@ import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
-export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
     /**
      * Firebase app where the configuration is saved.
      */
@@ -12,7 +12,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     /**
      * Define what actions can be performed on the configuration.
      */
-    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+    configPermissions?: CollectionEditorPermissionsBuilder<USER, EC>;
     /**
      * The words you define here will not be allowed to be used as group
      * names when creating collections.
@@ -28,17 +28,8 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     getPathSuggestions?: (path?: string) => Promise<string[]>;
     collectionInference?: CollectionInference;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
-    getUser?: (uid: string) => UserType | null;
+    getUser?: (uid: string) => USER | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{
-            databaseId?: string;
-            onDatabaseIdUpdate: (databaseId: string) => void;
-        }>;
-    };
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -51,5 +42,5 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, components }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
 export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;

package/dist/utils/collections.d.ts

@@ -3,4 +3,4 @@ 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>[];
+export declare const mergeCollections: (baseCollections: EntityCollection[], backendCollections?: PersistedCollection[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void) => EntityCollection<any, any>[];

package/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.12",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-beta.10",
-    "@firecms/data_import": "^3.0.0-beta.10",
-    "@firecms/data_import_export": "^3.0.0-beta.10",
-    "@firecms/formex": "^3.0.0-beta.10",
-    "@firecms/schema_inference": "^3.0.0-beta.10",
-    "@firecms/ui": "^3.0.0-beta.10",
+    "@firecms/data_export": "^3.0.0-beta.12",
+    "@firecms/data_import": "^3.0.0-beta.12",
+    "@firecms/data_import_export": "^3.0.0-beta.12",
+    "@firecms/formex": "^3.0.0-beta.12",
+    "@firecms/schema_inference": "^3.0.0-beta.12",
+    "@firecms/ui": "^3.0.0-beta.12",
+    "@hello-pangea/dnd": "^17.0.0",
     "json5": "^2.2.3",
-    "prism-react-renderer": "^2.4.0"
+    "prism-react-renderer": "^2.4.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^6.25.1",
-    "react-router-dom": "^6.25.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0"
   },
   "exports": {
     ".": {
@@ -50,15 +51,17 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "beta",
     "jest": "^29.7.0",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.26.2",
+    "react-router": "^6.28.2",
+    "react-router-dom": "^6.28.2",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.8"
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14"
   },
   "files": [
     "dist",
@@ -67,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f844c3f86094efec6c33313c3f106f30cdcd309f"
+  "gitHead": "8de3edb4560643922fe44e9c357985f64c3951c1"
 }

package/src/ConfigControllerProvider.tsx

@@ -57,13 +57,6 @@ export interface ConfigControllerProviderProps {
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
-    };
-
 }
 
 export const ConfigControllerProvider = React.memo(
@@ -78,7 +71,6 @@ export const ConfigControllerProvider = React.memo(
                                           getUser,
                                           getData,
                                           onAnalyticsEvent,
-                                          components
                                       }: PropsWithChildren<ConfigControllerProviderProps>) {
 
         const navigation = useNavigationController();
@@ -239,7 +231,6 @@ export const ConfigControllerProvider = React.memo(
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
                         getPathSuggestions,
-                        components
                     }}>
 
                     {children}
@@ -277,7 +268,7 @@ export const ConfigControllerProvider = React.memo(
                         getData={getData && currentPropertyDialog?.editedCollectionId
                             ? () => {
                                 console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
-                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId!)
+                                const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId!)
                                 return getData(resolvedPath, []);
                             }
                             : undefined}

package/src/types/collection_editor_controller.tsx

@@ -43,11 +43,4 @@ export interface CollectionEditorController {
 
     getPathSuggestions?: (path: string) => Promise<string[]>;
 
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }>;
-    };
-
 }

package/src/types/config_permissions.ts

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

package/src/types/persisted_collection.ts

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

package/src/ui/CollectionViewHeaderAction.tsx

@@ -29,7 +29,7 @@ export function CollectionViewHeaderAction({
             asChild={true}
             title={"Edit"}>
             <IconButton
-                className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
+                className={onHover ? "bg-white dark:bg-surface-950" : "hidden"}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         propertyKey,

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -14,6 +14,7 @@ export function HomePageEditorCollectionAction({
                                                    collection
                                                }: PluginHomePageActionsProps) {
 
+
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const configController = useCollectionsConfigController();

package/src/ui/NewCollectionButton.tsx

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

package/src/ui/PropertyAddColumnComponent.tsx

@@ -29,8 +29,8 @@ export function PropertyAddColumnComponent({
             asChild={true}
             title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
-                // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({
                         editedCollectionId: collection.id,

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -5,7 +5,7 @@ import {
     AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
-    ClearIcon,
+    CloseIcon,
     cls,
     Container,
     DebouncedTextField,
@@ -23,6 +23,7 @@ import {
 
 import { Field, getIn, useFormex } from "@firecms/formex";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
+import { LayoutModeSwitch } from "./LayoutModeSwitch";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -30,7 +31,8 @@ export function CollectionDetailsForm({
                                           existingPaths,
                                           existingIds,
                                           groups,
-                                          parentCollection
+                                          parentCollection,
+                                          children
                                       }: {
     isNewCollection: boolean,
     reservedGroups?: string[];
@@ -39,6 +41,7 @@ export function CollectionDetailsForm({
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
+    children?: React.ReactNode;
 }) {
 
     const groupRef = React.useRef<HTMLInputElement>(null);
@@ -88,8 +91,6 @@ export function CollectionDetailsForm({
         }
     }, [errors.id]);
 
-    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
-
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
@@ -126,8 +127,8 @@ export function CollectionDetailsForm({
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
-                        <DatabaseField databaseId={values.databaseId}
-                                       onDatabaseIdUpdate={updateDatabaseId}/>
+                        <DefaultDatabaseField databaseId={values.databaseId}
+                                              onDatabaseIdUpdate={updateDatabaseId}/>
 
                         <Tooltip title={"Change icon"}
                                  asChild={true}>
@@ -207,14 +208,21 @@ export function CollectionDetailsForm({
                         <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">
@@ -271,7 +279,7 @@ export function CollectionDetailsForm({
                                                 setFieldValue("sideDialogWidth", null);
                                             }}
                                             disabled={!values.sideDialogWidth}>
-                                            <ClearIcon size={"small"}/>
+                                            <CloseIcon size={"small"}/>
                                         </IconButton>}
                                         value={values.sideDialogWidth ?? ""}
                                         label={"Side dialog width"}/>
@@ -298,6 +306,8 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="defaultSize"
+                                        size={"large"}
+                                        fullWidth={true}
                                         label="Default row size"
                                         position={"item-aligned"}
                                         onChange={handleChange}
@@ -318,6 +328,8 @@ export function CollectionDetailsForm({
                                         name="customId"
                                         label="Document IDs generation"
                                         position={"item-aligned"}
+                                        size={"large"}
+                                        fullWidth={true}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {
                                             if (v === "code_defined")
@@ -378,9 +390,13 @@ export function CollectionDetailsForm({
                                         for large collections, as it may incur in performance and cost issues.
                                     </FieldCaption>
                                 </div>
+
+
                             </div>
                         </ExpandablePanel>
 
+                        {children}
+
                     </div>
 
                 </div>
@@ -416,7 +432,7 @@ function DefaultDatabaseField({
     return <Tooltip title={"Database ID"}
                     side={"top"}
                     align={"start"}>
-        <TextField size={"smallest"}
+        <TextField size={"small"}
                    invisible={true}
                    inputClassName={"text-end"}
                    value={databaseId ?? ""}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
+    ConfirmationDialog,
     Entity,
     EntityCollection,
     ErrorView,
@@ -26,17 +27,19 @@ import {
 import {
     ArrowBackIcon,
     Button,
+    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";
@@ -114,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}/>}
@@ -276,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,
@@ -377,7 +382,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
-                    formexController.resetForm({ values: initialValues });
+                    formexController.resetForm();
                     handleClose(newCollectionState);
                 });
                 return;
@@ -466,7 +471,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const formController = useCreateFormex<PersistedCollection<M>>({
         initialValues,
         onSubmit,
-        validation
+        validation,
+        debugId: "COLLECTION_EDITOR"
     });
 
     const {
@@ -483,7 +489,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
 
     const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
-    const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
+    const resolvedPath = !pathError ? navigation.resolveIdsFrom(updatedFullPath) : undefined;
     const getDataWithPath = resolvedPath && getData ? async () => {
         const data = await getData(resolvedPath, parentPaths ?? []);
         if (existingEntities) {
@@ -529,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={cls(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
@@ -610,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
@@ -722,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"}
@@ -744,6 +777,15 @@ 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>
 
 }

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -191,9 +191,9 @@ export function TemplateButton({
                 onClick={onClick}
                 className={cls(
                     "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-                    "text-gray-700 dark:text-slate-300",
+                    "text-surface-700 dark:text-surface-accent-300",
                     "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
-                    "border-gray-400 dark:border-gray-600 "
+                    "border-surface-400 dark:border-surface-600 "
                 )}
             >
                 {icon}

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -16,7 +16,7 @@ import {
 } from "@firecms/core";
 import {
     AddIcon,
-    AutoAwesomeIcon,
+    AutorenewIcon,
     Button,
     CircularProgress,
     cls,
@@ -233,12 +233,6 @@ export function CollectionPropertiesEditorForm({
 
         // If the id has changed we need to a little cleanup
         if (previousId && previousId !== id) {
-            console.debug("onPropertyChanged, id change", {
-                id,
-                property,
-                previousId,
-                namespace
-            })
 
             const previousFullId = getFullId(previousId, namespace);
             const previousPropertyPath = idToPropertiesPath(previousFullId);
@@ -316,7 +310,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900"}>
             <div className={cls(
                 "p-4 md:p-8 pb-20 md:pb-20",
                 "col-span-12 lg:col-span-5 h-full overflow-auto",
@@ -366,7 +360,7 @@ export function CollectionPropertiesEditorForm({
                                 variant={"filled"}
                                 disabled={inferringProperties}
                                 onClick={inferPropertiesFromData}>
-                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
+                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutorenewIcon/>}
                             </IconButton>
                         </Tooltip>}
                         <Tooltip title={"Add new property"}

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,8 +1,11 @@
 import { useCustomizationController } from "@firecms/core";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 
-export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
+export function EntityCustomViewsSelectDialog({
+                                                  open,
+                                                  onClose
+                                              }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
     const {
         entityViews,
     } = useCustomizationController();
@@ -10,10 +13,8 @@ export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean
     return <Dialog
         maxWidth={"md"}
         open={open}>
+        <DialogTitle>Select custom view</DialogTitle>
         <DialogContent className={"flex flex-col gap-4"}>
-            <Typography variant={"h6"}>
-                Select view
-            </Typography>
             {entityViews?.map((view) => {
                 return <Button
                     key={view.key}