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,51 +34,56 @@ 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>
-      <HeaderText text="Shared Storage" />
+      <StyledDiv>
-      {!isLoading ? (
+        <HeaderText text="Shared Storage" />
-        <Box className={classes.root}>
+        {!isLoading ? (
-          {data?.file_systems &&
+          <Box className={classes.root}>
-            data.file_systems.map(
+            {data?.file_systems &&
-              (fs: AnvilFileSystem): JSX.Element => (
+              data.file_systems.map(
-                <InnerPanel key={fs.mount_point}>
+                (fs: AnvilFileSystem): JSX.Element => (
-                  <PanelHeader>
+                  <InnerPanel key={fs.mount_point}>
-                    <Box display="flex" width="100%" className={classes.header}>
+                    <PanelHeader>
-                      <Box>
+                      <Box
-                        <BodyText text={fs.mount_point} />
+                        display="flex"
+                        width="100%"
+                        className={classes.header}
+                      >
+                        <Box>
+                          <BodyText text={fs.mount_point} />
+                        </Box>
                       </Box>
-                    </Box>
+                    </PanelHeader>
-                  </PanelHeader>
+                    {fs?.hosts &&
-                  {fs?.hosts &&
+                      fs.hosts.map(
-                    fs.hosts.map(
+                        (
-                      (
+                          host: AnvilFileSystemHost,
-                        host: AnvilFileSystemHost,
+                          index: number,
-                        index: number,
+                        ): JSX.Element => (
-                      ): JSX.Element => (
+                          <SharedStorageHost
-                        <SharedStorageHost
+                            host={{
-                          host={{
+                              ...host,
-                            ...host,
+                              ...anvil[
-                            ...anvil[
+                                anvil.findIndex((a) => a.anvil_uuid === uuid)
-                              anvil.findIndex((a) => a.anvil_uuid === uuid)
+                              ].hosts[index],
-                            ].hosts[index],
+                            }}
-                          }}
+                            key={fs.hosts[index].free}
-                          key={fs.hosts[index].free}
+                          />
-                        />
+                        ),
-                      ),
+                      )}
-                    )}
+                  </InnerPanel>
-                </InnerPanel>
+                ),
-              ),
+              )}
-            )}
+          </Box>
-        </Box>
+        ) : (
-      ) : (
+          <Spinner />
-        <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>
   );
 };