Update Material-UI icons to MUI icons

frontend/src/components/layout/ProfileButton.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core";
-import AccountCircle from "@material-ui/icons/AccountCircle";
-import ExitToAppIcon from "@material-ui/icons/ExitToApp";
-import AccountBoxIcon from "@material-ui/icons/AccountBox";
-import SettingsIcon from "@material-ui/icons/Settings";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import AccountBoxIcon from "@mui/icons-material/AccountBox";
+import SettingsIcon from "@mui/icons-material/Settings";
 import { useNavigate } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
 import { useToast } from "../../hooks";

frontend/src/components/layout/Sidebar.js

@@ -3,15 +3,15 @@ import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
 import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItem from "@material-ui/core/ListItem";
-import BuildIcon from "@material-ui/icons/Build";
-import DnsIcon from "@material-ui/icons/Dns";
-import DeviceHubIcon from "@material-ui/icons/DeviceHub";
-import SettingsIcon from "@material-ui/icons/Settings";
-import DashboardIcon from "@material-ui/icons/Dashboard";
-import FeaturedPlayListIcon from "@material-ui/icons/FeaturedPlayList";
+import BuildIcon from "@mui/icons-material/Build";
+import DnsIcon from "@mui/icons-material/Dns";
+import DeviceHubIcon from "@mui/icons-material/DeviceHub";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import FeaturedPlayListIcon from "@mui/icons-material/FeaturedPlayList";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import styles from "./styles";

frontend/src/components/layout/TopBar.js

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

frontend/src/features/about/AboutContainer.js

@@ -1,8 +1,8 @@
 import React, { useState, useMemo } from "react";
 import PageTitle from "../../components/common/PageTitle";
-import BubbleChartIcon from "@material-ui/icons/BubbleChart";
-import NotesIcon from "@material-ui/icons/Notes";
-import TimelineIcon from "@material-ui/icons/Timeline";
+import BubbleChartIcon from "@mui/icons-material/BubbleChart";
+import NotesIcon from "@mui/icons-material/Notes";
+import TimelineIcon from "@mui/icons-material/Timeline";
 import { useTranslation } from "react-i18next";
 import AboutSystemContainer from "./system/AboutSystemContainer";
 import ReleaseNotesContainer from "./releaseNotes/ReleaseNotesContainer";
@@ -33,24 +33,14 @@ const AboutContainer = () => {
   const [tab, setTab] = useState(NavigationTabs.SYSTEM);
   const { t } = useTranslation();
 
-  const navigationTabs = useMemo(
-    () => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
-    [t]
-  );
+  const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);
 
   return (
     <>
-      <PageTitle
-        text={t(tab)}
-        navigation={
-          <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
-        }
-      />
+      <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
       {tab === NavigationTabs.SYSTEM && <AboutSystemContainer />}
       {tab === NavigationTabs.RELEASE_NOTES && <ReleaseNotesContainer />}
-      {tab === NavigationTabs.TIMELINE && (
-        <ReleaseNotesContainer view="timeline" />
-      )}
+      {tab === NavigationTabs.TIMELINE && <ReleaseNotesContainer view="timeline" />}
     </>
   );
 };

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

@@ -1,11 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails
-} from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { Accordion, AccordionSummary, AccordionDetails } from "@material-ui/core";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ReleaseNoteSummary from "./ReleaseNoteSummary";
 import ReleaseNote from "./ReleaseNote";
 
