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

package/src/ui/collection_editor/GeneralSettingsForm.tsx

@@ -7,7 +7,8 @@ import {
     singular,
     toSnakeCase,
     useAuthController,
-    useCustomizationController
+    useCustomizationController,
+    useTranslation
 } from "@firecms/core";
 import {
     BooleanSwitchWithLabel,
@@ -17,7 +18,9 @@ import {
     DebouncedTextField,
     Dialog,
     ExpandablePanel,
+    HistoryIcon,
     IconButton,
+    SearchIcon,
     Select,
     SelectItem,
     TextField,
@@ -53,6 +56,7 @@ export function GeneralSettingsForm({
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     const updateDatabaseId = (databaseId: string) => {
         setFieldValue("databaseId", databaseId ?? undefined);
@@ -88,12 +92,12 @@ export function GeneralSettingsForm({
                 <div>
                     <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"}
@@ -105,7 +109,7 @@ export function GeneralSettingsForm({
 
                     {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>}
 
@@ -118,12 +122,12 @@ export function GeneralSettingsForm({
                         <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>
 
@@ -131,14 +135,14 @@ export function GeneralSettingsForm({
                     <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>
 
@@ -153,9 +157,9 @@ export function GeneralSettingsForm({
                                 return handleChange(e);
                             }}
                             value={values.singularName ?? ""}
-                            label={"Singular name"} />
+                            label={t("singular_name")} />
                         <FieldCaption error={showErrors && Boolean(errors.singularName)}>
-                            {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
+                            {showErrors && Boolean(errors.singularName) ? errors.singularName : t("singular_name_description")}
                         </FieldCaption>
                     </div>
 
@@ -169,22 +173,22 @@ export function GeneralSettingsForm({
                             multiline
                             minRows={2}
                             aria-describedby="description-helper-text"
-                            label="Description"
+                            label={t("description")}
                         />
                         <FieldCaption error={showErrors && Boolean(errors.description)}>
-                            {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
+                            {showErrors && Boolean(errors.description) ? errors.description : t("description_of_collection")}
                         </FieldCaption>
                     </div>
 
                     {/* Collection ID */}
                     <div className={"col-span-12"}>
                         <Field name={"id"}
-                               as={DebouncedTextField}
-                               disabled={!isNewCollection}
-                               label={"Collection ID"}
-                               error={showErrors && Boolean(errors.id)} />
+                            as={DebouncedTextField}
+                            disabled={!isNewCollection}
+                            label={t("collection_id")}
+                            error={showErrors && Boolean(errors.id)} />
                         <FieldCaption error={touched.id && Boolean(errors.id)}>
-                            {touched.id && Boolean(errors.id) ? errors.id : "This ID identifies this collection. Typically the same as the path."}
+                            {touched.id && Boolean(errors.id) ? errors.id : t("collection_id_description")}
                         </FieldCaption>
                     </div>
 
@@ -193,13 +197,12 @@ export function GeneralSettingsForm({
                         <BooleanSwitchWithLabel
                             position={"start"}
                             size={"large"}
-                            label="Collection group"
+                            label={t("collection_group")}
                             onValueChange={(v) => setFieldValue("collectionGroup", v)}
                             value={values.collectionGroup ?? false}
                         />
                         <FieldCaption>
-                            A collection group consists of all collections with the same path. This allows
-                            you to query over multiple collections at once.
+                            {t("collection_group_description")}
                         </FieldCaption>
                     </div>
 
@@ -207,7 +210,7 @@ export function GeneralSettingsForm({
 
                 {/* Advanced Settings */}
                 <ExpandablePanel
-                    title={<Typography variant="subtitle2">Advanced settings</Typography>}
+                    title={<Typography variant="subtitle2">{t("advanced_settings")}</Typography>}
                     initiallyExpanded={false}
                     className="mt-4"
                     innerClassName="p-4 flex flex-col gap-4"
@@ -218,16 +221,14 @@ export function GeneralSettingsForm({
                             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>
 
@@ -235,7 +236,7 @@ export function GeneralSettingsForm({
                     <div>
                         <Select
                             name="customId"
-                            label="Document IDs generation"
+                            label={t("document_id_generation")}
                             position={"item-aligned"}
                             size={"large"}
                             fullWidth={true}
@@ -254,27 +255,27 @@ export function GeneralSettingsForm({
                             }
                             renderValue={(value: any) => {
                                 if (value === "code_defined")
-                                    return "Code defined";
+                                    return t("code_defined");
                                 else if (value === "true")
-                                    return "Users must define an ID";
+                                    return t("users_must_define_id");
                                 else if (value === "optional")
-                                    return "Users can define an ID, but it is not required";
+                                    return t("users_can_define_id");
                                 else
-                                    return "Document ID is generated automatically";
+                                    return t("doc_id_auto_generated");
                             }}
                         >
                             <SelectItem value={"false"}>
-                                Document ID is generated automatically
+                                {t("doc_id_auto_generated")}
                             </SelectItem>
                             <SelectItem value={"true"}>
-                                Users must define an ID
+                                {t("users_must_define_id")}
                             </SelectItem>
                             <SelectItem value={"optional"}>
-                                Users can define an ID, but it is not required
+                                {t("users_can_define_id")}
                             </SelectItem>
                         </Select>
                         <FieldCaption>
-                            Configure how document IDs are generated when creating new entities.
+                            {t("config_doc_id_generation")}
                         </FieldCaption>
                     </div>
 
@@ -283,14 +284,12 @@ export function GeneralSettingsForm({
                         <BooleanSwitchWithLabel
                             position={"start"}
                             size={"large"}
-                            label="Enable text search for this collection"
+                            label={<span className="flex items-center gap-2"><SearchIcon size={"smallest"} />{t("enable_text_search")}</span>}
                             onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
                             value={values.textSearchEnabled ?? false}
                         />
                         <FieldCaption>
-                            Allow text search for this collection. If you have not specified a text search
-                            delegate, this will use the built-in local text search. This is not recommended
-                            for large collections, as it may incur in performance and cost issues.
+                            {t("text_search_description")}
                         </FieldCaption>
                     </div>
                 </ExpandablePanel>
@@ -321,8 +320,9 @@ function DefaultDatabaseField({
     databaseId,
     onDatabaseIdUpdate
 }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+    const { t } = useTranslation();
 
-    return <Tooltip title={"Database ID"}
+    return <Tooltip title={t("database_id")}
         side={"top"}
         align={"start"}>
         <TextField size={"small"}
@@ -330,6 +330,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/GetCodeDialog.tsx

@@ -1,4 +1,4 @@
-import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
+import { EntityCollection, isEmptyObject, useSnackbarController, useTranslation } from "@firecms/core";
 import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Tab, Tabs, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import JSON5 from "json5";
@@ -13,17 +13,18 @@ export function GetCodeDialog({
 }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
 
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
     const [format, setFormat] = useState<"ts" | "json">("json");
 
     const collectionData = collectionToCode({ ...collection });
 
     const tsCode = collection
         ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionData, null, "\t")
-        : "No collection selected";
+        : t("no_collection_selected");
 
     const jsonCode = collection
         ? JSON.stringify(collectionData, null, 2)
-        : "No collection selected";
+        : t("no_collection_selected");
 
     const code = format === "ts" ? tsCode : jsonCode;
 
@@ -31,7 +32,7 @@ export function GetCodeDialog({
         onOpenChange={onOpenChange}
         maxWidth={"4xl"}>
         <div className="flex items-center justify-between pr-6">
-            <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
+            <DialogTitle variant={"h6"}>{t("code_for_collection")} {collection.name}</DialogTitle>
             <Tabs value={format} onValueChange={(v) => setFormat(v as "ts" | "json")}>
                 <Tab value="ts">TypeScript</Tab>
                 <Tab value="json">JSON</Tab>
@@ -41,13 +42,13 @@ export function GetCodeDialog({
 
             <Typography variant={"body2"} className={"mb-4"}>
                 {format === "json"
-                    ? "Use this config to define the collection in JSON format."
+                    ? t("use_config_define_json")
                     : <>
-                        If you want to customise the collection in code, you can add this collection code to your CMS
-                        app configuration.
-                        More info in the <a
+                        {t("customise_collection_code")}
+                        <br/>
+                        <a
                             rel="noopener noreferrer"
-                            href={"https://firecms.co/docs/cloud/quickstart"}>docs</a>.
+                            href={"https://firecms.co/docs/cloud/quickstart"}>{t("more_info")}</a>
                     </>}
             </Typography>
             <Highlight
@@ -84,14 +85,14 @@ export function GetCodeDialog({
                     e.preventDefault();
                     snackbarController.open({
                         type: "success",
-                        message: "Copied"
+                        message: t("copied")
                     })
                     return navigator.clipboard.writeText(code);
                 }}>
                 <ContentCopyIcon size={"small"} />
-                Copy to clipboard
+                {t("copy")}
             </Button>
-            <Button onClick={() => onOpenChange(false)}>Close</Button>
+            <Button onClick={() => onOpenChange(false)}>{t("cancel")}</Button>
         </DialogActions>
     </Dialog>;
 }

package/src/ui/collection_editor/KanbanConfigSection.tsx

@@ -8,7 +8,8 @@ import {
     resolveCollection,
     unslugify,
     useAuthController,
-    useCustomizationController
+    useCustomizationController,
+    useTranslation
 } from "@firecms/core";
 import {
     CloseIcon,
@@ -30,6 +31,7 @@ export function KanbanConfigSection({
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     const { values, setFieldValue } = useFormex<EntityCollection>();
+    const { t } = useTranslation();
     const panelRef = useRef<HTMLDivElement>(null);
     const [columnPropertyDialogOpen, setColumnPropertyDialogOpen] = useState(false);
 
@@ -83,10 +85,10 @@ export function KanbanConfigSection({
 
     return (
         <div className={className} ref={panelRef}>
+            <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>{t("kanban_column_property")}</Typography>
             <Select
                 key={`column-select-${enumStringProperties.length}`}
                 name="kanban.columnProperty"
-                label="Kanban Column Property"
                 size={"large"}
                 fullWidth={true}
                 position={"item-aligned"}
@@ -105,10 +107,10 @@ export function KanbanConfigSection({
                 }}
                 renderValue={(value) => {
                     if (columnPropertyMissing) {
-                        return <span className="text-red-500">{value} (not found)</span>;
+                        return <span className="text-red-500">{value} ({t("not_found_suffix")})</span>;
                     }
                     const prop = enumStringProperties.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">
@@ -138,7 +140,7 @@ export function KanbanConfigSection({
                                 <div>
                                     <div>{prop.label}</div>
                                     <Typography variant="caption" color="secondary">
-                                        {fieldConfig?.name || "Enum"}
+                                        {fieldConfig?.name || "enum"}
                                     </Typography>
                                 </div>
                             </div>
@@ -148,10 +150,10 @@ export function KanbanConfigSection({
             </Select>
             <FieldCaption error={columnPropertyMissing}>
                 {columnPropertyMissing
-                    ? `Property "${kanbanConfig?.columnProperty}" does not exist or is not an enum string property. Please select a valid property or clear the selection.`
+                    ? t("kanban_property_not_found", { property: kanbanConfig?.columnProperty ?? "" })
                     : enumStringProperties.length === 0
-                        ? "No enum string properties found. Add a string property with enumValues to use Kanban view."
-                        : "Select a string property with enum values to group entities into columns"
+                        ? t("no_enum_string_properties")
+                        : t("kanban_column_description")
                 }
             </FieldCaption>
 
@@ -162,7 +164,7 @@ export function KanbanConfigSection({
                         className="ml-3.5 text-sm text-primary hover:text-primary-dark mt-2"
                         onClick={() => setColumnPropertyDialogOpen(true)}
                     >
-                        + Create "{dialogPropertyKey}" property
+                        {t("create_property", { property: dialogPropertyKey })}
                     </button>
                     <PropertyFormDialog
                         open={columnPropertyDialogOpen}

package/src/ui/collection_editor/LayoutModeSwitch.tsx

@@ -1,4 +1,5 @@
 import { cls, SquareIcon, ToggleButtonGroup, Typography, VerticalSplitIcon } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 
 export function LayoutModeSwitch({
     value,
@@ -10,8 +11,10 @@ export function LayoutModeSwitch({
     className?: string;
 }) {
 
+    const { t } = useTranslation();
+
     return <div className={cls(className)}>
-        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Document view</Typography>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>{t("document_view")}</Typography>
         <div className={"my-2"}>
             <ToggleButtonGroup
                 value={value}
@@ -19,17 +22,17 @@ export function LayoutModeSwitch({
                 options={[
                     {
                         value: "side_panel",
-                        label: "Side panel",
+                        label: t("side_panel"),
                         icon: <VerticalSplitIcon />
                     },
                     {
                         value: "full_screen",
-                        label: "Full screen",
+                        label: t("full_screen"),
                         icon: <SquareIcon />
                     }
                 ]}
             />
         </div>
-        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>{t("should_documents_opened_full_screen")}</Typography>
     </div>
 }