MUI V5 Migration

.storybook/preview.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 import CyVerseAnnouncer from "components/announcer/CyVerseAnnouncer";
-import { ThemeProvider } from "@material-ui/core/styles";
+import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
 
 import theme from "../src/components/theme/default";
 
@@ -78,28 +78,30 @@ addDecorator((storyFn, context) => withConsole()(storyFn)(context));
 
 export const decorators = [
     (Story) => (
-        <ThemeProvider theme={theme}>
-            <ConfigProvider>
-                <MockConfig />
-                <UserProfileProvider>
-                    <QueryClientProvider client={queryClient}>
-                        <MockUserProfile />
-                        <BootstrapInfoProvider>
-                            <MockBootstrapInfo />
-
-                            <I18nProviderWrapper>
-                                <BagInfoProvider>
-                                    <MockBagInfo />
-                                    {Story()}
-                                </BagInfoProvider>
-                            </I18nProviderWrapper>
-
-                            <CyVerseAnnouncer />
-                        </BootstrapInfoProvider>
-                    </QueryClientProvider>
-                </UserProfileProvider>
-            </ConfigProvider>
-        </ThemeProvider>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={theme}>
+                <ConfigProvider>
+                    <MockConfig />
+                    <UserProfileProvider>
+                        <QueryClientProvider client={queryClient}>
+                            <MockUserProfile />
+                            <BootstrapInfoProvider>
+                                <MockBootstrapInfo />
+
+                                <I18nProviderWrapper>
+                                    <BagInfoProvider>
+                                        <MockBagInfo />
+                                        {Story()}
+                                    </BagInfoProvider>
+                                </I18nProviderWrapper>
+
+                                <CyVerseAnnouncer />
+                            </BootstrapInfoProvider>
+                        </QueryClientProvider>
+                    </UserProfileProvider>
+                </ConfigProvider>
+            </ThemeProvider>
+        </StyledEngineProvider>
     ),
 ];
 export const parameters = {

package.json

@@ -59,10 +59,12 @@
         "@codemirror/state": "^6.2.0",
         "@codemirror/view": "^6.7.2",
         "@date-fns/upgrade": "^1.0.3",
-        "@material-ui/core": "^4.12.1",
-        "@material-ui/icons": "^4.11.2",
-        "@material-ui/lab": "^4.0.0-alpha.60",
-        "@material-ui/styles": "^4.11.4",
+        "@emotion/react": "^11.11.1",
+        "@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",

src/__tests__/analyses.js

@@ -6,6 +6,9 @@ import { AnalysesTableViewTest } from "../../stories/analyses/TableView.stories"
 import { ConfigProvider } from "contexts/config";
 import { I18nProviderWrapper } from "__mocks__/i18nProviderWrapper";
 import { RQWrapper } from "../__mocks__/RQWrapper";
+
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
 beforeEach(() => {
     mockAxios.reset();
 });
@@ -19,7 +22,9 @@ test("renders Analyses Listing Table without crashing", () => {
         <RQWrapper>
             <I18nProviderWrapper>
                 <ConfigProvider>
-                    <AnalysesTableViewTest />
+                    <ThemeProvider theme={theme}>
+                        <AnalysesTableViewTest />
+                    </ThemeProvider>
                 </ConfigProvider>
             </I18nProviderWrapper>
         </RQWrapper>

src/__tests__/collections.js

@@ -7,6 +7,9 @@ import { UserProfileProvider } from "contexts/userProfile";
 import { I18nProviderWrapper } from "__mocks__/i18nProviderWrapper";
 import { RQWrapper } from "../__mocks__/RQWrapper";
 
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
+
 beforeEach(() => {
     mockAxios.reset();
 });
@@ -20,7 +23,9 @@ test("Collection view renders", () => {
         <RQWrapper>
             <UserProfileProvider>
                 <I18nProviderWrapper>
-                    <View />
+                    <ThemeProvider theme={theme}>
+                        <View />
+                    </ThemeProvider>
                 </I18nProviderWrapper>
             </UserProfileProvider>
         </RQWrapper>

src/__tests__/data.js

@@ -8,14 +8,19 @@ import { I18nProviderWrapper } from "__mocks__/i18nProviderWrapper";
 import { ConfigProvider } from "../contexts/config";
 import { RQWrapper } from "../__mocks__/RQWrapper";
 
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
+
 beforeAll(async () => {
     await preloadAll();
 });
 
 const TestProviderWrapper = ({ children }) => (
     <RQWrapper>
         <I18nProviderWrapper>
-            <ConfigProvider>{children}</ConfigProvider>
+            <ThemeProvider theme={theme}>
+                <ConfigProvider>{children}</ConfigProvider>
+            </ThemeProvider>
         </I18nProviderWrapper>
     </RQWrapper>
 );
@@ -24,7 +29,9 @@ test("Data Table View renders", () => {
     const component = renderer.create(
         <RQWrapper>
             <TestProviderWrapper>
-                <DataTableViewTest />
+                <ThemeProvider theme={theme}>
+                    <DataTableViewTest />
+                </ThemeProvider>
             </TestProviderWrapper>
         </RQWrapper>
     );

src/__tests__/globalSearch.js

@@ -5,14 +5,18 @@ import { I18nProviderWrapper } from "__mocks__/i18nProviderWrapper";
 import { UserProfileProvider } from "../contexts/userProfile";
 import { RQWrapper } from "../__mocks__/RQWrapper";
 import { ConfigProvider } from "contexts/config";
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
 
 test("Search field renders", () => {
     const component = renderer.create(
         <RQWrapper>
             <I18nProviderWrapper>
                 <UserProfileProvider>
                     <ConfigProvider>
-                        <SearchField />
+                        <ThemeProvider theme={theme}>
+                            <SearchField />
+                        </ThemeProvider>
                     </ConfigProvider>
                 </UserProfileProvider>
             </I18nProviderWrapper>

src/__tests__/rate.js

@@ -1,9 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { RatingTest } from "../../stories/base/Rate.stories";
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
 
 it("renders rate without crashing", () => {
     const div = document.createElement("div");
-    ReactDOM.render(<RatingTest />, div);
+    ReactDOM.render(
+        <ThemeProvider theme={theme}>
+            <RatingTest />
+        </ThemeProvider>,
+        div
+    );
     ReactDOM.unmountComponentAtNode(div);
 });

src/__tests__/subscriptions.js

@@ -19,6 +19,9 @@ import { EditAddonTest } from "../../stories/subscriptions/EditAddon.stories";
 import { mockAxios } from "../../stories/axiosMock";
 import { RQWrapper } from "../__mocks__/RQWrapper";
 
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
+
 beforeEach(() => {
     mockAxios.reset();
 });
@@ -31,7 +34,9 @@ const TestProviderWrapper = ({ children }) => (
     <RQWrapper>
         <I18nProviderWrapper>
             <ConfigProvider>
-                <UserProfileProvider>{children}</UserProfileProvider>
+                <ThemeProvider theme={theme}>
+                    <UserProfileProvider>{children}</UserProfileProvider>
+                </ThemeProvider>
             </ConfigProvider>
         </I18nProviderWrapper>
     </RQWrapper>

src/__tests__/teams.js

@@ -8,6 +8,8 @@ import { I18nProviderWrapper } from "__mocks__/i18nProviderWrapper";
 import { getAllPrivileges, getPrivilegeUpdates } from "components/teams/util";
 import Privilege from "components/models/Privilege";
 import { RQWrapper } from "../__mocks__/RQWrapper";
+import { ThemeProvider } from "@mui/material/styles";
+import theme from "components/theme/default";
 
 beforeEach(() => {
     mockAxios.reset();
@@ -25,7 +27,9 @@ test("Team view renders", () => {
         <RQWrapper>
             <UserProfileProvider>
                 <I18nProviderWrapper>
-                    <View />
+                    <ThemeProvider theme={theme}>
+                        <View />
+                    </ThemeProvider>
                 </I18nProviderWrapper>
             </UserProfileProvider>
         </RQWrapper>
@@ -38,7 +42,9 @@ test("Team search results renders", () => {
         <RQWrapper>
             <UserProfileProvider>
                 <I18nProviderWrapper>
-                    <SearchResults />
+                    <ThemeProvider theme={theme}>
+                        <SearchResults />
+                    </ThemeProvider>
                 </I18nProviderWrapper>
             </UserProfileProvider>
         </RQWrapper>

src/components/analyses/AnalysisCommentDialog.js

@@ -24,7 +24,7 @@ import {
     DialogContent,
     DialogTitle,
     InputAdornment,
-} from "@material-ui/core";
+} from "@mui/material";
 
 function AnalysisCommentDialog(props) {
     const {

src/components/analyses/AnalysisStatusIcon.js

@@ -7,7 +7,7 @@
 import React from "react";
 
 import analysisStatus from "components/models/analysisStatus";
-import { Avatar, useTheme } from "@material-ui/core";
+import { Avatar, useTheme } from "@mui/material";
 import palette from "components/theme/default/CyVersePalette";
 
 import {
@@ -16,7 +16,7 @@ import {
     Done as CompletedIcon,
     Cancel as CancelledIcon,
     Error as FailedIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 export default function AnalysisStatusIcon({ status }) {
     const theme = useTheme();

src/components/analyses/PendingTerminationDlg.js

@@ -8,7 +8,7 @@
 import React from "react";
 
 import buildID from "components/utils/DebugIDUtil";
-import { Button, Typography } from "@material-ui/core";
+import { Button, Typography } from "@mui/material";
 
 import DEDialog from "components/utils/DEDialog";
 import { useTranslation } from "i18n";

src/components/analyses/RenameAnalysisDialog.js

@@ -24,7 +24,7 @@ import {
     DialogContent,
     DialogTitle,
     InputAdornment,
-} from "@material-ui/core";
+} from "@mui/material";
 
 function RenameAnalysisDialog(props) {
     const {

src/components/analyses/ShareWithSupportDialog.js

@@ -41,7 +41,7 @@ import {
     RadioGroup,
     TextField,
     Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 
 const InfoGridValue = (props) => <Typography variant="body2" {...props} />;
 
@@ -98,7 +98,7 @@ function CompletedStateCondition({ outputCondition, handleConditionChange }) {
     const { t } = useTranslation("analyses");
 
     return (
-        <FormControl component="fieldset">
+        <FormControl variant="standard" component="fieldset">
             <FormLabel component="legend">
                 {t("statusHelpOutputConditionHeader")}
             </FormLabel>
@@ -335,6 +335,7 @@ function RunningStateSupport(props) {
                                         event.preventDefault();
                                         intercomShow();
                                     }}
+                                    underline="hover"
                                 />
                             ),
                         }}

src/components/analyses/TerminateAnalysisDialog.js

@@ -8,7 +8,7 @@
 import React from "react";
 
 import buildID from "components/utils/DebugIDUtil";
-import { Button, Typography } from "@material-ui/core";
+import { Button, Typography } from "@mui/material";
 
 import { groupBy } from "common/functions";
 import DEDialog from "components/utils/DEDialog";

src/components/analyses/ViceLogsViewer.js

@@ -27,10 +27,11 @@ import {
     FormGroup,
     Switch,
     Toolbar,
-    makeStyles,
-} from "@material-ui/core";
+} from "@mui/material";
 
-import RefreshIcon from "@material-ui/icons/Refresh";
+import makeStyles from "@mui/styles/makeStyles";
+
+import RefreshIcon from "@mui/icons-material/Refresh";
 
 const useStyles = makeStyles((theme) => ({
     toolbarItems: {

src/components/analyses/details/DetailsPanel.js

@@ -17,7 +17,7 @@ import { getHost } from "components/utils/getHost";
 import GridLabelValue from "components/utils/GridLabelValue";
 import { useConfig } from "contexts/config";
 
-import { Grid, Typography, useTheme } from "@material-ui/core";
+import { Grid, Typography, useTheme } from "@mui/material";
 
 const InfoGridValue = (props) => <Typography variant="body2" {...props} />;
 

src/components/analyses/details/Drawer.js

@@ -22,9 +22,9 @@ import {
 
 import buildID from "components/utils/DebugIDUtil";
 
-import { Drawer, Typography } from "@material-ui/core";
+import { Drawer, Typography } from "@mui/material";
 
-import { makeStyles } from "@material-ui/core/styles";
+import makeStyles from "@mui/styles/makeStyles";
 
 const TABS = {
     analysisInfo: "ANALYSIS INFORMATION",
@@ -37,10 +37,10 @@ const useStyles = makeStyles((theme) => ({
         [theme.breakpoints.up("lg")]: {
             maxWidth: "25%",
         },
-        [theme.breakpoints.down("lg")]: {
+        [theme.breakpoints.down("xl")]: {
             maxWidth: "50%",
         },
-        [theme.breakpoints.down("sm")]: {
+        [theme.breakpoints.down("md")]: {
             maxWidth: "90%",
         },
     },

src/components/analyses/details/InfoPanel.js

@@ -25,15 +25,15 @@ import {
     ListItem,
     ListItemText,
     Divider,
-    makeStyles,
     Typography,
-} from "@material-ui/core";
-import { ExpandMore as ExpandMoreIcon } from "@material-ui/icons";
+} from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
 
 const useStyles = makeStyles((theme) => ({
     heading: {
         color: theme.palette.info,
-        [theme.breakpoints.down("sm")]: {
+        [theme.breakpoints.down("md")]: {
             maxWidth: 150,
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",