@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

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";
@@ -122,6 +125,35 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     return acc;
 }
 
+/**
+ * Recursively removes empty plain objects `{}` and empty arrays `[]` from a value tree.
+ * This prevents ghost containers created by `setIn` intermediate path construction
+ * (e.g. `{ address: {} }` when only `address.city` was touched but value is undefined)
+ * from falsely triggering the unsaved local changes indicator.
+ */
+function removeEmptyContainers(obj: any): any {
+    if (Array.isArray(obj)) {
+        const cleaned = obj.map(removeEmptyContainers);
+        // Keep arrays even if they contain only nulls/undefined — that's intentional data
+        return cleaned;
+    }
+    if (obj && typeof obj === "object" && Object.getPrototypeOf(obj) === Object.prototype) {
+        const result: Record<string, any> = {};
+        for (const key of Object.keys(obj)) {
+            const cleaned = removeEmptyContainers(obj[key]);
+            // Skip empty plain objects
+            if (cleaned && typeof cleaned === "object" && !Array.isArray(cleaned)
+                && Object.getPrototypeOf(cleaned) === Object.prototype
+                && Object.keys(cleaned).length === 0) {
+                continue;
+            }
+            result[key] = cleaned;
+        }
+        return result;
+    }
+    return obj;
+}
+
 export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
     const changes: Partial<T> = {};
 
@@ -181,30 +213,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 +244,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") {
@@ -247,7 +280,7 @@ export function EntityForm<M extends Record<string, any>>({
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
 
-    const [underlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
 
     const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
@@ -328,7 +361,15 @@ export function EntityForm<M extends Record<string, any>>({
         return [initialValues, initialDirty];
     }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
 
-    const hasLocalChanges = !localChangesCleared && localChangesDataRaw && Object.keys(localChangesDataRaw).length > 0;
+    const hasLocalChanges = useMemo(() => {
+        if (localChangesCleared || !localChangesDataRaw || Object.keys(localChangesDataRaw).length === 0) {
+            return false;
+        }
+        // Compare cached values against entity values to check for real differences
+        const entityValues = entity?.values ?? {};
+        const realChanges = getChanges(localChangesDataRaw as Partial<M>, entityValues as Partial<M>);
+        return Object.keys(realChanges).length > 0;
+    }, [localChangesCleared, localChangesDataRaw, entity?.values]);
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
@@ -348,8 +389,10 @@ export function EntityForm<M extends Record<string, any>>({
         onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
             const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
             if (controller.dirty) {
-                const touchedValues = extractTouchedValues(values, controller.touched);
-                saveEntityToCache(key, touchedValues);
+                const touchedValues = removeEmptyContainers(extractTouchedValues(values, controller.touched));
+                if (touchedValues && Object.keys(touchedValues).length > 0) {
+                    saveEntityToCache(key, touchedValues);
+                }
             }
         },
         validation: (values) => {
@@ -366,6 +409,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 +507,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 +545,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 +619,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 +643,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,21 +690,42 @@ 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);
 
+    // Detect external changes to the entity (e.g. from onSnapshot after Admin SDK writes)
+    const prevEntityValuesRef = useRef<EntityValues<M> | undefined>(entity?.values);
+    useEffect(() => {
+        if (!entity?.values || status !== "existing") return;
+        const prev = prevEntityValuesRef.current;
+        prevEntityValuesRef.current = entity.values;
+        if (prev && !equal(prev, entity.values)) {
+            // Compute the diff between the old and new entity values
+            const changes: Partial<EntityValues<M>> = {};
+            const allKeys = new Set([...Object.keys(prev), ...Object.keys(entity.values)]);
+            for (const key of allKeys) {
+                if (!equal((prev as any)[key], (entity.values as any)[key])) {
+                    (changes as any)[key] = (entity.values as any)[key];
+                }
+            }
+            if (Object.keys(changes).length > 0) {
+                setUnderlyingChanges(changes);
+            }
+        }
+    }, [entity?.values, status]);
+
     useEffect(() => {
         if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
             // we update the form fields from the Firestore data
@@ -699,8 +779,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 +793,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 +805,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 +829,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 +840,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 +854,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 +934,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,10 +17,10 @@ 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";
+import { ErrorBoundary, CircularProgressCenter } from "../components";
 
 /**
  * This component renders a form field creating the corresponding configuration
@@ -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;
@@ -286,12 +287,13 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
     return (
         <ErrorBoundary>
-
-            <UsedComponent {...cmsFieldProps} />
+            <React.Suspense fallback={<CircularProgressCenter />}>
+                <UsedComponent {...cmsFieldProps} />
+            </React.Suspense>
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>
-                    This value has been updated elsewhere
+                    {t("value_updated_elsewhere")}
                 </Typography>}
 
         </ErrorBoundary>);
@@ -302,7 +304,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>