@firecms/collection_editor 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

package/src/ui/EditorCollectionAction.tsx

@@ -1,4 +1,4 @@
-import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { CollectionActionsProps, useAuthController, useNavigationController, useTranslation } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -16,7 +16,7 @@ export function EditorCollectionAction({
     const collectionEditorController = useCollectionEditorController();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
-
+    const { t } = useTranslation();
     const canEditCollection = collectionEditorController.configPermissions
         ? collectionEditorController.configPermissions({
             user: authController.user,
@@ -26,7 +26,7 @@ export function EditorCollectionAction({
 
     const editorButton = <Tooltip
         asChild={true}
-        title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
+        title={canEditCollection ? t("edit_collection") : t("no_permissions_edit_collection")}>
         <IconButton
             size={"small"}
             color={"primary"}

package/src/ui/EditorEntityAction.tsx

@@ -1,4 +1,4 @@
-import { PluginFormActionProps, useAuthController, useNavigationController } from "@firecms/core";
+import { PluginFormActionProps, useAuthController, useNavigationController, useTranslation } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -14,6 +14,7 @@ export function EditorEntityAction({
     const authController = useAuthController();
     const navigationController = useNavigationController();
     const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
 
@@ -28,7 +29,7 @@ export function EditorEntityAction({
 
     const editorButton = <Tooltip
         asChild={true}
-        title={canEditCollection ? (isDirty ? "You need to save the document before changing the schema" : "Edit schema for this form") : "You don't have permissions to edit this collection"}>
+        title={canEditCollection ? (isDirty ? t("save_before_changing_schema") : t("edit_schema_for_this_form")) : t("no_permissions_to_edit_collection")}>
         <IconButton
             color={"primary"}
             disabled={!canEditCollection || isDirty}

package/src/ui/NewCollectionButton.tsx

@@ -1,7 +1,9 @@
 import { AddIcon, Button } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
 export function NewCollectionButton() {
+    const { t } = useTranslation();
     const collectionEditorController = useCollectionEditorController();
     return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
         <Button className={"min-w-fit"}
@@ -12,7 +14,7 @@ export function NewCollectionButton() {
                     sourceClick: "new_collection_button"
                 })}>
             <AddIcon/>
-            New collection
+            {t("new_collection")}
         </Button>
     </div>
 }

package/src/ui/NewCollectionCard.tsx

@@ -1,4 +1,4 @@
-import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
+import { PluginHomePageAdditionalCardsProps, useAuthController, useTranslation } from "@firecms/core";
 import { AddIcon, Card, cls, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
@@ -12,6 +12,8 @@ export function NewCollectionCard({
 
     const authController = useAuthController();
 
+    const { t } = useTranslation();
+
     const collectionEditorController = useCollectionEditorController();
     const canCreateCollections = collectionEditorController.configPermissions
         ? collectionEditorController.configPermissions({
@@ -35,11 +37,12 @@ export function NewCollectionCard({
                 <AddIcon color="primary" size={"large"}/>
                 <Typography color="primary"
                             variant={"caption"}
-                            className={"font-medium"}>{"Add new collection".toUpperCase()}</Typography>
+                            className={"font-medium"}>{t("add_new_collection").toUpperCase()}</Typography>
 
                 {!canCreateCollections &&
-                    <Typography variant={"caption"}>You don&apos;t have permissions to create
-                        collections</Typography>
+                    <Typography variant={"caption"}>
+                        {t("no_permissions_create_collection")}
+                    </Typography>
                 }
             </div>
 

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController, useTranslation } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -17,6 +17,7 @@ export function PropertyAddColumnComponent({
 
     const authController = useAuthController();
     const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
     const canEditCollection = collectionEditorController.configPermissions
         ? collectionEditorController.configPermissions({
             user: authController.user,
@@ -27,7 +28,7 @@ export function PropertyAddColumnComponent({
     return (
         <Tooltip
             asChild={true}
-            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+            title={canEditCollection ? t("add_new_property") : t("no_permission_add_properties")}>
             <div
                 className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 bg-surface-100/40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:bg-surface-950/40 dark:hover:bg-surface-950"}
                 // className={onHover ? "bg-white dark:bg-surface-950" : undefined}

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>
 }