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

package/src/components/EntityCollectionView/CollectionDataErrorBanner.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Typography, IconButton, RefreshIcon, Button, Tooltip } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
+
+export function CollectionDataErrorBanner({ error, onRetry }: { error?: Error, onRetry?: () => void }) {
+    const { t } = useTranslation();
+    if (!error) return null;
+
+    const errorMessage = error.message || "";
+    // Only extract standard Firestore index errors using the standard matching pattern
+    const indexUrl = errorMessage.match(/https:\/\/console\.firebase\.google\.com[^\s]+/)?.[0];
+
+    return (
+        <div className="flex w-full items-center gap-4 px-4 py-3 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800">
+            <Typography variant="body2" className="text-red-700 dark:text-red-300 flex-1 break-words">
+                <strong>{t("error")}:</strong>{" "}
+                {indexUrl
+                    ? t("error_firestore_index")
+                    : errorMessage}
+            </Typography>
+            {onRetry && (
+                <Tooltip title={t("refresh_data")}>
+                    <IconButton
+                        size="small"
+                        onClick={onRetry}
+                    >
+                        <RefreshIcon size="small" />
+                    </IconButton>
+                </Tooltip>
+            )}
+            {indexUrl && (
+                <Button
+                    size="small"
+                    variant="outlined"
+                    color="error"
+                    onClick={() => window.open(indexUrl, "_blank")}
+                >
+                    {t("create_index")}
+                </Button>
+            )}
+        </div>
+    );
+}

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -149,7 +149,7 @@ function EntityBoardCardInner<M extends Record<string, any> = any>({
                 {/* Content */}
                 <div className="flex-1 min-w-0">
                     {/* Title */}
-                    <div className="truncate text-sm font-medium">
+                    <div className="line-clamp-2 text-sm font-medium">
                         {titleProperty && titleValue ? (
                             <PropertyPreview
                                 propertyKey={titlePropertyKey as string}

package/src/components/EntityCollectionView/EntityCard.tsx

@@ -111,6 +111,10 @@ export function EntityCard<M extends Record<string, any> = any>({
             return;
         }
         if (onClick) {
+            analyticsController.onAnalyticsEvent?.("card_view_entity_click", {
+                path: entity.path,
+                entityId: entity.id
+            });
             onClick(entity);
         }
     };

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -20,9 +20,6 @@ import {
     DialogActions,
     DialogContent,
     getColorSchemeForSeed,
-    IconButton,
-    RefreshIcon,
-    Tooltip,
     Typography
 } from "@firecms/ui";
 import { getPropertyInPath, resolveCollection, resolveEnumValues } from "../../util";
@@ -34,9 +31,12 @@ import {
     useFireCMSContext,
     useSideEntityController
 } from "../../hooks";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { SaveEntityProps } from "../../types/datasource";
 import { setIn } from "@firecms/formex";
 import { useBoardDataController } from "./useBoardDataController";
+import { CollectionDataErrorBanner } from "./CollectionDataErrorBanner";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type EntityCollectionBoardViewProps<M extends Record<string, any> = any> = {
     collection: EntityCollection<M>;
@@ -74,7 +74,9 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     const context = useFireCMSContext();
     const dataSource = useDataSource(collection);
     const sideEntityController = useSideEntityController();
+    const analyticsController = useAnalyticsController();
     const plugins = customizationController.plugins ?? [];
+    const { t } = useTranslation();
 
     // State for backfill dialog
     const [showBackfillDialog, setShowBackfillDialog] = useState(false);
@@ -222,6 +224,10 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     }, [plugins]);
 
     const handleColumnReorder = useCallback((newColumns: string[]) => {
+        analyticsController.onAnalyticsEvent?.("kanban_column_reorder", {
+            path: fullPath,
+            columnProperty
+        });
         setHasUserReordered(true);
         setLocalColumnsOrder(newColumns);
         plugins
@@ -235,7 +241,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                     newColumnsOrder: newColumns
                 });
             });
-    }, [plugins, fullPath, parentCollectionIds, collection, columnProperty]);
+    }, [plugins, fullPath, parentCollectionIds, collection, columnProperty, analyticsController]);
 
     // Collection-level count queries to detect missing order property
     // Just TWO counts: total and ordered (for the entire collection, not per column)
