fix: Add Context Provider in EditMany Component (#5005)

* fix: Add Context Provider in EditMany Component * test: Fix e2e test error
payloadcms · Feb 21, 2024 · 70e57fe · 70e57fe
1 parent 0a07f60
commit 70e57fe
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 40 deletions.
diff --git a/packages/payload/src/admin/components/elements/EditMany/index.tsx b/packages/payload/src/admin/components/elements/EditMany/index.tsx
@@ -13,6 +13,7 @@ import { fieldTypes } from '../../forms/field-types'
 import X from '../../icons/X'
 import { useAuth } from '../../utilities/Auth'
 import { useConfig } from '../../utilities/Config'
+import { DocumentInfoProvider } from '../../utilities/DocumentInfo'
 import { OperationContext } from '../../utilities/OperationProvider'
 import { SelectAllStatus, useSelection } from '../../views/collections/List/SelectionProvider'
 import { Drawer, DrawerToggler } from '../Drawer'
@@ -120,53 +121,55 @@ const EditMany: React.FC<Props> = (props) => {
         {t('edit')}
       </DrawerToggler>
       <Drawer header={null} slug={drawerSlug}>
-        <OperationContext.Provider value="update">
-          <Form className={`${baseClass}__form`} onSuccess={onSuccess}>
-            <div className={`${baseClass}__main`}>
-              <div className={`${baseClass}__header`}>
-                <h2 className={`${baseClass}__header__title`}>
-                  {t('editingLabel', { count, label: getTranslation(plural, i18n) })}
-                </h2>
-                <button
-                  aria-label={t('close')}
-                  className={`${baseClass}__header__close`}
-                  id={`close-drawer__${drawerSlug}`}
-                  onClick={() => closeModal(drawerSlug)}
-                  type="button"
-                >
-                  <X />
-                </button>
-              </div>
-              <FieldSelect fields={fields} setSelected={setSelected} />
-              <RenderFields fieldSchema={selected} fieldTypes={fieldTypes} />
-              <div className={`${baseClass}__sidebar-wrap`}>
-                <div className={`${baseClass}__sidebar`}>
-                  <div className={`${baseClass}__sidebar-sticky-wrap`}>
-                    <div className={`${baseClass}__document-actions`}>
-                      {collection.versions ? (
-                        <React.Fragment>
-                          <Publish
-                            action={`${serverURL}${api}/${slug}${getQueryParams()}`}
-                            disabled={selected.length === 0}
-                          />
-                          <SaveDraft
+        <DocumentInfoProvider collection={collection}>
+          <OperationContext.Provider value="update">
+            <Form className={`${baseClass}__form`} onSuccess={onSuccess}>
+              <div className={`${baseClass}__main`}>
+                <div className={`${baseClass}__header`}>
+                  <h2 className={`${baseClass}__header__title`}>
+                    {t('editingLabel', { count, label: getTranslation(plural, i18n) })}
+                  </h2>
+                  <button
+                    aria-label={t('close')}
+                    className={`${baseClass}__header__close`}
+                    id={`close-drawer__${drawerSlug}`}
+                    onClick={() => closeModal(drawerSlug)}
+                    type="button"
+                  >
+                    <X />
+                  </button>
+                </div>
+                <FieldSelect fields={fields} setSelected={setSelected} />
+                <RenderFields fieldSchema={selected} fieldTypes={fieldTypes} />
+                <div className={`${baseClass}__sidebar-wrap`}>
+                  <div className={`${baseClass}__sidebar`}>
+                    <div className={`${baseClass}__sidebar-sticky-wrap`}>
+                      <div className={`${baseClass}__document-actions`}>
+                        {collection.versions ? (
+                          <React.Fragment>
+                            <Publish
+                              action={`${serverURL}${api}/${slug}${getQueryParams()}`}
+                              disabled={selected.length === 0}
+                            />
+                            <SaveDraft
+                              action={`${serverURL}${api}/${slug}${getQueryParams()}`}
+                              disabled={selected.length === 0}
+                            />
+                          </React.Fragment>
+                        ) : (
+                          <Submit
                             action={`${serverURL}${api}/${slug}${getQueryParams()}`}
                             disabled={selected.length === 0}
                           />
-                        </React.Fragment>
-                      ) : (
-                        <Submit
-                          action={`${serverURL}${api}/${slug}${getQueryParams()}`}
-                          disabled={selected.length === 0}
-                        />
-                      )}
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </Form>
-        </OperationContext.Provider>
+            </Form>
+          </OperationContext.Provider>
+        </DocumentInfoProvider>
       </Drawer>
     </div>
   )

diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
@@ -814,6 +814,95 @@ describe('fields', () => {
         ).toHaveValue(`${assertGroupText3} duplicate`)
       })
     })
+    test('should bulk update', async () => {
+      await Promise.all([
+        payload.create({
+          collection: 'array-fields',
+          data: {
+            title: 'for test 1',
+            items: [
+              {
+                text: 'test 1',
+              },
+              {
+                text: 'test 2',
+              },
+            ],
+          },
+        }),
+        payload.create({
+          collection: 'array-fields',
+          data: {
+            title: 'for test 2',
+            items: [
+              {
+                text: 'test 3',
+              },
+            ],
+          },
+        }),
+        payload.create({
+          collection: 'array-fields',
+          data: {
+            title: 'for test 3',
+            items: [
+              {
+                text: 'test 4',
+              },
+              {
+                text: 'test 5',
+              },
+              {
+                text: 'test 6',
+              },
+            ],
+          },
+        }),
+      ])
+
+      const bulkText = 'Bulk update text'
+      await page.goto(url.list)
+      await page.waitForSelector('.table > table > tbody > tr td.cell-title')
+      const rows = page.locator('.table > table > tbody > tr', {
+        has: page.locator('td.cell-title span', {
+          hasText: 'for test',
+        }),
+      })
+      const count = await rows.count()
+
+      for (let i = 0; i < count; i++) {
+        await rows
+          .nth(i)
+          .locator('td.cell-_select .checkbox-input__input > input[type="checkbox"]')
+          .check()
+      }
+      await page.locator('.edit-many__toggle').click()
+      await page.locator('.field-select .rs__control').click()
+
+      const arrayOption = page.locator('.rs__option', {
+        hasText: exactText('Items'),
+      })
+
+      await expect(arrayOption).toBeVisible()
+
+      await arrayOption.click()
+      const addRowButton = page.locator('#field-items > .btn.array-field__add-row')
+
+      await expect(addRowButton).toBeVisible()
+
+      await addRowButton.click()
+
+      const targetInput = page.locator('#field-items__0__text')
+
+      await expect(targetInput).toBeVisible()
+
+      await targetInput.fill(bulkText)
+
+      await page.locator('.form-submit button[type="submit"].edit-many__publish').click()
+      await expect(page.locator('.Toastify__toast--success')).toContainText(
+        'Updated 3 Array Fields successfully.',
+      )
+    })
   })
 
   describe('tabs', () => {