@@ -29,18 +25,9 @@ const ReleaseNotesList = ({ releases }) => {
     <>
       {releases.map(release => {
         return (
-          <Accordion
-            key={release.version}
-            onChange={handleToggle(release.version)}
-          >
-            <AccordionSummary
-              expandIcon={<ExpandMoreIcon />}
-              id={`panel-${release.version}-header`}
-            >
-              <ReleaseNoteSummary
-                releaseNote={release}
-                collapsed={isCollapsed(release.version)}
-              />
+          <Accordion key={release.version} onChange={handleToggle(release.version)}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />} id={`panel-${release.version}-header`}>
+              <ReleaseNoteSummary releaseNote={release} collapsed={isCollapsed(release.version)} />
             </AccordionSummary>
             <AccordionDetails>
               <ReleaseNote releaseNote={release} />

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

@@ -7,7 +7,7 @@ import CardContent from "@material-ui/core/CardContent";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import { useTranslation } from "react-i18next";
-import OpenInNewIcon from "@material-ui/icons/OpenInNew";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 const useStyles = makeStyles(theme => ({
   bullet: {
@@ -51,12 +51,8 @@ const AboutSystemComponent = ({ handleOpenInNewTab }) => {
         <Typography variant="h5" gutterBottom>
           {t("About.System.Description.Title")}
         </Typography>
-        <Typography color="textSecondary">
-          {t("About.System.Description.FirstPhrase")}
-        </Typography>
-        <Typography color="textSecondary">
-          {t("About.System.Description.SecondPhrase")}
-        </Typography>
+        <Typography color="textSecondary">{t("About.System.Description.FirstPhrase")}</Typography>
+        <Typography color="textSecondary">{t("About.System.Description.SecondPhrase")}</Typography>
 
         <Typography className={classes.service} color="textSecondary">
           {bullet}

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

@@ -1,16 +1,11 @@
 import React, { useMemo, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
-import {
-  List,
-  ListItem,
-  ListItemText,
-  ListItemAvatar
-} from "@material-ui/core";
+import { List, ListItem, ListItemText, ListItemAvatar } from "@material-ui/core";
 import Avatar from "@material-ui/core/Avatar";
-import WebAssetIcon from "@material-ui/icons/WebAsset";
-import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard";
-import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo";
+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";

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

@@ -1,12 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Grid
-} from "@material-ui/core";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@material-ui/core";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import withStyles from "@material-ui/core/styles/withStyles";
 import MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { DataLabel } from "../../../components/common";
@@ -67,31 +62,19 @@ const MachineAccordion = ({ machine, actions, logs, addLog }) => {
         <Grid container className={classes.panel}>
           <Grid item xs={11}>
             <Grid container>
-              <GridCell
-                label={t("Machine.FullName")}
-                value={machine.fullMachineName}
-              />
+              <GridCell label={t("Machine.FullName")} value={machine.fullMachineName} />
               <GridCell label={t("Machine.Name")} value={machine.machineName} />
               <GridCell label={t("Machine.IP")} value={machine.iPv4Address} />
               <GridCell label={t("Machine.MAC")} value={machine.macAddress} />
             </Grid>
           </Grid>
           <Grid item xs={1} style={{ textAlign: "right" }}>
-            <ActionsGroup
-              className={classes.actions}
-              machine={machine}
-              actions={actions}
-              addLog={addLog}
-            />
+            <ActionsGroup className={classes.actions} machine={machine} actions={actions} addLog={addLog} />
           </Grid>
         </Grid>
       </IconLeftAccordionSummary>
       <AccordionDetails>
-        <MachineCollapsedContent
-          description={machine.description}
-          logs={logs}
-          style={{ width: "100%" }}
-        />
+        <MachineCollapsedContent description={machine.description} logs={logs} style={{ width: "100%" }} />
       </AccordionDetails>
     </Accordion>
   );

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import TableChartIcon from "@material-ui/icons/TableChart";
-import ViewListIcon from "@material-ui/icons/ViewList";
+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";
@@ -44,17 +44,8 @@ const ViewModeSelection = ({ initialMode, callback }) => {
   useEffect(() => callback && callback(state.mode), [callback, state.mode]);
 
   return (
-    <ToggleButtonGroup
-      size="small"
-      value={state.mode}
-      exclusive
-      onChange={handleViewModeSelection}
-    >
-      <ToggleButton
-        value={ViewModes.TABLE}
-        aria-label="table view mode"
-        disabled={state.mode === ViewModes.TABLE}
-      >
+    <ToggleButtonGroup size="small" value={state.mode} exclusive onChange={handleViewModeSelection}>
+      <ToggleButton value={ViewModes.TABLE} aria-label="table view mode" disabled={state.mode === ViewModes.TABLE}>
         <Tooltip title={t("ViewModes.Table")}>
           <TableChartIcon />
         </Tooltip>

frontend/src/features/settings/SettingsContainer.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from "react";
-import BubbleChartIcon from "@material-ui/icons/BubbleChart";
-import BrushIcon from "@material-ui/icons/Brush";
-import NotificationsIcon from "@material-ui/icons/Notifications";
+import BubbleChartIcon from "@mui/icons-material/BubbleChart";
+import BrushIcon from "@mui/icons-material/Brush";
+import NotificationsIcon from "@mui/icons-material/Notifications";
 import { useTranslation } from "react-i18next";
 import PageTitle from "../../components/common/PageTitle";
 import NavigationButtons from "../../components/common/NavigationButtons";
@@ -34,19 +34,11 @@ const SettingsContainer = () => {
   const [tab, setTab] = useState(NavigationTabs.SYSTEM);
   const { t } = useTranslation();
 
-  const navigationTabs = useMemo(
-    () => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
-    [t]
-  );
+  const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);
 
   return (
     <>
-      <PageTitle
-        text={t(tab)}
-        navigation={
-          <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
-        }
-      />
+      <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
       {tab === NavigationTabs.SYSTEM && <SystemContainer />}
       {tab === NavigationTabs.APPEARANCE && <AppearanceContainer />}
       {tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}

frontend/src/features/system/SystemContainer.js

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from "react";
-import CategoryIcon from "@material-ui/icons/Category";
-import GrainIcon from "@material-ui/icons/Grain";
+import CategoryIcon from "@mui/icons-material/Category";
+import GrainIcon from "@mui/icons-material/Grain";
 import { useTranslation } from "react-i18next";
 import PageTitle from "../../components/common/PageTitle";
 import NavigationButtons from "../../components/common/NavigationButtons";
@@ -27,19 +27,11 @@ const SystemContainer = () => {
   const [tab, setTab] = useState(NavigationTabs.MAIN_SERVICES);
   const { t } = useTranslation();
 
-  const navigationTabs = useMemo(
-    () => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
-    [t]
-  );
+  const navigationTabs = useMemo(() => tabs.map(z => ({ ...z, tooltip: t(z.code) })), [t]);
 
   return (
     <>
-      <PageTitle
-        text={t(tab)}
-        navigation={
-          <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
-        }
-      />
+      <PageTitle text={t(tab)} navigation={<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />} />
       {tab === NavigationTabs.MAIN_SERVICES && <MainServicesContainer />}
       {tab === NavigationTabs.AGENTS && <AgentsContainer />}
     </>

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

@@ -3,16 +3,16 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { Grid } from "@material-ui/core";
 import ContactOptionList from "./ContactOptionList";
-import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
-import EmailIcon from "@material-ui/icons/Email";
-import PhoneAndroidIcon from "@material-ui/icons/PhoneAndroid";
-import LanguageIcon from "@material-ui/icons/Language";
-import LinkedInIcon from "@material-ui/icons/LinkedIn";
-import GitHubIcon from "@material-ui/icons/GitHub";
-import RedditIcon from "@material-ui/icons/Reddit";
-import BookIcon from "@material-ui/icons/Book";
-import MenuBookIcon from "@material-ui/icons/MenuBook";
-import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
+import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
+import EmailIcon from "@mui/icons-material/Email";
+import PhoneAndroidIcon from "@mui/icons-material/PhoneAndroid";
+import LanguageIcon from "@mui/icons-material/Language";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import RedditIcon from "@mui/icons-material/Reddit";
+import BookIcon from "@mui/icons-material/Book";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
 import { useClipboard } from "../../../../hooks";
 
 const icons = {