Switch to using makeStyles (#507)

* Switch to using makeStyles For #502 we need to upgrade react and relay. To upgrade react we need to upgrade MUI. This change moves current style usage to use `makeStyle` which we'll be able easily upgrade with [this codemod](https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react). * Prettier * Updated snapshots
cirruslabs · Jan 24, 2023 · b6eb5c3 · b6eb5c3
1 parent 2b27225
commit b6eb5c3
Show file tree

Hide file tree

Showing 53 changed files with 659 additions and 654 deletions.
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "start-untyped": "TSC_COMPILE_ON_ERROR=\"true\" react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
+    "update-snapshots": "react-scripts test --env=jsdom --updateSnapshot",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "prettier": "prettier --write .",
     "prettier-check": "prettier --check .",

diff --git a/src/AllRoutes.tsx b/src/AllRoutes.tsx
@@ -6,9 +6,7 @@ import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import { makeStyles } from '@mui/styles';
 import BookIcon from '@mui/icons-material/Book';
 import MenuIcon from '@mui/icons-material/Menu';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -54,8 +52,8 @@ const AsyncApiExplorerRenderer = React.lazy(() => import('./components/explorer/
 
 const drawerWidth = 360;
 
-export const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     flex: {
       flex: 1,
     },
@@ -70,7 +68,7 @@ export const styles = theme =>
       marginLeft: 8,
     },
     titleShift: {
-      marginLeft: 2 * theme.spacing(1.0),
+      marginLeft: theme.spacing(2.0),
     },
     marginRight: {
       marginRight: theme.spacing(1.0),
@@ -131,17 +129,17 @@ export const styles = theme =>
       padding: 0,
       marginLeft: 0,
     },
-  });
+  };
+});
 
 const cirrusOpenDrawerState = atom({
   key: 'CirrusOpenDrawer',
   default: false,
   effects_UNSTABLE: [localStorageEffect('CirrusOpenDrawer')],
 });
 
-function AllRoutes(props: WithStyles<typeof styles>) {
-  let { classes } = props;
-
+function AllRoutes() {
+  let classes = useStyles();
   let theme = useTheme();
   const [openDrawer, setOpenDrawer] = useRecoilState(cirrusOpenDrawerState);
 
@@ -277,4 +275,4 @@ function AllRoutes(props: WithStyles<typeof styles>) {
   );
 }
 
-export default withStyles(styles)(AllRoutes);
+export default AllRoutes;
diff --git a/src/components/__tests__/__snapshots__/CirrusLinearProgress.test.tsx.snap b/src/components/__tests__/__snapshots__/CirrusLinearProgress.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`renders correctly 1`] = `
   role="progressbar"
 >
   <span
-    className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary CirrusLinearProgress-progress-1 MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
+    className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary makeStyles-progress-1 MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
     style={Object {}}
   />
   <span
-    className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary CirrusLinearProgress-progress-1 MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
+    className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary makeStyles-progress-1 MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
     style={Object {}}
   />
 </span>

diff --git a/src/components/__tests__/__snapshots__/Logs.test.tsx.snap b/src/components/__tests__/__snapshots__/Logs.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Logs-logContainer-1"
+  className="makeStyles-logContainer-1"
 >
   <div
-    className="log-line Logs-logLine-2"
+    className="log-line makeStyles-logLine-2"
     dangerouslySetInnerHTML={
       Object {
         "__html": "hello world",
@@ -16,7 +16,7 @@ exports[`renders correctly 1`] = `
     tabIndex={0}
   />
   <div
-    className="log-line Logs-logLine-2"
+    className="log-line makeStyles-logLine-2"
     dangerouslySetInnerHTML={
       Object {
         "__html": "I am a log",
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
     tabIndex={0}
   />
   <div
-    className="log-line Logs-logLine-2"
+    className="log-line makeStyles-logLine-2"
     dangerouslySetInnerHTML={
       Object {
         "__html": "I log things",
@@ -38,7 +38,7 @@ exports[`renders correctly 1`] = `
     tabIndex={0}
   />
   <div
-    className="log-line Logs-logLine-2"
+    className="log-line makeStyles-logLine-2"
     dangerouslySetInnerHTML={
       Object {
         "__html": "",

diff --git a/src/components/account/AccountInformation.tsx b/src/components/account/AccountInformation.tsx
@@ -15,19 +15,18 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import DirectionsRun from '@mui/icons-material/DirectionsRun';
 import Button from '@mui/material/Button';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import { makeStyles } from '@mui/styles';
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     authButton: {
       color: theme.palette.primary.contrastText,
       marginLeft: 10,
     },
-  });
+  };
+});
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   viewer: AccountInformation_viewer;
 }
 
@@ -43,7 +42,8 @@ function AccountInformation(props: Props) {
     setAnchorEl(null);
   };
 
-  let { viewer, classes } = props;
+  let { viewer } = props;
+  let classes = useStyles();
 
   if (!viewer) {
     return (
@@ -95,7 +95,7 @@ function AccountInformation(props: Props) {
   );
 }
 
-export default createFragmentContainer(withStyles(styles)(AccountInformation), {
+export default createFragmentContainer(AccountInformation, {
   viewer: graphql`
     fragment AccountInformation_viewer on User {
       avatarURL

diff --git a/src/components/account/OwnerRepositoryList.tsx b/src/components/account/OwnerRepositoryList.tsx
@@ -5,8 +5,7 @@ import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import Tooltip from '@mui/material/Tooltip';
 import LastDefaultBranchBuildRow from '../builds/LastDefaultBranchBuildRow';
-import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
+import { makeStyles } from '@mui/styles';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
@@ -15,22 +14,23 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import { createFragmentContainer } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import { OwnerRepositoryList_info } from './__generated__/OwnerRepositoryList_info.graphql';
-import createStyles from '@mui/styles/createStyles';
 
-let styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     toolbar: {
       paddingLeft: 14,
       background: theme.palette.action.disabledBackground,
     },
-  });
+  };
+});
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   info: OwnerRepositoryList_info;
 }
 
 let OwnerRepositoryList = (props: Props) => {
-  let { classes, info } = props;
+  let { info } = props;
+  let classes = useStyles();
 
   let organizationSettings = null;
 
@@ -67,7 +67,7 @@ let OwnerRepositoryList = (props: Props) => {
   );
 };
 
