Chore: Add lint rule preferring functional components, suppress existing violations (#112377)

add lint rule preferring functional components, suppress existing violations

eslint.config.js

@@ -8,6 +8,7 @@ const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
 const lodashPlugin = require('eslint-plugin-lodash');
 const barrelPlugin = require('eslint-plugin-no-barrel-files');
 const reactPlugin = require('eslint-plugin-react');
+const reactPreferFunctionComponentPlugin = require('eslint-plugin-react-prefer-function-component');
 const testingLibraryPlugin = require('eslint-plugin-testing-library');
 const unicornPlugin = require('eslint-plugin-unicorn');
 
@@ -140,6 +141,7 @@ module.exports = [
       'no-barrel-files': barrelPlugin,
       '@grafana': grafanaPlugin,
       unicorn: unicornPlugin,
+      'react-prefer-function-component': reactPreferFunctionComponentPlugin,
     },
 
     settings: {
@@ -156,6 +158,7 @@ module.exports = [
       '@grafana/no-border-radius-literal': 'error',
       '@grafana/no-unreduced-motion': 'error',
       '@grafana/no-restricted-img-srcs': 'error',
+      'react-prefer-function-component/react-prefer-function-component': 'error',
       'react/prop-types': 'off',
       // need to ignore emotion's `css` prop, see https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md#rule-options
       'react/no-unknown-property': ['error', { ignore: ['css'] }],

package.json

@@ -198,6 +198,7 @@
     "eslint-plugin-no-barrel-files": "^1.1.1",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-prefer-function-component": "4.0.1",
     "eslint-plugin-testing-library": "^7.0.0",
     "eslint-plugin-unicorn": "^56.0.0",
     "eslint-scope": "^8.1.0",

packages/grafana-runtime/src/services/pluginExtensions/utils.test.tsx

@@ -108,11 +108,15 @@ describe('Plugin Extensions / Utils', () => {
 
     test('should work when using class components', () => {
       const props = {};
+      // this specifically needs to be a class component
+      // eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
       const Component1 = class extends React.Component<{}> {
         render() {
           return <div>Test 1</div>;
         }
       };
+      // this specifically needs to be a class component
+      // eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
       const Component2 = class extends React.Component<{}> {
         render() {
           return <div>Test 2</div>;

yarn.lock

@@ -16321,6 +16321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-prefer-function-component@npm:4.0.1":
+  version: 4.0.1
+  resolution: "eslint-plugin-react-prefer-function-component@npm:4.0.1"
+  checksum: 10/dfb1ceb098342320cc82429e227db91a72e7e4875795913fb481beb64669080354279a4ad9a3c53060b390825c7d08c352f938f121ef1acb40da6d969199c1b0
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:7.37.5":
   version: 7.37.5
   resolution: "eslint-plugin-react@npm:7.37.5"
@@ -18445,6 +18452,7 @@ __metadata:
     eslint-plugin-no-barrel-files: "npm:^1.1.1"
     eslint-plugin-react: "npm:7.37.5"
     eslint-plugin-react-hooks: "npm:5.2.0"
+    eslint-plugin-react-prefer-function-component: "npm:4.0.1"
     eslint-plugin-testing-library: "npm:^7.0.0"
     eslint-plugin-unicorn: "npm:^56.0.0"
     eslint-scope: "npm:^8.1.0"