@firecms/collection_editor 3.0.1 → 3.1.0-canary.02232f4

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -10,10 +10,12 @@ import {
     isPropertyBuilder,
     isValidRegExp,
     mergeDeep,
+    Properties,
     Property,
     PropertyConfig,
     PropertyConfigBadge,
     PropertyConfigId,
+    useTranslation,
 } from "@firecms/core";
 import {
     Button,
@@ -45,6 +47,7 @@ import { NumberPropertyField } from "./properties/NumberPropertyField";
 import { ReferencePropertyField } from "./properties/ReferencePropertyField";
 import { DateTimePropertyField } from "./properties/DateTimePropertyField";
 import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedPropertyValidation";
+import { ConditionsPanel, ConditionsEditor, EnumConditionsEditor } from "./properties/conditions";
 import { editableProperty } from "../../utils/entities";
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
@@ -85,6 +88,11 @@ export type PropertyFormProps = {
     getController?: (formex: FormexController<PropertyWithId>) => void;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
+    /**
+     * Collection properties for populating the conditions field selector.
+     * Includes nested map properties.
+     */
+    collectionProperties?: Properties;
 };
 
 export const PropertyForm = React.memo(
@@ -108,10 +116,11 @@ export const PropertyForm = React.memo(
             initialErrors,
             forceShowErrors,
             allowDataInference,
-            getController,
             getData,
+            getController,
             propertyConfigs,
-            collectionEditable
+            collectionEditable,
+            collectionProperties
         } = props;
 
         const initialValue: PropertyWithId = {
@@ -119,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 ? {
@@ -128,9 +139,9 @@ export const PropertyForm = React.memo(
         } : undefined);
 
         const doOnPropertyChanged = ({
-                                         id,
-                                         property
-                                     }: OnPropertyChangedParams) => {
+            id,
+            property
+        }: OnPropertyChangedParams) => {
             const params = {
                 id,
                 previousId: lastSubmittedProperty.current?.id,
@@ -168,16 +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 {
-                        const idError = validateId(values.id, existingPropertyKeys);
+                        // 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, t);
                         if (idError)
                             errors.id = idError;
                     }
@@ -186,23 +199,67 @@ 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");
                     }
                 }
+
+                // Validate conditions - check for incomplete condition rules
+                const conditions = (values as any).conditions;
+                if (conditions) {
+                    const conditionErrors: Record<string, string> = {};
+                    const conditionTypes = ["disabled", "hidden", "required", "readOnly"];
+
+                    // Helper to check if a JSON Logic rule is incomplete (placeholder or empty keys)
+                    const isIncompleteRule = (rule: any): boolean => {
+                        if (!rule || typeof rule !== "object") return false;
+                        const ruleStr = JSON.stringify(rule);
+                        // Check for placeholder pattern used when field is not selected
+                        if (ruleStr.includes("values._placeholder")) return true;
+                        // Check for empty string keys (invalid operators)
+                        if (Object.keys(rule).some(k => k === "")) return true;
+                        // Recursively check nested objects
+                        for (const key of Object.keys(rule)) {
+                            if (typeof rule[key] === "object" && isIncompleteRule(rule[key])) return true;
+                        }
+                        return false;
+                    };
+
+                    for (const type of conditionTypes) {
+                        const rule = conditions[type];
+                        if (rule && isIncompleteRule(rule)) {
+                            conditionErrors[type] = t("incomplete_condition");
+                        }
+                    }
+
+                    // Validate enum conditions (allowedEnumValues, excludedEnumValues)
+                    for (const enumType of ["allowedEnumValues", "excludedEnumValues"]) {
+                        const rule = conditions[enumType];
+                        if (rule && typeof rule === "object" && rule.if) {
+                            if (isIncompleteRule(rule)) {
+                                conditionErrors[enumType] = t("incomplete_condition");
+                            }
+                        }
+                    }
+
+                    if (Object.keys(conditionErrors).length > 0) {
+                        errors.conditions = conditionErrors;
+                    }
+                }
+
                 return errors;
             }
         });
