Fix import statements and add missing code comments

frontend/package-lock.json

@@ -13,6 +13,7 @@
         "@flare/js-utils": "^1.1.0",
         "@flare/tuitio-client-react": "^1.2.6",
         "@mui/icons-material": "^5.14.16",
+        "@mui/lab": "^5.0.0-alpha.169",
         "@mui/material": "^5.14.16",
         "axios": "^1.6.0",
         "i18next": "^22.4.15",
@@ -3484,6 +3485,46 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.169",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.169.tgz",
+      "integrity": "sha512-h6xe1K6ISKUbyxTDgdvql4qoDP6+q8ad5fg9nXQxGLUrIeT2jVrBuT/jRECSTufbnhzP+V5kulvYxaMfM8rEdA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/system": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.15.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.15.14",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",
@@ -21308,6 +21349,20 @@
         "@babel/runtime": "^7.23.9"
       }
     },
+    "@mui/lab": {
+      "version": "5.0.0-alpha.169",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.169.tgz",
+      "integrity": "sha512-h6xe1K6ISKUbyxTDgdvql4qoDP6+q8ad5fg9nXQxGLUrIeT2jVrBuT/jRECSTufbnhzP+V5kulvYxaMfM8rEdA==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/system": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "@mui/material": {
       "version": "5.15.14",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",

frontend/package.json

@@ -13,11 +13,12 @@
   },
   "private": true,
   "dependencies": {
-    "@flare/js-utils": "^1.1.0",
-    "@flare/tuitio-client-react": "^1.2.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@flare/js-utils": "^1.1.0",
+    "@flare/tuitio-client-react": "^1.2.6",
     "@mui/icons-material": "^5.14.16",
+    "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.14.16",
     "axios": "^1.6.0",
     "i18next": "^22.4.15",
@@ -26,12 +27,12 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-world-flags": "^1.5.1",
     "react-i18next": "^12.2.2",
     "react-lazylog": "^4.5.3",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "react-world-flags": "^1.5.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

frontend/src/components/common/NavigationButtons.js

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import ToggleButton from "@material-ui/lab/ToggleButton";
+import { ToggleButtonGroup, ToggleButton } from "@mui/material";
-import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
 import { Tooltip } from "@mui/material";
 
 const NavigationButtons = ({ tabs, onTabChange }) => {

frontend/src/components/common/NotAllowed.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { makeStyles } from "@mui/material/styles";
-import { Alert, AlertTitle } from "@material-ui/lab";
+import { Alert, AlertTitle } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(theme => ({

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

@@ -4,8 +4,7 @@ import ReleaseNotesList from "./ReleaseNotesList";
 import TimelineComponent from "../timeline/TimelineComponent";
 import { routes, get } from "../../../utils/api";
 
-const sort = releases =>
+const sort = releases => releases.sort((a, b) => new Date(b.date) - new Date(a.date));
-  releases.sort((a, b) => new Date(b.date) - new Date(a.date));
 
 const ReleaseNotesContainer = ({ view }) => {
   const [state, setState] = useState({ data: [], loaded: false });

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

@@ -1,20 +1,20 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { makeStyles } from "@mui/material/styles";
-import Timeline from "@material-ui/lab/Timeline";
+import Timeline from "@mui/lab/Timeline";
-import TimelineItem from "@material-ui/lab/TimelineItem";
+import TimelineItem from "@mui/lab/TimelineItem";
-import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
+import TimelineSeparator from "@mui/lab/TimelineSeparator";
-import TimelineConnector from "@material-ui/lab/TimelineConnector";
+import TimelineConnector from "@mui/lab/TimelineConnector";
-import TimelineContent from "@material-ui/lab/TimelineContent";
+import TimelineContent from "@mui/lab/TimelineContent";
-import TimelineOppositeContent from "@material-ui/lab/TimelineOppositeContent";
+import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
-import TimelineDot from "@material-ui/lab/TimelineDot";
+import TimelineDot from "@mui/lab/TimelineDot";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import { getRandomElement } from "../../../utils";
 import {
   Announcement,
-  AmpStories,
+  Book,
   Apps,
   BugReport,
   DeviceHub,
@@ -33,7 +33,7 @@ import {
 
 const timelineIcons = [
   Announcement,
-  AmpStories,
+  Book,
   Apps,
   BugReport,
   DeviceHub,

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

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { makeStyles } from "@mui/material/styles";
-import { Alert, AlertTitle } from "@material-ui/lab";
+import { Alert, AlertTitle } from "@mui/material";
 import styles from "../styles";
 import { useTranslation } from "react-i18next";
 import { useTuitioUser } from "@flare/tuitio-client-react";

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

@@ -26,13 +26,7 @@ const LoginContainer = () => {
     return login(userName, password);
   };
 
-  return (
+  return <LoginCard credentials={credentials} onChange={handleChange} onLogin={handleLogin} />;
-    <LoginCard
-      credentials={credentials}
-      onChange={handleChange}
-      onLogin={handleLogin}
-    />
-  );
 };
 
 export default LoginContainer;

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

@@ -96,7 +96,9 @@ const MachineContainer = ({ machine, viewMode }) => {
     },
     {
       code: "advanced",
-      effect: () => {},
+      effect: () => {
+        // to do: implement
+      },
       icon: Launch,
       tooltip: t("Machine.Actions.Advanced"),
       main: false

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

@@ -1,8 +1,5 @@
 import React, { useContext, useEffect, useCallback, useState } from "react";
-import {
+import { NetworkStateContext, NetworkDispatchContext } from "../../network/state/contexts";
-  NetworkStateContext,
-  NetworkDispatchContext
-} from "../../network/state/contexts";
 import MachinesListComponent from "./MachinesListComponent";
 import PageTitle from "../../../components/common/PageTitle";
 import { useTranslation } from "react-i18next";
@@ -35,19 +32,9 @@ const MachinesContainer = () => {
     <>
       <PageTitle
         text={t("Menu.Machines")}
-        toolBar={
+        toolBar={<ViewModeSelection callback={setViewMode} initialMode={ViewModes.TABLE} />}
-          <ViewModeSelection
-            callback={setViewMode}
-            initialMode={ViewModes.TABLE}
-          />
-        }
       />
-      {viewMode && (
+      {viewMode && <MachinesListComponent machines={state.network.machines} viewMode={viewMode} />}
-        <MachinesListComponent
-          machines={state.network.machines}
-          viewMode={viewMode}
-        />
-      )}
     </>
   );
 };

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

@@ -2,8 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import TableChartIcon from "@mui/icons-material/TableChart";
 import ViewListIcon from "@mui/icons-material/ViewList";
-import ToggleButton from "@material-ui/lab/ToggleButton";
+import { ToggleButtonGroup, ToggleButton } from "@mui/material";
-import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
 import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
 

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

@@ -41,4 +41,6 @@ ActionButton.propTypes = {
   disabled: PropTypes.bool
 };
 
+ActionButton.displayName = "ActionButton";
+
 export default ActionButton;

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

@@ -71,7 +71,9 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
             }, pingInterval);
           }
         },
-        onError: () => {}
+        onError: () => {
+          // to do: handle error
+        }
       }
     );
   }, [machine, log, pingInterval, disabled]);

frontend/src/features/network/state/NetworkStateProvider.js

@@ -6,16 +6,11 @@ import { initialState } from "./initialState";
 
 const NetworkStateProvider = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const dispatchActions = useMemo(
+  const dispatchActions = useMemo(() => reducerDispatchActions(dispatch), [dispatch]);
-    () => reducerDispatchActions(dispatch),
-    [dispatch]
-  );
 
   return (
     <NetworkStateContext.Provider value={state}>
-      <NetworkDispatchContext.Provider value={dispatchActions}>
+      <NetworkDispatchContext.Provider value={dispatchActions}>{children}</NetworkDispatchContext.Provider>
-        {children}
-      </NetworkDispatchContext.Provider>
     </NetworkStateContext.Provider>
   );
 };

