[Fix] jsx-no-leaked-render: preserve RHS parens for multiline jsx elements while fixing

Author: akulsr0

lib/rules/jsx-no-leaked-render.js

@@ -82,6 +82,15 @@ function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNod
     if (rightNode.type === 'ConditionalExpression') {
       return fixer.replaceText(reportedNode, `${newText} && (${rightSideText})`);
     }
+    if (rightNode.type === 'JSXElement') {
+      const rightSideTextLines = rightSideText.split('\n');
+      if (rightSideTextLines.length > 1) {
+        const rightSideTextLastLine = rightSideTextLines[rightSideTextLines.length - 1];
+        const indentSpacesStart = Array(rightSideTextLastLine.search(/\S/)).fill(' ').join('');
+        const indentSpacesClose = Array(rightSideTextLastLine.search(/\S/) - 2).fill(' ').join('');
+        return fixer.replaceText(reportedNode, `${newText} && (\n${indentSpacesStart}${rightSideText}\n${indentSpacesClose})`);
+      }
+    }
     if (rightNode.type === 'Literal') {
       return null;
     }

tests/lib/rules/jsx-no-leaked-render.js

@@ -884,6 +884,76 @@ ruleTester.run('jsx-no-leaked-render', rule, {
         line: 3,
         column: 38,
       }],
+    },
+    {
+      code: `
+        const MyComponent = () => {
+          return (
+            <>
+              {someCondition && (
+                <div>
+                  <p>hello</p>
+                </div>
+              )}
+            </>
+          )
+        }
+      `,
+      output: `
+        const MyComponent = () => {
+          return (
+            <>
+              {!!someCondition && (
+                <div>
+                  <p>hello</p>
+                </div>
+              )}
+            </>
+          )
+        }
+      `,
+      options: [{ validStrategies: ['coerce', 'ternary'] }],
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 5,
+        column: 16,
+      }],
+    },
+    {
+      code: `
+        const MyComponent = () => {
+          return (
+            <>
+              {someCondition && (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />
+              )}
+            </>
+          )
+        }
+      `,
+      output: `
+        const MyComponent = () => {
+          return (
+            <>
+              {!!someCondition && (
+                <SomeComponent
+                  prop1={val1}
+                  prop2={val2}
+                />
+              )}
+            </>
+          )
+        }
+      `,
+      options: [{ validStrategies: ['coerce', 'ternary'] }],
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 5,
+        column: 16,
+      }],
     }
   )),
 });