From 727cc390c8b0d2967ed0d9d03ed7836ebb97c864 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Thu, 7 Mar 2024 23:54:21 +0530
Subject: [PATCH] [mui-codemod] Fix merging of slotProps and componentProps
 (#41323)

---
 .../alert-props/alert-props.test.js           |  2 +-
 .../alert-props/test-cases/actual.js          |  6 +++
 .../alert-props/test-cases/expected.js        | 14 +++++-
 .../alert-props/test-cases/theme.actual.js    | 11 +++++
 .../alert-props/test-cases/theme.expected.js  | 45 +++++++++++++++----
 .../slider-props/slider-props.test.js         |  2 +-
 .../slider-props/test-cases/actual.js         |  6 +++
 .../slider-props/test-cases/expected.js       | 14 +++++-
 .../slider-props/test-cases/theme.actual.js   | 11 +++++
 .../slider-props/test-cases/theme.expected.js | 45 +++++++++++++++----
 .../utils/replaceComponentsWithSlots.js       | 23 +++++++++-
 11 files changed, 156 insertions(+), 23 deletions(-)

diff --git a/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js b/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js
index d9741ce1a1e13c..761af47c09f51d 100644
--- a/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js
+++ b/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js
@@ -31,7 +31,7 @@ describe('@mui/codemod', () => {
         const actual = transform(
           { source: read('./test-cases/theme.actual.js') },
           { jscodeshift },
-          { printOptions: { trailingComma: true } },
+          { printOptions: { trailingComma: false } },
         );
 
         const expected = read('./test-cases/theme.expected.js');
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js
index 380a640bce04fc..fd952d3fa91fcf 100644
--- a/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js
+++ b/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js
@@ -16,3 +16,9 @@ import Alert from '@mui/material/Alert';
   slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
   componentsProps={{ closeButton: componentsButtonProps }}
 />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps, closeIcon: componentsIconProps }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js
index 1c1a02c7b7e601..0b05305960385b 100644
--- a/packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js
+++ b/packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js
@@ -17,4 +17,16 @@ import Alert from '@mui/material/Alert';
   }} />;
 <Alert
   slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
-  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }} />;
+  slotProps={{ closeIcon: slotsIconProps, closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  } }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  }, closeIcon: {
+    ...componentsIconProps,
+    ...slotsIconProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js
index 53747aee31ea17..10591ba1dfb8b1 100644
--- a/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js
+++ b/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js
@@ -28,3 +28,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon, closeButton: SlotsButton },
+      componentsProps: { closeButton: componentsButtonProps, closeIcon: componentsIconProps },
+      slotProps: { closeIcon: slotsIconProps, closeButton: slotsButtonProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js
index dfab24532bd162..c3f2cb05133264 100644
--- a/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js
+++ b/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js
@@ -2,12 +2,12 @@ fn({
   MuiAlert: {
     defaultProps: {
       slots: {
-        closeButton: ComponentsButton,
+        closeButton: ComponentsButton
       },
 
       slotProps: {
-        closeButton: componentsButtonProps,
-      },
+        closeButton: componentsButtonProps
+      }
     },
   },
 });
@@ -17,13 +17,13 @@ fn({
     defaultProps: {
       slots: {
         closeButton: ComponentsButton,
-        closeIcon: SlotsIcon,
+        closeIcon: SlotsIcon
       },
 
       slotProps: {
         closeButton: componentsButtonProps,
-        closeIcon: slotsIconProps,
-      },
+        closeIcon: slotsIconProps
+      }
     },
   },
 });
@@ -33,13 +33,40 @@ fn({
     defaultProps: {
       slots: {
         closeButton: SlotsButton,
-        closeIcon: SlotsIcon,
+        closeIcon: SlotsIcon
       },
 
       slotProps: {
-        closeButton: slotsButtonProps,
-        closeIcon: slotsIconProps,
+        closeButton: {
+          ...componentsButtonProps,
+          ...slotsButtonProps
+        },
+
+        closeIcon: slotsIconProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon
       },
+
+      slotProps: {
+        closeButton: {
+          ...componentsButtonProps,
+          ...slotsButtonProps
+        },
+
+        closeIcon: {
+          ...componentsIconProps,
+          ...slotsIconProps
+        }
+      }
     },
   },
 });
diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js
index b6d5682eb2a76a..033acf231969bd 100644
--- a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js
+++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js
@@ -31,7 +31,7 @@ describe('@mui/codemod', () => {
         const actual = transform(
           { source: read('./test-cases/theme.actual.js') },
           { jscodeshift },
-          { printOptions: { trailingComma: true } },
+          { printOptions: { trailingComma: false } },
         );
 
         const expected = read('./test-cases/theme.expected.js');
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js
index c73ad39187900b..1ac48c7504c528 100644
--- a/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js
+++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js
@@ -16,3 +16,9 @@ import Slider from '@mui/material/Slider';
   slotProps={{ rail: slotsRailProps, track: slotsTrackProps }}
   componentsProps={{ track: componentsTrackProps }}
 />;
+<Slider
+  slots={{ rail: SlotsRail, track: SlotsTrack }}
+  components={{ Track: ComponentsTrack }}
+  slotProps={{ rail: slotsRailProps, track: slotsTrackProps }}
+  componentsProps={{ track: componentsTrackProps, rail: componentsRailProps}}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js
index c1809d70cfa6eb..20037c1639358c 100644
--- a/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js
+++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js
@@ -17,4 +17,16 @@ import Slider from '@mui/material/Slider';
   }} />;
 <Slider
   slots={{ rail: SlotsRail, track: SlotsTrack }}
-  slotProps={{ rail: slotsRailProps, track: slotsTrackProps }} />;
+  slotProps={{ rail: slotsRailProps, track: {
+    ...componentsTrackProps,
+    ...slotsTrackProps
+  } }} />;
+<Slider
+  slots={{ rail: SlotsRail, track: SlotsTrack }}
+  slotProps={{ track: {
+    ...componentsTrackProps,
+    ...slotsTrackProps
+  }, rail: {
+    ...componentsRailProps,
+    ...slotsRailProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js
index 5b68897f2ddc97..90df34bdd843f5 100644
--- a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js
+++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js
@@ -28,3 +28,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiSlider: {
+    defaultProps: {
+      components: { Track: ComponentsTrack },
+      slots: { rail: SlotsRail, track: SlotsTrack },
+      componentsProps: { track: componentsTrackProps, rail: componentsRailProps },
+      slotProps: { rail: slotsRailProps, track: slotsTrackProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js
index 74c5dab30c7553..0ef10d93f7a880 100644
--- a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js
+++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js
@@ -2,12 +2,12 @@ fn({
   MuiSlider: {
     defaultProps: {
       slots: {
-        track: ComponentsTrack,
+        track: ComponentsTrack
       },
 
       slotProps: {
-        track: componentsTrackProps,
-      },
+        track: componentsTrackProps
+      }
     },
   },
 });
@@ -17,13 +17,13 @@ fn({
     defaultProps: {
       slots: {
         track: ComponentsTrack,
-        rail: SlotsRail,
+        rail: SlotsRail
       },
 
       slotProps: {
         track: componentsTrackProps,
-        rail: slotsRailProps,
-      },
+        rail: slotsRailProps
+      }
     },
   },
 });
@@ -33,13 +33,40 @@ fn({
     defaultProps: {
       slots: {
         track: SlotsTrack,
-        rail: SlotsRail,
+        rail: SlotsRail
       },
 
       slotProps: {
-        track: slotsTrackProps,
-        rail: slotsRailProps,
+        track: {
+          ...componentsTrackProps,
+          ...slotsTrackProps
+        },
+
+        rail: slotsRailProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiSlider: {
+    defaultProps: {
+      slots: {
+        track: SlotsTrack,
+        rail: SlotsRail
       },
+
+      slotProps: {
+        track: {
+          ...componentsTrackProps,
+          ...slotsTrackProps
+        },
+
+        rail: {
+          ...componentsRailProps,
+          ...slotsRailProps
+        }
+      }
     },
   },
 });
diff --git a/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js b/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js
index fb1ee1d87edad4..eaac90c45e6b4c 100644
--- a/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js
+++ b/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js
@@ -69,6 +69,19 @@ function replaceJsxComponentsPropsProp(j, element) {
               key: prop.key.name,
               expression: prop.value,
             });
+          } else {
+            attr.value.expression.properties = attr.value.expression.properties.filter(
+              (p) => p?.key?.name !== prop.key.name,
+            );
+
+            assignObject(j, {
+              target: attr,
+              key: prop.key.name,
+              expression: j.objectExpression([
+                j.spreadElement(prop.value),
+                j.spreadElement(slotProps[prop.key.name]),
+              ]),
+            });
           }
         });
       }
@@ -131,7 +144,15 @@ function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
 
       const slots = existingSlots
         ? existingSlots.value.properties.reduce((acc, prop) => {
-            return { ...acc, [prop.key.name]: prop.value };
+            return {
+              ...acc,
+              [prop.key.name]: components[prop.key.name]
+                ? j.objectExpression([
+                    j.spreadElement(components[prop.key.name]),
+                    j.spreadElement(prop.value),
+                  ])
+                : prop.value,
+            };
           }, {})
         : {};