Update ESLint and related plugins

Signed-off-by: Máté Szabó <[email protected]>
jaegertracing · Mar 10, 2023 · fbbc696 · fbbc696
1 parent 38a0870
commit fbbc696
Show file tree

Hide file tree

Showing 11 changed files with 650 additions and 428 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,25 +25,59 @@ module.exports = {
       },
     },
   },
-  extends: ['react-app', 'airbnb', 'prettier', 'prettier/react'],
+  extends: ['airbnb', 'prettier'],
   overrides: [
+    {
+      files: ['*.jsx', '*.test.js'],
+      parser: '@babel/eslint-parser',
+      parserOptions: {
+        requireConfigFile: false,
+        babelOptions: {
+          babelrc: false,
+          configFile: false,
+          presets: ["@babel/preset-react"],
+        },
+      }
+    },
     {
       files: ['*.ts', '*.tsx'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
-        project: './tsconfig.json',
+        project: ['./packages/*/tsconfig.json'],
         tsconfigRootDir: '.',
       },
       plugins: ['@typescript-eslint'],
       rules: {
         'no-unused-vars': 0,
-        '@typescript-eslint/interface-name-prefix': ['error', 'always'],
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'interface',
+            format: ['PascalCase'],
+            prefix: ['I'],
+          },
+        ],
         '@typescript-eslint/no-unused-vars': 1,
+
+        // Disable prop type checks for TSX components, as prop type validation is expected
+        // to be handled by TypeScript there. Stray prop types in components converted from Flow
+        // should eventually be removed.
+        'react/require-default-props': 0,
+        'react/default-props-match-prop-types': 0,
+        'react/no-unused-prop-types': 0,
+      },
+    },
+    {
+      files: ['*.test.js'],
+      rules: {
+        // Used for Jest module mocking.
+        'no-import-assign': 0,
       },
     },
   ],
   rules: {
     /* general */
+    'arrow-body-style': 0,
     'arrow-parens': [1, 'as-needed'],
     'comma-dangle': 0,
     'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
@@ -68,13 +102,16 @@ module.exports = {
     'react/jsx-curly-brace-presence': ['error', 'never'],
     'react/jsx-filename-extension': 0,
     'react/forbid-prop-types': 1,
+    'react/function-component-definition': 0,
     'react/require-default-props': 1,
     'react/no-array-index-key': 1,
+    'react/no-unused-class-component-methods': 0,
     'react/sort-comp': [
       2,
       {
         order: [
           'type-annotations',
+          'defaultProps',
           'statics',
           'state',
           'propTypes',
@@ -89,6 +126,23 @@ module.exports = {
       },
     ],
 
+    // eslint-config-airbnb v18+ relaxations
+    'jsx-a11y/control-has-associated-label': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/state-in-constructor': 0,
+    'react/static-property-placement': 0,
+    'react/jsx-fragments': 0,
+    'react/prop-types': 0,
+    'max-classes-per-file': 0,
+    'no-restricted-exports': [
+      'error',
+      {
+        restrictedNamedExports: ['then'],
+      },
+    ],
+    'prefer-arrow-callback': 0,
+    'prefer-object-spread': 0,
+
     /* import */
     'import/prefer-default-export': 1,
     'import/no-named-default': 0,

diff --git a/BUILD.md b/BUILD.md
@@ -6,10 +6,6 @@
 
 ### Dependencies (dev and otherwise)
 
-#### `eslint-plugin-flowtype`
-
-While, this project does not use [`flow`](https://flow.org/), this ESLint plugin is required because the configuration extends [`react-app`](https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/package.json#L18), which requires this plugin.
-
 #### `@typescript-eslint/eslint-plugin`
 
 ESLint is being used to lint the repo, as a whole. Within `./packages/plexus` (for now), [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin) is used to apply ESLint to TypeScript. This application is localized to plexus via configuring `./packages/plexus/.eslintrc.js` for TypeScript, which means the change in settings is only applied to subdirectories of `./packages/plexus`. This package works really well, but there are quite a few issues it doesn't catch. For that, we use the TypeScript compiler.

diff --git a/package.json b/package.json
@@ -8,18 +8,15 @@
     "url": "https://github.com/jaegertracing/jaeger-ui.git"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "1.13.0",
-    "@typescript-eslint/parser": "1.13.0",
-    "@typescript-eslint/typescript-estree": "5.54.1",
-    "babel-eslint": "10.1.0",
-    "eslint": "5.16.0",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-config-react-app": "3.0.7",
-    "eslint-plugin-flowtype": "^3.4.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@typescript-eslint/eslint-plugin": "3.2.0",
+    "@typescript-eslint/parser": "3.2.0",
+    "eslint": "7.32.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "8.7.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.12.4",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
     "husky": "8.0.3",
     "isomorphic-fetch": "3.0.0",
     "jsdom": "21.1.0",

diff --git a/packages/jaeger-ui/.eslintrc.js b/packages/jaeger-ui/.eslintrc.js
@@ -8,4 +8,13 @@ module.exports = {
     __REACT_APP_VSN_STATE__: false,
     __APP_ENVIRONMENT__: false,
   },
+  overrides: [
+    {
+      // Instruct ESLint not to lint build tooling files as part of the project.
+      files: ['vite.config.ts', 'src/vite-env.d.ts'],
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
 };
diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx
@@ -103,7 +103,7 @@ export default class DetailTableDropdown extends React.PureComponent<TProps> {
               overlayClassName="DetailTableDropdown--Tooltip"
               title={
                 <div className="DetailTableDropdown--Tooltip--Body">
-                  <span>Apply changes to this column{"'"}s filter</span>
+                  <span>Apply changes to this column&apos;s filter</span>
                   <span>Same effect as clicking outside the dropdown</span>
                 </div>
               }

diff --git a/packages/jaeger-ui/src/reducers/metrics.mock.js b/packages/jaeger-ui/src/reducers/metrics.mock.js
@@ -595,6 +595,7 @@ const serviceOpsCallsWithNull = {
           },
           {
             gaugeValue: {
+              // eslint-disable-next-line no-loss-of-precision
               doubleValue: 0.031052384663085615,
             },
             timestamp: '2021-09-13T12:01:36.235Z',
@@ -658,6 +659,7 @@ const serviceOpsCallsZeroDivision = {
           },
           {
             gaugeValue: {
+              // eslint-disable-next-line no-loss-of-precision
               doubleValue: 0.031052384663085615,
             },
             timestamp: '2021-09-13T12:01:36.235Z',

diff --git a/packages/jaeger-ui/src/utils/config/process-scripts.tsx b/packages/jaeger-ui/src/utils/config/process-scripts.tsx
@@ -15,7 +15,7 @@
 import { getConfigValue } from './get-config';
 import { TScript } from '../../types/config';
 
-export default function () {
+export default function processScripts() {
   const scripts = getConfigValue('scripts');
   if (scripts) {
     scripts.forEach((script: TScript) => {

diff --git a/packages/plexus/.eslintrc.js b/packages/plexus/.eslintrc.js
@@ -16,26 +16,37 @@
 // directory and all subdirectories.
 
 module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: './tsconfig.json',
-    tsconfigRootDir: '.',
-  },
-  plugins: ['@typescript-eslint'],
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    // placed after '@typescript-eslint/recommended' so TS formatting rules
-    // that conflict with prettier rules are overriden
-    'prettier/@typescript-eslint',
-  ],
-  rules: {
-    // use @typescript-eslint/no-useless-constructor to avoid null error on *.d.ts files
-    'no-useless-constructor': 0,
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: __dirname,
+      },
+      plugins: ['@typescript-eslint'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        // placed after '@typescript-eslint/recommended' so TS formatting rules
+        // that conflict with prettier rules are overriden
+        'prettier',
+      ],
+      rules: {
+        // use @typescript-eslint/no-useless-constructor to avoid null error on *.d.ts files
+        'no-useless-constructor': 0,
+
+        '@typescript-eslint/explicit-function-return-type': 0,
+        '@typescript-eslint/explicit-member-accessibility': 0,
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/no-useless-constructor': 1,
+        '@typescript-eslint/prefer-interface': 0,
 
-    '@typescript-eslint/explicit-function-return-type': 0,
-    '@typescript-eslint/explicit-member-accessibility': 0,
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-useless-constructor': 1,
-    '@typescript-eslint/prefer-interface': 0,
-  },
+        // @typescript-eslint/eslint-plugin v2+ relaxations
+        '@typescript-eslint/explicit-module-boundary-types': 0,
+        '@typescript-eslint/ban-types': 0,
+        '@typescript-eslint/no-empty-function': 0,
+        '@typescript-eslint/no-inferrable-types': 0,
+      },
+    },
+  ],
 };
diff --git a/packages/plexus/src/Digraph/index.tsx b/packages/plexus/src/Digraph/index.tsx
@@ -76,6 +76,7 @@ export default class Digraph<T = unknown, U = unknown> extends React.PureCompone
 > {
   renderUtils: TRendererUtils;
 
+  // eslint-disable-next-line react/sort-comp
   static propsFactories: Record<string, TFromGraphStateFn<any, any>> = {
     classNameIsSmall,
     scaleOpacity: scaleProperty.opacity,

diff --git a/packages/plexus/src/DirectedGraph/DirectedGraph.tsx b/packages/plexus/src/DirectedGraph/DirectedGraph.tsx
@@ -63,6 +63,7 @@ export default class DirectedGraph<T> extends React.PureComponent<
   rootSelection: any;
   zoomManager: ZoomManager | null;
 
+  // eslint-disable-next-line react/sort-comp
   static propsFactories = {
     classNameIsSmall,
     mergePropSetters,