CORE-1985 Initial mui codemod v5.0.0/jss-to-tss-react

Also ran prettier to format codemod results.
cyverse-de · Mar 18, 2024 · 42762f0 · 42762f0
1 parent 73bf11d
commit 42762f0
Show file tree

Hide file tree

Showing 124 changed files with 484 additions and 445 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -115,6 +115,7 @@
         "sanitize-html": "^2.3.2",
         "showdown": "^1.9.1",
         "sockette": "^2.0.6",
+        "tss-react": "^4.9.4",
         "unleash-client": "^3.8.1",
         "uuid": "^3.4.0",
         "winston": "^3.2.1",

diff --git a/src/components/analyses/ViceLogsViewer.js b/src/components/analyses/ViceLogsViewer.js
@@ -29,19 +29,19 @@ import {
     Toolbar,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import RefreshIcon from "@mui/icons-material/Refresh";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     toolbarItems: {
         margin: theme.spacing(0.5),
     },
 }));
 
 function ViceLogsViewer(props) {
     const { open, getSelectedAnalyses, onClose } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const { t } = useTranslation("analyses");
     // Get QueryClient from the context
     const queryClient = useQueryClient();

diff --git a/src/components/analyses/details/Drawer.js b/src/components/analyses/details/Drawer.js
@@ -24,15 +24,15 @@ import buildID from "components/utils/DebugIDUtil";
 
 import { Drawer, Typography } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 const TABS = {
     analysisInfo: "ANALYSIS INFORMATION",
     analysisHistory: "ANALYSIS STATUS HISTORY",
     analysisParams: "ANALYSIS PARAMETERS",
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     drawerPaper: {
         [theme.breakpoints.up("xl")]: {
             maxWidth: "25%",
@@ -52,7 +52,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function DetailsDrawer(props) {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const { t } = useTranslation("analyses");
     const { selectedAnalysis, open, onClose, baseId } = props;
     const [selectedTab, setSelectedTab] = useState(TABS.analysisInfo);

diff --git a/src/components/analyses/details/InfoPanel.js b/src/components/analyses/details/InfoPanel.js
@@ -27,10 +27,10 @@ import {
     Divider,
     Typography,
 } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     heading: {
         color: theme.palette.info,
         [theme.breakpoints.down("md")]: {
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
 
 function Updates(props) {
     const { updates, baseId } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const sortedUpdates = [...updates].reverse();
     return (
         <List className={classes.root} id={baseId}>
@@ -79,7 +79,7 @@ function Updates(props) {
 function Step(props) {
     const { step_number, step_type, status, updates } = props.step;
     const { baseId } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (
         <Accordion id={baseId}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>

diff --git a/src/components/analyses/listing/TableView.js b/src/components/analyses/listing/TableView.js
@@ -40,18 +40,18 @@ import {
     useTheme,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import styles from "components/utils/runningAnimation";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     name: {
         maxWidth: "12rem",
         overflowWrap: "break-word",
     },
 }));
 
-const useRunningAnalysesStyles = makeStyles(styles);
+const useRunningAnalysesStyles = makeStyles()(styles);
 
 function AnalysisName(props) {
     const analysis = props.analysis;
@@ -179,8 +179,8 @@ function TableView(props) {
     } = props;
 
     const theme = useTheme();
-    const classes = useStyles();
-    const running = useRunningAnalysesStyles();
+    const { classes } = useStyles();
+    const { classes: running } = useRunningAnalysesStyles();
     const { t } = useTranslation("analyses");
 
     const isSmall = useMediaQuery(theme.breakpoints.down("md"));

diff --git a/src/components/analyses/toolbar/Toolbar.js b/src/components/analyses/toolbar/Toolbar.js
@@ -31,7 +31,7 @@ import {
     useTheme,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import Autocomplete from "@mui/material/Autocomplete";
 
@@ -47,7 +47,7 @@ import Sharing from "components/sharing";
 import { formatSharedAnalyses } from "components/sharing/util";
 import useBreakpoints from "components/layout/useBreakpoints";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     menuButton: {
         color: theme.palette.info.contrastText,
     },
@@ -156,7 +156,7 @@ function AnalysesToolbar(props) {
         onRefreshSelected,
         setVICELogsDlgOpen,
     } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const theme = useTheme();
     const { t } = useTranslation("analyses");
     const [config] = useConfig();

diff --git a/src/components/apps/AppStepDisplay.js b/src/components/apps/AppStepDisplay.js
@@ -16,11 +16,11 @@ import {
     CardHeader,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import { Skeleton } from "@mui/material";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     cardContent: {
         overflow: "auto",
         [theme.breakpoints.down("sm")]: {
@@ -54,7 +54,7 @@ const AppStepDisplay = (props) => {
     } = props;
 
     const { t } = useTranslation("launch");
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     return (
         <Card style={{ marginBottom: bottomOffset && `${bottomOffset}px` }}>

diff --git a/src/components/apps/admin/referenceGenomes/Edit.js b/src/components/apps/admin/referenceGenomes/Edit.js
@@ -19,7 +19,7 @@ import FormSwitch from "components/forms/FormSwitch";
 import buildID from "components/utils/DebugIDUtil";
 
 import { Button, Grid, Typography } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import { Field, Form, Formik } from "formik";
 
 const styles = (theme) => ({
@@ -41,7 +41,7 @@ const styles = (theme) => ({
     },
 });
 
-const useStyles = makeStyles(styles);
+const useStyles = makeStyles()(styles);
 
 function Edit(props) {
     const {
@@ -51,7 +51,7 @@ function Edit(props) {
         createRefGenome,
         saveRefGenome,
     } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const { t } = useTranslation("referenceGenomes");
 
     const handleSubmit = (values) => {

diff --git a/src/components/apps/admin/referenceGenomes/GlobalFilter.js b/src/components/apps/admin/referenceGenomes/GlobalFilter.js
@@ -13,10 +13,10 @@ import ids from "./ids";
 import buildID from "components/utils/DebugIDUtil";
 
 import InputBase from "@mui/material/InputBase";
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import SearchIcon from "@mui/icons-material/Search";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     search: {
         position: "relative",
         borderRadius: theme.shape.borderRadius,
@@ -55,7 +55,7 @@ const GlobalFilter = ({
     globalFilter,
     setGlobalFilter,
 }) => {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const { t } = useTranslation("referenceGenomes");
     const count = preGlobalFilteredRows.length;
 

diff --git a/src/components/apps/admin/referenceGenomes/Toolbar.js b/src/components/apps/admin/referenceGenomes/Toolbar.js
@@ -13,12 +13,12 @@ import GlobalFilter from "./GlobalFilter";
 
 import buildID from "components/utils/DebugIDUtil";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import Toolbar from "@mui/material/Toolbar";
 import { Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 
-const useToolbarStyles = makeStyles((theme) => ({
+const useToolbarStyles = makeStyles()((theme) => ({
     root: {
         paddingLeft: theme.spacing(2),
         paddingRight: theme.spacing(1),
@@ -36,7 +36,7 @@ const useToolbarStyles = makeStyles((theme) => ({
 const TableToolbar = (props) => {
     const { baseId } = props;
     const { t } = useTranslation("referenceGenomes");
-    const classes = useToolbarStyles();
+    const { classes } = useToolbarStyles();
     const {
         preGlobalFilteredRows,
         setGlobalFilter,

diff --git a/src/components/apps/details/Drawer.js b/src/components/apps/details/Drawer.js
@@ -47,7 +47,7 @@ import {
     Typography,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 import Close from "@mui/icons-material/Close";
 import LinkIcon from "@mui/icons-material/Link";
 
@@ -56,7 +56,7 @@ const TABS = {
     toolInfo: "TOOL(S) USED BY THIS APP",
     docs: "APP DOCS",
 };
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
     drawerPaper: {
         [theme.breakpoints.up("xl")]: {
             maxWidth: "25%",
@@ -175,7 +175,7 @@ function DetailsSubHeader({
 }
 
 function DetailsDrawer(props) {
-    const classes = useStyles();
+    const { classes } = useStyles();
     const {
         systemId,
         appId,

diff --git a/src/components/apps/editor/CmdLineOrderForm.js b/src/components/apps/editor/CmdLineOrderForm.js
@@ -24,11 +24,11 @@ import {
     TextField,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
 
-const useStyles = makeStyles(styles);
+const useStyles = makeStyles()(styles);
 
 const hasCmdLineOrder = (param) => {
     switch (param.type) {
@@ -109,7 +109,7 @@ function CmdLinePreview(props) {
     const { baseId, toolName, params } = props;
 
     const { t } = useTranslation("app_editor");
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     return (
         <Card className={classes.paramCard}>
@@ -138,7 +138,7 @@ function ParamCmdLineOrderForm(props) {
     const { baseId, fieldName, cmdLinePreview, onMoveUp, onMoveDown } = props;
 
     const { t } = useTranslation("common");
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const paramBaseId = buildID(baseId, fieldName);
 

diff --git a/src/components/apps/editor/ParamGroups.js b/src/components/apps/editor/ParamGroups.js
@@ -31,11 +31,11 @@ import {
     Typography,
 } from "@mui/material";
 
-import makeStyles from "@mui/styles/makeStyles";
+import { makeStyles } from "tss-react/mui";
 
 import { Add, ExpandMore } from "@mui/icons-material";
 
-const useStyles = makeStyles(styles);
+const useStyles = makeStyles()(styles);
 
 function ParamGroupForm(props) {
     const {
@@ -62,7 +62,7 @@ function ParamGroupForm(props) {
         }
     }, [fieldName, groupEl, scrollToField, setScrollToField]);
 
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const groupBaseId = buildID(baseId, fieldName);