fix(plugin-import-export): translated preview labels (#11758)

### What?

The import-export preview UI component does not handle localized fields
and crash the UI when they are used. This fixes that issue.

### Why?

We were not properly handling the label translated object notation that
field.label can have.

### How?

Now we call `getTranslation` with the field label to handle language
keyed labels.

Fixes # https://github.com/payloadcms/payload/issues/11668
This commit is contained in:
Dan Ribbens
2025-03-18 16:30:48 -04:00
committed by GitHub
parent f31e5e675d
commit e83f452d09
3 changed files with 6 additions and 3 deletions

View File

@@ -2,7 +2,8 @@
import type { Column } from '@payloadcms/ui'
import type { ClientField, FieldAffectingDataClient } from 'payload'
import { Table, useConfig, useField } from '@payloadcms/ui'
import { getTranslation } from '@payloadcms/translations'
import { Table, useConfig, useField, useTranslation } from '@payloadcms/ui'
import { fieldAffectsData } from 'payload/shared'
import * as qs from 'qs-esm'
import React from 'react'
@@ -23,6 +24,7 @@ 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 collectionSlug = typeof collection === 'string' && collection
const collectionConfig = config.collections.find(
@@ -75,7 +77,7 @@ export const Preview = () => {
accessor: field.name || '',
active: true,
field: field as ClientField,
Heading: field?.label || field.name,
Heading: getTranslation(field?.label || (field.name as string), i18n),
renderedCells: data.docs.map((doc: Record<string, unknown>) => {
if (!field.name || !doc[field.name]) {
return null

View File

@@ -17,7 +17,7 @@ export const Pages: CollectionConfig = {
fields: [
{
name: 'title',
label: 'Title',
label: { en: 'Title', es: 'Título', de: 'Titel' },
type: 'text',
required: true,
},

View File

@@ -54,6 +54,7 @@ export type SupportedTimezones =
| 'Asia/Singapore'
| 'Asia/Tokyo'
| 'Asia/Seoul'
| 'Australia/Brisbane'
| 'Australia/Sydney'
| 'Pacific/Guam'
| 'Pacific/Noumea'