@firecms/core 3.1.0-canary.9e89e98 → 3.1.0-canary.dc8ac43

package/src/form/EntityForm.tsx

@@ -40,7 +40,10 @@ import {
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
-import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
+import { Formex, FormexController, getIn, setIn, useCreateFormex,
+    useFormex
+} from "@firecms/formex";
+import { useTranslation } from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
@@ -181,30 +184,30 @@ export function getChanges<T extends object>(source: Partial<T>, comparison: Par
 }
 
 export function EntityForm<M extends Record<string, any>>({
-                                                              path,
-                                                              fullIdPath,
-                                                              entityId: entityIdProp,
-                                                              collection,
-                                                              onValuesModified,
-                                                              onIdChange,
-                                                              onSaved,
-                                                              entity,
-                                                              initialDirtyValues,
-                                                              onFormContextReady,
-                                                              forceActionsAtTheBottom,
-                                                              initialStatus,
-                                                              className,
-                                                              onStatusChange,
-                                                              onEntityChange,
-                                                              openEntityMode = "full_screen",
-                                                              formex: formexProp,
-                                                              disabled: disabledProp,
-                                                              Builder,
-                                                              EntityFormActionsComponent = EntityFormActions,
-                                                              showDefaultActions = true,
-                                                              showEntityPath = true,
-                                                              children
-                                                          }: EntityFormProps<M>) {
+    path,
+    fullIdPath,
+    entityId: entityIdProp,
+    collection,
+    onValuesModified,
+    onIdChange,
+    onSaved,
+    entity,
+    initialDirtyValues,
+    onFormContextReady,
+    forceActionsAtTheBottom,
+    initialStatus,
+    className,
+    onStatusChange,
+    onEntityChange,
+    openEntityMode = "full_screen",
+    formex: formexProp,
+    disabled: disabledProp,
+    Builder,
+    EntityFormActionsComponent = EntityFormActions,
+    showDefaultActions = true,
+    showEntityPath = true,
+    children
+}: EntityFormProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
@@ -212,6 +215,7 @@ export function EntityForm<M extends Record<string, any>>({
 
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
+    const { t } = useTranslation();
 
     const navigateBack = useCallback(() => {
         if (openEntityMode === "side_panel") {
@@ -366,6 +370,15 @@ export function EntityForm<M extends Record<string, any>>({
     useEffect(() => {
 
         const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.defaultPrevented) return;
+            const activeElement = document.activeElement as HTMLElement;
+            const isInput = activeElement && (
+                activeElement.tagName === "INPUT" ||
+                activeElement.tagName === "TEXTAREA" ||
+                activeElement.isContentEditable
+            );
+            if (isInput) return;
+
             const isUndo = (e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z";
             const isRedo =
                 ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "z") ||
@@ -455,12 +468,12 @@ export function EntityForm<M extends Record<string, any>>({
     }, [entityId, path, snackbarController]);
 
     const saveEntity = ({
-                            values,
-                            previousValues,
-                            entityId,
-                            collection,
-                            path
-                        }: {
+        values,
+        previousValues,
+        entityId,
+        collection,
+        path
+    }: {
         collection: EntityCollection<M>,
         path: string,
         entityId: string | undefined,
@@ -493,13 +506,13 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const onSaveEntityRequest = async ({
-                                           collection,
-                                           path,
-                                           entityId,
-                                           values,
-                                           previousValues,
-                                           autoSave
-                                       }: EntityFormSaveParams<M>): Promise<void> => {
+        collection,
+        path,
+        entityId,
+        values,
+        previousValues,
+        autoSave
+    }: EntityFormSaveParams<M>): Promise<void> => {
         if (!status)
             return;
         if (autoSave) {
@@ -567,6 +580,7 @@ export function EntityForm<M extends Record<string, any>>({
     }, [snackbarController]);
 
     const pluginActions: React.ReactNode[] = [];
+    const pluginBeforeTitle: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
 
     const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
@@ -590,6 +604,12 @@ export function EntityForm<M extends Record<string, any>>({
                     key={`actions_${plugin.key}`} {...actionProps} />
                 : null
         )).filter(Boolean));
+        pluginBeforeTitle.push(...plugins.map((plugin) => (
+            plugin.form?.BeforeTitle
+                ? <plugin.form.BeforeTitle
+                    key={`before_title_${plugin.key}`} {...actionProps} />
+                : null
+        )).filter(Boolean));
     }
 
     const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
@@ -631,17 +651,17 @@ export function EntityForm<M extends Record<string, any>>({
     const modified = formex.dirty;
 
     const uniqueFieldValidator: CustomFieldValidator = useCallback(({
-                                                                        name,
-                                                                        value
-                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
+        name,
+        value
+    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId
-            ? getYupEntitySchema(
-                entityId,
-                resolvedCollection.properties,
-                uniqueFieldValidator)
-            : undefined,
+        ? getYupEntitySchema(
+            entityId,
+            resolvedCollection.properties,
+            uniqueFieldValidator)
+        : undefined,
         [entityId, resolvedCollection.properties, uniqueFieldValidator]);
 
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
@@ -699,8 +719,8 @@ export function EntityForm<M extends Record<string, any>>({
 
                         return (
                             <FormEntry propertyKey={key}
-                                       widthPercentage={widthPercentage}
-                                       key={`field_${key}`}>
+                                widthPercentage={widthPercentage}
+                                key={`field_${key}`}>
                                 <PropertyFieldBinding {...cmsFormFieldProps} />
                             </FormEntry>
                         );
@@ -713,7 +733,7 @@ export function EntityForm<M extends Record<string, any>>({
                             throw new Error("When using additional fields you need to provide a Builder or a value");
                         }
                         const child = Builder
-                            ? <Builder entity={entity} context={context}/>
+                            ? <Builder entity={entity} context={context} />
                             : <div className={"w-full"}>
                                 {additionalField.value?.({
                                     entity,
@@ -725,9 +745,9 @@ export function EntityForm<M extends Record<string, any>>({
                             <div key={`additional_${key}`} className={"w-full"}>
                                 <LabelWithIconAndTooltip
                                     propertyKey={key}
-                                    icon={<NotesIcon size={"small"}/>}
+                                    icon={<NotesIcon size={"small"} />}
                                     title={additionalField.name}
-                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
                                 <div
                                     className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
                                     <ErrorBoundary>
@@ -749,6 +769,8 @@ export function EntityForm<M extends Record<string, any>>({
 
     const formView = <ErrorBoundary>
         <>
+            {pluginBeforeTitle}
+
             {!Builder && <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
                 <Typography
                     className={"my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : "")}
@@ -758,7 +780,7 @@ export function EntityForm<M extends Record<string, any>>({
 
                 {!entity?.values && initialStatus === "existing" &&
                     <Alert color={"warning"} size={"small"} outerClassName={"w-full mb-4 text-xs"}>
-                        This entity does not exist in the database
+                        {t("this_entity_not_exist")}
                     </Alert>}
 
                 {showEntityPath && <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
@@ -772,27 +794,27 @@ export function EntityForm<M extends Record<string, any>>({
             {children}
 
             {initialEntityId && !entity && initialStatus !== "new" && <Alert color={"info"} size={"small"}>
-                This entity does not exist in the database
+                {t("this_entity_not_exist")}
             </Alert>}
 
             {!Builder && !collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
-                               entityId={entityId}
-                               status={status}
-                               onChange={setEntityId}
-                               error={entityIdError}
-                               loading={customIdLoading}
-                               entity={entity}/>
+                    entityId={entityId}
+                    status={status}
+                    onChange={setEntityId}
+                    error={entityIdError}
+                    loading={customIdLoading}
+                    entity={entity} />
             }
 
             {entityId && formContext && <>
                 <div className="mt-12 flex flex-col gap-8" ref={formRef}>
                     {formFields()}
-                    <ErrorFocus containerRef={formRef}/>
+                    <ErrorFocus containerRef={formRef} />
                 </div>
             </>}
 
-            {forceActionsAtTheBottom && <div className="h-16"/>}
+            {forceActionsAtTheBottom && <div className="h-16" />}
         </>
     </ErrorBoundary>;
 
@@ -852,12 +874,12 @@ export function EntityForm<M extends Record<string, any>>({
                             {formex.dirty
                                 ? <Tooltip title={"This form has been modified"}>
                                     <Chip size={"small"} className={"py-1"} colorScheme={"orangeDarker"}>
-                                        <EditIcon size={"smallest"}/>
+                                        <EditIcon size={"smallest"} />
                                     </Chip>
                                 </Tooltip>
                                 : <Tooltip title={"The current form is in sync with the database"}>
                                     <Chip size={"small"} className={"py-1"}>
-                                        <CheckIcon size={"smallest"}/>
+                                        <CheckIcon size={"smallest"} />
                                     </Chip>
                                 </Tooltip>}
                         </div>

package/src/form/EntityFormActions.tsx

@@ -19,6 +19,7 @@ import {
 } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
 import { useFireCMSContext, useSideEntityController } from "../hooks";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface EntityFormActionsProps {
     fullPath: string;
@@ -56,6 +57,7 @@ export function EntityFormActions({
 
     const context = useFireCMSContext();
     const sideEntityController = useSideEntityController();
+    const { t } = useTranslation();
 
     return layout === "bottom"
         ? buildBottomActions({
@@ -72,7 +74,8 @@ export function EntityFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         })
         : buildSideActions({
             fullPath,
@@ -88,7 +91,8 @@ export function EntityFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         });
 }
 
@@ -108,6 +112,7 @@ type ActionsViewProps<M extends object> = {
     navigateBack: () => void;
     formContext: FormContext,
     formex: FormexController<any>;
+    t: (key: any, vars?: Record<string, string>) => string;
 };
 
 function buildBottomActions<M extends object>({
@@ -125,7 +130,8 @@ function buildBottomActions<M extends object>({
                                                   openEntityMode,
                                                   navigateBack,
                                                   formContext,
-                                                  formex
+                                                  formex,
+                                                  t
                                               }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -165,16 +171,16 @@ function buildBottomActions<M extends object>({
         <Button variant="text" disabled={disabled || formex.isSubmitting}
                 color={"primary"}
                 type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
         <Button variant={"filled"}
                 color="primary"
                 type="submit"
                 disabled={disabled || formex.isSubmitting}
                 startIcon={hasErrors ? <ErrorIcon/> : undefined}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </Button>
 
     </DialogActions>;
@@ -193,7 +199,8 @@ function buildSideActions<M extends object>({
                                                 disabled,
                                                 status,
                                                 pluginActions,
-                                                formex
+                                                formex,
+                                                t
                                             }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -207,12 +214,12 @@ function buildSideActions<M extends object>({
                        size={"large"}
                        startIcon={hasErrors ? <ErrorIcon/> : undefined}
                        disabled={disabled || formex.isSubmitting}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </LoadingButton>
         <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
 
         {pluginActions}

package/src/form/PropertyFieldBinding.tsx

@@ -17,7 +17,7 @@ import {
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useAuthController, useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController, useTranslation } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -137,7 +137,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     }
                     const configProperty = resolveProperty({
                         propertyKey,
-                        propertyOrBuilder: propertyConfig.property,
+                        propertyOrBuilder: propertyConfig.property as any,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
@@ -145,7 +145,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         index,
                         authController
                     });
-                    Component = configProperty.Field as ComponentType<FieldProps<T>>;
+                    Component = configProperty?.Field as ComponentType<FieldProps<T>> | undefined;
                 }
                 if (!Component) {
                     console.warn(`No field component found for property ${propertyKey}`);
@@ -213,6 +213,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
             formexFieldProps: FormexFieldProps<T, any>
         }) {
 
+    const { t } = useTranslation();
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
@@ -291,7 +292,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>
-                    This value has been updated elsewhere
+                    {t("value_updated_elsewhere")}
                 </Typography>}
 
         </ErrorBoundary>);
@@ -302,7 +303,7 @@ const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty,
     if (plugins?.some((plugin) => plugin.form?.fieldBuilder)) {
         return true;
     }
-    if (isPropertyBuilder(property)) {
+    if (isPropertyBuilder(property as any)) {
         return true;
     }
     const defAProperty = property as Property | ResolvedProperty;

package/src/form/components/ErrorFocus.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useRef } from "react";
 import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
-                               {
-                                   containerRef?: React.RefObject<HTMLDivElement>
-                               }) => {
+    {
+        containerRef?: React.RefObject<HTMLDivElement | null>
+    }) => {
     const {
         isValidating,
         errors,

package/src/form/components/LocalChangesMenu.tsx

@@ -16,7 +16,7 @@ import {
     WarningIcon
 } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
-import { useSnackbarController } from "../../hooks";
+import { useSnackbarController, useTranslation } from "../../hooks";
 import { mergeDeep } from "../../util";
 import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
 import { ResolvedProperties } from "../../types";
@@ -39,6 +39,7 @@ export function LocalChangesMenu<M extends object>({
                                                    }: LocalChangesMenuProps<M>) {
 
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
     const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
     const [open, setOpen] = useState(false);
 
@@ -62,7 +63,7 @@ export function LocalChangesMenu<M extends object>({
         formex.setValues(mergedValues);
         snackbarController.open({
             type: "info",
-            message: "Local changes applied to the form"
+            message: t("local_changes_applied")
         });
         handleCloseMenu();
         onClearLocalChanges?.();
@@ -72,7 +73,7 @@ export function LocalChangesMenu<M extends object>({
         removeEntityFromCache(cacheKey);
         snackbarController.open({
             type: "info",
-            message: "Local changes discarded"
+            message: t("local_changes_discarded")
         });
         handleCloseMenu();
         onClearLocalChanges?.();
@@ -90,7 +91,7 @@ export function LocalChangesMenu<M extends object>({
                         onClick={handleOpenMenu}
                     >
                         <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
-                        Unsaved Local changes
+                        {t("unsaved_local_changes")}
                         <KeyboardArrowDownIcon size={"smallest"}/>
                     </Button>
                 }
@@ -98,12 +99,11 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setOpen}
             >
                 <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
-                    This document was edited locally and has unsaved changes. These local changes will be lost if you
-                    don't apply them.
+                    {t("unsaved_local_changes_description")}
                 </div>
-                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
-                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
-                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>{t("preview_changes")}</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>{t("apply_changes")}</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>{t("discard_local_changes")}</MenuItem>
             </Menu>
 
             <Dialog
@@ -111,10 +111,10 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setPreviewDialogOpen}
                 maxWidth={"4xl"}
             >
-                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogTitle variant={"h6"}>{t("preview_local_changes")}</DialogTitle>
                 <DialogContent className={"my-4"}>
                     <Typography variant={"body2"} className={"mb-4"}>
-                        These are the local changes that will be applied to the form.
+                        {t("preview_local_changes_description")}
                     </Typography>
                     <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
                         maxHeight: 520,
@@ -127,7 +127,7 @@ export function LocalChangesMenu<M extends object>({
                     </div>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>{t("close")}</Button>
                     <Button
                         variant={"filled"}
                         onClick={() => {
@@ -135,7 +135,7 @@ export function LocalChangesMenu<M extends object>({
                             setPreviewDialogOpen(false);
                         }}
                     >
-                        Apply changes
+                        {t("apply_changes")}
                     </Button>
                 </DialogActions>
             </Dialog>

package/src/form/components/StorageItemPreview.tsx

@@ -5,6 +5,7 @@ import { PreviewSize, PropertyPreview } from "../../preview";
 
 import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface StorageItemPreviewProps {
     name: string;
@@ -27,7 +28,7 @@ export function StorageItemPreview({
                                        placeholder,
                                        className
                                    }: StorageItemPreviewProps) {
-
+    const { t } = useTranslation();
     return (
         <div className={cls(
             "relative border-box flex items-center justify-center",
@@ -41,7 +42,7 @@ export function StorageItemPreview({
 
                     <Tooltip
                         asChild={true}
-                        title="Remove">
+                        title={t("remove")}>
                         <IconButton
                             size={"small"}
                             onClick={(event) => {

package/src/form/components/StorageUploadProgress.tsx

@@ -32,6 +32,7 @@ export function StorageUploadProgress({
 
     const [error, setError] = React.useState<Error | undefined>();
     const [loading, setLoading] = React.useState<boolean>(false);
+    const [progress, setProgress] = React.useState<number>(0);
     const mounted = React.useRef(false);
     const uploading = React.useRef(false);
 
@@ -46,7 +47,10 @@ export function StorageUploadProgress({
             file,
             fileName,
             path: storagePath,
-            metadata
+            metadata,
+            onProgress: (p) => {
+                if (mounted.current) setProgress(p);
+            }
         })
             .then(async ({ path, storageUrl }) => {
                 console.debug("Upload successful", path);
@@ -79,22 +83,33 @@ export function StorageUploadProgress({
         };
     }, [entry.file, entry.fileName, upload]);
 
+    const isLargeFile = entry.file && entry.file.size > 500 * 1024;
+    const renderProgressBar = loading && isLargeFile && progress > 0;
+    const progressBar = renderProgressBar && (
+        <div className="absolute bottom-0 left-0 h-1 bg-primary w-full origin-left transition-transform duration-200"
+             style={{ transform: `scaleX(${progress / 100})` }} />
+    );
+
     if (simple) {
-        return <div className={`w-${imageSize} h-${imageSize}`}>
+        return <div className={`relative overflow-hidden w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
+            {progressBar}
+
         </div>
     }
     return (
 
         <div className={cls(paperMixin,
-            "p-4 relative border-box flex items-center justify-center",
+            "p-4 relative overflow-hidden border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
                 <Skeleton className="w-full h-full"/>}
 
+            {progressBar}
+
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -4,8 +4,7 @@ import { ReferencePreview } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-
-import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../../hooks";
 import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
@@ -48,6 +47,7 @@ export function ArrayOfReferencesFieldBinding({
         setValue
     });
 
+    const { t } = useTranslation();
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {
         return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
@@ -84,7 +84,7 @@ export function ArrayOfReferencesFieldBinding({
                                     }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
-            return <div>Internal ERROR</div>;
+            return <div>{t("internal_error")}</div>;
         return (
             <ReferencePreview
                 key={internalId}
@@ -132,7 +132,7 @@ export function ArrayOfReferencesFieldBinding({
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 <EditIcon size={"small"}/>
-                Edit {property.name}
+                {t("edit_name", { name: property.name ?? "" })}
             </Button>
         </div>}
     </>;