npm package upgrades and node version 18.

mglaman · Apr 13, 2024 · d0c812e · d0c812e
1 parent 6a74105
commit d0c812e
Show file tree

Hide file tree

Showing 38 changed files with 2,679 additions and 4,365 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -38,15 +38,15 @@ jobs:
       - install-composer
   build_frontend:
     docker:
-      - image: cimg/node:16.16
+      - image: cimg/node:18.20.2
     working_directory: ~/repo
     steps:
       - checkout
       - install-yarn
       - run: yarn run frontend-build
   build_extension:
     docker:
-      - image: cimg/node:16.16
+      - image: cimg/node:18.20.2
     working_directory: ~/repo
     steps:
       - checkout

diff --git a/extension/package.json b/extension/package.json
@@ -9,17 +9,19 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
-    "@material-ui/core": "^4.9.10",
-    "@material-ui/icons": "^4.9.1",
-    "archiver": "^4.0.1",
-    "babel-loader": "^8.1.0",
-    "fs-extra": "^9.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11"
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "archiver": "^7.0.1",
+    "babel-loader": "^9.1.3",
+    "fs-extra": "^11.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   }
 }
diff --git a/extension/src/contentScripts.js b/extension/src/contentScripts.js
@@ -1,20 +1,19 @@
-import React, { useEffect, useState } from "react";
-import ReactDOM from "react-dom";
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 import {
   Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogContentText,
-  DialogActions,
   DialogTitle,
   IconButton,
   List,
   ListItem,
-  ListItemText,
   ListItemSecondaryAction,
-  ListItemIcon,
-} from "@material-ui/core";
-import { AddCircle as AddCircleIcon } from "@material-ui/icons";
+  ListItemText
+} from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
 import { apiFetch, dispatchEvent } from "./shared";
 
 // let authData = null;
@@ -291,8 +290,8 @@ const IssueCollectionButton = () => {
   const issueCollectionButton = document.createElement("div");
   issueCollectionButton.id = "cb_issue_collection_button";
   issueMetadataBlock.parentNode.appendChild(issueCollectionButton);
-  ReactDOM.render(
-    <IssueCollectionButton />,
-    document.getElementById("cb_issue_collection_button")
-  );
+
+  const container = document.getElementById("cb_issue_collection_button");
+  const root = createRoot(container);
+  root.render(<IssueCollectionButton />);
 })();
diff --git a/extension/src/popup.js b/extension/src/popup.js
@@ -1,19 +1,19 @@
 /* global chrome */
-import React, { useState, seEffect, useEffect } from "react";
-import ReactDOM from "react-dom";
 import {
   Button,
   Card,
   CardContent,
-  Typography,
   Divider,
   TextField,
-} from "@material-ui/core";
+  Typography,
+} from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
 import {
   clientId,
+  dispatchEvent,
   getAuthData,
   setAuthData as setAuthDataStorage,
-  dispatchEvent,
 } from "./shared";
 
 const LoginForm = ({ setAuthData }) => {
@@ -127,4 +127,6 @@ const PopupContainer = () => {
   return <Popup authData={authData} setAuthData={setAuthData} />;
 };
 
-ReactDOM.render(<PopupContainer />, document.getElementById("root"));
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(<PopupContainer />);
diff --git a/extension/webpack.config.js b/extension/webpack.config.js
@@ -1,19 +1,17 @@
 "use strict";
 
-module.exports = {
-  devtool: "source-map",
-  entry: {
-    contentScripts: "./src/contentScripts.js",
-    popup: "./src/popup.js",
-    background: "./src/background.js",
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        loader: "babel-loader",
-        exclude: /node_modules/,
-      },
-    ],
-  },
+export const devtool = "source-map";
+export const entry = {
+  contentScripts: "./src/contentScripts.js",
+  popup: "./src/popup.js",
+  background: "./src/background.js",
+};
+export const module = {
+  rules: [
+    {
+      test: /\.js$/,
+      loader: "babel-loader",
+      exclude: /node_modules/,
+    },
+  ],
 };
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,12 +4,15 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@material-ui/core": "^4.9.9",
-    "@material-ui/icons": "^4.9.1",
-    "qs": "^6.9.7",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "^5.1.2"
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/joy": "^5.0.0-beta.32",
+    "@mui/material": "^5.15.15",
+    "@mui/styles": "^5.15.15",
+    "qs": "^6.12.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "scripts": {
     "dev": "vite",
@@ -40,13 +43,15 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^15.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "jsdom": "^24.0.0",
-    "prettier": "2.0.3",
+    "prettier": "^3.2.5",
     "vite": "^5.2.8",
-    "vitest": "^1.4.0"
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^1.5.0"
   }
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,30 +1,32 @@
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import {
+  Route,
+  Routes
+} from "react-router-dom";
 
 import { AuthProvider } from "./context/auth";
 import AuthRoute from "./routing/AuthRoute";
 import GuestRoute from "./routing/GuestRoute";
 
 import { AppBarProvider } from "./context/appBar";
-import Home from "./pages/Home";
 import Board from "./pages/Board";
-import NodeBoard from "./pages/NodeBoard";
 import Create from "./pages/Create";
+import ForgotPassword from "./pages/ForgotPassword";
+import Home from "./pages/Home";
 import Login from "./pages/Login";
 import Logout from "./pages/Logout";
-import Register from "./pages/Register";
-import ForgotPassword from "./pages/ForgotPassword";
 import Me from "./pages/Me";
+import NodeBoard from "./pages/NodeBoard";
 import NodeBoardEditForm from "./pages/NodeBoardEditForm";
