@firecms/collection_editor 3.0.1 → 3.1.0-canary.02232f4

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -22,7 +22,8 @@ import {
     useCustomizationController,
     useNavigationController,
     User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation,
 } from "@firecms/core";
 import {
     ArrowBackIcon,
@@ -42,10 +43,11 @@ import {
     Typography
 } from "@firecms/ui";
 import { YupSchema } from "./CollectionYupValidation";
-import { CollectionDetailsForm } from "./CollectionDetailsForm";
+import { GeneralSettingsForm } from "./GeneralSettingsForm";
+import { DisplaySettingsForm } from "./DisplaySettingsForm";
 import { CollectionPropertiesEditorForm } from "./CollectionPropertiesEditorForm";
 import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
-import { SubcollectionsEditTab } from "./SubcollectionsEditTab";
+import { ExtendSettingsForm } from "./ExtendSettingsForm";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionEditorWelcomeView } from "./CollectionEditorWelcomeView";
 import { CollectionInference } from "../../types/collection_inference";
@@ -57,7 +59,9 @@ import { cleanPropertiesFromImport } from "./import/clean_import_data";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { Formex, FormexController, useCreateFormex } from "@firecms/formex";
 import { getFullIdPath } from "./util";
-import { EntityActionsEditTab } from "./EntityActionsEditTab";
+import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
+import { AIModifiedPathsProvider, useAIModifiedPaths } from "./AIModifiedPathsContext";
+import { CollectionOperation, CollectionGenerationCallback } from "../../api/generateCollectionApi";
 
 export interface CollectionEditorDialogProps {
     open: boolean;
@@ -67,6 +71,11 @@ export interface CollectionEditorDialogProps {
         path?: string,
         name?: string,
     }
+    /**
+     * A collection to duplicate from. If provided, the new collection will be
+     * pre-populated with the same properties (but with empty name, path, and id).
+     */
+    copyFrom?: PersistedCollection;
     editedCollectionId?: string;
     fullPath?: string; // full path of this particular collection, like `products/123/locales`
     parentCollectionIds?: string[]; // path ids of the parent collection, like [`products`]
@@ -84,9 +93,29 @@ export interface CollectionEditorDialogProps {
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
     existingEntities?: Entity<any>[];
+    /**
+     * Initial view to open when editing: "general", "display", or "properties".
+     * For new collections, this is ignored.
+     */
+    initialView?: "general" | "display" | "properties";
+    /**
+     * If true, auto-expand the Kanban configuration section.
+     */
+    expandKanban?: boolean;
+    /**
+     * Callback function for generating/modifying collections.
+     * The plugin is API-agnostic - the consumer provides the implementation.
+     */
+    generateCollection?: CollectionGenerationCallback;
+    /**
+     * Optional analytics callback
+     */
+    onAnalyticsEvent?: (event: string, params?: object) => void;
 }
 
 export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
+    const { t } = useTranslation();
+
 
     const open = props.open;
 
@@ -117,31 +146,32 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
-            <DialogTitle hidden>Collection editor</DialogTitle>
-            {open && <CollectionEditor {...props}
-                                       handleCancel={handleCancel}
-                                       setFormDirty={setFormDirty}/>}
-
-            <UnsavedChangesDialog
-                open={unsavedChangesDialogOpen}
-                handleOk={() => props.handleClose(undefined)}
-                handleCancel={() => setUnsavedChangesDialogOpen(false)}
-                body={"There are unsaved changes in this collection"}/>
-
+            <DialogTitle hidden>{t("collection_editor")}</DialogTitle>
+            <AIModifiedPathsProvider>
+                {open && <CollectionEditor {...props}
+                    handleCancel={handleCancel}
+                    setFormDirty={setFormDirty} />}
+
+                <UnsavedChangesDialog
+                    open={unsavedChangesDialogOpen}
+                    handleOk={() => props.handleClose(undefined)}
+                    handleCancel={() => setUnsavedChangesDialogOpen(false)}
+                    body={t("unsaved_changes_in_collection")} />
+            </AIModifiedPathsProvider>
         </Dialog>
     );
 }
 
 type EditorView = "welcome"
