feat(ui): expose refresh method to list drawer context (#13173)

test/admin/collections/CustomListDrawer/Component.tsx

@@ -0,0 +1,60 @@
+'use client'
+import { toast, useListDrawer, useListDrawerContext, useTranslation } from '@payloadcms/ui'
+import React, { useCallback } from 'react'
+
+export const CustomListDrawer = () => {
+  const [isCreating, setIsCreating] = React.useState(false)
+
+  // this is the _outer_ drawer context (if any), not the one for the list drawer below
+  const { refresh } = useListDrawerContext()
+  const { t } = useTranslation()
+
+  const [ListDrawer, ListDrawerToggler] = useListDrawer({
+    collectionSlugs: ['custom-list-drawer'],
+  })
+
+  const createDoc = useCallback(async () => {
+    if (isCreating) {
+      return
+    }
+
+    setIsCreating(true)
+
+    try {
+      await fetch('/api/custom-list-drawer', {
+        body: JSON.stringify({}),
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      })
+
+      setIsCreating(false)
+
+      toast.success(
+        t('general:successfullyCreated', {
+          label: 'Custom List Drawer',
+        }),
+      )
+
+      // In the root document view, there is no outer drawer context, so this will be `undefined`
+      if (typeof refresh === 'function') {
+        await refresh()
+      }
+    } catch (_err) {
+      console.error('Error creating document:', _err) // eslint-disable-line no-console
+      setIsCreating(false)
+    }
+  }, [isCreating, refresh, t])
+
+  return (
+    <div>
+      <button id="create-custom-list-drawer-doc" onClick={createDoc} type="button">
+        {isCreating ? 'Creating...' : 'Create Document'}
+      </button>
+      <ListDrawer />
+      <ListDrawerToggler id="open-custom-list-drawer">Open list drawer</ListDrawerToggler>
+    </div>
+  )
+}

test/admin/collections/CustomListDrawer/index.ts

@@ -0,0 +1,16 @@
+import type { CollectionConfig } from 'payload'
+
+export const CustomListDrawer: CollectionConfig = {
+  slug: 'custom-list-drawer',
+  fields: [
+    {
+      name: 'customListDrawer',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: '/collections/CustomListDrawer/Component.js#CustomListDrawer',
+        },
+      },
+    },
+  ],
+}

test/admin/config.ts

@@ -5,6 +5,7 @@ import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { Array } from './collections/Array.js'
 import { BaseListFilter } from './collections/BaseListFilter.js'
 import { CustomFields } from './collections/CustomFields/index.js'
+import { CustomListDrawer } from './collections/CustomListDrawer/index.js'
 import { CustomViews1 } from './collections/CustomViews1.js'
 import { CustomViews2 } from './collections/CustomViews2.js'
 import { DisableBulkEdit } from './collections/DisableBulkEdit.js'
@@ -185,6 +186,7 @@ export default buildConfigWithDefaults({
     Placeholder,
     UseAsTitleGroupField,
     DisableBulkEdit,
+    CustomListDrawer,
   ],
   globals: [
     GlobalHidden,

test/admin/e2e/list-view/e2e.spec.ts

@@ -1676,6 +1676,42 @@ describe('List View', () => {
 
     await expect(page.locator('.list-selection')).toContainText('2 selected')
   })
+
+  test('should refresh custom list drawer using the refresh method from context', async () => {
+    const url = new AdminUrlUtil(serverURL, 'custom-list-drawer')
+
+    await payload.delete({
+      collection: 'custom-list-drawer',
+      where: { id: { exists: true } },
+    })
+
+    const { id } = await payload.create({
+      collection: 'custom-list-drawer',
+      data: {},
+    })
+
+    await page.goto(url.list)
+
+    await expect(page.locator('.table > table > tbody > tr')).toHaveCount(1)
+
+    await page.goto(url.edit(id))
+
+    await page.locator('#open-custom-list-drawer').click()
+    const drawer = page.locator('[id^=list-drawer_1_]')
+    await expect(drawer).toBeVisible()
+
+    await expect(drawer.locator('.table > table > tbody > tr')).toHaveCount(1)
+
+    await drawer.locator('.list-header__create-new-button.doc-drawer__toggler').click()
+    const createNewDrawer = page.locator('[id^=doc-drawer_custom-list-drawer_1_]')
+    await createNewDrawer.locator('#create-custom-list-drawer-doc').click()
+
+    await expect(page.locator('.payload-toast-container')).toContainText('successfully')
+
+    await createNewDrawer.locator('.doc-drawer__header-close').click()
+
+    await expect(drawer.locator('.table > table > tbody > tr')).toHaveCount(2)
+  })
 })
 
 async function createPost(overrides?: Partial<Post>): Promise<Post> {

test/admin/payload-types.ts

@@ -93,6 +93,7 @@ export interface Config {
     placeholder: Placeholder;
     'use-as-title-group-field': UseAsTitleGroupField;
     'disable-bulk-edit': DisableBulkEdit;
+    'custom-list-drawer': CustomListDrawer;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
@@ -125,6 +126,7 @@ export interface Config {
     placeholder: PlaceholderSelect<false> | PlaceholderSelect<true>;
     'use-as-title-group-field': UseAsTitleGroupFieldSelect<false> | UseAsTitleGroupFieldSelect<true>;
     'disable-bulk-edit': DisableBulkEditSelect<false> | DisableBulkEditSelect<true>;
+    'custom-list-drawer': CustomListDrawerSelect<false> | CustomListDrawerSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
     'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
@@ -565,6 +567,15 @@ export interface DisableBulkEdit {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-list-drawer".
+ */
+export interface CustomListDrawer {
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents".
@@ -675,6 +686,10 @@ export interface PayloadLockedDocument {
     | ({
         relationTo: 'disable-bulk-edit';
         value: string | DisableBulkEdit;
+      } | null)
+    | ({
+        relationTo: 'custom-list-drawer';
+        value: string | CustomListDrawer;
       } | null);
   globalSlug?: string | null;
   user: {
@@ -1074,6 +1089,14 @@ export interface DisableBulkEditSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "custom-list-drawer_select".
+ */
+export interface CustomListDrawerSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-locked-documents_select".