@@ -393,6 +399,13 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         const entity = items.find(item => item.id === moveInfo?.itemId)?.entity;
         if (!entity) return;
 
+        analyticsController.onAnalyticsEvent?.("kanban_card_moved", {
+            path: fullPath,
+            entityId: entity.id,
+            sourceColumn: moveInfo?.sourceColumn,
+            targetColumn: moveInfo?.targetColumn
+        });
+
         const isColumnChange = moveInfo && moveInfo.sourceColumn !== moveInfo.targetColumn;
 
         // If no orderProperty and not a column change, nothing to do
@@ -440,7 +453,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         } catch (e) {
             console.error("Error saving entity:", e);
         }
-    }, [collection, columnProperty, orderProperty, context, dataSource, calculateNewOrder, boardDataController]);
+    }, [collection, columnProperty, orderProperty, context, dataSource, calculateNewOrder, boardDataController, analyticsController, fullPath]);
 
     // Backfill order values for all entities
     const handleBackfill = useCallback(async () => {
@@ -449,6 +462,9 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
             console.log("No orderProperty, returning");
             return;
         }
+        analyticsController.onAnalyticsEvent?.("kanban_backfill_order", {
+            path: fullPath
+        });
         setBackfillLoading(true);
 
         try {
@@ -514,7 +530,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         } finally {
             setBackfillLoading(false);
         }
-    }, [orderProperty, fullPath, collection, dataSource, context, boardDataController]);
+    }, [orderProperty, fullPath, collection, dataSource, context, boardDataController, analyticsController]);
 
     const handleEntityClick = useCallback((entity: Entity<M>) => {
         onEntityClick?.(entity);
@@ -563,19 +579,16 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
 
     // Check for loading error
     const hasError = Boolean(dataLoadingError);
-    const errorMessage = dataLoadingError?.message || "";
-    const indexUrl = errorMessage.match(/https:\/\/console\.firebase\.google\.com[^\s]+/)?.[0];
 
     // Error: no enum properties available for Kanban columns
     if (!columnProperty || enumColumns.length === 0) {
         return (
             <div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
                 <Typography variant="h6">
-                    Kanban view is not available
+                    {t("kanban_view_not_available")}
                 </Typography>
                 <Typography variant="body2" color="secondary" className="text-center max-w-md">
-                    Kanban view requires a string property with enum values to group entities into columns.
-                    Please add an enum property to your collection schema to use this view.
+                    {t("kanban_view_requires_enum")}
                 </Typography>
                 {KanbanSetupComponent && (
                     <KanbanSetupComponent
@@ -596,7 +609,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         return (
             <div className="flex-1 flex items-center justify-center p-8">
                 <Typography variant="label" color="secondary">
-                    No enum values configured for property "{columnProperty}"
+                    {t("no_enum_values_configured", { property: columnProperty })}
                 </Typography>
             </div>
         );
@@ -606,33 +619,10 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         <div className="flex-1 flex flex-col overflow-hidden">
             {/* Error banner - only show when no data loaded */}
             {hasError && allEntities.length === 0 && (
-                <div
-                    className="flex items-center gap-4 px-4 py-3 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800">
-                    <Typography variant="body2" className="text-red-700 dark:text-red-300 flex-1">
-                        <strong>Error:</strong>{" "}
-                        {indexUrl
-                            ? "A Firestore index is required for this query."
-                            : errorMessage}
-                    </Typography>
-                    <Tooltip title="Refresh data">
-                        <IconButton
-                            size="small"
-                            onClick={() => boardDataController.refreshAll()}
-                        >
-                            <RefreshIcon size="small" />
-                        </IconButton>
-                    </Tooltip>
-                    {indexUrl && (
-                        <Button
-                            size="small"
-                            variant="outlined"
-                            color="error"
-                            onClick={() => window.open(indexUrl, "_blank")}
-                        >
-                            Create Index
-                        </Button>
-                    )}
-                </div>
+                <CollectionDataErrorBanner
+                    error={dataLoadingError}
+                    onRetry={() => boardDataController.refreshAll()}
+                />
             )}
 
             {/* Backfill info bar - non-blocking */}
@@ -640,14 +630,14 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                 <div
                     className="flex items-center justify-between gap-4 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-800">
                     <Typography variant="body2" color="secondary">
-                        Some items don't have order values. Initialize to enable drag-and-drop reordering.
+                        {t("items_need_backfill")}
                     </Typography>
                     <Button
                         size="small"
                         variant="text"
                         onClick={() => setShowBackfillDialog(true)}
                     >
-                        Initialize Order
+                        {t("initialize")}
                     </Button>
                 </div>
             )}
@@ -667,6 +657,10 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                     columnLoadingState={columnLoadingState}
                     onLoadMoreColumn={(column) => boardDataController.loadMoreColumn(column)}
                     onAddItemToColumn={(column) => {
+                        analyticsController.onAnalyticsEvent?.("kanban_new_entity_in_column", {
+                            path: fullPath,
+                            column
+                        });
                         sideEntityController.open({
                             path: fullPath,
                             collection,
@@ -693,18 +687,17 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
             {/* Backfill dialog */}
             <Dialog open={showBackfillDialog} onOpenChange={setShowBackfillDialog}>
                 <DialogContent>
-                    <Typography variant="h6" className="mb-4">Initialize Kanban Order</Typography>
+                    <Typography variant="h6" className="mb-4">{t("initialize_kanban_order")}</Typography>
                     <Typography variant="body2">
-                        This will assign sequential order values to all items that don't have one.
-                        Items will maintain their current order within each column.
+                        {t("initialize_kanban_order_desc")}
                     </Typography>
                 </DialogContent>
                 <DialogActions>
                     <Button variant="text" onClick={() => setShowBackfillDialog(false)} disabled={backfillLoading}>
-                        Cancel
+                        {t("cancel")}
                     </Button>
                     <Button onClick={handleBackfill} disabled={backfillLoading}>
-                        {backfillLoading ? <CircularProgress size="smallest" /> : "Initialize"}
+                        {backfillLoading ? <CircularProgress size="smallest" /> : t("initialize")}
                     </Button>
                 </DialogActions>
             </Dialog>

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { CollectionSize, Entity, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { EntityCard } from "./EntityCard";
 import { CircularProgress, cls, Typography } from "@firecms/ui";
-import { useAuthController, useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController, useTranslation } from "../../hooks";
 
 export type EntityCollectionCardViewProps<M extends Record<string, any> = any> = {
     collection: EntityCollection<M>;
@@ -61,17 +61,18 @@ function getGridColumnsClass(size: CollectionSize): string {
  * Alternative to the EntityCollectionTable for visual browsing.
  */
 export function EntityCollectionCardView<M extends Record<string, any> = any>({
-                                                                                  collection,
-                                                                                  tableController,
-                                                                                  onEntityClick,
-                                                                                  selectionController,
-                                                                                  selectionEnabled = true,
-                                                                                  highlightedEntities,
-                                                                                  emptyComponent,
-                                                                                  onScroll,
-                                                                                  initialScroll,
-                                                                                  size = "m"
-                                                                              }: EntityCollectionCardViewProps<M>) {
+    collection,
+    tableController,
+    onEntityClick,
+    selectionController,
+    selectionEnabled = true,
+    highlightedEntities,
+    emptyComponent,
+    onScroll,
+    initialScroll,
+    size = "m"
+}: EntityCollectionCardViewProps<M>) {
+    const { t } = useTranslation();
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
@@ -178,23 +179,14 @@ export function EntityCollectionCardView<M extends Record<string, any> = any>({
             <div className="flex-1 flex items-center justify-center p-8">
                 {emptyComponent ?? (
                     <Typography variant="label" color="secondary">
-                        No entries found
+                        {t("no_entries_found")}
                     </Typography>
                 )}
             </div>
         );
     }
 
-    // Show error state
-    if (dataLoadingError) {
-        return (
-            <div className="flex-1 flex items-center justify-center p-8">
-                <Typography className="text-red-500">
-                    Error loading data: {dataLoadingError.message}
-                </Typography>
-            </div>
-        );
-    }
+
 
     const gridColumnsClass = getGridColumnsClass(size);
 
@@ -230,11 +222,11 @@ export function EntityCollectionCardView<M extends Record<string, any> = any>({
                     className="flex items-center justify-center py-8"
                 >
                     {dataLoading && (
-                        <CircularProgress size="small"/>
+                        <CircularProgress size="small" />
                     )}
                     {!dataLoading && noMoreToLoad && data.length > 0 && (
                         <Typography variant="caption" color="secondary">
-                            All {data.length} entries loaded
+                            {t("all_entries_loaded", { count: data.length.toString() })}
                         </Typography>
                     )}
                 </div>

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -45,13 +45,15 @@ import {
     useFireCMSContext,
     useLargeLayout,
     useNavigationController,
-    useSideEntityController
+    useSideEntityController,
+    useTranslation
 } from "../../hooks";
 import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import { EntityCollectionCardView } from "./EntityCollectionCardView";
 import { EntityCollectionBoardView } from "./EntityCollectionBoardView";
+import { CollectionDataErrorBanner } from "./CollectionDataErrorBanner";
 import { ViewModeToggle, KanbanPropertyOption } from "./ViewModeToggle";
 import {
     AddIcon,
@@ -159,6 +161,7 @@ export const EntityCollectionView = React.memo(
     ) {
 
         const context = useFireCMSContext();
+        const { t } = useTranslation();
         const navigation = useNavigationController();
         const breadcrumbs = useBreadcrumbsController();
         const fullPath = fullPathProp ?? collectionProp.path;
@@ -433,12 +436,17 @@ export const EntityCollectionView = React.memo(
 
         // View mode change: update URL + save to local persistence
         const onViewModeChange = useCallback((mode: ViewMode) => {
+            analyticsController.onAnalyticsEvent?.("view_mode_changed", {
+                path: fullPath,
+                from: viewMode,
+                to: mode
+            });
             setViewMode(mode);
             // Save to local persistence for next visit
             if (userConfigPersistence) {
                 onCollectionModifiedForUser(fullPath, { defaultViewMode: mode } as PartialEntityCollection<M>);
             }
-        }, [setViewMode, userConfigPersistence, onCollectionModifiedForUser, fullPath]);
+        }, [setViewMode, userConfigPersistence, onCollectionModifiedForUser, fullPath, analyticsController, viewMode]);
 
         const createEnabled = canCreateEntity(collection, authController, fullPath, null);
 
@@ -501,18 +509,24 @@ export const EntityCollectionView = React.memo(
             authController,
         }), [collection, fullPath]);
 
-        // Check if Kanban view is available (needs kanban.columnProperty with enumValues)
-        const kanbanEnabled = useMemo(() => {
-            if (!collection.kanban?.columnProperty) return false;
-            const property = getPropertyInPath(resolvedCollection.properties, collection.kanban.columnProperty);
-            if (!property || !("dataType" in property) || property.dataType !== "string") return false;
-            return Boolean(property.enumValues);
-        }, [collection.kanban?.columnProperty, resolvedCollection.properties]);
+        // Check if Kanban view is possible (collection has at least one string enum property)
+        const hasEnumProperty = useMemo(() => {
+            const properties = resolvedCollection.properties;
+            return Object.values(properties).some((prop: any) =>
+                prop && prop.dataType === "string" && prop.enumValues
+            );
+        }, [resolvedCollection.properties]);
 
-        // Check if a plugin can configure Kanban (has KanbanSetupComponent)
-        const hasKanbanConfigPlugin = useMemo(() => {
-            return customizationController.plugins?.some(plugin => plugin.collectionView?.KanbanSetupComponent) ?? false;
-        }, [customizationController.plugins]);
+        // Compute the effective enabled views:
+        // - Start from collection.enabledViews (defaults to all three)
+        // - Filter out kanban if no enum properties exist
+        const enabledViews: ViewMode[] = useMemo(() => {
+            const configured = collection.enabledViews ?? ["table", "cards", "kanban"];
+            if (!hasEnumProperty) {
+                return configured.filter(v => v !== "kanban");
+            }
+            return configured;
+        }, [collection.enabledViews, hasEnumProperty]);
 
         // Compute available enum properties for kanban column selection
         const kanbanPropertyOptions: KanbanPropertyOption[] = useMemo(() => {
@@ -562,12 +576,16 @@ export const EntityCollectionView = React.memo(
 
         // Handle kanban property change
         const onKanbanPropertyChange = useCallback((property: string) => {
+            analyticsController.onAnalyticsEvent?.("kanban_property_changed", {
+                path: fullPath,
+                property
+            });
             setSelectedKanbanProperty(property);
             // Save to local persistence
             if (userConfigPersistence) {
                 onCollectionModifiedForUser(fullPath, { kanbanColumnProperty: property } as any);
             }
-        }, [userConfigPersistence, onCollectionModifiedForUser, fullPath]);
+        }, [userConfigPersistence, onCollectionModifiedForUser, fullPath, analyticsController]);
 
         const getPropertyFor = useCallback(({
             propertyKey,
@@ -680,11 +698,13 @@ export const EntityCollectionView = React.memo(
             customEntityActions?: EntityAction[]
         }): EntityAction[] => {
             const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPath, entity) : true;
-            const actions: EntityAction[] = [editEntityAction];
+            const actions: EntityAction[] = [
+                { ...editEntityAction, name: t("edit") }
+            ];
             if (createEnabled)
-                actions.push(copyEntityAction);
+                actions.push({ ...copyEntityAction, name: t("copy") });
             if (deleteEnabled)
-                actions.push(deleteEntityAction);
+                actions.push({ ...deleteEntityAction, name: t("delete") });
             if (customEntityActions)
                 return mergeEntityActions(actions, customEntityActions);
             return actions;
@@ -819,8 +839,7 @@ export const EntityCollectionView = React.memo(
             <ViewModeToggle
                 viewMode={viewMode}
                 onViewModeChange={onViewModeChange}
-                kanbanEnabled={kanbanEnabled}
-                hasKanbanConfigPlugin={hasKanbanConfigPlugin}
+                enabledViews={enabledViews}
                 size={viewMode === "table" ? tableSize : viewMode === "cards" ? cardSize : undefined}
                 onSizeChanged={viewMode === "table" ? onTableSizeChanged : viewMode === "cards" ? setCardSize : undefined}
                 open={viewModePopoverOpen}
@@ -831,6 +850,24 @@ export const EntityCollectionView = React.memo(
             />
         );
 
+        // Compute plugin-provided error view for collection loading errors
+        const pluginErrorView = useMemo(() => {
+            const error = tableController.dataLoadingError;
+            if (!error || !customizationController.plugins) return null;
+            for (const plugin of customizationController.plugins) {
+                if (plugin.collectionView?.CollectionError) {
+                    const CollectionError = plugin.collectionView.CollectionError;
+                    return <CollectionError
+                        path={fullPath}
+                        collection={collection}
+                        parentCollectionIds={parentCollectionIds}
+                        error={error}
+                    />;
+                }
+            }
+            return null;
+        }, [tableController.dataLoadingError, customizationController.plugins, fullPath, collection, parentCollectionIds]);
+
         return (
             <div className={cls("overflow-hidden h-full w-full rounded-md flex flex-col", className)}
                 ref={containerRef}>
@@ -867,7 +904,9 @@ export const EntityCollectionView = React.memo(
                 />
 
                 {/* View content - only the view-specific content changes */}
-                {viewMode === "kanban" && (kanbanEnabled || hasKanbanConfigPlugin) ? (
+                {tableController.dataLoadingError ? (
+                    pluginErrorView ?? <CollectionDataErrorBanner error={tableController.dataLoadingError} />
+                ) : viewMode === "kanban" && enabledViews.includes("kanban") ? (
                     <EntityCollectionBoardView
                         key={`kanban-view-${fullPath}-${selectedKanbanProperty}`}
                         collection={collection}
@@ -882,16 +921,16 @@ export const EntityCollectionView = React.memo(
                         deletedEntities={deletedEntities}
                         emptyComponent={canCreateEntities && tableController.filterValues === undefined && tableController.sortBy === undefined
                             ? <div className="flex flex-col items-center justify-center">
-                                <Typography variant={"subtitle2"}>So empty...</Typography>
+                                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
                                 <Button
                                     onClick={onNewClick}
                                     className="mt-4"
                                 >
                                     <AddIcon />
-                                    Create your first entry
+                                    {t("create_your_first_entry")}
                                 </Button>
                             </div>
-                            : <Typography variant={"label"}>No results with the applied filter/sort</Typography>
+                            : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>
                         }
                     />
                 ) : viewMode === "cards" ? (
@@ -908,16 +947,16 @@ export const EntityCollectionView = React.memo(
                         size={cardSize}
                         emptyComponent={canCreateEntities && tableController.filterValues === undefined && tableController.sortBy === undefined
                             ? <div className="flex flex-col items-center justify-center">
-                                <Typography variant={"subtitle2"}>So empty...</Typography>
+                                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
                                 <Button
                                     onClick={onNewClick}
                                     className="mt-4"
                                 >
                                     <AddIcon />
-                                    Create your first entry
+                                    {t("create_your_first_entry")}
                                 </Button>
                             </div>
-                            : <Typography variant={"label"}>No results with the applied filter/sort</Typography>
+                            : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>
                         }
                     />
                 ) : (
@@ -946,16 +985,16 @@ export const EntityCollectionView = React.memo(
                         textSearchEnabled={textSearchEnabled}
                         emptyComponent={canCreateEntities && tableController.filterValues === undefined && tableController.sortBy === undefined
                             ? <div className="flex flex-col items-center justify-center">
-                                <Typography variant={"subtitle2"}>So empty...</Typography>
+                                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
                                 <Button
                                     onClick={onNewClick}
                                     className="mt-4"
                                 >
                                     <AddIcon />
-                                    Create your first entry
+                                    {t("create_your_first_entry")}
                                 </Button>
                             </div>
-                            : <Typography variant={"label"}>No results with the applied filter/sort</Typography>
+                            : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>
                         }
                         hoverRow={hoverRow}
                         inlineEditing={checkInlineEditing()}
@@ -1126,11 +1165,12 @@ function EntityIdHeaderWidget({
     const [searchString, setSearchString] = React.useState("");
     const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
     const sideEntityController = useSideEntityController();
+    const { t } = useTranslation();
 
     const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
 
     return (
-        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
+        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
@@ -1166,7 +1206,7 @@ function EntityIdHeaderWidget({
                         <div className="flex p-2 w-full gap-2">
                             <input
                                 autoFocus={openPopup}
-                                placeholder={"Find entity by ID"}
+                                placeholder={t("find_entity_by_id")}
                                 // size={"small"}
                                 onChange={(e) => {
                                     setSearchString(e.target.value);

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -17,6 +17,7 @@ import {
 } from "@firecms/ui";
 import { toArray } from "../../util/arrays";
 import { ErrorBoundary } from "../ErrorBoundary";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
@@ -45,9 +46,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 }: EntityCollectionViewActionsProps<M>) {
 
     const context = useFireCMSContext();
-
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins ?? [];
+    const { t } = useTranslation();
 
     const authController = useAuthController();
 
@@ -63,7 +64,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 startIcon={<AddIcon size={"small"} />}
                 variant="filled"
                 color="primary">
-                Add {collection.singularName ?? collection.name}
+                {t("add")} {collection.singularName ?? collection.name}
             </Button>
             : <Button
                 id={`add_entity_${path}`}
@@ -98,7 +99,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             </IconButton>;
         multipleDeleteButton =
             <Tooltip
-                title={multipleDeleteEnabled ? "Delete" : "You have selected at least one entity you cannot delete"}>
+                title={multipleDeleteEnabled ? t("delete_selected") : t("cannot_delete_selected")}>
                 {button}
             </Tooltip>
     }