-    | "details"
+    | "general"
+    | "display"
     | "import_data_mapping"
     | "import_data_preview"
     | "import_data_saving"
     | "properties"
     | "loading"
     | "extra_view"
-    | "subcollections"
-    | "custom_actions";
+    | "extend";
 
 export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
@@ -157,7 +187,9 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
     } = navigation;
 
     const initialValuesProp = props.initialValues;
-    const includeTemplates = !initialValuesProp?.path && (props.parentCollectionIds ?? []).length === 0;
+    const copyFromProp = props.copyFrom;
+    // Skip templates when duplicating (copyFrom is provided)
+    const includeTemplates = !copyFromProp && !initialValuesProp?.path && (props.parentCollectionIds ?? []).length === 0;
     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[];
@@ -194,25 +226,36 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         }
         : undefined;
 
+    // Build initial values - handle copyFrom for duplication
     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,
-            propertiesOrder: [],
-            icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
-            ownerId: authController.user?.uid ?? ""
-        };
+        : copyFromProp
+            ? {
+                // When duplicating, copy all properties but clear identifiers
+                ...copyFromProp,
+                id: randomString(16),
+                path: "",
+                name: "",
+                subcollections: undefined, // Don't copy subcollections
+                ownerId: authController.user?.uid ?? ""
+            }
+            : {
+                id: initialValuesProp?.path ?? randomString(16),
+                path: initialValuesProp?.path ?? "",
+                name: initialValuesProp?.name ?? "",
+                group: initialValuesProp?.group ?? "",
+                properties: {} as PropertiesOrBuilders,
+                propertiesOrder: [],
+                icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
+                ownerId: authController.user?.uid ?? ""
+            };
 
     if (!initialLoadingCompleted) {
-        return <CircularProgressCenter/>;
+        return <CircularProgressCenter />;
     }
 
     if (!props.isNewCollection && (!navigation.initialised || !initialLoadingCompleted)) {
-        return <CircularProgressCenter/>;
+        return <CircularProgressCenter />;
     }
 
     return <CollectionEditorInternal
@@ -224,48 +267,53 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         collection={collection}
         setCollection={setCollection}
         groups={groups}
