diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e84fcb0..d33ff71 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index d084c5e..9cc7efe 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/common/NavigationButtons.js b/frontend/src/components/common/NavigationButtons.js index 7b01845..fcce372 100644 --- a/frontend/src/components/common/NavigationButtons.js +++ b/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 from "@material-ui/lab/ToggleButtonGroup"; +import { ToggleButtonGroup, ToggleButton } from "@mui/material"; import { Tooltip } from "@mui/material"; const NavigationButtons = ({ tabs, onTabChange }) => { diff --git a/frontend/src/components/common/NotAllowed.js b/frontend/src/components/common/NotAllowed.js index c799fea..53d23e2 100644 --- a/frontend/src/components/common/NotAllowed.js +++ b/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 => ({ diff --git a/frontend/src/features/about/releaseNotes/ReleaseNotesContainer.js b/frontend/src/features/about/releaseNotes/ReleaseNotesContainer.js index 29efc6b..39e849b 100644 --- a/frontend/src/features/about/releaseNotes/ReleaseNotesContainer.js +++ b/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 => - releases.sort((a, b) => new Date(b.date) - new Date(a.date)); +const sort = releases => releases.sort((a, b) => new Date(b.date) - new Date(a.date)); const ReleaseNotesContainer = ({ view }) => { const [state, setState] = useState({ data: [], loaded: false }); diff --git a/frontend/src/features/about/timeline/TimelineComponent.js b/frontend/src/features/about/timeline/TimelineComponent.js index 34235d7..463ca31 100644 --- a/frontend/src/features/about/timeline/TimelineComponent.js +++ b/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 TimelineItem from "@material-ui/lab/TimelineItem"; -import TimelineSeparator from "@material-ui/lab/TimelineSeparator"; -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 Timeline from "@mui/lab/Timeline"; +import TimelineItem from "@mui/lab/TimelineItem"; +import TimelineSeparator from "@mui/lab/TimelineSeparator"; +import TimelineConnector from "@mui/lab/TimelineConnector"; +import TimelineContent from "@mui/lab/TimelineContent"; +import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent"; +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, diff --git a/frontend/src/features/dashboard/announcements/GuestAnnouncement.js b/frontend/src/features/dashboard/announcements/GuestAnnouncement.js index 597bbae..dbd3c92 100644 --- a/frontend/src/features/dashboard/announcements/GuestAnnouncement.js +++ b/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"; diff --git a/frontend/src/features/dashboard/announcements/UserAnnouncement.js b/frontend/src/features/dashboard/announcements/UserAnnouncement.js index 40e8ac8..2606dd7 100644 --- a/frontend/src/features/dashboard/announcements/UserAnnouncement.js +++ b/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"; diff --git a/frontend/src/features/login/components/LoginContainer.js b/frontend/src/features/login/components/LoginContainer.js index 8821de3..c3f23af 100644 --- a/frontend/src/features/login/components/LoginContainer.js +++ b/frontend/src/features/login/components/LoginContainer.js @@ -26,13 +26,7 @@ const LoginContainer = () => { return login(userName, password); }; - return ( - - ); + return ; }; export default LoginContainer; diff --git a/frontend/src/features/machines/components/MachineContainer.js b/frontend/src/features/machines/components/MachineContainer.js index da72724..e1a3236 100644 --- a/frontend/src/features/machines/components/MachineContainer.js +++ b/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 diff --git a/frontend/src/features/machines/components/MachinesContainer.js b/frontend/src/features/machines/components/MachinesContainer.js index 33263b8..46a09d1 100644 --- a/frontend/src/features/machines/components/MachinesContainer.js +++ b/frontend/src/features/machines/components/MachinesContainer.js @@ -1,8 +1,5 @@ import React, { useContext, useEffect, useCallback, useState } from "react"; -import { - NetworkStateContext, - NetworkDispatchContext -} from "../../network/state/contexts"; +import { 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 = () => { <> - } + toolBar={} /> - {viewMode && ( - - )} + {viewMode && } ); }; diff --git a/frontend/src/features/machines/components/ViewModeSelection.js b/frontend/src/features/machines/components/ViewModeSelection.js index c656170..2b267b3 100644 --- a/frontend/src/features/machines/components/ViewModeSelection.js +++ b/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 from "@material-ui/lab/ToggleButtonGroup"; +import { ToggleButtonGroup, ToggleButton } from "@mui/material"; import { Tooltip } from "@mui/material"; import { useTranslation } from "react-i18next"; diff --git a/frontend/src/features/machines/components/common/ActionButton.js b/frontend/src/features/machines/components/common/ActionButton.js index f4a7374..daa0f0f 100644 --- a/frontend/src/features/machines/components/common/ActionButton.js +++ b/frontend/src/features/machines/components/common/ActionButton.js @@ -41,4 +41,6 @@ ActionButton.propTypes = { disabled: PropTypes.bool }; +ActionButton.displayName = "ActionButton"; + export default ActionButton; diff --git a/frontend/src/features/machines/components/common/WakeComponent.js b/frontend/src/features/machines/components/common/WakeComponent.js index 530a426..5645c1a 100644 --- a/frontend/src/features/machines/components/common/WakeComponent.js +++ b/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]); diff --git a/frontend/src/features/network/state/NetworkStateProvider.js b/frontend/src/features/network/state/NetworkStateProvider.js index cd3a58f..c95364a 100644 --- a/frontend/src/features/network/state/NetworkStateProvider.js +++ b/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( - () => reducerDispatchActions(dispatch), - [dispatch] - ); + const dispatchActions = useMemo(() => reducerDispatchActions(dispatch), [dispatch]); return ( - - {children} - + {children} ); }; diff --git a/frontend/src/features/network/state/reducer.js b/frontend/src/features/network/state/reducer.js index 65387e2..e180e07 100644 --- a/frontend/src/features/network/state/reducer.js +++ b/frontend/src/features/network/state/reducer.js @@ -17,6 +17,5 @@ export function reducer(state, action) { } export const dispatchActions = dispatch => ({ - onNetworkChange: (prop, value) => - dispatch({ type: "onNetworkChange", payload: { prop, value } }) + onNetworkChange: (prop, value) => dispatch({ type: "onNetworkChange", payload: { prop, value } }) }); diff --git a/frontend/src/features/settings/appearance/language/LanguageComponent.js b/frontend/src/features/settings/appearance/language/LanguageComponent.js index c22b3f3..621125c 100644 --- a/frontend/src/features/settings/appearance/language/LanguageComponent.js +++ b/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"; diff --git a/frontend/src/features/settings/appearance/language/LanguageContainer.js b/frontend/src/features/settings/appearance/language/LanguageContainer.js index 0fd9b42..70ddfef 100644 --- a/frontend/src/features/settings/appearance/language/LanguageContainer.js +++ b/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 - ? `${process.env.PUBLIC_URL}/flags` - : "flags"; +const flagsPath = process.env.PUBLIC_URL ? `${process.env.PUBLIC_URL}/flags` : "flags"; const LanguageContainer = () => { const [anchorEl, setAnchorEl] = useState(null); diff --git a/frontend/src/features/settings/notifications/NotificationsContainer.js b/frontend/src/features/settings/notifications/NotificationsContainer.js index 5195ed3..4df88b1 100644 --- a/frontend/src/features/settings/notifications/NotificationsContainer.js +++ b/frontend/src/features/settings/notifications/NotificationsContainer.js @@ -3,9 +3,8 @@ import React from "react"; const NotificationsContainer = () => { return (
- Enable/Disable email notifications (for each one separately - when - starting the machine, when stopping) You can go even further and have an - advanced site where you can configure each individual machine. + Enable/Disable email notifications (for each one separately - when starting the machine, when stopping) You can go + even further and have an advanced site where you can configure each individual machine.
); }; diff --git a/frontend/src/providers/SensitiveInfoProvider.js b/frontend/src/providers/SensitiveInfoProvider.js index ab00f0e..666fef8 100644 --- a/frontend/src/providers/SensitiveInfoProvider.js +++ b/frontend/src/providers/SensitiveInfoProvider.js @@ -23,8 +23,7 @@ const reducer = (state = initialState, action) => { }; const dispatchActions = dispatch => ({ - onSensitiveInfoEnabled: enabled => - dispatch({ type: "onSensitiveInfoEnabled", payload: { enabled } }) + onSensitiveInfoEnabled: enabled => dispatch({ type: "onSensitiveInfoEnabled", payload: { enabled } }) }); const useSensitiveInfo = () => { diff --git a/frontend/src/providers/index.js b/frontend/src/providers/index.js index 118ffbc..fe8ba14 100644 --- a/frontend/src/providers/index.js +++ b/frontend/src/providers/index.js @@ -3,9 +3,4 @@ import ToastProvider from "./ToastProvider"; import SensitiveInfoProvider from "./SensitiveInfoProvider"; import UserPermissionsProvider from "./UserPermissionsProvider"; -export { - ThemeProvider, - ToastProvider, - SensitiveInfoProvider, - UserPermissionsProvider -}; +export { ThemeProvider, ToastProvider, SensitiveInfoProvider, UserPermissionsProvider }; diff --git a/frontend/src/utils/i18n.js b/frontend/src/utils/i18n.js index 24f5c29..5138917 100644 --- a/frontend/src/utils/i18n.js +++ b/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( - span.asMinutes() % 60, - 10 - )}m`; + return `${parseInt(span.asHours(), 10)}h ${parseInt(span.asMinutes() % 60, 10)}m`; } return ""; } - if (format === "intlNumber") - return new Intl.NumberFormat(lng).format(value); + if (format === "intlNumber") return new Intl.NumberFormat(lng).format(value); if (format === "intlDecimal") return new Intl.NumberFormat(lng, { minimumFractionDigits: 2 diff --git a/frontend/src/utils/obfuscateStrings.js b/frontend/src/utils/obfuscateStrings.js index 5c55cef..63d36f7 100644 --- a/frontend/src/utils/obfuscateStrings.js +++ b/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 - .substring(1, text.length - 1) - .replace(/[a-zA-Z0-9]/g, placeholder); + const middleChars = text.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 - .substring(2, text.length - 1) - .replace(/[a-zA-Z0-9]/g, placeholder); + const middleChars = text.substring(2, text.length - 1).replace(/[a-zA-Z0-9]/g, placeholder); return firstTwoChars + middleChars + lastChar; };