tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
### 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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
test/plugin-import-export/collections/Pages.ts
View File

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

1
test/plugin-import-export/payload-types.ts
View File

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