fix(ui): toggle list selections off on successful bulk action (#12861)
### What? This PR threads an onSuccess callback to bulk actions which get called after a successful action. In this case, the callback toggles the list selections off after a successful edit many, publish many, or unpublish many. ### Why? To ensure list selections are toggled off after a successful action. ### How? By threading a new onSuccess callback through the actions' props. Fixes #12855 Before [12855-before.mp4](https://private-user-images.githubusercontent.com/65888/456602476-b327f0ba-c140-46be-8c71-7f6bfa74fd67.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTAyODQxMDEsIm5iZiI6MTc1MDI4MzgwMSwicGF0aCI6Ii82NTg4OC80NTY2MDI0NzYtYjMyN2YwYmEtYzE0MC00NmJlLThjNzEtN2Y2YmZhNzRmZDY3Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjE4VDIxNTY0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA0YTE4OTE5MjliZWQxNDM1OTU0ODlhMmY5ZjliNjhlODAyODU5ZmU3ODkzMjI1ODhiOTQyNmY0YzMyMGM0ZmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.hzTLtuzltcpQUAIHYz7JoZ5x7JT4dPP9f-3c-GDf0Zc) After [Draft-Posts---Payload.webm](https://github.com/user-attachments/assets/474fbd9f-c7b3-46f4-ae31-5246cb22b86d)
This commit is contained in:
@@ -488,6 +488,112 @@ test.describe('Bulk Edit', () => {
|
||||
await expect(field.locator('#field-array__0__noRead')).toBeHidden()
|
||||
await expect(field.locator('#field-array__0__noUpdate')).toBeDisabled()
|
||||
})
|
||||
|
||||
test('should toggle list selections off on successful publish', async () => {
|
||||
await deleteAllPosts()
|
||||
|
||||
const postCount = 3
|
||||
Array.from({ length: postCount }).forEach(async (_, i) => {
|
||||
await createPost({ title: `Post ${i + 1}` }, { draft: true })
|
||||
})
|
||||
|
||||
await page.goto(postsUrl.list)
|
||||
await page.locator('input#select-all').check()
|
||||
|
||||
await page.locator('.list-selection__button[aria-label="Publish"]').click()
|
||||
await page.locator('#publish-posts #confirm-action').click()
|
||||
|
||||
await expect(page.locator('.payload-toast-container .toast-success')).toContainText(
|
||||
`Updated ${postCount} Posts successfully.`,
|
||||
)
|
||||
|
||||
// eslint-disable-next-line jest-dom/prefer-checked
|
||||
await expect(page.locator('input#select-all')).not.toHaveAttribute('checked', '')
|
||||
|
||||
for (let i = 0; i < postCount; i++) {
|
||||
// eslint-disable-next-line jest-dom/prefer-checked
|
||||
await expect(findTableCell(page, '_select', `Post ${i + 1}`)).not.toHaveAttribute(
|
||||
'checked',
|
||||
'',
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
test('should toggle list selections off on successful unpublish', async () => {
|
||||
await deleteAllPosts()
|
||||
|
||||
const postCount = 3
|
||||
Array.from({ length: postCount }).forEach(async (_, i) => {
|
||||
await createPost({ title: `Post ${i + 1}`, _status: 'published' })
|
||||
})
|
||||
|
||||
await page.goto(postsUrl.list)
|
||||
await page.locator('input#select-all').check()
|
||||
|
||||
await page.locator('.list-selection__button[aria-label="Unpublish"]').click()
|
||||
await page.locator('#unpublish-posts #confirm-action').click()
|
||||
|
||||
await expect(page.locator('.payload-toast-container .toast-success')).toContainText(
|
||||
`Updated ${postCount} Posts successfully.`,
|
||||
)
|
||||
|
||||
// eslint-disable-next-line jest-dom/prefer-checked
|
||||
await expect(page.locator('input#select-all')).not.toHaveAttribute('checked', '')
|
||||
|
||||
for (let i = 0; i < postCount; i++) {
|
||||
// eslint-disable-next-line jest-dom/prefer-checked
|
||||
await expect(findTableCell(page, '_select', `Post ${i + 1}`)).not.toHaveAttribute(
|
||||
'checked',
|
||||
'',
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
test('should toggle list selections off on successful edit', async () => {
|
||||
await deleteAllPosts()
|
||||
|
||||
const postCount = 3
|
||||
Array.from({ length: postCount }).forEach(async (_, i) => {
|
||||
await createPost({ title: `Post ${i + 1}` })
|
||||
})
|
||||
|
||||
await page.goto(postsUrl.list)
|
||||
await page.locator('input#select-all').check()
|
||||
|
||||
await page.locator('.list-selection__button[aria-label="Edit"]').click()
|
||||
|
||||
const editDrawer = page.locator('dialog#edit-posts')
|
||||
await expect(editDrawer).toBeVisible()
|
||||
|
||||
const fieldSelect = editDrawer.locator('.field-select')
|
||||
await expect(fieldSelect).toBeVisible()
|
||||
|
||||
const fieldSelectControl = fieldSelect.locator('.rs__control')
|
||||
await expect(fieldSelectControl).toBeVisible()
|
||||
await fieldSelectControl.click()
|
||||
|
||||
const titleOption = fieldSelect.locator('.rs__option:has-text("Title")').first()
|
||||
await titleOption.click()
|
||||
|
||||
await editDrawer.locator('input#field-title').fill('test')
|
||||
|
||||
await editDrawer.locator('button[type="submit"]:has-text("Publish changes")').click()
|
||||
|
||||
await expect(page.locator('.payload-toast-container .toast-success')).toContainText(
|
||||
`Updated ${postCount} Posts successfully.`,
|
||||
)
|
||||
|
||||
// eslint-disable-next-line jest-dom/prefer-checked
|
||||
await expect(page.locator('input#select-all')).not.toHaveAttribute('checked', '')
|
||||
|
||||
for (let i = 0; i < postCount; i++) {
|
||||
// eslint-disable-next-line jest-dom/prefer-checked
|
||||
await expect(findTableCell(page, '_select', `Post ${i + 1}`)).not.toHaveAttribute(
|
||||
'checked',
|
||||
'',
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
async function selectFieldToEdit(
|
||||
|
||||
Reference in New Issue
Block a user