Create rule S6790: Disallow using string references

its/ruling/src/test/expected/jsts/ant-design/javascript-S6790.json

@@ -0,0 +1,6 @@
+{
+"ant-design:components/upload/__tests__/upload.test.js": [
+37,
+43
+]
+}

its/ruling/src/test/expected/jsts/console/typescript-S6790.json

@@ -0,0 +1,72 @@
+{
+"console:src/components/ApiLayover/ApiLayover.tsx": [
+35
+],
+"console:src/components/Datepicker/Datepicker.tsx": [
+83
+],
+"console:src/components/Help/Alert.tsx": [
+28,
+38
+],
+"console:src/components/Help/Help.tsx": [
+28,
+36
+],
+"console:src/components/PopupWrapper/PopupWrapper.tsx": [
+47,
+56
+],
+"console:src/components/ScrollBox/ScrollBox.tsx": [
+35,
+49,
+53
+],
+"console:src/components/Tether/Tether.tsx": [
+42,
+42,
+43,
+74
+],
+"console:src/components/ToggleButton/ToggleButton.tsx": [
+59,
+83
+],
+"console:src/views/ProjectRootView/AddModelPopup.tsx": [
+139,
+163
+],
+"console:src/views/ProjectRootView/EditModelPopup.tsx": [
+145,
+186
+],
+"console:src/views/ProjectSettingsView/ProjectSettingsView.tsx": [
+82,
+216
+],
+"console:src/views/RootView/RootView.tsx": [
+26,
+50
+],
+"console:src/views/models/DatabrowserView/Cell.tsx": [
+116,
+127
+],
+"console:src/views/models/DatabrowserView/Cell/DefaultCell.tsx": [
+11
+],
+"console:src/views/models/DatabrowserView/Cell/FloatCell.tsx": [
+44
+],
+"console:src/views/models/DatabrowserView/Cell/IntCell.tsx": [
+28
+],
+"console:src/views/models/DatabrowserView/Cell/JsonCell.tsx": [
+11
+],
+"console:src/views/models/DatabrowserView/Cell/StringCell.tsx": [
+37,
+49,
+71
+]
+}

its/ruling/src/test/expected/jsts/redux/javascript-S6790.json

@@ -0,0 +1,11 @@
+{
+"redux:examples/real-world/components/Explore.js": [
+19,
+26,
+44
+],
+"redux:examples/todos-with-undo/components/AddTodo.js": [
+6,
+18
+]
+}

its/ruling/src/test/expected/jsts/sonar-web/javascript-S6790.json

@@ -0,0 +1,37 @@
+{
+"sonar-web:src/main/js/apps/background-tasks/search.js": [
+82,
+84,
+110,
+143
+],
+"sonar-web:src/main/js/apps/background-tasks/stats.js": [
+23,
+37,
+40,
+47,
+62,
+72
+],
+"sonar-web:src/main/js/apps/overview/components/domain-timeline.js": [
+165,
+179
+],
+"sonar-web:src/main/js/apps/project-permissions/search.js": [
+33
+],
+"sonar-web:src/main/js/apps/projects/search.js": [
+108
+],
+"sonar-web:src/main/js/apps/system/item-log-level.js": [
+28
+],
+"sonar-web:src/main/js/components/charts/bubble-chart.js": [
+100,
+115
+],
+"sonar-web:src/main/js/main/nav/global/global-nav-search.js": [
+76,
+80
+]
+}

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

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

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/NoStringRefsCheck.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 = "S6790")
+public class NoStringRefsCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "no-string-refs";
+  }
+}

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

@@ -0,0 +1,45 @@
+<h2>Why is this an issue?</h2>
+<p>React Refs provide a way to access DOM nodes or React elements created in the render method.</p>
+<p>Older React versions allowed the ref attribute to be a string, like <code>"textInput"</code>, later accessible as <code>this.refs.textInput</code>.
+This is considered legacy code due to multiple reasons:</p>
+<ul>
+  <li> String <code>refs</code> make React slower as they force React to keep track of what component is currently executing. </li>
+  <li> String <code>refs</code> are not composable: if a library puts a ref on the passed child, the user can’t put another ref on it. </li>
+  <li> The owner of a string <code>ref</code> is determined by the currently executing component. </li>
+</ul>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+const Hello = createReactClass({
+  componentDidMount: function() {
+    const component = this.refs.hello; // Noncompliant
+    // ...
+  },
+  render: function() {
+    return &lt;div ref="hello"&gt;Hello, world.&lt;/div&gt;;
+  }
+});
+</pre>
+<p>Instead, reference callbacks should be used. These do not have the limitations mentioned above. When the DOM node is added to the screen, React
+will call the <code>ref</code> callback with the DOM node as the argument. When that DOM node is removed, React will call your <code>ref</code>
+callback with <code>null</code>. One should return <code>undefined</code> from the <code>ref</code> callback.</p>
+<pre data-diff-id="1" data-diff-type="compliant">
+const Hello = createReactClass({
+  componentDidMount: function() {
+    const component = this.hello;
+    // ...
+  },
+  render() {
+    return &lt;div ref={(c) =&gt; { this.hello = c; }}&gt;Hello, world.&lt;/div&gt;;
+  }
+});
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> React Documentation - <a href="https://react.dev/reference/react-dom/components/common#ref-callback"><code>ref</code> callback function</a>
+  </li>
+  <li> React Documentation - <a href="https://legacy.reactjs.org/docs/refs-and-the-dom.html">Refs and the DOM</a> </li>
+  <li> React Documentation - <a href="https://react.dev/learn/manipulating-the-dom-with-refs">Manipulating the DOM with Refs</a> </li>
+  <li> React Documentation - <a href="https://react.dev/reference/react/useRef"><code>useRef</code></a> </li>
+  <li> React Documentation - <a href="https://react.dev/reference/react/createRef#createref"><code>createRef</code></a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+  "title": "String references should not be used",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6790",
+  "sqKey": "S6790",
+  "scope": "All",
+  "quickfix": "unknown",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "MEDIUM",
+      "RELIABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

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

@@ -292,6 +292,7 @@
     "S6772",
     "S6774",
     "S6775",
+    "S6790",
     "S6793",
     "S6807",
     "S6811",