fix(ui): respect locale in buildTableState (#11147)

### What?
This PR fixes an issue where the `join` field table was not respecting
the locale selected in the admin ui localizer.

This also introduces an e2e test to the existing suite to catch this
issue.

### Why?
To properly render `join` field table data according to chosen and
configured locales.

### How?
Threading `req.locale` through to the `payload.find` call in
`buildTableState`.

Fixes #11134

Before:

[Editing---Category--join-locales-before-Payload.webm](https://github.com/user-attachments/assets/d77b71bb-f849-4be2-aa96-26dbfedb52d4)

After:

[Editing---Category--join-locales-after-Payload.webm](https://github.com/user-attachments/assets/0d1f7351-adf4-4bad-ac82-0fee67f8b66a)

Author: akhrarovsaid

packages/ui/src/utilities/buildTableState.ts

@@ -156,6 +156,7 @@ export const buildTableState = async (
       collection: collectionSlug,
       depth: 0,
       limit: query?.limit ? parseInt(query.limit, 10) : undefined,
+      locale: req.locale,
       overrideAccess: false,
       page: query?.page ? parseInt(query.page, 10) : undefined,
       sort: query?.sort,

test/joins/collections/Posts.ts

@@ -6,13 +6,18 @@ export const Posts: CollectionConfig = {
   slug: postsSlug,
   admin: {
     useAsTitle: 'title',
-    defaultColumns: ['title', 'category', 'updatedAt', 'createdAt'],
+    defaultColumns: ['title', 'localizedText', 'category', 'updatedAt', 'createdAt'],
   },
   fields: [
     {
       name: 'title',
       type: 'text',
     },
+    {
+      name: 'localizedText',
+      type: 'text',
+      localized: true,
+    },
     {
       name: 'author',
       type: 'relationship',

test/joins/config.ts

@@ -222,7 +222,10 @@ export default buildConfigWithDefaults({
     },
   ],
   localization: {
-    locales: ['en', 'es'],
+    locales: [
+      { label: '(en)', code: 'en' },
+      { label: '(es)', code: 'es' },
+    ],
     defaultLocale: 'en',
   },
   onInit: async (payload) => {

test/joins/e2e.spec.ts

@@ -9,6 +9,7 @@ import type { PayloadTestSDK } from '../helpers/sdk/index.js'
 import type { Config } from './payload-types.js'
 
 import {
+  changeLocale,
   ensureCompilationIsDone,
   exactText,
   initPageConsoleErrorCatch,
@@ -483,4 +484,20 @@ describe('Join Field', () => {
 
     await expect(page.locator('#field-joinWithError')).toContainText('enableErrorOnJoin is true')
   })
+
+  test('should render localized data in table when locale changes', async () => {
+    await page.goto(categoriesURL.edit(categoryID))
+    const joinField = page.locator('#field-relatedPosts.field-type.join')
+    await expect(joinField).toBeVisible()
+    await expect(joinField.locator('.relationship-table table')).toBeVisible()
+
+    const row = joinField.locator('.relationship-table tbody tr.row-1')
+    await expect(row).toBeVisible()
+    const localizedTextCell = row.locator('.cell-localizedText span')
+    await expect(localizedTextCell).toBeVisible()
+    await expect(localizedTextCell).toHaveText('Text in en')
+
+    await changeLocale(page, 'es')
+    await expect(localizedTextCell).toHaveText('Text in es')
+  })
 })

test/joins/payload-types.ts

@@ -164,6 +164,7 @@ export interface User {
 export interface Post {
   id: string;
   title?: string | null;
+  localizedText?: string | null;
   author?: (string | null) | User;
   /**
    * Hides posts for the `filtered` join field in categories
@@ -668,6 +669,7 @@ export interface UsersSelect<T extends boolean = true> {
  */
 export interface PostsSelect<T extends boolean = true> {
   title?: T;
+  localizedText?: T;
   author?: T;
   isFiltered?: T;
   restrictedField?: T;

test/joins/seed.ts

@@ -44,37 +44,67 @@ export const seed = async (_payload: Payload) => {
     },
   })
 
-  await _payload.create({
+  const post1 = await _payload.create({
     collection: postsSlug,
     data: {
       category: category.id,
       group: {
         category: category.id,
       },
       title: 'Test Post 1',
+      localizedText: 'Text in en',
     },
   })
 
-  await _payload.create({
+  const post2 = await _payload.create({
     collection: postsSlug,
     data: {
       category: category.id,
       group: {
         category: category.id,
       },
       title: 'Test Post 2',
+      localizedText: 'Text in en',
     },
   })
 
-  await _payload.create({
+  const post3 = await _payload.create({
     collection: postsSlug,
     data: {
       category: category.id,
       group: {
         category: category.id,
       },
       title: 'Test Post 3',
+      localizedText: 'Text in en',
+    },
+  })
+
+  await _payload.update({
+    collection: postsSlug,
+    id: post1.id,
+    data: {
+      localizedText: 'Text in es',
+    },
+    locale: 'es',
+  })
+
+  await _payload.update({
+    collection: postsSlug,
+    id: post2.id,
+    data: {
+      localizedText: 'Text in es',
+    },
+    locale: 'es',
+  })
+
+  await _payload.update({
+    collection: postsSlug,
+    id: post3.id,
+    data: {
+      localizedText: 'Text in es',
     },
+    locale: 'es',
   })
 
   // create an upload with image.png