Create rule S6757 (react/no-this-in-sfc​​): this should not be us…

…ed in functional components (#4155)

its/ruling/src/test/expected/js/file-for-rules/javascript-S1172.json

@@ -18,5 +18,8 @@
 ],
 "file-for-rules:S6304.js": [
 5
+],
+"file-for-rules:S6757.js": [
+2
 ]
 }

its/ruling/src/test/expected/js/file-for-rules/javascript-S139.json

@@ -61,5 +61,8 @@
 "file-for-rules:S6321.js": [
 65,
 100
+],
+"file-for-rules:S6757.js": [
+3
 ]
 }

its/ruling/src/test/expected/js/file-for-rules/javascript-S1451.json

@@ -170,6 +170,9 @@
 "file-for-rules:S6746.js": [
 0
 ],
+"file-for-rules:S6757.js": [
+0
+],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [
 0
 ]

its/ruling/src/test/expected/js/file-for-rules/javascript-S3798.json

@@ -47,6 +47,9 @@
 "file-for-rules:S6442.js": [
 3
 ],
+"file-for-rules:S6757.js": [
+2
+],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [
 2,
 8

its/ruling/src/test/expected/js/file-for-rules/javascript-S6757.json

@@ -0,0 +1,5 @@
+{
+"file-for-rules:S6757.js": [
+3
+]
+}

its/ruling/src/test/expected/js/javascript-test-sources/javascript-S6757.json

@@ -0,0 +1,19 @@
+{
+"javascript-test-sources:src/ace/src/edit_session/bracket_match.js": [
+114,
+171
+],
+"javascript-test-sources:src/ace/src/editor.js": [
+2518,
+2519,
+2521
+],
+"javascript-test-sources:src/ace/src/layer/font_metrics.js": [
+103,
+111
+],
+"javascript-test-sources:src/ace/src/mode/folding/mixed.js": [
+18,
+20
+]
+}

its/ruling/src/test/expected/js/react-cloud-music/javascript-S6757.json

@@ -0,0 +1,8 @@
+{
+"react-cloud-music:src/baseUI/music-note/index.jsx": [
+47,
+48,
+49,
+51
+]
+}

its/sources/file-for-rules/S6757.js

@@ -0,0 +1,7 @@
+import React from 'react';
+function MyComponent(props){
+  const foo = this.props.bar; // Noncompliant: remove 'this'
+  return (
+      <div>{foo}</div>
+  );
+}

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java

@@ -293,6 +293,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       NoSelfCompareCheck.class,
       NoSparseArraysCheck.class,
       NoThisAliasCheck.class,
+      NoThisInSfcCheck.class,
       NoUndefInitCheck.class,
       NoUniqKeyCheck.class,
       NoUnknownPropertyCheck.class,

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/NoThisInSfcCheck.java

@@ -0,0 +1,36 @@
+/**
+ * SonarQube JavaScript Plugin
+ * Copyright (C) 2011-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+package org.sonar.javascript.checks;
+
+import org.sonar.check.Rule;
+import org.sonar.plugins.javascript.api.EslintBasedCheck;
+import org.sonar.plugins.javascript.api.JavaScriptRule;
+import org.sonar.plugins.javascript.api.TypeScriptRule;
+
+@TypeScriptRule
+@JavaScriptRule
+@Rule(key = "S6757")
+public class NoThisInSfcCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "no-this-in-sfc";
+  }
+}

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6757.html

@@ -0,0 +1,38 @@
+<h2>Why is this an issue?</h2>
+<p>Referring to <code>this</code> in React functional component would be an error because the components are just regular JavaScript functions and do
+not have an object assotiated with them. The functional components receive its props as a first argument to the component function, so you can access
+then directly, and it is a common style to destructure them right away.</p>
+<pre>
+function UserProfile({firstName, lastName}){
+    return (
+        &lt;div className="user"&gt;{firstName} {lastName}&lt;/div&gt;
+    );
+}
+</pre>
+<p>React also supports legacy class-based components, where <code>this</code> keyword refers to the component instance object, but this style of
+writing components is no longer recommended, and mixing it with functional components will lead to errors.</p>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function MyComponent(props){
+    const foo = this.props.bar; // Noncompliant: remove 'this'
+    return (
+        &lt;div&gt;{foo}&lt;/div&gt;
+    );
+}
+</pre>
+<p>To fix the issue remove <code>this</code> from your functional component code (are you mixing functional and class-based component styles?)</p>
+<pre data-diff-id="1" data-diff-type="compliant">
+function MyComponent(props){
+    const foo = props.bar;
+    return (
+        &lt;div&gt;{foo}&lt;/div&gt;
+    );
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> <a href="https://react.dev/learn/your-first-component#defining-a-component">React - Defining a Component</a> </li>
+  <li> <a href="https://react.dev/learn/passing-props-to-a-component">React - Passing Props to a Component</a> </li>
+  <li> <a href="https://react.dev/reference/react/Component">React - Legacy class components</a> </li>
+</ul>
+

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6757.json

@@ -0,0 +1,29 @@
+{
+  "title": "\"this\" should not be used in functional components",
+  "type": "BUG",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6757",
+  "sqKey": "S6757",
+  "scope": "All",
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "HIGH",
+      "RELIABILITY": "MEDIUM",
+      "SECURITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json

@@ -280,6 +280,7 @@
     "S6749",
     "S6750",
     "S6754",
-    "S6756"
+    "S6756",
+    "S6757"
   ]
 }