fix(next): version diff view shows correct document title in step nav

packages/next/src/views/Version/Default/SetStepNav.tsx

@@ -4,8 +4,8 @@ import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'
 import type React from 'react'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useConfig, useLocale, useStepNav, useTranslation } from '@payloadcms/ui'
-import { fieldAffectsData, formatAdminURL } from 'payload/shared'
+import { useConfig, useDocumentTitle, useLocale, useStepNav, useTranslation } from '@payloadcms/ui'
+import { formatAdminURL } from 'payload/shared'
 import { useEffect } from 'react'
 
 export const SetStepNav: React.FC<{
@@ -15,20 +15,19 @@ export const SetStepNav: React.FC<{
   readonly isTrashed?: boolean
   versionToCreatedAtFormatted?: string
   versionToID?: string
-  versionToUseAsTitle?: Record<string, string> | string
 }> = ({
   id,
   collectionConfig,
   globalConfig,
   isTrashed,
   versionToCreatedAtFormatted,
   versionToID,
-  versionToUseAsTitle,
 }) => {
   const { config } = useConfig()
   const { setStepNav } = useStepNav()
   const { i18n, t } = useTranslation()
   const locale = useLocale()
+  const { title } = useDocumentTitle()
 
   useEffect(() => {
     const {
@@ -38,24 +37,7 @@ export const SetStepNav: React.FC<{
     if (collectionConfig) {
       const collectionSlug = collectionConfig.slug
 
-      const useAsTitle = collectionConfig.admin?.useAsTitle || 'id'
       const pluralLabel = collectionConfig.labels?.plural
-      let docLabel = `[${t('general:untitled')}]`
-
-      const fields = collectionConfig.fields
-
-      const titleField = fields.find(
-        (f) => fieldAffectsData(f) && 'name' in f && f.name === useAsTitle,
-      )
-
-      if (titleField && versionToUseAsTitle) {
-        docLabel =
-          'localized' in titleField && titleField.localized
-            ? versionToUseAsTitle?.[locale.code] || docLabel
-            : versionToUseAsTitle
-      } else if (useAsTitle === 'id') {
-        docLabel = String(id)
-      }
 
       const docBasePath: `/${string}` = isTrashed
         ? `/collections/${collectionSlug}/trash/${id}`
@@ -83,7 +65,7 @@ export const SetStepNav: React.FC<{
 
       nav.push(
         {
-          label: docLabel,
+          label: title,
           url: formatAdminURL({
             adminRoute,
             path: docBasePath,
@@ -139,7 +121,7 @@ export const SetStepNav: React.FC<{
     i18n,
     collectionConfig,
     globalConfig,
-    versionToUseAsTitle,
+    title,
     versionToCreatedAtFormatted,
     versionToID,
   ])

packages/next/src/views/Version/Default/index.tsx

@@ -40,7 +40,6 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
   VersionToCreatedAtLabel,
   versionToID,
   versionToStatus,
-  versionToUseAsTitle,
 }) => {
   const { config, getEntityConfig } = useConfig()
   const { code } = useLocale()
@@ -275,7 +274,6 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
         isTrashed={isTrashed}
         versionToCreatedAtFormatted={versionToCreatedAtFormatted}
         versionToID={versionToID}
-        versionToUseAsTitle={versionToUseAsTitle}
       />
       <Gutter className={`${baseClass}__diff-wrap`}>
         <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>

packages/next/src/views/Version/Default/types.ts

@@ -21,5 +21,4 @@ export type DefaultVersionsViewProps = {
   VersionToCreatedAtLabel: React.ReactNode
   versionToID?: string
   versionToStatus?: string
-  versionToUseAsTitle?: string
 }

packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/generateLabelFromValue.ts

@@ -1,6 +1,11 @@
 import type { PayloadRequest, RelationshipField, TypeWithID } from 'payload'
 
-import { fieldAffectsData, fieldIsPresentationalOnly, fieldShouldBeLocalized } from 'payload/shared'
+import {
+  fieldAffectsData,
+  fieldIsPresentationalOnly,
+  fieldShouldBeLocalized,
+  flattenTopLevelFields,
+} from 'payload/shared'
 
 import type { PopulatedRelationshipValue } from './index.js'
 
@@ -32,7 +37,12 @@ export const generateLabelFromValue = ({
   const relatedCollection = req.payload.collections[relationTo].config
 
   const useAsTitle = relatedCollection?.admin?.useAsTitle
-  const useAsTitleField = relatedCollection.fields.find(
+
+  const flattenedRelatedCollectionFields = flattenTopLevelFields(relatedCollection.fields, {
+    moveSubFieldsToTop: true,
+  })
+
+  const useAsTitleField = flattenedRelatedCollectionFields.find(
     (f) => fieldAffectsData(f) && !fieldIsPresentationalOnly(f) && f.name === useAsTitle,
   )
   let titleFieldIsLocalized = false

packages/next/src/views/Version/index.tsx

@@ -411,11 +411,6 @@ export async function VersionView(props: DocumentViewServerProps) {
     })
   }
 
-  const useAsTitleFieldName = collectionConfig?.admin?.useAsTitle || 'id'
-  const versionToUseAsTitle =
-    useAsTitleFieldName === 'id'
-      ? String(versionTo.parent)
-      : versionTo.version?.[useAsTitleFieldName]
   return (
     <DefaultVersionView
       canUpdate={docPermissions?.update}
@@ -430,7 +425,6 @@ export async function VersionView(props: DocumentViewServerProps) {
       VersionToCreatedAtLabel={formatPill({ doc: versionTo, labelStyle: 'pill' })}
       versionToID={versionTo.id}
       versionToStatus={versionTo.version?._status}
-      versionToUseAsTitle={versionToUseAsTitle}
     />
   )
 }

test/versions/collections/Drafts.ts

@@ -55,12 +55,17 @@ const DraftPosts: CollectionConfig = {
   },
   fields: [
     {
-      name: 'title',
-      type: 'text',
-      label: 'Title',
-      localized: true,
-      required: true,
-      unique: true,
+      type: 'group',
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+          label: 'Title',
+          localized: true,
+          required: true,
+          unique: true,
+        },
+      ],
     },
     {
       name: 'description',

test/versions/e2e.spec.ts

@@ -236,7 +236,7 @@ describe('Versions', () => {
       const row2 = page.locator('tbody .row-2')
       const versionID = await row2.locator('.cell-id').textContent()
       await page.goto(`${savedDocURL}/versions/${versionID}`)
-      await expect(page.locator('.render-field-diffs')).toBeVisible()
+      await expect(page.locator('.render-field-diffs').first()).toBeVisible()
       await page.locator('.restore-version__restore-as-draft-button').click()
       await page.locator('button:has-text("Confirm")').click()
       await page.waitForURL(savedDocURL)
@@ -259,7 +259,7 @@ describe('Versions', () => {
       const row2 = page.locator('tbody .row-2')
       const versionID = await row2.locator('.cell-id').textContent()
       await page.goto(`${savedDocURL}/versions/${versionID}`)
-      await expect(page.locator('.render-field-diffs')).toBeVisible()
+      await expect(page.locator('.render-field-diffs').first()).toBeVisible()
       await page.locator('.restore-version .popup__trigger-wrap button').click()
       await page.getByRole('button', { name: 'Restore as draft' }).click()
       await page.locator('button:has-text("Confirm")').click()
@@ -1482,6 +1482,7 @@ describe('Versions', () => {
   describe('Versions diff view', () => {
     let postID: string
     let versionID: string
+    let oldVersionID: string
     let diffID: string
     let versionDiffID: string
 
@@ -1507,7 +1508,7 @@ describe('Versions', () => {
         draft: true,
         depth: 0,
         data: {
-          title: 'draft post',
+          title: 'current draft post title',
           description: 'draft description',
           blocksField: [
             {
@@ -1521,14 +1522,15 @@ describe('Versions', () => {
 
       const versions = await payload.findVersions({
         collection: draftCollectionSlug,
-        limit: 1,
+        limit: 2,
         depth: 0,
         where: {
           parent: { equals: postID },
         },
       })
 
       versionID = versions.docs[0].id
+      oldVersionID = versions.docs[1].id
 
       const diffDoc = (
         await payload.find({
@@ -1554,7 +1556,7 @@ describe('Versions', () => {
       versionDiffID = versionDiff.id
     })
 
-    async function navigateToDraftVersionView() {
+    async function navigateToDraftVersionView(versionID: string) {
       const versionURL = `${serverURL}/admin/collections/${draftCollectionSlug}/${postID}/versions/${versionID}`
       await page.goto(versionURL)
       await expect(page.locator('.render-field-diffs').first()).toBeVisible()
@@ -1567,12 +1569,22 @@ describe('Versions', () => {
     }
 
     test('should render diff', async () => {
-      await navigateToDraftVersionView()
+      await navigateToDraftVersionView(versionID)
       expect(true).toBe(true)
     })
 
+    test('should show the current version title in step nav for all versions', async () => {
+      await navigateToDraftVersionView(versionID)
+      // Document title part of the step nav should be the current version title
+      await expect(page.locator('.step-nav')).toContainText('current draft post title')
+
+      await navigateToDraftVersionView(oldVersionID)
+      // Document title part of the step nav should still be the current version title
+      await expect(page.locator('.step-nav')).toContainText('current draft post title')
+    })
+
     test('should render diff for nested fields', async () => {
-      await navigateToDraftVersionView()
+      await navigateToDraftVersionView(versionID)
 
       const blocksDiffLabel = page.getByText('Blocks Field', { exact: true })
       await expect(blocksDiffLabel).toBeVisible()
@@ -1591,7 +1603,7 @@ describe('Versions', () => {
     })
 
     test('should render diff collapser for nested fields', async () => {
-      await navigateToDraftVersionView()
+      await navigateToDraftVersionView(versionID)
 
       const blocksDiffLabel = page.getByText('Blocks Field', { exact: true })
       await expect(blocksDiffLabel).toBeVisible()

test/versions/int.spec.ts

@@ -752,7 +752,7 @@ describe('Versions', () => {
 
         expect(updateManyResult.docs).toHaveLength(0)
         expect(updateManyResult.errors).toStrictEqual([
-          { id: doc.id, message: 'The following field is invalid: Title' },
+          { id: doc.id, message: 'The following field is invalid: Group > Title' },
         ])
       })