@firecms/collection_editor 3.1.0-canary.1df3b2c → 3.1.0-canary.75005e4

package/src/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { EntityCollection, useNavigationController, useSnackbarController, AIIcon } from "@firecms/core";
+import { EntityCollection, useNavigationController, useSnackbarController, AIIcon, useTranslation } from "@firecms/core";
 import {
     Button,
     CircularProgress,
@@ -48,6 +48,11 @@ export interface AICollectionGeneratorPopoverProps {
      * Whether to show the label text
      */
     showLabel?: boolean;
+
+    /**
+     * Optional analytics callback
+     */
+    onAnalyticsEvent?: (event: string, params?: object) => void;
 }
 
 export function AICollectionGeneratorPopover({
@@ -56,13 +61,15 @@ export function AICollectionGeneratorPopover({
     generateCollection,
     trigger,
     size = "small",
-    showLabel = true
+    showLabel = true,
+    onAnalyticsEvent
 }: AICollectionGeneratorPopoverProps) {
     const [menuOpen, setMenuOpen] = useState(false);
     const [prompt, setPrompt] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
+    const { t } = useTranslation();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
 
@@ -74,6 +81,9 @@ export function AICollectionGeneratorPopover({
         setLoading(true);
         setError(null);
 
+        const mode = existingCollection ? "modify" : "create";
+        onAnalyticsEvent?.("ai_collection_generate_start", { mode });
+
         try {
             const collectionsContext = existingCollections.map(c => ({
                 path: c.path,
@@ -100,6 +110,10 @@ export function AICollectionGeneratorPopover({
             onGenerated(result.collection, result.operations);
             setMenuOpen(false);
             setPrompt("");
+            onAnalyticsEvent?.("ai_collection_generate_success", {
+                mode,
+                operationsCount: result.operations?.length
+            });
             snackbarController.open({
                 type: "success",
                 message: existingCollection
@@ -112,6 +126,10 @@ export function AICollectionGeneratorPopover({
                 ? e.message
                 : "Failed to generate collection. Please try again.";
             setError(errorMessage);
+            onAnalyticsEvent?.("ai_collection_generate_error", {
+                mode,
+                error: errorMessage
+            });
             snackbarController.open({
                 type: "error",
                 message: errorMessage
@@ -138,13 +156,13 @@ export function AICollectionGeneratorPopover({
                 : <AIIcon size="small" />
             }
         >
-            AI Assist
+            {t("ai_assist")}
         </Button>
     ) : (
         <IconButton
             size={size}
             disabled={loading}
-            aria-label="AI Assist"
+            aria-label={t("ai_assist")}
         >
             {loading
                 ? <CircularProgress size="smallest" />
@@ -168,14 +186,14 @@ export function AICollectionGeneratorPopover({
                 <div className="flex items-center gap-2">
                     <AIIcon size="small" />
                     <Typography variant="subtitle2">
-                        {existingCollection ? "Modify Collection with AI" : "Generate Collection with AI"}
+                        {existingCollection ? t("modify_collection_with_ai") : t("generate_collection_with_ai")}
                     </Typography>
                 </div>
 
                 <Typography variant="caption" color="secondary">
                     {existingCollection
-                        ? "Describe the changes you want to make to this collection."
-                        : "Describe the collection you want to create."
+                        ? t("describe_changes_to_make")
+                        : t("describe_collection_to_create")
                     }
                 </Typography>
 
@@ -188,8 +206,8 @@ export function AICollectionGeneratorPopover({
                     onChange={(e) => setPrompt(e.target.value)}
                     onKeyDown={handleKeyDown}
                     placeholder={existingCollection
-                        ? "e.g., Add a thumbnail image field with storage, make price required..."
-                        : "e.g., Create a products collection with name, price, description, and category..."
+                        ? t("ai_placeholder_modify")
+                        : t("ai_placeholder_create")
                     }
                     disabled={loading}
                 />
@@ -207,7 +225,7 @@ export function AICollectionGeneratorPopover({
                         onClick={() => setMenuOpen(false)}
                         disabled={loading}
                     >
-                        Cancel
+                        {t("cancel")}
                     </Button>
                     <Button
                         variant="filled"
@@ -216,7 +234,7 @@ export function AICollectionGeneratorPopover({
                         disabled={!prompt.trim() || loading}
                         startIcon={loading ? <CircularProgress size="smallest" /> : undefined}
                     >
-                        {loading ? "Generating..." : "Generate"}
+                        {loading ? t("generating") : t("generate_with_ai")}
                     </Button>
                 </div>
             </div>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { EntityCollection, FieldCaption, getFieldConfig, IconForView, Property, PropertyConfigBadge, resolveCollection, SearchIconsView, singular, toSnakeCase, unslugify, useAuthController, useCustomizationController } from "@firecms/core";
+import { EntityCollection, FieldCaption, getFieldConfig, IconForView, Property, PropertyConfigBadge, resolveCollection, SearchIconsView, singular, toSnakeCase, unslugify, useAuthController, useCustomizationController, useTranslation } from "@firecms/core";
 import {
     BooleanSwitchWithLabel,
     Chip,
@@ -8,6 +8,7 @@ import {
     Container,
     DebouncedTextField,
     Dialog,
+    HistoryIcon,
     IconButton,
     Select,
     SelectItem,
@@ -60,6 +61,8 @@ export function CollectionDetailsForm({
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
 
+    const { t } = useTranslation();
+
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
@@ -136,12 +139,12 @@ export function CollectionDetailsForm({
                     <div
                         className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
-                            {isNewCollection ? "New collection" : `${values?.name} collection`}
+                            {isNewCollection ? t("new_collection") : t("collection_with_name", { name: values?.name || "" })}
                         </Typography>
                         <DefaultDatabaseField databaseId={values.databaseId}
                             onDatabaseIdUpdate={updateDatabaseId} />
 
-                        <Tooltip title={"Change icon"}
+                        <Tooltip title={t("change_icon")}
                             asChild={true}>
                             <IconButton
                                 shape={"square"}
@@ -153,7 +156,7 @@ export function CollectionDetailsForm({
 
                     {parentCollection && <Chip colorScheme={"tealDarker"}>
                         <Typography variant={"caption"}>
-                            This is a subcollection of <b>{parentCollection.name}</b>
+                            {t("is_subcollection_of")} <b>{parentCollection.name}</b>
                         </Typography>
                     </Chip>}
 
@@ -164,26 +167,26 @@ export function CollectionDetailsForm({
                         <TextField
                             value={values.name ?? ""}
                             onChange={(e: any) => updateName(e.target.value)}
-                            label={"Name"}
+                            label={t("name")}
                             autoFocus={true}
                             required
                             error={showErrors && Boolean(errors.name)} />
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : t("collection_name_description")}
                         </FieldCaption>
                     </div>
 
                     <div className={cls("col-span-12 ")}>
                         <Field name={"path"}
                             as={DebouncedTextField}
-                            label={"Path"}
+                            label={t("path")}
                             required
                             error={showErrors && Boolean(errors.path)} />
 
                         <FieldCaption error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
                                 ? errors.path
-                                : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database"}
+                                : isSubcollection ? t("relative_path_to_parent") : t("path_in_database")}
                         </FieldCaption>
 
                     </div>
@@ -246,7 +249,7 @@ export function CollectionDetailsForm({
                                     <Select
                                         key={`order-select-${numberProperties.length}`}
                                         name="orderProperty"
-                                        label="Order Property"
+                                        label={t("order_property")}
                                         size={"large"}
                                         fullWidth={true}
                                         position={"item-aligned"}
@@ -258,10 +261,10 @@ export function CollectionDetailsForm({
                                         }}
                                         renderValue={(value) => {
                                             if (orderPropertyMissing) {
-                                                return <span className="text-red-500">{value} (not found)</span>;
+                                                return <span className="text-red-500">{value} ({t("not_found_suffix")})</span>;
                                             }
                                             const prop = numberProperties.find(p => p.key === value);
-                                            if (!prop) return "Select a property";
+                                            if (!prop) return t("select_a_property");
                                             const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
                                             return (
                                                 <div className="flex items-center gap-2">
@@ -291,7 +294,7 @@ export function CollectionDetailsForm({
                                                         <div>
                                                             <div>{prop.label}</div>
                                                             <Typography variant="caption" color="secondary">
-                                                                {fieldConfig?.name || "Number"}
+                                                                {fieldConfig?.name || t("number")}
                                                             </Typography>
                                                         </div>
                                                     </div>
@@ -301,10 +304,10 @@ export function CollectionDetailsForm({
                                     </Select>
                                     <FieldCaption error={orderPropertyMissing}>
                                         {orderPropertyMissing
-                                            ? `Property "${values.orderProperty}" does not exist or is not a number property. Please select a valid property or clear the selection.`
+                                            ? t("order_property_not_found", { property: values.orderProperty ?? "" })
                                             : numberProperties.length === 0
-                                                ? "No number properties found. Add a number property to enable ordering."
-                                                : "Select a number property to persist the order of items"
+                                                ? t("no_number_properties")
+                                                : t("order_property_description")
                                         }
                                     </FieldCaption>
                                 </>
@@ -322,7 +325,7 @@ export function CollectionDetailsForm({
                                 : "__order";
                             const dialogPropertyName = orderPropertyMissing && values.orderProperty
                                 ? unslugify(values.orderProperty)
-                                : "Order";
+                                : t("order_label");
 
                             if (!showCreateButton) return null;
 
@@ -333,7 +336,7 @@ export function CollectionDetailsForm({
                                         className="ml-3.5 text-sm text-primary hover:text-primary-dark mt-2"
                                         onClick={() => setOrderPropertyDialogOpen(true)}
                                     >
-                                        + Create "{dialogPropertyKey}" property
+                                        {t("create_property", { property: dialogPropertyKey })}
                                     </button>
                                     <PropertyFormDialog
                                         open={orderPropertyDialogOpen}
@@ -375,16 +378,14 @@ export function CollectionDetailsForm({
                             position={"start"}
                             size={"large"}
                             allowIndeterminate={true}
-                            label={values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
-                                values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
-                            )}
+                            label={<span className="flex items-center gap-2"><HistoryIcon size={"smallest"} />{values.history === null || values.history === undefined ? t("doc_history_global") : (
+                                values.history ? t("doc_history_enabled") : t("doc_history_not_enabled")
+                            )}</span>}
                             onValueChange={(v) => setFieldValue("history", v)}
                             value={values.history === undefined ? null : values.history}
                         />
                         <FieldCaption>
-                            When enabled, each document in this collection will have a history of changes.
-                            This is useful for auditing purposes. The data is stored in a subcollection of the document
-                            in your database, called <b>__history</b>.
+                            {t("doc_history_description")}
                         </FieldCaption>
                     </div>
 
@@ -423,7 +424,9 @@ function DefaultDatabaseField({
     onDatabaseIdUpdate
 }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
 
-    return <Tooltip title={"Database ID"}
+    const { t } = useTranslation();
+
+    return <Tooltip title={t("database_id")}
         side={"top"}
         align={"start"}>
         <TextField size={"small"}
@@ -431,6 +434,6 @@ function DefaultDatabaseField({
             inputClassName={"text-end"}
             value={databaseId ?? ""}
             onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
-            placeholder={"(default)"}></TextField>
+            placeholder={t("default_text")}></TextField>
     </Tooltip>
 }

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -22,7 +22,8 @@ import {
     useCustomizationController,
     useNavigationController,
     User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation,
 } from "@firecms/core";
 import {
     ArrowBackIcon,
@@ -106,9 +107,15 @@ export interface CollectionEditorDialogProps {
      * 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;
 
@@ -139,7 +146,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
-            <DialogTitle hidden>Collection editor</DialogTitle>
+            <DialogTitle hidden>{t("collection_editor")}</DialogTitle>
             <AIModifiedPathsProvider>
                 {open && <CollectionEditor {...props}
                     handleCancel={handleCancel}
@@ -149,7 +156,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
                     open={unsavedChangesDialogOpen}
                     handleOk={() => props.handleClose(undefined)}
                     handleCancel={() => setUnsavedChangesDialogOpen(false)}
-                    body={"There are unsaved changes in this collection"} />
+                    body={t("unsaved_changes_in_collection")} />
             </AIModifiedPathsProvider>
         </Dialog>
     );
@@ -290,7 +297,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     existingEntities,
     initialView: initialViewProp,
     expandKanban,
-    generateCollection
+    generateCollection,
+    onAnalyticsEvent
 }: CollectionEditorDialogProps & {
     handleCancel: () => void,
     setFormDirty: (dirty: boolean) => void,
@@ -301,10 +309,11 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     collection: PersistedCollection<M> | undefined,
     setCollection: (collection: PersistedCollection<M>) => void,
     propertyConfigs: Record<string, PropertyConfig<any>>,
-    groups: string[],
+    groups: (string | null)[],
 }
 ) {
 
+    const { t } = useTranslation();
     const importConfig = useImportConfig();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
@@ -337,7 +346,7 @@ 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;
             });
@@ -418,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;
         }
@@ -481,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 });
@@ -505,11 +514,11 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             errors = { ...errors, ...propertyErrorsRef.current };
         }
         if (currentView === "general") {
-            const pathError = validatePath(col.path, isNewCollection, existingPaths, col.id);
+            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;
             }
@@ -534,7 +543,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     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;
@@ -596,7 +605,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             setDeleteRequested(false);
             handleCancel();
             snackbarController.open({
-                message: "Collection deleted",
+                message: t("collection_deleted"),
                 type: "success"
             });
         });
@@ -630,21 +639,22 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             existingCollection={values}
                             onGenerated={handleAIGenerated}
                             generateCollection={generateCollection}
+                            onAnalyticsEvent={onAnalyticsEvent}
                         />
                     )}
                     <Tabs value={currentView}
                         onValueChange={(v) => setCurrentView(v as EditorView)}>
                         <Tab value={"general"}>
-                            General
+                            {t("tab_general")}
                         </Tab>
                         <Tab value={"display"}>
-                            Display
+                            {t("tab_display")}
                         </Tab>
                         <Tab value={"properties"}>
-                            Properties
+                            {t("tab_properties")}
                         </Tab>
                         <Tab value={"extend"}>
-                            Extend
+                            {t("tab_extend")}
                         </Tab>
                     </Tabs>
                 </div>}
@@ -669,7 +679,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             onContinue={onWelcomeScreenContinue}
                             existingCollectionPaths={existingPaths}
                             parentCollection={parentCollection}
-                            generateCollection={generateCollection} />}
+                            generateCollection={generateCollection}
+                            onAnalyticsEvent={onAnalyticsEvent} />}
 
                     {currentView === "import_data_mapping" && importConfig &&
                         <CollectionEditorImportMapping importConfig={importConfig}
@@ -688,7 +699,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             onImportSuccess={async (importedCollection) => {
                                 snackbarController.open({
                                     type: "info",
-                                    message: "Data imported successfully"
+                                    message: t("data_imported_successfully_msg")
                                 });
                                 await saveCollection(values);
                                 handleClose(importedCollection);
@@ -756,7 +767,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     importConfig.setInUse(false);
                                     return setCurrentView("welcome");
                                 }}>
-                                Back
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
@@ -765,14 +776,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 onClick={() => {
                                     setCurrentView("import_data_mapping");
                                 }}>
-                                Back
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "general" &&
                             <Button variant={"text"}
                                 type="button"
                                 onClick={() => setCurrentView("welcome")}>
-                                Back
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && currentView === "properties" && <Button variant={"text"}
@@ -780,7 +791,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             color={"neutral"}
                             onClick={() => setCurrentView("general")}>
                             <ArrowBackIcon />
-                            Back
+                            {t("back")}
                         </Button>}
 
                         <Button variant={"text"}
@@ -788,12 +799,12 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             onClick={() => {
                                 handleCancel();
                             }}>
-                            Cancel
+                            {t("cancel")}
                         </Button>
 
                         {currentView === "welcome" &&
                             <Button variant={"text"} onClick={() => onWelcomeScreenContinue()}>
-                                Continue from scratch
+                                {t("continue_from_scratch")}
                             </Button>}
 
                         {isNewCollection && currentView === "import_data_mapping" &&
@@ -802,7 +813,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 color="primary"
                                 onClick={onImportMappingComplete}
                             >
-                                Next
+                                {t("next")}
                             </Button>}
 
                         {isNewCollection && currentView === "import_data_preview" &&
@@ -813,7 +824,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     setNextMode();
                                 }}
                             >
-                                Next
+                                {t("next")}
                             </Button>}
 
                         {isNewCollection && (currentView === "general" || currentView === "properties") &&
@@ -827,8 +838,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     ? <CheckIcon />
                                     : undefined}
                             >
-                                {currentView === "general" && "Next"}
-                                {currentView === "properties" && "Create collection"}
+                                {currentView === "general" && t("next")}
+                                {currentView === "properties" && t("create_collection")}
                             </LoadingButton>}
 
                         {!isNewCollection && <LoadingButton
@@ -837,7 +848,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             type="submit"
                             loading={isSubmitting}
                         >
-                            Update collection
+                            {t("update_collection")}
                         </LoadingButton>}
 
                     </DialogActions>
@@ -850,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>
 
@@ -867,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);
         });
     }
 
@@ -879,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;
@@ -906,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);
     // }