-        propertyConfigs={propertyConfigs}/>
+        propertyConfigs={propertyConfigs} />
 
 }
 
 function CollectionEditorInternal<M extends Record<string, any>>({
-                                                                     isNewCollection,
-                                                                     configController,
-                                                                     editedCollectionId,
-                                                                     parentCollectionIds,
-                                                                     fullPath,
-                                                                     collectionInference,
-                                                                     handleClose,
-                                                                     reservedGroups,
-                                                                     extraView,
-                                                                     handleCancel,
-                                                                     setFormDirty,
-                                                                     getUser,
-                                                                     parentCollection,
-                                                                     getData,
-                                                                     existingPaths,
-                                                                     existingIds,
-                                                                     includeTemplates,
-                                                                     collection,
-                                                                     setCollection,
-                                                                     initialValues,
-                                                                     propertyConfigs,
-                                                                     groups,
-                                                                     existingEntities
-                                                                 }: CollectionEditorDialogProps & {
-                                                                     handleCancel: () => void,
-                                                                     setFormDirty: (dirty: boolean) => void,
-                                                                     initialValues: PersistedCollection<M>,
-                                                                     existingPaths: string[],
-                                                                     existingIds: string[],
-                                                                     includeTemplates: boolean,
-                                                                     collection: PersistedCollection<M> | undefined,
-                                                                     setCollection: (collection: PersistedCollection<M>) => void,
-                                                                     propertyConfigs: Record<string, PropertyConfig<any>>,
-                                                                     groups: string[],
-                                                                 }
+    isNewCollection,
+    configController,
+    editedCollectionId,
+    parentCollectionIds,
+    fullPath,
+    collectionInference,
+    handleClose,
+    reservedGroups,
+    extraView,
+    handleCancel,
+    setFormDirty,
+    getUser,
+    parentCollection,
+    getData,
+    existingPaths,
+    existingIds,
+    includeTemplates,
+    collection,
+    setCollection,
+    initialValues,
+    propertyConfigs,
+    groups,
+    existingEntities,
+    initialView: initialViewProp,
+    expandKanban,
+    generateCollection,
+    onAnalyticsEvent
+}: CollectionEditorDialogProps & {
+    handleCancel: () => void,
+    setFormDirty: (dirty: boolean) => void,
+    initialValues: PersistedCollection<M>,
+    existingPaths: string[],
+    existingIds: string[],
+    includeTemplates: boolean,
+    collection: PersistedCollection<M> | undefined,
+    setCollection: (collection: PersistedCollection<M>) => void,
+    propertyConfigs: Record<string, PropertyConfig<any>>,
+    groups: (string | null)[],
+}
 ) {
 
+    const { t } = useTranslation();
     const importConfig = useImportConfig();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
@@ -273,7 +321,9 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     // Use this ref to store which properties have errors
     const propertyErrorsRef = useRef({});
 
-    const initialView = isNewCollection ? (includeTemplates ? "welcome" : "details") : "properties";
+    const initialView = isNewCollection
+        ? (includeTemplates ? "welcome" : "general")
+        : (initialViewProp ?? "properties");
     const [currentView, setCurrentView] = useState<EditorView>(initialView); // this view can edit either the details view or the properties one
 
     const [error, setError] = React.useState<Error | undefined>();
@@ -296,14 +346,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                 console.error(e);
                 snackbarController.open({
                     type: "error",
-                    message: "Error persisting collection: " + (e.message ?? "Details in the console")
+                    message: t("error_persisting_collection", { error: e.message ?? t("details_in_console") })
                 });
                 return false;
             });
     };
 
     const setNextMode = () => {
-        if (currentView === "details") {
+        if (currentView === "general") {
             if (importConfig.inUse) {
                 setCurrentView("import_data_saving");
             } else if (extraView) {
@@ -312,22 +362,29 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                 setCurrentView("properties");
             }
         } else if (currentView === "welcome") {
-            setCurrentView("details");
+            setCurrentView("general");
         } else if (currentView === "import_data_mapping") {
             setCurrentView("import_data_preview");
         } else if (currentView === "import_data_preview") {
-            setCurrentView("details");
+            setCurrentView("general");
         } else if (currentView === "extra_view") {
             setCurrentView("properties");
         } else {
-            setCurrentView("details");
+            setCurrentView("general");
         }
 
     };
 
     const doCollectionInference = collectionInference ? (collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
-        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPaths ?? [], collection.databaseId);
+        return collectionInference?.(
+            collection.path,
+            collection.collectionGroup ?? false,
+            parentPaths ?? [],
+            collection.databaseId,
+            collection.initialFilter,
+            collection.initialSort
+        );
     } : undefined;
 
     const inferCollectionFromData = async (newCollection: PersistedCollection<M>) => {
@@ -370,7 +427,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             console.error(e);
             snackbarController.open({
                 type: "error",
-                message: "Error inferring collection: " + (e.message ?? "Details in the console")
+                message: t("error_inferring_collection", { error: e.message ?? t("details_in_console") })
             });
             return newCollection;
         }
@@ -382,6 +439,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
+                    aiModifiedPaths?.clearAllPaths();
                     formexController.resetForm();
                     handleClose(newCollectionState);
                 });
