fix: properly translate static table headers

packages/core/dev-test/config.yml

@@ -4,7 +4,7 @@ site_url: 'https://example.com'
 media_folder: assets/uploads
 media_library:
   folder_support: true
-locale: en
+locale: fr
 i18n:
   # Required and can be one of multiple_folders, multiple_files or single_file
   # multiple_folders - persists files in `<folder>/<locale>/<slug>.<extension>`

packages/core/src/components/collections/entries/EntryListing.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
-import { translate } from 'react-polyglot';
 
 import { VIEW_STYLE_TABLE } from '@staticcms/core/constants/views';
+import useTranslate from '@staticcms/core/lib/hooks/useTranslate';
 import { selectFields, selectInferredField } from '@staticcms/core/lib/util/collection.util';
+import { isNullish } from '@staticcms/core/lib/util/null.util';
 import { toTitleCaseFromKey } from '@staticcms/core/lib/util/string.util';
 import entriesClasses from './Entries.classes';
 import EntryListingGrid from './EntryListingGrid';
@@ -15,7 +16,6 @@ import type {
   Collections,
   Entry,
   Field,
-  TranslatedProps,
 } from '@staticcms/core/interface';
 import type Cursor from '@staticcms/core/lib/util/Cursor';
 import type { FC } from 'react';
@@ -42,16 +42,17 @@ export type EntryListingProps =
   | SingleCollectionEntryListingProps
   | MultipleCollectionEntryListingProps;
 
-const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
+const EntryListing: FC<EntryListingProps> = ({
   entries,
   cursor,
   viewStyle,
   isLoadingEntries,
   filterTerm,
   handleCursorActions,
-  t,
   ...otherProps
 }) => {
+  const t = useTranslate();
+
   const hasMore = useMemo(() => cursor?.actions?.has('append_next'), [cursor?.actions]);
 
   const handleLoadMore = useCallback(() => {
@@ -84,20 +85,47 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
     [],
   );
 
-  const summaryFields = useMemo(() => {
-    let fields: string[] | undefined;
-    if ('collection' in otherProps) {
-      fields = otherProps.collection.summary_fields;
-    }
-
-    return fields ?? ['summary'];
-  }, [otherProps]);
-
   const isSingleCollectionInList = useMemo(
     () => !('collections' in otherProps) || Object.keys(otherProps.collections).length === 1,
     [otherProps],
   );
 
+  const summaryFields: {
+    name: string;
+    label: string;
+  }[] = useMemo(() => {
+    const summaryField = [
+      {
+        name: 'summary',
+        label: t('collection.table.summary'),
+      },
+    ];
+
+    if (!isSingleCollectionInList) {
+      return summaryField;
+    }
+
+    if (!('collection' in otherProps) || isNullish(otherProps.collection.summary_fields)) {
+      return summaryField;
+    }
+
+    const fieldNames = otherProps.collection.summary_fields;
+    const collectionFields = selectFields(otherProps.collection).reduce((acc, f) => {
+      acc[f.name] = f;
+      return acc;
+    }, {} as Record<string, Field>);
+
+    return fieldNames.map(summaryField => {
+      const field = collectionFields[summaryField];
+      return {
+        name: summaryField,
+        label: !field
+          ? toTitleCaseFromKey(summaryField)
+          : field.label ?? toTitleCaseFromKey(field.name),
+      };
+    });
+  }, [isSingleCollectionInList, otherProps, t]);
+
   const entryData: CollectionEntryData[] = useMemo(() => {
     if ('collection' in otherProps) {
       const inferredFields = inferFields(otherProps.collection);
@@ -108,7 +136,6 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
         viewStyle,
         entry,
         key: entry.slug,
-        summaryFields,
       }));
     }
 
@@ -129,29 +156,11 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
               viewStyle,
               collectionLabel,
               key: entry.slug,
-              summaryFields,
             }
           : null;
       })
       .filter(e => e) as CollectionEntryData[];
