Merge pull request #8221 from marmelab/fix-datagrid-exapand-all

Fix `Datagrid`'s `ExpandAllButton` conflicts with `expandSingle` prop

Author: slax57

packages/ra-core/src/controller/list/useExpanded.tsx

@@ -60,7 +60,7 @@ export const useExpanded = (
  *
  * @example
  *
- * const [expanded, toggleExpanded] = useExpandedMultiple('posts', [123, 124, 125]);
+ * const [expanded, toggleExpanded] = useExpandAll('posts', [123, 124, 125]);
  * const expandIcon = expanded ? ExpandLess : ExpandMore;
  * const onExpandClick = () => toggleExpanded();
  */

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

@@ -96,6 +96,19 @@ describe('<Datagrid />', () => {
         expect(screen.queryByText('No records to show')).toBeTruthy();
     });
 
+    it('should not allow to expand all rows when `expandSingle` prop is true', () => {
+        render(
+            <Wrapper listContext={contextValue}>
+                <Datagrid expand={<div>Expanded panel</div>} expandSingle>
+                    <TitleField />
+                </Datagrid>
+            </Wrapper>
+        );
+        expect(screen.queryAllByTestId('ExpandMoreIcon')).toHaveLength(
+            defaultData.length
+        );
+    });
+
     describe('selecting items with the shift key', () => {
         it('should call onSelect with the correct ids when the last selection is after the first', () => {
             const Test = ({ selectedIds = [] }) => (

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

@@ -108,6 +108,17 @@ export const Expand = () => (
     </Wrapper>
 );
 
+export const ExpandSingle = () => (
+    <Wrapper>
+        <Datagrid expand={<ExpandPanel />} expandSingle>
+            <TextField source="id" />
+            <TextField source="title" />
+            <TextField source="author" />
+            <TextField source="year" />
+        </Datagrid>
+    </Wrapper>
+);
+
 export const Hover = () => (
     <Wrapper>
         <Datagrid hover={false}>

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

@@ -15,6 +15,7 @@ import clsx from 'clsx';
 import DatagridHeaderCell from './DatagridHeaderCell';
 import { DatagridClasses } from './useDatagridStyles';
 import ExpandAllButton from './ExpandAllButton';
+import { useDatagridContext } from './useDatagridContext';
 
 /**
  * The default Datagrid Header component.
@@ -34,6 +35,7 @@ export const DatagridHeader = (props: DatagridHeaderProps) => {
     const { sort, data, onSelect, selectedIds, setSort } = useListContext(
         props
     );
+    const { expandSingle } = useDatagridContext();
 
     const updateSortCallback = useCallback(
         event => {
@@ -95,10 +97,12 @@ export const DatagridHeader = (props: DatagridHeaderProps) => {
                             DatagridClasses.expandHeader
                         )}
                     >
-                        <ExpandAllButton
-                            resource={resource}
-                            ids={data.map(record => record.id)}
-                        />
+                        {!expandSingle ? (
+                            <ExpandAllButton
+                                resource={resource}
+                                ids={data.map(record => record.id)}
+                            />
+                        ) : null}
                     </TableCell>
                 )}
                 {hasBulkActions && selectedIds && (