From 4ea2630a940858bcc2af84caefbc6cef0fa1db48 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:19:40 -0400 Subject: [PATCH] refactor: [M3-6273] - MUI v5 Migration - SRC > Features > Lish (#9774) --------- Co-authored-by: Jaalah Ramos Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> --- .../pr-9774-tech-stories-1696952177563.md | 5 + .../manager/src/assets/weblish/weblish.css | 5 + .../CircleProgress/CircleProgress.tsx | 12 +- packages/manager/src/components/ReachTab.tsx | 5 +- packages/manager/src/features/Lish/Glish.tsx | 4 +- packages/manager/src/features/Lish/Lish.tsx | 149 ++++++++---------- .../manager/src/features/Lish/Weblish.tsx | 4 +- 7 files changed, 90 insertions(+), 94 deletions(-) create mode 100644 packages/manager/.changeset/pr-9774-tech-stories-1696952177563.md diff --git a/packages/manager/.changeset/pr-9774-tech-stories-1696952177563.md b/packages/manager/.changeset/pr-9774-tech-stories-1696952177563.md new file mode 100644 index 00000000000..f6f04c90138 --- /dev/null +++ b/packages/manager/.changeset/pr-9774-tech-stories-1696952177563.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +MUI v5 Migration - `SRC > Features > Lish` ([#9774](https://github.com/linode/manager/pull/9774)) diff --git a/packages/manager/src/assets/weblish/weblish.css b/packages/manager/src/assets/weblish/weblish.css index 8e9ca7ecccf..3b4281badf9 100644 --- a/packages/manager/src/assets/weblish/weblish.css +++ b/packages/manager/src/assets/weblish/weblish.css @@ -256,3 +256,8 @@ body > div.terminal { .osx b, .osx strong { font-weight: 500; } + +[data-qa-tab="Glish"] canvas { + margin: 0 !important; + padding: 24px; +} \ No newline at end of file diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.tsx b/packages/manager/src/components/CircleProgress/CircleProgress.tsx index 2a983e9e3cf..620a724c31c 100644 --- a/packages/manager/src/components/CircleProgress/CircleProgress.tsx +++ b/packages/manager/src/components/CircleProgress/CircleProgress.tsx @@ -1,7 +1,7 @@ -import { Box } from 'src/components/Box'; -import { styled } from '@mui/material/styles'; +import { SxProps, styled } from '@mui/material/styles'; import * as React from 'react'; +import { Box } from 'src/components/Box'; import { CircularProgress, CircularProgressProps, @@ -15,6 +15,7 @@ interface CircleProgressProps extends CircularProgressProps { noInner?: boolean; noPadding?: boolean; size?: number; + sx?: SxProps; } const CircleProgress = (props: CircleProgressProps) => { @@ -25,6 +26,7 @@ const CircleProgress = (props: CircleProgressProps) => { noInner, noPadding, size, + sx, ...rest } = props; @@ -46,7 +48,11 @@ const CircleProgress = (props: CircleProgressProps) => { } return ( - + {children !== undefined && ( {children} )} diff --git a/packages/manager/src/components/ReachTab.tsx b/packages/manager/src/components/ReachTab.tsx index b3598ba86bf..f918e09edf8 100644 --- a/packages/manager/src/components/ReachTab.tsx +++ b/packages/manager/src/components/ReachTab.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles()((theme: Theme) => ({ }, '&:hover': { backgroundColor: theme.color.grey7, - color: `${theme.palette.primary.main} !important`, + color: theme.palette.primary.main, }, alignItems: 'center', borderBottom: '2px solid transparent', @@ -28,6 +28,9 @@ const useStyles = makeStyles()((theme: Theme) => ({ textDecoration: 'none', }, '&[data-reach-tab][data-selected]': { + '&:hover': { + color: theme.palette.primary.main, + }, borderBottom: `3px solid ${theme.textColors.linkActiveLight}`, color: theme.textColors.headlineStatic, fontFamily: theme.font.bold, diff --git a/packages/manager/src/features/Lish/Glish.tsx b/packages/manager/src/features/Lish/Glish.tsx index 5036d7458cb..cae989ed1de 100644 --- a/packages/manager/src/features/Lish/Glish.tsx +++ b/packages/manager/src/features/Lish/Glish.tsx @@ -4,8 +4,8 @@ import { makeStyles } from '@mui/styles'; import * as React from 'react'; import { VncScreen, VncScreenHandle } from 'react-vnc'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { StyledCircleProgress } from 'src/features/Lish/Lish'; import { getLishSchemeAndHostname, resizeViewPort } from './lishUtils'; @@ -133,7 +133,7 @@ const Glish = (props: Props) => { return ( } + loadingUI={} ref={ref} showDotCursor url={`${getLishSchemeAndHostname(region)}:8080/${token}`} diff --git a/packages/manager/src/features/Lish/Lish.tsx b/packages/manager/src/features/Lish/Lish.tsx index e7ad09b2c1e..aa0e30a5631 100644 --- a/packages/manager/src/features/Lish/Lish.tsx +++ b/packages/manager/src/features/Lish/Lish.tsx @@ -1,65 +1,27 @@ -import { Theme } from '@mui/material/styles'; -import { makeStyles } from '@mui/styles'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { TabPanels } from 'src/components/ReachTabPanels'; +import { Tabs } from 'src/components/ReachTabs'; import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel'; import { TabLinkList } from 'src/components/TabLinkList/TabLinkList'; import { Tab } from 'src/components/TabLinkList/TabLinkList'; -import { TabPanels } from 'src/components/ReachTabPanels'; -import { Tabs } from 'src/components/ReachTabs'; import { useLinodeLishTokenQuery, useLinodeQuery, } from 'src/queries/linodes/linodes'; +import '../../assets/weblish/weblish.css'; +import '../../assets/weblish/xterm.css'; import Glish from './Glish'; import Weblish from './Weblish'; const AUTH_POLLING_INTERVAL = 2000; -const useStyles = makeStyles((theme: Theme) => ({ - notFound: { - '& h1': { - color: '#f4f4f4 !important', - }, - color: '#f4f4f4 !important', - }, - progress: { - height: 'auto', - }, - tabs: { - '& [role="tab"]': { - '&[aria-selected="true"]': { - '&:hover': { - backgroundColor: theme.palette.primary.light, - color: 'white', - }, - backgroundColor: theme.palette.primary.main, - borderBottom: 'none !important', - color: 'white !important', - }, - backgroundColor: theme.bg.offWhite, - color: theme.color.tableHeaderText, - flex: 'auto', - margin: 0, - maxWidth: 'none !important', - }, - '& [role="tablist"]': { - backgroundColor: theme.bg.offWhite, - display: 'flex', - margin: 0, - overflow: 'hidden', - }, - backgroundColor: 'black', - margin: 0, - }, -})); - const Lish = () => { - const classes = useStyles(); const history = useHistory(); const { linodeId, type } = useParams<{ linodeId: string; type: string }>(); @@ -83,10 +45,6 @@ const Lish = () => { const token = data?.lish_token; React.useEffect(() => { - const webLishCss = import('' + '../../assets/weblish/weblish.css'); - const xtermCss = import('' + '../../assets/weblish/xterm.css'); - Promise.all([webLishCss, xtermCss]); - const interval = setInterval(checkAuthentication, AUTH_POLLING_INTERVAL); return () => { @@ -127,7 +85,7 @@ const Lish = () => { }; if (isLoading) { - return ; + return ; } if (linodeError) { @@ -149,44 +107,63 @@ const Lish = () => { ); } - return ( - // eslint-disable-next-line react/jsx-no-useless-fragment - - {linode && token && ( - tab.title.toLocaleLowerCase() === type) !== - -1 - ? tabs.findIndex((tab) => tab.title.toLocaleLowerCase() === type) - : 0 - } - className={classes.tabs} - onChange={navToURL} - > - - - - - - {!isBareMetal && ( - - - - )} - - - )} - - ); + return linode && token ? ( + tab.title.toLocaleLowerCase() === type) !== -1 + ? tabs.findIndex((tab) => tab.title.toLocaleLowerCase() === type) + : 0 + } + onChange={navToURL} + > + + + + + + {!isBareMetal && ( + + + + )} + + + ) : null; }; export default Lish; + +const StyledTabs = styled(Tabs)(({ theme }) => ({ + '& [data-reach-tab][role="tab"]': { + '&[aria-selected="true"]': { + '&:hover': { + backgroundColor: theme.palette.primary.light, + color: theme.name === 'light' ? theme.color.white : theme.color.black, + }, + backgroundColor: theme.palette.primary.main, + borderBottom: 'none !important', + color: theme.name === 'light' ? theme.color.white : theme.color.black, + }, + backgroundColor: theme.bg.offWhite, + color: theme.color.tableHeaderText, + flex: 'auto', + margin: 0, + maxWidth: 'none !important', + }, + '& [role="tablist"]': { + backgroundColor: theme.bg.offWhite, + display: 'flex', + margin: 0, + overflow: 'hidden', + }, + backgroundColor: 'black', + margin: 0, +})); + +export const StyledCircleProgress = styled(CircleProgress)(() => ({ + left: '50%', + position: 'absolute', + top: '50%', + transform: 'translate(-50%, -50%)', +})); diff --git a/packages/manager/src/features/Lish/Weblish.tsx b/packages/manager/src/features/Lish/Weblish.tsx index a2802ef598c..ea6adfcfc8c 100644 --- a/packages/manager/src/features/Lish/Weblish.tsx +++ b/packages/manager/src/features/Lish/Weblish.tsx @@ -4,8 +4,8 @@ import { WithStyles, createStyles, withStyles } from '@mui/styles'; import * as React from 'react'; import { Terminal } from 'xterm'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { StyledCircleProgress } from 'src/features/Lish/Lish'; import { getLishSchemeAndHostname, resizeViewPort } from './lishUtils'; @@ -94,7 +94,7 @@ export class Weblish extends React.Component { {this.socket && this.socket.readyState === this.socket.OPEN ? (
) : ( - + )}
);