Remove cloneElement in list actions and bulk actions

[fzaninotto]

Problem

Wenever we use cloneElement, developers find it hard to swap the component with their own as they don't know which props are injected.

Solution

Remove cloneElement and make child elements pull data from the context.

Applied to List components.

Note: there are still some cloneElement to support the deprecated <List filters={<Filter>...</Filter>} /> syntax (instead of <List filters={[...]} />). The discussion is open to determine if we should remove those.

<List hasCreate> Is No Longer Supported

To force a List view to display a Create button even though the corresponding resource doesn't have a create component, pass a custom actions component to the List component:

-import { List } from 'react-admin';
+import { List, ListActions } from 'react-admin';

const PostList = () => (
-   <List hasCreate>
+   <List actions={<ListActions hasCreate />}>
        ...
    </List>
);

Updates to bulkActionButtons Syntax

The bulkActionButtons prop has been moved from the <List> component to the <Datagrid> component.

const PostList = () => (
-   <List bulkActionButtons={<BulkActionButtons />}>
+   <List>
-      <Datagrid>
+      <Datagrid bulkActionButtons={<BulkActionButtons />}>
           ...
       </Datagrid>
   </List>
);

Besides, the buttons passed as bulkActionButtons no longer receive any prop. If you need the current filter values or the selected ids, you'll have to use the useListContext hook:

-const BulkResetViewsButton = ({ resource, selectedIds }) => {
+const BulkResetViewsButton = () => {
+   const { resource, selectedIds } = useListContext();
    const notify = useNotify();
    const unselectAll = useUnselectAll(resource);
    const [updateMany, { isPending }] = useUpdateMany();

    const handleClick = () => {
        updateMany(
            resource,
            { ids: selectedIds, data: { views: 0 } },
            {
                onSuccess: () => {
                    notify('Views reset');
                    unselectAll();
                },
                onError: () => notify('Views not reset', { type: 'error' }),
            }
        );
    }
    return (
        <Button
            label="Reset views"
            disabled={isPending}
            onClick={() => updateMany()}
        >
            <VisibilityOff />
        </Button>
    );
};