fix(ui): relationship edit drawers now respect current locale (#10262)

Fixes #9979

packages/next/src/views/Document/handleServerFunction.tsx

@@ -1,4 +1,11 @@
-import type { Data, DocumentPreferences, FormState, PayloadRequest, VisibleEntities } from 'payload'
+import type {
+  Data,
+  DocumentPreferences,
+  FormState,
+  Locale,
+  PayloadRequest,
+  VisibleEntities,
+} from 'payload'
 
 import { getClientConfig } from '@payloadcms/ui/utilities/getClientConfig'
 import { headers as getHeaders } from 'next/headers.js'
@@ -19,6 +26,7 @@ export const renderDocumentHandler = async (args: {
   drawerSlug?: string
   initialData?: Data
   initialState?: FormState
+  locale?: Locale
   overrideEntityVisibility?: boolean
   redirectAfterDelete: boolean
   redirectAfterDuplicate: boolean
@@ -30,6 +38,7 @@ export const renderDocumentHandler = async (args: {
     docID,
     drawerSlug,
     initialData,
+    locale,
     overrideEntityVisibility,
     redirectAfterDelete,
     redirectAfterDuplicate,
@@ -145,6 +154,7 @@ export const renderDocumentHandler = async (args: {
       docID,
       globalConfig: payload.config.globals.find((global) => global.slug === collectionSlug),
       languageOptions: undefined, // TODO
+      locale,
       permissions,
       req,
       translations: undefined, // TODO

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -8,6 +8,7 @@ import type { DocumentDrawerProps } from './types.js'
 
 import { LoadingOverlay } from '../../elements/Loading/index.js'
 import { useConfig } from '../../providers/Config/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
 import { useServerFunctions } from '../../providers/ServerFunctions/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.js'
@@ -32,6 +33,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
   const {
     config: { collections },
   } = useConfig()
+  const locale = useLocale()
 
   const [collectionConfig] = useState(() =>
     collections.find((collection) => collection.slug === collectionSlug),
@@ -62,6 +64,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
             docID,
             drawerSlug,
             initialData,
+            locale,
             overrideEntityVisibility,
             redirectAfterDelete: redirectAfterDelete !== undefined ? redirectAfterDelete : false,
             redirectAfterDuplicate:
@@ -95,6 +98,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
       closeModal,
       overrideEntityVisibility,
       t,
+      locale,
     ],
   )
 

packages/ui/src/providers/ServerFunctions/index.tsx

@@ -3,6 +3,7 @@ import type {
   BuildTableStateArgs,
   Data,
   DocumentSlots,
+  Locale,
   ServerFunctionClient,
 } from 'payload'
 
@@ -40,6 +41,7 @@ type RenderDocument = (args: {
   docID?: number | string
   drawerSlug?: string
   initialData?: Data
+  locale?: Locale
   overrideEntityVisibility?: boolean
   redirectAfterDelete?: boolean
   redirectAfterDuplicate?: boolean

test/localization/config.ts

@@ -524,7 +524,7 @@ export default buildConfigWithDefaults({
         relationship: localizedRelation.id,
       },
     })
-    await payload.create({
+    const relationshipLocalized = await payload.create({
       collection: relationshipLocalizedSlug,
       data: {
         arrayField: [
@@ -543,6 +543,15 @@ export default buildConfigWithDefaults({
       locale: 'en',
     })
 
+    await payload.update({
+      collection: relationshipLocalizedSlug,
+      id: relationshipLocalized.id,
+      data: {
+        relationMultiRelationTo: { relationTo: collection, value: localizedPost.id },
+      },
+      locale: 'es',
+    })
+
     console.log('SEED 5')
 
     const globalArray = await payload.updateGlobal({

test/localization/e2e.spec.ts

@@ -12,6 +12,7 @@ import {
   changeLocale,
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
+  openDocDrawer,
   saveDocAndAssert,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
@@ -23,6 +24,7 @@ import {
   defaultLocale,
   englishTitle,
   localizedPostsSlug,
+  relationshipLocalizedSlug,
   spanishLocale,
   withRequiredLocalizedFields,
 } from './shared.js'
@@ -41,6 +43,7 @@ const dirname = path.dirname(filename)
 const { beforeAll, describe } = test
 let url: AdminUrlUtil
 let urlWithRequiredLocalizedFields: AdminUrlUtil
+let urlRelationshipLocalized: AdminUrlUtil
 
 const title = 'english title'
 const spanishTitle = 'spanish title'
@@ -58,6 +61,7 @@ describe('Localization', () => {
     ;({ payload, serverURL } = await initPayloadE2ENoConfig<Config>({ dirname }))
 
     url = new AdminUrlUtil(serverURL, localizedPostsSlug)
+    urlRelationshipLocalized = new AdminUrlUtil(serverURL, relationshipLocalizedSlug)
     richTextURL = new AdminUrlUtil(serverURL, richTextSlug)
     urlWithRequiredLocalizedFields = new AdminUrlUtil(serverURL, withRequiredLocalizedFields)
 
@@ -253,6 +257,23 @@ describe('Localization', () => {
 
       await expect(page.locator('#field-children .rs__menu')).toContainText('spanish-relation2')
     })
+
+    test('ensure relationship edit drawers are opened in currently selected locale', async () => {
+      await page.goto(urlRelationshipLocalized.list)
+      await changeLocale(page, spanishLocale)
+
+      const post = page.locator('.cell-id a').first()
+      const postUrl = await post.getAttribute('href')
+      await page.goto(serverURL + postUrl)
+      await page.waitForURL(serverURL + postUrl)
+
+      await openDocDrawer(
+        page,
+        '#field-relationMultiRelationTo .relationship--single-value__drawer-toggler',
+      )
+
+      await expect(page.locator('.doc-drawer__header-text')).toContainText('spanish-relation2')
+    })
   })
 
   describe('copy localized data', () => {