Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 147 commits into from
Jan 3, 2025

Conversation

erwanMarmelab
Copy link
Contributor

@erwanMarmelab erwanMarmelab commented Nov 20, 2024

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

  • Add a "Select all" button
  • make it customizable (selectAllLimit)
  • document is the jsDoc
  • document
  • make it for the:
    • List
    • ReferenceManyField
    • ReferenceArrayField
    • InfiniteList
  • add stories:
  • change ra-core tests to transfor rendered component to stories

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

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

const { data: allData } = useGetList<RecordType>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@fzaninotto fzaninotto merged commit 1d6525a into next Jan 3, 2025
15 checks passed
@fzaninotto fzaninotto deleted the feat/next/select_all branch January 3, 2025 12:40
@fzaninotto fzaninotto added this to the 5.5.0 milestone Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants