From 9cd6b17185bdb365d9d0ea458bf1af54fd56f758 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Fri, 19 May 2023 17:47:14 +0200
Subject: [PATCH] Fix `<DatagridConfigurable>` inspector hides the wrong column
 when using empty children

Closes #8927
---
 .../datagrid/DatagridConfigurable.spec.tsx    | 14 +++++++
 .../datagrid/DatagridConfigurable.stories.tsx | 17 ++++++++
 .../list/datagrid/DatagridConfigurable.tsx    | 40 ++++++++-----------
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.spec.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.spec.tsx
index e328b1e9c10..a4a45135cc2 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.spec.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.spec.tsx
@@ -7,6 +7,7 @@ import {
     Omit,
     PreferenceKey,
     LabelElement,
+    NullChildren,
 } from './DatagridConfigurable.stories';
 
 describe('<DatagridConfigurable>', () => {
@@ -49,6 +50,19 @@ describe('<DatagridConfigurable>', () => {
         screen.getByLabelText('Title').click();
         expect(screen.queryByText('War and Peace')).not.toBeNull();
     });
+    it('accepts null children', async () => {
+        render(<NullChildren />);
+        screen.getByLabelText('Configure mode').click();
+        await screen.findByText('Inspector');
+        fireEvent.mouseOver(screen.getByText('Leo Tolstoy'));
+        await screen.getByTitle('ra.configurable.customize').click();
+        await screen.findByText('Datagrid');
+        expect(screen.queryByText('War and Peace')).not.toBeNull();
+        screen.getByLabelText('Original title').click();
+        expect(screen.queryByText('War and Peace')).toBeNull();
+        screen.getByLabelText('Original title').click();
+        expect(screen.queryByText('War and Peace')).not.toBeNull();
+    });
     it('should accept fields with no source', async () => {
         render(<Basic />);
         screen.getByLabelText('Configure mode').click();
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
index 154a5b09866..827f44b669e 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.stories.tsx
@@ -141,3 +141,20 @@ export const LabelElement = () => (
         </DatagridConfigurable>
     </Wrapper>
 );
+
+export const NullChildren = () => (
+    <Wrapper>
+        <DatagridConfigurable
+            resource="books1"
+            data={data}
+            sort={{ field: 'title', order: 'ASC' }}
+            bulkActionButtons={false}
+        >
+            {false && <TextField source="id" />}
+            <TextField source="title" label="Original title" />
+            <TextField source="author" />
+            <TextField source="year" />
+            <EditButton />
+        </DatagridConfigurable>
+    </Wrapper>
+);
diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
index 5b9bffb3c1c..f9824c6d29e 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
@@ -58,29 +58,23 @@ export const DatagridConfigurable = ({
 
     React.useEffect(() => {
         // first render, or the preference have been cleared
-        const columns = React.Children.map(props.children, (child, index) =>
-            React.isValidElement(child)
-                ? {
-                      index: String(index),
-                      source: child.props.source,
-                      label:
-                          child.props.label &&
-                          typeof child.props.label === 'string' // this list is serializable, so we can't store ReactElement in it
-                              ? child.props.label
-                              : child.props.source
-                              ? //  force the label to be the source
-                                undefined
-                              : // no source or label, generate a label
-                                translate(
-                                    'ra.configurable.Datagrid.unlabeled',
-                                    {
-                                        column: index,
-                                        _: `Unlabeled column #%{column}`,
-                                    }
-                                ),
-                  }
-                : null
-        ).filter(column => column != null);
+        const columns = React.Children.toArray(props.children)
+            .filter(child => React.isValidElement(child))
+            .map((child: React.ReactElement, index) => ({
+                index: String(index),
+                source: child.props.source,
+                label:
+                    child.props.label && typeof child.props.label === 'string' // this list is serializable, so we can't store ReactElement in it
+                        ? child.props.label
+                        : child.props.source
+                        ? //  force the label to be the source
+                          undefined
+                        : // no source or label, generate a label
+                          translate('ra.configurable.Datagrid.unlabeled', {
+                              column: index,
+                              _: `Unlabeled column #%{column}`,
+                          }),
+            }));
         if (columns.length !== availableColumns.length) {
             setAvailableColumns(columns);
             setOmit(omit);