feat(ui): add option to open related documents in a new tab (#11939)

### What?
Selected documents in a relationship field can be opened in a new tab.

### Why?
Related documents can be edited using the edit icon which opens the
document in a drawer. Sometimes users would like to open the document in
a new tab instead to e.g. modify the related document at a later point
in time. This currently requires users to find the related document via
the list view and open it there. There is no easy way to find and open a
related document.

### How?
Adds custom handling to the relationship edit button to support opening
it in a new tab via middle-click, Ctrl+click, or right-click → 'Open in
new tab'.

---------

Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>

test/fields/collections/Relationship/e2e.spec.ts

@@ -358,6 +358,46 @@ describe('relationship', () => {
     ).toHaveText(`${value}123456`)
   })
 
+  test('should open related document in a new tab when meta key is applied', async () => {
+    await page.goto(url.create)
+
+    const [newPage] = await Promise.all([
+      page.context().waitForEvent('page'),
+      await openDocDrawer({
+        page,
+        selector:
+          '#field-relationWithAllowCreateToFalse .relationship--single-value__drawer-toggler',
+        withMetaKey: true,
+      }),
+    ])
+
+    // Wait for navigation to complete in the new tab and ensure the edit view is open
+    await expect(newPage.locator('.collection-edit')).toBeVisible()
+  })
+
+  test('multi value relationship should open document in a new tab', async () => {
+    await page.goto(url.create)
+
+    // Select "Seeded text document" relationship
+    await page.locator('#field-relationshipHasMany .rs__control').click()
+    await page.locator('.rs__option:has-text("Seeded text document")').click()
+    await expect(
+      page.locator('#field-relationshipHasMany .relationship--multi-value-label__drawer-toggler'),
+    ).toBeVisible()
+
+    const [newPage] = await Promise.all([
+      page.context().waitForEvent('page'),
+      await openDocDrawer({
+        page,
+        selector: '#field-relationshipHasMany .relationship--multi-value-label__drawer-toggler',
+        withMetaKey: true,
+      }),
+    ])
+
+    // Wait for navigation to complete in the new tab and ensure the edit view is open
+    await expect(newPage.locator('.collection-edit')).toBeVisible()
+  })
+
   // Drawers opened through the edit button are prone to issues due to the use of stopPropagation for certain
   // events - specifically for drawers opened through the edit button. This test is to ensure that drawers
   // opened through the edit button can be saved using the hotkey.

test/helpers/e2e/toggleDocDrawer.ts

@@ -6,12 +6,18 @@ import { wait } from 'payload/shared'
 export async function openDocDrawer({
   page,
   selector,
+  withMetaKey = false,
 }: {
   page: Page
   selector: string
+  withMetaKey?: boolean
 }): Promise<void> {
+  let clickProperties = {}
+  if (withMetaKey) {
+    clickProperties = { modifiers: ['ControlOrMeta'] }
+  }
   await wait(500) // wait for parent form state to initialize
-  await page.locator(selector).click()
+  await page.locator(selector).click(clickProperties)
   await wait(500) // wait for drawer form state to initialize
 }