-export default createFragmentContainer(withStyles(styles)(OwnerRepositoryList), {
+export default createFragmentContainer(OwnerRepositoryList, {
   info: graphql`
     fragment OwnerRepositoryList_info on OwnerInfo {
       platform

diff --git a/src/components/account/UserProfile.tsx b/src/components/account/UserProfile.tsx
@@ -3,9 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { createFragmentContainer } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
 import Tooltip from '@mui/material/Tooltip';
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import { makeStyles } from '@mui/styles';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import { navigateHelper } from '../../utils/navigateHelper';
@@ -16,8 +14,8 @@ import Settings from '@mui/icons-material/Settings';
 import OwnerPlatformIcon from '../icons/OwnerPlatformIcon';
 import { List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 
-const styles = theme =>
-  createStyles({
+const useStyles = makeStyles(theme => {
+  return {
     title: {
       backgroundColor: theme.palette.action.disabledBackground,
     },
@@ -28,16 +26,18 @@ const styles = theme =>
       display: 'flex',
       alignItems: 'center',
     },
-  });
+  };
+});
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   user: UserProfile_user;
 }
 
 function UserProfile(props: Props) {
   const navigate = useNavigate();
 
-  let { user, classes } = props;
+  let { user } = props;
+  let classes = useStyles();
 
   useEffect(() => {
     // in case of only one owner (like only the user with no organizations)
@@ -85,7 +85,7 @@ function UserProfile(props: Props) {
   );
 }
 
-export default createFragmentContainer(withStyles(styles)(UserProfile), {
+export default createFragmentContainer(UserProfile, {
   user: graphql`
     fragment UserProfile_user on User {
       relatedOwners {

diff --git a/src/components/account/ViewerBuildList.tsx b/src/components/account/ViewerBuildList.tsx
@@ -4,9 +4,8 @@ import { graphql } from 'babel-plugin-relay/macro';
 import { useNavigate } from 'react-router-dom';
 import { Helmet as Head } from 'react-helmet';
 
-import { WithStyles } from '@mui/styles';
+import { makeStyles } from '@mui/styles';
 import { Box, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import withStyles from '@mui/styles/withStyles';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -28,39 +27,42 @@ import { ViewerBuildListRefetchQuery } from './__generated__/ViewerBuildListRefe
 import { ViewerBuildList_viewer$key } from './__generated__/ViewerBuildList_viewer.graphql';
 
 // todo: move custom values to mui theme adjustments
-const styles = theme => ({
-  paper: {
-    marginTop: theme.spacing(4),
-    padding: theme.spacing(1.0, 2.5, 1.5),
-    boxShadow: '0 16px 52px rgb(0 0 0 / 13%)',
-    borderRadius: 4 * theme.shape.borderRadius,
-  },
-  header: {
-    paddingLeft: 14,
-    justifyContent: 'space-between',
-  },
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-  cell: {
-    width: '100%',
-    maxWidth: '600px',
-  },
-  emptyBuilds: {
-    margin: theme.spacing(1.0),
-    marginLeft: 14,
-  },
-  padding: {
-    margin: theme.spacing(0.5),
-  },
+const useStyles = makeStyles(theme => {
+  return {
+    paper: {
+      marginTop: theme.spacing(4),
+      padding: theme.spacing(1.0, 2.5, 1.5),
+      boxShadow: '0 16px 52px rgb(0 0 0 / 13%)',
+      borderRadius: 4 * theme.shape.borderRadius,
+    },
+    header: {
+      paddingLeft: 14,
+      justifyContent: 'space-between',
+    },
+    chip: {
+      margin: theme.spacing(0.5),
+    },
+    cell: {
+      width: '100%',
+      maxWidth: '600px',
+    },
+    emptyBuilds: {
+      margin: theme.spacing(1.0),
+      marginLeft: 14,
+    },
+    padding: {
+      margin: theme.spacing(0.5),
+    },
+  };
 });
 
-interface Props extends WithStyles<typeof styles> {
+interface Props {
   viewer: ViewerBuildList_viewer$key;
 }
 
 function ViewerBuildList(props: Props) {
-  let { viewer, classes } = props;
+  let { viewer } = props;
+  let classes = useStyles();
   const pageWidth = usePageWidth();
   const isNewDesign = pageWidth > 900;
 
@@ -96,8 +98,6 @@ function ViewerBuildList(props: Props) {
   let navigate = useNavigate();
 
   function buildItem(build) {
-    let { classes } = props;
-
     return (
       <TableRow
         key={build.id}
@@ -194,4 +194,4 @@ function ViewerBuildList(props: Props) {
   );
 }
 
-export default withStyles(styles)(ViewerBuildList);
+export default ViewerBuildList;