@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/src/components/VirtualTable/VirtualTable.tsx

@@ -126,6 +126,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         AddColumnComponent,
         initialScroll = 0,
         onColumnsOrderChange,
+        headerIconSize,
     }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -211,7 +212,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [tableRef]);
 
         const [measureRef, bounds] = useMeasure({
-            debounce: 50,
+            debounce: 0,
             polyfill: ResizeObserver,
             scroll: true,
             // This is important for handling zooming in react-flow
@@ -369,8 +370,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 setColumns(newColumns);
                 onColumnsOrderChange(newColumns);
             } : undefined,
-            draggingColumnId
-        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId]);
+            draggingColumnId,
+            headerIconSize,
+        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId, headerIconSize]);
 
         // Get sortable column keys (excluding frozen columns)
         const sortableColumnKeys = columns

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -2,6 +2,7 @@ import React, { RefObject, useCallback, useEffect, useState } from "react";
 import equal from "react-fast-compare";
 
 import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { useTranslation } from "../../hooks";
 import { ErrorBoundary } from "../ErrorBoundary";
 import {
     ArrowUpwardIcon,
@@ -47,6 +48,7 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
     isDragging?: boolean;
     isDraggable?: boolean;
+    headerIconSize?: "small" | "smallest";
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -63,7 +65,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         createFilterField,
         AdditionalHeaderWidget,
         isDragging,
-        isDraggable
+        isDraggable,
+        headerIconSize = "small",
     }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -135,18 +138,17 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                             <Badge color="secondary"
                                 invisible={!sort}>
                                 <IconButton
-                                    size={"small"}
+                                    size={headerIconSize}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
                                 >
-                                    {!sort &&
-                                        <ArrowUpwardIcon />}
-                                    {sort === "asc" &&
-                                        <ArrowUpwardIcon />}
-                                    {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"} />}
+                                    <ArrowUpwardIcon size={headerIconSize}
+                                                     className={cls(
+                                                         "transition-transform duration-200",
+                                                         sort === "desc" ? "rotate-180" : "rotate-0"
+                                                     )} />
                                 </IconButton>
                             </Badge>
                         }
@@ -213,6 +215,8 @@ function FilterForm<M>({
     setHidden
 }: FilterFormProps<M>) {
 
+    const { t } = useTranslation();
+
     const id = column.key;
 
     const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, any] | undefined>(filter);
