codemod -> replace the & .RaDatagrid-xxxx key of the sx prop of the Datagrid component by & .RaDataTable-xxxx

Author: erwanMarmelab

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

@@ -80,24 +80,12 @@ const replaceDatagrid = (root, j) => {
 
     // Replace Datagrid with DataTable
     datagridComponents.replaceWith(({ node }) => {
-        // remove the `optimized` attribute if it exists
-        const filtredAttributes = node.openingElement.attributes.filter(
-            attr =>
-                !(j.JSXAttribute.check(attr) && attr.name.name === 'optimized')
-        );
-
-        // rename the `rowStyle` attribute to `rowSx` if it exists
-        const attributes = filtredAttributes.map(attr => {
-            if (j.JSXAttribute.check(attr) && attr.name.name === 'rowStyle') {
-                return j.jsxAttribute(j.jsxIdentifier('rowSx'), attr.value);
-            }
-            return attr;
-        });
+        const attributes = cleanAttributes(node, j);
 
         const openingElement = j.jsxOpeningElement(
             j.jsxIdentifier('DataTable'),
             attributes,
-            node.openingElement.selfClosing
+            [node.openingElement.selfClosing]
         );
         const closingElement = j.jsxClosingElement(
             j.jsxIdentifier('DataTable')
@@ -108,6 +96,55 @@ const replaceDatagrid = (root, j) => {
     return true;
 };
 
+const cleanAttributes = (node, j) => {
+    // remove the `optimized` attribute if it exists
+    const filtredAttributes = node.openingElement.attributes.filter(
+        attr => !(j.JSXAttribute.check(attr) && attr.name.name === 'optimized')
+    );
+
+    // rename the `rowStyle` attribute to `rowSx` if it exists
+    const rowSxRenamedAttributes = filtredAttributes.map(attr => {
+        if (j.JSXAttribute.check(attr) && attr.name.name === 'rowStyle') {
+            return j.jsxAttribute(j.jsxIdentifier('rowSx'), attr.value);
+        }
+        return attr;
+    });
+
+    // rename the keys of the "sx" prop from "& .RaDatagrid-xxxx" to "& .RaDataTable-xxxx"
+    const sxRenamedAttributes = rowSxRenamedAttributes.map(attr => {
+        if (
+            j.JSXAttribute.check(attr) &&
+            attr.name.name === 'sx' &&
+            j.JSXExpressionContainer.check(attr.value)
+        ) {
+            const expression = attr.value.expression;
+            if (j.ObjectExpression.check(expression)) {
+                const properties = expression.properties.map(prop => {
+                    if (
+                        j.ObjectProperty.check(prop) &&
+                        j.Literal.check(prop.key) &&
+                        typeof prop.key.value === 'string'
+                    ) {
+                        const newKey = prop.key.value.replace(
+                            /RaDatagrid-/g,
+                            'RaDataTable-'
+                        );
+                        return j.objectProperty(j.literal(newKey), prop.value);
+                    }
+                    return prop;
+                });
+                return j.jsxAttribute(
+                    j.jsxIdentifier('sx'),
+                    j.jsxExpressionContainer(j.objectExpression(properties))
+                );
+            }
+        }
+        return attr;
+    });
+
+    return sxRenamedAttributes;
+};
+
 const wrapChildren = (root, j) => {
     // Find all instances of Datagrid
     const datagridComponents = root.find(j.JSXElement, {