Add a “SELECT ALL” button in the `<BulkActionsToolbar>` #10367

erwanMarmelab · 2024-11-20T21:06:31Z

Problem

The Datagrid already allows to select all the records of a given page. But sometimes users want to select all records across all pages, e.g. to delete all the records of a resource. Also, when not in a datagrid (e.g. contact list in CRM demo), there is no way to select all records.

Solution

In the bulk actions toolbar, add a “select all” link close to the number of selected items.

Already started in #9043, but needs a different approach

To do - V1

Informations

The limit prop is not usefull for the useList hook because this hook received all the data directly so we don't need to call it.

So, the <RerefenceArrayField> doesn't need the limit prop.

The "SELECT ALL" button will alway display when the API use a partial pagination.

To do - V2

Change the structure to only modify the new SelectAllButton for meta and limit
Document the new button
Test the new button

Additional Checks

The PR targets master for a bugfix, or next for a feature
The PR includes unit tests (if not possible, describe why)
The PR includes one or several stories (if not possible, describe why)
The documentation is up to date

fzaninotto · 2024-11-20T21:41:33Z

packages/ra-core/src/controller/list/useListController.ts

@@ -168,6 +169,37 @@ export const useListController = <RecordType extends RaRecord = any>(
        name: getResourceLabel(resource, 2),
    });

