Fix Datagrid bulkActionButtons shows empty toolbar when user cannot access the delete action

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import {
     CoreAdminContext,
     testDataProvider,
@@ -9,10 +9,11 @@ import {
 } from 'ra-core';
 import { ThemeProvider, createTheme } from '@mui/material';
 import { Datagrid } from './Datagrid';
+import { AccessControl } from './Datagrid.stories';
 
 const TitleField = (): JSX.Element => {
     const record = useRecordContext();
-    return <span>{record.title}</span>;
+    return <span>{record?.title}</span>;
 };
 
 const Wrapper = ({ children, listContext }) => (
@@ -282,4 +283,23 @@ describe('<Datagrid />', () => {
         );
         expect(screen.queryByText('ra.navigation.no_results')).not.toBeNull();
     });
+
+    describe('Access control', () => {
+        it('should not show row selection when there is no delete permissions', async () => {
+            render(<AccessControl />);
+            await screen.findByText('War and Peace');
+            expect(screen.queryAllByLabelText('Select this row')).toHaveLength(
+                0
+            );
+        });
+        it('should show row selection when user has delete permissions', async () => {
+            render(<AccessControl allowedAction="delete" />);
+            await screen.findByText('War and Peace');
+            await waitFor(() =>
+                expect(
+                    screen.queryAllByLabelText('Select this row')
+                ).toHaveLength(4)
+            );
+        });
+    });
 });

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

@@ -606,7 +606,7 @@ export const AccessControl = ({
             }),
     },
 }: {
-    allowedAction?: 'show' | 'edit' | 'invalid';
+    allowedAction?: 'show' | 'edit' | 'delete' | 'invalid';
     authProvider?: AuthProvider;
 }) => (
     <AdminContext
@@ -636,10 +636,11 @@ export const AccessControl = ({
 
 AccessControl.argTypes = {
     allowedAction: {
-        options: ['show', 'edit', 'none'],
+        options: ['show', 'edit', 'delete', 'none'],
         mapping: {
             show: 'show',
             edit: 'edit',
+            delete: 'delete',
             none: 'invalid',
         },
         control: { type: 'select' },

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

@@ -18,6 +18,8 @@ import {
     OptionalResourceContextProvider,
     RaRecord,
     SortPayload,
+    useCanAccess,
+    useResourceContext,
 } from 'ra-core';
 import { Table, TableProps, SxProps } from '@mui/material';
 import clsx from 'clsx';
@@ -117,6 +119,11 @@ const defaultBulkActionButtons = <BulkDeleteButton />;
 export const Datagrid: React.ForwardRefExoticComponent<
     Omit<DatagridProps, 'ref'> & React.RefAttributes<HTMLTableElement>
 > = React.forwardRef<HTMLTableElement, DatagridProps>((props, ref) => {
+    const resourceFromContext = useResourceContext(props);
+    const { canAccess: canDelete } = useCanAccess({
+        resource: resourceFromContext,
+        action: 'delete',
+    });
     const {
         optimized = false,
         body = optimized ? PureDatagridBody : DatagridBody,
@@ -125,7 +132,7 @@ export const Datagrid: React.ForwardRefExoticComponent<
         className,
         empty = DefaultEmpty,
         expand,
-        bulkActionButtons = defaultBulkActionButtons,
+        bulkActionButtons = canDelete ? defaultBulkActionButtons : false,
         hover,
         isRowSelectable,
         isRowExpandable,