Update Material-UI imports to MUI imports

frontend/src/components/common/DataLabel.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(theme => ({
   panel: {
@@ -17,10 +17,7 @@ const useStyles = makeStyles(theme => ({
 
 const DataLabel = ({ label, data }) => {
   const classes = useStyles();
-  const lbl = useMemo(
+  const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]);
-    () => (label.endsWith(":") ? label : `${label}:`),
-    [label]
-  );
 
   return (
     <div className={classes.panel}>

frontend/src/components/common/NavigationButtons.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 
 const NavigationButtons = ({ tabs, onTabChange }) => {
   const [selected, setSelected] = useState(tabs[0].code);
@@ -13,19 +13,9 @@ const NavigationButtons = ({ tabs, onTabChange }) => {
   };
 
   return (
-    <ToggleButtonGroup
+    <ToggleButtonGroup size="small" value={selected} exclusive onChange={handleTabSelection}>
-      size="small"
-      value={selected}
-      exclusive
-      onChange={handleTabSelection}
-    >
       {tabs.map(tab => (
-        <ToggleButton
+        <ToggleButton key={tab.code} value={tab.code} aria-label="navigation buttons" disabled={selected === tab.code}>
-          key={tab.code}
-          value={tab.code}
-          aria-label="navigation buttons"
-          disabled={selected === tab.code}
-        >
           <Tooltip title={tab.tooltip}>
             <tab.icon color="primary" />
           </Tooltip>
@@ -36,9 +26,7 @@ const NavigationButtons = ({ tabs, onTabChange }) => {
 };
 
 NavigationButtons.propTypes = {
-  tabs: PropTypes.arrayOf(
+  tabs: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired })).isRequired,
-    PropTypes.shape({ code: PropTypes.string.isRequired })
-  ).isRequired,
   onTabChange: PropTypes.func
 };
 

frontend/src/components/common/NotAllowed.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import { useTranslation } from "react-i18next";
 

frontend/src/components/common/PageTitle.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 
 const useStyles = makeStyles(theme => ({
   box: {

frontend/src/components/common/PaperTitle.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(theme => ({
   paper: {

frontend/src/components/layout/AppLayout.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import AppRoutes from "./AppRoutes";
 import TopBar from "./TopBar";
 import Sidebar from "./Sidebar";

frontend/src/components/layout/LightDarkToggle.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 import { Brightness2 as MoonIcon, WbSunny as SunIcon } from "@mui/icons-material";
 import { useApplicationTheme } from "../../providers/ThemeProvider";
 

frontend/src/components/layout/ProfileButton.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core";
+import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@mui/material";
 import AccountCircle from "@mui/icons-material/AccountCircle";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import AccountBoxIcon from "@mui/icons-material/AccountBox";
@@ -8,7 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
 import { useToast } from "../../hooks";
 import styles from "./styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);

frontend/src/components/layout/SensitiveInfoToggle.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 import { Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from "@mui/icons-material";
 import { useSensitiveInfo } from "../../hooks";
 

frontend/src/components/layout/Sidebar.js

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { makeStyles, useTheme } from "@mui/material/styles";
-import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core";
+import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@mui/material";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ListItem from "@material-ui/core/ListItem";
+import ListItem from "@mui/material/ListItem";
 import BuildIcon from "@mui/icons-material/Build";
 import DnsIcon from "@mui/icons-material/Dns";
 import DeviceHubIcon from "@mui/icons-material/DeviceHub";

frontend/src/components/layout/TopBar.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
-import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core";
+import { AppBar, Toolbar, Typography, IconButton } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import ProfileButton from "./ProfileButton";
 import LightDarkToggle from "./LightDarkToggle";

frontend/src/features/about/releaseNotes/ReleaseNote.js

@@ -1,17 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
 const ReleaseNote = ({ releaseNote }) => {
   return (
     <div>
       {releaseNote.notes.map(note => {
         return (
-          <Typography
+          <Typography key={releaseNote.notes.indexOf(note)} variant="body2" gutterBottom>
-            key={releaseNote.notes.indexOf(note)}
-            variant="body2"
-            gutterBottom
-          >
             {note}
           </Typography>
         );

frontend/src/features/about/releaseNotes/ReleaseNoteSummary.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid, Typography } from "@material-ui/core";
+import { Grid, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 const ReleaseNoteSummary = ({ releaseNote, collapsed }) => {

frontend/src/features/about/releaseNotes/ReleaseNotesList.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { Accordion, AccordionSummary, AccordionDetails } from "@material-ui/core";
+import { Accordion, AccordionSummary, AccordionDetails } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ReleaseNoteSummary from "./ReleaseNoteSummary";
 import ReleaseNote from "./ReleaseNote";

frontend/src/features/about/system/AboutSystemComponent.js

@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
-import Card from "@material-ui/core/Card";
+import Card from "@mui/material/Card";
-import CardActions from "@material-ui/core/CardActions";
+import CardActions from "@mui/material/CardActions";
-import CardContent from "@material-ui/core/CardContent";
+import CardContent from "@mui/material/CardContent";
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 

frontend/src/features/about/system/AboutSystemContainer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import AboutSystemComponent from "./AboutSystemComponent";
 import SystemVersionContainer from "./SystemVersionContainer";
 

frontend/src/features/about/system/SystemVersionComponent.js

@@ -1,14 +1,14 @@
 import React, { useMemo, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
-import { List, ListItem, ListItemText, ListItemAvatar } from "@material-ui/core";
+import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
-import Avatar from "@material-ui/core/Avatar";
+import Avatar from "@mui/material/Avatar";
 import WebAssetIcon from "@mui/icons-material/WebAsset";
 import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard";
 import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
 import { useTranslation } from "react-i18next";
 import packageData from "../../../../package.json";
-import Paper from "@material-ui/core/Paper";
+import Paper from "@mui/material/Paper";
 
 const useStyles = makeStyles(theme => {
   return {

frontend/src/features/about/timeline/TimelineComponent.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import Timeline from "@material-ui/lab/Timeline";
 import TimelineItem from "@material-ui/lab/TimelineItem";
 import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
@@ -8,8 +8,8 @@ import TimelineConnector from "@material-ui/lab/TimelineConnector";
 import TimelineContent from "@material-ui/lab/TimelineContent";
 import TimelineOppositeContent from "@material-ui/lab/TimelineOppositeContent";
 import TimelineDot from "@material-ui/lab/TimelineDot";
-import Paper from "@material-ui/core/Paper";
+import Paper from "@mui/material/Paper";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import { getRandomElement } from "../../../utils";
 import {

frontend/src/features/dashboard/announcements/GuestAnnouncement.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import styles from "../styles";
 import { useTranslation } from "react-i18next";

frontend/src/features/dashboard/announcements/UserAnnouncement.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import styles from "../styles";
 import { useTranslation } from "react-i18next";

frontend/src/features/login/components/LoginCard.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Card } from "@material-ui/core";
+import { Card } from "@mui/material";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import styles from "../styles";
 import LoginComponent from "./LoginComponent";
 
@@ -13,11 +13,7 @@ const LoginCard = ({ credentials, onChange, onLogin }) => {
   return (
     <div className={classes.appLogin}>
       <Card variant="outlined">
-        <LoginComponent
+        <LoginComponent credentials={credentials} onChange={onChange} onLogin={onLogin} />
-          credentials={credentials}
-          onChange={onChange}
-          onLogin={onLogin}
-        />
       </Card>
     </div>
   );

frontend/src/features/login/components/LoginComponent.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
-import { TextField, InputAdornment, Button, CardActions, CardContent } from "@material-ui/core";
+import { TextField, InputAdornment, Button, CardActions, CardContent } from "@mui/material";
 import { AccountCircleOutlined } from "@mui/icons-material";
 import PasswordField from "../../../components/common/inputs/PasswordField";
 import { useTranslation } from "react-i18next";

frontend/src/features/machines/components/MachineAccordion.js

@@ -1,14 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@material-ui/core";
+import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import withStyles from "@material-ui/core/styles/withStyles";
+import withStyles from "@mui/material/styles/withStyles";
 import MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { DataLabel } from "../../../components/common";
 import { useTranslation } from "react-i18next";
 import { useSensitiveInfo } from "../../../hooks";
 import ActionsGroup from "./common/ActionsGroup";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(() => ({
   panel: {

frontend/src/features/machines/components/MachineTableRow.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { TableCell, TableRow, IconButton, Collapse } from "@material-ui/core";
+import { TableCell, TableRow, IconButton, Collapse } from "@mui/material";
 import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { useSensitiveInfo } from "../../../hooks";
 import ActionsGroup from "./common/ActionsGroup";

frontend/src/features/machines/components/MachinesListComponent.js

@@ -1,14 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import {
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
-  Table,
+import Paper from "@mui/material/Paper";
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow
-} from "@material-ui/core";
-import Paper from "@material-ui/core/Paper";
 import MachineContainer from "./MachineContainer";
 import { useTranslation } from "react-i18next";
 import { ViewModes } from "./ViewModeSelection";
@@ -17,11 +10,7 @@ const MachinesList = ({ machines, viewMode }) => {
   return (
     <>
       {machines.map(machine => (
-        <MachineContainer
+        <MachineContainer key={`machine-${machine.machineId}`} machine={machine} viewMode={viewMode} />
-          key={`machine-${machine.machineId}`}
-          machine={machine}
-          viewMode={viewMode}
-        />
       ))}
     </>
   );

frontend/src/features/machines/components/ViewModeSelection.js

@@ -4,7 +4,7 @@ import TableChartIcon from "@mui/icons-material/TableChart";
 import ViewListIcon from "@mui/icons-material/ViewList";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 export const ViewModes = {

frontend/src/features/machines/components/common/ActionButton.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { IconButton, Tooltip } from "@material-ui/core";
+import { IconButton, Tooltip } from "@mui/material";
 
 const ActionButton = React.forwardRef((props, _ref) => {
   const { action, machine, callback, disabled } = props;
@@ -12,10 +12,7 @@ const ActionButton = React.forwardRef((props, _ref) => {
   };
 
   return (
-    <Tooltip
+    <Tooltip id={`machine-item-${machine.machineId}-${action.code}-tooltip`} title={action.tooltip}>
-      id={`machine-item-${machine.machineId}-${action.code}-tooltip`}
-      title={action.tooltip}
-    >
       <span>
         <IconButton
           id={id}

frontend/src/features/machines/components/common/ActionsGroup.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import WakeComponent from "./WakeComponent";
 import ActionButton from "./ActionButton";
-import { Menu } from "@material-ui/core";
+import { Menu } from "@mui/material";
 import { MoreHoriz } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { usePermissions } from "../../../../hooks";

frontend/src/features/machines/components/common/MachineCollapsedContent.js

@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import MachineLog from "./MachineLog";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import { useSensitiveInfo } from "../../../../hooks";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(_theme => ({
   panel: {
@@ -19,11 +19,7 @@ const MachineDescription = ({ description }) => {
 
   return (
     <div className={classes.panel}>
-      <Typography
+      <Typography variant="body2" className={classes.label} color="textSecondary">
-        variant="body2"
-        className={classes.label}
-        color="textSecondary"
-      >
         {"Description:"}
       </Typography>
       <Typography variant="body2" color="textSecondary">

frontend/src/features/machines/components/common/MachineLog.js

@@ -1,16 +1,13 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import { Box } from "@material-ui/core";
+import { Box } from "@mui/material";
 import { useSensitiveInfo } from "../../../../hooks";
 import { LazyLog, ScrollFollow } from "react-lazylog";
 
 const MachineLog = ({ logs }) => {
   const { maskElements } = useSensitiveInfo();
 
-  const displayLogs = useMemo(
+  const displayLogs = useMemo(() => (logs.length > 0 ? maskElements(logs).join("\n") : "..."), [logs, maskElements]);
-    () => (logs.length > 0 ? maskElements(logs).join("\n") : "..."),
-    [logs, maskElements]
-  );
 
   return (
     <Box>

frontend/src/features/machines/components/common/WakeComponent.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import { IconButton, Tooltip } from "@material-ui/core";
+import { IconButton, Tooltip } from "@mui/material";
 import { PowerSettingsNew } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { useToast } from "../../../../hooks";

frontend/src/features/settings/appearance/AppearanceComponent.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { useApplicationTheme } from "../../../providers/ThemeProvider";
-import { Grid, Paper, FormControlLabel, Switch } from "@material-ui/core";
+import { Grid, Paper, FormControlLabel, Switch } from "@mui/material";
 import LanguageContainer from "./language/LanguageContainer";
 import { PaperTitle } from "components/common";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(theme => ({
@@ -29,14 +29,7 @@ const AppearanceComponent = () => {
         <Grid item xs={12} sm={6} md={4} lg={3}>
           <FormControlLabel
             value="start"
-            control={
+            control={<Switch checked={isDark} onChange={handleChange} color="secondary" name="dark-mode-switch" />}
-              <Switch
-                checked={isDark}
-                onChange={handleChange}
-                color="secondary"
-                name="dark-mode-switch"
-              />
-            }
             label="Dark mode:"
             labelPlacement="start"
           />

frontend/src/features/settings/appearance/language/LanguageComponent.js

@@ -1,39 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Flag from "react-flags";
-import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import { IconButton, Menu, MenuItem } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-const LanguageComponent = ({
+const LanguageComponent = ({ languageIsSet, anchorEl, onMenuOpen, onLanguageChange, onClose, flag, flagsPath }) => {
-  languageIsSet,
-  anchorEl,
-  onMenuOpen,
-  onLanguageChange,
-  onClose,
-  flag,
-  flagsPath
-}) => {
   const { t } = useTranslation();
   const open = Boolean(anchorEl);
 
   return (
     <>
-      <IconButton
+      <IconButton aria-controls="language-menu" aria-haspopup="true" onClick={onMenuOpen} color="inherit" size="small">
-        aria-controls="language-menu"
-        aria-haspopup="true"
-        onClick={onMenuOpen}
-        color="inherit"
-        size="small"
-      >
         {languageIsSet && (
-          <Flag
+          <Flag name={flag.name} format="png" pngSize={32} shiny={true} basePath={flagsPath} alt={flag.alt} />
-            name={flag.name}
-            format="png"
-            pngSize={32}
-            shiny={true}
-            basePath={flagsPath}
-            alt={flag.alt}
-          />
         )}
       </IconButton>
       <Menu
@@ -51,12 +30,8 @@ const LanguageComponent = ({
         open={open}
         onClose={onClose}
       >
-        <MenuItem onClick={onLanguageChange("ro")}>
+        <MenuItem onClick={onLanguageChange("ro")}>{t("Language.Romanian")}</MenuItem>
-          {t("Language.Romanian")}
+        <MenuItem onClick={onLanguageChange("en")}>{t("Language.English")}</MenuItem>
-        </MenuItem>
-        <MenuItem onClick={onLanguageChange("en")}>
-          {t("Language.English")}
-        </MenuItem>
       </Menu>
     </>
   );

frontend/src/features/settings/system/CacheSettingsComponent.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Paper, Button } from "@material-ui/core";
+import { Paper, Button } from "@mui/material";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { PaperTitle } from "components/common";
 import { usePermissions } from "hooks";
@@ -23,12 +23,7 @@ const CacheSettingsComponent = ({ onResetCache }) => {
     <Paper variant="outlined">
       <PaperTitle text={t("Settings.Cache.Title")} />
       <div className={classes.content}>
-        <Button
+        <Button variant="outlined" color="secondary" disabled={!sysAdmin} onClick={onResetCache}>
-          variant="outlined"
-          color="secondary"
-          disabled={!sysAdmin}
-          onClick={onResetCache}
-        >
           {t("Settings.Cache.Reset")}
         </Button>
       </div>

frontend/src/features/user/profile/card/UserProfileCardContent.js

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import UserProfilePicture from "./UserProfilePicture";
 import ContactOptions from "../contact/ContactOptions";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import styles from "../styles";
 
 const useStyles = makeStyles(styles);
@@ -11,10 +11,7 @@ const UserProfileCardContent = ({ userData }) => {
   const { profilePictureUrl } = userData;
   const classes = useStyles();
 
-  const userName = useMemo(
+  const userName = useMemo(() => `${userData.firstName} ${userData.lastName}`, [userData.firstName, userData.lastName]);
-    () => `${userData.firstName} ${userData.lastName}`,
-    [userData.firstName, userData.lastName]
-  );
   const _contactOptions = useMemo(
     () =>
       profilePictureUrl

frontend/src/features/user/profile/card/UserProfileComponent.js

@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { Card, CardHeader, CardContent } from "@material-ui/core";
+import { Card, CardHeader, CardContent } from "@mui/material";
 import PageTitle from "../../../../components/common/PageTitle";
 import UserProfileCardContent from "./UserProfileCardContent";
 import SecurityComponent from "../security/SecurityComponent";
 import styles from "../styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(styles);
 
@@ -29,9 +29,7 @@ const UserProfileComponent = ({ userData }) => {
 
   return (
     <>
-      <PageTitle
+      <PageTitle text={t("User.Profile.Hello", { userName: userData.firstName })} />
-        text={t("User.Profile.Hello", { userName: userData.firstName })}
-      />
       <Card>
         <CardHeader title={userData.userName} subheader={userDescription} />
         <CardContent>
@@ -40,10 +38,7 @@ const UserProfileComponent = ({ userData }) => {
       </Card>
 
       <div className={classes.section}>
-        <SecurityComponent
+        <SecurityComponent userGroups={userData.userGroups} userRoles={userData.userRoles} />
-          userGroups={userData.userGroups}
-          userRoles={userData.userRoles}
-        />
       </div>
     </>
   );

frontend/src/features/user/profile/card/UserProfilePicture.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import style from "../styles";
-import Avatar from "@material-ui/core/Avatar";
+import Avatar from "@mui/material/Avatar";
 import DefaultUserProfilePicture from "../../../../assets/images/DefaultUserProfilePicture.png";
 
 const useStyles = makeStyles(style);

frontend/src/features/user/profile/contact/ContactOption.js

@@ -1,13 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import {
+import { ListItem, ListItemText, ListItemIcon, Link, Tooltip, IconButton } from "@mui/material";
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  Link,
-  Tooltip,
-  IconButton
-} from "@material-ui/core";
 
 const ContactIcon = ({ onIconClick, iconTooltip, ...props }) => {
   if (!onIconClick) return <props.icon />;

frontend/src/features/user/profile/contact/ContactOptionList.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { List } from "@material-ui/core";
+import { List } from "@mui/material";
 import ContactOption from "./ContactOption";
 
 const ContactOptionList = ({ options }) => {

frontend/src/features/user/profile/contact/ContactOptions.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import ContactOptionList from "./ContactOptionList";
 import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
 import EmailIcon from "@mui/icons-material/Email";

frontend/src/features/user/profile/security/SecurityComponent.js

@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Paper, Grid, Chip, Typography } from "@material-ui/core";
+import { Paper, Grid, Chip, Typography } from "@mui/material";
 import styles from "../styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
@@ -32,12 +32,7 @@ const SecurityComponent = ({ userGroups, userRoles }) => {
             </Typography>
             <div>
               {userRoles.map(r => (
-                <Chip
+                <Chip key={r.code} className={classes.chip} color="primary" label={r.name} />
-                  key={r.code}
-                  className={classes.chip}
-                  color="primary"
-                  label={r.name}
-                />
               ))}
             </div>
           </div>

frontend/src/providers/UserPermissionsProvider.js

@@ -19,22 +19,14 @@ const initialState = {
 };
 
 const getPermissionFlags = permissions => {
-  const viewDashboard =
+  const viewDashboard = permissions.includes(permissionCodes.VIEW_DASHBOARD) ?? false;
-    permissions.includes(permissionCodes.VIEW_DASHBOARD) ?? false;
+  const manageUsers = permissions.includes(permissionCodes.MANAGE_USERS) ?? false;
-  const manageUsers =
+  const manageSettings = permissions.includes(permissionCodes.MANAGE_SETTINGS) ?? false;
-    permissions.includes(permissionCodes.MANAGE_USERS) ?? false;
+  const viewMachines = permissions.includes(permissionCodes.VIEW_MACHINES) ?? false;
-  const manageSettings =
+  const manageMachines = permissions.includes(permissionCodes.MANAGE_MACHINES) ?? false;
-    permissions.includes(permissionCodes.MANAGE_SETTINGS) ?? false;
+  const operateMachines = permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
-  const viewMachines =
+  const guestAccess = permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
-    permissions.includes(permissionCodes.VIEW_MACHINES) ?? false;
+  const sysAdmin = permissions.includes(permissionCodes.SYSTEM_ADMINISTRATION) ?? false;
-  const manageMachines =
-    permissions.includes(permissionCodes.MANAGE_MACHINES) ?? false;
-  const operateMachines =
-    permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
-  const guestAccess =
-    permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
-  const sysAdmin =
-    permissions.includes(permissionCodes.SYSTEM_ADMINISTRATION) ?? false;
 
   const flags = {
     viewDashboard,
@@ -74,11 +66,7 @@ const UserPermissionsProvider = ({ children }) => {
     });
   }, []);
 
-  return (
+  return <UserPermissionsContext.Provider value={permissions}>{children}</UserPermissionsContext.Provider>;
-    <UserPermissionsContext.Provider value={permissions}>
-      {children}
-    </UserPermissionsContext.Provider>
-  );
 };
 
 UserPermissionsProvider.propTypes = {

frontend/src/themes/index.js

@@ -1,5 +1,5 @@
 import defaultTheme from "./default";
-import { createTheme } from "@material-ui/core/styles";
+import { createTheme } from "@mui/material/styles";
 
 const overrides = {
   typography: {