+    const { data: allData } = useGetList<RecordType>(


You'd better use the data provider directly in the callback, or using react-query's useMutation. useGetList is really designed for queries triggered on mount.

…uild

djhi

In every tests where you pass a children callback, you can instead modify the stories (or add new ones), adding a state inspector that shows the values you want to test stringified

fzaninotto

We're getting closer! The UX and the DX are OK, now we have to clean up the code.

fzaninotto · 2024-12-20T14:39:25Z

docs/Buttons.md

+The `<SelectAllButton>` component allows users to select all items from a resource, no matter the pagination.
+
+![SelectAllButton](./img/SelectAllButton.png)
+


I think we're missing a usage section here.

fzaninotto · 2024-12-20T14:41:37Z

docs/Datagrid.md

+By default, all Datagrids have a single `action`, [the select all button](./Buttons.md#selectallbutton).
+You can customize this button or add others by passing a custom element as the `bulkActionsToolbar` prop of the `<Datagrid>` component:


This is confusing. It's a bulk action toolbar, but it has an action prop that is not for bulk actions... I'd prefer that you add a selectAllButton prop for the SelectAllButton.

fzaninotto · 2024-12-20T14:42:31Z

docs/Datagrid.md

+
+{% endraw %}
+
+**Tip**: This customization will bring up your new `UnselectAll` button on the left-hand side of the toolbar. To work on the right-hand side, you can use the [`bulkActionButtons`](#bulkactionbuttons) prop.


Also unclear, especially since there is no screenshot of what's in the let and right sides.

fzaninotto · 2024-12-20T14:44:57Z

docs/Datagrid.md

@@ -373,6 +374,61 @@ const CustomResetViewsButton = () => {
 };
 ```

+## `bulkActionsToolbar`
+
+You can use the `bulkActionsToolbar` prop to customize the bulk action toolbar, displayed when at least one row is selected.


I'm confused by reading this: why one should use bulkActionsToolbar instead of bulkActionButton? This should be clearer.

In fact, I suggest that we don't document this prop and keep it private for now.

fzaninotto · 2024-12-20T14:48:48Z

packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx


 export const BulkActionsToolbar = (props: BulkActionsToolbarProps) => {
    const {
        label = 'ra.action.bulk_actions',
        children,
        className,
+        actions = defaultActions,


rename the prop to selectAllButton

fzaninotto · 2024-12-20T15:33:36Z

packages/ra-ui-materialui/src/list/List.spec.tsx

+                screen.queryByRole('button', { name: 'Select all' })
+            ).toBeNull();
+        });
+        it('should not be displayed if we reached the limit by a manual selection', async () => {


Suggested change

it('should not be displayed if we reached the limit by a manual selection', async () => {

it('should not be displayed if the user reaches the limit by a manual selection', async () => {

fzaninotto · 2024-12-20T15:33:55Z

packages/ra-ui-materialui/src/list/List.spec.tsx

+                screen.queryByRole('button', { name: 'Select all' })
+            ).toBeNull();
+        });
+        it('should not be displayed if we reached the selectAllLimit by a  click on the "Select all" button', async () => {


Suggested change

it('should not be displayed if we reached the selectAllLimit by a click on the "Select all" button', async () => {

it('should not be displayed if the user reaches the selectAllLimit by a click on the "Select all" button', async () => {

fzaninotto · 2024-12-20T15:34:17Z

packages/ra-ui-materialui/src/list/List.spec.tsx

+            fireEvent.click(screen.getByRole('button', { name: 'Select all' }));
+            await screen.findByText('13 items selected');
+        });
+        it('should select the maximum items possible until we reached the selectAllLimit', async () => {


Suggested change

it('should select the maximum items possible until we reached the selectAllLimit', async () => {

it('should select the maximum items possible up to the selectAllLimit', async () => {

fzaninotto · 2024-12-20T15:36:14Z

packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx

some linter warnings in this file

fzaninotto · 2024-12-20T15:41:32Z

packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx

+     *     <BulkActionsToolbar actions={
+     *         <>
+     *             <SelectAllButton label="Select all records" />
+     *             <UnselectButton />


This example doesn't make sense, as we already have an unselect button (the cross). I suggest you create a custom toolbar that doesn't use BulkActionsToolbar, but simply lists the selected ids

Add a "Select all" button + make it customizable + document jsDoc

972e9dd

erwanMarmelab added the WIP Work In Progress label Nov 20, 2024

erwanMarmelab mentioned this pull request Nov 20, 2024

Add a “SELECT ALL” button in the <BulkActionsToolbar> #10366

Closed

12 tasks

vercel bot deployed to Preview – react-admin-storybook November 20, 2024 21:07 View deployment

erwanMarmelab added 2 commits November 20, 2024 22:27

add logic in useList

9656803

wrap function with a useCallback

91b874f

vercel bot deployed to Preview – react-admin-storybook November 20, 2024 21:31 View deployment

add more data in the story to be able to test the "SELECT ALL" button

4cd44ea

fzaninotto reviewed Nov 20, 2024

View reviewed changes

vercel bot deployed to Preview – react-admin-storybook November 20, 2024 21:42 View deployment

erwanMarmelab added 11 commits November 21, 2024 16:41

simplify the areAllSelected check

6178ee5

add select all button on ReferenceManyField

9e26228

add a full app story with ReferenceManyField

dc18571

remove the useless selectAllLimit prop from useList

426c9f5

add a SELECT ALL button for ReferenceArrayField

5721ae9

add SELECT ALL button on infiniteList + story + selectAllLimit

02eef0b

change call on mount to mutation on callback

60b0b9a

display error + fix getManyReference call

651ac4b

add stories for ReferenceManyField for Pagination and selectAllLimit

73f8e7e

add stories for List with selectAllLimit

d214481

remove useless modification

76d9214

vercel bot deployed to Preview – react-admin-storybook November 21, 2024 22:25 View deployment

erwanMarmelab added 3 commits November 21, 2024 23:31

Fix Datagrid and ExpandAllButton tests

1885e48

Fix BulkUpdateButton test

4c73b9c

add selectAllLimit to UseReferenceArrayFieldControllerParams to fix b…

548968d

…uild

vercel bot deployed to Preview – react-admin-storybook November 22, 2024 08:12 View deployment

erwanMarmelab added 4 commits November 22, 2024 10:33

rename areAllSelected to displaySelectAllButton

dd7cf02

test useListController

9eb0f1c

test useInfiniteListController

4546b6e

test useReferenceArrayFieldController

a374f05

vercel bot deployed to Preview – react-admin-storybook December 17, 2024 14:52 View deployment

erwanMarmelab added 2 commits December 17, 2024 17:14

isolate tests into stories

c8d447b

simplify tests (afterEach of Select All tests)

ea989da

vercel bot deployed to Preview – react-admin-storybook December 17, 2024 16:28 View deployment

djhi requested changes Dec 18, 2024

View reviewed changes

erwanMarmelab added 8 commits December 18, 2024 16:11

don't pass children to the tests -> useReferenceArrayFieldController

56f48a5

don't pass children to the tests -> useReferenceManyFieldController

cb70247

don't pass children to the tests -> useInfiniteListController

db74e83

don't pass children to the tests -> useList

8787f5b

simplify tests

122dae6

don't pass children to the tests -> useListController

2abf955

clean file

54c8e6e

clean file

ec85bf9

vercel bot deployed to Preview – react-admin-storybook December 18, 2024 16:03 View deployment

erwanMarmelab added 7 commits December 18, 2024 17:22

display SelectAllButton if all data are selected

fbb290c

adapt tests SelectAllButton + add a test on the new display condition

4f4feff

adapt tests Datagrid

e5fdcb7

simplify stories

2d9822d

adapt tests List

1bd2dcb

adapt tests ReferenceManyField

f5144e8

adapt tests ReferenceArrayField

b300053

vercel bot deployed to Preview – react-admin-storybook December 18, 2024 17:03 View deployment

Merge branch 'next' into feat/next/select_all

65ad280

vercel bot deployed to Preview – react-admin-storybook December 18, 2024 18:21 View deployment

improve buttons color

614f4d1

vercel bot deployed to Preview – react-admin-storybook December 18, 2024 18:39 View deployment

Adapt ExpandAllButton's test with the new story

9df60b1

vercel bot deployed to Preview – react-admin-storybook December 19, 2024 09:08 View deployment

djhi self-requested a review December 19, 2024 10:06

fzaninotto requested changes Dec 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a “SELECT ALL” button in the `<BulkActionsToolbar>` #10367

Add a “SELECT ALL” button in the `<BulkActionsToolbar>` #10367

erwanMarmelab commented Nov 20, 2024 •

edited

Loading

fzaninotto Nov 20, 2024

djhi left a comment

fzaninotto left a comment

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

fzaninotto Dec 20, 2024

		The `<SelectAllButton>` component allows users to select all items from a resource, no matter the pagination.

		![SelectAllButton](./img/SelectAllButton.png)

		By default, all Datagrids have a single `action`, [the select all button](./Buttons.md#selectallbutton).
		You can customize this button or add others by passing a custom element as the `bulkActionsToolbar` prop of the `<Datagrid>` component:


		{% endraw %}

		Tip: This customization will bring up your new `UnselectAll` button on the left-hand side of the toolbar. To work on the right-hand side, you can use the [`bulkActionButtons`](#bulkactionbuttons) prop.

	it('should not be displayed if we reached the limit by a manual selection', async () => {
	it('should not be displayed if the user reaches the limit by a manual selection', async () => {

	it('should select the maximum items possible until we reached the selectAllLimit', async () => {
	it('should select the maximum items possible up to the selectAllLimit', async () => {

Add a “SELECT ALL” button in the <BulkActionsToolbar> #10367

Are you sure you want to change the base?

Add a “SELECT ALL” button in the <BulkActionsToolbar> #10367

Conversation

erwanMarmelab commented Nov 20, 2024 • edited Loading

Problem

Solution

To do - V1

Informations

To do - V2

Additional Checks

Choose a reason for hiding this comment

djhi left a comment

Choose a reason for hiding this comment

fzaninotto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Add a “SELECT ALL” button in the `<BulkActionsToolbar>` #10367

Add a “SELECT ALL” button in the `<BulkActionsToolbar>` #10367

erwanMarmelab commented Nov 20, 2024 •

edited

Loading