KaotoIO · lordrip · Sep 10, 2024 · Sep 9, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,21 @@
+// @ts-check
+import pluginJs from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+    },
+  },
+  eslintConfigPrettier,
+  eslintPluginPrettier,
+];
diff --git a/packages/camel-catalog/eslint.config.mjs b/packages/camel-catalog/eslint.config.mjs
@@ -0,0 +1,4 @@
+// @ts-check
+import rootConfig from '../../eslint.config.mjs';
+
+export default [...rootConfig];
diff --git a/packages/camel-catalog/package.json b/packages/camel-catalog/package.json
@@ -25,15 +25,17 @@
     "clean": "yarn rimraf ./dist"
   },
   "devDependencies": {
+    "@eslint/js": "^9.10.0",
+    "@types/eslint__js": "^8.42.3",
     "@types/node": "^20.0.0",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "json-schema-to-typescript": "^15.0.0",
     "prettier": "^3.0.0",
     "rimraf": "^6.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "typescript-eslint": "^8.5.0"
   }
 }
diff --git a/packages/camel-catalog/src/json-schema-to-typescript.mts b/packages/camel-catalog/src/json-schema-to-typescript.mts
@@ -1,5 +1,4 @@
 #!/usr/bin/env ts-node
-/* eslint-disable @typescript-eslint/no-var-requires */
 
 /**
  * This script generates TypeScript types from the JSON schemas in the dist folder.

diff --git a/packages/catalog-generator/eslint.config.mjs b/packages/catalog-generator/eslint.config.mjs
@@ -0,0 +1,4 @@
+// @ts-check
+import rootConfig from '../../eslint.config.mjs';
+
+export default [...rootConfig];
diff --git a/packages/catalog-generator/package.json b/packages/catalog-generator/package.json
@@ -26,15 +26,17 @@
     "clean": "yarn rimraf ./dist"
   },
   "devDependencies": {
+    "@eslint/js": "^9.10.0",
+    "@types/eslint__js": "^8.42.3",
     "@types/node": "^20.0.0",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "json-schema-to-typescript": "^15.0.0",
     "prettier": "^3.0.0",
     "rimraf": "^6.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "typescript-eslint": "^8.5.0"
   }
 }
diff --git a/packages/catalog-generator/scripts/json-schema-to-typescript.mts b/packages/catalog-generator/scripts/json-schema-to-typescript.mts
@@ -1,5 +1,4 @@
 #!/usr/bin/env ts-node
-/* eslint-disable @typescript-eslint/no-var-requires */
 
 /**
  * This script generates TypeScript types from the JSON schemas in the dist folder.

diff --git a/packages/ui-tests/eslint.config.mjs b/packages/ui-tests/eslint.config.mjs
@@ -0,0 +1,23 @@
+// @ts-check
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import rootConfig from '../../eslint.config.mjs';
+
+export default [
+  ...rootConfig,
+  {
+    plugins: {
+      ...pluginReact.configs.flat.recommended.plugins,
+      'react-hooks': pluginReactHooks,
+    },
+  },
+  {
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/display-name': 'off',
+      'react/prop-types': 'off',
+    },
+  },
+];
diff --git a/packages/ui-tests/package.json b/packages/ui-tests/package.json
@@ -22,6 +22,7 @@
     "chromatic": "chromatic --build-script-name 'build:storybook' --exit-zero-on-changes --project-token=chpt_7a4940aa65b14ab"
   },
   "devDependencies": {
+    "@eslint/js": "^9.10.0",
     "@kaoto/kaoto": "workspace:*",
     "@storybook/addon-essentials": "^8.2.8",
     "@storybook/addon-interactions": "^8.2.8",
@@ -36,17 +37,13 @@
     "@storybook/react-vite": "^8.2.8",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^8.2.8",
+    "@types/eslint__js": "^8.42.3",
     "chromatic": "^11.0.0",
     "cypress": "^13.11.0",
     "cypress-file-upload": "^5.0.8",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "msw": "^2.0.2",
     "msw-storybook-addon": "^2.0.3",
     "prettier": "^3.0.0",
@@ -57,6 +54,7 @@
     "storybook-addon-remix-react-router": "^3.0.0",
     "storybook-fixtures": "0.12.0",
     "typescript": "^5.4.2",
+    "typescript-eslint": "^8.5.0",
     "vite": "^5.4.0"
   },
   "dependencies": {

diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
@@ -0,0 +1,23 @@
+// @ts-check
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import rootConfig from '../../eslint.config.mjs';
+
+export default [
+  ...rootConfig,
+  {
+    plugins: {
+      ...pluginReact.configs.flat.recommended.plugins,
+      'react-hooks': pluginReactHooks,
+    },
+  },
+  {
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/display-name': 'off',
+      'react/prop-types': 'off',
+    },
+  },
+];
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -91,6 +91,7 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
+    "@eslint/js": "^9.10.0",
     "@kaoto/camel-catalog": "workspace:*",
     "@patternfly/patternfly": "5.4.0",
     "@patternfly/react-code-editor": "5.4.0",
@@ -104,6 +105,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/eslint__js": "^8.42.3",
     "@types/jest": "^29.4.0",
     "@types/json-schema": "^7.0.15",
     "@types/lodash.clonedeep": "^4.5.7",
@@ -114,22 +116,20 @@
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "babel-jest": "^29.4.2",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react-hooks": "5.1.0-rc-eb3ad065-20240822",
+    "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.4.2",
     "monaco-yaml": "^5.1.1",
+    "postcss": "^8.4.45",
     "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -143,6 +143,7 @@
     "stylelint-prettier": "^5.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.4.2",
+    "typescript-eslint": "^8.5.0",
     "vite": "^5.4.0",
     "vite-plugin-dts": "^4.0.2",
     "vite-plugin-static-copy": "^1.0.6"

diff --git a/packages/ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/packages/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ExpandableSection } from '@patternfly/react-core';
 import { Component, ReactNode } from 'react';

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx
@@ -37,7 +37,7 @@ export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props)
       default:
         throw Error('Unknown CatalogKind during rendering modal: ' + props.tile.type);
     }
-  }, [props.tile]);
+  }, [catalogService, props.tile.name, props.tile.type]);
   const [activeTabKey, setActiveTabKey] = useState<number>(0);
   const [activeTab, setActiveTab] = useState<IPropertiesTab>(tabs[0]);
 

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.tsx
@@ -22,7 +22,7 @@ export const CanvasSideBar: FunctionComponent<CanvasSideBarProps> = (props) => {
      * and doesn't take into account the sidebar children.
      */
     <TopologySideBar resizable>