@@ -231,33 +288,37 @@ export const PropertyForm = React.memo(
                 allowDataInference={allowDataInference}
                 propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
-                {...formexController}/>
+                collectionProperties={collectionProperties}
+                {...formexController} />
         </Formex>;
     }, (a, b) =>
-        a.getData === b.getData &&
-        a.propertyKey === b.propertyKey &&
-        a.propertyNamespace === b.propertyNamespace &&
-        a.includeIdAndName === b.includeIdAndName &&
-        a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
-        a.autoUpdateId === b.autoUpdateId &&
-        a.existingPropertyKeys === b.existingPropertyKeys &&
-        a.existingProperty === b.existingProperty
+    a.getData === b.getData &&
+    a.propertyKey === b.propertyKey &&
+    a.propertyNamespace === b.propertyNamespace &&
+    a.includeIdAndName === b.includeIdAndName &&
+    a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
+    a.autoUpdateId === b.autoUpdateId &&
+    a.existingPropertyKeys === b.existingPropertyKeys &&
+    a.existingProperty === b.existingProperty &&
+    equal(a.property, b.property)
 );
 
 export function PropertyFormDialog({
-                                       open,
-                                       onCancel,
-                                       onOkClicked,
-                                       onPropertyChanged,
-                                       getData,
-                                       collectionEditable,
-                                       ...formProps
-                                   }: PropertyFormProps & {
+    open,
+    onCancel,
+    onOkClicked,
+    onPropertyChanged,
+    getData,
+    collectionEditable,
+    ...formProps
+}: PropertyFormProps & {
     open?: boolean;
     onOkClicked?: () => void;
     onCancel?: () => void;
 }) {
-    const formexRef = useRef<FormexController<PropertyWithId>>();
+    const { t } = useTranslation();
+
+    const formexRef = useRef<FormexController<PropertyWithId>>(undefined);
     const getController = (helpers: FormexController<PropertyWithId>) => {
         formexRef.current = helpers;
     };
@@ -268,25 +329,25 @@ export function PropertyFormDialog({
         fullWidth={true}
     >
         <form noValidate={true}
-              autoComplete={"off"}
-              onSubmit={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  formexRef.current?.handleSubmit(e)
-              }}>
-            <DialogTitle hidden>Property edit view</DialogTitle>
+            autoComplete={"off"}
+            onSubmit={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                formexRef.current?.handleSubmit(e)
+            }}>
+            <DialogTitle hidden>{t("property_edit_view")}</DialogTitle>
             <DialogContent>
 
                 <PropertyForm {...formProps}
-                              onDismiss={onCancel}
-                              onPropertyChanged={(params) => {
-                                  onPropertyChanged?.(params);
-                                  onOkClicked?.();
-                              }}
-                              collectionEditable={collectionEditable}
-                              onPropertyChangedImmediate={false}
-                              getController={getController}
-                              getData={getData}
+                    onDismiss={onCancel}
+                    onPropertyChanged={(params) => {
+                        onPropertyChanged?.(params);
+                        onOkClicked?.();
+                    }}
+                    collectionEditable={collectionEditable}
+                    onPropertyChangedImmediate={false}
+                    getController={getController}
+                    getData={getData}
                 />
             </DialogContent>
 
@@ -294,7 +355,6 @@ export function PropertyFormDialog({
 
                 {onCancel && <Button
                     variant={"text"}
-                    color={"primary"}
                     onClick={() => {
                         onCancel();
                         formexRef.current?.resetForm();
@@ -302,9 +362,7 @@ export function PropertyFormDialog({
                     Cancel
                 </Button>}
 
-                <Button variant="outlined"
-                        type={"submit"}
-                        color="primary">
+                <Button type={"submit"}>
                     Ok
                 </Button>
             </DialogActions>
@@ -314,26 +372,27 @@ export function PropertyFormDialog({
 }
 
 function PropertyEditFormFields({
-                                    values,
-                                    errors,
-                                    setValues,
-                                    existing,
-                                    autoUpdateId = false,
-                                    autoOpenTypeSelect,
-                                    includeIdAndTitle,
-                                    onPropertyChanged,
-                                    onDelete,
-                                    propertyNamespace,
-                                    onDismiss,
-                                    onError,
-                                    showErrors,
-                                    disabled,
-                                    inArray,
-                                    getData,
-                                    allowDataInference,
-                                    propertyConfigs,
-                                    collectionEditable
-                                }: {
+    values,
+    errors,
+    setValues,
+    existing,
+    autoUpdateId = false,
+    autoOpenTypeSelect,
+    includeIdAndTitle,
+    onPropertyChanged,
+    onDelete,
+    propertyNamespace,
+    onDismiss,
+    onError,
+    showErrors,
+    disabled,
+    inArray,
+    getData,
+    allowDataInference,
+    propertyConfigs,
+    collectionEditable,
+    collectionProperties
+}: {
     includeIdAndTitle?: boolean;
     existing: boolean;
     autoUpdateId?: boolean;
@@ -350,8 +409,11 @@ function PropertyEditFormFields({
     allowDataInference: boolean;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
+    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);
@@ -404,16 +466,16 @@ function PropertyEditFormFields({
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
-                                 disabled={disabled}
-                                 showErrors={showErrors}/>;
+                disabled={disabled}
+                showErrors={showErrors} />;
     } else if (selectedFieldConfigId === "url") {
         childComponent =
             <UrlPropertyField disabled={disabled}
-                              showErrors={showErrors}/>;
+                showErrors={showErrors} />;
     } else if (selectedFieldConfigId === "markdown") {
         childComponent =
             <MarkdownPropertyField disabled={disabled}
-                                   showErrors={showErrors}/>;
+                showErrors={showErrors} />;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField
@@ -422,7 +484,8 @@ function PropertyEditFormFields({
             updateIds={!existing}
             disabled={disabled}
             getData={getData}
-            showErrors={showErrors}/>;
+            propertyNamespace={propertyNamespace}
+            showErrors={showErrors} />;
     } else if (selectedFieldConfigId === "multi_select" ||
         selectedFieldConfigId === "multi_number_select") {
         childComponent = <EnumPropertyField
@@ -431,64 +494,65 @@ function PropertyEditFormFields({
             disabled={disabled}
             allowDataInference={allowDataInference}
             getData={getData}
-            showErrors={showErrors}/>;
+            propertyNamespace={propertyNamespace}
+            showErrors={showErrors} />;
     } else if (selectedFieldConfigId === "file_upload") {
         childComponent =
             <StoragePropertyField existing={existing}
-                                  multiple={false}
-                                  disabled={disabled}/>;
+                multiple={false}
+                disabled={disabled} />;
     } else if (selectedFieldConfigId === "multi_file_upload") {
         childComponent =
             <StoragePropertyField existing={existing}
-                                  multiple={true}
-                                  disabled={disabled}/>;
+                multiple={true}
+                disabled={disabled} />;
     } else if (selectedFieldConfigId === "switch") {
-        childComponent = <BooleanPropertyField disabled={disabled}/>;
+        childComponent = <BooleanPropertyField disabled={disabled} />;
     } else if (selectedFieldConfigId === "number_input") {
-        childComponent = <NumberPropertyField disabled={disabled}/>;
+        childComponent = <NumberPropertyField disabled={disabled} />;
     } else if (selectedFieldConfigId === "group") {
         childComponent =
             <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
-                              collectionEditable={collectionEditable}
-                              propertyConfigs={propertyConfigs}/>;
+                collectionEditable={collectionEditable}
+                propertyConfigs={propertyConfigs} />;
     } else if (selectedFieldConfigId === "block") {
         childComponent =
             <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
-                                collectionEditable={collectionEditable}
-                                propertyConfigs={propertyConfigs}/>;
+                collectionEditable={collectionEditable}
+                propertyConfigs={propertyConfigs} />;
     } else if (selectedFieldConfigId === "reference") {
         childComponent =
             <ReferencePropertyField showErrors={showErrors}
-                                    existing={existing}
-                                    multiple={false}
-                                    disabled={disabled}/>;
+                existing={existing}
+                multiple={false}
+                disabled={disabled} />;
     } else if (selectedFieldConfigId === "reference_as_string") {
         childComponent =
             <ReferencePropertyField showErrors={showErrors}
-                                    existing={existing}
-                                    asString={true}
-                                    multiple={false}
-                                    disabled={disabled}/>;
+                existing={existing}
+                asString={true}
+                multiple={false}
+                disabled={disabled} />;
     } else if (selectedFieldConfigId === "date_time") {
-        childComponent = <DateTimePropertyField disabled={disabled}/>;
+        childComponent = <DateTimePropertyField disabled={disabled} />;
     } else if (selectedFieldConfigId === "multi_references") {
         childComponent =
             <ReferencePropertyField showErrors={showErrors}
-                                    existing={existing}
-                                    multiple={true}
-                                    disabled={disabled}/>;
+                existing={existing}
+                multiple={true}
+                disabled={disabled} />;
     } else if (selectedFieldConfigId === "repeat") {
         childComponent =
             <RepeatPropertyField showErrors={showErrors}
-                                 existing={existing}
-                                 getData={getData}
-                                 allowDataInference={allowDataInference}
-                                 disabled={disabled}
-                                 collectionEditable={collectionEditable}
-                                 propertyConfigs={propertyConfigs}/>;
+                existing={existing}
+                getData={getData}
+                allowDataInference={allowDataInference}
+                disabled={disabled}
+                collectionEditable={collectionEditable}
+                propertyConfigs={propertyConfigs} />;
     } else if (selectedFieldConfigId === "key_value") {
         childComponent =
-            <KeyValuePropertyField disabled={disabled}/>;
+            <KeyValuePropertyField disabled={disabled} />;
     } else {
         childComponent = null;
     }
@@ -520,54 +584,59 @@ function PropertyEditFormFields({
                         showError={Boolean(selectedWidgetError)}
                         existing={existing}
                         propertyConfigs={propertyConfigs}
-                        inArray={inArray}/>
+                        inArray={inArray} />
 
                     {selectedWidgetError &&
                         <Typography variant="caption"
-                                    className={"ml-3.5"}
-                                    color={"error"}>Required</Typography>}
+                            className={"ml-3.5"}
+                            color={"error"}>{t("required")}</Typography>}
 
                     {/*<Typography variant="caption" className={"ml-3.5"}>Define your own custom properties and*/}
                     {/*    components</Typography>*/}
 
                 </div>
 
-                {onDelete && values?.id &&
+                {onDelete && existing && values?.id &&
                     <IconButton
                         variant={"ghost"}
                         className="m-4"
                         disabled={disabled}
                         onClick={() => setDeleteDialogOpen(true)}>
-                        <DeleteIcon/>
+                        <DeleteIcon />
                     </IconButton>}
             </div>
 
             <div className={"grid grid-cols-12 gap-y-12 mt-8 mb-8"}>
                 {includeIdAndTitle &&
                     <CommonPropertyFields showErrors={showErrors}
-                                          disabledId={existing}
-                                          isNewProperty={!existing}
-                                          disabled={disabled}
-                                          autoUpdateId={autoUpdateId}
-                                          ref={nameFieldRef}/>}
+                        disabledId={existing}
+                        isNewProperty={!existing}
+                        disabled={disabled}
+                        autoUpdateId={autoUpdateId}
+                        ref={nameFieldRef} />}
 
                 {childComponent}
 
                 <div className={"col-span-12"}>
-                    <AdvancedPropertyValidation disabled={disabled}/>
+                    <AdvancedPropertyValidation disabled={disabled} />
+                </div>
+
+                <div className={"col-span-12"}>
+                    <ConditionsPanel>
+                        <ConditionsEditor disabled={disabled} collectionProperties={collectionProperties} />
+                        <EnumConditionsEditor disabled={disabled} collectionProperties={collectionProperties} />
+                    </ConditionsPanel>
                 </div>
             </div>
 
             {onDelete &&
                 <ConfirmationDialog open={deleteDialogOpen}
-                                    onAccept={() => onDelete(values?.id, propertyNamespace)}
-                                    onCancel={() => setDeleteDialogOpen(false)}
-                                    title={<div>Delete this property?</div>}
-                                    body={
-                                        <div> This will <b>not delete any
-                                            data</b>, only modify the
-                                            collection.</div>
-                                    }/>}
+                    onAccept={() => onDelete(values?.id, propertyNamespace)}
+                    onCancel={() => setDeleteDialogOpen(false)}
+                    title={<div>{t("delete_this_property")}</div>}
+                    body={
+                        <div>{t("delete_property_warning")}</div>
+                    } />}
 
         </>
     );
@@ -575,67 +644,67 @@ 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({
-                              initialProperty,
-                              value,
-                              onValueChange,
-                              open,
-                              onOpenChange,
-                              disabled,
-                              showError,
-                              existing,
-                              propertyConfigs,
-                              inArray
-                          }: {
+    initialProperty,
+    value,
+    onValueChange,
+    open,
+    onOpenChange,
+    disabled,
+    showError,
+    existing,
+    propertyConfigs,
+    inArray
+}: {
     initialProperty?: PropertyWithId,
     value?: PropertyConfigId,
     onValueChange: (value: string) => void,
@@ -648,6 +717,8 @@ function WidgetSelectView({
     inArray?: boolean
 }) {
 
+    const { t } = useTranslation();
+
     const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
 
     const displayedWidgets = (inArray
@@ -670,47 +741,47 @@ 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")}>
                 <div className={"mr-8"}>
-                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
+                    <PropertyConfigBadge propertyConfig={computedFieldConfig} />
                 </div>
                 <div className={"flex flex-col items-start text-base text-left"}>
                     <div>{computedFieldConfig.name}</div>
                     <Typography variant={"caption"}
-                                color={"secondary"}>
+                        color={"secondary"}>
                         {computedFieldConfig.description}
                     </Typography>
                 </div>
             </div>}
         </div>
         <Dialog open={open}
-                onOpenChange={(open) => onOpenChange(open, Boolean(value))}
-                maxWidth={"4xl"}>
+            onOpenChange={(open) => onOpenChange(open, Boolean(value))}
+            maxWidth={"4xl"}>
             <DialogTitle>
-                Select a property widget
+                {t("select_property_widget")}
             </DialogTitle>
             <DialogContent>
                 <div>
@@ -720,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}
@@ -729,7 +801,7 @@ function WidgetSelectView({
                                                 onOpenChange(false, true);
                                             }}
                                             propertyConfig={propertyConfig}
-                                            existing={existing}/>;
+                                            existing={existing} />;
                                     }
                                     return null;
                                 })}
@@ -761,12 +833,13 @@ export interface PropertySelectItemProps {
 }
 
 export function WidgetSelectViewItem({
-                                         onClick,
-                                         initialProperty,
-                                         // optionDisabled,
-                                         propertyConfig,
-                                         existing
-                                     }: PropertySelectItemProps) {
+    onClick,
+    initialProperty,
+    // optionDisabled,
+    propertyConfig,
+    existing
+}: PropertySelectItemProps) {
+    const { t } = useTranslation();
     const baseProperty = propertyConfig.property;
     const shouldWarnChangingDataType = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
 
@@ -778,13 +851,13 @@ export function WidgetSelectViewItem({
                 "flex flex-row items-center text-base min-h-[48px]",
             )}>
             <div className={"mr-8"}>
-                <PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingDataType}/>
+                <PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingDataType} />
             </div>
             <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."}>
-                        <WarningIcon size="smallest" className={"w-4"}/>
+                        title={t("error_changing_data_type")}>
+                        <WarningIcon size="smallest" className={"w-4"} />
                     </Tooltip>}
                     <Typography
                         variant={"label"}
@@ -792,8 +865,8 @@ export function WidgetSelectViewItem({
                 </div>
 
                 <Typography variant={"caption"}
-                            color={"secondary"}
-                            className={"max-w-sm"}>
+                    color={"secondary"}
+                    className={"max-w-sm"}>
                     {propertyConfig.description}
                 </Typography>