@firecms/collection_editor 3.1.0 → 3.2.0-canary.44dc65b

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -15,6 +15,7 @@ import {
     PropertyConfig,
     PropertyConfigBadge,
     PropertyConfigId,
+    useTranslation,
 } from "@firecms/core";
 import {
     Button,
@@ -127,6 +128,8 @@ export const PropertyForm = React.memo(
             name: ""
         } as PropertyWithId;
 
+        const { t } = useTranslation();
+
         const disabled = (Boolean(property && !editableProperty(property)) || !collectionEditable);
 
         const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
@@ -176,18 +179,18 @@ export const PropertyForm = React.memo(
                 const errors: Record<string, any> = {};
                 if (includeIdAndName) {
                     if (!values.name) {
-                        errors.name = "Required";
+                        errors.name = t("required");
                     } else {
-                        const nameError = validateName(values.name);
+                        const nameError = validateName(values.name, t);
                         if (nameError)
                             errors.name = nameError;
                     }
                     if (!values.id) {
-                        errors.id = "Required";
+                        errors.id = t("required");
                     } else {
                         // Exclude the current property key when editing to avoid false duplicate error
                         const keysToCheck = existingPropertyKeys?.filter(key => key !== propertyKey);
-                        const idError = validateId(values.id, keysToCheck);
+                        const idError = validateId(values.id, keysToCheck, t);
                         if (idError)
                             errors.id = idError;
                     }
@@ -196,21 +199,21 @@ export const PropertyForm = React.memo(
                 if (values.dataType === "string") {
                     if (values.validation?.matches && !isValidRegExp(values.validation?.matches.toString())) {
                         errors.validation = {
-                            matches: "Invalid regular expression"
+                            matches: t("invalid_regular_expression")
                         }
                     }
                 }
                 if (values.dataType === "reference" && !values.path) {
-                    errors.path = "You must specify a target collection for the field";
+                    errors.path = t("must_specify_target_collection");
                 }
                 if (values.propertyConfig === "repeat") {
                     if (!(values as any).of) {
-                        errors.of = "You need to specify a repeat field";
+                        errors.of = t("need_specify_repeat_field");
                     }
                 }
                 if (values.propertyConfig === "block") {
                     if (!(values as any).oneOf) {
-                        errors.oneOf = "You need to specify the properties of this block";
+                        errors.oneOf = t("need_specify_block_properties");
                     }
                 }
 
@@ -238,7 +241,7 @@ export const PropertyForm = React.memo(
                     for (const type of conditionTypes) {
                         const rule = conditions[type];
                         if (rule && isIncompleteRule(rule)) {
-                            conditionErrors[type] = "Incomplete condition - please select a field";
+                            conditionErrors[type] = t("incomplete_condition");
                         }
                     }
 
@@ -247,7 +250,7 @@ export const PropertyForm = React.memo(
                         const rule = conditions[enumType];
                         if (rule && typeof rule === "object" && rule.if) {
                             if (isIncompleteRule(rule)) {
-                                conditionErrors[enumType] = "Incomplete condition - please select a field";
+                                conditionErrors[enumType] = t("incomplete_condition");
                             }
                         }
                     }
@@ -313,6 +316,8 @@ export function PropertyFormDialog({
     onOkClicked?: () => void;
     onCancel?: () => void;
 }) {
+    const { t } = useTranslation();
+
     const formexRef = useRef<FormexController<PropertyWithId>>(undefined);
     const getController = (helpers: FormexController<PropertyWithId>) => {
         formexRef.current = helpers;
@@ -330,7 +335,7 @@ export function PropertyFormDialog({
                 e.stopPropagation();
                 formexRef.current?.handleSubmit(e)
             }}>
-            <DialogTitle hidden>Property edit view</DialogTitle>
+            <DialogTitle hidden>{t("property_edit_view")}</DialogTitle>
             <DialogContent>
 
                 <PropertyForm {...formProps}
@@ -407,6 +412,8 @@ function PropertyEditFormFields({
     collectionProperties?: Properties;
 } & FormexController<PropertyWithId>) {
 
+    const { t } = useTranslation();
+
     const [selectOpen, setSelectOpen] = useState(autoOpenTypeSelect);
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
@@ -582,7 +589,7 @@ function PropertyEditFormFields({
                     {selectedWidgetError &&
                         <Typography variant="caption"
                             className={"ml-3.5"}
-                            color={"error"}>Required</Typography>}
+                            color={"error"}>{t("required")}</Typography>}
 
                     {/*<Typography variant="caption" className={"ml-3.5"}>Define your own custom properties and*/}
                     {/*    components</Typography>*/}
@@ -626,11 +633,9 @@ function PropertyEditFormFields({
                 <ConfirmationDialog open={deleteDialogOpen}
                     onAccept={() => onDelete(values?.id, propertyNamespace)}
                     onCancel={() => setDeleteDialogOpen(false)}
-                    title={<div>Delete this property?</div>}
+                    title={<div>{t("delete_this_property")}</div>}
                     body={
-                        <div> This will <b>not delete any
-                            data</b>, only modify the
-                            collection.</div>
+                        <div>{t("delete_property_warning")}</div>
                     } />}
 
         </>
@@ -639,53 +644,53 @@ function PropertyEditFormFields({
 
 const idRegEx = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
 
-function validateId(value?: string, existingPropertyKeys?: string[]) {
+function validateId(value: string | undefined, existingPropertyKeys: string[] | undefined, t: any) {
 
     let error;
     if (!value) {
-        error = "You must specify an id for the field";
+        error = t("error_must_specify_id");
     }
     if (value && !value.match(idRegEx)) {
-        error = "The id can only contain letters, numbers and underscores (_), and not start with a number";
+        error = t("error_id_format");
     }
     if (value && existingPropertyKeys && existingPropertyKeys.includes(value)) {
-        error = "There is another field with this ID already";
+        error = t("error_id_already_exists");
     }
     return error;
 }
 
-function validateName(value: string) {
+function validateName(value: string, t: any) {
     let error;
     if (!value) {
-        error = "You must specify a title for the field";
+        error = t("error_must_specify_title");
     }
     return error;
 }
 
 const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
-    text_field: "Text",
-    multiline: "Text",
-    markdown: "Text",
-    url: "Text",
-    email: "Text",
-    switch: "Boolean",
-    user_select: "Users",
-    select: "Select",
-    multi_select: "Select",
-    number_input: "Number",
-    number_select: "Select",
-    multi_number_select: "Select",
-    file_upload: "File",
-    multi_file_upload: "File",
-    reference: "Reference",
-    reference_as_string: "Text",
-    multi_references: "Reference",
-    date_time: "Date",
-    group: "Group",
-    key_value: "Group",
-    repeat: "Array",
-    custom_array: "Array",
-    block: "Group"
+    text_field: "widget_group_text",
+    multiline: "widget_group_text",
+    markdown: "widget_group_text",
+    url: "widget_group_text",
+    email: "widget_group_text",
+    switch: "widget_group_boolean",
+    user_select: "widget_group_users",
+    select: "widget_group_select",
+    multi_select: "widget_group_select",
+    number_input: "widget_group_number",
+    number_select: "widget_group_select",
+    multi_number_select: "widget_group_select",
+    file_upload: "widget_group_file",
+    multi_file_upload: "widget_group_file",
+    reference: "widget_group_reference",
+    reference_as_string: "widget_group_text",
+    multi_references: "widget_group_reference",
+    date_time: "widget_group_date",
+    group: "widget_group_group",
+    key_value: "widget_group_group",
+    repeat: "widget_group_array",
+    custom_array: "widget_group_array",
+    block: "widget_group_group"
 };
 
 function WidgetSelectView({
@@ -712,6 +717,8 @@ function WidgetSelectView({
     inArray?: boolean
 }) {
 
+    const { t } = useTranslation();
+
     const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
 
     const displayedWidgets = (inArray
@@ -734,27 +741,27 @@ function WidgetSelectView({
     const computedFieldConfig = baseFieldConfig && propertyConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
 
     const groups: string[] = [...new Set(Object.keys(displayedWidgets).map(key => {
-        const group = WIDGET_TYPE_MAP[key as PropertyConfigId];
-        if (group) {
-            return group;
+        const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
+        if (groupKey) {
+            return t(groupKey as any);
         }
-        return "Custom/Other"
+        return t("custom_or_other")
     }))];
 
     return <>
-        <div
-            onClick={() => {
-                if (!disabled) {
-                    onOpenChange(!open, Boolean(value));
-                }
-            }}
-            className={cls(
-                "select-none rounded-md text-sm p-4",
-                fieldBackgroundMixin,
-                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                "relative flex items-center",
-            )}>
-            {!value && <em>Select a property widget</em>}
+            <div
+                onClick={() => {
+                    if (!disabled) {
+                        onOpenChange(!open, Boolean(value));
+                    }
+                }}
+                className={cls(
+                    "select-none rounded-md text-sm p-4",
+                    fieldBackgroundMixin,
+                    disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                    "relative flex items-center",
+                )}>
+                {!value && <em>{t("select_property_widget")}</em>}
             {value && computedFieldConfig && <div
                 className={cls(
                     "flex items-center")}>
@@ -774,7 +781,7 @@ function WidgetSelectView({
             onOpenChange={(open) => onOpenChange(open, Boolean(value))}
             maxWidth={"4xl"}>
             <DialogTitle>
-                Select a property widget
+                {t("select_property_widget")}
             </DialogTitle>
             <DialogContent>
                 <div>
@@ -784,7 +791,8 @@ function WidgetSelectView({
                             <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
                                 {Object.entries(displayedWidgets).map(([key, propertyConfig]) => {
                                     const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
-                                    if (groupKey === group) {
+                                    const translatedGroup = groupKey ? t(groupKey as any) : t("custom_or_other");
+                                    if (translatedGroup === group) {
                                         return <WidgetSelectViewItem
                                             key={key}
                                             initialProperty={initialProperty}
@@ -831,6 +839,7 @@ export function WidgetSelectViewItem({
     propertyConfig,
     existing
 }: PropertySelectItemProps) {
+    const { t } = useTranslation();
     const baseProperty = propertyConfig.property;
     const shouldWarnChangingDataType = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
 
@@ -847,7 +856,7 @@ export function WidgetSelectViewItem({
             <div>
                 <div className={"flex flex-row gap-2 items-center"}>
                     {shouldWarnChangingDataType && <Tooltip
-                        title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
+                        title={t("error_changing_data_type")}>
                         <WarningIcon size="smallest" className={"w-4"} />
                     </Tooltip>}
                     <Typography

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -5,7 +5,8 @@ import {
     EntityCustomView,
     resolveEntityView,
     useCustomizationController,
-    User
+    User,
+    useTranslation
 } from "@firecms/core";
 import {
     AddIcon,
@@ -48,6 +49,7 @@ export function SubcollectionsEditTab({
 }) {
 
     const { entityViews: contextEntityViews } = useCustomizationController();
+    const { t } = useTranslation();
 
     const [subcollectionToDelete, setSubcollectionToDelete] = React.useState<string | undefined>();
     const [addEntityViewDialogOpen, setAddEntityViewDialogOpen] = React.useState<boolean>(false);
@@ -75,7 +77,7 @@ export function SubcollectionsEditTab({
 
             <div className={"flex-grow flex flex-col gap-4 items-start"}>
                 <Typography variant={"h6"}>
-                    Subcollections of {values.name}
+                    {t("subcollections_of")} {values.name}
                 </Typography>
 
                 <Paper className={"flex flex-col gap-4 p-2 w-full"}>
@@ -95,7 +97,7 @@ export function SubcollectionsEditTab({
                                     </TableCell>
                                     <TableCell
                                         align="right">
-                                        <Tooltip title={"Remove"}
+                                        <Tooltip title={t("remove")}
                                             asChild={true}>
                                             <IconButton size="small"
                                                 onClick={(e) => {
@@ -120,7 +122,7 @@ export function SubcollectionsEditTab({
                             });
                         }}
                         startIcon={<AddIcon />}>
-                        Add subcollection
+                        {t("add_subcollection")}
                     </Button>
 
                 </Paper>
@@ -129,7 +131,7 @@ export function SubcollectionsEditTab({
 
             <div className={"flex-grow  flex flex-col gap-4 items-start"}>
                 <Typography variant={"h6"}>
-                    Custom views
+                    {t("custom_views")}
                 </Typography>
 
                 {totalEntityViews === 0 &&
@@ -138,8 +140,8 @@ export function SubcollectionsEditTab({
                         href={"https://firecms.co/docs/cloud/quickstart"}
                         component={"a"}
                         rel="noopener noreferrer"
-                        target="_blank">More info</Button>}>
-                        Define your own custom views by uploading them with the CLI.
+                        target="_blank">{t("more_info")}</Button>}>
+                        {t("define_custom_views_cli")}
                     </Alert>
                 }
 
@@ -157,7 +159,7 @@ export function SubcollectionsEditTab({
                                         </TableCell>
                                         <TableCell
                                             align="right">
-                                            <Tooltip title={"Remove"}
+                                            <Tooltip title={t("remove")}
                                                 asChild={true}>
                                                 <IconButton size="small"
                                                     onClick={(e) => {
@@ -180,8 +182,7 @@ export function SubcollectionsEditTab({
                                                 {view.name}
                                             </Typography>
                                             <Typography variant={"caption"} className={"flex-grow"}>
-                                                This view is defined in code with
-                                                key <code>{view.key}</code>
+                                                {t("view_defined_in_code")} <code>{view.key}</code>
                                             </Typography>
                                         </TableCell>
                                     </TableRow>
@@ -194,7 +195,7 @@ export function SubcollectionsEditTab({
                                 setAddEntityViewDialogOpen(true);
                             }}
                             startIcon={<AddIcon />}>
-                            Add custom entity view
+                            {t("add_custom_entity_view")}
                         </Button>
                     </Paper>
 
@@ -233,10 +234,8 @@ export function SubcollectionsEditTab({
                         });
                     }}
                     onCancel={() => setSubcollectionToDelete(undefined)}
-                    title={<>Delete this subcollection?</>}
-                    body={<> This will <b>not
-                        delete any data</b>, only
-                        the collection in the CMS</>} />}
+                    title={<>{t("delete_this_subcollection")}</>}
+                    body={<>{t("remove_collection_warning")}</>} />}
             {viewToDelete &&
                 <ConfirmationDialog open={Boolean(viewToDelete)}
                     onAccept={() => {
@@ -244,10 +243,8 @@ export function SubcollectionsEditTab({
                         setViewToDelete(undefined);
                     }}
                     onCancel={() => setViewToDelete(undefined)}
-                    title={<>Remove this view?</>}
-                    body={<>This will <b>not
-                        delete any data</b>, only
-                        the view in the CMS</>} />}
+                    title={<>{t("remove_this_view")}</>}
+                    body={<>{t("remove_view_warning")}</>} />}
 
             <CollectionEditorDialog
                 open={Boolean(currentDialog)}

package/src/ui/collection_editor/ViewModeSwitch.tsx

@@ -1,4 +1,4 @@
-import { ViewMode } from "@firecms/core";
+import { ViewMode, useTranslation } from "@firecms/core";
 import { AppsIcon, cls, ListIcon, ToggleButtonGroup, Typography, ViewKanbanIcon } from "@firecms/ui";
 
 export function ViewModeSwitch({
@@ -11,8 +11,10 @@ export function ViewModeSwitch({
     className?: string;
 }) {
 
+    const { t } = useTranslation();
+
     return <div className={cls(className)}>
-        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Default collection view</Typography>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>{t("default_collection_view")}</Typography>
         <div className={"my-2"}>
             <ToggleButtonGroup
                 value={value}
@@ -20,22 +22,22 @@ export function ViewModeSwitch({
                 options={[
                     {
                         value: "table",
-                        label: "Table",
+                        label: t("table_view"),
                         icon: <ListIcon />
                     },
                     {
                         value: "cards",
-                        label: "Cards",
+                        label: t("cards_view"),
                         icon: <AppsIcon />
                     },
                     {
                         value: "kanban",
-                        label: "Kanban",
+                        label: t("kanban_view"),
                         icon: <ViewKanbanIcon />
                     }
                 ]}
             />
         </div>
-        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Choose how entities should be displayed by default</Typography>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>{t("choose_how_entities_displayed_default")}</Typography>
     </div>
 }

package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -5,7 +5,8 @@ import {
     Properties,
     useAuthController,
     useNavigationController,
-    useSelectionController
+    useSelectionController,
+    useTranslation
 } from "@firecms/core";
 import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
@@ -19,6 +20,8 @@ export function CollectionEditorImportDataPreview({
     properties: Properties,
     propertiesOrder: string[]
 }) {
+    const { t } = useTranslation();
+
 
     const authController = useAuthController();
     const navigation = useNavigationController();
@@ -46,8 +49,8 @@ export function CollectionEditorImportDataPreview({
 
     return <EntityCollectionTable
         title={<div>
-            <Typography variant={"subtitle2"}>Imported data preview</Typography>
-            <Typography variant={"caption"}>Entities with the same id will be overwritten</Typography>
+            <Typography variant={"subtitle2"}>{t("imported_data_preview")}</Typography>
+            <Typography variant={"caption"}>{t("entities_with_same_id_overwritten")}</Typography>
         </div>}
         tableController={{
             data: importConfig.entities,

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -6,7 +6,8 @@ import {
 } from "@firecms/data_import";
 import { getIn, useFormex } from "@firecms/formex";
 
-import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
+import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge,     useTranslation
+} from "@firecms/core";
 import { cls, Container, Select, SelectItem, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -26,6 +27,8 @@ export function CollectionEditorImportMapping({
                                                       propertyConfigs: Record<string, PropertyConfig>,
                                                       collectionEditable: boolean
                                                   }) {
+    const { t } = useTranslation();
+
 
     // const {
     //     values,
@@ -142,7 +145,7 @@ export function CollectionEditorImportMapping({
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
-                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
+                <Typography variant="h6" className={"my-4 ml-3.5"}>{t("data_property_mapping")}</Typography>
 
                 <DataNewPropertiesMapping importConfig={importConfig}
                                           destinationProperties={values.properties as Properties}

package/src/ui/collection_editor/properties/BooleanPropertyField.tsx

@@ -4,11 +4,13 @@ import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { SwitchControl } from "../SwitchControl";
+import { useTranslation } from "@firecms/core";
 
 export function BooleanPropertyField({ disabled }: {
     disabled: boolean;
 }) {
     const { values } = useFormex();
+    const { t } = useTranslation();
     const defaultValue = getIn(values, "defaultValue");
 
     return (
@@ -28,7 +30,7 @@ export function BooleanPropertyField({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             size={"medium"}
-                            label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
+                            label={defaultValue === null || defaultValue === undefined ? t("default_value_not_set") : t("default_value_is", { value: defaultValue.toString() })}
                             disabled={disabled}
                             allowIndeterminate={true} field={field}
                             form={form}/>

package/src/ui/collection_editor/properties/CommonPropertyFields.tsx

@@ -2,7 +2,7 @@ import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
-import { FieldCaption, prettifyIdentifier, toSnakeCase } from "@firecms/core";
+import { FieldCaption, prettifyIdentifier, toSnakeCase, useTranslation } from "@firecms/core";
 
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
@@ -30,6 +30,8 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
             validate
         } = useFormex<PropertyWithId>();
 
+        const { t } = useTranslation();
+
         const name = "name";
         const nameError = showErrors && getIn(errors, name);
 
@@ -58,7 +60,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                             setFieldTouched(name, true);
                         }}
                         style={{ fontSize: 20 }}
-                        placeholder={"Field name"}
+                        placeholder={t("field_name")}
                         required
                         disabled={disabled}
                         error={Boolean(nameError)}/>
@@ -72,7 +74,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                     <Field
                         name={id}
                         as={DebouncedTextField}
-                        label={"ID"}
+                        label={t("id")}
                         value={values[id]}
                         onChange={(e: any) => {
                             const newIdValue = e.target.value;
@@ -95,7 +97,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                 <div>
                     <Field name={description}
                            as={DebouncedTextField}
-                           label={"Description"}
+                           label={t("description")}
                            disabled={disabled}
                            error={Boolean(descriptionError)}/>
                     <FieldCaption error={Boolean(descriptionError)}>