chore(FR-1557): apply react compiler (#4404)

resolves #4400 (FR-1557)

This PR updates the ESLint configuration and fixes linting issues across the codebase:

1. Removes the Storybook ESLint plugin from the root config
2. Adds multiple tsconfig paths to the ESLint parser options
3. Disables several ESLint rules that were causing noise
4. Moves React-specific ESLint rules to the appropriate package configs
5. Updates the lint command in CI workflow
6. Adds Zod v4 override in package.json
7. Enhances package-specific ESLint configurations with better rules
8. Adds React Compiler support via babel-plugin-react-compiler
9. Fixes various linting issues:
   - Removes unused variables and parameters
   - Fixes React hooks linting issues
   - Adds 'use memo' annotations for components
   - Improves type safety
   - Fixes potential memory leaks
10. For `no_unused_var`, I have configured it to ignore variables starting with `_`. `./react/package.json`

**how to test**
I added "use memo" in the `BAITableSettingModal.tsx` and `AgentList.tsx`.
When you build the webui and examine the built files, you can find `react.memo_cache_sentinel`.

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: nowgnuesLee

.eslintrc.json

@@ -9,8 +9,7 @@
     "plugin:wc/recommended",
     "plugin:lit-a11y/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:wc/best-practice",
-    "plugin:storybook/recommended"
+    "plugin:wc/best-practice"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -19,41 +18,34 @@
     "ecmaFeatures": {
       "jsx": true
     },
-    "project": "tsconfig.json",
+    "project": [
+      "tsconfig.json",
+      "react/tsconfig.json",
+      "packages/backend.ai-ui/tsconfig.json"
+    ],
     "extraFileExtensions": [".json"]
   },
-  "plugins": [
-    "@typescript-eslint",
-    "lit-a11y",
-    "wc",
-    "react-hooks",
-    "json-schema-validator"
-  ],
+  "plugins": ["@typescript-eslint", "lit-a11y", "wc", "json-schema-validator"],
   "rules": {
     "object-curly-spacing": "off",
+    "curly": "off",
     "operator-linebreak": "off",
     "indent": "off",
-    "no-unused-vars": "off",
     "no-undef": "off",
     "no-constant-condition": "off",
     "no-inner-declarations": "off",
     "no-irregular-whitespace": "off",
     "max-len": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
     "require-jsdoc": "off",
+    "valid-jsdoc": "off",
     "camelcase": "off",
     "no-empty": "off",
     "no-empty-function": "off",
     "no-invalid-this": "off",
     "wc/guard-super-call": "off",
     "lit-a11y/alt-text": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": [
-      "warn",
-      {
-        "additionalHooks": "useRecoilCallback"
-      }
-    ],
     "spaced-comment": "off",
     "quotes": "off",
     "quote-props": "off",
@@ -65,5 +57,10 @@
       "parser": "jsonc-eslint-parser",
       "extends": ["plugin:json-schema-validator/recommended"]
     }
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "19.2"
+    }
+  }
 }

.github/workflows/jest.yml

@@ -67,7 +67,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Run ESLint on React
-        run: pnpm  eslint ./src --ignore-pattern '*.test.*' --max-warnings=0
+        run: pnpm run lint
       - name: run relay-compiler
         run: pnpm run relay
       - name: Jest report

package.json

@@ -148,7 +148,6 @@
     "eslint-plugin-json-schema-validator": "^5.3.1",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-wc": "^2.1.0",
     "express": "^4.19.2",
     "husky": "^9.1.4",
@@ -186,6 +185,11 @@
   "overrides": {
     "eslint": "^8.57.0"
   },
+  "pnpm": {
+    "overrides": {
+      "zod": "^4.0.0"
+    }
+  },
   "vaadin": {
     "disableUsageStatistics": true
   },
@@ -194,11 +198,11 @@
       "prettier --write"
     ],
     "react/src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "eslint --max-warnings=0 --cache",
+      "pnpm run --prefix ./react lint --cache",
       "prettier --write"
     ],
     "packages/backend.ai-ui/src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "eslint --max-warnings=0 --cache",
