From 3d4ef92cc552087b12140571dc50ec20aadd6534 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Fri, 25 Aug 2023 08:32:56 -0700
Subject: [PATCH] Fix rename prop migration (#10215)

### WHY are these changes introduced?

`react-rename-component-prop` migration was not working as expected when
there were multiple props on a component

<img width="552" alt="Screenshot 2023-08-24 at 10 12 10 AM"
src="https://github.com/Shopify/polaris/assets/3474483/5ca5de71-f587-49cf-87ea-5fc73d298864">

### WHAT is this pull request doing?

- Adds more test cases
- Fixes migration

<img width="590" alt="Screenshot 2023-08-24 at 10 12 35 AM"
src="https://github.com/Shopify/polaris/assets/3474483/8dc1ee41-1900-4383-81e0-7635b2d2fa0b">

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/odd-owls-know.md                   |  5 ++++
 ...name-component-prop-with-boolean.input.tsx | 11 +++++++++
 ...ame-component-prop-with-boolean.output.tsx | 11 +++++++++
 ...me-component-prop-with-new-value.input.tsx | 14 ++---------
 ...e-component-prop-with-new-value.output.tsx | 16 +++----------
 .../react-rename-component-prop.input.tsx     | 16 +++----------
 .../react-rename-component-prop.output.tsx    | 16 +++----------
 ...nd-component-prop-with-new-value.input.tsx | 23 ++++---------------
 ...d-component-prop-with-new-value.output.tsx | 23 ++++---------------
 .../tests/transform.test.ts                   | 15 +++++++++---
 polaris-migrator/src/utilities/jsx.ts         |  2 +-
 11 files changed, 61 insertions(+), 91 deletions(-)
 create mode 100644 .changeset/odd-owls-know.md
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx

diff --git a/.changeset/odd-owls-know.md b/.changeset/odd-owls-know.md
new file mode 100644
index 00000000000..32f5fedb9ba
--- /dev/null
+++ b/.changeset/odd-owls-know.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Fixed a bug in the rename prop migration
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx
new file mode 100644
index 00000000000..7722c1ec1c5
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+  return (
+    <MyComponent foo="bar" booleanProp>
+      Hello world
+    </MyComponent>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx
new file mode 100644
index 00000000000..aa4c4dde16a
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+  return (
+    <MyComponent foo="bar" variant="boolean-prop-value">
+      Hello world
+    </MyComponent>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
index b8c9f5aad08..45d5fbc5253 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
@@ -1,17 +1,7 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
index 18b133d61b8..3bd57828b80 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
-    <MyComponent newProp="new value">
+    <MyComponent newProp="new-value">
       Hello
       <Child prop="value" />
     </MyComponent>
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
index 4be474e3865..c13f80d2110 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp || props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
-    <MyComponent prop="value">
+    <MyComponent prop="value" foo="bar">
       Hello
       <Child prop="value" />
     </MyComponent>
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
index 9305ddb375b..5a1d02af126 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp || props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
-    <MyComponent newProp="value">
+    <MyComponent newProp="value" foo="bar">
       Hello
       <Child prop="value" />
     </MyComponent>
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
index 0f5b6caf11e..3a50013ffda 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
@@ -1,30 +1,17 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function CompoundComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
-function SubComponent({...props}: any) {
-  return <div {...props} />;
-}
+MyComponent.CompoundComponent = CompoundComponent;
 
 export function App() {
   return (
     <MyComponent>
-      <MyComponent.SubComponent prop="value" />
+      <MyComponent.CompoundComponent prop="value" />
       Hello
       <Child prop="value" />
     </MyComponent>
   );
 }
-
-MyComponent.SubComponent = SubComponent;
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
index 2983b6a8ca5..3a04033b502 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
@@ -1,30 +1,17 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function CompoundComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
-function SubComponent({...props}: any) {
-  return <div {...props} />;
-}
+MyComponent.CompoundComponent = CompoundComponent;
 
 export function App() {
   return (
     <MyComponent>
-      <MyComponent.SubComponent newProp="new value" />
+      <MyComponent.CompoundComponent newProp="new-value" />
       Hello
       <Child prop="value" />
     </MyComponent>
   );
 }
-
-MyComponent.SubComponent = SubComponent;
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
index 304afbe4f8e..551f612f473 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
@@ -16,16 +16,25 @@ const fixtures = [
       componentName: 'MyComponent',
       from: 'prop',
       to: 'newProp',
-      newValue: 'new value',
+      newValue: 'new-value',
     },
   },
   {
     name: 'react-rename-compound-component-prop-with-new-value',
     options: {
-      componentName: 'MyComponent.SubComponent',
+      componentName: 'MyComponent.CompoundComponent',
       from: 'prop',
       to: 'newProp',
-      newValue: 'new value',
+      newValue: 'new-value',
+    },
+  },
+  {
+    name: 'react-rename-component-prop-with-boolean',
+    options: {
+      componentName: 'MyComponent',
+      from: 'booleanProp',
+      to: 'variant',
+      newValue: 'boolean-prop-value',
     },
   },
 ];
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index b351ae5a143..a46c9e608c0 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -165,7 +165,7 @@ export function renameProps(
     const isFromProp = (prop: unknown): prop is keyof typeof props =>
       Object.keys(props).includes(prop as string);
 
-    if (node.type !== 'JSXAttribute' && !isFromProp(node.name.name)) {
+    if (!(node.type === 'JSXAttribute' && isFromProp(node.name.name))) {
       return node;
     }