From d9501339c63d4207fdcf60d5dfbd0cf7b6f7874f Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 25 Mar 2024 02:06:10 +0200 Subject: [PATCH] Update Material-UI imports to MUI imports --- .../components/common/inputs/PasswordField.js | 9 ++------- .../src/components/layout/LightDarkToggle.js | 11 ++--------- .../components/layout/SensitiveInfoToggle.js | 11 ++--------- .../about/timeline/TimelineComponent.js | 7 ++----- .../login/components/LoginComponent.js | 17 +++-------------- .../machines/components/MachineContainer.js | 16 +++------------- .../machines/components/MachineTableRow.js | 14 +++----------- .../components/common/ActionsGroup.js | 18 ++++-------------- .../components/common/WakeComponent.js | 19 +++++-------------- frontend/src/{index.js => index.tsx} | 11 ++++++----- frontend/src/providers/ThemeProvider.js | 2 +- frontend/src/utils/api.js | 2 +- 12 files changed, 34 insertions(+), 103 deletions(-) rename frontend/src/{index.js => index.tsx} (73%) diff --git a/frontend/src/components/common/inputs/PasswordField.js b/frontend/src/components/common/inputs/PasswordField.js index e94c1b3..6619de8 100644 --- a/frontend/src/components/common/inputs/PasswordField.js +++ b/frontend/src/components/common/inputs/PasswordField.js @@ -1,12 +1,7 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; -import { - InputAdornment, - TextField, - makeStyles, - IconButton -} from "@material-ui/core"; -import { Visibility, VisibilityOff, LockOutlined } from "@material-ui/icons"; +import { InputAdornment, TextField, makeStyles, IconButton } from "@mui/material"; +import { Visibility, VisibilityOff, LockOutlined } from "@mui/icons-material"; const useStyles = makeStyles(theme => ({ margin: { diff --git a/frontend/src/components/layout/LightDarkToggle.js b/frontend/src/components/layout/LightDarkToggle.js index cc42262..b68f307 100644 --- a/frontend/src/components/layout/LightDarkToggle.js +++ b/frontend/src/components/layout/LightDarkToggle.js @@ -1,9 +1,6 @@ import React from "react"; import { IconButton } from "@material-ui/core"; -import { - Brightness2 as MoonIcon, - WbSunny as SunIcon -} from "@material-ui/icons"; +import { Brightness2 as MoonIcon, WbSunny as SunIcon } from "@mui/icons-material"; import { useApplicationTheme } from "../../providers/ThemeProvider"; const LightDarkToggle = () => { @@ -12,11 +9,7 @@ const LightDarkToggle = () => { const handleChange = () => onDarkModeChanged(!isDark); return ( - + {isDark ? : } ); diff --git a/frontend/src/components/layout/SensitiveInfoToggle.js b/frontend/src/components/layout/SensitiveInfoToggle.js index e88e837..0cefd72 100644 --- a/frontend/src/components/layout/SensitiveInfoToggle.js +++ b/frontend/src/components/layout/SensitiveInfoToggle.js @@ -1,9 +1,6 @@ import React from "react"; import { IconButton } from "@material-ui/core"; -import { - Visibility as VisibilityIcon, - VisibilityOff as VisibilityOffIcon -} from "@material-ui/icons"; +import { Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from "@mui/icons-material"; import { useSensitiveInfo } from "../../hooks"; const SensitiveInfoToggle = () => { @@ -12,11 +9,7 @@ const SensitiveInfoToggle = () => { const handleChange = () => onSensitiveInfoEnabled(!enabled); return ( - + {enabled ? : } ); diff --git a/frontend/src/features/about/timeline/TimelineComponent.js b/frontend/src/features/about/timeline/TimelineComponent.js index 7a97331..418ddf3 100644 --- a/frontend/src/features/about/timeline/TimelineComponent.js +++ b/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 }) => { - + {!release.isLast && } diff --git a/frontend/src/features/login/components/LoginComponent.js b/frontend/src/features/login/components/LoginComponent.js index 8ec6166..e5f16a6 100644 --- a/frontend/src/features/login/components/LoginComponent.js +++ b/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 { - TextField, - InputAdornment, - Button, - CardActions, - CardContent -} from "@material-ui/core"; -import { AccountCircleOutlined } from "@material-ui/icons"; +import { TextField, InputAdornment, Button, CardActions, CardContent } from "@material-ui/core"; +import { AccountCircleOutlined } from "@mui/icons-material"; 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 }) => { /> - diff --git a/frontend/src/features/machines/components/MachineContainer.js b/frontend/src/features/machines/components/MachineContainer.js index c7b128f..da72724 100644 --- a/frontend/src/features/machines/components/MachineContainer.js +++ b/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 && ( - + )} {viewMode === ViewModes.ACCORDION && ( - + )} ); diff --git a/frontend/src/features/machines/components/MachineTableRow.js b/frontend/src/features/machines/components/MachineTableRow.js index 3338cfe..c1e24b3 100644 --- a/frontend/src/features/machines/components/MachineTableRow.js +++ b/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 }) => { - setOpen(!open)} - > + setOpen(!open)}> {open ? : } @@ -45,11 +41,7 @@ const MachineTableRow = ({ machine, actions, logs, addLog }) => { - + diff --git a/frontend/src/features/machines/components/common/ActionsGroup.js b/frontend/src/features/machines/components/common/ActionsGroup.js index 920f23a..52529f2 100644 --- a/frontend/src/features/machines/components/common/ActionsGroup.js +++ b/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( - () => actions.filter(a => a.main === true), - [actions] - ); + const mainActions = useMemo(() => actions.filter(a => a.main === true), [actions]); - const secondaryActions = useMemo( - () => actions.filter(a => a.main === false), - [actions] - ); + const secondaryActions = useMemo(() => actions.filter(a => a.main === false), [actions]); const handleMenuOpen = (_, event) => { setMenuAnchor(event.currentTarget); @@ -33,11 +27,7 @@ const ActionsGroup = ({ machine, actions, addLog }) => { return ( <> - + {mainActions.map(action => ( { const { t } = useTranslation(); const { success, error } = useToast(); - const pingInterval = - process.env.REACT_APP_MACHINE_PING_INTERVAL || defaultPingInterval; - const startingTime = - process.env.REACT_APP_MACHINE_STARTING_TIME || defaultStartingTime; + const pingInterval = process.env.REACT_APP_MACHINE_PING_INTERVAL || defaultPingInterval; + 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( - message => addLog(`[${getCurrentDateTime()}] ${message}`), - [addLog, getCurrentDateTime] - ); + const log = useCallback(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( - `Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec( - startingTime - )}]` - ); + log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`); setTimeout(() => { setTrigger(prev => !prev); }, startingTime); diff --git a/frontend/src/index.js b/frontend/src/index.tsx similarity index 73% rename from frontend/src/index.js rename to frontend/src/index.tsx index f40a159..891b959 100644 --- a/frontend/src/index.js +++ b/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( @@ -18,6 +20,5 @@ ReactDOM.render( - , - document.getElementById("root") + ); diff --git a/frontend/src/providers/ThemeProvider.js b/frontend/src/providers/ThemeProvider.js index 8f52728..740a1f1 100644 --- a/frontend/src/providers/ThemeProvider.js +++ b/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"; diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js index 529c70c..08dd64b 100644 --- a/frontend/src/utils/api.js +++ b/frontend/src/utils/api.js @@ -38,7 +38,7 @@ const handleError = err => { }; const defaultOptions = { - onCompleted: () => {}, + onCompleted: () => null, onError: handleError };