+      "pnpm run --prefix ./packages/backend.ai-ui lint --cache",
       "prettier --write"
     ],
     "e2e/**/*.{js,ts}": [

packages/backend.ai-ui/package.json

@@ -28,13 +28,14 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest",
       "plugin:storybook/recommended",
-      "plugin:react/recommended"
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended"
     ],
     "plugins": [
-      "json-schema-validator"
+      "json-schema-validator",
+      "react-hooks",
+      "import"
     ],
     "overrides": [
       {
@@ -45,12 +46,38 @@
         "extends": [
           "plugin:json-schema-validator/recommended"
         ]
+      },
+      {
+        "files": [
+          "**/*.stories.tsx"
+        ],
+        "rules": {
+          "react-hooks/rules-of-hooks": "off"
+        }
       }
     ],
     "rules": {
       "react/react-in-jsx-scope": "off",
       "react/prop-types": "off",
-      "import/no-duplicates": "error"
+      "import/no-duplicates": "error",
+      "no-useless-catch": "off",
+      "prefer-promise-reject-errors": "off",
+      "func-call-spacing": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "args": "all",
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ],
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": [
+        "warn",
+        {
+          "additionalHooks": "useRecoilCallback"
+        }
+      ]
     }
   },
   "peerDependencies": {
@@ -106,10 +133,11 @@
     "@types/relay-runtime": "^19.0.3",
     "@types/relay-test-utils": "^19.0.0",
     "@vitejs/plugin-react": "^4.5.0",
-    "eslint": "^8.57.1",
-    "eslint-config-react-app": "^7.0.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-storybook": "^9.1.1",
     "fast-glob": "^3.3.3",
     "jest": "^29.7.0",
@@ -118,7 +146,7 @@
     "relay-test-utils": "^20.1.1",
     "storybook": "^9.1.1",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
+    "typescript": "^5.8.2",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-relay-lite": "^0.11.0",

packages/backend.ai-ui/src/components/BAIConfirmModalWithInput.tsx

@@ -2,7 +2,6 @@ import BAIFlex from './BAIFlex';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Form, Input, Typography } from 'antd';
-import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -47,11 +46,11 @@ const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
       }
       onOk={(e) => {
         form.resetFields();
-        _.isFunction(onOk) && onOk(e);
+        onOk?.(e);
       }}
       onCancel={(e) => {
         form.resetFields();
-        _.isFunction(onCancel) && onCancel(e);
+        onCancel?.(e);
       }}
       {...props}
       okButtonProps={{

packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx

@@ -83,7 +83,7 @@ export type FilterOperator =
   | 'in'
   | 'notIn'
   // Allow custom operators
-  | (string & {});
+  | (string & NonNullable<unknown>);
 
 type BaseFilterProperty = {
   key: string;
@@ -325,7 +325,6 @@ const BAIGraphQLPropertyFilter: React.FC<BAIGraphQLPropertyFilterProps> = ({
   value: propValue,
   onChange: propOnChange,
   defaultValue,
-  loading,
   combinationMode = 'AND',
   ...containerProps
 }) => {

packages/backend.ai-ui/src/components/BAIModal.tsx

@@ -42,7 +42,7 @@ const BAIModal: React.FC<BAIModalProps> = ({ className, ...modalProps }) => {
     right: 0,
   }); //draggable space
   const draggleRef = useRef<HTMLDivElement>(null);
-  const handleDrag = (e: DraggableEvent, uiData: DraggableData) => {
+  const handleDrag = (_e: DraggableEvent, uiData: DraggableData) => {
     const { clientWidth, clientHeight } = window.document.documentElement; //browserWidth, browserHeight
     const targetRect = draggleRef.current?.getBoundingClientRect(); //Modal size and viewport
     if (!targetRect) {

packages/backend.ai-ui/src/components/BAIPropertyFilter.tsx

@@ -98,7 +98,7 @@ export function mergeFilterValues(
     _.map(filterOutEmpty(filterStrings), (str) => `(${str})`),
     operator,
   );
-  return !!mergedFilter ? mergedFilter : undefined;
+  return mergedFilter ? mergedFilter : undefined;
 }
 
 /**
@@ -203,7 +203,6 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
   value: propValue,
   onChange: propOnChange,
   defaultValue,
-  loading,
   ...containerProps
 }) => {
   const [search, setSearch] = useState<string>();
@@ -332,7 +331,7 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
           popupMatchSelectWidth={false}
           options={options}
           value={selectedProperty.key}
-          onChange={(value, options) => {
+          onChange={(_value, options) => {
             setSelectedProperty(_.castArray(options)[0].filter);
           }}
           onSelect={() => {

packages/backend.ai-ui/src/components/BAISelect.tsx

@@ -68,7 +68,6 @@ function BAISelect<
   tooltip = '',
   atBottomThreshold = 30,
   atBottomStateChange,
-  bottomLoading,
   footer,
   endReached, // Destructure the new prop
   ...selectProps

packages/backend.ai-ui/src/components/BAIUnmountAfterClose.tsx

@@ -37,6 +37,7 @@ const BAIUnmountAfterClose: React.FC<BAIUnmountModalAfterCloseProps> = ({
   // Update internal state when the child's open prop becomes true
   useLayoutEffect(() => {
     if (isOpen) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsMount(true);
     }
   }, [isOpen]);