-  }, [entries, inferFields, isSingleCollectionInList, otherProps, summaryFields, viewStyle]);
-
-  const summaryFieldHeaders = useMemo(() => {
-    if ('collection' in otherProps) {
-      const collectionFields = selectFields(otherProps.collection).reduce((acc, f) => {
-        acc[f.name] = f;
-        return acc;
-      }, {} as Record<string, Field>);
-      return summaryFields.map(summaryField => {
-        const field = collectionFields[summaryField];
-        return !field
-          ? toTitleCaseFromKey(summaryField)
-          : field.label ?? toTitleCaseFromKey(field.name);
-      });
-    }
-
-    return [];
-  }, [otherProps, summaryFields]);
+  }, [entries, inferFields, isSingleCollectionInList, otherProps, viewStyle]);
 
   if (viewStyle === VIEW_STYLE_TABLE) {
     return (
@@ -160,7 +169,7 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
           key="table"
           entryData={entryData}
           isSingleCollectionInList={isSingleCollectionInList}
-          summaryFieldHeaders={summaryFieldHeaders}
+          summaryFields={summaryFields}
           loadNext={handleLoadMore}
           canLoadMore={Boolean(hasMore && handleLoadMore)}
           isLoadingEntries={isLoadingEntries}
@@ -182,4 +191,4 @@ const EntryListing: FC<TranslatedProps<EntryListingProps>> = ({
   );
 };
 
-export default translate()(EntryListing) as FC<EntryListingProps>;
+export default EntryListing;

packages/core/src/components/collections/entries/EntryListingTable.tsx

@@ -16,7 +16,10 @@ import type { t } from 'react-polyglot';
 export interface EntryListingTableProps {
   isSingleCollectionInList: boolean;
   entryData: CollectionEntryData[];
-  summaryFieldHeaders: string[];
+  summaryFields: {
+    name: string;
+    label: string;
+  }[];
   canLoadMore: boolean;
   isLoadingEntries: boolean;
   loadNext: () => void;
@@ -26,7 +29,7 @@ export interface EntryListingTableProps {
 const EntryListingTable: FC<EntryListingTableProps> = ({
   isSingleCollectionInList,
   entryData,
-  summaryFieldHeaders,
+  summaryFields,
   canLoadMore,
   isLoadingEntries,
   loadNext,
@@ -70,6 +73,18 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
     fetchMoreOnBottomReached(scrollHeight, scrollTop, clientHeight);
   }, [clientHeight, fetchMoreOnBottomReached, scrollHeight, scrollTop]);
 
+  const baseColumnHeaders = useMemo(() => {
+    const cols = [...summaryFields.map(f => f.label), ''];
+
+    if (!isSingleCollectionInList) {
+      cols.unshift(t('collection.table.collection'));
+    }
+
+    return cols;
+  }, [isSingleCollectionInList, summaryFields, t]);
+
+  const columnFields = useMemo(() => [...summaryFields.map(f => f.name)], [summaryFields]);
+
   return (
     <div className={entriesClasses['entry-listing-table']}>
       <div
@@ -80,13 +95,7 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
           'CMS_Scrollbar_secondary',
         )}
       >
-        <Table
-          columns={
-            !isSingleCollectionInList
-              ? ['Collection', ...summaryFieldHeaders, '']
-              : [...summaryFieldHeaders, '']
-          }
-        >
+        <Table columns={baseColumnHeaders}>
           {paddingTop > 0 && (
             <tr>
               <td style={{ height: `${paddingTop}px` }} />
@@ -98,8 +107,9 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
               <EntryRow
                 key={virtualRow.index}
                 collection={data.collection}
+                collectionLabel={data.collectionLabel}
                 entry={data.entry}
-                summaryFields={data.summaryFields}
+                columnFields={columnFields}
                 t={t}
               />
             );

packages/core/src/components/collections/entries/EntryRow.tsx

@@ -25,14 +25,14 @@ export interface EntryRowProps {
   entry: Entry;
   collection: Collection;
   collectionLabel?: string;
-  summaryFields: string[];
+  columnFields: string[];
 }
 
 const EntryRow: FC<TranslatedProps<EntryRowProps>> = ({
   collection,
   entry,
   collectionLabel,
-  summaryFields,
+  columnFields,
   t,
 }) => {
   const path = useMemo(
@@ -89,7 +89,7 @@ const EntryRow: FC<TranslatedProps<EntryRowProps>> = ({
           {collectionLabel}
         </TableCell>
       ) : null}
-      {summaryFields.map(fieldName => {
+      {columnFields.map(fieldName => {
         if (fieldName === 'summary') {
           return (
             <TableCell key={fieldName} to={path}>

packages/core/src/interface.ts

@@ -568,11 +568,6 @@ export abstract class BackendClass {
   }>;
 }
 
-export interface LocalePhrasesRoot {
-  [property: string]: LocalePhrases;
-}
-export type LocalePhrases = string | { [property: string]: LocalePhrases };
-
 export type CustomIcon = FunctionComponent;
 
 export type WidgetValueSerializer = {
@@ -1193,6 +1188,5 @@ export interface CollectionEntryData {
   viewStyle: ViewStyle;
   entry: Entry;
   key: string;
-  summaryFields: string[];
   collectionLabel?: string;
 }

packages/core/src/lib/hooks/index.ts

@@ -8,3 +8,4 @@ export { default as useMediaFiles } from './useMediaFiles';
 export { default as useMediaInsert } from './useMediaInsert';
 export { default as useMediaPersist } from './useMediaPersist';
 export { default as useUUID } from './useUUID';
+export { default as useTranslate } from './useTranslate';

packages/core/src/lib/hooks/useTranslate.ts

@@ -0,0 +1,7 @@
+import { useTranslate as useReactPolyglotTranslate } from 'react-polyglot';
+
+import type { t } from 'react-polyglot';
+
+export default function useTranslate(): t {
+  return useReactPolyglotTranslate() as t;
+}

packages/core/src/lib/registry.ts

@@ -17,7 +17,6 @@ import type {
   EventData,
   EventListener,
   FieldPreviewComponent,
-  LocalePhrasesRoot,
   LoginEventListener,
   LogoutEventListener,
   MountedEventListener,
@@ -36,6 +35,7 @@ import type {
   WidgetParam,
   WidgetValueSerializer,
 } from '../interface';
+import type { LocalePhrasesRoot } from '../locales/types';
 
 export const allowedEvents = [
   'mounted',