DATAP-1619 Upgraded to ESLint v9 for CCDB UI (#572)

* Initial upgrades and updates to config rules

* updated with cypress-related config

* converted main eslint config file to '.mjs' to distinguished it as a module, as opposed to making all js files modules by default in the package.json file

* removed outdated comment per PR feedback

* added eslint plugins for react-hooks and react-redux

* Build updates

* update dist

* update dist

---------

Co-authored-by: Chanel Henley <[email protected]>
Co-authored-by: Richard Dinh <[email protected]>

eslint.config.mjs

@@ -0,0 +1,94 @@
+// Run `npx @eslint/config-inspector` to inspect the config.
+
+import globals from 'globals';
+import js from '@eslint/js';
+import importPlugin from 'eslint-plugin-import';
+import jsdoc from 'eslint-plugin-jsdoc';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactReduxPlugin from 'eslint-plugin-react-redux';
+import pluginCypress from 'eslint-plugin-cypress/flat';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import babelParser from '@babel/eslint-parser';
+
+export default [
+  {
+    ignores: ['\*_/**fixtures**/_.js', 'serviceWorker.js']
+  },
+  js.configs.recommended,
+  importPlugin.flatConfigs.recommended,
+  jsdoc.configs['flat/recommended'],
+  jsxA11y.flatConfigs.recommended,
+  reactPlugin.configs.flat.recommended,
+  pluginCypress.configs.recommended,
+  eslintConfigPrettier,
+  {
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+      'react-redux': reactReduxPlugin
+    }
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2023,
+      parser: babelParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          paths: ['src'],
+          extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx']
+        },
+      },
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+        'id-length': ['error', { min: 2 }],
+        'jsdoc/require-hyphen-before-param-description': ['warn', 'always'],
+        'jsdoc/tag-lines': ['error', 'any', { startLines: 1 }],
+        'no-console': ['warn'],
+        'no-use-before-define': ['error','nofunc'],
+        'no-unused-vars': [
+          'error',
+          {
+            vars: 'all',
+            args: 'after-used',
+            ignoreRestSiblings: false,
+          },
+        ],
+        'no-var': ['error'],
+        'prefer-const': ['error'],
+        radix: ['error'],
+        'react/jsx-no-leaked-render': [
+          'error',
+          { validStrategies: ['coerce', 'ternary'] },
+        ],
+        'react/no-multi-comp': ['error', { ignoreStateless: true }],
+        'react/no-unstable-nested-components': ['error'],
+        'react/self-closing-comp': ['error'],
+        'react/boolean-prop-naming': ['error', { validateNested: true }],
+        'react/default-props-match-prop-types': [
+          'error',
+          { allowRequiredDefaults: true },
+        ],
+        'react/jsx-curly-brace-presence': ['error'],
+        'react/jsx-uses-react': 'off',
+        'react/react-in-jsx-scope': 'off',
+        ...reactHooksPlugin.configs.recommended.rules,
+        ...reactReduxPlugin.configs.recommended.rules
+    },
+  },
+];

package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/eslint-parser": "^7.26.5",
     "@babel/preset-react": "^7.26.3",
     "@babel/runtime": "^7.26.0",
     "@cfpb/browserslist-config": "0.0.3",
@@ -55,12 +55,17 @@
     "cypress": "^13.17.0",
     "d3": "^7.9.0",
     "dayjs": "^1.11.10",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-cypress": "^3.2.0",
-    "eslint-plugin-jsdoc": "^48.2.5",
-    "eslint-plugin-react-redux": "^4.1.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-redux": "^4.2.0",
+    "globals": "^15.14.0",
     "highcharts": "11.4.8",
     "history": "^5.3.0",
     "husky": "^9.1.7",
@@ -91,8 +96,8 @@
     "release-it": "^17.3.0",
     "sass": "^1.83.0",
     "string-replace-loader": "^3.1.0",
