From 3ca3df01af3493418791338e35d92ca8f87988ec Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Fri, 7 Jan 2022 19:58:48 -0500 Subject: [PATCH] refactor(striker-ui): migrate MUI v4->5 on Servers --- striker-ui/components/Servers.tsx | 433 ++++++++++++--------- striker-ui/lib/consts/ICON_BUTTON_STYLE.ts | 6 +- 2 files changed, 242 insertions(+), 197 deletions(-) diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index b2f96785..dfc5160a 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -9,12 +9,12 @@ import { Checkbox, Menu, MenuItem, -} from '@material-ui/core'; -import Typography from '@mui/material/Typography'; -import EditIcon from '@material-ui/icons/Edit'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; -import CheckIcon from '@material-ui/icons/Check'; -import { makeStyles } from '@material-ui/core/styles'; + Typography, +} from '@mui/material'; +import EditIcon from '@mui/icons-material/Edit'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import CheckIcon from '@mui/icons-material/Check'; +import { styled } from '@mui/material/styles'; import { Panel } from './Panels'; import PeriodicFetch from '../lib/fetchers/periodicFetch'; import { HeaderText, BodyText } from './Text'; @@ -28,6 +28,7 @@ import { BLACK, LARGE_MOBILE_BREAKPOINT, } from '../lib/consts/DEFAULT_THEME'; +import ICON_BUTTON_STYLE from '../lib/consts/ICON_BUTTON_STYLE'; import { AnvilContext } from './AnvilContext'; import serverState from '../lib/consts/SERVERS'; import Decorator, { Colours } from './Decorator'; @@ -36,8 +37,29 @@ import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; import putFetch from '../lib/fetchers/putFetch'; -const useStyles = makeStyles((theme) => ({ - root: { +const PREFIX = 'Servers'; + +const classes = { + root: `${PREFIX}-root`, + divider: `${PREFIX}-divider`, + verticalDivider: `${PREFIX}-verticalDivider`, + button: `${PREFIX}-button`, + headerPadding: `${PREFIX}-headerPadding`, + hostsBox: `${PREFIX}-hostsBox`, + hostBox: `${PREFIX}-hostBox`, + checkbox: `${PREFIX}-checkbox`, + serverActionButton: `${PREFIX}-serverActionButton`, + editButton: `${PREFIX}-editButton`, + editButtonBox: `${PREFIX}-editButtonBox`, + dropdown: `${PREFIX}-dropdown`, + power: `${PREFIX}-power`, + on: `${PREFIX}-on`, + off: `${PREFIX}-off`, + all: `${PREFIX}-all`, +}; + +const StyledDiv = styled('div')(({ theme }) => ({ + [`& .${classes.root}`]: { width: '100%', overflow: 'auto', height: '78vh', @@ -47,63 +69,65 @@ const useStyles = makeStyles((theme) => ({ overflow: 'hidden', }, }, - divider: { - background: DIVIDER, + + [`& .${classes.divider}`]: { + backgroundColor: DIVIDER, }, - verticalDivider: { + + [`& .${classes.verticalDivider}`]: { height: '75%', paddingTop: '1em', }, - button: { + + [`& .${classes.button}`]: { '&:hover': { backgroundColor: HOVER, }, paddingLeft: 0, }, - headerPadding: { + + [`& .${classes.headerPadding}`]: { paddingLeft: '.3em', }, - hostsBox: { + + [`& .${classes.hostsBox}`]: { padding: '1em', paddingRight: 0, }, - hostBox: { + + [`& .${classes.hostBox}`]: { paddingTop: 0, }, - checkbox: { + + [`& .${classes.checkbox}`]: { paddingTop: '.8em', }, - menuItem: { - backgroundColor: GREY, - paddingRight: '3em', + + [`& .${classes.serverActionButton}`]: { + backgroundColor: TEXT, + color: BLACK, + textTransform: 'none', '&:hover': { backgroundColor: GREY, }, }, - editButton: { - borderRadius: 8, - backgroundColor: GREY, - '&:hover': { - backgroundColor: GREY, - }, - }, - editButtonBox: { + + [`& .${classes.editButton}`]: ICON_BUTTON_STYLE, + + [`& .${classes.editButtonBox}`]: { paddingTop: '.3em', }, - dropdown: { + + [`& .${classes.dropdown}`]: { paddingTop: '.8em', paddingBottom: '.8em', }, - power: { + + [`& .${classes.power}`]: { color: BLACK, }, - on: { - color: BLUE, - }, - off: { - color: RED, - }, - all: { + + [`& .${classes.all}`]: { paddingTop: '.5em', paddingLeft: '.3em', }, @@ -122,6 +146,24 @@ const selectDecorator = (state: string): Colours => { } }; +const ServerActionButtonMenuItem = styled(MenuItem)({ + backgroundColor: GREY, + paddingRight: '3em', + '&:hover': { + backgroundColor: GREY, + }, +}); + +const ServerActionButtonMenuItemLabel = styled(Typography)({ + [`&.${classes.on}`]: { + color: BLUE, + }, + + [`&.${classes.off}`]: { + color: RED, + }, +}); + type ButtonLabels = 'on' | 'off'; const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { @@ -129,9 +171,10 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const [showCheckbox, setShowCheckbox] = useState(false); const [allSelected, setAllSelected] = useState(false); const [selected, setSelected] = useState([]); - const buttonLabels = useRef([]); + const { uuid } = useContext(AnvilContext); - const classes = useStyles(); + + const buttonLabels = useRef([]); const { data, isLoading } = PeriodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, @@ -187,171 +230,173 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { return ( - - - + + + + + + + setShowCheckbox(!showCheckbox)} + > + {showCheckbox ? : } + + - - setShowCheckbox(!showCheckbox)} - > - {showCheckbox ? : } - - - - {showCheckbox && ( - <> - - - - setAnchorEl(null)} - > - {buttonLabels.current.map((label: ButtonLabels) => { - return ( - handlePower(label)} - className={classes.menuItem} - key={label} - > - + + + + setAnchorEl(null)} + > + {buttonLabels.current.map((label: ButtonLabels) => { + return ( + handlePower(label)} + key={label} > - {label.replace(/^[a-z]/, (c) => c.toUpperCase())} - - - ); - })} - - - - - - { - if (!allSelected) { - setButtons(data.servers); - setSelected( - data.servers.map( - (server: AnvilServer) => server.server_uuid, - ), + + {label.replace(/^[a-z]/, (c) => c.toUpperCase())} + + ); - } else { - setButtons([]); - setSelected([]); - } + })} + + + + + + { + if (!allSelected) { + setButtons(data.servers); + setSelected( + data.servers.map( + (server: AnvilServer) => server.server_uuid, + ), + ); + } else { + setButtons([]); + setSelected([]); + } - setAllSelected(!allSelected); - }} - /> + setAllSelected(!allSelected); + }} + /> + + + + - - - - - - )} - {!isLoading ? ( - - - {data?.servers.map((server: AnvilServer) => { - return ( - <> - handleChange(server.server_uuid)} - > - - {showCheckbox && ( - - s === server.server_uuid) !== - undefined + + )} + {!isLoading ? ( + + + {data?.servers.map((server: AnvilServer) => { + return ( + <> + handleChange(server.server_uuid)} + > + + {showCheckbox && ( + + s === server.server_uuid, + ) !== undefined + } + /> + + )} + + + + + + - )} - - + + {server.server_state !== 'shut off' && + server.server_state !== 'crashed' && + filteredHosts.map( + ( + host: AnvilStatusHost, + index: number, + ): JSX.Element => ( + <> + + + + {index !== filteredHosts.length - 1 && ( + + )} + + ), + )} + - - - - - - {server.server_state !== 'shut off' && - server.server_state !== 'crashed' && - filteredHosts.map( - ( - host: AnvilStatusHost, - index: number, - ): JSX.Element => ( - <> - - - - {index !== filteredHosts.length - 1 && ( - - )} - - ), - )} - - - - - - ); - })} - - - ) : ( - - )} + + + + ); + })} + + + ) : ( + + )} + ); }; diff --git a/striker-ui/lib/consts/ICON_BUTTON_STYLE.ts b/striker-ui/lib/consts/ICON_BUTTON_STYLE.ts index 6cd254ba..1e3b9bc5 100644 --- a/striker-ui/lib/consts/ICON_BUTTON_STYLE.ts +++ b/striker-ui/lib/consts/ICON_BUTTON_STYLE.ts @@ -1,10 +1,10 @@ -import { BLACK, GREY, TEXT } from './DEFAULT_THEME'; +import { BLACK, BORDER_RADIUS, GREY } from './DEFAULT_THEME'; const ICON_BUTTON_STYLE: Readonly> = { - borderRadius: 8, + borderRadius: BORDER_RADIUS, backgroundColor: GREY, '&:hover': { - backgroundColor: TEXT, + backgroundColor: GREY, }, color: BLACK, };