@@ -391,7 +449,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             if (currentView === "welcome") {
                 setNextMode();
                 formexController.resetForm({ values: newCollectionState });
-            } else if (currentView === "details") {
+            } else if (currentView === "general") {
                 if (extraView || importConfig.inUse) {
                     formexController.resetForm({ values: newCollectionState });
                     setNextMode();
@@ -406,8 +464,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 }
                             });
                         }).finally(() => {
-                        setNextMode();
-                    });
+                            setNextMode();
+                        });
                 } else {
                     formexController.resetForm({ values: newCollectionState });
                     setNextMode();
@@ -432,7 +490,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         } catch (e: any) {
             snackbarController.open({
                 type: "error",
-                message: "Error persisting collection: " + (e.message ?? "Details in the console")
+                message: t("error_persisting_collection", { error: e.message ?? t("details_in_console") })
             });
             console.error(e);
             formexController.resetForm({ values: newCollectionState });
@@ -442,7 +500,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const validation = (col: PersistedCollection) => {
 
         let errors: Record<string, any> = {};
-        const schema = (currentView === "properties" || currentView === "subcollections" || currentView === "details") && YupSchema;
+        const schema = (currentView === "properties" || currentView === "extend" || currentView === "general") && YupSchema;
         if (schema) {
             try {
                 schema.validateSync(col, { abortEarly: false });
@@ -455,12 +513,12 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         if (currentView === "properties") {
             errors = { ...errors, ...propertyErrorsRef.current };
         }
-        if (currentView === "details") {
-            const pathError = validatePath(col.path, isNewCollection, existingPaths, col.id);
+        if (currentView === "general") {
+            const pathError = validatePath(t, col.path, isNewCollection, existingPaths, col.id);
             if (pathError) {
                 errors.path = pathError;
             }
-            const idError = validateId(col.id, isNewCollection, existingPaths, existingIds);
+            const idError = validateId(t, col.id, isNewCollection, existingPaths, existingIds);
             if (idError) {
                 errors.id = idError;
             }
@@ -483,15 +541,15 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         submitCount
     } = formController;
 
-    // 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 pathError = validatePath(t, path, isNewCollection, existingPaths, values.id);
 
     const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
     const resolvedPath = !pathError ? navigation.resolveIdsFrom(updatedFullPath) : undefined;
+
     const getDataWithPath = resolvedPath && getData ? async () => {
-        const data = await getData(resolvedPath, parentPaths ?? []);
+        const data = await getData!(resolvedPath, parentPaths ?? []);
         if (existingEntities) {
             const existingData = existingEntities.map(e => e.values);
             data.push(...existingData);
@@ -547,7 +605,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             setDeleteRequested(false);
             handleCancel();
             snackbarController.open({
-                message: "Collection deleted",
+                message: t("collection_deleted"),
                 type: "success"
             });
         });
@@ -558,7 +616,16 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             onImportDataSet(importData, propertiesOrder);
             setCurrentView("import_data_mapping");
         } else {
-            setCurrentView("details");
+            setCurrentView("general");
+        }
+    };
+
+    const aiModifiedPaths = useAIModifiedPaths();
+
+    const handleAIGenerated = (generatedCollection: EntityCollection, operations?: CollectionOperation[]) => {
+        formController.setValues(generatedCollection as PersistedCollection<M>);
+        if (operations && aiModifiedPaths) {
+            aiModifiedPaths.addModifiedPaths(operations);
         }
     };
 
@@ -566,99 +633,102 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         <Formex value={formController}>
 
             <>
-                {!isNewCollection && <Tabs value={currentView}
-                                           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
-                    </Tab>
-                    <Tab value={"properties"}>
-                        Properties
-                    </Tab>
-                    <Tab value={"subcollections"}>
-                        Additional views
-                    </Tab>
-                    <Tab value={"custom_actions"}>
-                        Custom actions
-                    </Tab>
-                </Tabs>}
+                {!isNewCollection && <div className={cls("px-4 py-2 w-full flex items-center justify-end gap-2 bg-surface-50 dark:bg-surface-950 border-b", defaultBorderMixin)}>
+                    {generateCollection && (
+                        <AICollectionGeneratorPopover
+                            existingCollection={values}
+                            onGenerated={handleAIGenerated}
+                            generateCollection={generateCollection}
+                            onAnalyticsEvent={onAnalyticsEvent}
+                        />
+                    )}
+                    <Tabs value={currentView}
+                        onValueChange={(v) => setCurrentView(v as EditorView)}>
+                        <Tab value={"general"}>
+                            {t("tab_general")}
+                        </Tab>
+                        <Tab value={"display"}>
+                            {t("tab_display")}
+                        </Tab>
+                        <Tab value={"properties"}>
+                            {t("tab_properties")}
+                        </Tab>
+                        <Tab value={"extend"}>
+                            {t("tab_extend")}
+                        </Tab>
+                    </Tabs>
+                </div>}
 
                 <form noValidate
-                      onSubmit={formController.handleSubmit}
-                      className={cls(
-                          isNewCollection ? "h-full" : "h-[calc(100%-48px)]",
-                          "flex-grow flex flex-col relative")}>
+                    onSubmit={formController.handleSubmit}
+                    className={cls(
+                        isNewCollection ? "h-full" : "h-[calc(100%-48px)]",
+                        "flex-grow flex flex-col relative")}>
 
                     {currentView === "loading" &&
-                        <CircularProgressCenter/>}
+                        <CircularProgressCenter />}
 
                     {currentView === "extra_view" &&
                         path &&
                         extraView?.View &&
-                        <extraView.View path={path}/>}
+                        <extraView.View path={path} />}
 
                     {currentView === "welcome" &&
                         <CollectionEditorWelcomeView
                             path={path}
                             onContinue={onWelcomeScreenContinue}
                             existingCollectionPaths={existingPaths}
-                            parentCollection={parentCollection}/>}
+                            parentCollection={parentCollection}
+                            generateCollection={generateCollection}
+                            onAnalyticsEvent={onAnalyticsEvent} />}
 
                     {currentView === "import_data_mapping" && importConfig &&
                         <CollectionEditorImportMapping importConfig={importConfig}
-                                                       collectionEditable={collectionEditable}
-                                                       propertyConfigs={propertyConfigs}/>}
+                            collectionEditable={collectionEditable}
+                            propertyConfigs={propertyConfigs} />}
 
                     {currentView === "import_data_preview" && importConfig &&
                         <CollectionEditorImportDataPreview importConfig={importConfig}
-                                                           properties={values.properties as Properties}
-                                                           propertiesOrder={values.propertiesOrder as string[]}/>}
+                            properties={values.properties as Properties}
+                            propertiesOrder={values.propertiesOrder as string[]} />}
 
                     {currentView === "import_data_saving" && importConfig &&
                         <ImportSaveInProgress importConfig={importConfig}
-                                              collection={values}
-                                              path={path}
-                                              onImportSuccess={async (importedCollection) => {
-                                                  snackbarController.open({
-                                                      type: "info",
-                                                      message: "Data imported successfully"
-                                                  });
-                                                  await saveCollection(values);
-                                                  handleClose(importedCollection);
-                                              }}
+                            collection={values}
+                            path={path}
+                            onImportSuccess={async (importedCollection) => {
+                                snackbarController.open({
+                                    type: "info",
+                                    message: t("data_imported_successfully_msg")
+                                });
+                                await saveCollection(values);
+                                handleClose(importedCollection);
+                            }}
                         />}
 
