fix(plugin-import-export): add translations for all UI elements and fields (#12449)

Converts all text and field labels into variables that can be
translated. Also generated the translations for them

So now the UI here is internationalised


![image](https://github.com/user-attachments/assets/40d7c010-ac58-4cd7-8786-01b3de3cabb7)

I've also moved some of the generic labels into the core package since
those could be re-used elsewhere

Author: paulpopus

packages/plugin-import-export/package.json

@@ -42,6 +42,16 @@
       "import": "./src/exports/rsc.ts",
       "types": "./src/exports/rsc.ts",
       "default": "./src/exports/rsc.ts"
+    },
+    "./translations/languages/all": {
+      "import": "./src/translations/index.ts",
+      "types": "./src/translations/index.ts",
+      "default": "./src/translations/index.ts"
+    },
+    "./translations/languages/*": {
+      "import": "./src/translations/languages/*.ts",
+      "types": "./src/translations/languages/*.ts",
+      "default": "./src/translations/languages/*.ts"
     }
   },
   "main": "./src/index.ts",
@@ -92,6 +102,16 @@
         "import": "./dist/exports/rsc.js",
         "types": "./dist/exports/rsc.d.ts",
         "default": "./dist/exports/rsc.js"
+      },
+      "./translations/languages/all": {
+        "import": "./dist/translations/index.js",
+        "types": "./dist/translations/index.d.ts",
+        "default": "./dist/translations/index.js"
+      },
+      "./translations/languages/*": {
+        "import": "./dist/translations/languages/*.js",
+        "types": "./dist/translations/languages/*.d.ts",
+        "default": "./dist/translations/languages/*.js"
       }
     },
     "main": "./dist/index.js",

packages/plugin-import-export/src/components/ExportListMenuItem/index.tsx

@@ -1,9 +1,20 @@
 'use client'
 
 import { getTranslation } from '@payloadcms/translations'