@@ -258,16 +262,15 @@ function FilterForm<M>({
             {filterField && <div className="m-4 w-[400px]">
                 {filterField}
             </div>}
-            <div className="flex justify-end m-4">
-                <Button
-                    className="mr-4"
-                    disabled={!filterIsSet}
-                    variant={"text"}
-                    type="reset"
-                    aria-label="filter clear"
-                    onClick={reset}>Clear</Button>
-                <Button
-                    type="submit">Filter</Button>
+            <div className="flex justify-end p-4 pt-0 gap-2">
+                <Button variant={"text"}
+                        size={"small"}
+                        aria-label="filter clear"
+                        onClick={reset}>{t("clear")}</Button>
+
+                <Button variant={"outlined"}
+                        size={"small"}
+                        type="submit">{t("filter")}</Button>
             </div>
         </form>
     );

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -22,7 +22,8 @@ const SortableColumnHeader = ({
     onClickResizeColumn,
     createFilterField,
     isDragging,
-    isDraggable
+    isDraggable,
+    headerIconSize
 }: {
     column: VirtualTableColumn;
     columnIndex: number;
@@ -37,6 +38,7 @@ const SortableColumnHeader = ({
     createFilterField: any;
     isDragging: boolean;
     isDraggable: boolean;
+    headerIconSize?: "small" | "smallest";
 }) => {
     const [isPressing, setIsPressing] = useState(false);
 
@@ -103,7 +105,8 @@ const SortableColumnHeader = ({
                 createFilterField={createFilterField}
                 AdditionalHeaderWidget={column.AdditionalHeaderWidget}
                 isDragging={isDragging || isPressing}
-                isDraggable={isDraggable} />
+                isDraggable={isDraggable}
+                headerIconSize={headerIconSize} />
         </div>
     );
 };
@@ -123,7 +126,8 @@ export const VirtualTableHeaderRow = ({
     data,
     cellRenderer: CellRenderer,
     rowHeight = 54,
-    draggingColumnId
+    draggingColumnId,
+    headerIconSize,
 }: VirtualTableContextProps<any>) => {
 
     const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
@@ -234,6 +238,7 @@ export const VirtualTableHeaderRow = ({
                                 createFilterField={createFilterField}
                                 isDragging={isDragging}
                                 isDraggable={isDraggable}
+                                headerIconSize={headerIconSize}
                             />
                         </ErrorBoundary>
                     );

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -168,6 +168,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
 
+    /**
+     * Size of icons in column headers (sort, filter).
+     * @default "small"
+     */
+    headerIconSize?: "small" | "smallest";
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -206,7 +212,7 @@ export interface VirtualTableColumn<CustomProps = any> {
     /**
      * Label displayed in the header
      */
-    title?: string;
+    title?: React.ReactNode;
 
     /**
      * This column is frozen to the left

package/src/components/VirtualTable/types.tsx

@@ -42,4 +42,5 @@ export type VirtualTableContextProps<T extends any> = {
     AddColumnComponent?: React.ComponentType;
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
     draggingColumnId?: string | null;
+    headerIconSize?: "small" | "smallest";
 };

package/src/components/common/default_entity_actions.tsx

@@ -1,3 +1,7 @@
+// Note: entity action 'name' fields (Edit, Copy, Delete) are plain strings defined
+// at module level. They cannot use hooks. Consumers who need to translate these
+// should override the action name by creating their own EntityAction objects or
+// by using the entityActions prop with custom names for their locale.
 import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";

package/src/components/common/useDataSourceTableController.tsx

@@ -139,20 +139,6 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
 
-    useEffect(() => {
-        if (updateUrl) {
-            const { filterValues: urlFilterValues, sortBy: urlSortBy } = parseFilterAndSort(location.search);
-            if (!forceFilter) {
-                setFilterValues(urlFilterValues as any);
-            }
-            if (urlSortBy && forceFilter && !checkFilterCombination(forceFilter, urlSortBy)) {
-                console.warn("URL sort is not compatible with the force filter.");
-            } else {
-                setSortBy(urlSortBy as any);
-            }
-        }
-    }, [location.search, updateUrl, forceFilter, checkFilterCombination]);
-
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
     const collectionScroll = scrollRestoration?.getCollectionScroll(fullPath, filterValues);
@@ -345,6 +331,11 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
                         } else if (val instanceof EntityReference) {
                             encodedValue = encodeRef(val);
                         }
+                    } else if (typeof val === "string") {
+                        // JSON.stringify wraps the string in quotes (e.g. "4" → '"4"')
+                        // so that decodeString's JSON.parse restores the string type,
+                        // not a number. Without this, "4" round-trips as the number 4.
+                        encodedValue = JSON.stringify(val);
                     }
                 } catch (e) {
                     encodedValue = val;

package/src/components/index.tsx

@@ -42,3 +42,4 @@ export * from "./FieldCaption";
 export * from "./EntityPreview";
 
 export * from "./AIIcon";
+export * from "./LanguageToggle";

package/src/core/DefaultAppBar.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 
 import { Link, useNavigate } from "react-router-dom";
-import { ErrorBoundary, FireCMSLogo } from "../components";
+import { ErrorBoundary, FireCMSLogo, LanguageToggle } from "../components";
 import {
     Avatar,
     BrightnessMediumIcon,
+    CheckIcon,
     cls,
     DarkModeIcon,
     IconButton,
@@ -15,7 +16,7 @@ import {
     Skeleton,
     Typography
 } from "@firecms/ui";
-import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
+import { useAuthController, useLargeLayout, useModeController, useNavigationController, useTranslation } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
@@ -85,6 +86,8 @@ export const DefaultAppBar = function DefaultAppBar({
         mode,
         setMode
     } = useModeController();
+    
+    const { i18n, t } = useTranslation();
 
     const navigate = useNavigate();
 
@@ -192,18 +195,19 @@ export const DefaultAppBar = function DefaultAppBar({
                 <Menu
                     trigger={<IconButton
                         color="inherit"
-                        aria-label="Open drawer"
-                        size="large">
+                        aria-label="Open drawer">
                         {mode === "dark"
-                            ? <DarkModeIcon />
-                            : <LightModeIcon />}
+                            ? <DarkModeIcon size="small" />
+                            : <LightModeIcon size="small" />}
                     </IconButton>}>
-                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> Dark</MenuItem>
-                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> {t("dark_mode")}</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> {t("light_mode")}</MenuItem>
                     <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
-                        size={"smallest"} />System</MenuItem>
+                        size={"smallest"} />{t("system_mode")}</MenuItem>
                 </Menu>}
 
+            <LanguageToggle />
+
             <Menu trigger={avatarComponent}>
                 {user && <div className={"px-4 py-2 mb-2"}>
                     {user.displayName && <Typography variant={"body1"} color={"secondary"}>
@@ -222,7 +226,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     navigate("/");
                 }}>
                     <LogoutIcon />
-                    Log Out
+                    {t("log_out")}
                 </MenuItem>}
 
             </Menu>

package/src/core/DefaultDrawer.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
-import { useCollapsedGroups, useLargeLayout, useNavigationController } from "../hooks";
+import {
+    useCollapsedGroups,
+    useLargeLayout,
+    useNavigationController,
+    useTranslation
+} from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
@@ -34,6 +39,7 @@ export function DefaultDrawer({
 
     const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
+    const { t } = useTranslation();
 
     const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
@@ -122,7 +128,7 @@ export function DefaultDrawer({
                             }}
                             key={entry.id}>
                             {<IconForView collectionOrView={entry.view} />}
-                            {entry.name}
+                            {t(entry.name as any)}
                         </MenuItem>)}
 
                 </Menu>}

package/src/core/DrawerNavigationGroup.tsx

@@ -3,12 +3,13 @@ import { cls, ExpandMoreIcon, Typography } from "@firecms/ui";
 import { NavigationEntry } from "../types";
 import { IconForView } from "../util";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface DrawerNavigationGroupProps {
     /**
-     * Group name to display in header
+     * Group name to display in header. When null, uses the translated default group name.
      */
-    group: string;
+    group: string | null;
     /**
      * Navigation entries in this group
      */
@@ -58,6 +59,7 @@ export function DrawerNavigationGroup({
     headerActions,
     onItemClick
 }: DrawerNavigationGroupProps) {
+    const { t } = useTranslation();
     return (
         <div
             className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
@@ -81,7 +83,7 @@ export function DrawerNavigationGroup({
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1"
                     >
-                        {(group || "Views").toUpperCase()}
+                        {(group && group !== "__default__" ? group : t("views_group")).toUpperCase()}
                     </Typography>
                     {headerActions && (
                         <div onClick={(e) => e.stopPropagation()}>

package/src/core/EntityEditView.tsx

@@ -26,12 +26,13 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
 import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 import { createFormexStub } from "../util/createFormexStub";
+import { useTranslation } from "../hooks/useTranslation";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -170,6 +171,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 }) {
 
     const context = useFireCMSContext();
+    const { t } = useTranslation();
 
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
 
@@ -228,6 +230,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const groupedViews = useMemo(() => {
+        return (collection.viewGroups ?? []).flatMap(g => g.views);
+    }, [collection.viewGroups]);
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -342,8 +348,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             openEntityMode={layout} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
-                                You need to save your entity before
-                                adding additional collections
+                                {t("youd_need_to_save_before_additional_collections")}
                             </Typography>
                         </div>)
                 }
@@ -418,16 +423,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         Builder={selectedSecondaryForm?.Builder}
     />;
 
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+    const subcollectionTabs = subcollections && subcollections
+        .filter(sub => !groupedViews.includes(sub.id ?? sub.path))
+        .map((subcollection) =>
         <Tab
             className="text-sm min-w-[120px]"
-            value={subcollection.id}
+            value={subcollection.id ?? subcollection.path}
             key={`entity_detail_collection_tab_${subcollection.name}`}>
             {subcollection.name}
         </Tab>
     );
 
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start" && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -436,7 +443,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {view.tabComponent ?? view.name}
             </Tab>
         );
-    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+    const customViewTabsEnd = resolvedEntityViews.filter(view => (!view.position || view.position === "end") && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -446,6 +453,43 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </Tab>
         );
 
+    const viewGroupMenus = collection.viewGroups?.map(group => {
+        const isActive = group.views.includes(selectedTab);
+        return (
+            <Menu
+                key={`view_group_${group.name}`}
+                trigger={
+                    <button
+                        type="button"
+                        className={cls(
+                            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+                            "disabled:pointer-events-none disabled:opacity-50",
+                            isActive ? "bg-white text-surface-900 dark:bg-surface-950 dark:text-surface-50" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800"
+                        )}
+                    >
+                        {group.name}
+                        <ExpandMoreIcon className="ml-1 -mr-1" size="small" />
+                    </button>
+                }>
+                {group.views.map(viewId => {
+                    const subcollection = subcollections.find(s => (s.id ?? s.path) === viewId);
+                    const customView = resolvedEntityViews.find(v => v.key === viewId);
+                    const name = subcollection?.name ?? customView?.name ?? viewId;
+                    return (
+                        <MenuItem 
+                            key={`view_group_${group.name}_${viewId}`} 
+                            onClick={() => onSideTabClick(viewId)}
+                            className={selectedTab === viewId ? "bg-surface-accent-100 dark:bg-surface-accent-900" : ""}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            </Menu>
+        );
+    });
+
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
@@ -493,6 +537,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                 {customViewTabsEnd}
 
+                {viewGroupMenus}
+
                 {subcollectionTabs}
             </Tabs>}
         </div>}

package/src/core/EntityEditViewFormActions.tsx

@@ -28,7 +28,8 @@ import {
     useCustomizationController,
     useFireCMSContext,
     useSideEntityController,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "../hooks";
 import { EntityFormActionsProps } from "../form/EntityFormActions";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
@@ -56,6 +57,7 @@ export function EntityEditViewFormActions({
     const sideEntityController = useSideEntityController();
     const sideDialogContext = useSideDialogContext();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     const entityActions = useMemo((): EntityAction[] => {
         const customEntityActions = (collection.entityActions ?? [])
@@ -90,7 +92,8 @@ export function EntityEditViewFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         })
         : buildSideActions({
             savingError,
@@ -106,7 +109,8 @@ export function EntityEditViewFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         });
 }
 
@@ -123,8 +127,9 @@ type ActionsViewProps<M extends object> = {
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext,
+    formContext: FormContext;
     formex: FormexController<any>;
+    t: any;
 };
 
 function buildBottomActions<M extends object>({
@@ -141,7 +146,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;
@@ -191,7 +197,7 @@ function buildBottomActions<M extends object>({
                 color="primary"
                 disabled={disabled || formex.isSubmitting}
                 type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
         <Button variant={canClose ? "text" : "filled"}
                 color="primary"
@@ -200,9 +206,9 @@ function buildBottomActions<M extends object>({
                 onClick={() => {
                     sideDialogContext.setPendingClose(false);
                 }}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </Button>
         {canClose && <LoadingButton variant="filled"
                                     color="primary"
@@ -212,9 +218,9 @@ function buildBottomActions<M extends object>({
                                     onClick={() => {
                                         sideDialogContext.setPendingClose?.(true);
                                     }}>
-            {status === "existing" && "Save and close"}
-            {status === "copy" && "Create copy and close"}
-            {status === "new" && "Create and close"}
+            {status === "existing" && t("save_and_close")}
+            {status === "copy" && t("create_copy_and_close")}
+            {status === "new" && t("create_and_close")}
         </LoadingButton>}
     </DialogActions>;
 }
@@ -233,7 +239,8 @@ function buildSideActions<M extends object>({
                                                 openEntityMode,
                                                 navigateBack,
                                                 formContext,
-                                                formex
+                                                formex,
+                                                t
                                             }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -249,13 +256,13 @@ function buildSideActions<M extends object>({
                        onClick={() => {
                            sideDialogContext.setPendingClose?.(false);
                        }}>
-            {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}