fix: Upgrades eslint to v9 and migrate to flat config #870

* Conversion of .eslintrc.js to eslint.config.mjs

* Incorporation of .eslintignore into config file

* Upgrades eslint package and respective plugins

* eslint.config.mjs
 * Some plugins are still not eslint 9 compatible so the compat library is
   used as a go-between

* [*.ts, *.js]
 * Updates to satisfy new warnings produced by running `yarn lint`

eslint.config.mjs

@@ -0,0 +1,119 @@
+import jsPlugin from '@eslint/js'
+import tsPlugin from 'typescript-eslint'
+import importPlugin from 'eslint-plugin-import'
+import react from 'eslint-plugin-react'
+import configPrettier from 'eslint-config-prettier'
+
+// Plugins still requiring compat library as not yet fully v9 flat-config compliant
+import { fixupPluginRules } from '@eslint/compat'
+import reactHooks from 'eslint-plugin-react-hooks'
+import testingLibrary from 'eslint-plugin-testing-library'
+
+export default [
+  {
+    ignores: [
+      '*.js',
+      '!/packages/hawtio/scripts/*.js',
+      '*.cjs',
+      '/app/*.js',
+      '/app/*.cjs',
+      '*.mjs',
+      '**/.jestEnvVars.js',
+      '.gitignore',
+      '.dockerignore',
+      '**/.env.*',
+      '**/env.*',
+      '**/ignore/**/*',
+      '**/__mocks__/*.js',
+      '**/testdata/**/*.js',
+      '**/jest.config.ts',
+      '**/tsup.config*.ts',
+      '**/webpack*.js',
+      '**/proxy-dev-server.js',
+      '**/dist/*',
+      '**/build/*',
+    ],
+  },
+
+  configPrettier,
+  jsPlugin.configs.recommended,
+  ...tsPlugin.configs.recommended,
+  importPlugin.flatConfigs.recommended,
+
+  {
+    plugins: {
+      react,
+      'react-hooks': fixupPluginRules({
+        rules: reactHooks.rules,
+      }),
+      'testing-library': fixupPluginRules({
+        rules: testingLibrary.rules,
+      }),
+    },
+
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    rules: {
+      ...testingLibrary.configs['flat/react'].rules,
+      ...reactHooks.configs.recommended.rules,
+
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+
+      semi: ['error', 'never'],
+
+      'no-undef': 'off',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          args: 'none',
+          argsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+
+      '@typescript-eslint/explicit-member-accessibility': [
+        'warn',
+        {
+          accessibility: 'no-public',
+        },
+      ],
+
+      '@typescript-eslint/no-empty-function': [
+        'error',
+        {
+          allow: ['constructors'],
+        },
+      ],
+
+      '@typescript-eslint/no-redeclare': 'off',
+
+      'import/no-default-export': 'error',
+      'import/no-unresolved': 'off',
+      'import/named': 'off',
+      'import/first': 'error',
+
+      'react/prop-types': 'off',
+
+      'no-template-curly-in-string': 'error',
+      'no-console': 'error',
+
+      'testing-library/await-async-queries': 'off',
+      'testing-library/no-debugging-utils': [
+        'warn',
+        {
+          utilsToCheckFor: {
+            debug: false,
+          },
+        },
+      ],
+    },
+  },
+]

package.json

@@ -36,17 +36,18 @@
     "publish:backend-middleware": "yarn workspace @hawtio/backend-middleware npm publish --tolerate-republish"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@eslint/compat": "^1.2.0",
+    "@eslint/js": "^9.12.0",
     "concurrently": "^9.0.1",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.37.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "^6.3.0",