-      <ErrorBoundary key={props.selectedNode.id} fallback={<p>Something didn't work as expected</p>}>
+      <ErrorBoundary key={props.selectedNode.id} fallback={<p>Something did not work as expected</p>}>
         <FilteredFieldProvider>
           <CanvasForm selectedNode={props.selectedNode} onClose={props.onClose} />
         </FilteredFieldProvider>

diff --git a/packages/ui/src/components/Visualization/EmptyState/FlowType/FlowTypeSelector.tsx b/packages/ui/src/components/Visualization/EmptyState/FlowType/FlowTypeSelector.tsx
@@ -81,7 +81,7 @@ export const FlowTypeSelector: FunctionComponent<ISourceTypeSelector> = (props)
               currentFlowType.multipleRoute ? (
                 <p>Add a new {currentFlowType.name} route</p>
               ) : (
-                <p>The {currentFlowType.name} type doesn't support multiple routes</p>
+                <p>The {currentFlowType.name} type does not support multiple routes</p>
               )
             }
           >

diff --git a/packages/ui/src/layout/TopBar.tsx b/packages/ui/src/layout/TopBar.tsx
@@ -82,23 +82,23 @@ export const TopBar: FunctionComponent<ITopBar> = (props) => {
               onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
               popperProps={DEFAULT_POPPER_PROPS}
             >
-              <a href="https://kaoto.io/workshop/" target="_blank">
+              <a href="https://kaoto.io/workshop/" target="_blank" rel="noreferrer">
                 <DropdownItem key="tutorial">
                   <Icon isInline>
                     <ExternalLinkAltIcon />
                   </Icon>
                   &nbsp;<span className="pf-u-mr-lg">Tutorials</span>
                 </DropdownItem>
               </a>
-              <a href="https://kaoto.io/docs/" target="_blank">
+              <a href="https://kaoto.io/docs/" target="_blank" rel="noreferrer">
                 <DropdownItem key="help">
                   <Icon isInline>
                     <ExternalLinkAltIcon />
                   </Icon>
                   &nbsp;<span className="pf-u-mr-lg">Help</span>
                 </DropdownItem>
               </a>
-              <a href="https://github.com/KaotoIO/kaoto/issues/new/choose" target="_blank">
+              <a href="https://github.com/KaotoIO/kaoto/issues/new/choose" target="_blank" rel="noreferrer">
                 <DropdownItem key="feedback">
                   <Icon isInline>
                     <GithubIcon />

diff --git a/packages/ui/src/models/camel-dataformats-catalog.ts b/packages/ui/src/models/camel-dataformats-catalog.ts
@@ -7,6 +7,6 @@ export interface ICamelDataformatDefinition {
   propertiesSchema: KaotoSchemaDefinition['schema'];
 }
 
-export interface ICamelDataformatModel extends ICamelProcessorModel {}
+export type ICamelDataformatModel = ICamelProcessorModel;
 
-export interface ICamelDataformatProperty extends ICamelProcessorProperty {}
+export type ICamelDataformatProperty = ICamelProcessorProperty;
diff --git a/packages/ui/src/models/camel-languages-catalog.ts b/packages/ui/src/models/camel-languages-catalog.ts
@@ -7,6 +7,6 @@ export interface ICamelLanguageDefinition {
   propertiesSchema: KaotoSchemaDefinition['schema'];
 }
 
-export interface ICamelLanguageModel extends ICamelProcessorModel {}
+export type ICamelLanguageModel = ICamelProcessorModel;
 
-export interface ICamelLanguageProperty extends ICamelProcessorProperty {}
+export type ICamelLanguageProperty = ICamelProcessorProperty;
diff --git a/packages/ui/src/models/camel-loadbalancers-catalog.ts b/packages/ui/src/models/camel-loadbalancers-catalog.ts
@@ -7,6 +7,6 @@ export interface ICamelLoadBalancerDefinition {
   propertiesSchema: KaotoSchemaDefinition['schema'];
 }
 
-export interface ICamelLoadBalancerModel extends ICamelProcessorModel {}
+export type ICamelLoadBalancerModel = ICamelProcessorModel;
 
-export interface ICamelLoadBalancerProperty extends ICamelProcessorProperty {}
+export type ICamelLoadBalancerProperty = ICamelProcessorProperty;
diff --git a/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts b/packages/ui/src/models/visualization/flows/abstract-camel-visual-entity.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-case-declarations */
 import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
 import { SchemaService } from '../../../components/Form/schema.service';
 import { ROOT_PATH, getArrayProperty, getValue, setValue } from '../../../utils';

diff --git a/packages/ui/src/models/visualization/flows/support/validators/model-validation.service.ts b/packages/ui/src/models/visualization/flows/support/validators/model-validation.service.ts
@@ -24,7 +24,6 @@ interface IValidationResult {
  * property file.
  */
 export class ModelValidationService {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   static validateNodeStatus(schema: VisualComponentSchema | undefined): string {
     if (!schema?.schema) return '';
     let message = '';

diff --git a/packages/ui/src/models/visualization/metadata/beans-entity-handler.ts b/packages/ui/src/models/visualization/metadata/beans-entity-handler.ts
@@ -30,7 +30,6 @@ export class BeansEntityHandler {
     return this.type !== undefined;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getBeanSchema(): KaotoSchemaDefinition['schema'] | undefined {
     switch (this.type) {
       case 'beans':
@@ -42,7 +41,6 @@ export class BeansEntityHandler {
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getBeansSchema(): KaotoSchemaDefinition['schema'] | undefined {
     switch (this.type) {
       case 'beans': {