Create rule S6788: Disallow usage of findDOMNode (`react/no-find-dom-…

…node`) (#4359)

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

@@ -0,0 +1,20 @@
+{
+"console:src/components/Help/Alert.tsx": [
+28
+],
+"console:src/components/Help/Help.tsx": [
+28
+],
+"console:src/components/PopupWrapper/PopupWrapper.tsx": [
+56
+],
+"console:src/views/ProjectRootView/AddModelPopup.tsx": [
+163
+],
+"console:src/views/ProjectRootView/EditModelPopup.tsx": [
+186
+],
+"console:src/views/ProjectSettingsView/ProjectSettingsView.tsx": [
+216
+]
+}

its/ruling/src/test/expected/jsts/desktop/typescript-S6788.json

@@ -0,0 +1,6 @@
+{
+"desktop:app/src/ui/lib/list/list.tsx": [
+1016,
+1240
+]
+}

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

@@ -0,0 +1,19 @@
+{
+"sonar-web:src/main/js/components/mixins/resize-mixin.js": [
+19
+],
+"sonar-web:src/main/js/components/mixins/tooltips-mixin.js": [
+16
+],
+"sonar-web:src/main/js/main/nav/component/component-nav.js": [
+37
+],
+"sonar-web:tests/apps/background-tasks-test.js": [
+68
+],
+"sonar-web:tests/apps/system-test.js": [
+15,
+73,
+89
+]
+}

packages/jsts/src/rules/S6788/decorator.ts

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+// https://sonarsource.github.io/rspec/#/rspec/S6788/javascript
+
+import { Rule } from 'eslint';
+import { interceptReport } from '../helpers';
+
+// Rewording issue message reported by the core implementation.
+export function decorate(rule: Rule.RuleModule): Rule.RuleModule {
+ rule.meta!.messages!['noFindDOMNode'] =
+ "Do not use findDOMNode. It doesn't work with function components and is deprecated in StrictMode.";
+ return interceptReport(rule, (context, reportDescriptor) => {
+ context.report({
+ ...reportDescriptor,
+ });
+ });
+}

packages/jsts/src/rules/S6788/index.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+import { rules } from 'eslint-plugin-react';
+import { decorate } from './decorator';
+
+export const rule = decorate(rules['no-find-dom-node']);

packages/jsts/src/rules/S6788/unit.test.ts

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+import { rule } from './';
+import { TypeScriptRuleTester } from '../tools';
+
+const ruleTester = new TypeScriptRuleTester();
+
+ruleTester.run(`Decorated rule should reword the issue message`, rule, {
+ valid: [
+ {
+ code: `type Foo = () => number;`,
+ },
+ ],
+ invalid: [
+ {
+ code: `
+class MyComponent extends Component {
+ componentDidMount() {
+ findDOMNode(this).scrollIntoView();
+ }
+ render() {
+ return <div />
+ }
+}
+ `,
+ errors: [
+ {
+ message:
+ "Do not use findDOMNode. It doesn't work with function components and is deprecated in StrictMode.",
+ },
+ ],
+ },
+ ],
+});

packages/jsts/src/rules/index.ts

@@ -110,6 +110,7 @@ import { rule as S3415 } from './S3415'; // inverted-assertion-arguments
 import { rule as S6477 } from './S6477'; // jsx-key
 import { rule as S6481 } from './S6481'; // jsx-no-constructed-context-values
 import { rule as S6749 } from './S6749'; // jsx-no-useless-fragment
+import { rule as S6788 } from './S6788'; // no-find-dom-node
 import { rule as S1439 } from './S1439'; // label-position
 import { rule as S5148 } from './S5148'; // link-with-target-blank
 import { rule as S4622 } from './S4622'; // max-union-size
@@ -388,6 +389,7 @@ rules['inverted-assertion-arguments'] = S3415;
 rules['jsx-key'] = S6477;
 rules['jsx-no-constructed-context-values'] = S6481;
 rules['jsx-no-useless-fragment'] = S6749;
+rules['no-find-dom-node'] = S6788;
 rules['label-position'] = S1439;
 rules['link-with-target-blank'] = S5148;
 rules['max-union-size'] = S4622;

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

@@ -265,6 +265,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
  NoExtendNativeCheck.class,
  NoExtraBindCheck.class,
  NoExtraBooleanCastCheck.class,
+ NoFindDomNodeCheck.class,
  NoForInArrayCheck.class,
  NoHardcodedIpCheck.class,
  NoHookSetterInBodyCheck.class,

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

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

@@ -0,0 +1,51 @@
+<h2>Why is this an issue?</h2>
+<p>In React, <code>findDOMNode</code> is used to get the browser DOM node given a component instance. However, using <code>findDOMNode</code> is
+fragile because the connection between the JSX node and the code manipulating the corresponding DOM node is not explicit. For example, changing the
+external structure of returned JSX will affect the return value of <code>findDOMNode</code>. There are also other <a
+href="https://react.dev/reference/react-dom/findDOMNode#caveats">caveats</a> when using <code>findDOMNode</code>.</p>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+import { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+
+class AutoselectingInput extends Component {
+ componentDidMount() {
+ const input = findDOMNode(this); // Noncompliant: findDOMNode is deprecated
+ input.select();
+ }
+
+ render() {
+ return &lt;input defaultValue="Hello" /&gt;
+ }
+}
+</pre>
+<p>Instead, one should get the component’s own DOM node from a ref. Pass your ref as the <code>ref</code> attribute to the JSX tag for which you want
+to get the DOM node. This tells React to put this <code>&lt;input&gt;</code>’s DOM node into <code>inputRef.current</code>.</p>
+<p>Use <code>createRef</code> to manage a specific DOM node. In modern React without class components, the equivalent code would call
+<code>useRef</code> instead.</p>
+<pre data-diff-id="1" data-diff-type="compliant">
+import { createRef, Component } from 'react';
+
+class AutoselectingInput extends Component {
+ inputRef = createRef(null);
+
+ componentDidMount() {
+ const input = this.inputRef.current; // Always points to the input element
+ input.select();
+ }
+
+ render() {
+ return (
+ &lt;input ref={this.inputRef} defaultValue="Hello" /&gt;
+ );
+ }
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+ <li> React Documentation - <a href="https://react.dev/reference/react-dom/findDOMNode"><code>findDOMNode</code></a> </li>
+ <li> React Documentation - <a href="https://react.dev/reference/react/createRef"><code>createRef</code></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/learn/manipulating-the-dom-with-refs">Manipulating the DOM with Refs</a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+ "title": "React\u0027s \"findDOMNode\" should not be used",
+ "type": "CODE_SMELL",
+ "status": "ready",
+ "remediation": {
+ "func": "Constant\/Issue",
+ "constantCost": "5min"
+ },
+ "tags": [
+ "react"
+ ],
+ "defaultSeverity": "Major",
+ "ruleSpecification": "RSPEC-6788",
+ "sqKey": "S6788",
+ "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",
+ "S6788",
  "S6793",
  "S6807",
  "S6811",