diff --git a/packages/ui/src/elements/CreateDocumentButton/index.tsx b/packages/ui/src/elements/CreateDocumentButton/index.tsx index 05d010f7e82..a926bb5e5b5 100644 --- a/packages/ui/src/elements/CreateDocumentButton/index.tsx +++ b/packages/ui/src/elements/CreateDocumentButton/index.tsx @@ -2,6 +2,7 @@ import { useModal } from '@faceless-ui/modal' import { getTranslation } from '@payloadcms/translations' +import { hasAutosaveEnabled } from 'payload/shared' import React, { useState } from 'react' import type { Props as ButtonProps } from '../Button/types.js' @@ -70,7 +71,10 @@ export function CreateDocumentButton({ } const handleSave: DocumentDrawerContextProps['onSave'] = (args) => { - closeModal(drawerSlug) + if (!hasAutosaveEnabled(args.collectionConfig)) { + closeModal(drawerSlug) + } + return onSave?.(args) } diff --git a/test/hierarchy/config.ts b/test/hierarchy/config.ts index 50448fc1f2e..0cca0294cb5 100644 --- a/test/hierarchy/config.ts +++ b/test/hierarchy/config.ts @@ -181,7 +181,11 @@ export const Organizations: CollectionConfig = { parentFieldName: 'parent', }, versions: { - drafts: true, + drafts: { + autosave: { + interval: 1000, + }, + }, }, } diff --git a/test/hierarchy/e2e.spec.ts b/test/hierarchy/e2e.spec.ts index 00cac58d172..19908572669 100644 --- a/test/hierarchy/e2e.spec.ts +++ b/test/hierarchy/e2e.spec.ts @@ -429,6 +429,68 @@ test.describe('Hierarchy Sidebar', () => { } }) + test.describe('Autosave create drawer', () => { + let organizationTitle: string + + test.afterEach(async () => { + const createdOrganizations = await payload.find({ + collection: 'organizations', + draft: true, + where: { title: { equals: organizationTitle } }, + }) + + for (const organization of createdOrganizations.docs) { + await payload.delete({ id: organization.id, collection: 'organizations' }) + } + }) + + test('should keep autosave drawer open when creating an allowed document in a folder hierarchy', async () => { + test.setTimeout(TEST_TIMEOUT_LONG) + organizationTitle = `Autosave Organization ${Date.now()}` + + const multiTypeFolders = await payload.find({ + collection: 'folders', + limit: 1, + where: { name: { equals: 'Orgs and Products' } }, + }) + const multiTypeFolder = multiTypeFolders.docs[0] + + await page.goto(organizationsURL.list) + await page.goto(`${foldersURL.hierarchy}?parentFolder=${multiTypeFolder.id}`) + + const listControls = page.locator('.hierarchy-list__controls') + await listControls.getByRole('button', { name: 'Create New' }).first().click() + + await expect(page.getByRole('button', { name: 'Organization', exact: true })).toBeVisible() + await expect(page.getByRole('button', { name: 'Product', exact: true })).toBeVisible() + await page.getByRole('button', { name: 'Organization', exact: true }).click() + + const drawer = page.locator('#hierarchy-create-folders') + const titleInput = drawer.locator('#field-title') + + await expect(drawer).toBeVisible() + await titleInput.fill(organizationTitle) + + await expect + .poll(async () => { + const autosavedOrganizations = await payload.find({ + collection: 'organizations', + depth: 0, + draft: true, + where: { title: { equals: organizationTitle } }, + }) + + return autosavedOrganizations.docs[0]?.parentFolder + }) + .toBe(multiTypeFolder.id) + + await expect(drawer).toBeVisible() + await expect(titleInput).toHaveValue(organizationTitle) + await drawer.locator('.doc-drawer__header-close').click() + await expect(drawer).toBeHidden() + }) + }) + test('should show filter button when collectionSpecific is configured', async () => { await page.goto(foldersURL.list) await openNav(page)