diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx index d6517116343..635577c1a73 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx @@ -12,7 +12,6 @@ import { useRefresh, useResourceContext, useTranslate, - useUnselectAll, useSafeSetState, RaRecord, DeleteManyParams, @@ -37,11 +36,10 @@ export const BulkDeleteWithConfirmButton = ( ...rest } = props; const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions; - const { selectedIds } = useListContext(props); + const { selectedIds, onUnselectItems } = useListContext(props); const [isOpen, setOpen] = useSafeSetState(false); const notify = useNotify(); const resource = useResourceContext(props); - const unselectAll = useUnselectAll(resource); const refresh = useRefresh(); const translate = useTranslate(); const [deleteMany, { isLoading }] = useDeleteMany( @@ -55,7 +53,7 @@ export const BulkDeleteWithConfirmButton = ( messageArgs: { smart_count: selectedIds.length }, undoable: mutationMode === 'undoable', }); - unselectAll(); + onUnselectItems(); setOpen(false); }, onError: (error: Error) => { diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx index 9876404c80b..21783f2d329 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx @@ -8,7 +8,6 @@ import { useDeleteMany, useRefresh, useNotify, - useUnselectAll, useResourceContext, useListContext, RaRecord, @@ -30,11 +29,10 @@ export const BulkDeleteWithUndoButton = ( ...rest } = props; const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions; - const { selectedIds } = useListContext(props); + const { selectedIds, onUnselectItems } = useListContext(props); const notify = useNotify(); const resource = useResourceContext(props); - const unselectAll = useUnselectAll(resource); const refresh = useRefresh(); const [deleteMany, { isLoading }] = useDeleteMany(); @@ -49,7 +47,7 @@ export const BulkDeleteWithUndoButton = ( messageArgs: { smart_count: selectedIds.length }, undoable: true, }); - unselectAll(); + onUnselectItems(); }, onError: (error: Error) => { notify( diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx index 8cfc32669e2..9fc0314298e 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx +++ b/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import expect from 'expect'; -import { render, screen, waitFor } from '@testing-library/react'; +import { render, screen, waitFor, fireEvent } from '@testing-library/react'; import { createMemoryHistory } from 'history'; import { testDataProvider, useListContext } from 'ra-core'; import { createTheme, ThemeProvider } from '@mui/material/styles'; @@ -10,6 +10,7 @@ import { ReferenceManyField } from './ReferenceManyField'; import { TextField } from './TextField'; import { SingleFieldList } from '../list/SingleFieldList'; import { Pagination } from '../list/pagination/Pagination'; +import { Basic } from './ReferenceManyField.stories'; const theme = createTheme(); @@ -181,6 +182,22 @@ describe('', () => { expect(links[1].getAttribute('href')).toEqual('/comments/2'); }); + it('should clear selection on bulk delete', async () => { + render(); + await screen.findByText('War and Peace'); + const checkbox = ( + await screen.findAllByLabelText('ra.action.select_row') + )[1]; + fireEvent.click(checkbox); + await screen.findByText('ra.action.bulk_actions'); + screen.getByText('ra.action.delete').click(); + await waitFor(() => { + expect( + screen.queryAllByRole('ra.action.bulk_actions') + ).toHaveLength(0); + }); + }); + describe('pagination', () => { it('should render pagination based on total from getManyReference', async () => { const data = [ diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx new file mode 100644 index 00000000000..61254127f45 --- /dev/null +++ b/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; + +import { + CoreAdminContext, + RecordContextProvider, + ResourceContextProvider, +} from 'ra-core'; +import { createMemoryHistory } from 'history'; +import { ThemeProvider, Box } from '@mui/material'; +import { createTheme } from '@mui/material/styles'; + +import { TextField } from '../field'; +import { ReferenceManyField } from './ReferenceManyField'; +import { Datagrid } from '../list/datagrid/Datagrid'; +import { Notification } from '../layout/Notification'; + +export default { title: 'ra-ui-materialui/fields/ReferenceManyField' }; + +const history = createMemoryHistory({ initialEntries: ['/books/1/show'] }); + +const author = { id: 1, name: 'Leo Tolstoi' }; +let books = [ + { id: 1, title: 'War and Peace', author_id: 1 }, + { id: 2, title: 'Les Misérables', author_id: 2 }, + { id: 3, title: 'Anna Karenina', author_id: 1 }, + { id: 4, title: 'The Count of Monte Cristo', author_id: 3 }, + { id: 5, title: 'Resurrection', author_id: 1 }, +]; + +const defaultDataProvider = { + getManyReference: (resource, params) => { + const result = books.filter(book => book.author_id === params.id); + return Promise.resolve({ + data: result, + total: result.length, + }); + }, + deleteMany: (resource, params) => { + const ids = params.ids; + books = books.filter(book => !ids.includes(book.id)); + return Promise.resolve({ data: ids }); + }, +} as any; + +const Wrapper = ({ + children, + dataProvider = defaultDataProvider, + record = author, +}: any) => ( + + + + + + {children} + + + + + + +); + +export const Basic = () => ( + + + + + + + +);