frontend/src/features/network/state/reducer.js

@@ -17,6 +17,5 @@ export function reducer(state, action) {
 }
 
 export const dispatchActions = dispatch => ({
-  onNetworkChange: (prop, value) =>
+  onNetworkChange: (prop, value) => dispatch({ type: "onNetworkChange", payload: { prop, value } })
-    dispatch({ type: "onNetworkChange", payload: { prop, value } })
 });

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

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Flag from "react-flags";
+import Flag from "react-world-flags";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import { useTranslation } from "react-i18next";
 

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

@@ -2,9 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import LanguageComponent from "./LanguageComponent";
 
-const flagsPath = process.env.PUBLIC_URL
+const flagsPath = process.env.PUBLIC_URL ? `${process.env.PUBLIC_URL}/flags` : "flags";
-  ? `${process.env.PUBLIC_URL}/flags`
-  : "flags";
 
 const LanguageContainer = () => {
   const [anchorEl, setAnchorEl] = useState(null);

frontend/src/features/settings/notifications/NotificationsContainer.js

@@ -3,9 +3,8 @@ import React from "react";
 const NotificationsContainer = () => {
   return (
     <div>
-      Enable/Disable email notifications (for each one separately - when
+      Enable/Disable email notifications (for each one separately - when starting the machine, when stopping) You can go
-      starting the machine, when stopping) You can go even further and have an
+      even further and have an advanced site where you can configure each individual machine.
-      advanced site where you can configure each individual machine.
     </div>
   );
 };

frontend/src/providers/SensitiveInfoProvider.js

@@ -23,8 +23,7 @@ const reducer = (state = initialState, action) => {
 };
 
 const dispatchActions = dispatch => ({
-  onSensitiveInfoEnabled: enabled =>
+  onSensitiveInfoEnabled: enabled => dispatch({ type: "onSensitiveInfoEnabled", payload: { enabled } })
-    dispatch({ type: "onSensitiveInfoEnabled", payload: { enabled } })
 });
 
 const useSensitiveInfo = () => {

frontend/src/providers/index.js

@@ -3,9 +3,4 @@ import ToastProvider from "./ToastProvider";
 import SensitiveInfoProvider from "./SensitiveInfoProvider";
 import UserPermissionsProvider from "./UserPermissionsProvider";
 
-export {
+export { ThemeProvider, ToastProvider, SensitiveInfoProvider, UserPermissionsProvider };
-  ThemeProvider,
-  ToastProvider,
-  SensitiveInfoProvider,
-  UserPermissionsProvider
-};

frontend/src/utils/i18n.js

@@ -49,16 +49,12 @@ i18n
               let startDate = moment(value.start);
               let endDate = moment(value.end);
               let span = moment.duration(endDate - startDate);
-              return `${parseInt(span.asHours(), 10)}h ${parseInt(
+              return `${parseInt(span.asHours(), 10)}h ${parseInt(span.asMinutes() % 60, 10)}m`;
-                span.asMinutes() % 60,
-                10
-              )}m`;
             }
             return "";
           }
 
