Merge pull request #8376 from marmelab/fix-dc-columns

Fix `<DatagridConfigurable>` ignores children without label or source

Author: slax57

packages/ra-core/src/i18n/TranslationMessages.ts

@@ -179,6 +179,9 @@ export interface TranslationMessages extends StringMap {
         configurable?: {
             customize: string;
             configureMode: string;
+            Datagrid: {
+                unlabeled: string;
+            };
             inspector: {
                 title: string;
                 content: string;

packages/ra-language-english/src/index.ts

@@ -180,6 +180,9 @@ const englishMessages: TranslationMessages = {
         configurable: {
             customize: 'Customize',
             configureMode: 'Configure this page',
+            Datagrid: {
+                unlabeled: 'Unlabeled column #%{column}',
+            },
             inspector: {
                 title: 'Inspector',
                 content: 'Hover the application UI elements to configure them',

packages/ra-language-french/src/index.ts

@@ -186,6 +186,9 @@ const frenchMessages: TranslationMessages = {
         configurable: {
             customize: 'Personnaliser',
             configureMode: 'Configurer cette page',
+            Datagrid: {
+                unlabeled: 'Colonne sans label #%{column}',
+            },
             inspector: {
                 title: 'Inspecteur',
                 content: 'Sélectionner un composant pour le configurer',

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

@@ -6,6 +6,8 @@ import { Box } from '@mui/material';
 import { DatagridConfigurable } from './DatagridConfigurable';
 import { Inspector, InspectorButton } from '../../preferences';
 import { TextField } from '../../field';
+import { EditButton } from '../../button';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 export default { title: 'ra-ui-materialui/list/DatagridConfigurable' };
 
@@ -39,28 +41,33 @@ const data = [
 const AuthorField = () => <TextField source="author" />;
 AuthorField.defaultProps = { label: 'Author' };
 
+const theme = createTheme();
+
 export const Basic = () => (
-    <PreferencesEditorContextProvider>
-        <MemoryRouter>
-            <Inspector />
-            <Box display="flex" justifyContent="flex-end">
-                <InspectorButton />
-            </Box>
-            <Box p={2}>
-                <DatagridConfigurable
-                    resource="books1"
-                    data={data}
-                    sort={{ field: 'title', order: 'ASC' }}
-                    bulkActionButtons={false}
-                >
-                    <TextField source="id" />
-                    <TextField source="title" label="Original title" />
-                    <TextField source="author" />
-                    <TextField source="year" />
-                </DatagridConfigurable>
-            </Box>
-        </MemoryRouter>
-    </PreferencesEditorContextProvider>
+    <ThemeProvider theme={theme}>
+        <PreferencesEditorContextProvider>
+            <MemoryRouter>
+                <Inspector />
+                <Box display="flex" justifyContent="flex-end">
+                    <InspectorButton />
+                </Box>
+                <Box p={2}>
+                    <DatagridConfigurable
+                        resource="books1"
+                        data={data}
+                        sort={{ field: 'title', order: 'ASC' }}
+                        bulkActionButtons={false}
+                    >
+                        <TextField source="id" />
+                        <TextField source="title" label="Original title" />
+                        <TextField source="author" />
+                        <TextField source="year" />
+                        <EditButton />
+                    </DatagridConfigurable>
+                </Box>
+            </MemoryRouter>
+        </PreferencesEditorContextProvider>
+    </ThemeProvider>
 );
 
 export const Omit = () => (

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { useResourceContext, usePreference, useStore } from 'ra-core';
+import {
+    useResourceContext,
+    usePreference,
+    useStore,
+    useTranslate,
+} from 'ra-core';
 
 import { Configurable } from '../../preferences';
 import { Datagrid, DatagridProps } from './Datagrid';
@@ -39,6 +44,8 @@ export const DatagridConfigurable = ({
     const resource = useResourceContext(props);
     const finalPreferenceKey = preferenceKey || `${resource}.datagrid`;
 
+    const translate = useTranslate();
+
     const [availableColumns, setAvailableColumns] = useStore<
         ConfigurableDatagridColumn[]
     >(`preferences.${finalPreferenceKey}.availableColumns`, []);
@@ -52,12 +59,20 @@ 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) &&
-            (child.props.source || child.props.label)
+            React.isValidElement(child)
                 ? {
                       index: String(index),
                       source: child.props.source,
-                      label: child.props.label,
+                      label:
+                          child.props.source || child.props.label
+                              ? child.props.label
+                              : translate(
+                                    'ra.configurable.Datagrid.unlabeled',
+                                    {
+                                        column: index,
+                                        _: `Unlabeled column #%{column}`,
+                                    }
+                                ),
                   }
                 : null
         ).filter(column => column != null);
@@ -114,7 +129,7 @@ export interface DatagridConfigurableProps extends DatagridProps {
 
 export interface ConfigurableDatagridColumn {
     index: string;
-    source: string;
+    source?: string;
     label?: string;
 }