fix(ui): bulk upload redirecting to relationship documents when added (#13001)

Fixes #12786

Author: JarrodMFlesch

packages/ui/src/elements/BulkUpload/index.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import { toast } from 'sonner'
 
 import { useConfig } from '../../providers/Config/index.js'
+import { EditDepthProvider } from '../../providers/EditDepth/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { UploadControlsProvider } from '../../providers/UploadControls/index.js'
 import { Drawer, useDrawerDepth } from '../Drawer/index.js'
@@ -77,7 +78,9 @@ export function BulkUploadDrawer() {
     <Drawer gutter={false} Header={null} slug={drawerSlug}>
       <FormsManagerProvider>
         <UploadControlsProvider>
-          <DrawerContent />
+          <EditDepthProvider>
+            <DrawerContent />
+          </EditDepthProvider>
         </UploadControlsProvider>
       </FormsManagerProvider>
     </Drawer>

test/uploads/collections/BulkUploads/index.ts

@@ -0,0 +1,23 @@
+import type { CollectionConfig } from 'payload'
+
+import { bulkUploadsSlug } from '../../shared.js'
+
+export const BulkUploadsCollection: CollectionConfig = {
+  slug: bulkUploadsSlug,
+  upload: true,
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      type: 'text',
+      name: 'title',
+      required: true,
+    },
+    {
+      name: 'relationship',
+      type: 'relationship',
+      relationTo: ['simple-relationship'],
+    },
+  ],
+}

test/uploads/collections/SimpleRelationship/index.ts

@@ -0,0 +1,14 @@
+import type { CollectionConfig } from 'payload'
+
+export const SimpleRelationshipCollection: CollectionConfig = {
+  slug: 'simple-relationship',
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      type: 'text',
+      name: 'title',
+    },
+  ],
+}

test/uploads/config.ts

@@ -11,7 +11,9 @@ import { AdminThumbnailFunction } from './collections/AdminThumbnailFunction/ind
 import { AdminThumbnailSize } from './collections/AdminThumbnailSize/index.js'
 import { AdminThumbnailWithSearchQueries } from './collections/AdminThumbnailWithSearchQueries/index.js'
 import { AdminUploadControl } from './collections/AdminUploadControl/index.js'
+import { BulkUploadsCollection } from './collections/BulkUploads/index.js'
 import { CustomUploadFieldCollection } from './collections/CustomUploadField/index.js'
