fix(ui): only show bulk select all when count is less than total (#11329)

It doesn't make sense to display "select all" when bulk editing if your
current selection already contains all records.

Author: jacobsfletch

packages/ui/src/elements/ListSelection/index.scss

@@ -2,15 +2,19 @@
 
 @layer payload-default {
   .list-selection {
+    display: flex;
     margin-left: auto;
     color: var(--theme-elevation-500);
+    gap: 0.5em;
 
     &__button {
       color: var(--theme-elevation-500);
       background: unset;
       border: none;
       text-decoration: underline;
       cursor: pointer;
+      padding: 0;
+      font-size: inherit;
     }
 
     @include small-break {

packages/ui/src/elements/ListSelection/index.tsx

@@ -22,13 +22,13 @@ export const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {
   return (
     <div className={baseClass}>
       <span>{t('general:selectedCount', { count, label })}</span>
-      {selectAll !== SelectAllStatus.AllAvailable && (
+      {selectAll !== SelectAllStatus.AllAvailable && count < totalDocs && (
         <Fragment>
-          {' '}
-          &mdash;
+          <span>&mdash;</span>
           <button
             aria-label={t('general:selectAll', { count, label })}
             className={`${baseClass}__button`}
+            id="select-all-across-pages"
             onClick={() => toggleAll(true)}
             type="button"
           >

test/admin/e2e/general/e2e.spec.ts

@@ -51,6 +51,7 @@ let payload: PayloadTestSDK<Config>
 import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
 import { openDocControls } from 'helpers/e2e/openDocControls.js'
 import path from 'path'
+import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
 
 import type { PayloadTestSDK } from '../../../helpers/sdk/index.js'
@@ -721,25 +722,31 @@ describe('General', () => {
         'Deleted 3 Posts successfully.',
       )
 
-      await expect(page.locator('.collection-list__no-results')).toBeVisible()
+      // Poll until router has refreshed
+      await expect.poll(() => page.locator('.collection-list__no-results').isVisible()).toBeTruthy()
     })
 
     test('should bulk delete with filters and across pages', async () => {
       await deleteAllPosts()
-      await Promise.all([createPost({ title: 'Post 1' }), createPost({ title: 'Post 2' })])
+
+      Array.from({ length: 6 }).forEach(async (_, i) => {
+        await createPost({ title: `Post ${i + 1}` })
+      })
+
       await page.goto(postsUrl.list)
-      await page.locator('#search-filter-input').fill('Post 1')
-      await expect(page.locator('.table table > tbody > tr')).toHaveCount(1)
+      await page.locator('#search-filter-input').fill('Post')
+      await expect(page.locator('.table table > tbody > tr')).toHaveCount(5)
       await page.locator('input#select-all').check()
-      await page.locator('button.list-selection__button').click()
+      await page.locator('button#select-all-across-pages').click()
       await page.locator('.delete-documents__toggle').click()
       await page.locator('#delete-posts #confirm-action').click()
 
       await expect(page.locator('.payload-toast-container .toast-success')).toHaveText(
-        'Deleted 1 Post successfully.',
+        'Deleted 6 Posts successfully.',
       )
 
-      await expect(page.locator('.table table > tbody > tr')).toHaveCount(1)
+      // Poll until router has refreshed
+      await expect.poll(() => page.locator('.table table > tbody > tr').count()).toBe(0)
     })
 
     test('should bulk update', async () => {
@@ -835,17 +842,27 @@ describe('General', () => {
       expect(updatedPost.docs[0].defaultValueField).toBe('not the default value')
     })
 
+    test('should not show "select all across pages" button if already selected all', async () => {
+      await deleteAllPosts()
+      await createPost({ title: `Post 1` })
+      await page.goto(postsUrl.list)
+      await page.locator('input#select-all').check()
+      await expect(page.locator('button#select-all-across-pages')).toBeHidden()
+    })
+
     test('should bulk update with filters and across pages', async () => {
       // First, delete all posts created by the seed
       await deleteAllPosts()
-      const post1Title = 'Post 1'
-      await Promise.all([createPost({ title: post1Title }), createPost({ title: 'Post 2' })])
-      const updatedPostTitle = `${post1Title} (Updated)`
+
+      Array.from({ length: 6 }).forEach(async (_, i) => {
+        await createPost({ title: `Post ${i + 1}` })
+      })
+
       await page.goto(postsUrl.list)
-      await page.locator('#search-filter-input').fill('Post 1')
-      await expect(page.locator('.table table > tbody > tr')).toHaveCount(1)
+      await page.locator('#search-filter-input').fill('Post')
+      await expect(page.locator('.table table > tbody > tr')).toHaveCount(5)
       await page.locator('input#select-all').check()
-      await page.locator('button.list-selection__button').click()
+      await page.locator('button#select-all-across-pages').click()
       await page.locator('.edit-many__toggle').click()
       await page.locator('.field-select .rs__control').click()
 
@@ -857,23 +874,29 @@ describe('General', () => {
       await titleOption.click()
       const titleInput = page.locator('#field-title')
       await expect(titleInput).toBeVisible()
-      await titleInput.fill(updatedPostTitle)
+      const updatedTitle = `Post (Updated)`
+      await titleInput.fill(updatedTitle)
 
       await page.locator('.form-submit button[type="submit"].edit-many__publish').click()
       await expect(page.locator('.payload-toast-container .toast-success')).toContainText(
-        'Updated 1 Post successfully.',
+        'Updated 6 Posts successfully.',
       )
 
-      await expect(page.locator('.table table > tbody > tr')).toHaveCount(1)
-      await expect(page.locator('.row-1 .cell-title')).toContainText(updatedPostTitle)
+      // Poll until router has refreshed
+      await expect.poll(() => page.locator('.table table > tbody > tr').count()).toBe(5)
+      await expect(page.locator('.row-1 .cell-title')).toContainText(updatedTitle)
     })
 
     test('should update selection state after deselecting item following select all', async () => {
       await deleteAllPosts()
-      await createPost({ title: 'Post 1' })
+
+      Array.from({ length: 6 }).forEach(async (_, i) => {
+        await createPost({ title: `Post ${i + 1}` })
+      })
+
       await page.goto(postsUrl.list)
       await page.locator('input#select-all').check()
-      await page.locator('button.list-selection__button').click()
+      await page.locator('button#select-all-across-pages').click()
 
       // Deselect the first row
       await page.locator('.row-1 input').click()

tsconfig.base.json

@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/versions/config.ts"],
+      "@payload-config": ["./test/admin/config.ts"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
       "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],