-          if (format === "intlNumber")
+          if (format === "intlNumber") return new Intl.NumberFormat(lng).format(value);
-            return new Intl.NumberFormat(lng).format(value);
           if (format === "intlDecimal")
             return new Intl.NumberFormat(lng, {
               minimumFractionDigits: 2

frontend/src/utils/obfuscateStrings.js

@@ -1,9 +1,7 @@
 const obfuscateForChars = (text, placeholder = "*") => {
   const firstChar = text.substring(0, 1);
   const lastChar = text.substring(text.length - 1);
-  const middleChars = text
+  const middleChars = text.substring(1, text.length - 1).replace(/[a-zA-Z0-9]/g, placeholder);
-    .substring(1, text.length - 1)
-    .replace(/[a-zA-Z0-9]/g, placeholder);
   return firstChar + middleChars + lastChar;
 };
 
@@ -15,9 +13,7 @@ const obfuscate = (text, placeholder = "*") => {
 
   const firstTwoChars = text.substring(0, 2);
   const lastChar = text.substring(text.length - 1);
-  const middleChars = text
+  const middleChars = text.substring(2, text.length - 1).replace(/[a-zA-Z0-9]/g, placeholder);
-    .substring(2, text.length - 1)
-    .replace(/[a-zA-Z0-9]/g, placeholder);
   return firstTwoChars + middleChars + lastChar;
 };