@firecms/collection_editor 3.0.0-canary.5 → 3.0.0-canary.50

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -5,7 +5,7 @@ import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/forme
 import {
     DEFAULT_FIELD_CONFIGS,
     DeleteConfirmationDialog,
-    FieldConfigId,
+    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -228,6 +228,7 @@ export const PropertyForm = React.memo(
         a.includeIdAndName === b.includeIdAndName &&
         a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
         a.autoUpdateId === b.autoUpdateId &&
+        a.existingPropertyKeys === b.existingPropertyKeys &&
         a.existingProperty === b.existingProperty
 );
 
@@ -367,15 +368,15 @@ function PropertyEditFormFields({
                 }
             }
         }
-    }, [deferredValues, includeIdAndTitle, onPropertyChanged, propertyNamespace]);
+    }, [deferredValues, includeIdAndTitle, propertyNamespace]);
 
     useEffect(() => {
         if (values?.id && onError) {
             onError(values?.id, propertyNamespace, errors);
         }
-    }, [errors, onError, propertyNamespace, values?.id]);
+    }, [errors, propertyNamespace, values?.id]);
 
-    const onWidgetSelectChanged = (newSelectedWidgetId: FieldConfigId) => {
+    const onWidgetSelectChanged = (newSelectedWidgetId: PropertyConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
         setValues(updatePropertyFromWidget(values, newSelectedWidgetId, propertyConfigs));
         // Ugly hack to autofocus the name field
@@ -495,7 +496,7 @@ function PropertyEditFormFields({
                                 return <em>Select a property
                                     widget</em>;
                             }
-                            const key = value as FieldConfigId;
+                            const key = value as PropertyConfigId;
                             const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
                             const baseProperty = propertyConfig.property;
                             const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
@@ -524,7 +525,7 @@ function PropertyEditFormFields({
                             </div>
                         }}
                         onValueChange={(value) => {
-                            onWidgetSelectChanged(value as FieldConfigId);
+                            onWidgetSelectChanged(value as PropertyConfigId);
                         }}>
                         {displayedWidgets.map(([key, propertyConfig]) => {
                             const baseProperty = propertyConfig.property;

package/src/ui/collection_editor/PropertyTree.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import equal from "react-fast-compare"
 
 import {
@@ -48,7 +48,7 @@ export const PropertyTree = React.memo(
 
         const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
 
-        const onDragEnd = useCallback((result: any) => {
+        const onDragEnd = (result: any) => {
             // dropped outside the list
             if (!result.destination) {
                 return;
@@ -61,7 +61,7 @@ export const PropertyTree = React.memo(
             newPropertiesOrder.splice(endIndex, 0, removed);
             if (onPropertyMove)
                 onPropertyMove(newPropertiesOrder, namespace);
-        }, [namespace, onPropertyMove, propertiesOrder])
+        }
 
         return (
             <>

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -41,7 +41,7 @@ export function SubcollectionsEditTab({
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
 }) {
 

package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -1,21 +1,33 @@
-import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
-import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
-import { useEffect } from "react";
+import { convertDataToEntity, ImportConfig } from "@firecms/data_import_export";
+import { CircularProgressCenter, EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
+import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
 
-export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
+export function CollectionEditorImportDataPreview({
+                                                      importConfig,
+                                                      properties,
+                                                      propertiesOrder
+                                                  }: {
     importConfig: ImportConfig,
     properties: Properties,
     propertiesOrder: string[]
 }) {
 
-    useEffect(() => {
-        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+    const [loading, setLoading] = useState<boolean>(false);
+
+    async function loadEntities() {
+        // const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
         importConfig.setEntities(mappedData);
+    }
+
+    useEffect(() => {
+        loadEntities().finally(() => setLoading(false));
     }, []);
 
     const selectionController = useSelectionController();
+    if (loading)
+        return <CircularProgressCenter/>
 
     return <EntityCollectionTable
         title={<div>
@@ -31,7 +43,11 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
         filterable={false}
         sortable={false}
         selectionController={selectionController}
-        displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
-        properties={properties}/>
+        displayedColumnIds={propertiesOrder.map(p => ({
+            key: p,
+            disabled: false
+        }))}
+        properties={properties}
+        enablePopupIcon={false}/>
 
 }

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -6,7 +6,7 @@ import {
 } from "@firecms/data_import_export";
 import { getIn, useFormex } from "@firecms/formex";
 
-import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
+import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
 import { Container, Select, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -143,18 +143,20 @@ export function CollectionEditorImportMapping({
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
-                <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>
+                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
 
-                <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
-                                          idColumn={importConfig.idColumn}
-                                          originProperties={importConfig.originProperties}
+                <DataNewPropertiesMapping importConfig={importConfig}
                                           destinationProperties={values.properties as Properties}
-                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value)}
                                           buildPropertyView={({
                                                                   property,
                                                                   propertyKey,
-                                                                  importKey
+                                                                  importKey,
+                                                                  isIdColumn
                                                               }) => {
+                                              if (isIdColumn) {
+                                                  return <Typography> This column will be used as ID</Typography>
+                                              }
+
                                               return <ImportNewPropertyFieldPreview
                                                   property={property}
                                                   propertyKey={propertyKey}

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

@@ -1,12 +1,18 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
 import { PropertyFormDialog } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 import { PropertyTree } from "../PropertyTree";
 import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
 
-export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
+export function BlockPropertyField({
+                                       disabled,
+                                       getData,
+                                       allowDataInference,
+                                       propertyConfigs,
+                                       collectionEditable
+                                   }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
@@ -43,20 +49,20 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
 
         setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
         const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
-        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
         setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
 
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const addChildButton = <Button
         autoFocus
@@ -68,9 +74,9 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
         Add property to {values.name ?? "this block"}
     </Button>;
 
-    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
-    }, []);
+    };
 
     return (
         <>

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

@@ -2,8 +2,7 @@ import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
-import { FieldHelperView } from "./FieldHelperView";
-import { toSnakeCase, unslugify } from "@firecms/core";
+import { FieldCaption, toSnakeCase, unslugify } from "@firecms/core";
 
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
@@ -64,9 +63,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         disabled={disabled}
                         error={Boolean(nameError)}/>
 
-                    <FieldHelperView error={Boolean(nameError)}>
+                    <FieldCaption error={Boolean(nameError)}>
                         {nameError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
                 <div>
@@ -88,9 +87,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         required
                         size="small"
                         error={Boolean(idError)}/>
-                    <FieldHelperView error={Boolean(idError)}>
+                    <FieldCaption error={Boolean(idError)}>
                         {idError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
                 <div>
@@ -99,9 +98,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                            label={"Description"}
                            disabled={disabled}
                            error={Boolean(descriptionError)}/>
-                    <FieldHelperView error={Boolean(descriptionError)}>
+                    <FieldCaption error={Boolean(descriptionError)}>
                         {descriptionError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
             </div>

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

@@ -1,10 +1,9 @@
 import React from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { NumberProperty, StringProperty } from "@firecms/core";
+import { FieldCaption, NumberProperty, StringProperty } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function DateTimePropertyField({ disabled }: {
     disabled: boolean;
@@ -47,14 +46,14 @@ export function DateTimePropertyField({ disabled }: {
                     <SelectItem value={"date_time"}> Date/Time </SelectItem>
                     <SelectItem value={"date"}> Date </SelectItem>
                 </Select>
-                <FieldHelperView error={Boolean(modeError)}>
+                <FieldCaption error={Boolean(modeError)}>
                     {modeError}
-                </FieldHelperView>
+                </FieldCaption>
 
                 <Select name={autoValuePath}
                         disabled={disabled}
                         value={autoValueValue ?? ""}
-                        onValueChange={(v) => setFieldValue(autoValuePath, v)}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
                         renderValue={(v) => {
                             switch (v) {
                                 case "on_create":
@@ -67,13 +66,13 @@ export function DateTimePropertyField({ disabled }: {
                         }}
                         error={Boolean(autoValueError)}
                         label={"Automatic value"}>
-                    <SelectItem value={""}> None </SelectItem>
+                    <SelectItem value={"none"}> None </SelectItem>
                     <SelectItem value={"on_create"}> On create </SelectItem>
                     <SelectItem value={"on_update"}> On any update </SelectItem>
                 </Select>
-                <FieldHelperView error={Boolean(autoValueError)}>
+                <FieldCaption error={Boolean(autoValueError)}>
                     {autoValueError ?? "Update this field automatically when creating or updating the entity"}
-                </FieldHelperView>
+                </FieldCaption>
 
             </div>
 

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

@@ -1,11 +1,10 @@
-import React, { useCallback, useState } from "react";
-import { MapProperty, Property, PropertyConfig, } from "@firecms/core";
+import React, { useState } from "react";
+import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getIn, useFormex } from "@firecms/formex";
 import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
@@ -43,7 +42,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         setPropertyDialogOpen(false);
     };
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
@@ -59,16 +58,16 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
     const empty = !propertiesOrder || propertiesOrder.length < 1;
 
-    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
-    }, []);
+    };
 
     return (
         <>
@@ -113,9 +112,9 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}
                 />
-                <FieldHelperView>
+                <FieldCaption>
                     Set this flag to true if you want to display the children of this group as individual columns.
-                </FieldHelperView>
+                </FieldCaption>
             </div>
 
             <PropertyFormDialog

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

@@ -1,8 +1,7 @@
 import React from "react";
 import { Field, getIn, useFormex } from "@firecms/formex";
-import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
 import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function ReferencePropertyField({
                                            existing,
@@ -152,10 +151,10 @@ export function CollectionsSelect({
 
             </Select>
 
-            <FieldHelperView>
+            <FieldCaption>
                 You can only edit the reference collection upon field
                 creation.
-            </FieldHelperView>
+            </FieldCaption>
         </>
     );
 }

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

@@ -39,7 +39,6 @@ export function RepeatPropertyField({
 
     const onPropertyChanged = ({ id, property, namespace }:
                                    { id?: string, property: Property, namespace?: string }) => {
-        console.log("onPropertyChanged", id, property, namespace);
         setFieldValue("of", property);
     };
 

package/src/ui/collection_editor/properties/validation/StringPropertyValidation.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
-import { serializeRegExp } from "@firecms/core";
+import { FieldCaption, serializeRegExp } from "@firecms/core";
 import { DebouncedTextField, } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
-import { FieldHelperView } from "../FieldHelperView";
 import { SwitchControl } from "../../SwitchControl";
 
 export function StringPropertyValidation({
@@ -140,9 +139,9 @@ export function StringPropertyValidation({
                        disabled={disabled}
                        value={matchesStringValue}
                        error={Boolean(matchesError)}/>
-                <FieldHelperView error={Boolean(matchesError)}>
+                <FieldCaption error={Boolean(matchesError)}>
                     {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
-                </FieldHelperView>
+                </FieldCaption>
             </div>}
 
         </div>

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -1,6 +1,6 @@
-import { DEFAULT_FIELD_CONFIGS, FieldConfigId, PropertyConfig } from "@firecms/core";
+import { DEFAULT_FIELD_CONFIGS, PropertyConfigId, PropertyConfig } from "@firecms/core";
 
-export const supportedFieldsIds: FieldConfigId[] = [
+export const supportedFieldsIds: PropertyConfigId[] = [
     "text_field",
     "multiline",
     "markdown",
@@ -24,6 +24,6 @@ export const supportedFieldsIds: FieldConfigId[] = [
 ];
 
 export const supportedFields: Record<string, PropertyConfig> = Object.entries(DEFAULT_FIELD_CONFIGS)
-    .filter(([id]) => supportedFieldsIds.includes(id as FieldConfigId))
+    .filter(([id]) => supportedFieldsIds.includes(id as PropertyConfigId))
     .map(([id, config]) => ({ [id]: config }))
     .reduce((a, b) => ({ ...a, ...b }), {});

package/src/useCollectionEditorPlugin.tsx

@@ -4,16 +4,16 @@ import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
 import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
-import { NewCollectionCard } from "./ui/NewCollectionCard";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
-import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
-import { AddIcon, Button, Typography } from "@firecms/ui";
+import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
+import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
+import { NewCollectionCard } from "./ui/NewCollectionCard";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 
@@ -32,7 +32,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      * names when creating collections.
      * e.g. ["admin"]
      */
-    reservedGroups: string[];
+    reservedGroups?: string[];
 
     extraView?: {
         View: React.ComponentType<{
@@ -41,18 +41,16 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         icon: React.ReactNode
     };
 
-    pathSuggestions?: (path: string) => Promise<string[]>;
+    getPathSuggestions?: (path?: string) => Promise<string[]>;
 
     collectionInference?: CollectionInference;
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
-    getUser: (uid: string) => UserType | null;
+    getUser?: (uid: string) => UserType | null;
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
-    introMode?: "new_project" | "existing_project";
-
 }
 
 /**
@@ -62,18 +60,17 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param pathSuggestions
+ * @param getPathsSuggestions
  * @param getUser
  * @param collectionInference
  */
 export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
 ({
      collectionConfigController,
-     introMode,
      configPermissions,
      reservedGroups,
      extraView,
-     pathSuggestions,
+     getPathSuggestions,
      getUser,
      collectionInference,
      getData,
@@ -81,11 +78,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
-        name: "Collection Editor",
+        key: "collection_editor",
         loading: collectionConfigController.loading,
-        collections: {
-            CollectionActions: EditorCollectionAction
-        },
         provider: {
             Component: ConfigControllerProvider,
             props: {
@@ -94,7 +88,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 collectionInference,
                 reservedGroups,
                 extraView,
-                pathSuggestions,
+                getPathSuggestions,
                 getUser,
                 getData,
                 onAnalyticsEvent
@@ -102,21 +96,21 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         },
         homePage: {
             additionalActions: <NewCollectionButton/>,
-            additionalChildrenStart: introMode ? <IntroWidget introMode={introMode}/> : undefined,
-            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            additionalChildrenStart: <IntroWidget/>,
+            // additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
             CollectionActions: HomePageEditorCollectionAction,
-            AdditionalCards: introMode ? undefined : NewCollectionCard,
+            AdditionalCards: NewCollectionCard,
         },
         collectionView: {
+            CollectionActionsStart: EditorCollectionActionStart,
+            CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
         }
     };
 }
 
-export function IntroWidget({ introMode }: {
-    introMode?: "new_project" | "existing_project";
-}) {
+export function IntroWidget({}: {}) {
 
     const navigation = useNavigationController();
     if (!navigation.topLevelNavigation)
@@ -131,17 +125,19 @@ export function IntroWidget({ introMode }: {
         }).createCollections
         : true;
 
+    if (!navigation.initialised || navigation.collections === undefined || (navigation.collections ?? []).length > 0) {
+        return null;
+    }
+
     return (
-        <div className={"mt-8 flex flex-col mt-8 p-2"}>
-            <Typography variant={"h4"} className="mb-4">Welcome</Typography>
-            <Typography paragraph={true}>Your admin panel is ready ✌️</Typography>
-            <Typography paragraph={true}>
+        <Paper
+            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-slate-800 gap-2"}>
+            <Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
+            <Typography>
                 Start building collections in FireCMS easily. Map them to your existing
-                database data, import from files, or use our templates. Simplify your data management process
-                now.
+                database data, import from files, or use our templates.
             </Typography>
             {canCreateCollections && <Button
-                className={"mt-4"}
                 onClick={collectionEditorController && canCreateCollections
                     ? () => collectionEditorController.createCollection({
                         parentCollectionIds: [],
@@ -151,6 +147,9 @@ export function IntroWidget({ introMode }: {
                     : undefined}>
                 <AddIcon/>Create your first collection
             </Button>}
-        </div>
+            <Typography variant={"caption"} color={"secondary"}>
+                You can also define collections programmatically.
+            </Typography>
+        </Paper>
     );
 }

package/src/utils/collections.ts

@@ -0,0 +1,30 @@
+import {
+    EntityCollection,
+    joinCollectionLists,
+    makePropertiesEditable,
+    ModifyCollectionProps,
+    Properties
+} from "@firecms/core";
+import { PersistedCollection } from "../types/persisted_collection";
+
+/**
+ * Function in charge of merging collections defined in code with those stored in the backend.
+ */
+export const mergeCollections = (baseCollections: EntityCollection[],
+                                 backendCollections: PersistedCollection[],
+                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
+) => {
+
+    const markAsEditable = (c: PersistedCollection) => {
+        makePropertiesEditable(c.properties as Properties);
+        c.subcollections?.forEach(markAsEditable);
+    };
+    const storedCollections = backendCollections ?? [];
+    storedCollections.forEach(markAsEditable);
+
+    console.debug("Collections specified in code:", baseCollections);
+    console.debug("Collections stored in the backend", storedCollections);
+    const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
+    console.debug("Collections after joining:", result);
+    return result;
+}