-                    {currentView === "details" &&
-                        <CollectionDetailsForm
+                    {currentView === "general" &&
+                        <GeneralSettingsForm
                             existingPaths={existingPaths}
                             existingIds={existingIds}
-                            groups={groups}
-                            parentCollectionIds={parentCollectionIds}
                             parentCollection={parentCollection}
-                            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 color={"neutral"}
-                                        onClick={() => {
-                                            setDeleteRequested(true);
-                                        }}>Reset to code</Button>
-                            </div>}
-                        </CollectionDetailsForm>}
-
-                    {currentView === "custom_actions" && collection &&
-                        <EntityActionsEditTab collection={collection}/>}
-
-                    {currentView === "subcollections" && collection &&
-                        <SubcollectionsEditTab
+                            isNewCollection={isNewCollection} />
+                    }
+
+                    {currentView === "display" &&
+                        <DisplaySettingsForm expandKanban={expandKanban} />
+                    }
+
+                    {currentView === "extend" && collection &&
+                        <ExtendSettingsForm
+                            collection={collection}
                             parentCollection={parentCollection}
                             configController={configController}
-                            getUser={getUser}
                             collectionInference={collectionInference}
+                            getUser={getUser}
                             parentCollectionIds={parentCollectionIds}
-                            collection={collection}/>}
+                            isMergedCollection={!isNewCollection && isMergedCollection}
+                            onResetToCode={() => setDeleteRequested(true)} />
+                    }
 
                     {currentView === "properties" &&
                         <CollectionPropertiesEditorForm
@@ -683,58 +753,58 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     color={"primary"}
                                     onClick={() => setCurrentView("extra_view")}>
                                     {extraView.icon}
-                                </IconButton>}/>
+                                </IconButton>} />
                     }
 
                     <DialogActions
                         position={"absolute"}>
