[codemod] Fix experimentalFeatures codemod for typescript parser (#…

…14150)

packages/x-codemod/src/util/removeObjectProperty.ts

@@ -1,4 +1,4 @@
-import type { Collection, JSCodeshift, JSXAttribute } from 'jscodeshift';
+import type { Collection, JSCodeshift, JSXAttribute, Identifier } from 'jscodeshift';
 
 const getAttributeName = (attribute: JSXAttribute): string =>
   attribute.name.type === 'JSXIdentifier' ? attribute.name.name : attribute.name.name.name;
@@ -48,11 +48,21 @@ export default function removeObjectProperty({
         return;
       }
       const definedKeys: any[] = [];
-      const objectProperties = j(targetAttribute).find(j.Property);
-      objectProperties.forEach((path) => {
-        const objectKey = (path.value.key as any).name as any;
-        definedKeys.push(objectKey);
+      const properties = j(targetAttribute).find(j.Property);
+      const objectProperties = j(targetAttribute).find(j.ObjectProperty);
+
+      const propertiesToProcess = properties.length > 0 ? properties : objectProperties;
+      if (propertiesToProcess.length === 0) {
+        return;
+      }
+
+      propertiesToProcess.forEach((path) => {
+        const keyName = (path.value.key as Identifier).name;
+        if (keyName) {
+          definedKeys.push(keyName);
+        }
       });
+
       if (definedKeys.length === 1 && definedKeys[0] === propKey) {
         // only that property is defined, remove the whole prop
         j(element)
@@ -62,8 +72,9 @@ export default function removeObjectProperty({
             j(path).remove();
           });
       } else {
-        objectProperties.forEach((path) => {
-          if ((path.value.key as any).name === propKey) {
+        propertiesToProcess.forEach((path) => {
+          const name = (path.value.key as Identifier).name;
+          if (name === propKey) {
             j(path).remove();
           }
         });

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts

@@ -10,18 +10,39 @@ function read(fileName) {
 
 describe('v7.0.0/data-grid', () => {
   describe('remove-stabilized-experimentalFeatures', () => {
-    it('transforms props as needed', () => {
+    it('transforms props as needed - js', () => {
       const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {});
 
       const expected = read('./expected.spec.js');
       expect(actual).to.equal(expected, 'The transformed version should be correct');
     });
 
-    it('should be idempotent', () => {
+    it('should be idempotent - js', () => {
       const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {});
 
       const expected = read('./expected.spec.js');
       expect(actual).to.equal(expected, 'The transformed version should be correct');
     });
+
+    it('transforms props as needed - ts', () => {
+      const actual = transform(
+        { source: read('./ts-actual.spec.tsx') },
+        { jscodeshift: jscodeshift.withParser('tsx') },
+        {},
+      );
+      const expected = read('./ts-expected.spec.tsx');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent - ts', () => {
+      const actual = transform(
+        { source: read('./ts-expected.spec.tsx') },
+        { jscodeshift: jscodeshift.withParser('tsx') },
+        {},
+      );
+
+      const expected = read('./ts-expected.spec.tsx');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
   });
 });

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-actual.spec.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+// prettier-ignore
+function App() {
+  return (
+    <React.Fragment>
+      <DataGrid
+        experimentalFeatures={{
+          columnGrouping: true,
+          clipboardPaste: true,
+        }}
+      />
+      <DataGridPro
+        experimentalFeatures={{
+          lazyLoading: true,
+          ariaV7: true,
+        }}
+      />
+      <DataGridPremium
+        experimentalFeatures={{
+          columnGrouping: true,
+          clipboardPaste: true,
+          lazyLoading: true,
+          ariaV7: true,
+        }}
+      />
+      <DataGridPro {...props} />
+    </React.Fragment>
+  );
+}
+
+export default App;

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/ts-expected.spec.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+// prettier-ignore
+function App() {
+  return (
+    (<React.Fragment>
+      <DataGrid />
+      <DataGridPro />
+      <DataGridPremium />
+      <DataGridPro {...props} />
+    </React.Fragment>)
+  );
+}
+
+export default App;