Create a codemod to replace Datagrid by DataTable

packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Basic.input.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { List, Datagrid, TextField } from 'react-admin';
+
+const PostList = () => (
+    <List>
+        <Datagrid>
+            <TextField source="id" label="Post number" />
+            <TextField source="title" />
+            <TextField source="body" />
+        </Datagrid>
+    </List>
+);
+
+export default PostList;

packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Basic.output.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { List, DataTable } from 'react-admin';
+
+const PostList = () => (
+    <List>
+        <DataTable>
+            <DataTable.Col source="id" label="Post number" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="body" />
+        </DataTable>
+    </List>
+);
+
+export default PostList;

packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-ManyChildren.input.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import {
+    List,
+    Datagrid,
+    TextField,
+    EmailField,
+    NumberField,
+    EditButton,
+    ReferenceField,
+    UrlField,
+    DateField,
+} from 'react-admin';
+
+// @ts-ignore
+import { MyCustomField } from './MyCustomField';
+
+const PostList = () => (
+    <List>
+        <Datagrid>
+            <TextField source="id" />
+            <EmailField source="email" />
+            <EmailField
+                source="author_email"
+                label="Email of the author of the post"
+            />
+            <NumberField source="nb_vues" />
+            <NumberField
+                source="price"
+                locales="fr-FR"
+                options={{ style: 'currency', currency: 'USD' }}
+            />
+            <TextField source="title" />
+            <ReferenceField source="userId" reference="users">
+                <TextField source="name" />
+            </ReferenceField>
+            <UrlField source="url" />
+            <DateField source="createdAt" />
+            <MyCustomField source="code" />
+            <EditButton />
+        </Datagrid>
+    </List>
+);
+
+export default PostList;

packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-ManyChildren.output.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import {
+    List,
+    DataTable,
+    TextField,
+    EmailField,
+    EditButton,
+    ReferenceField,
+    UrlField,
+    DateField,
+} from 'react-admin';
+
+// @ts-ignore
+import { MyCustomField } from './MyCustomField';
+
+const PostList = () => (
+    <List>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="email">
+                <EmailField source="email" />
+            </DataTable.Col>
+            <DataTable.Col label="Email of the author of the post">
+                <EmailField
+                    source="author_email"
+                    label="Email of the author of the post"
+                />
+            </DataTable.Col>
+            <DataTable.NumberCol source="nb_vues" />
+            <DataTable.NumberCol
+                source="price"
+                locales="fr-FR"
+                options={{ style: 'currency', currency: 'USD' }}
+            />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="userId">
+                <ReferenceField source="userId" reference="users">
+                    <TextField source="name" />
+                </ReferenceField>
+            </DataTable.Col>
+            <DataTable.Col source="url">
+                <UrlField source="url" />
+            </DataTable.Col>
+            <DataTable.Col source="createdAt">
+                <DateField source="createdAt" />
+            </DataTable.Col>
+            <DataTable.Col source="code">
+                <MyCustomField source="code" />
+            </DataTable.Col>
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
+    </List>
+);
+
+export default PostList;

packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Props.input.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { List, Datagrid, TextField, useRecordContext } from 'react-admin';
+
+const CustomEmpty = () => <div>No posts found</div>;
+
+const PostPanel = () => {
+    const record = useRecordContext();
+    return <div dangerouslySetInnerHTML={{ __html: record.body }} />;
+};
+
+const postRowStyle = (record, index) => ({
+    backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
+});
+
+const PostList = () => (
+    <List>
+        <Datagrid
+            bulkActionButtons={false}
+            empty={<CustomEmpty />}
+            expand={<PostPanel />}
+            expandSingle
+            rowClick={false}
+            optimized
+            rowStyle={postRowStyle}
+            sx={{
+                '& .RaDatagrid-row': {
+                    backgroundColor: 'white',
+                },
+                '& .RaDatagrid-row:hover': {
+                    backgroundColor: '#f5f5f5',
+                },
+            }}>
+            <TextField source="id" />
+            <TextField source="title" />
+            <TextField source="body" />
+        </Datagrid>
+    </List>
+);
+
+export default PostList;

packages/ra-core/codemods/__testfixtures__/replace-Datagrid-DataTable-Props.output.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { List, DataTable, useRecordContext } from 'react-admin';
+
+const CustomEmpty = () => <div>No posts found</div>;
+
+const PostPanel = () => {
+    const record = useRecordContext();
+    return <div dangerouslySetInnerHTML={{ __html: record.body }} />;
+};
+
+const postRowStyle = (record, index) => ({
+    backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
+});
+
+const PostList = () => (
+    <List>
+        <DataTable
+            bulkActionButtons={false}
+            empty={<CustomEmpty />}
+            expand={<PostPanel />}
+            expandSingle
+            rowClick={false}
+            rowSx={postRowStyle}
+            sx={{
+                '& .RaDataTable-row': {
+                    backgroundColor: 'white',
+                },
+                '& .RaDataTable-row:hover': {
+                    backgroundColor: '#f5f5f5',
+                },
+            }}>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="body" />
+        </DataTable>
+    </List>
+);
+
+export default PostList;

packages/ra-core/codemods/__tests__/replace-Datagrid-DataTable.spec.ts

@@ -0,0 +1,25 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+jest.autoMockOff();
+
+defineTest(
+    __dirname,
+    'replace-Datagrid-DataTable',
+    null,
+    'replace-Datagrid-DataTable-Basic',
+    { parser: 'tsx' }
+);
+defineTest(
+    __dirname,
+    'replace-Datagrid-DataTable',
+    null,
+    'replace-Datagrid-DataTable-ManyChildren',
+    { parser: 'tsx' }
+);
+defineTest(
+    __dirname,
+    'replace-Datagrid-DataTable',
+    null,
+    'replace-Datagrid-DataTable-Props',
+    { parser: 'tsx' }
+);