-                        {error && <ErrorView error={error}/>}
+                        {error && <ErrorView error={error} />}
 
                         {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
                             <Button variant={"text"}
-                                    type="button"
-                                    onClick={() => {
-                                        importConfig.setInUse(false);
-                                        return setCurrentView("welcome");
-                                    }}>
-                                Back
+                                type="button"
+                                onClick={() => {
+                                    importConfig.setInUse(false);
+                                    return setCurrentView("welcome");
+                                }}>
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
                             <Button variant={"text"}
-                                    type="button"
-                                    onClick={() => {
-                                        setCurrentView("import_data_mapping");
-                                    }}>
-                                Back
+                                type="button"
+                                onClick={() => {
+                                    setCurrentView("import_data_mapping");
+                                }}>
+                                {t("back")}
                             </Button>}
 
-                        {isNewCollection && includeTemplates && currentView === "details" &&
+                        {isNewCollection && includeTemplates && currentView === "general" &&
                             <Button variant={"text"}
-                                    type="button"
-                                    onClick={() => setCurrentView("welcome")}>
-                                Back
+                                type="button"
+                                onClick={() => setCurrentView("welcome")}>
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && currentView === "properties" && <Button variant={"text"}
-                                                                                    type="button"
-                                                                                    color={"neutral"}
-                                                                                    onClick={() => setCurrentView("details")}>
-                            <ArrowBackIcon/>
-                            Back
+                            type="button"
+                            color={"neutral"}
+                            onClick={() => setCurrentView("general")}>
+                            <ArrowBackIcon />
+                            {t("back")}
                         </Button>}
 
                         <Button variant={"text"}
-                                color={"neutral"}
-                                onClick={() => {
-                                    handleCancel();
-                                }}>
-                            Cancel
+                            color={"neutral"}
+                            onClick={() => {
+                                handleCancel();
+                            }}>
+                            {t("cancel")}
                         </Button>
 
                         {currentView === "welcome" &&
                             <Button variant={"text"} onClick={() => onWelcomeScreenContinue()}>
-                                Continue from scratch
+                                {t("continue_from_scratch")}
                             </Button>}
 
                         {isNewCollection && currentView === "import_data_mapping" &&
@@ -743,7 +813,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 color="primary"
                                 onClick={onImportMappingComplete}
                             >
-                                Next
+                                {t("next")}
                             </Button>}
 
                         {isNewCollection && currentView === "import_data_preview" &&
@@ -754,22 +824,22 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     setNextMode();
                                 }}
                             >
-                                Next
+                                {t("next")}
                             </Button>}
 
