Backport PR #1225 on branch 2.x (Enforce path imports for MUI icons, upgrade to ESLint v8) (#1226)

* Backport PR #1225: Enforce path imports for MUI icons, upgrade to ESLint v8

* Enforce path imports for mui icons, migrate to newer eslint

* Replace mui icons imports with path imports

(cherry picked from commit 5b99b0f)

* fix 2.x MUI icon imports

* run yarn dedupe

---------

Co-authored-by: Michał Krassowski <[email protected]>

Author: dlqqq

packages/jupyter-ai/.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: './tsconfig.json'
   },
-  plugins: ['@typescript-eslint'],
+  plugins: ['@stylistic', '@typescript-eslint'],
   rules: {
     '@typescript-eslint/naming-convention': [
       'error',
@@ -27,13 +27,32 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-namespace': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/quotes': [
+    '@stylistic/quotes': [
       'error',
       'single',
       { avoidEscape: true, allowTemplateLiterals: false }
     ],
     curly: ['error', 'all'],
     eqeqeq: 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: '@mui/icons-material',
+
+            message:
+              "Please import icons using path imports, e.g. `import AddIcon from '@mui/icons-material/Add'`"
+          }
+        ],
+        patterns: [
+          {
+            group: ['@mui/*/*/*'],
+            message: '3rd level imports in mui are considered private'
+          }
+        ]
+      }
+    ],
     'prefer-arrow-callback': 'error'
   },
   overrides: [

packages/jupyter-ai/package.json

@@ -86,11 +86,12 @@
     "@babel/preset-env": "^7.0.0",
     "@jupyterlab/builder": "^4.2.0",
     "@jupyterlab/testutils": "^4.2.0",
+    "@stylistic/eslint-plugin": "^3.0.1",
     "@types/jest": "^29",
     "@types/react-dom": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "eslint": "^7.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "jest": "^29",

packages/jupyter-ai/src/components/chat-input.tsx

@@ -9,16 +9,14 @@ import {
   InputAdornment,
   Typography
 } from '@mui/material';
-import {
-  Download,
-  FindInPage,
-  Help,
-  MoreHoriz,
-  MenuBook,
-  School,
-  HideSource,
-  AutoFixNormal
-} from '@mui/icons-material';
+import Download from '@mui/icons-material/Download';
+import FindInPage from '@mui/icons-material/FindInPage';
+import Help from '@mui/icons-material/Help';
+import MoreHoriz from '@mui/icons-material/MoreHoriz';
+import MenuBook from '@mui/icons-material/MenuBook';
+import School from '@mui/icons-material/School';
+import HideSource from '@mui/icons-material/HideSource';
+import AutoFixNormal from '@mui/icons-material/AutoFixNormal';
 import { ISignal } from '@lumino/signaling';
 
 import { AiService } from '../handler';

packages/jupyter-ai/src/components/chat-messages/chat-message-delete.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SxProps } from '@mui/material';
-import { Close } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
 
 import { AiService } from '../../handler';
 import { ChatHandler } from '../../chat_handler';

packages/jupyter-ai/src/components/chat-messages/chat-message-menu.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 
 import { IconButton, Menu, MenuItem, SxProps } from '@mui/material';
-import { MoreVert } from '@mui/icons-material';
+import MoreVert from '@mui/icons-material/MoreVert';
 import {
   addAboveIcon,
   addBelowIcon,

packages/jupyter-ai/src/components/settings/existing-api-keys.tsx

@@ -6,14 +6,12 @@ import {
   TextField,
   InputAdornment
 } from '@mui/material';
-import {
-  Edit,
-  DeleteOutline,
-  Cancel,
-  Check,
-  Visibility,
-  VisibilityOff
-} from '@mui/icons-material';
+import Edit from '@mui/icons-material/Edit';
+import DeleteOutline from '@mui/icons-material/DeleteOutline';
+import Cancel from '@mui/icons-material/Cancel';
+import Check from '@mui/icons-material/Check';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { AsyncIconButton } from '../mui-extras/async-icon-button';
 
 import { AiService } from '../../handler';