refactor: [M3-6273] - MUI v5 Migration - SRC > Features > Lish (#9774)

--------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
linode · Oct 11, 2023 · 4ea2630 · 4ea2630
1 parent 74587c4
commit 4ea2630
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 94 deletions.
diff --git a/packages/manager/.changeset/pr-9774-tech-stories-1696952177563.md 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
@@ -256,3 +256,8 @@ body > div.terminal {
 .osx b, .osx strong {
   font-weight: 500;
 }
+
+[data-qa-tab="Glish"] canvas {
+  margin: 0 !important;
+  padding: 24px;
+}
diff --git 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 (
-    <StyledRootDiv aria-label="Content is loading" className={className}>
+    <StyledRootDiv
+      aria-label="Content is loading"
+      className={className}
+      sx={sx}
+    >
       {children !== undefined && (
         <Box sx={{ marginTop: 4, position: 'absolute' }}>{children}</Box>
       )}

diff --git 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
@@ -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 (
     <VncScreen
       autoConnect={false}
-      loadingUI={<CircleProgress />}
+      loadingUI={<StyledCircleProgress />}
       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
@@ -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 <CircleProgress className={classes.progress} noInner />;
+    return <StyledCircleProgress />;
   }
 
   if (linodeError) {
@@ -149,44 +107,63 @@ const Lish = () => {
     );
   }
 
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <React.Fragment>
-      {linode && token && (
-        <Tabs
-          index={
-            type &&
-            tabs.findIndex((tab) => tab.title.toLocaleLowerCase() === type) !==
-              -1
-              ? tabs.findIndex((tab) => tab.title.toLocaleLowerCase() === type)
-              : 0
-          }
-          className={classes.tabs}
-          onChange={navToURL}
-        >
-          <TabLinkList tabs={tabs} />
-          <TabPanels>
-            <SafeTabPanel data-qa-tab="Weblish" index={0}>
-              <Weblish
-                linode={linode}
-                refreshToken={refreshToken}
-                token={token}
-              />
-            </SafeTabPanel>
-            {!isBareMetal && (
-              <SafeTabPanel data-qa-tab="Glish" index={1}>
-                <Glish
-                  linode={linode}
-                  refreshToken={refreshToken}
-                  token={token}
-                />
-              </SafeTabPanel>
-            )}
-          </TabPanels>
-        </Tabs>
-      )}
-    </React.Fragment>
-  );
+  return linode && token ? (
+    <StyledTabs
+      index={
+        type &&
+        tabs.findIndex((tab) => tab.title.toLocaleLowerCase() === type) !== -1
+          ? tabs.findIndex((tab) => tab.title.toLocaleLowerCase() === type)
+          : 0
+      }
+      onChange={navToURL}
+    >
+      <TabLinkList tabs={tabs} />
+      <TabPanels>
+        <SafeTabPanel data-qa-tab="Weblish" index={0}>
+          <Weblish linode={linode} refreshToken={refreshToken} token={token} />
+        </SafeTabPanel>
+        {!isBareMetal && (
+          <SafeTabPanel data-qa-tab="Glish" index={1}>
+            <Glish linode={linode} refreshToken={refreshToken} token={token} />
+          </SafeTabPanel>
+        )}
+      </TabPanels>
+    </StyledTabs>
+  ) : 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
@@ -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<CombinedProps, State> {
         {this.socket && this.socket.readyState === this.socket.OPEN ? (
           <div className="terminal" id="terminal" />
         ) : (
-          <CircleProgress />
+          <StyledCircleProgress />
         )}
       </div>
     );