-                        {isNewCollection && (currentView === "details" || currentView === "properties") &&
+                        {isNewCollection && (currentView === "general" || currentView === "properties") &&
                             <LoadingButton
                                 variant={"filled"}
                                 color="primary"
                                 type="submit"
                                 loading={isSubmitting}
-                                disabled={isSubmitting || (currentView === "details" && !validValues)}
+                                disabled={isSubmitting || (currentView === "general" && !validValues)}
                                 startIcon={currentView === "properties"
-                                    ? <CheckIcon/>
+                                    ? <CheckIcon />
                                     : undefined}
                             >
-                                {currentView === "details" && "Next"}
-                                {currentView === "properties" && "Create collection"}
+                                {currentView === "general" && t("next")}
+                                {currentView === "properties" && t("create_collection")}
                             </LoadingButton>}
 
                         {!isNewCollection && <LoadingButton
@@ -778,7 +848,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             type="submit"
                             loading={isSubmitting}
                         >
-                            Update collection
+                            {t("update_collection")}
                         </LoadingButton>}
 
                     </DialogActions>
@@ -791,10 +861,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             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.</>}/>
+            title={<>{t("delete_stored_config")}</>}
+            body={<>{t("delete_stored_config_body")}</>} />
 
     </DialogContent>
 
@@ -808,7 +876,9 @@ function applyPropertyConfigs<M extends Record<string, any> = any>(collection: P
     const propertiesResult: PropertiesOrBuilders<any> = {};
     if (properties) {
         Object.keys(properties).forEach((key) => {
-            propertiesResult[key] = applyPropertiesConfig(properties[key] as PropertyOrBuilder, propertyConfigs);
+            const prop = properties[key];
+            if (prop == null) return;
+            propertiesResult[key] = applyPropertiesConfig(prop as PropertyOrBuilder, propertyConfigs);
         });
     }
 
@@ -820,7 +890,7 @@ function applyPropertyConfigs<M extends Record<string, any> = any>(collection: P
 
 function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Record<string, PropertyConfig<any>>) {
     let internalProperty = property;
-    if (propertyConfigs && typeof internalProperty === "object" && internalProperty.propertyConfig) {
+    if (propertyConfigs && internalProperty && typeof internalProperty === "object" && internalProperty.propertyConfig) {
         const propertyConfig = propertyConfigs[internalProperty.propertyConfig];
         if (propertyConfig && isPropertyBuilder(propertyConfig.property)) {
             internalProperty = propertyConfig.property;
@@ -847,30 +917,32 @@ function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Rec
 
 }
 
-const validatePath = (value: string, isNewCollection: boolean, existingPaths: string[], idValue?: string) => {
+type TranslateFn = (key: string, params?: Record<string, string>) => string;
+
+const validatePath = (t: TranslateFn, value: string, isNewCollection: boolean, existingPaths: string[], idValue?: string) => {
     let error;
     if (!value) {
-        error = "You must specify a path in the database for this collection";
+        error = t("must_specify_path");
     }
     // if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
     //     error = "There is already a collection which uses this path as an id";
     if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()) && !idValue)
-        error = "There is already a collection with the specified path. If you want to have multiple collections referring to the same database path, make sure the have different ids";
+        error = t("collection_path_already_exists");
 
     const subpaths = removeInitialAndTrailingSlashes(value).split("/");
     if (subpaths.length % 2 === 0) {
-        error = `Collection paths must have an odd number of segments: ${value}`;
+        error = t("collection_path_odd_segments", { path: value });
     }
     return error;
 };
 
-const validateId = (value: string, isNewCollection: boolean, existingPaths: string[], existingIds: string[]) => {
+const validateId = (t: TranslateFn, value: string, isNewCollection: boolean, existingPaths: string[], existingIds: string[]) => {
     if (!value) return undefined;
     let error;
     if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()))
-        error = "There is already a collection that uses this value as a path";
+        error = t("collection_uses_path_as_id");
     if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
-        error = "There is already a collection which uses this id";
+        error = t("collection_uses_this_id");
     // if (error) {
     //     setAdvancedPanelExpanded(true);
     // }