+import Register from "./pages/Register";
 
 function App() {
   return (
     <AuthProvider>
       <AppBarProvider>
-        <Switch>
-          <Route exact path={`/board/:machineName`} component={Board} />
+        <Routes>
+          <Route path={`/board/:machineName`} component={Board} />
           <Route
-            exact
             path={`/node-board/:uuid`}
             render={(props) => <NodeBoard {...props} />}
           />
@@ -38,15 +40,14 @@ function App() {
           </Route>
           <AuthRoute path={`/me`} component={Me} />
           <AuthRoute
-            exact
             path={`/node-board/:uuid/edit`}
             component={NodeBoardEditForm}
           />
           <Route path={`/logout`} component={Logout} />
-          <Route exact path={`/boards/:boardType`} component={Home} />
-          <Route exact path={`/boards`} component={Home} />
-          <Route exact path="/" component={Home} />
-        </Switch>
+          <Route path={`/boards/:boardType`} component={Home} />
+          <Route path={`/boards`} component={Home} />
+          <Route path="/" component={Home} />
+        </Routes>
       </AppBarProvider>
     </AuthProvider>
   );

diff --git a/frontend/src/components/AppBar.jsx b/frontend/src/components/AppBar.jsx
@@ -1,16 +1,19 @@
-import React, { Fragment, useState, useEffect } from "react";
-import Link from "@material-ui/core/Link";
-import { withStyles } from "@material-ui/core/styles";
-import MuiAppBar from "@material-ui/core/AppBar";
-import IconButton from "@material-ui/core/IconButton";
-import MenuIcon from "@material-ui/icons/Menu";
-import Drawer from "@material-ui/core/Drawer";
+import {
+  Divider,
+  Drawer,
+  IconButton,
+  Link,
+  AppBar as MuiAppBar
+} from '@mui/material';
+
+import MenuIcon from '@mui/icons-material/Menu';
+import { styled as withStyles } from '@mui/material/styles';
+import React, { Fragment, useEffect, useState } from "react";
 import { Link as RouterLink, useLocation } from "react-router-dom";
-import Toolbar, { styles as toolbarStyles } from "./Toolbar";
-import { Divider } from "@material-ui/core";
 import BoardMenu from "./Menus/BoardMenu";
 import ProjectMenu from "./Menus/ProjectMenu";
 import UserMenu from "./Menus/UserMenu";
+import Toolbar, { styles as toolbarStyles } from "./Toolbar";
 
 const styles = (theme) => ({
   title: {

diff --git a/frontend/src/components/Board/Board.jsx b/frontend/src/components/Board/Board.jsx
@@ -1,6 +1,6 @@
+import { Grid } from "@mui/material";
+import { styled as withStyles } from '@mui/material/styles';
 import React from "react";
-import { withStyles } from "@material-ui/core/styles";
-import { Grid } from "@material-ui/core";
 import BoardList from "./List";
 
 const styles = () => ({

diff --git a/frontend/src/components/Board/Card.jsx b/frontend/src/components/Board/Card.jsx
@@ -1,20 +1,20 @@
-import React from "react";
-import { withStyles } from "@material-ui/core/styles";
 import {
-  Typography,
-  Card,
-  CardActions,
-  CardContent,
-  Chip,
-  Link,
-} from "@material-ui/core";
+    BugReport as BugIcon,
+    Stars as FeatureRequestIcon,
+    Note as PlanIcon,
+    Help as SupportIcon,
+    AssignmentTurnedIn as TaskIcon,
+} from "@mui/icons-material";
 import {
-  BugReport as BugIcon,
-  AssignmentTurnedIn as TaskIcon,
-  Stars as FeatureRequestIcon,
-  Help as SupportIcon,
-  Note as PlanIcon,
-} from "@material-ui/icons";
+    Card,
+    CardActions,
+    CardContent,
+    Chip,
+    Link,
+    Typography,
+} from "@mui/material";
+import { styled as withStyles } from '@mui/material/styles';
+import React from "react";
 
 const statusToColor = {
   1: "#fcfcfc",

diff --git a/frontend/src/components/Board/List.jsx b/frontend/src/components/Board/List.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import { Grid, Paper, Typography } from "@material-ui/core";
+import { Grid, Paper, Typography } from "@mui/material";
+import { styled as withStyles } from '@mui/material/styles';
 import qs from "qs";
+import React, { useEffect, useState } from "react";
 import { drupalApiFetch } from "../../api";
 import KanbanCard from "./Card";
 

diff --git a/frontend/src/components/Board/NodeBoard.jsx b/frontend/src/components/Board/NodeBoard.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import { Grid, Typography, Paper } from "@material-ui/core";
+import { Grid, Paper, Typography } from "@mui/material";
+import { styled as withStyles } from '@mui/material/styles';
 import qs from "qs";
+import React, { useEffect, useState } from "react";
 import { drupalApiFetch } from "../../api";
 import KanbanCard from "./Card";
 

diff --git a/frontend/src/components/BoardListing.jsx b/frontend/src/components/BoardListing.jsx
@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from "react";
-import { withStyles } from "@material-ui/core/styles";
+import { Folder as FolderIcon } from "@mui/icons-material";
 import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
   Avatar,
   Button,
   ButtonGroup,
-  TextField,
   FormControl,
   Grid,
-} from "@material-ui/core";
-import { Folder as FolderIcon } from "@material-ui/icons";
-import { Link as RouterLink } from "react-router-dom";
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { styled as withStyles } from '@mui/material/styles';
 import qs from "qs";
+import React, { useEffect, useState } from "react";
+import { Link as RouterLink } from "react-router-dom";
 import { apiFetch } from "../api";
 
 const styles = (theme) => ({