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

Updated next.js pages with SSR emotion cache and tss-react updates, and removed the @mui/styles, clsx, and classnames packages. Also found some components the codemod missed, maybe because makeStyles was not defined where useStyles was called.
cyverse-de · Mar 19, 2024 · 8ef5bae · 8ef5bae
1 parent 42762f0
commit 8ef5bae
Show file tree

Hide file tree

Showing 20 changed files with 355 additions and 462 deletions.
diff --git a/guidelines.md b/guidelines.md
@@ -154,16 +154,16 @@ To help with this, there's a `build` helper function in the `ui-lib` repo [here]
 
 If your component(s) require a lot of CSS, create a separate `styles` file to keep things minimal. Example file [here](/src/data/listing/styles.js).
 
-For utilizing styles, use `makeStyles` from `@material-ui/core` as a hook. Here's a small example of using `makeStyles`:
+For utilizing styles, use `makeStyles` from `tss-react/mui"` as a hook. Here's a small example of using `makeStyles`:
 
 ```
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "tss-react/mui"";
 import myStylesFile from "./styles";
 
-const useStyles = makeStyles(myStylesFile);
+const useStyles = makeStyles()(myStylesFile);
 
 function myComponent(props) {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <div className={classes.myDivCSS}/>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,11 +60,11 @@
         "@codemirror/view": "^6.7.2",
         "@date-fns/upgrade": "^1.0.3",
         "@emotion/react": "^11.11.1",
+        "@emotion/server": "^11.11.0",
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.14.9",
         "@mui/lab": "^5.0.0-alpha.152",
         "@mui/material": "^5.14.9",
-        "@mui/styles": "^5.14.9",
         "@next/bundle-analyzer": "^12.3.4",
         "@opentelemetry/api": "^1.0.4",
         "@opentelemetry/exporter-jaeger": "^1.0.1",
@@ -81,8 +81,6 @@
         "camelcase": "^5.3.1",
         "chart.js": "^3.6.0",
         "chartjs-plugin-datalabels": "^2.0.0",
-        "classnames": "^2.2.6",
-        "clsx": "^1.1.0",
         "codemirror": "^6.0.1",
         "compression": "^1.7.4",
         "config": "^3.3.1",

diff --git a/src/components/dashboard/DashboardSection.js b/src/components/dashboard/DashboardSection.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import clsx from "clsx";
 
 import { Typography, Collapse, Button, Divider } from "@mui/material";
 
@@ -29,7 +28,7 @@ const DashboardSection = ({
     setTerminateAnalysis,
     computeLimitExceeded,
 }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const [expanded, setExpanded] = useState(false);
 
     const isNewsSection = section === constants.SECTION_NEWS;
@@ -64,7 +63,7 @@ const DashboardSection = ({
 
     return (
         <div
-            className={clsx(
+            className={cx(
                 classes.section,
                 isNewsSection && classes.sectionNews,
                 isEventsSection && classes.sectionEvents

diff --git a/src/components/dashboard/dashboardItem/ItemBase.js b/src/components/dashboard/dashboardItem/ItemBase.js
@@ -65,7 +65,7 @@ const DashboardLink = ({ target, kind, children }) => {
 const DashboardItem = ({ item }) => {
     const theme = useTheme();
     const color = getSectionColor(item.section, theme);
-    const classes = useStyles({
+    const { classes } = useStyles({
         width: item.width,
         height: item.height,
         color,
@@ -157,7 +157,10 @@ const DashboardItem = ({ item }) => {
 };
 
 export const DashboardFeedItem = ({ item }) => {
-    const classes = useStyles({ width: item.width, height: item.height });
+    const { classes, cx } = useStyles({
+        width: item.width,
+        height: item.height,
+    });
     const { t } = useTranslation(["dashboard", "apps"]);
 
     const [origination, date] = item.getOrigination(t);
@@ -166,7 +169,7 @@ export const DashboardFeedItem = ({ item }) => {
 
     return (
         <div
-            className={clsx(
+            className={cx(
                 item.section === constants.SECTION_NEWS && classes.newsItem,
                 item.section === constants.SECTION_EVENTS && classes.eventsItem
             )}
@@ -193,7 +196,7 @@ export const DashboardFeedItem = ({ item }) => {
 };
 
 export const DashboardVideoItem = ({ item }) => {
-    const classes = useStyles(item);
+    const { classes } = useStyles(item);
 
     return (
         <div

diff --git a/src/components/dashboard/dashboardItem/UserSurvey.js b/src/components/dashboard/dashboardItem/UserSurvey.js
@@ -24,7 +24,7 @@ function UserSurvey(props) {
     const theme = useTheme();
 
     const baseId = buildID(parentId, ids.LEGACY_CARD);
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const { t } = useTranslation("dashboard");
 

diff --git a/src/components/dashboard/dashboardItem/styles.js b/src/components/dashboard/dashboardItem/styles.js
@@ -1,20 +1,20 @@
 import { makeStyles } from "tss-react/mui";
 
-export default makeStyles()((theme) => ({
+export default makeStyles()((theme, props) => ({
     tripleDotMenu: {
         marginLeft: "auto",
     },
     avatar: {
-        background: (props) => props.color,
+        background: props?.color,
         height: theme.spacing(3),
         width: theme.spacing(3),
     },
     cardHeaderDefault: {
         background: theme.palette.white,
     },
     avatarIcon: {
-        color: (props) => theme.palette.white,
-        backgroundColor: (props) => props.color,
+        color: theme.palette.white,
+        backgroundColor: props?.color,
         height: theme.spacing(2),
         width: theme.spacing(2),
     },
@@ -29,8 +29,8 @@ export default makeStyles()((theme) => ({
         flexDirection: "column",
         marginTop: theme.spacing(2),
 
-        width: (props) => props.width,
-        height: (props) => props.height,
+        width: props?.width,
+        height: props?.height,
 
         [theme.breakpoints.up("xs")]: {
             marginRight: theme.spacing(0),
@@ -45,8 +45,8 @@ export default makeStyles()((theme) => ({
         },
     },
     dashboardVideo: {
-        width: (props) => props.width,
-        height: (props) => props.height,
+        width: props?.width,
+        height: props?.height,
         float: "none",
         clear: "both",
         marginRight: theme.spacing(2),

diff --git a/src/components/dashboard/index.js b/src/components/dashboard/index.js
@@ -7,7 +7,6 @@
  */
 import React, { useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import clsx from "clsx";
 
 import { useQueryClient, useQuery, useMutation } from "react-query";
 import { useTranslation } from "i18n";
@@ -69,7 +68,7 @@ const PendingTerminationDlg = dynamic(() =>
 );
 
 const DashboardSkeleton = () => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const [userProfile] = useUserProfile();
 
     let skellyTypes = [classes.sectionNews, classes.sectionEvents, "", ""];
@@ -87,7 +86,7 @@ const DashboardSkeleton = () => {
     }
 
     const skellies = skellyTypes.map((extraClass, index) => (
-        <div className={clsx(classes.section, extraClass)} key={index}>
+        <div className={cx(classes.section, extraClass)} key={index}>
             <Skeleton
                 variant="rectangular"
                 animation="wave"
@@ -110,7 +109,7 @@ const DashboardSkeleton = () => {
 
 const Dashboard = (props) => {
     const { showErrorAnnouncer } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const { t } = useTranslation(["dashboard", "common"]);
     const { t: i18nPref } = useTranslation("preferences");
     const { t: i18nIntro } = useTranslation("intro");

diff --git a/src/components/layout/DrawerItem.js b/src/components/layout/DrawerItem.js
@@ -22,7 +22,7 @@ const DrawerItem = (props) => {
         activeView,
         thisView,
         toggleDrawer,
-        clsxBase,
+        cxBase,
         open,
         onClick,
         nested = false,
@@ -47,9 +47,7 @@ const DrawerItem = (props) => {
                     <ListItemIcon>
                         <Icon
                             className={
-                                clsxBase
-                                    ? cx(clsxBase, classes.icon)
-                                    : classes.icon
+                                cxBase ? cx(cxBase, classes.icon) : classes.icon
                             }
                             style={{ fontSize: !nested ? "2.1875rem" : null }}
                             fontSize={!nested ? "large" : "medium"}

diff --git a/src/components/layout/DrawerItems.js b/src/components/layout/DrawerItems.js
@@ -110,7 +110,7 @@ function DrawerItems(props) {
                 id={ids.DASHBOARD_MI}
                 icon={HomeIcon}
                 thisView={NavigationConstants.DASHBOARD}
-                clsxBase={"dashboard-intro"}
+                cxBase={"dashboard-intro"}
                 activeView={activeView}
                 toggleDrawer={toggleDrawer}
                 open={open}
@@ -120,7 +120,7 @@ function DrawerItems(props) {
                 id={ids.DATA_MI}
                 icon={WrappedDataIcon(dataUsagePercentage, t, theme)}
                 thisView={NavigationConstants.DATA}
-                clsxBase={"data-intro"}
+                cxBase={"data-intro"}
                 activeView={activeView}
                 toggleDrawer={toggleDrawer}
                 open={open}
@@ -129,7 +129,7 @@ function DrawerItems(props) {
                 title={t("apps")}
                 id={ids.APPS_MI}
                 thisView={NavigationConstants.APPS}
-                clsxBase={"apps-intro"}
+                cxBase={"apps-intro"}
                 activeView={activeView}
                 toggleDrawer={toggleDrawer}
                 open={open}
@@ -164,7 +164,7 @@ function DrawerItems(props) {
                 id={ids.ANALYSES_MI}
                 icon={WrappedAnalysesIcon(analysesStats)}
                 thisView={NavigationConstants.ANALYSES}
-                clsxBase={"analyses-intro"}
+                cxBase={"analyses-intro"}
                 activeView={activeView}
                 toggleDrawer={toggleDrawer}
                 open={open}
@@ -233,7 +233,7 @@ function DrawerItems(props) {
                     id={ids.SEARCH_MI}
                     icon={SearchIcon}
                     thisView={NavigationConstants.SEARCH}
-                    clsxBase={"search-intro"}
+                    cxBase={"search-intro"}
                     activeView={activeView}
                     toggleDrawer={toggleDrawer}
                     open={open}
@@ -246,14 +246,14 @@ function DrawerItems(props) {
                     id={ids.SETTINGS_MI}
                     icon={SettingsIcon}
                     thisView={NavigationConstants.SETTINGS}
-                    clsxBase={"preferences-intro"}
+                    cxBase={"preferences-intro"}
                     activeView={activeView}
                     toggleDrawer={toggleDrawer}
                     open={open}
                 />
             )}
             <DrawerItem
-                clsxBase={"help-intro"}
+                cxBase={"help-intro"}
                 activeView={activeView}
                 thisView={NavigationConstants.HELP}
                 toggleDrawer={toggleDrawer}

diff --git a/src/components/notifications/NotificationsTab.js b/src/components/notifications/NotificationsTab.js
@@ -27,47 +27,47 @@ import { getFormattedDistance } from "components/utils/DateFormatter";
 
 const useStyles = makeStyles()(styles);
 
-const { classes: NotificationsListingButton, cx } = React.forwardRef(
-    (props, ref) => {
-        const { isMobile, handleClose, href, onClick } = props;
-        const { t } = useTranslation("common");
-        const buttonId = buildID(
-            ids.BASE_DEBUG_ID,
-            ids.NOTIFICATIONS_MENU,
-            ids.VIEW_ALL_NOTIFICATIONS
-        );
+const NotificationsListingButton = React.forwardRef((props, ref) => {
+    const { isMobile, handleClose, href, onClick } = props;
+    const { t } = useTranslation("common");
+    const buttonId = buildID(
+        ids.BASE_DEBUG_ID,
+        ids.NOTIFICATIONS_MENU,
+        ids.VIEW_ALL_NOTIFICATIONS
+    );
+
+    const { classes } = useStyles();
 
-        return isMobile ? (
-            <IconButton
-                className={useStyles().viewAll}
-                id={buttonId}
-                ref={ref}
-                href={href}
-                onClick={(event) => {
-                    onClick(event);
-                    handleClose();
-                }}
-                size="large"
-            >
-                <OpenInNewIcon size="small" />
-            </IconButton>
-        ) : (
-            <Button
-                id={buttonId}
-                color="primary"
-                startIcon={<OpenInNewIcon size="small" />}
-                ref={ref}
-                href={href}
-                onClick={(event) => {
-                    onClick(event);
-                    handleClose();
-                }}
-            >
-                {t("viewAllNotifications")}
-            </Button>
-        );
-    }
-);
+    return isMobile ? (
+        <IconButton
+            className={classes.viewAll}
+            id={buttonId}
+            ref={ref}
+            href={href}
+            onClick={(event) => {
+                onClick(event);
+                handleClose();
+            }}
+            size="large"
+        >
+            <OpenInNewIcon size="small" />
+        </IconButton>
+    ) : (
+        <Button
+            id={buttonId}
+            color="primary"
+            startIcon={<OpenInNewIcon size="small" />}
+            ref={ref}
+            href={href}
+            onClick={(event) => {
+                onClick(event);
+                handleClose();
+            }}
+        >
+            {t("viewAllNotifications")}
+        </Button>
+    );
+});
 
 function NotificationsListingLink(props) {
     const href = `/${NavigationConstants.NOTIFICATIONS}`;
@@ -88,7 +88,7 @@ function NotificationsTab(props) {
         errorObject,
     } = props;
 
-    const { classes } = useStyles();
+    const { classes, cx } = useStyles();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
     const { t } = useTranslation("common");