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,117 @@
+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,9 @@
 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,7 +24,7 @@ describe('JolokiaService', () => {
 
   test('getJolokia - optimised', async () => {
     jolokiaService.getJolokiaUrl = jest.fn(async () => '/test')
-    Jolokia.prototype.list = jest.fn((path?: string | string[] | RequestOptions, opts?: SimpleRequestOptions) => {
+    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) {
@@ -68,7 +67,7 @@ describe('JolokiaService', () => {
         throw new Error('No error option set')
       }
 
-      ;(opts.error! as ErrorCallback)(
+      ;(opts.error! as jolokia.ErrorCallback)(
         {
           status: -1,
           timestamp: 123456789,

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

@@ -246,6 +246,7 @@ class JolokiaService implements IJolokiaService {
       log.debug('Checking Jolokia path:', path)
       try {
         return await this.tryProbeJolokiaPath(path)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (e) {
         // ignore
       }
@@ -396,7 +397,7 @@ class JolokiaService implements IJolokiaService {
           // just logout
           userService.isLogin().then(login => {
             log.debug('Logging out due to fetch() error: status =', response.status)
-            login && userService.logout()
+            if (login) userService.logout()
           })
         }
       } else {
@@ -958,7 +959,6 @@ class JolokiaService implements IJolokiaService {
   }
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Dummy Jolokia implementation that does nothing.
  */
@@ -1076,6 +1076,5 @@ class DummyJolokia implements IJolokiaSimple {
     }
   }
 }
-/* eslint-enable @typescript-eslint/no-unused-vars */
 
 export const jolokiaService = new JolokiaService()

packages/hawtio/src/plugins/shared/operations/OperationForm.tsx

@@ -139,6 +139,7 @@ const OperationActions: React.FunctionComponent = () => {
     try {
       navigator.clipboard.writeText(text)
       notifySuccessfulCopy()
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
       notifyCopyFailure(text)
     }