+import { SimpleRelationshipCollection } from './collections/SimpleRelationship/index.js'
 import { Uploads1 } from './collections/Upload1/index.js'
 import { Uploads2 } from './collections/Upload2/index.js'
 import {
@@ -880,6 +882,8 @@ export default buildConfigWithDefaults({
         staticDir: path.resolve(dirname, './media'),
       },
     },
+    BulkUploadsCollection,
+    SimpleRelationshipCollection,
   ],
   onInit: async (payload) => {
     const uploadsDir = path.resolve(dirname, './media')

test/uploads/e2e.spec.ts

@@ -28,6 +28,7 @@ import {
   adminUploadControlSlug,
   animatedTypeMedia,
   audioSlug,
+  bulkUploadsSlug,
   constructorOptionsSlug,
   customFileNameMediaSlug,
   customUploadFieldSlug,
@@ -82,6 +83,7 @@ let constructorOptionsURL: AdminUrlUtil
 let consoleErrorsFromPage: string[] = []
 let collectErrorsFromPage: () => boolean
 let stopCollectingErrorsFromPage: () => boolean
+let bulkUploadsURL: AdminUrlUtil
 
 describe('Uploads', () => {
   let page: Page
@@ -119,6 +121,7 @@ describe('Uploads', () => {
     withoutEnlargementResizeOptionsURL = new AdminUrlUtil(serverURL, withoutEnlargeSlug)
     threeDimensionalURL = new AdminUrlUtil(serverURL, threeDimensionalSlug)
     constructorOptionsURL = new AdminUrlUtil(serverURL, constructorOptionsSlug)
+    bulkUploadsURL = new AdminUrlUtil(serverURL, bulkUploadsSlug)
 
     const context = await browser.newContext()
     page = await context.newPage()
@@ -1193,6 +1196,26 @@ describe('Uploads', () => {
       // ensure the prefix field is still filled with the original value
       await expect(page.locator('#field-prefix')).toHaveValue('should-preserve')
     })
+
+    test('should not redirect to created relationship document inside the bulk upload drawer', async () => {
+      await page.goto(bulkUploadsURL.list)
+      await page.locator('.list-header__title-actions button', { hasText: 'Bulk Upload' }).click()
+      await page.setInputFiles('.dropzone input[type="file"]', path.resolve(dirname, './image.png'))
+
+      await page.locator('#field-title').fill('Upload title 1')
+      const bulkUploadForm = page.locator('.bulk-upload--file-manager')
+      const relationshipField = bulkUploadForm.locator('#field-relationship')
+      await relationshipField.locator('.relationship-add-new__add-button').click()
+
+      const collectionForm = page.locator('.collection-edit')
+      await collectionForm.locator('#field-title').fill('Related Document Title')
+      await saveDocAndAssert(page)
+      await collectionForm.locator('.doc-drawer__header-close').click()
+
+      await expect(bulkUploadForm.locator('.relationship--single-value__text')).toHaveText(
+        'Related Document Title',
+      )
+    })
   })
 
   describe('remote url fetching', () => {

test/uploads/payload-types.ts

@@ -111,6 +111,8 @@ export interface Config {
     'list-view-preview': ListViewPreview;
     'three-dimensional': ThreeDimensional;
     'constructor-options': ConstructorOption;
+    'bulk-uploads': BulkUpload;
+    'simple-relationship': SimpleRelationship;
     users: User;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -162,6 +164,8 @@ export interface Config {
     'list-view-preview': ListViewPreviewSelect<false> | ListViewPreviewSelect<true>;
     'three-dimensional': ThreeDimensionalSelect<false> | ThreeDimensionalSelect<true>;
     'constructor-options': ConstructorOptionsSelect<false> | ConstructorOptionsSelect<true>;
+    'bulk-uploads': BulkUploadsSelect<false> | BulkUploadsSelect<true>;
+    'simple-relationship': SimpleRelationshipSelect<false> | SimpleRelationshipSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -1465,6 +1469,39 @@ export interface ConstructorOption {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "bulk-uploads".
+ */
+export interface BulkUpload {
+  id: string;
+  title: string;
+  relationship?: {
+    relationTo: 'simple-relationship';
+    value: string | SimpleRelationship;
+  } | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "simple-relationship".
+ */
+export interface SimpleRelationship {
+  id: string;
+  title?: string | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -1672,6 +1709,14 @@ export interface PayloadLockedDocument {
         relationTo: 'constructor-options';
         value: string | ConstructorOption;
       } | null)
+    | ({
+        relationTo: 'bulk-uploads';
+        value: string | BulkUpload;
+      } | null)
+    | ({
+        relationTo: 'simple-relationship';
+        value: string | SimpleRelationship;
+      } | null)
     | ({
         relationTo: 'users';
         value: string | User;
@@ -3065,6 +3110,34 @@ export interface ConstructorOptionsSelect<T extends boolean = true> {
   focalX?: T;
   focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "bulk-uploads_select".
+ */
+export interface BulkUploadsSelect<T extends boolean = true> {
+  title?: T;
+  relationship?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "simple-relationship_select".
+ */
+export interface SimpleRelationshipSelect<T extends boolean = true> {
+  title?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".

test/uploads/shared.ts

@@ -31,3 +31,4 @@ export const skipAllowListSafeFetchMediaSlug = 'skip-allow-list-safe-fetch-media
 export const listViewPreviewSlug = 'list-view-preview'
 export const threeDimensionalSlug = 'three-dimensional'
 export const constructorOptionsSlug = 'constructor-options'
+export const bulkUploadsSlug = 'bulk-uploads'