-import { PopupList, useConfig, useDocumentDrawer, useTranslation } from '@payloadcms/ui'
+import {
+  PopupList,
+  Translation,
+  useConfig,
+  useDocumentDrawer,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { useEffect } from 'react'
 
+import type {
+  PluginImportExportTranslationKeys,
+  PluginImportExportTranslations,
+} from '../../translations/index.js'
+
 import { useImportExport } from '../ImportExportProvider/index.js'
 import './index.scss'
 
@@ -14,7 +25,10 @@ export const ExportListMenuItem: React.FC<{
   exportCollectionSlug: string
 }> = ({ collectionSlug, exportCollectionSlug }) => {
   const { getEntityConfig } = useConfig()
-  const { i18n } = useTranslation()
+  const { i18n, t } = useTranslation<
+    PluginImportExportTranslations,
+    PluginImportExportTranslationKeys
+  >()
   const currentCollectionConfig = getEntityConfig({ collectionSlug })
 
   const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
@@ -30,7 +44,15 @@ export const ExportListMenuItem: React.FC<{
   return (
     <PopupList.Button className={baseClass}>
       <DocumentDrawerToggler>
-        Export {getTranslation(currentCollectionConfig.labels.plural, i18n)}
+        <Translation
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          i18nKey="plugin-import-export:exportDocumentLabel"
+          t={t}
+          variables={{
+            label: getTranslation(currentCollectionConfig.labels.plural, i18n),
+          }}
+        />
       </DocumentDrawerToggler>
       <DocumentDrawer />
     </PopupList.Button>

packages/plugin-import-export/src/components/ExportSaveButton/index.tsx

@@ -1,10 +1,15 @@
 'use client'
 
-import { Button, SaveButton, useConfig, useForm, useTranslation } from '@payloadcms/ui'
+import { Button, SaveButton, Translation, useConfig, useForm, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
+import type {
+  PluginImportExportTranslationKeys,
+  PluginImportExportTranslations,
+} from '../../translations/index.js'
+
 export const ExportSaveButton: React.FC = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslation<PluginImportExportTranslations, PluginImportExportTranslationKeys>()
   const {
     config: {
       routes: { api },
@@ -65,7 +70,7 @@ export const ExportSaveButton: React.FC = () => {
     <React.Fragment>
       <SaveButton label={label}></SaveButton>
       <Button onClick={handleDownload} size="medium" type="button">
-        Download
+        <Translation i18nKey="upload:download" t={t} />
       </Button>
     </React.Fragment>
   )

packages/plugin-import-export/src/components/FieldsToExport/index.tsx

@@ -83,11 +83,12 @@ export const FieldsToExport: SelectFieldClientComponent = (props) => {
 
   return (
     <div className={baseClass}>
-      <FieldLabel label="Columns to Export" />
+      <FieldLabel label={props.field.label} path={props.path} />
       <ReactSelect
         className={baseClass}
         disabled={props.readOnly}
         getOptionValue={(option) => String(option.value)}
+        inputId={`field-${props.path.replace(/\./g, '__')}`}
         isClearable={true}
         isMulti={true}
         isSortable={true}

packages/plugin-import-export/src/components/Preview/index.tsx

@@ -3,13 +3,18 @@ import type { Column } from '@payloadcms/ui'
 import type { ClientField, FieldAffectingDataClient } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
-import { Table, useConfig, useField, useTranslation } from '@payloadcms/ui'
+import { Table, Translation, useConfig, useField, useTranslation } from '@payloadcms/ui'
 import { fieldAffectsData } from 'payload/shared'
 import * as qs from 'qs-esm'
 import React from 'react'
 
-import { useImportExport } from '../ImportExportProvider/index.js'
+import type {
+  PluginImportExportTranslationKeys,
+  PluginImportExportTranslations,
+} from '../../translations/index.js'
+
 import './index.scss'
+import { useImportExport } from '../ImportExportProvider/index.js'
 
 const baseClass = 'preview'
 
@@ -24,7 +29,10 @@ export const Preview = () => {
   const [dataToRender, setDataToRender] = React.useState<any[]>([])
   const [resultCount, setResultCount] = React.useState<any>('')
   const [columns, setColumns] = React.useState<Column[]>([])
-  const { i18n } = useTranslation()
+  const { i18n, t } = useTranslation<
+    PluginImportExportTranslations,
+    PluginImportExportTranslationKeys
+  >()
 
   const collectionSlug = typeof collection === 'string' && collection
   const collectionConfig = config.collections.find(
@@ -102,8 +110,20 @@ export const Preview = () => {
   return (
     <div className={baseClass}>
       <div className={`${baseClass}__header`}>
-        <h3>Preview</h3>
-        {resultCount && <span>{resultCount} total documents</span>}
+        <h3>
+          <Translation i18nKey="version:preview" t={t} />
+        </h3>
+        {resultCount && (
+          <Translation
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            i18nKey="plugin-import-export:totalDocumentsCount"
+            t={t}
+            variables={{
+              count: resultCount,
+            }}
+          />
+        )}
       </div>
       {dataToRender && <Table columns={columns} data={dataToRender} />}
     </div>

packages/plugin-import-export/src/components/SortBy/index.tsx

@@ -72,11 +72,12 @@ export const SortBy: SelectFieldClientComponent = (props) => {
 
   return (
     <div className={baseClass} style={{ '--field-width': '33%' } as React.CSSProperties}>
-      <FieldLabel label="Sort By" />
+      <FieldLabel label={props.field.label} path={props.path} />
       <ReactSelect
         className={baseClass}
         disabled={props.readOnly}
         getOptionValue={(option) => String(option.value)}
+        inputId={`field-${props.path.replace(/\./g, '__')}`}
         isClearable={true}
         isSortable={true}
         // @ts-expect-error react select option

packages/plugin-import-export/src/export/getFields.ts

@@ -12,10 +12,11 @@ export const getFields = (config: Config): Field[] => {
         width: '33%',
       },
       defaultValue: 'all',
-      label: 'Locale',
+      // @ts-expect-error - this is not correctly typed in plugins right now
+      label: ({ t }) => t('plugin-import-export:field-locale-label'),
       options: [
         {
-          label: 'All Locales',
+          label: ({ t }) => t('general:allLocales'),
           value: 'all',
         },
         ...config.localization.locales.map((locale) => ({
@@ -34,7 +35,8 @@ export const getFields = (config: Config): Field[] => {
           name: 'name',
           type: 'text',
           defaultValue: () => getFilename(),
-          label: 'File Name',
+          // @ts-expect-error - this is not correctly typed in plugins right now
+          label: ({ t }) => t('plugin-import-export:field-name-label'),
         },
         {
           type: 'row',
@@ -46,7 +48,8 @@ export const getFields = (config: Config): Field[] => {
                 width: '33%',
               },
               defaultValue: 'csv',
-              label: 'Export Format',
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:field-format-label'),
               options: [
                 {
                   label: 'CSV',
@@ -66,6 +69,8 @@ export const getFields = (config: Config): Field[] => {
                 placeholder: 'No limit',
                 width: '33%',
               },
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:field-limit-label'),
             },
             {
               name: 'sort',
@@ -75,6 +80,8 @@ export const getFields = (config: Config): Field[] => {
                   Field: '@payloadcms/plugin-import-export/rsc#SortBy',
                 },
               },
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:field-sort-label'),
             },
           ],
         },
@@ -98,21 +105,24 @@ export const getFields = (config: Config): Field[] => {
                 width: '33%',
               },
               defaultValue: 'yes',
-              label: 'Drafts',
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:field-drafts-label'),
               options: [
                 {
-                  label: 'Yes',
+                  label: ({ t }) => t('general:yes'),
                   value: 'yes',
                 },
                 {
-                  label: 'No',
+                  label: ({ t }) => t('general:no'),
                   value: 'no',
                 },
               ],
             },
             // {
             //   name: 'depth',
             //   type: 'number',
+            //   // @ts-expect-error - this is not correctly typed in plugins right now
+            //   label: ({ t }) => t('plugin-import-export:field-depth-label'),
             //   admin: {
             //     width: '33%',
             //   },
@@ -126,17 +136,22 @@ export const getFields = (config: Config): Field[] => {
           name: 'selectionToUse',
           type: 'radio',
           defaultValue: 'all',
+          // @ts-expect-error - this is not correctly typed in plugins right now
+          label: ({ t }) => t('plugin-import-export:field-selectionToUse-label'),
           options: [
             {
-              label: 'Use current selection',
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:selectionToUse-currentSelection'),
               value: 'currentSelection',
             },
             {
-              label: 'Use current filters',
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:selectionToUse-currentFilters'),
               value: 'currentFilters',
             },
             {
-              label: 'Use all documents',
+              // @ts-expect-error - this is not correctly typed in plugins right now
+              label: ({ t }) => t('plugin-import-export:selectionToUse-allDocuments'),
               value: 'all',
             },
           ],
@@ -151,6 +166,8 @@ export const getFields = (config: Config): Field[] => {
             },
           },
           hasMany: true,
+          // @ts-expect-error - this is not correctly typed in plugins right now
+          label: ({ t }) => t('plugin-import-export:field-fields-label'),
         },
         {
           name: 'collectionSlug',
@@ -174,7 +191,8 @@ export const getFields = (config: Config): Field[] => {
           defaultValue: {},
         },
       ],
-      label: 'Export Options',
+      // @ts-expect-error - this is not correctly typed in plugins right now
+      label: ({ t }) => t('plugin-import-export:exportOptions'),
     },
     {
       name: 'preview',

packages/plugin-import-export/src/index.ts

@@ -2,6 +2,7 @@ import type { Config, JobsConfig } from 'payload'
 
 import { deepMergeSimple } from 'payload'
 
+import type { PluginDefaultTranslationsObject } from './translations/types.js'
 import type { ImportExportPluginConfig } from './types.js'
 
 import { getCreateCollectionExportTask } from './export/getCreateExportCollectionTask.js'
@@ -70,7 +71,23 @@ export const importExportPlugin =
       config.i18n = {}
     }
 
-    config.i18n.translations = deepMergeSimple(translations, config.i18n?.translations ?? {})
+    // config.i18n.translations = deepMergeSimple(translations, config.i18n?.translations ?? {})
+
+    /**
+     * Merge plugin translations
+     */
+    const simplifiedTranslations = Object.entries(translations).reduce(
+      (acc, [key, value]) => {
+        acc[key] = value.translations
+        return acc
+      },
+      {} as Record<string, PluginDefaultTranslationsObject>,
+    )
+
+    config.i18n = {
+      ...config.i18n,
+      translations: deepMergeSimple(simplifiedTranslations, config.i18n?.translations ?? {}),
+    }
 
     return config
   }