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

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AIIcon, EntityCollection, prettifyIdentifier, } from "@firecms/core";
+import { AIIcon, EntityCollection, prettifyIdentifier, useTranslation } from "@firecms/core";
 import { Button, Card, Chip, cls, CodeIcon, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
 import { CollectionJsonImportDialog } from "./CollectionJsonImportDialog";
 
@@ -18,16 +18,19 @@ export function CollectionEditorWelcomeView({
     parentCollection,
     onContinue,
     existingCollectionPaths,
-    generateCollection
+    generateCollection,
+    onAnalyticsEvent
 }: {
     path: string;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
     generateCollection?: CollectionGenerationCallback;
+    onAnalyticsEvent?: (event: string, params?: object) => void;
 }) {
 
     const { pathSuggestions } = useCollectionEditorController();
+    const { t } = useTranslation();
 
     const filteredSuggestions = (pathSuggestions ?? []).filter(s => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === s.trim().toLowerCase()));
 
@@ -47,13 +50,13 @@ export function CollectionEditorWelcomeView({
                 <div
                     className="flex flex-row py-2 pt-3 items-center">
                     <Typography variant={"h4"} className={"flex-grow"}>
-                        New collection
+                        {t("new_collection")}
                     </Typography>
                 </div>
 
                 {parentCollection && <Chip colorScheme={"tealDarker"}>
                     <Typography variant={"caption"}>
-                        This is a subcollection of <b>{parentCollection.name}</b>
+                        {t("this_is_subcollection_of")} <b>{parentCollection.name}</b>
                     </Typography>
                 </Chip>}
 
@@ -61,7 +64,7 @@ export function CollectionEditorWelcomeView({
 
                     <Typography variant={"caption"}
                         color={"secondary"}>
-                        ● Use one of the existing paths in your database:
+                        ● {t("use_existing_paths_database")}
                     </Typography>
                     <div className={"flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7"}>
 
@@ -90,7 +93,7 @@ export function CollectionEditorWelcomeView({
                             <Typography variant={"caption"}
                                 color={"secondary"}
                                 className={"mb-2"}>
-                                ● Describe your collection to AI:
+                                ● {t("describe_collection_ai")}
                             </Typography>
 
                             <AICollectionGeneratorPopover
@@ -99,12 +102,13 @@ export function CollectionEditorWelcomeView({
                                     onContinue();
                                 }}
                                 generateCollection={generateCollection}
+                                onAnalyticsEvent={onAnalyticsEvent}
                                 trigger={
                                     <Button
                                         variant="outlined"
                                         startIcon={<AIIcon size="small" />}
                                     >
-                                        Generate with AI
+                                        {t("generate_with_ai")}
                                     </Button>
                                 }
                             />
@@ -115,7 +119,7 @@ export function CollectionEditorWelcomeView({
                         <Typography variant={"caption"}
                             color={"secondary"}
                             className={"mb-2"}>
-                            ● Create from JSON configuration:
+                            ● {t("create_from_json_config")}
                         </Typography>
 
                         <Button
@@ -123,7 +127,7 @@ export function CollectionEditorWelcomeView({
                             onClick={() => setJsonImportOpen(true)}
                             startIcon={<CodeIcon size="small" />}
                         >
-                            Paste JSON Configuration
+                            {t("paste_json_config")}
                         </Button>
 
                         <CollectionJsonImportDialog
@@ -146,7 +150,7 @@ export function CollectionEditorWelcomeView({
                     <Typography variant={"caption"}
                         color={"secondary"}
                         className={"mb-2"}>
-                        ● Create a collection from a file (csv, json, xls, xslx...)
+                        ● {t("create_collection_from_file_formats")}
                     </Typography>
 
                     <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)} />
@@ -156,34 +160,34 @@ export function CollectionEditorWelcomeView({
                 <div className={"my-2"}>
                     <Typography variant={"caption"}
                         color={"secondary"}>
-                        ● Select a template:
+                        ● {t("select_template")}
                     </Typography>
 
                     <div className={"flex gap-2"}>
-                        <TemplateButton title={"Products"}
-                            subtitle={"A collection of products with images, prices and stock"}
+                        <TemplateButton title={t("products")}
+                            subtitle={t("collection_products_subtitle")}
                             icon={<Icon size={"small"}
                                 iconKey={productsCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(productsCollectionTemplate);
                                 onContinue();
                             }} />
-                        <TemplateButton title={"Users"}
-                            subtitle={"A collection of users with emails, names and roles"}
+                        <TemplateButton title={t("users")}
+                            subtitle={t("collection_users_subtitle")}
                             icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(usersCollectionTemplate);
                                 onContinue();
                             }} />
-                        <TemplateButton title={"Blog posts"}
-                            subtitle={"A collection of blog posts with images, authors and complex content"}
+                        <TemplateButton title={t("blog_posts")}
+                            subtitle={t("collection_blog_posts_subtitle")}
                             icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(blogCollectionTemplate);
                                 onContinue();
                             }} />
-                        <TemplateButton title={"Pages"}
-                            subtitle={"A collection of pages with images, authors and complex content"}
+                        <TemplateButton title={t("pages")}
+                            subtitle={t("collection_pages_subtitle")}
                             icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(pagesCollectionTemplate);

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -13,7 +13,8 @@ import {
     PropertyOrBuilder,
     useLargeLayout,
     User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "@firecms/core";
 import {
     AddIcon,
@@ -79,6 +80,7 @@ export function CollectionPropertiesEditorForm({
 
     const largeLayout = useLargeLayout();
     const asDialog = !largeLayout
+    const { t } = useTranslation();
 
     // index of the selected property within the namespace
     const [selectedPropertyIndex, setSelectedPropertyIndex] = useState<number | undefined>();
@@ -431,7 +433,7 @@ export function CollectionPropertiesEditorForm({
                             <Typography variant={"body2"}
                                 className={"ml-2"}
                                 color={"secondary"}>
-                                Created by {owner.displayName}
+                                {t("created_by", { name: owner.displayName ?? "" })}
                             </Typography>}
                     </div>
 
@@ -440,7 +442,7 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}
+                        <Tooltip title={t("get_code_for_collection")}
                             asChild={true}>
                             <IconButton
                                 variant={"filled"}
@@ -449,7 +451,7 @@ export function CollectionPropertiesEditorForm({
                                 <CodeIcon />
                             </IconButton>
                         </Tooltip>
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
+                        {inferPropertiesFromData && <Tooltip title={t("add_properties_from_data")}
                             asChild={true}>
                             <IconButton
                                 variant={"filled"}
@@ -458,7 +460,7 @@ export function CollectionPropertiesEditorForm({
                                 {inferringProperties ? <CircularProgress size={"small"} /> : <FindInPageIcon />}
                             </IconButton>
                         </Tooltip>}
-                        <Tooltip title={"Add new property"}
+                        <Tooltip title={t("add_new_property")}
                             asChild={true}>
                             <Button
                                 onClick={() => setNewPropertyDialogOpen(true)}>
@@ -487,7 +489,7 @@ export function CollectionPropertiesEditorForm({
                     size={"large"}
                     onClick={() => setNewPropertyDialogOpen(true)}
                     startIcon={<AddIcon />}>
-                    Add new property
+                    {t("add_new_property")}
                 </Button>
             </div>
 
@@ -524,20 +526,20 @@ export function CollectionPropertiesEditorForm({
                             <div className={"w-full flex flex-col items-center justify-center h-full gap-4"}>
                                 <Typography variant={"label"} className="">
                                     {emptyCollection
-                                        ? "Now you can add your first property"
-                                        : "Select a property to edit it"}
+                                        ? t("add_first_property")
+                                        : t("select_property_to_edit")}
                                 </Typography>
                                 <Button
                                     onClick={() => setNewPropertyDialogOpen(true)}
                                 >
                                     <AddIcon />
-                                    Add new property
+                                    {t("add_new_property")}
                                 </Button>
                             </div>}
 
                         {selectedProperty && isPropertyBuilder(selectedProperty) &&
                             <Typography variant={"label"} className="flex items-center justify-center">
-                                {"This property is defined as a property builder in code"}
+                                {t("property_defined_as_builder")}
                             </Typography>}
                     </div>
                 </div>}

package/src/ui/collection_editor/DisplaySettingsForm.tsx

@@ -8,7 +8,8 @@ import {
     resolveCollection,
     unslugify,
     useAuthController,
-    useCustomizationController
+    useCustomizationController,
+    useTranslation
 } from "@firecms/core";
 import {
     BooleanSwitchWithLabel,
@@ -44,6 +45,7 @@ export function DisplaySettingsForm({
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     // Resolve collection to get properties for order property select
     const resolvedCollection = useMemo(() => resolveCollection({
@@ -90,7 +92,7 @@ export function DisplaySettingsForm({
 
                 <div>
                     <Typography variant={"h5"} className={"flex-grow"}>
-                        Display settings
+                        {t("display_settings")}
                     </Typography>
                 </div>
 
@@ -119,10 +121,10 @@ export function DisplaySettingsForm({
 
                             return (
                                 <>
+                                    <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>{t("order_property")}</Typography>
                                     <Select
                                         key={`order-select-${numberProperties.length}`}
                                         name="orderProperty"
-                                        label="Order Property"
                                         size={"large"}
                                         fullWidth={true}
                                         position={"item-aligned"}
@@ -134,10 +136,10 @@ export function DisplaySettingsForm({
                                         }}
                                         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">
@@ -167,7 +169,7 @@ export function DisplaySettingsForm({
                                                         <div>
                                                             <div>{prop.label}</div>
                                                             <Typography variant="caption" color="secondary">
-                                                                {fieldConfig?.name || "Number"}
+                                                                {fieldConfig?.name || t("number")}
                                                             </Typography>
                                                         </div>
                                                     </div>
@@ -177,10 +179,10 @@ export function DisplaySettingsForm({
                                     </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>
                                 </>
@@ -207,7 +209,7 @@ export function DisplaySettingsForm({
                                         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}
@@ -250,7 +252,7 @@ export function DisplaySettingsForm({
                             name="defaultSize"
                             size={"large"}
                             fullWidth={true}
-                            label="Default row size"
+                            label={t("default_row_size")}
                             position={"item-aligned"}
                             onChange={handleChange}
                             value={values.defaultSize ?? ""}
@@ -289,9 +291,9 @@ export function DisplaySettingsForm({
                                 <CloseIcon size={"small"} />
                             </IconButton>}
                             value={values.sideDialogWidth ?? ""}
-                            label={"Side dialog width"} />
+                            label={t("side_dialog_width")} />
                         <FieldCaption>
-                            Optionally define the width (in pixels) of entities side dialog. Default is 768px
+                            {t("side_dialog_width_description")}
                         </FieldCaption>
                     </div>
 
@@ -300,12 +302,12 @@ export function DisplaySettingsForm({
                         <BooleanSwitchWithLabel
                             position={"start"}
                             size={"large"}
-                            label={values.inlineEditing === undefined || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only in the form view"}
+                            label={values.inlineEditing === undefined || values.inlineEditing ? t("inline_editing_enabled") : t("inline_editing_disabled")}
                             onValueChange={(v) => setFieldValue("inlineEditing", v)}
                             value={values.inlineEditing === undefined ? true : values.inlineEditing}
                         />
                         <FieldCaption>
-                            Allow editing data directly in the table view, without opening the form view.
+                            {t("inline_editing_description")}
                         </FieldCaption>
                     </div>
 
@@ -314,12 +316,12 @@ export function DisplaySettingsForm({
                         <BooleanSwitchWithLabel
                             position={"start"}
                             size={"large"}
-                            label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
+                            label={values.includeJsonView === undefined || values.includeJsonView ? t("include_json_view") : t("no_json_view")}
                             onValueChange={(v) => setFieldValue("includeJsonView", v)}
                             value={values.includeJsonView === undefined ? true : values.includeJsonView}
                         />
                         <FieldCaption>
-                            Include the JSON representation of the document.
+                            {t("json_view_description")}
                         </FieldCaption>
                     </div>
 

package/src/ui/collection_editor/EntityActionsEditTab.tsx

@@ -4,7 +4,8 @@ import {
     EntityAction,
     EntityCollection,
     resolveEntityAction,
-    useCustomizationController
+    useCustomizationController,
+    useTranslation
 } from "@firecms/core";
 import {
     AddIcon,
@@ -34,6 +35,7 @@ export function EntityActionsEditTab({
 }) {
 
     const { entityActions: contextEntityActions } = useCustomizationController();
+    const { t } = useTranslation();
 
     const [addEntityActionDialogOpen, setAddEntityActionDialogOpen] = React.useState<boolean>(false);
     const [actionToDelete, setActionToDelete] = React.useState<string | undefined>();
@@ -53,7 +55,7 @@ export function EntityActionsEditTab({
         <div className={"flex flex-col gap-16"}>
             <div className={"flex-grow flex flex-col gap-4 items-start"}>
                 <Typography variant={"h6"}>
-                    Custom actions
+                    {t("custom_actions")}
                 </Typography>
 
                 {totalEntityActions === 0 &&
@@ -62,8 +64,8 @@ export function EntityActionsEditTab({
                         href={"https://firecms.co/docs/custom_actions"}
                         component={"a"}
                         rel="noopener noreferrer"
-                        target="_blank">More info</Button>}>
-                        Define your own custom actions by uploading them with the CLI.
+                        target="_blank">{t("more_info")}</Button>}>
+                        {t("define_custom_actions_cli")}
                     </Alert>
                 }
 
@@ -81,7 +83,7 @@ export function EntityActionsEditTab({
                                         </TableCell>
                                         <TableCell
                                             align="right">
-                                            <Tooltip title={"Remove"}
+                                            <Tooltip title={t("remove")}
                                                 asChild={true}>
                                                 <IconButton size="small"
                                                     onClick={(e) => {
@@ -104,8 +106,7 @@ export function EntityActionsEditTab({
                                                 {action.name}
                                             </Typography>
                                             <Typography variant={"caption"} className={"flex-grow"}>
-                                                This action is defined in code with
-                                                key <code>{action.key}</code>
+                                                {t("action_defined_in_code")} <code>{action.key}</code>
                                             </Typography>
                                         </TableCell>
                                     </TableRow>
@@ -118,7 +119,7 @@ export function EntityActionsEditTab({
                                 setAddEntityActionDialogOpen(true);
                             }}
                             startIcon={<AddIcon />}>
-                            Add custom entity action
+                            {t("add_custom_entity_action")}
                         </Button>
                     </Paper>
 
@@ -150,10 +151,8 @@ export function EntityActionsEditTab({
                         setActionToDelete(undefined);
                     }}
                     onCancel={() => setActionToDelete(undefined)}
-                    title={<>Remove this action?</>}
-                    body={<>This will <b>not
-                        delete any data</b>, only
-                        the action in the CMS</>} />}
+                    title={<>{t("remove_this_action")}</>}
+                    body={<>{t("remove_action_warning")}</>} />}
 
             <EntityActionsSelectDialog
                 open={addEntityActionDialogOpen}

package/src/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@firecms/core";
+import { useCustomizationController, useTranslation } from "@firecms/core";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 
@@ -9,11 +9,12 @@ export function EntityActionsSelectDialog({
     const {
         entityActions
     } = useCustomizationController();
+    const { t } = useTranslation();
 
     return <Dialog
         maxWidth={"md"}
         open={open}>
-        <DialogTitle>Select custom action</DialogTitle>
+        <DialogTitle>{t("select_custom_action")}</DialogTitle>
         <DialogContent className={"flex flex-col gap-4"}>
             {entityActions?.map((action) => {
                 return <Button
@@ -27,14 +28,12 @@ export function EntityActionsSelectDialog({
             })}
             {(entityActions ?? []).length === 0 &&
                 <Typography variant={"body2"}>
-                    No custom actions defined. Define your custom actions in the customization settings, before using
-                    this
-                    dialog.
+                    {t("no_custom_actions_defined")}
                 </Typography>
             }
         </DialogContent>
         <DialogActions>
-            <Button onClick={() => onClose()}>Cancel</Button>
+            <Button onClick={() => onClose()}>{t("cancel")}</Button>
         </DialogActions>
     </Dialog>
 }

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@firecms/core";
+import { useCustomizationController, useTranslation } from "@firecms/core";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 
@@ -9,11 +9,12 @@ export function EntityCustomViewsSelectDialog({
     const {
         entityViews,
     } = useCustomizationController();
+    const { t } = useTranslation();
 
     return <Dialog
         maxWidth={"md"}
         open={open}>
-        <DialogTitle>Select custom view</DialogTitle>
+        <DialogTitle>{t("select_custom_view")}</DialogTitle>
         <DialogContent className={"flex flex-col gap-4"}>
             {entityViews?.map((view) => {
                 return <Button
@@ -27,13 +28,12 @@ export function EntityCustomViewsSelectDialog({
             })}
             {(entityViews ?? []).length === 0 &&
                 <Typography variant={"body2"}>
-                    No custom views defined. Define your custom views in the customization settings, before using this
-                    dialog.
+                    {t("no_custom_views_defined")}
                 </Typography>
             }
         </DialogContent>
         <DialogActions>
-            <Button onClick={() => onClose()}>Cancel</Button>
+            <Button onClick={() => onClose()}>{t("cancel")}</Button>
         </DialogActions>
     </Dialog>
 }

package/src/ui/collection_editor/EnumForm.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
 import equal from "react-fast-compare"
 
-import { ArrayContainer, ArrayEntryParams, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
+import { ArrayContainer, ArrayEntryParams, EnumValueConfig, EnumValues, FieldCaption,     useTranslation
+} from "@firecms/core";
 import {
     FindInPageIcon,
     Badge,
@@ -44,6 +45,8 @@ export function EnumForm({
     allowDataInference,
     getData
 }: EnumFormProps) {
+    const { t } = useTranslation();
+
 
     const formex = useCreateFormex<{
         enumValues: EnumValueConfig[]
@@ -347,6 +350,7 @@ function EnumEntryDialog({
     enumValuesPath: string;
     onClose: () => void;
 }) {
+    const { t } = useTranslation();
 
     const {
         errors,
@@ -363,7 +367,7 @@ function EnumEntryDialog({
         open={open}
         onOpenChange={(open) => !open ? onClose() : undefined}
     >
-        <DialogTitle hidden>Enum form dialog</DialogTitle>
+        <DialogTitle hidden>{t("enum_form_dialog")}</DialogTitle>
         <DialogContent>
             {index !== undefined &&
                 <div className="flex flex-col gap-4">

package/src/ui/collection_editor/ExtendSettingsForm.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import {
     EntityCollection,
-    User
+    User,
+    useTranslation
 } from "@firecms/core";
 import {
     Button,
@@ -44,16 +45,18 @@ export function ExtendSettingsForm({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const { t } = useTranslation();
+
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-8 p-8 m-auto"}>
 
                 <div>
                     <Typography variant={"h5"} className={"flex-grow"}>
-                        Extend
+                        {t("extend_title")}
                     </Typography>
                     <Typography variant={"body2"} color={"secondary"}>
-                        Add subcollections, custom views, and entity actions to this collection.
+                        {t("extend_description")}
                     </Typography>
                 </div>
 
@@ -75,12 +78,10 @@ export function ExtendSettingsForm({
                 {isMergedCollection && onResetToCode && (
                     <div className={cls("flex flex-col gap-4 mt-8 border-t pt-8", defaultBorderMixin)}>
                         <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.
+                            {t("collection_defined_in_code")}
                         </Typography>
                         <Button color={"neutral"} onClick={onResetToCode}>
-                            Reset to code
+                            {t("reset_to_code")}
                         </Button>
                     </div>
                 )}