Enforce path imports for MUI icons, upgrade to ESLint v8

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

@@ -85,11 +85,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/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';

packages/jupyter-ai/src/slash-autocompletion.tsx

@@ -2,16 +2,14 @@ import {
   AutocompleteCommand,
   IAutocompletionCommandsProps
 } from '@jupyter/chat';
-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 { Box, Typography } from '@mui/material';
 import React from 'react';
 import { AiService } from './handler';