diff --git a/docs/tech-debt.md b/docs/tech-debt.md
index d4cd737a..3e4f31e8 100644
--- a/docs/tech-debt.md
+++ b/docs/tech-debt.md
@@ -367,20 +367,27 @@ The same selector shape affects user-visible save side effects. `didPostSaveRequ
select( editorStore ).getEditorSettings().styles,
[]
@@ -1769,6 +1783,7 @@ export default function EditorBody( {
postId={ postId }
postType={ postType }
onRestored={ onRestored }
+ receiveEntityRecords={ receiveRestoredRecords }
/>
) }
{ isReadOnly ? (
diff --git a/src/components/RowEditor.js b/src/components/RowEditor.js
index 73bf8f3b..6b632810 100644
--- a/src/components/RowEditor.js
+++ b/src/components/RowEditor.js
@@ -5,6 +5,7 @@
// (toolbar, modal frame, navigation buttons) lives in RowDetailView and
// renders synchronously; only this inner stack suspends on first row open.
import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
import { EditorProvider, store as editorStore } from '@wordpress/editor';
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
import { SlotFillProvider } from '@wordpress/components';
@@ -124,6 +125,7 @@ function DetailPaneContent( {
row,
rowId,
shouldAcquirePostLock,
+ receiveEntityRecords,
} ) {
const postLock = usePostLock( {
postId: row?.id ?? rowId,
@@ -181,6 +183,7 @@ function DetailPaneContent( {
extraStyles={ ROW_DETAIL_EXTRA_STYLES }
onReady={ handleReady }
onRestored={ onRestored }
+ receiveEntityRecords={ receiveEntityRecords }
/>
} Created row record.
+ */
+export function createRowDocument(
+ saveEntityRecord,
+ { collectionId, title = '', meta }
+) {
+ const payload = {
+ status: 'private',
+ title,
+ cortext_trait: collectionId,
+ ...( meta && Object.keys( meta ).length ? { meta } : {} ),
+ };
+
+ return saveEntityRecord( 'postType', DOCUMENT_POST_TYPE, payload, {
+ throwOnError: true,
+ } );
+}
+
+/**
+ * Returns a row creator bound to core-data.
+ *
+ * @return {Function} Row creation callback.
+ */
+export function useCreateRowDocument() {
+ const { saveEntityRecord } = useDispatch( 'core' );
+
+ return useCallback(
+ ( input ) => createRowDocument( saveEntityRecord, input ),
+ [ saveEntityRecord ]
+ );
+}
diff --git a/src/components/rowDocumentMutations.js b/src/components/rowDocumentMutations.js
index 13aef2e1..cda6f226 100644
--- a/src/components/rowDocumentMutations.js
+++ b/src/components/rowDocumentMutations.js
@@ -1,5 +1,4 @@
-import apiFetch from '@wordpress/api-fetch';
-
+import { DOCUMENT_POST_TYPE } from '../collections';
import { TITLE_FIELD_ID } from './dataViewColumns';
export function rowDocumentFieldPayload( fieldId, value ) {
@@ -10,10 +9,19 @@ export function rowDocumentFieldPayload( fieldId, value ) {
return { meta: { [ fieldId ]: value } };
}
-export function saveRowDocumentField( rowId, fieldId, value ) {
- return apiFetch( {
- path: `/wp/v2/crtxt_documents/${ rowId }`,
- method: 'POST',
- data: rowDocumentFieldPayload( fieldId, value ),
- } );
+export function saveRowDocumentField(
+ saveEntityRecord,
+ rowId,
+ fieldId,
+ value
+) {
+ return saveEntityRecord(
+ 'postType',
+ DOCUMENT_POST_TYPE,
+ {
+ id: rowId,
+ ...rowDocumentFieldPayload( fieldId, value ),
+ },
+ { throwOnError: true }
+ );
}
diff --git a/src/documents/actions.js b/src/documents/actions.js
index 0c918842..ad0e746e 100644
--- a/src/documents/actions.js
+++ b/src/documents/actions.js
@@ -10,6 +10,11 @@ import { notifyCollectionRowsChanged } from '../hooks/rowInvalidation';
import { notifySidebarTreeChanged } from '../hooks/sidebarTreeInvalidation';
import { cascadeFavorites } from './favorites';
import { afterDocumentTrash, applyInvalidationPack } from './invalidation';
+import {
+ duplicateDocumentRecord,
+ restoreDocumentRecord,
+ trashDocumentRecord,
+} from './mutations';
function collectCascadeIds( record, cascade ) {
const ids = new Set( [ Number( record.id ) ] );
@@ -30,7 +35,8 @@ export async function createDocument( input, ctx ) {
const created = await ctx.saveEntityRecord(
'postType',
DOCUMENT_POST_TYPE,
- payload
+ payload,
+ { throwOnError: true }
);
if ( created?.id ) {
applyInvalidationPack( ctx.invalidateResolution, afterDocumentTrash );
@@ -83,10 +89,10 @@ export async function renameDocument( record, title, ctx ) {
}
export async function duplicateDocument( record, ctx ) {
- const created = await apiFetch( {
- path: `/cortext/v1/documents/${ record.id }/duplicate`,
- method: 'POST',
- } );
+ const created = await duplicateDocumentRecord(
+ record,
+ ctx.receiveEntityRecords
+ );
applyInvalidationPack( ctx.invalidateResolution, afterDocumentTrash );
notifySidebarTreeChanged( {
parentId: Number( created?.parent ?? record.parent ?? 0 ),
@@ -124,14 +130,10 @@ export async function duplicateDocument( record, ctx ) {
// core-data does not drop the open record before the editor finishes its
// block selection writes.
export async function trashDocument( record, ctx ) {
- const deleted = await apiFetch( {
- path: `/wp/v2/crtxt_documents/${ record.id }`,
- method: 'DELETE',
- } );
- const trashed = deleted?.previous ?? deleted;
- if ( trashed?.id ) {
- ctx.receiveEntityRecords( 'postType', DOCUMENT_POST_TYPE, [ trashed ] );
- }
+ const deleted = await trashDocumentRecord(
+ record,
+ ctx.receiveEntityRecords
+ );
applyInvalidationPack( ctx.invalidateResolution, afterDocumentTrash );
notifySidebarTreeChanged();
notifyDocumentTrashChanged();
@@ -148,14 +150,15 @@ export async function trashDocument( record, ctx ) {
}
export async function restoreDocument( record, ctx ) {
- await apiFetch( {
- path: `/cortext/v1/documents/${ record.id }/restore`,
- method: 'POST',
- } );
+ const response = await restoreDocumentRecord(
+ record,
+ ctx.receiveEntityRecords
+ );
applyInvalidationPack( ctx.invalidateResolution, afterDocumentTrash );
notifySidebarTreeChanged();
notifyDocumentTrashChanged();
notifyCollectionRowsChanged();
+ return response;
}
export async function permanentlyDeleteDocument( record, ctx ) {
diff --git a/src/documents/mutations.js b/src/documents/mutations.js
new file mode 100644
index 00000000..433800d0
--- /dev/null
+++ b/src/documents/mutations.js
@@ -0,0 +1,77 @@
+import apiFetch from '@wordpress/api-fetch';
+
+import { DOCUMENT_POST_TYPE } from '../collections';
+
+/**
+ * Adds a canonical REST record to the shared core-data cache. Mutation
+ * envelopes are partial and must stay out of the cache.
+ *
+ * @param {Object|null} record Canonical document record.
+ * @param {Function} receiveEntityRecords core-data dispatcher.
+ * @return {Object|null} Cached record, or null when it was not cached.
+ */
+export function receiveCanonicalDocumentRecord( record, receiveEntityRecords ) {
+ if ( ! record?.id || ! receiveEntityRecords ) {
+ return null;
+ }
+ receiveEntityRecords(
+ 'postType',
+ DOCUMENT_POST_TYPE,
+ [ record ],
+ undefined,
+ true
+ );
+ return record;
+}
+
+/**
+ * Duplicates a document and caches the canonical record from the response.
+ *
+ * @param {Object} record Document to duplicate.
+ * @param {Function} receiveEntityRecords core-data dispatcher.
+ * @return {Promise} Duplicate response.
+ */
+export async function duplicateDocumentRecord( record, receiveEntityRecords ) {
+ const response = await apiFetch( {
+ path: `/cortext/v1/documents/${ record.id }/duplicate`,
+ method: 'POST',
+ } );
+ receiveCanonicalDocumentRecord( response?.post, receiveEntityRecords );
+ return response;
+}
+
+/**
+ * Soft-deletes a document without evicting it from core-data. WordPress returns
+ * the trashed record directly, or under `previous` for a forced delete.
+ *
+ * @param {Object} record Document to trash.
+ * @param {Function} receiveEntityRecords core-data dispatcher.
+ * @return {Promise} Core REST delete response.
+ */
+export async function trashDocumentRecord( record, receiveEntityRecords ) {
+ const response = await apiFetch( {
+ path: `/wp/v2/crtxt_documents/${ record.id }`,
+ method: 'DELETE',
+ } );
+ receiveCanonicalDocumentRecord(
+ response?.previous ?? response,
+ receiveEntityRecords
+ );
+ return response;
+}
+
+/**
+ * Restores a document and caches the canonical record from the response.
+ *
+ * @param {Object} record Document to restore.
+ * @param {Function} receiveEntityRecords core-data dispatcher.
+ * @return {Promise} Restore response.
+ */
+export async function restoreDocumentRecord( record, receiveEntityRecords ) {
+ const response = await apiFetch( {
+ path: `/cortext/v1/documents/${ record.id }/restore`,
+ method: 'POST',
+ } );
+ receiveCanonicalDocumentRecord( response?.post, receiveEntityRecords );
+ return response;
+}
diff --git a/src/router/EntityRoute.js b/src/router/EntityRoute.js
index bed7a209..025ea769 100644
--- a/src/router/EntityRoute.js
+++ b/src/router/EntityRoute.js
@@ -390,17 +390,13 @@ export default function EntityRoute( { history } ) {
);
const isRow = Boolean( editorRowContext );
- const { invalidateResolution, receiveEntityRecords } =
- useDispatch( 'core' );
+ const { invalidateResolution } = useDispatch( 'core' );
// Restore still has two cache paths: pages use core-data for the tree, rows
// use collection-scoped queries. Both refresh the Trash list; rows also
// notify open collections because relations and rollups can change elsewhere.
const onRestoreDocument = useCallback(
- ( postId, postType, response ) => {
- if ( response?.post && postType ) {
- receiveEntityRecords( 'postType', postType, [ response.post ] );
- }
+ ( postId, _postType, response ) => {
// Every document shares one post type, so a restore always re-enters
// the workspace tree and leaves the Trash list.
invalidateResolution( 'getEntityRecords', [
@@ -425,7 +421,7 @@ export default function EntityRoute( { history } ) {
notifyCollectionRowsChanged();
}
},
- [ invalidateResolution, receiveEntityRecords, isRow ]
+ [ invalidateResolution, isRow ]
);
const editorRecentTarget =
diff --git a/tests/e2e/specs/data-view-block.spec.js b/tests/e2e/specs/data-view-block.spec.js
index 225b70f3..b01c408c 100644
--- a/tests/e2e/specs/data-view-block.spec.js
+++ b/tests/e2e/specs/data-view-block.spec.js
@@ -2563,6 +2563,151 @@ test.describe( 'Collection view block', () => {
}
} );
+ test( 'duplicates a row and keeps its field values after reload', async ( {
+ admin,
+ page,
+ requestUtils,
+ } ) => {
+ const fixture = {};
+ const duplicateTitle = 'Copy of The Left Hand of Darkness';
+
+ try {
+ Object.assign(
+ fixture,
+ await createCollectionFixture( requestUtils )
+ );
+
+ fixture.page = await requestUtils.rest( {
+ method: 'POST',
+ path: '/wp/v2/crtxt_documents',
+ data: {
+ title: 'Row duplicate test page',
+ status: 'private',
+ content: createDataViewBlockMarkup( fixture.collection.id ),
+ },
+ } );
+
+ await admin.visitAdminPage(
+ 'admin.php',
+ `page=cortext&p=/${ fixture.page.id }`
+ );
+
+ await page.waitForFunction(
+ ( postId ) =>
+ window.wp?.data
+ ?.select( 'core/editor' )
+ ?.getCurrentPostId?.() === postId,
+ fixture.page.id,
+ { timeout: 15_000 }
+ );
+
+ const canvas = page.frameLocator( '[name="editor-canvas"]' );
+ const table = canvas.locator( '.dataviews-view-table' );
+ const originalRow = table
+ .locator( 'tbody > tr' )
+ .filter( { hasText: 'The Left Hand of Darkness' } );
+
+ await expect( originalRow ).toBeVisible();
+ await originalRow.hover();
+ await originalRow
+ .getByRole( 'button', { name: 'Actions' } )
+ .click( { force: true } );
+ const duplicateResponsePromise = page.waitForResponse(
+ ( response ) =>
+ response.request().method() === 'POST' &&
+ new URL( response.url() ).pathname.endsWith(
+ `/wp-json/cortext/v1/documents/${ fixture.entry.id }/duplicate`
+ )
+ );
+ await canvas.getByRole( 'menuitem', { name: 'Duplicate' } ).click();
+ const duplicateResponse = await duplicateResponsePromise;
+ expect( duplicateResponse.ok() ).toBe( true );
+ const duplicateEnvelope = await duplicateResponse.json();
+ fixture.duplicateId = Number( duplicateEnvelope.id );
+ expect( fixture.duplicateId ).toBeGreaterThan( 0 );
+
+ const duplicateRow = table
+ .locator( 'tbody > tr' )
+ .filter( { hasText: duplicateTitle } );
+ await expect( duplicateRow ).toBeVisible();
+ await expect( duplicateRow ).toContainText( 'Ursula K. Le Guin' );
+
+ const rows = await requestUtils.rest( {
+ path: '/wp/v2/crtxt_documents',
+ params: {
+ context: 'edit',
+ status: 'draft,private,publish',
+ per_page: 100,
+ cortext_trait: fixture.collection.id,
+ },
+ } );
+ const duplicate = rows.find(
+ ( row ) => Number( row.id ) === fixture.duplicateId
+ );
+ expect( duplicate ).toBeTruthy();
+ expect( duplicate.title.raw ).toBe( duplicateTitle );
+ expect( duplicate.meta[ `field-${ fixture.field.id }` ] ).toBe(
+ 'Ursula K. Le Guin'
+ );
+
+ const cachedDuplicate = await page.evaluate(
+ ( { duplicateId, fieldKey } ) => {
+ const record = window.wp.data
+ .select( 'core' )
+ .getEntityRecord(
+ 'postType',
+ 'crtxt_document',
+ duplicateId
+ );
+ if ( ! record ) {
+ return null;
+ }
+ return {
+ id: record.id,
+ title: record.title?.raw,
+ fieldValue: record.meta?.[ fieldKey ],
+ };
+ },
+ {
+ duplicateId: fixture.duplicateId,
+ fieldKey: `field-${ fixture.field.id }`,
+ }
+ );
+ expect( cachedDuplicate ).toEqual( {
+ id: fixture.duplicateId,
+ title: duplicateTitle,
+ fieldValue: 'Ursula K. Le Guin',
+ } );
+
+ await page.reload();
+ await expect( duplicateRow ).toBeVisible();
+ await expect( duplicateRow ).toContainText( 'Ursula K. Le Guin' );
+ } finally {
+ await deleteIfCreated(
+ requestUtils,
+ fixture.duplicateId &&
+ `/wp/v2/crtxt_documents/${ fixture.duplicateId }`
+ );
+ await deleteIfCreated(
+ requestUtils,
+ fixture.entry && `/wp/v2/crtxt_documents/${ fixture.entry.id }`
+ );
+ await deleteIfCreated(
+ requestUtils,
+ fixture.page && `/wp/v2/crtxt_documents/${ fixture.page.id }`
+ );
+ await deleteIfCreated(
+ requestUtils,
+ fixture.field && `/wp/v2/crtxt_fields/${ fixture.field.id }`
+ );
+ await deleteIfCreated(
+ requestUtils,
+ fixture.collection &&
+ `/wp/v2/crtxt_documents/${ fixture.collection.id }`
+ );
+ }
+ } );
+
test( 'creates a collection from the placeholder and can switch collections', async ( {
admin,
page,
@@ -3245,6 +3390,259 @@ test.describe( 'Collection view block', () => {
}
} );
+ test( 'queues inline saves while row details are open and shows save errors', async ( {
+ admin,
+ page,
+ requestUtils,
+ } ) => {
+ const fixture = {};
+ const firstStatus = 'First queued value';
+ const successfulStatus = 'Ready for review';
+ const failedStatus = 'This must not persist';
+ const failureMessage = 'Forced row save failure.';
+ let delayedSaveHandler;
+ let failedSaveHandler;
+ let releaseFirstSave = () => {};
+ let rowSavePattern;
+
+ try {
+ Object.assign(
+ fixture,
+ await createCalculationFixture( requestUtils )
+ );
+ const statusKey = `field-${ fixture.fields.status.id }`;
+
+ fixture.page = await requestUtils.rest( {
+ method: 'POST',
+ path: '/wp/v2/crtxt_documents',
+ data: {
+ title: 'Concurrent inline row saves',
+ status: 'private',
+ content: createDataViewBlockMarkup( fixture.collection.id, {
+ fields: [ 'title', statusKey ],
+ } ),
+ },
+ } );
+
+ await admin.visitAdminPage(
+ 'admin.php',
+ `page=cortext&p=/${ fixture.page.id }`
+ );
+
+ await page.waitForFunction(
+ ( postId ) =>
+ window.wp?.data
+ ?.select( 'core/editor' )
+ ?.getCurrentPostId?.() === postId,
+ fixture.page.id,
+ { timeout: 15_000 }
+ );
+
+ const canvas = page
+ .getByRole( 'region', { name: 'Content' } )
+ .frameLocator( 'iframe[name="editor-canvas"]' );
+ const table = canvas.locator( '.dataviews-view-table' );
+ const alphaRow = table
+ .locator( 'tbody > tr' )
+ .filter( { hasText: 'Alpha Book' } );
+
+ await expect( alphaRow ).toBeVisible();
+ await alphaRow.hover();
+ await alphaRow.locator( '.cortext-title-cell__open' ).click();
+
+ const detail = page.getByRole( 'dialog', { name: 'Detail' } );
+ await expect( detail ).toBeVisible();
+ await expect(
+ activeRowDetailCanvas( detail )
+ .locator( '[data-type="core/post-title"]' )
+ .first()
+ ).toHaveText( 'Alpha Book' );
+
+ rowSavePattern = new RegExp(
+ `/wp-json/wp/v2/crtxt_documents/${ fixture.rows[ 0 ].id }(?:\\?|$)`
+ );
+ const isExpectedMetaSave = ( request, fieldKey, expectedValue ) => {
+ if (
+ request.method() !== 'POST' ||
+ ! rowSavePattern.test( request.url() )
+ ) {
+ return false;
+ }
+ try {
+ return (
+ request.postDataJSON()?.meta?.[ fieldKey ] ===
+ expectedValue
+ );
+ } catch {
+ return false;
+ }
+ };
+
+ const firstSaveGate = new Promise( ( resolve ) => {
+ releaseFirstSave = resolve;
+ } );
+ delayedSaveHandler = async ( route ) => {
+ if (
+ isExpectedMetaSave(
+ route.request(),
+ statusKey,
+ firstStatus
+ )
+ ) {
+ await firstSaveGate;
+ }
+ await route.continue();
+ };
+ await page.route( rowSavePattern, delayedSaveHandler );
+
+ const firstSaveRequest = page.waitForRequest( ( request ) =>
+ isExpectedMetaSave( request, statusKey, firstStatus )
+ );
+ const statusCell = alphaRow.getByText( 'Alpha', {
+ exact: true,
+ } );
+ // The open side peek intercepts pointer events over the canvas. Click
+ // the hidden grid control directly so this test can focus on save
+ // ordering.
+ await statusCell.evaluate( ( cell ) => cell.click() );
+ const statusInput = alphaRow.getByRole( 'textbox', {
+ name: 'Status',
+ exact: true,
+ } );
+ await statusInput.fill( firstStatus, { force: true } );
+ await statusInput.press( 'Enter' );
+ await firstSaveRequest;
+ await expect( statusInput ).toHaveValue( firstStatus );
+
+ await statusInput.fill( successfulStatus, { force: true } );
+ const secondSaveRequest = page.waitForRequest( ( request ) =>
+ isExpectedMetaSave( request, statusKey, successfulStatus )
+ );
+ await statusInput.press( 'Enter' );
+ await expect( statusInput ).toHaveValue( successfulStatus );
+
+ const secondSaveStartedWhileFirstWasPending = await Promise.race( [
+ secondSaveRequest.then( () => true ),
+ page.waitForTimeout( 250 ).then( () => false ),
+ ] );
+ expect( secondSaveStartedWhileFirstWasPending ).toBe( false );
+
+ releaseFirstSave();
+ await secondSaveRequest;
+
+ await expect
+ .poll( async () => {
+ const row = await requestUtils.rest( {
+ path: `/wp/v2/crtxt_documents/${ fixture.rows[ 0 ].id }`,
+ params: { context: 'edit' },
+ } );
+ return row.meta[ statusKey ];
+ } )
+ .toBe( successfulStatus );
+ await expect( detail ).toBeVisible();
+
+ await page.unroute( rowSavePattern, delayedSaveHandler );
+ delayedSaveHandler = null;
+ failedSaveHandler = async ( route ) => {
+ if (
+ isExpectedMetaSave(
+ route.request(),
+ statusKey,
+ failedStatus
+ )
+ ) {
+ await route.fulfill( {
+ status: 500,
+ contentType: 'application/json',
+ body: JSON.stringify( {
+ code: 'cortext_test_save_failure',
+ message: failureMessage,
+ data: { status: 500 },
+ } ),
+ } );
+ return;
+ }
+ await route.continue();
+ };
+ await page.route( rowSavePattern, failedSaveHandler );
+
+ await expect(
+ alphaRow.getByText( successfulStatus, { exact: true } )
+ ).toBeVisible();
+ await alphaRow
+ .getByText( successfulStatus, { exact: true } )
+ .evaluate( ( cell ) => cell.click() );
+ const failingInput = alphaRow.getByRole( 'textbox', {
+ name: 'Status',
+ exact: true,
+ } );
+ await failingInput.fill( failedStatus, { force: true } );
+ const failedSaveRequest = page.waitForRequest( ( request ) =>
+ isExpectedMetaSave( request, statusKey, failedStatus )
+ );
+ await failingInput.press( 'Enter' );
+ await failedSaveRequest;
+
+ await expect(
+ canvas.getByText( failureMessage, { exact: true } )
+ ).toBeVisible();
+ await expect( failingInput ).toHaveValue( failedStatus );
+
+ const persistedAfterFailure = await requestUtils.rest( {
+ path: `/wp/v2/crtxt_documents/${ fixture.rows[ 0 ].id }`,
+ params: { context: 'edit' },
+ } );
+ expect( persistedAfterFailure.meta[ statusKey ] ).toBe(
+ successfulStatus
+ );
+
+ await page.unroute( rowSavePattern, failedSaveHandler );
+ failedSaveHandler = null;
+ await page.reload();
+
+ const reloadedCanvas = page
+ .getByRole( 'region', { name: 'Content' } )
+ .frameLocator( 'iframe[name="editor-canvas"]' );
+ const reloadedRow = reloadedCanvas
+ .locator( '.dataviews-view-table tbody > tr' )
+ .filter( { hasText: 'Alpha Book' } );
+ await expect( reloadedRow ).toContainText( successfulStatus );
+ } finally {
+ releaseFirstSave();
+ if ( rowSavePattern && delayedSaveHandler ) {
+ await page
+ .unroute( rowSavePattern, delayedSaveHandler )
+ .catch( () => {} );
+ }
+ if ( rowSavePattern && failedSaveHandler ) {
+ await page
+ .unroute( rowSavePattern, failedSaveHandler )
+ .catch( () => {} );
+ }
+ for ( const row of fixture.rows ?? [] ) {
+ await deleteIfCreated(
+ requestUtils,
+ `/wp/v2/crtxt_documents/${ row.id }`
+ );
+ }
+ await deleteIfCreated(
+ requestUtils,
+ fixture.page && `/wp/v2/crtxt_documents/${ fixture.page.id }`
+ );
+ for ( const field of Object.values( fixture.fields ?? {} ) ) {
+ await deleteIfCreated(
+ requestUtils,
+ `/wp/v2/crtxt_fields/${ field.id }`
+ );
+ }
+ await deleteIfCreated(
+ requestUtils,
+ fixture.collection &&
+ `/wp/v2/crtxt_documents/${ fixture.collection.id }`
+ );
+ }
+ } );
+
test( 'row detail toolbar stays separate from the parent DataView toolbar', async ( {
admin,
page,
diff --git a/tests/js/components/DataViewNewRowButton.test.js b/tests/js/components/DataViewNewRowButton.test.js
new file mode 100644
index 00000000..97a32539
--- /dev/null
+++ b/tests/js/components/DataViewNewRowButton.test.js
@@ -0,0 +1,92 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const mockCreateRowDocument = jest.fn();
+jest.mock( '../../../src/components/rowDocumentCreation', () => ( {
+ useCreateRowDocument: () => mockCreateRowDocument,
+} ) );
+
+import DataViewNewRowButton from '../../../src/components/DataViewNewRowButton';
+
+function renderButton( overrides = {} ) {
+ return render(
+