-    "stylelint": "^16.12.0",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint": "^16.13.2",
+    "stylelint-config-standard": "^37.0.0",
     "stylelint-config-standard-scss": "^14.0.0"
   },
   "lint-staged": {

src/App.js

@@ -1,12 +1,12 @@
 import './css/App.scss';
+import { ReactElement } from 'react';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { ComplaintDetail } from './components/ComplaintDetail/ComplaintDetail';
 import { SearchComponents } from './components/Search/SearchComponents';
 
 /**
- * Main App Component
  *
- * @returns {JSX.Element} Main app
+ * @returns {ReactElement} Main application component
  */
 const App = () => {
   return (

src/actions/analytics.js

@@ -58,7 +58,7 @@ const Analytics = {
     if (Analytics.tagManagerIsLoaded) {
       window.dataLayer.push(dataLayerOptions);
     } else if (callback && typeof callback === 'function') {
-      callback(); // eslint-disable-line callback-return, no-inline-comments, max-len
+      callback();
     }
   },
 

src/actions/routes.js

@@ -42,7 +42,6 @@ export function normalizeRouteParams(params) {
  * @returns {Function} a series of actions to execute
  */
 export function changeRoute(path, params) {
-  // eslint-disable-next-line complexity
   return function (dispatch, getState) {
     const store = getState();
     const normalized = normalizeRouteParams(params);

src/api/params/params.js

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import { clamp, removeNullProperties } from '../../utils';
 import { enforceValues } from '../../utils/reducers';
 // ----------------------------------------------------------------------------

src/components/Charts/RowChart/RowChart.js

@@ -46,7 +46,7 @@ export const RowChart = ({
     const wrapText = (text, width, viewMore) => {
       // ignore test coverage since this is code borrowed from d3 mbostock
       // text wrapping functions
-      /* eslint-disable complexity */
+
       /* istanbul ignore next */
       text.each(function () {
         const innerText = d3.select(this);
@@ -73,7 +73,6 @@ export const RowChart = ({
             .attr('y', y)
             .attr('dy', dy + 'em');
 
-        // eslint-disable-next-line no-cond-assign
         while ((word = words.pop())) {
           line.push(word);
           tspan.text(line.join(' '));
@@ -85,7 +84,7 @@ export const RowChart = ({
               .append('tspan')
               .attr('x', spanWidth)
               .attr('y', y)
-              // eslint-disable-next-line no-mixed-operators
+
               .attr('dy', ++lineNumber * lineHeight + dy + 'em')
               .text(word);
             wrapCount++;
@@ -97,12 +96,11 @@ export const RowChart = ({
             .select(innerText.node().parentNode)
             .select('.view-more-background');
           const oldHeight = viewMoreBackground.attr('height');
-          // eslint-disable-next-line no-mixed-operators
+
           const newHeight = parseFloat(oldHeight) + wrapCount * 12;
           viewMoreBackground.attr('height', newHeight);
         }
       });
-      /* eslint-enable complexity */
     };
 
     const collapseARow = (rowName) => {

src/components/Dialogs/DataExport/dataExportUtils.js

@@ -29,7 +29,7 @@ export function buildSomeResultsUri(format, size, state) {
 
   params.size = size;
   params.format = format;
-  // eslint-disable-next-line camelcase
+
   params.no_aggs = true;
 
   // Remove unnecessary pagination query params

src/components/Filters/Aggregation/AggregationBranch/AggregationBranch.js

@@ -53,7 +53,7 @@ export const AggregationBranch = ({ fieldName, item, subitems }) => {
     disabled: item.isDisabled,
     key: slugify(item.key, sub.key),
     value: sub.key,
-    // eslint-disable-next-line camelcase
+
     doc_count: sub.doc_count,
   }));
 
@@ -132,7 +132,6 @@ export const AggregationBranch = ({ fieldName, item, subitems }) => {
 AggregationBranch.propTypes = {
   fieldName: PropTypes.string.isRequired,
   item: PropTypes.shape({
-    // eslint-disable-next-line camelcase
     doc_count: PropTypes.number.isRequired,
     key: PropTypes.string.isRequired,
     value: PropTypes.string,

src/components/Filters/Aggregation/AggregationItem/AggregationItem.js

@@ -17,13 +17,10 @@ const appliedFilters = ({ fieldName, item, aggs, filters }) => {
   // check the parent only, and uncheck the rest so that the fake check
   // will take affect
   const [parentFilter, childFilter] = item.key.split(SLUG_SEPARATOR);
-  /* eslint-disable no-unexpected-multiline */
-  // TODO: reformat to not need the unexpected multiline.
   const subItems = aggs
     .find((agg) => agg.key === parentFilter)
     ['sub_' + fieldName + '.raw'].buckets.map((agg) => agg.key)
     .sort();
-  /* eslint-enable no-unexpected-multiline */
 
   const parentKey = parentFilter + SLUG_SEPARATOR;
   const selectedFilters = filters
@@ -121,7 +118,6 @@ export const AggregationItem = ({ fieldName, item }) => {
 AggregationItem.propTypes = {
   fieldName: PropTypes.string.isRequired,
   item: PropTypes.shape({
-    // eslint-disable-next-line camelcase
     doc_count: PropTypes.number.isRequired,
     key: PropTypes.string.isRequired,
     value: PropTypes.string,

src/components/Filters/Date/CompanyReceivedFilter.spec.js

@@ -1,5 +1,4 @@
 import { CompanyReceivedFilter } from './CompanyReceivedFilter';
-import React from 'react';
 import { merge } from '../../../testUtils/functionHelpers';
 import { queryState } from '../../../reducers/query/querySlice';
 import * as filterActions from '../../../reducers/query/querySlice';

src/components/Filters/FilterPanel/FilterPanel.spec.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FilterPanel } from './FilterPanel';
 import { merge } from '../../../testUtils/functionHelpers';
 import { viewState } from '../../../reducers/view/viewSlice';

src/components/Filters/FilterSearch/FilterSearch.js

@@ -8,7 +8,7 @@ import { useGetAggregations } from '../../../api/hooks/useGetAggregations';
 import { SLUG_SEPARATOR } from '../../../constants';
 import { normalize } from '../../../utils';
 import { ClearButton } from '../../Typeahead/ClearButton/ClearButton';
-import HighlightingOption from '../../Typeahead/HighlightingOption/HighlightingOption';
+import { HighlightingOption } from '../../Typeahead/HighlightingOption/HighlightingOption';
 import getIcon from '../../Common/Icon/iconMap';
 
 export const FilterSearch = ({ fieldName }) => {
@@ -22,6 +22,8 @@ export const FilterSearch = ({ fieldName }) => {
   const subaggName = `sub_${fieldName}.raw`.toLowerCase();
   const buckets = [];
 
+  const [inputText, setInputText] = useState('');
+
   aggResults.forEach((option) => {
     if (buckets.findIndex((item) => item.key === option.key) === -1) {
       const parentAgg = { ...option };
@@ -57,15 +59,13 @@ export const FilterSearch = ({ fieldName }) => {
     }
   });
 
+  const [dropdownOptions, setDropdownOptions] = useState(buckets);
+
   const handleClear = () => {
     ref.current.clear();
     setInputText('');
   };
 
-  const [inputText, setInputText] = useState('');
-
-  const [dropdownOptions, setDropdownOptions] = useState(buckets);
-
   const handleInputChange = (value) => {
     setInputText(value);
     const rawValue = normalize(value);