-    "prettier": "3.3.3"
+    "prettier": "3.3.3",
+    "typescript-eslint": "^8.8.0"
   },
   "config": {
     "commitizen": {

packages/hawtio/scripts/generate-camel-svg-index.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 /* eslint-disable no-console */
 /* jshint node: true */
 const fs = require('fs')

packages/hawtio/src/plugins/camel/debug/MessageDrawer.tsx

@@ -16,8 +16,7 @@ import {
   Text,
 } from '@patternfly/react-core'
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
-import React from 'react'
-import { useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { MessageData } from './debug-service'
 
 export interface MessageDrawerProps {
@@ -43,13 +42,9 @@ export const MessageDrawer: React.FunctionComponent<MessageDrawerProps> = (props
     setActivePanelTab(result.itemId as string)
   }
 
-  const onPanelExpand = () => {
-    panelRef.current && panelRef.current.focus()
-  }
+  const onPanelExpand = () => panelRef.current && panelRef.current.focus()
 
-  const onPanelCloseClick = () => {
-    props.setExpanded(false)
-  }
+  const onPanelCloseClick = () => props.setExpanded(false)
 
   const panelHeaderTab = (): JSX.Element => {
     if (!props.messages || props.messages.length === 0) return <em key='header-no-messages'>No Messages</em>

packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx

@@ -113,7 +113,6 @@ const MessageHeaders: React.FunctionComponent<{
   return (
     <React.Fragment>
       <FormGroup>
-        {/* eslint-disable-next-line react/jsx-no-undef */}
         <Button variant='link' onClick={handleAddHeader}>
           Add Headers
         </Button>
@@ -183,6 +182,7 @@ const MessageBody: React.FunctionComponent<{
           // monaco doesn't have built in xml formatter
           try {
             updateMessageBody(xmlFormat(messageBody))
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
           } catch (e) {
             eventService.notify({
               type: 'danger',

packages/hawtio/src/plugins/camel/exchanges/BlockedExchanges.tsx

@@ -1,11 +1,18 @@
 import { CamelContext } from '@hawtiosrc/plugins/camel/context'
 import { HawtioEmptyCard, HawtioLoadingCard, MBeanNode } from '@hawtiosrc/plugins/shared'
-import { Button, Modal, ModalVariant, Panel, PanelMainBody, Title } from '@patternfly/react-core'
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  Panel,
+  PanelHeader,
+  PanelMain,
+  PanelMainBody,
+  Title,
+} from '@patternfly/react-core'
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import * as exs from './exchanges-service'
-import { PanelHeader } from '@patternfly/react-core'
-import { PanelMain } from '@patternfly/react-core'
 
 export const BlockedExchanges: React.FunctionComponent = () => {
   const { selectedNode } = useContext(CamelContext)

packages/hawtio/src/plugins/camel/route-diagram/RouteDiagram.tsx

@@ -1,6 +1,7 @@
 import { Table, Tbody, Td, Tr } from '@patternfly/react-table'
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import ReactFlow, {
+import {
+  ReactFlow,
   Connection,
   ConnectionLineType,
   Handle,

packages/hawtio/src/plugins/camel/routes/Source.tsx

@@ -53,6 +53,7 @@ export const Source: React.FunctionComponent = () => {
           type: 'success',
           message: 'Route was updated',
         })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (e) {
         eventService.notify({ type: 'danger', message: 'Failed to save route' })
       }

packages/hawtio/src/plugins/shared/PluginTreeViewToolbar.tsx

@@ -9,7 +9,6 @@ interface ToolbarProps {
 export const PluginTreeViewToolbar: React.FunctionComponent<ToolbarProps> = (props: ToolbarProps) => {
   const [expanded, setExpanded] = useState(false)
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const onSearch = (event: ChangeEvent<HTMLInputElement>) => {
     if (props.onSearch) {
       props.onSearch(event)

packages/hawtio/src/plugins/shared/chart/Chart.tsx

@@ -3,8 +3,8 @@ import { AttributeValues } from '@hawtiosrc/plugins/shared/jolokia-service'
 import { MBeanNode } from '@hawtiosrc/plugins/shared/tree'
 import { isNumber } from '@hawtiosrc/util/objects'
 import { ChartArea, ChartAxis, Chart as ChartDraw, ChartVoronoiContainer } from '@patternfly/react-charts'
-import { getResizeObserver } from '@patternfly/react-core'
 import {
+  getResizeObserver,
   Button,
   Card,
   CardBody,

packages/hawtio/src/plugins/shared/connect-service.ts

@@ -243,6 +243,7 @@ class ConnectService implements IConnectService {
     try {
       const result = await this.testConnection(connection)
       return result.status
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (error) {
       return 'not-reachable'
     }
@@ -421,6 +422,7 @@ class ConnectService implements IConnectService {
         ['http:', 'https:'].includes(protocol) &&
         connectionKey !== '' &&
         connectionKey === this.currentConnection
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (_e) {
       log.error('Invalid URL')
       eventService.notify({

packages/hawtio/src/plugins/shared/jolokia-service.test.ts

@@ -1,8 +1,7 @@
 import { userService } from '@hawtiosrc/auth'
 import { DEFAULT_MAX_COLLECTION_SIZE, DEFAULT_MAX_DEPTH, JolokiaListMethod, jolokiaService } from './jolokia-service'
 import { hawtio } from '@hawtiosrc/core'
-import { ErrorCallback, RequestOptions } from 'jolokia.js'
-import 'jolokia.js'
+import * as jolokia from 'jolokia.js'
 import Jolokia, { SimpleRequestOptions, SimpleResponseCallback } from '@jolokia.js/simple'
 
 describe('JolokiaService', () => {
@@ -25,22 +24,24 @@ describe('JolokiaService', () => {
 
   test('getJolokia - optimised', async () => {
     jolokiaService.getJolokiaUrl = jest.fn(async () => '/test')
-    Jolokia.prototype.list = jest.fn((path?: string | string[] | RequestOptions, opts?: SimpleRequestOptions) => {
-      if (typeof path !== 'string') throw new Error('String is expected for path')
-      if (!opts) throw new Error('No options set')
-      if (!opts.success) {
-        throw new Error('No success option set')
-      }
+    Jolokia.prototype.list = jest.fn(
+      (path?: string | string[] | jolokia.RequestOptions, opts?: SimpleRequestOptions) => {
+        if (typeof path !== 'string') throw new Error('String is expected for path')
+        if (!opts) throw new Error('No options set')
+        if (!opts.success) {
+          throw new Error('No success option set')
+        }
 
-      ;(opts.success! as SimpleResponseCallback)({
-        desc: '',
-        attr: {},
-        op: {
-          value: { desc: 'exec', args: [], ret: '' },
-        },
-      })
-      return null
-    })
+        ;(opts.success! as SimpleResponseCallback)({
+          desc: '',
+          attr: {},
+          op: {
+            value: { desc: 'exec', args: [], ret: '' },
+          },
+        })
+        return null
+      },
+    )
 
     await expect(jolokiaService.getJolokia()).resolves.not.toThrow()
     await expect(jolokiaService.getListMethod()).resolves.toEqual(JolokiaListMethod.OPTIMISED)
@@ -68,7 +69,7 @@ describe('JolokiaService', () => {
         throw new Error('No error option set')
       }
 
-      ;(opts.error! as ErrorCallback)(
+      ;(opts.error! as jolokia.ErrorCallback)(
         {
           status: -1,
           timestamp: 123456789,