Update Material-UI imports to MUI imports

frontend/src/components/common/inputs/PasswordField.js

@@ -1,12 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import {
+import { InputAdornment, TextField, makeStyles, IconButton } from "@mui/material";
-  InputAdornment,
+import { Visibility, VisibilityOff, LockOutlined } from "@mui/icons-material";
-  TextField,
-  makeStyles,
-  IconButton
-} from "@material-ui/core";
-import { Visibility, VisibilityOff, LockOutlined } from "@material-ui/icons";
 
 const useStyles = makeStyles(theme => ({
   margin: {

frontend/src/components/layout/LightDarkToggle.js

@@ -1,9 +1,6 @@
 import React from "react";
 import { IconButton } from "@material-ui/core";
-import {
+import { Brightness2 as MoonIcon, WbSunny as SunIcon } from "@mui/icons-material";
-  Brightness2 as MoonIcon,
-  WbSunny as SunIcon
-} from "@material-ui/icons";
 import { useApplicationTheme } from "../../providers/ThemeProvider";
 
 const LightDarkToggle = () => {
@@ -12,11 +9,7 @@ const LightDarkToggle = () => {
   const handleChange = () => onDarkModeChanged(!isDark);
 
   return (
-    <IconButton
+    <IconButton aria-label="light-dark-toggle" color="inherit" onClick={handleChange}>
-      aria-label="light-dark-toggle"
-      color="inherit"
-      onClick={handleChange}
-    >
       {isDark ? <SunIcon /> : <MoonIcon />}
     </IconButton>
   );

frontend/src/components/layout/SensitiveInfoToggle.js

@@ -1,9 +1,6 @@
 import React from "react";
 import { IconButton } from "@material-ui/core";
-import {
+import { Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from "@mui/icons-material";
-  Visibility as VisibilityIcon,
-  VisibilityOff as VisibilityOffIcon
-} from "@material-ui/icons";
 import { useSensitiveInfo } from "../../hooks";
 
 const SensitiveInfoToggle = () => {
@@ -12,11 +9,7 @@ const SensitiveInfoToggle = () => {
   const handleChange = () => onSensitiveInfoEnabled(!enabled);
 
   return (
-    <IconButton
+    <IconButton aria-label="sensitive-info-toggle" color="inherit" onClick={handleChange}>
-      aria-label="sensitive-info-toggle"
-      color="inherit"
-      onClick={handleChange}
-    >
       {enabled ? <VisibilityOffIcon /> : <VisibilityIcon />}
     </IconButton>
   );

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

@@ -29,7 +29,7 @@ import {
   Star,
   Whatshot,
   Widgets
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 const timelineIcons = [
   Announcement,
@@ -84,10 +84,7 @@ const TimelineComponent = ({ releases }) => {
             </Typography>
           </TimelineOppositeContent>
           <TimelineSeparator>
-            <TimelineDot
+            <TimelineDot color={release.dot.color} variant={release.dot.variant}>
-              color={release.dot.color}
-              variant={release.dot.variant}
-            >
               <release.icon />
             </TimelineDot>
             {!release.isLast && <TimelineConnector />}

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

@@ -1,14 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
-import {
+import { TextField, InputAdornment, Button, CardActions, CardContent } from "@material-ui/core";
-  TextField,
+import { AccountCircleOutlined } from "@mui/icons-material";
-  InputAdornment,
-  Button,
-  CardActions,
-  CardContent
-} from "@material-ui/core";
-import { AccountCircleOutlined } from "@material-ui/icons";
 import PasswordField from "../../../components/common/inputs/PasswordField";
 import { useTranslation } from "react-i18next";
 import styles from "../styles";
@@ -49,12 +43,7 @@ const LoginComponent = ({ credentials, onChange, onLogin }) => {
         />
       </CardContent>
       <CardActions className={classes.actions}>
-        <Button
+        <Button className={classes.onRight} variant="contained" color="primary" onClick={onLogin}>
-          className={classes.onRight}
-          variant="contained"
-          color="primary"
-          onClick={onLogin}
-        >
           {t("Login.Label")}
         </Button>
       </CardActions>

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

@@ -4,7 +4,7 @@ import MachineTableRow from "./MachineTableRow";
 import MachineAccordion from "./MachineAccordion";
 import { ViewModes } from "./ViewModeSelection";
 import { useToast } from "../../../hooks";
-import { LastPage, RotateLeft, Launch, Stop } from "@material-ui/icons";
+import { LastPage, RotateLeft, Launch, Stop } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { routes, post } from "../../../utils/api";
 
@@ -106,20 +106,10 @@ const MachineContainer = ({ machine, viewMode }) => {
   return (
     <>
       {viewMode === ViewModes.TABLE && (
-        <MachineTableRow
+        <MachineTableRow machine={machine} actions={actions} logs={logs} addLog={addLog} />
-          machine={machine}
-          actions={actions}
-          logs={logs}
-          addLog={addLog}
-        />
       )}
       {viewMode === ViewModes.ACCORDION && (
-        <MachineAccordion
+        <MachineAccordion machine={machine} actions={actions} logs={logs} addLog={addLog} />
-          machine={machine}
-          actions={actions}
-          logs={logs}
-          addLog={addLog}
-        />
       )}
     </>
   );

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

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { TableCell, TableRow, IconButton, Collapse } from "@material-ui/core";
-import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
+import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
 import { makeStyles } from "@material-ui/core/styles";
 import MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { useSensitiveInfo } from "../../../hooks";
@@ -24,11 +24,7 @@ const MachineTableRow = ({ machine, actions, logs, addLog }) => {
     <React.Fragment>
       <TableRow className={classes.root}>
         <TableCell>
-          <IconButton
+          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-            aria-label="expand row"
-            size="small"
-            onClick={() => setOpen(!open)}
-          >
             {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
           </IconButton>
         </TableCell>
@@ -45,11 +41,7 @@ const MachineTableRow = ({ machine, actions, logs, addLog }) => {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <MachineCollapsedContent
+            <MachineCollapsedContent description={machine.description} logs={logs} style={{ paddingBottom: "10px" }} />
-              description={machine.description}
-              logs={logs}
-              style={{ paddingBottom: "10px" }}
-            />
           </Collapse>
         </TableCell>
       </TableRow>

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

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import WakeComponent from "./WakeComponent";
 import ActionButton from "./ActionButton";
 import { Menu } from "@material-ui/core";
-import { MoreHoriz } from "@material-ui/icons";
+import { MoreHoriz } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { usePermissions } from "../../../../hooks";
 
@@ -13,15 +13,9 @@ const ActionsGroup = ({ machine, actions, addLog }) => {
   const { t } = useTranslation();
   const { operateMachines: canOperateMachines } = usePermissions();
 
-  const mainActions = useMemo(
+  const mainActions = useMemo(() => actions.filter(a => a.main === true), [actions]);
-    () => actions.filter(a => a.main === true),
-    [actions]
-  );
 
-  const secondaryActions = useMemo(
+  const secondaryActions = useMemo(() => actions.filter(a => a.main === false), [actions]);
-    () => actions.filter(a => a.main === false),
-    [actions]
-  );
 
   const handleMenuOpen = (_, event) => {
     setMenuAnchor(event.currentTarget);
@@ -33,11 +27,7 @@ const ActionsGroup = ({ machine, actions, addLog }) => {
 
   return (
     <>
-      <WakeComponent
+      <WakeComponent machine={machine} addLog={addLog} disabled={!canOperateMachines} />
-        machine={machine}
-        addLog={addLog}
-        disabled={!canOperateMachines}
-      />
       {mainActions.map(action => (
         <ActionButton
           key={`machine-item-${machine.machineId}-${action.code}`}

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { IconButton, Tooltip } from "@material-ui/core";
-import { PowerSettingsNew } from "@material-ui/icons";
+import { PowerSettingsNew } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { useToast } from "../../../../hooks";
 import { msToMinAndSec } from "../../../../utils/time";
@@ -18,10 +18,8 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
   const { t } = useTranslation();
   const { success, error } = useToast();
 
-  const pingInterval =
+  const pingInterval = process.env.REACT_APP_MACHINE_PING_INTERVAL || defaultPingInterval;
-    process.env.REACT_APP_MACHINE_PING_INTERVAL || defaultPingInterval;
+  const startingTime = process.env.REACT_APP_MACHINE_STARTING_TIME || defaultStartingTime;
-  const startingTime =
-    process.env.REACT_APP_MACHINE_STARTING_TIME || defaultStartingTime;
 
   const getCurrentDateTime = useCallback(() => {
     const currentDateTime = Date.now();
@@ -31,10 +29,7 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
     return result;
   }, [t]);
 
-  const log = useCallback(
+  const log = useCallback(message => addLog(`[${getCurrentDateTime()}] ${message}`), [addLog, getCurrentDateTime]);
-    message => addLog(`[${getCurrentDateTime()}] ${message}`),
-    [addLog, getCurrentDateTime]
-  );
 
   const wakeMachine = useCallback(async () => {
     await post(
@@ -48,11 +43,7 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
             success(result.status);
 
             //retrigger
-            log(
+            log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`);
-              `Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(
-                startingTime
-              )}]`
-            );
             setTimeout(() => {
               setTrigger(prev => !prev);
             }, startingTime);

frontend/src/index.tsx

@@ -1,14 +1,16 @@
 import React, { Suspense } from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import ThemeProvider from "./providers/ThemeProvider";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import { CssBaseline } from "@mui/material";
 import AppRouter from "./components/AppRouter";
 import { TuitioProvider } from "@flare/tuitio-client-react";
 import { ToastProvider } from "./providers";
 import env from "./utils/env";
 import "./utils/i18n";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+
+root.render(
   <TuitioProvider tuitioUrl={env.REACT_APP_TUITIO_URL}>
     <ThemeProvider>
       <CssBaseline />
@@ -18,6 +20,5 @@ ReactDOM.render(
         </ToastProvider>
       </Suspense>
     </ThemeProvider>
-  </TuitioProvider>,
+  </TuitioProvider>
-  document.getElementById("root")
 );

frontend/src/providers/ThemeProvider.js

@@ -1,6 +1,6 @@
 import React, { useReducer, useMemo, useContext } from "react";
 import PropTypes from "prop-types";
-import { ThemeProvider as MuiThemeProvider } from "@material-ui/styles";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { localStorage } from "@flare/js-utils";
 import { getThemes } from "../themes";
 

frontend/src/utils/api.js

@@ -38,7 +38,7 @@ const handleError = err => {
 };
 
 const defaultOptions = {
-  onCompleted: () => {},
+  onCompleted: () => null,
   onError: handleError
 };