chore(deps): upgrade to mui 5 (#4296)

package.json

@@ -50,9 +50,11 @@
     "styled-components": "^5.3.0"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.0",
+    "@mui/lab": "^6.0.0-beta.21",
+    "@mui/material": "^6.3.0",
     "ansi-styles": "^6.2.1",
     "commander": "^11.0.0",
     "cross-spawn": "^7.0.5",

ui/App.tsx

@@ -1,4 +1,7 @@
-import { MuiThemeProvider } from "@material-ui/core";
+import {
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+} from "@mui/material";
 import qs from "query-string";
 import * as React from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
@@ -231,11 +234,13 @@ const StylesProvider = ({ children }) => {
   const appliedTheme = theme(mode);
   return (
     <ThemeProvider theme={appliedTheme}>
-      <MuiThemeProvider theme={muiTheme(appliedTheme.colors, mode)}>
-        <Fonts />
-        <GlobalStyle />
-        {children}
-      </MuiThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <MuiThemeProvider theme={muiTheme(appliedTheme.colors, mode)}>
+          <Fonts />
+          <GlobalStyle />
+          {children}
+        </MuiThemeProvider>
+      </StyledEngineProvider>
     </ThemeProvider>
   );
 };

ui/components/AddKustomizationForm.tsx

@@ -1,4 +1,4 @@
-import { Divider, MenuItem } from "@material-ui/core";
+import { Divider, MenuItem } from "@mui/material";
 import _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";

ui/components/Alert.tsx

@@ -1,4 +1,4 @@
-import { AlertTitle, Alert as MaterialAlert } from "@material-ui/lab";
+import { AlertTitle, Alert as MaterialAlert } from "@mui/lab";
 import * as React from "react";
 import styled from "styled-components";
 import { ThemeTypes } from "../contexts/AppContext";

ui/components/AlertListErrors.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, Collapse } from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
+import Alert from "@mui/lab/Alert";
+import { Box, Button, Collapse } from "@mui/material";
 import { sortBy, uniqBy } from "lodash";
 import React, { FC, useEffect, useState } from "react";
 import styled from "styled-components";

ui/components/Breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import React from "react";
 import styled from "styled-components";
 import Flex from "./Flex";

ui/components/Button.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
-import { CircularProgress, PropTypes } from "@material-ui/core";
-import MaterialButton, { ButtonProps } from "@material-ui/core/Button/Button";
+import { CircularProgress } from "@mui/material";
+import MaterialButton, { type ButtonProps } from "@mui/material/Button";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
 
@@ -16,7 +16,7 @@ export interface Props extends ButtonProps {
 
 const defaultProps = {
   variant: "outlined" as "text" | "outlined" | "contained",
-  color: "primary" as PropTypes.Color,
+  color: "primary" as "inherit" | "primary" | "secondary",
 };
 
 /** Form Button */
@@ -35,7 +35,6 @@ function UnstyledButton({ loading, ...props }: Props) {
       disableElevation={true}
       {...defaultProps}
       {...props}
-      innerRef={props.innerRef}
     />
   );
 }

ui/components/ChipGroup.tsx

@@ -1,4 +1,4 @@
-import { Chip } from "@material-ui/core";
+import { Chip } from "@mui/material";
 import _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";

ui/components/Collapsible.tsx

@@ -1,4 +1,4 @@
-import { Collapse } from "@material-ui/core";
+import { Collapse } from "@mui/material";
 import React from "react";
 import styled from "styled-components";
 import Flex from "./Flex";

ui/components/DagGraph.tsx

@@ -1,4 +1,4 @@
-import { Slider } from "@material-ui/core";
+import { Slider } from "@mui/material";
 import * as d3d from "d3-dag";
 import _ from "lodash";
 import * as React from "react";

ui/components/DarkModeSwitch.tsx

@@ -1,4 +1,4 @@
-import { Switch } from "@material-ui/core";
+import { Switch } from "@mui/material";
 import * as React from "react";
 import styled from "styled-components";
 import { AppContext, ThemeTypes } from "../contexts/AppContext";

ui/components/DataTable/DataTable.tsx

@@ -200,6 +200,7 @@ function UnstyledDataTable({
                 onClick={() => setFilterDialogOpen(!filterDialogOpen)}
                 variant={filterDialogOpen ? "contained" : "text"}
                 color="inherit"
+                size="large"
               >
                 <Icon
                   type={IconType.FilterIcon}

ui/components/DataTable/SortableLabel.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@material-ui/core";
+import { Button } from "@mui/material";
 import * as React from "react";
 import styled from "styled-components";
 import Flex from "../Flex";

ui/components/DataTable/TableView/TableBody.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, TableBody, TableCell, TableRow } from "@material-ui/core";
+import { Checkbox, TableBody, TableCell, TableRow } from "@mui/material";
 import React from "react";
 import styled from "styled-components";
 import Flex from "../../Flex";

ui/components/DataTable/TableView/TableHeader.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, TableCell, TableHead, TableRow } from "@material-ui/core";
+import { Checkbox, TableCell, TableHead, TableRow } from "@mui/material";
 import React from "react";
 import SortableLabelView from "./SortableLabelView";
 import { SortField, TableHeaderProps } from "./types";

ui/components/DataTable/TableView/TableView.tsx

@@ -1,4 +1,4 @@
-import { Table, TableContainer } from "@material-ui/core";
+import { Table, TableContainer } from "@mui/material";
 import React from "react";
 import TableBodyView from "./TableBody";
 import TableHeader from "./TableHeader";