From 72122d3a69908a3b99c190d5d6e0320ddfbbdfa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Banno-Cloutier?=
<leo.banno-cloutier@savoirfairelinux.com>
Date: Tue, 27 Jun 2023 18:14:38 -0400
Subject: [PATCH] jams-react-client: migrate material v4 to v5
Change-Id: I32c42e61933776b04fb6e102617ecceb8075ca01
---
jams-react-client/package.json | 13 ++--
.../src/components/CaSetup/CaSetup.js | 12 ++--
jams-react-client/src/components/Card/Card.js | 6 +-
.../src/components/Card/CardAvatar.js | 6 +-
.../src/components/Card/CardBody.js | 6 +-
.../src/components/Card/CardFooter.js | 6 +-
.../src/components/Card/CardHeader.js | 6 +-
.../src/components/Card/CardIcon.js | 6 +-
.../components/CountrySelect/CountrySelect.js | 6 +-
.../src/components/CreateAdmin/CreateAdmin.js | 10 +--
.../src/components/CustomButtons/Button.js | 4 +-
.../CustomImgDropZone/CustomImgDropZone.js | 6 +-
.../src/components/CustomInput/CustomInput.js | 16 ++---
.../CustomPopupState/CustomPopupState.js | 10 +--
.../CustomUiPreview/CustomUiPreview.js | 2 +-
.../components/CustomUiPreview/JamiIdCard.js | 2 +-
.../src/components/CustomUiPreview/TipBox.js | 2 +-
.../CustomizedSteppers/CustomizedSteppers.js | 16 ++---
.../src/components/Devices/Devices.js | 36 +++++-----
.../src/components/Drawer/Drawer.js | 14 ++--
.../src/components/Footer/Footer.js | 4 +-
.../src/components/FormikField/FormikField.js | 6 +-
.../src/components/Grid/GridContainer.js | 6 +-
.../src/components/Grid/GridItem.js | 6 +-
.../IdentityManagement/AdStorageForm.js | 12 ++--
.../IdentityManagement/IdentityManagement.js | 10 +--
.../IdentityManagement/LdapStorageForm.js | 14 ++--
.../IdentityManagement/LocalStorageForm.js | 8 +--
.../LanguagePicker/LanguagePicker.js | 6 +-
.../src/components/Navbars/Navbar.js | 16 ++---
.../PasswordDialog/PasswordDialog.js | 28 ++++----
.../ServerParameters/ServerParameters.js | 12 ++--
.../src/components/Sidebar/Sidebar.js | 24 +++----
.../components/Snackbar/BlueprintSnackbar.js | 6 +-
jams-react-client/src/index.js | 2 +-
jams-react-client/src/layouts/BaseLayout.js | 28 ++++----
jams-react-client/src/layouts/ListLayout.js | 28 ++++----
jams-react-client/src/layouts/SignIn.js | 18 ++---
jams-react-client/src/layouts/SignUp.js | 16 ++---
jams-react-client/src/tools.js | 2 +-
.../src/views/Blueprint/Blueprint.js | 10 +--
.../Blueprint/EditBlueprintConfiguration.js | 42 ++++++------
.../Blueprint/EditBlueprintPermissions.js | 32 ++++-----
.../src/views/Blueprint/EditBlueprintUi.js | 6 +-
.../views/Blueprint/EditBlueprintUiForm.js | 13 ++--
.../src/views/Blueprints/Blueprints.js | 40 +++++------
.../src/views/Contacts/Contacts.js | 32 ++++-----
.../src/views/Groups/EditGroup.js | 38 +++++------
jams-react-client/src/views/Groups/Groups.js | 44 ++++++------
.../src/views/Settings/General.js | 22 +++---
.../src/views/Settings/Settings.js | 12 ++--
.../src/views/Settings/Subscription.js | 10 +--
.../views/UserProfile/DisplayUserProfile.js | 68 +++++++++----------
.../UserProfile/EditCreateUserProfile.js | 58 ++++++++--------
.../src/views/UserProfile/UserProfile.js | 10 +--
jams-react-client/src/views/Users/Users.js | 20 +++---
56 files changed, 450 insertions(+), 444 deletions(-)
diff --git a/jams-react-client/package.json b/jams-react-client/package.json
index 361a1230..47d422e0 100644
--- a/jams-react-client/package.json
+++ b/jams-react-client/package.json
@@ -5,9 +5,13 @@
"private": false,
"main": "dist/index.js",
"dependencies": {
- "@material-ui/core": "4.12.4",
- "@material-ui/icons": "4.11.3",
- "@material-ui/lab": "^4.0.0-alpha.56",
+ "@emotion/react": "^11.11.1",
+ "@emotion/styled": "^11.11.0",
+ "@mui/base": "^5.0.0-beta.5",
+ "@mui/icons-material": "^5.11.16",
+ "@mui/lab": "^5.0.0-alpha.134",
+ "@mui/material": "^5.13.6",
+ "@mui/styles": "^5.13.2",
"axios": "^1.4.0",
"classnames": "2.3.2",
"formik": "^2.1.5",
@@ -21,7 +25,7 @@
"material-ui-popup-state": "^1.6.1",
"perfect-scrollbar": "1.5.5",
"prop-types": "15.8.1",
- "react": "^17.0.0",
+ "react": "^17.0.2",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^17.0.0",
@@ -60,6 +64,7 @@
},
"devDependencies": {
"@babel/core": "^7.11.6",
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-i18next-extract": "^0.8.0",
"eslint-config-prettier": "6.11.0",
diff --git a/jams-react-client/src/components/CaSetup/CaSetup.js b/jams-react-client/src/components/CaSetup/CaSetup.js
index e0886062..88497932 100644
--- a/jams-react-client/src/components/CaSetup/CaSetup.js
+++ b/jams-react-client/src/components/CaSetup/CaSetup.js
@@ -2,9 +2,9 @@ import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { Formik, Field } from "formik";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import { makeStyles } from "@mui/styles";
import CountrySelect from "components/CountrySelect/CountrySelect.js";
@@ -12,10 +12,10 @@ import auth from "../../auth";
import axios from "axios";
import configApiCall from "../../api";
import { api_path_post_install_ca } from "../../globalUrls";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
import * as tool from "../../tools";
-import Input from "@material-ui/core/Input";
-import Typography from "@material-ui/core/Typography";
+import Input from "@mui/material/Input";
+import Typography from "@mui/material/Typography";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/Card/Card.js b/jams-react-client/src/components/Card/Card.js
index 567dd7b9..acecb9ac 100644
--- a/jams-react-client/src/components/Card/Card.js
+++ b/jams-react-client/src/components/Card/Card.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardStyle.js";
diff --git a/jams-react-client/src/components/Card/CardAvatar.js b/jams-react-client/src/components/Card/CardAvatar.js
index 67e5e110..4cff1dc8 100644
--- a/jams-react-client/src/components/Card/CardAvatar.js
+++ b/jams-react-client/src/components/Card/CardAvatar.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardAvatarStyle.js";
diff --git a/jams-react-client/src/components/Card/CardBody.js b/jams-react-client/src/components/Card/CardBody.js
index 4c65b902..93e9ee99 100644
--- a/jams-react-client/src/components/Card/CardBody.js
+++ b/jams-react-client/src/components/Card/CardBody.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardBodyStyle.js";
diff --git a/jams-react-client/src/components/Card/CardFooter.js b/jams-react-client/src/components/Card/CardFooter.js
index 9559a388..7cc2780e 100644
--- a/jams-react-client/src/components/Card/CardFooter.js
+++ b/jams-react-client/src/components/Card/CardFooter.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardFooterStyle.js";
diff --git a/jams-react-client/src/components/Card/CardHeader.js b/jams-react-client/src/components/Card/CardHeader.js
index 6c15a0a7..88a9f1e1 100644
--- a/jams-react-client/src/components/Card/CardHeader.js
+++ b/jams-react-client/src/components/Card/CardHeader.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardHeaderStyle.js";
diff --git a/jams-react-client/src/components/Card/CardIcon.js b/jams-react-client/src/components/Card/CardIcon.js
index ba728619..9da0bc7a 100644
--- a/jams-react-client/src/components/Card/CardIcon.js
+++ b/jams-react-client/src/components/Card/CardIcon.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardIconStyle.js";
diff --git a/jams-react-client/src/components/CountrySelect/CountrySelect.js b/jams-react-client/src/components/CountrySelect/CountrySelect.js
index 9b7a4f46..89593067 100644
--- a/jams-react-client/src/components/CountrySelect/CountrySelect.js
+++ b/jams-react-client/src/components/CountrySelect/CountrySelect.js
@@ -1,7 +1,7 @@
import React from "react";
-import TextField from "@material-ui/core/TextField";
-import Autocomplete from "@material-ui/lab/Autocomplete";
-import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/lab/Autocomplete";
+import { makeStyles } from "@mui/styles";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/CreateAdmin/CreateAdmin.js b/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
index 31951800..518fc508 100644
--- a/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
+++ b/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
@@ -2,11 +2,11 @@ import React from "react";
import { useHistory } from "react-router-dom";
import { useFormik } from "formik";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
import axios from "axios";
import configApiCall from "../../api";
diff --git a/jams-react-client/src/components/CustomButtons/Button.js b/jams-react-client/src/components/CustomButtons/Button.js
index 09ab8f2d..3ce0082f 100644
--- a/jams-react-client/src/components/CustomButtons/Button.js
+++ b/jams-react-client/src/components/CustomButtons/Button.js
@@ -5,8 +5,8 @@ import classNames from "classnames";
import PropTypes from "prop-types";
// material-ui components
-import { makeStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
+import { makeStyles } from "@mui/styles";
+import Button from "@mui/material/Button";
import styles from "assets/jss/material-dashboard-react/components/buttonStyle.js";
diff --git a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
index 988733d0..f29c525b 100644
--- a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
+++ b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
@@ -1,8 +1,8 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import Dropzone from "react-dropzone";
-import UploadIcon from "@material-ui/icons/CloudUpload";
-import CloseIcon from "@material-ui/icons/Close";
+import UploadIcon from "@mui/icons-material/CloudUpload";
+import CloseIcon from "@mui/icons-material/Close";
const useStyles = makeStyles({
dropzoneStyle: {
diff --git a/jams-react-client/src/components/CustomInput/CustomInput.js b/jams-react-client/src/components/CustomInput/CustomInput.js
index 59e17957..2b20d1f2 100644
--- a/jams-react-client/src/components/CustomInput/CustomInput.js
+++ b/jams-react-client/src/components/CustomInput/CustomInput.js
@@ -1,14 +1,14 @@
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
-// @material-ui/icons
-import Clear from "@material-ui/icons/Clear";
-import Check from "@material-ui/icons/Check";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Input from "@mui/material/Input";
+// @mui/icons-material
+import Clear from "@mui/icons-material/Clear";
+import Check from "@mui/icons-material/Check";
// core components
import styles from "assets/jss/material-dashboard-react/components/customInputStyle.js";
diff --git a/jams-react-client/src/components/CustomPopupState/CustomPopupState.js b/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
index 5ee4948b..a9d3e621 100644
--- a/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
+++ b/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
@@ -1,10 +1,10 @@
import React from "react";
-import InfoIcon from "@material-ui/icons/Info";
-import Popover from "@material-ui/core/Popover";
+import InfoIcon from "@mui/icons-material/Info";
+import Popover from "@mui/material/Popover";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
-import IconButton from "@material-ui/core/IconButton";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
export default function CustomPopupState(props) {
return (
diff --git a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
index 88a336aa..c1819729 100644
--- a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
+++ b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
@@ -1,6 +1,6 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import logoImage from "assets/img/logo-jami-net.svg";
diff --git a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
index 08add659..f6a6e344 100644
--- a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
+++ b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
@@ -1,6 +1,6 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import jamiIdImage from "assets/img/jami_id.svg";
import copySvg from "assets/img/BTN_Copy.svg";
diff --git a/jams-react-client/src/components/CustomUiPreview/TipBox.js b/jams-react-client/src/components/CustomUiPreview/TipBox.js
index 948bd024..1df6a645 100644
--- a/jams-react-client/src/components/CustomUiPreview/TipBox.js
+++ b/jams-react-client/src/components/CustomUiPreview/TipBox.js
@@ -1,5 +1,5 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import tipLightBulbImage from "assets/img/tip_light_bulb.svg";
diff --git a/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js b/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js
index cf12276b..3f9c39d2 100644
--- a/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js
+++ b/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js
@@ -1,14 +1,14 @@
import React from "react";
import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import clsx from "clsx";
-import Stepper from "@material-ui/core/Stepper";
-import Step from "@material-ui/core/Step";
-import StepLabel from "@material-ui/core/StepLabel";
-import Check from "@material-ui/icons/Check";
-import SettingsIcon from "@material-ui/icons/Settings";
-import GroupAddIcon from "@material-ui/icons/GroupAdd";
-import VideoLabelIcon from "@material-ui/icons/VideoLabel";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import Check from "@mui/icons-material/Check";
+import SettingsIcon from "@mui/icons-material/Settings";
+import GroupAddIcon from "@mui/icons-material/GroupAdd";
+import VideoLabelIcon from "@mui/icons-material/VideoLabel";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/Devices/Devices.js b/jams-react-client/src/components/Devices/Devices.js
index d4852b4f..ecaf88e5 100755
--- a/jams-react-client/src/components/Devices/Devices.js
+++ b/jams-react-client/src/components/Devices/Devices.js
@@ -3,26 +3,26 @@ import { useHistory } from "react-router-dom";
import classnames from "classnames";
import { Formik, Field } from "formik";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
import Button from "components/CustomButtons/Button.js";
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import TextField from "@material-ui/core/TextField";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import TextField from "@mui/material/TextField";
-// @material-ui/icons
-import Edit from "@material-ui/icons/Edit";
-import Close from "@material-ui/icons/Close";
+// @mui/icons-material
+import Edit from "@mui/icons-material/Edit";
+import Close from "@mui/icons-material/Close";
// core components
import styles from "assets/jss/material-dashboard-react/components/devicesStyle.js";
import auth from "auth.js";
diff --git a/jams-react-client/src/components/Drawer/Drawer.js b/jams-react-client/src/components/Drawer/Drawer.js
index d1f6ab5e..3a81608b 100644
--- a/jams-react-client/src/components/Drawer/Drawer.js
+++ b/jams-react-client/src/components/Drawer/Drawer.js
@@ -1,13 +1,13 @@
import React, { useCallback } from "react";
import clsx from "clsx";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import CustomInput from "components/CustomInput/CustomInput.js";
-import Drawer from "@material-ui/core/Drawer";
-import List from "@material-ui/core/List";
-import Divider from "@material-ui/core/Divider";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import Avatar from "@material-ui/core/Avatar";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Avatar from "@mui/material/Avatar";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
diff --git a/jams-react-client/src/components/Footer/Footer.js b/jams-react-client/src/components/Footer/Footer.js
index eea542ed..1f54292d 100755
--- a/jams-react-client/src/components/Footer/Footer.js
+++ b/jams-react-client/src/components/Footer/Footer.js
@@ -1,6 +1,6 @@
import React from "react";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import styles from "assets/jss/material-dashboard-react/components/footerStyle.js";
diff --git a/jams-react-client/src/components/FormikField/FormikField.js b/jams-react-client/src/components/FormikField/FormikField.js
index 6692bb87..b1f118e2 100644
--- a/jams-react-client/src/components/FormikField/FormikField.js
+++ b/jams-react-client/src/components/FormikField/FormikField.js
@@ -2,9 +2,9 @@ import React from "react";
import PropTypes from "prop-types";
import { ErrorMessage, Field } from "formik";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Input from "@mui/material/Input";
class FormikField extends React.Component {
render() {
diff --git a/jams-react-client/src/components/Grid/GridContainer.js b/jams-react-client/src/components/Grid/GridContainer.js
index e4f81135..585746cc 100644
--- a/jams-react-client/src/components/Grid/GridContainer.js
+++ b/jams-react-client/src/components/Grid/GridContainer.js
@@ -1,9 +1,9 @@
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Grid from "@mui/material/Grid";
const styles = {
grid: {
diff --git a/jams-react-client/src/components/Grid/GridItem.js b/jams-react-client/src/components/Grid/GridItem.js
index bb74c2a2..2161d6b8 100644
--- a/jams-react-client/src/components/Grid/GridItem.js
+++ b/jams-react-client/src/components/Grid/GridItem.js
@@ -1,9 +1,9 @@
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Grid from "@mui/material/Grid";
const styles = {
grid: {
diff --git a/jams-react-client/src/components/IdentityManagement/AdStorageForm.js b/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
index 2880ea1f..6259f35b 100644
--- a/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
@@ -1,11 +1,11 @@
import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
-import TextField from "@material-ui/core/TextField";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
+import TextField from "@mui/material/TextField";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
index d491f7f1..d65bd88d 100644
--- a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
+++ b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { Formik } from "formik";
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
-import { makeStyles } from "@material-ui/core/styles";
-import Select from "@material-ui/core/Select";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
+import { makeStyles } from "@mui/styles";
+import Select from "@mui/material/Select";
import { buildSelectMenuItems } from "../../tools";
diff --git a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
index df98d525..580f7826 100644
--- a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
@@ -1,12 +1,12 @@
import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
-import TextField from "@material-ui/core/TextField";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import Select from "@material-ui/core/Select";
+import TextField from "@mui/material/TextField";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import Select from "@mui/material/Select";
import CustomPopupState from "../CustomPopupState/CustomPopupState";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js b/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js
index 1fd17ff0..4b4dd143 100644
--- a/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js
@@ -1,8 +1,8 @@
import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
import CustomPopupState from "../CustomPopupState/CustomPopupState";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/LanguagePicker/LanguagePicker.js b/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
index 140970bc..653b9c2a 100644
--- a/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
+++ b/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-import Button from "@material-ui/core/Button";
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
import PopupState, { bindTrigger, bindMenu } from "material-ui-popup-state";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/Navbars/Navbar.js b/jams-react-client/src/components/Navbars/Navbar.js
index f9689a9e..ebf21761 100755
--- a/jams-react-client/src/components/Navbars/Navbar.js
+++ b/jams-react-client/src/components/Navbars/Navbar.js
@@ -1,14 +1,14 @@
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import IconButton from "@material-ui/core/IconButton";
-import Hidden from "@material-ui/core/Hidden";
-// @material-ui/icons
-import Menu from "@material-ui/icons/Menu";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Hidden from "@mui/material/Hidden";
+// @mui/icons-material
+import Menu from "@mui/icons-material/Menu";
// core components
import Button from "components/CustomButtons/Button.js";
diff --git a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
index b3974c11..dd59997a 100644
--- a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
+++ b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
@@ -1,18 +1,18 @@
import React, { useEffect, useState } from "react";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import Button from "components/CustomButtons/Button.js";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import InputAdornment from "@mui/material/InputAdornment";
import { Formik } from "formik";
import FormikField from "components/FormikField/FormikField";
@@ -22,12 +22,12 @@ import axios from "axios";
import configApiCall from "api.js";
import { api_path_put_update_user } from "globalUrls";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import RefreshIcon from "@material-ui/icons/Refresh";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import IconButton from "@material-ui/core/IconButton";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import IconButton from "@mui/material/IconButton";
import { CopyToClipboard } from "react-copy-to-clipboard";
diff --git a/jams-react-client/src/components/ServerParameters/ServerParameters.js b/jams-react-client/src/components/ServerParameters/ServerParameters.js
index 1ce5e8fe..1489ab7a 100644
--- a/jams-react-client/src/components/ServerParameters/ServerParameters.js
+++ b/jams-react-client/src/components/ServerParameters/ServerParameters.js
@@ -1,14 +1,14 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
import { Formik } from "formik";
import CustomPopupState from "../CustomPopupState/CustomPopupState";
-import Select from "@material-ui/core/Select";
-import Input from "@material-ui/core/Input";
+import Select from "@mui/material/Select";
+import Input from "@mui/material/Input";
import * as tool from "../../tools";
diff --git a/jams-react-client/src/components/Sidebar/Sidebar.js b/jams-react-client/src/components/Sidebar/Sidebar.js
index 92e84bd7..12beefb3 100755
--- a/jams-react-client/src/components/Sidebar/Sidebar.js
+++ b/jams-react-client/src/components/Sidebar/Sidebar.js
@@ -3,18 +3,18 @@ import { Link, useHistory } from "react-router-dom";
import classNames from "classnames";
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import Hidden from "@material-ui/core/Hidden";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import Icon from "@material-ui/core/Icon";
-import Snackbar from "@material-ui/core/Snackbar/Snackbar";
-
-import ExitToAppIcon from "@material-ui/icons/ExitToApp";
-import UpdateIcon from "@material-ui/icons/Update";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Drawer from "@mui/material/Drawer";
+import Hidden from "@mui/material/Hidden";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Icon from "@mui/material/Icon";
+import Snackbar from "@mui/material/Snackbar/Snackbar";
+
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import UpdateIcon from "@mui/icons-material/Update";
import styles from "assets/jss/material-dashboard-react/components/sidebarStyle.js";
diff --git a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
index d52ac284..cf222dc7 100644
--- a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
+++ b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
@@ -1,9 +1,9 @@
import React from "react";
import PropTypes from "prop-types";
-import MuiAlert from "@material-ui/lab/Alert";
-import Snackbar from "@material-ui/core/Snackbar";
-import Slide from "@material-ui/core/Slide";
+import MuiAlert from "@mui/lab/Alert";
+import Snackbar from "@mui/material/Snackbar";
+import Slide from "@mui/material/Slide";
// https://stackoverflow.com/a/67961603
const Alert = React.forwardRef(function Alert(props, ref) {
diff --git a/jams-react-client/src/index.js b/jams-react-client/src/index.js
index 7865c818..3c3063da 100644
--- a/jams-react-client/src/index.js
+++ b/jams-react-client/src/index.js
@@ -23,7 +23,7 @@ import { ProtectedRoute } from "protected.route";
import { ConfiguredRoute } from "configured.route";
import auth from "./auth";
-import { ThemeProvider, createTheme } from "@material-ui/core";
+import { ThemeProvider, createTheme } from "@mui/material";
// core components
import UsersRoute from "routes/UsersRoute.js";
diff --git a/jams-react-client/src/layouts/BaseLayout.js b/jams-react-client/src/layouts/BaseLayout.js
index 5f99b236..f36ecff8 100644
--- a/jams-react-client/src/layouts/BaseLayout.js
+++ b/jams-react-client/src/layouts/BaseLayout.js
@@ -2,18 +2,18 @@ import React, { useEffect, useState } from "react";
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import Navbar from "components/Navbars/Navbar.js";
import Footer from "components/Footer/Footer.js";
import Sidebar from "components/Sidebar/Sidebar.js";
-// @material-ui/icons
-import Person from "@material-ui/icons/Person";
-import Group from "@material-ui/icons/Group";
-import AllInbox from "@material-ui/icons/AllInbox";
-import SettingsIcon from "@material-ui/icons/Settings";
+// @mui/icons-material
+import Person from "@mui/icons-material/Person";
+import Group from "@mui/icons-material/Group";
+import AllInbox from "@mui/icons-material/AllInbox";
+import SettingsIcon from "@mui/icons-material/Settings";
// core components/views for Admin layout
import Users from "views/Users/Users.js";
import Groups from "views/Groups/Groups.js";
@@ -32,15 +32,15 @@ import { api_path_get_start_update } from "globalUrls";
import axios from "axios";
-import Dialog from "@material-ui/core/Dialog/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent/DialogContent";
-import DialogActions from "@material-ui/core/DialogActions/DialogActions";
-import DialogContentText from "@material-ui/core/DialogContentText/DialogContentText";
-import Button from "@material-ui/core/Button";
+import Dialog from "@mui/material/Dialog/Dialog";
+import DialogTitle from "@mui/material/DialogTitle/DialogTitle";
+import DialogContent from "@mui/material/DialogContent/DialogContent";
+import DialogActions from "@mui/material/DialogActions/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText/DialogContentText";
+import Button from "@mui/material/Button";
import i18next from "i18next";
-import { AccountCircle as AccountCircleIcon } from "@material-ui/icons";
+import { AccountCircle as AccountCircleIcon } from "@mui/icons-material";
let ps;
diff --git a/jams-react-client/src/layouts/ListLayout.js b/jams-react-client/src/layouts/ListLayout.js
index 94da3297..e0c29c58 100644
--- a/jams-react-client/src/layouts/ListLayout.js
+++ b/jams-react-client/src/layouts/ListLayout.js
@@ -2,19 +2,19 @@ import React, { useEffect, useState } from "react";
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import Navbar from "components/Navbars/Navbar.js";
import Footer from "components/Footer/Footer.js";
import Sidebar from "components/Sidebar/Sidebar.js";
-// @material-ui/icons
-import AccountCircleIcon from "@material-ui/icons/AccountCircle";
-import Person from "@material-ui/icons/Person";
-import Group from "@material-ui/icons/Group";
-import AllInbox from "@material-ui/icons/AllInbox";
-import SettingsIcon from "@material-ui/icons/Settings";
+// @mui/icons-material
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import Person from "@mui/icons-material/Person";
+import Group from "@mui/icons-material/Group";
+import AllInbox from "@mui/icons-material/AllInbox";
+import SettingsIcon from "@mui/icons-material/Settings";
// core components/views for Admin layout
import Users from "views/Users/Users.js";
import Groups from "views/Groups/Groups.js";
@@ -33,12 +33,12 @@ import { api_path_get_start_update } from "globalUrls";
import axios from "axios";
-import Dialog from "@material-ui/core/Dialog/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent/DialogContent";
-import DialogActions from "@material-ui/core/DialogActions/DialogActions";
-import DialogContentText from "@material-ui/core/DialogContentText/DialogContentText";
-import Button from "@material-ui/core/Button";
+import Dialog from "@mui/material/Dialog/Dialog";
+import DialogTitle from "@mui/material/DialogTitle/DialogTitle";
+import DialogContent from "@mui/material/DialogContent/DialogContent";
+import DialogActions from "@mui/material/DialogActions/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText/DialogContentText";
+import Button from "@mui/material/Button";
import i18next from "i18next";
diff --git a/jams-react-client/src/layouts/SignIn.js b/jams-react-client/src/layouts/SignIn.js
index c6393c00..1d6366ec 100644
--- a/jams-react-client/src/layouts/SignIn.js
+++ b/jams-react-client/src/layouts/SignIn.js
@@ -1,15 +1,15 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Formik } from "formik";
-import Button from "@material-ui/core/Button";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import TextField from "@material-ui/core/TextField";
-import Link from "@material-ui/core/Link";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
-import Container from "@material-ui/core/Container";
-import MuiAlert from "@material-ui/lab/Alert";
+import Button from "@mui/material/Button";
+import CssBaseline from "@mui/material/CssBaseline";
+import TextField from "@mui/material/TextField";
+import Link from "@mui/material/Link";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
+import Container from "@mui/material/Container";
+import MuiAlert from "@mui/lab/Alert";
import auth from "../auth.js";
import LanguagePicker from "../components/LanguagePicker/LanguagePicker";
diff --git a/jams-react-client/src/layouts/SignUp.js b/jams-react-client/src/layouts/SignUp.js
index 84775d6f..6f96a35f 100644
--- a/jams-react-client/src/layouts/SignUp.js
+++ b/jams-react-client/src/layouts/SignUp.js
@@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import Link from "@material-ui/core/Link";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
-import Container from "@material-ui/core/Container";
-import MuiAlert from "@material-ui/lab/Alert";
-import Paper from "@material-ui/core/Paper";
+import CssBaseline from "@mui/material/CssBaseline";
+import Link from "@mui/material/Link";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
+import Container from "@mui/material/Container";
+import MuiAlert from "@mui/lab/Alert";
+import Paper from "@mui/material/Paper";
import logo from "assets/img/jams_logo_no_gnu_package.svg";
diff --git a/jams-react-client/src/tools.js b/jams-react-client/src/tools.js
index e3df480d..c8bf330b 100644
--- a/jams-react-client/src/tools.js
+++ b/jams-react-client/src/tools.js
@@ -1,5 +1,5 @@
import React from "react";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
export function buildSelectMenuItems(elements) {
return elements.map((d) => (
diff --git a/jams-react-client/src/views/Blueprint/Blueprint.js b/jams-react-client/src/views/Blueprint/Blueprint.js
index ecf1a1fc..19d90457 100644
--- a/jams-react-client/src/views/Blueprint/Blueprint.js
+++ b/jams-react-client/src/views/Blueprint/Blueprint.js
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import EditBlueprintPermissions from "./EditBlueprintPermissions";
import EditBlueprintConfiguration from "./EditBlueprintConfiguration";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
index 2f4dfa99..6bc9896a 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
@@ -1,37 +1,37 @@
import React, { useContext, useState } from "react";
import clsx from "clsx";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import InputLabel from "@mui/material/InputLabel";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import Switch from "@material-ui/core/Switch";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import Switch from "@mui/material/Switch";
-import BuildOutlinedIcon from "@material-ui/icons/BuildOutlined";
-import IconButton from "@material-ui/core/IconButton";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import DnsOutlinedIcon from "@material-ui/icons/DnsOutlined";
-import AccountCircleIcon from "@material-ui/icons/AccountCircle";
-import VpnKeyOutlinedIcon from "@material-ui/icons/VpnKeyOutlined";
-import LanguageOutlinedIcon from "@material-ui/icons/LanguageOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import IconButton from "@mui/material/IconButton";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import DnsOutlinedIcon from "@mui/icons-material/DnsOutlined";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import VpnKeyOutlinedIcon from "@mui/icons-material/VpnKeyOutlined";
+import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
index 3ae3e513..8d7ca275 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
@@ -3,24 +3,24 @@ import { Link, useHistory } from "react-router-dom";
import axios from "axios";
import i18next from "i18next";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Checkbox from "@material-ui/core/Checkbox";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Checkbox from "@mui/material/Checkbox";
-import Avatar from "@material-ui/core/Avatar";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormLabel from "@material-ui/core/FormLabel";
-import Grid from "@material-ui/core/Grid";
-import Switch from "@material-ui/core/Switch";
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
+import Avatar from "@mui/material/Avatar";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormLabel from "@mui/material/FormLabel";
+import Grid from "@mui/material/Grid";
+import Switch from "@mui/material/Switch";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-import PriorityHighOutlinedIcon from "@material-ui/icons/PriorityHighOutlined";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import PriorityHighOutlinedIcon from "@mui/icons-material/PriorityHighOutlined";
import BlueprintSnackbar from "components/Snackbar/BlueprintSnackbar";
import Button from "components/CustomButtons/Button.js";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
index d5be85f8..263a9ba9 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
@@ -1,8 +1,8 @@
import React, { useContext, useState } from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import SettingsIcon from "@material-ui/icons/Settings";
+import { makeStyles } from "@mui/styles";
+import Grid from "@mui/material/Grid";
+import SettingsIcon from "@mui/icons-material/Settings";
import BlueprintSnackbar from "components/Snackbar/BlueprintSnackbar";
import Card from "components/Card/Card.js";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
index 33385330..19ca4777 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
@@ -1,13 +1,14 @@
import React, { useState } from "react";
-import Checkbox from "@material-ui/core/Checkbox";
-import Switch from "@material-ui/core/Switch";
+import Checkbox from "@mui/material/Checkbox";
+import Switch from "@mui/material/Switch";
import { SketchPicker } from "react-color";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import { TextField, makeStyles } from "@material-ui/core";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { TextField } from "@mui/material";
+import { makeStyles } from "@mui/styles";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
import CustomImgDropZone from "components/CustomImgDropZone/CustomImgDropZone";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Blueprints/Blueprints.js b/jams-react-client/src/views/Blueprints/Blueprints.js
index 2a250674..c137d58d 100644
--- a/jams-react-client/src/views/Blueprints/Blueprints.js
+++ b/jams-react-client/src/views/Blueprints/Blueprints.js
@@ -1,45 +1,45 @@
import React, { useCallback, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import InputLabel from "@mui/material/InputLabel";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import Button from "components/CustomButtons/Button.js";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
-import FormControl from "@material-ui/core/FormControl";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import GroupIcon from "@material-ui/icons/Group";
-import PersonIcon from "@material-ui/icons/Person";
-import Search from "@material-ui/icons/Search";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
-import InfoIcon from "@material-ui/icons/Info";
+import GroupIcon from "@mui/icons-material/Group";
+import PersonIcon from "@mui/icons-material/Person";
+import Search from "@mui/icons-material/Search";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import InfoIcon from "@mui/icons-material/Info";
-import AllInbox from "@material-ui/icons/AllInbox";
+import AllInbox from "@mui/icons-material/AllInbox";
import axios from "axios";
import configApiCall from "api.js";
import auth from "auth.js";
import { api_path_blueprints } from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.js";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
import { debounce } from "lodash";
diff --git a/jams-react-client/src/views/Contacts/Contacts.js b/jams-react-client/src/views/Contacts/Contacts.js
index 2789cbb9..7ed9da0a 100644
--- a/jams-react-client/src/views/Contacts/Contacts.js
+++ b/jams-react-client/src/views/Contacts/Contacts.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
@@ -12,13 +12,13 @@ import CardAvatar from "components/Card/CardAvatar.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
-import BusinessOutlinedIcon from "@material-ui/icons/BusinessOutlined";
-import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
-import SmsFailedIcon from "@material-ui/icons/SmsFailed";
-import LaunchIcon from "@material-ui/icons/Launch";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
+import SmsFailedIcon from "@mui/icons-material/SmsFailed";
+import LaunchIcon from "@mui/icons-material/Launch";
-import Search from "@material-ui/icons/Search";
-import IconButton from "@material-ui/core/IconButton";
+import Search from "@mui/icons-material/Search";
+import IconButton from "@mui/material/IconButton";
import axios from "axios";
import configApiCall from "api.js";
@@ -33,19 +33,19 @@ import {
api_path_get_user_directory_search,
} from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import jami from "assets/img/faces/jami.png";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.js";
import TemporaryDrawer from "components/Drawer/Drawer";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Groups/EditGroup.js b/jams-react-client/src/views/Groups/EditGroup.js
index 3cc8e922..cf15e2f1 100644
--- a/jams-react-client/src/views/Groups/EditGroup.js
+++ b/jams-react-client/src/views/Groups/EditGroup.js
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import classnames from "classnames";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -14,25 +14,25 @@ import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
-import FormControl from "@material-ui/core/FormControl";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import InputLabel from "@material-ui/core/InputLabel";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import InputLabel from "@mui/material/InputLabel";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-import EditIcon from "@material-ui/icons/Edit";
-import PeopleOutlineIcon from "@material-ui/icons/PeopleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import EditIcon from "@mui/icons-material/Edit";
+import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
-import IconButton from "@material-ui/core/IconButton";
-import SaveIcon from "@material-ui/icons/Save";
+import IconButton from "@mui/material/IconButton";
+import SaveIcon from "@mui/icons-material/Save";
import axios from "axios";
import configApiCall from "../../api";
@@ -50,7 +50,7 @@ import {
import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import devicesStyle from "assets/jss/material-dashboard-react/components/devicesStyle.js";
-import Avatar from "@material-ui/core/Avatar";
+import Avatar from "@mui/material/Avatar";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
diff --git a/jams-react-client/src/views/Groups/Groups.js b/jams-react-client/src/views/Groups/Groups.js
index d3060e53..07af2979 100644
--- a/jams-react-client/src/views/Groups/Groups.js
+++ b/jams-react-client/src/views/Groups/Groups.js
@@ -1,10 +1,10 @@
import React, { useEffect, useState, useCallback } from "react";
import { Link, useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import InputLabel from "@mui/material/InputLabel";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -13,15 +13,15 @@ import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import CustomInput from "components/CustomInput/CustomInput.js";
-import IconButton from "@material-ui/core/IconButton";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
-import Search from "@material-ui/icons/Search";
-import PeopleOutlineIcon from "@material-ui/icons/PeopleOutline";
-import MailOutlineIcon from "@material-ui/icons/MailOutline";
-import PersonIcon from "@material-ui/icons/Person";
-import InfoIcon from "@material-ui/icons/Info";
+import IconButton from "@mui/material/IconButton";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import Search from "@mui/icons-material/Search";
+import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
+import MailOutlineIcon from "@mui/icons-material/MailOutline";
+import PersonIcon from "@mui/icons-material/Person";
+import InfoIcon from "@mui/icons-material/Info";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
import * as tool from "../../tools";
import axios from "axios";
@@ -35,21 +35,21 @@ import {
api_path_get_group_members,
} from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import FormControl from "@material-ui/core/FormControl";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
import { debounce } from "lodash";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Settings/General.js b/jams-react-client/src/views/Settings/General.js
index bb82b6ca..f7e8c528 100644
--- a/jams-react-client/src/views/Settings/General.js
+++ b/jams-react-client/src/views/Settings/General.js
@@ -2,18 +2,18 @@ import React, { useState } from "react";
import { Formik } from "formik";
import FormikField from "components/FormikField/FormikField";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
-import RefreshIcon from "@material-ui/icons/Refresh";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import IconButton from "@material-ui/core/IconButton";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import IconButton from "@mui/material/IconButton";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import InputAdornment from "@mui/material/InputAdornment";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
diff --git a/jams-react-client/src/views/Settings/Settings.js b/jams-react-client/src/views/Settings/Settings.js
index 5398e118..eb1056ec 100644
--- a/jams-react-client/src/views/Settings/Settings.js
+++ b/jams-react-client/src/views/Settings/Settings.js
@@ -4,14 +4,14 @@ import General from "./General";
import Subscription from "./Subscription";
import PropTypes from "prop-types";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import { infoColor } from "assets/jss/material-dashboard-react.js";
-import MuiAlert from "@material-ui/lab/Alert";
+import MuiAlert from "@mui/lab/Alert";
import auth from "auth.js";
diff --git a/jams-react-client/src/views/Settings/Subscription.js b/jams-react-client/src/views/Settings/Subscription.js
index 32745f8a..32ce443d 100644
--- a/jams-react-client/src/views/Settings/Subscription.js
+++ b/jams-react-client/src/views/Settings/Subscription.js
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index 5153a0c2..62c1796b 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import classnames from "classnames";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -12,42 +12,42 @@ import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import EditIcon from "@material-ui/icons/Edit";
-import DeleteIcon from "@material-ui/icons/Delete";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-
-import Grid from "@material-ui/core/Grid";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
-import BusinessCenterOutlinedIcon from "@material-ui/icons/BusinessCenterOutlined";
-import AlternateEmailOutlinedIcon from "@material-ui/icons/AlternateEmailOutlined";
-import PhoneInTalkOutlinedIcon from "@material-ui/icons/PhoneInTalkOutlined";
-import SmartphoneOutlinedIcon from "@material-ui/icons/SmartphoneOutlined";
-import LocalPrintshopOutlinedIcon from "@material-ui/icons/LocalPrintshopOutlined";
-import PhoneForwardedOutlinedIcon from "@material-ui/icons/PhoneForwardedOutlined";
-
-import Avatar from "@material-ui/core/Avatar";
-import Chip from "@material-ui/core/Chip";
+import BusinessCenterOutlinedIcon from "@mui/icons-material/BusinessCenterOutlined";
+import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";
+import PhoneInTalkOutlinedIcon from "@mui/icons-material/PhoneInTalkOutlined";
+import SmartphoneOutlinedIcon from "@mui/icons-material/SmartphoneOutlined";
+import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
+import PhoneForwardedOutlinedIcon from "@mui/icons-material/PhoneForwardedOutlined";
+
+import Avatar from "@mui/material/Avatar";
+import Chip from "@mui/material/Chip";
import CardAvatar from "components/Card/CardAvatar";
-import PersonIcon from "../../../node_modules/@material-ui/icons/Person";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import PersonIcon from "../../../node_modules/@mui/icons-material/Person";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemAvatar from "@material-ui/core/ListItemAvatar";
-import ListItemText from "@material-ui/core/ListItemText";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemText from "@mui/material/ListItemText";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import auth from "auth.js";
import configApiCall from "api.js";
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index c8b2288f..7c4d86c6 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -14,38 +14,38 @@ import CardAvatar from "components/Card/CardAvatar.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
-import InputAdornment from "@material-ui/core/InputAdornment";
-import Slider from "@material-ui/core/Slider";
-import Typography from "@material-ui/core/Typography";
+import InputAdornment from "@mui/material/InputAdornment";
+import Slider from "@mui/material/Slider";
+import Typography from "@mui/material/Typography";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
import Cropper from "react-easy-crop";
import getCroppedImg from "./cropImage";
import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react.js";
-import AccountCircleIcon from "@material-ui/icons/AccountCircle";
-import BusinessCenterOutlinedIcon from "@material-ui/icons/BusinessCenterOutlined";
-import AlternateEmailOutlinedIcon from "@material-ui/icons/AlternateEmailOutlined";
-import PhoneInTalkOutlinedIcon from "@material-ui/icons/PhoneInTalkOutlined";
-import PhoneForwardedOutlinedIcon from "@material-ui/icons/PhoneForwardedOutlined";
-import SmartphoneOutlinedIcon from "@material-ui/icons/SmartphoneOutlined";
-import LocalPrintshopOutlinedIcon from "@material-ui/icons/LocalPrintshopOutlined";
-import PersonIcon from "@material-ui/icons/Person";
-import PersonOutlinedIcon from "@material-ui/icons/PersonOutlined";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import RefreshIcon from "@material-ui/icons/Refresh";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import CancelIcon from "@material-ui/icons/Cancel";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import BusinessCenterOutlinedIcon from "@mui/icons-material/BusinessCenterOutlined";
+import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";
+import PhoneInTalkOutlinedIcon from "@mui/icons-material/PhoneInTalkOutlined";
+import PhoneForwardedOutlinedIcon from "@mui/icons-material/PhoneForwardedOutlined";
+import SmartphoneOutlinedIcon from "@mui/icons-material/SmartphoneOutlined";
+import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
+import PersonIcon from "@mui/icons-material/Person";
+import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import CancelIcon from "@mui/icons-material/Cancel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import IconButton from "@material-ui/core/IconButton";
-import PhotoCamera from "@material-ui/icons/PhotoCamera";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
+import IconButton from "@mui/material/IconButton";
+import PhotoCamera from "@mui/icons-material/PhotoCamera";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -69,7 +69,7 @@ import FormikField from "components/FormikField/FormikField";
import { Formik } from "formik";
import * as Yup from "yup";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/UserProfile/UserProfile.js b/jams-react-client/src/views/UserProfile/UserProfile.js
index 16575b4b..ae552028 100755
--- a/jams-react-client/src/views/UserProfile/UserProfile.js
+++ b/jams-react-client/src/views/UserProfile/UserProfile.js
@@ -4,11 +4,11 @@ import { useHistory } from "react-router-dom";
import Devices from "components/Devices/Devices.js";
import PropTypes from "prop-types";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import EditCreateUserProfile from "./EditCreateUserProfile";
diff --git a/jams-react-client/src/views/Users/Users.js b/jams-react-client/src/views/Users/Users.js
index ac0226af..6425874a 100644
--- a/jams-react-client/src/views/Users/Users.js
+++ b/jams-react-client/src/views/Users/Users.js
@@ -1,9 +1,9 @@
import React, { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Pagination from "@material-ui/lab/Pagination";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Pagination from "@mui/lab/Pagination";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
@@ -14,19 +14,19 @@ import Card from "components/Card/Card.js";
import CardAvatar from "components/Card/CardAvatar.js";
import CardBody from "components/Card/CardBody.js";
-import InfoIcon from "@material-ui/icons/Info";
-import BusinessOutlinedIcon from "@material-ui/icons/BusinessOutlined";
-import Search from "@material-ui/icons/Search";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import InfoIcon from "@mui/icons-material/Info";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import Search from "@mui/icons-material/Search";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
import axios from "axios";
import configApiCall from "api.js";
import auth from "auth.js";
import { api_path_get_user_directory_search } from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import jami from "assets/img/faces/jami.png";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.js";
import { debounce } from "lodash";
--
GitLab