refactor(striker-ui): migrate MUI v4->5 on FileSystem/* (unused)

striker-ui/components/FileSystem/FileSystems.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { BodyText, HeaderText } from '../Text';
 import { Panel, InnerPanel, PanelHeader } from '../Panels';
 import SharedStorageHost from './FileSystemsHost';
@@ -10,12 +10,20 @@ import { AnvilContext } from '../AnvilContext';
 import Spinner from '../Spinner';
 import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
 
-const useStyles = makeStyles((theme) => ({
+const PREFIX = 'SharedStorage';
-  header: {
+
+const classes = {
+  header: `${PREFIX}-header`,
+  root: `${PREFIX}-root`,
+};
+
+const StyledDiv = styled('div')(({ theme }) => ({
+  [`& .${classes.header}`]: {
     paddingTop: '.1em',
     paddingRight: '.7em',
   },
-  root: {
+
+  [`& .${classes.root}`]: {
     overflow: 'auto',
     height: '78vh',
     paddingLeft: '.3em',
@@ -26,13 +34,13 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
-  const classes = useStyles();
   const { uuid } = useContext(AnvilContext);
   const { data, isLoading } = PeriodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`,
   );
   return (
     <Panel>
+      <StyledDiv>
         <HeaderText text="Shared Storage" />
         {!isLoading ? (
           <Box className={classes.root}>
@@ -41,7 +49,11 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                 (fs: AnvilFileSystem): JSX.Element => (
                   <InnerPanel key={fs.mount_point}>
                     <PanelHeader>
-                    <Box display="flex" width="100%" className={classes.header}>
+                      <Box
+                        display="flex"
+                        width="100%"
+                        className={classes.header}
+                      >
                         <Box>
                           <BodyText text={fs.mount_point} />
                         </Box>
@@ -71,6 +83,7 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
         ) : (
           <Spinner />
         )}
+      </StyledDiv>
     </Panel>
   );
 };

striker-ui/components/FileSystem/FileSystemsHost.tsx

@@ -1,21 +1,31 @@
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import * as prettyBytes from 'pretty-bytes';
 import { AllocationBar } from '../Bars';
 import { BodyText } from '../Text';
 import Decorator from '../Decorator';
 
-const useStyles = makeStyles(() => ({
+const PREFIX = 'SharedStorageHost';
-  fs: {
+
+const classes = {
+  fs: `${PREFIX}-fs`,
+  bar: `${PREFIX}-bar`,
+  decoratorBox: `${PREFIX}-decoratorBox`,
+};
+
+const StyledDiv = styled('div')(() => ({
+  [`& .${classes.fs}`]: {
     paddingLeft: '.7em',
     paddingRight: '.7em',
     paddingTop: '1.2em',
   },
-  bar: {
+
+  [`& .${classes.bar}`]: {
     paddingLeft: '.7em',
     paddingRight: '.7em',
   },
-  decoratorBox: {
+
+  [`& .${classes.decoratorBox}`]: {
     paddingRight: '.3em',
   },
 }));
@@ -25,9 +35,8 @@ const SharedStorageHost = ({
 }: {
   host: AnvilFileSystemHost;
 }): JSX.Element => {
-  const classes = useStyles();
   return (
-    <>
+    <StyledDiv>
       <Box display="flex" width="100%" className={classes.fs}>
         <Box flexGrow={1}>
           <BodyText text={host.host_name || 'Not Available'} />
@@ -73,7 +82,7 @@ const SharedStorageHost = ({
           </Box>
         </>
       )}
-    </>
+    </StyledDiv>
   );
 };