coder · BrunoQuaresma · May 10, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -86,6 +86,9 @@ rules:
     - argsIgnorePattern: "^_"
       varsIgnorePattern: "^_"
       ignoreRestSiblings: true
+  "@typescript-eslint/no-empty-interface":
+    - error
+    - allowSingleExtends: true
   "brace-style": "off"
   "curly": ["error", "all"]
   "eslint-comments/require-description": "error"
@@ -113,19 +116,15 @@ rules:
   no-restricted-imports:
     - error
     - paths:
-        - name: "@material-ui/core"
-          message:
-            "Use path imports to avoid pulling in unused modules. See:
-            https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/icons"
+        - name: "@mui/material"
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/styles"
+        - name: "@mui/icons-material"
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/core/Avatar"
+        - name: "@mui/material/Avatar"
           message:
             "You should use the Avatar component provided on
             components/Avatar/Avatar"

diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -1,5 +1,5 @@
-import CssBaseline from "@material-ui/core/CssBaseline"
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import CssBaseline from "@mui/material/CssBaseline"
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
 import { createMemoryHistory } from "history"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark } from "../src/theme"
@@ -10,10 +10,12 @@ const history = createMemoryHistory()
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={dark}>
-      <CssBaseline />
-      <Story />
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={dark}>
+        <CssBaseline />
+        <Story />
+      </ThemeProvider>
+    </StyledEngineProvider>
   ),
   (Story) => {
     return (

diff --git a/site/mui.d.ts b/site/mui.d.ts
@@ -0,0 +1,25 @@
+import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles"
+
+declare module "@mui/styles/defaultTheme" {
+  interface DefaultTheme extends Theme {}
+}
+
+declare module "@mui/material/styles" {
+  interface TypeBackground {
+    paperLight: string
+  }
+
+  interface Palette {
+    neutral: PaletteColor
+  }
+
+  interface PaletteOptions {
+    neutral?: PaletteColorOptions
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    neutral: true
+  }
+}
diff --git a/site/package.json b/site/package.json
@@ -30,12 +30,15 @@
   "dependencies": {
     "@emoji-mart/data": "1.0.5",
     "@emoji-mart/react": "1.0.1",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@fontsource/ibm-plex-mono": "4.5.10",
     "@fontsource/inter": "4.5.11",
-    "@material-ui/core": "4.12.1",
-    "@material-ui/icons": "4.5.1",
-    "@material-ui/lab": "4.0.0-alpha.42",
     "@monaco-editor/react": "4.5.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
+    "@mui/styles": "^5.12.3",
     "@tanstack/react-query": "4.22.4",
     "@testing-library/react-hooks": "8.0.1",
     "@types/color-convert": "2.0.0",
@@ -72,7 +75,7 @@
     "react-dom": "18.2.0",
     "react-headless-tabs": "6.0.3",
     "react-helmet-async": "1.3.0",
-    "react-i18next": "12.1.1",
+    "react-i18next": "12.2.2",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.4.1",
     "react-syntax-highlighter": "15.5.0",

diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -1,5 +1,4 @@
-import CssBaseline from "@material-ui/core/CssBaseline"
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import CssBaseline from "@mui/material/CssBaseline"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AuthProvider } from "components/AuthProvider/AuthProvider"
 import { FC, PropsWithChildren } from "react"
@@ -9,6 +8,7 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import { dark } from "./theme"
 import "./theme/globalFonts"
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -24,17 +24,19 @@ const queryClient = new QueryClient({
 export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <HelmetProvider>
-      <ThemeProvider theme={dark}>
-        <CssBaseline />
-        <ErrorBoundary>
-          <QueryClientProvider client={queryClient}>
-            <AuthProvider>
-              {children}
-              <GlobalSnackbar />
-            </AuthProvider>
-          </QueryClientProvider>
-        </ErrorBoundary>
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={dark}>
+          <CssBaseline enableColorScheme />
+          <ErrorBoundary>
+            <QueryClientProvider client={queryClient}>
+              <AuthProvider>
+                {children}
+                <GlobalSnackbar />
+              </AuthProvider>
+            </QueryClientProvider>
+          </ErrorBoundary>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </HelmetProvider>
   )
 }

diff --git a/site/src/components/AlertBanner/AlertBanner.stories.tsx b/site/src/components/AlertBanner/AlertBanner.stories.tsx
@@ -1,9 +1,9 @@
 import { Story } from "@storybook/react"
 import { AlertBanner } from "./AlertBanner"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
 import { mockApiError } from "testHelpers/entities"
 import { AlertBannerProps } from "./alertTypes"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 
 export default {
   title: "components/AlertBanner",

diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
@@ -1,14 +1,15 @@
 import { useState, FC, Children } from "react"
-import Collapse from "@material-ui/core/Collapse"
+import Collapse from "@mui/material/Collapse"
 import { Stack } from "components/Stack/Stack"
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import { getErrorDetail, getErrorMessage } from "api/errors"
 import { Expander } from "components/Expander/Expander"
 import { Severity, AlertBannerProps } from "./alertTypes"
 import { severityConstants } from "./severityConstants"
 import { AlertBannerCtas } from "./AlertBannerCtas"
+import { Theme } from "@mui/material/styles"
 
 /**
  * @param children: the children to be displayed in the alert
@@ -96,6 +97,7 @@ interface StyleProps {
 
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   alertContainer: (props) => ({
+    ...theme.typography.body2,
     borderColor: severityConstants[props.severity].color,
     border: `1px solid ${colors.orange[7]}`,
     borderRadius: theme.shape.borderRadius,
@@ -104,13 +106,13 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     textAlign: "left",
 
     "& > span": {
-      paddingTop: `${theme.spacing(0.25)}px`,
+      paddingTop: theme.spacing(0.25),
     },
 
     // targeting the alert icon rather than the expander icon
     "& svg:nth-child(2)": {
-      marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit",
-      marginRight: `${theme.spacing(1)}px`,
+      marginTop: props.hasDetail ? theme.spacing(1) : "inherit",
+      marginRight: theme.spacing(1),
     },
   }),
 

diff --git a/site/src/components/AlertBanner/AlertBannerCtas.tsx b/site/src/components/AlertBanner/AlertBannerCtas.tsx
@@ -1,8 +1,8 @@
 import { FC } from "react"
 import { AlertBannerProps } from "./alertTypes"
 import { Stack } from "components/Stack/Stack"
-import Button from "@material-ui/core/Button"
-import RefreshIcon from "@material-ui/icons/Refresh"
+import Button from "@mui/material/Button"
+import RefreshIcon from "@mui/icons-material/Refresh"
 import { useTranslation } from "react-i18next"
 
 type AlertBannerCtasProps = Pick<
@@ -29,20 +29,15 @@ export const AlertBannerCtas: FC<AlertBannerCtasProps> = ({
       {/* retry CTA */}
       {retry && (
         <div>
-          <Button
-            size="small"
-            onClick={retry}
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-          >
+          <Button size="small" onClick={retry} startIcon={<RefreshIcon />}>
             {t("ctas.retry")}
           </Button>
         </div>
       )}
 
       {/* close CTA */}
       {dismissible && (
-        <Button size="small" onClick={() => setOpen(false)} variant="outlined">
+        <Button size="small" onClick={() => setOpen(false)}>
           {t("ctas.dismissCta")}
         </Button>
       )}

diff --git a/site/src/components/AlertBanner/alertTypes.ts b/site/src/components/AlertBanner/alertTypes.ts
@@ -5,7 +5,7 @@ export type Severity = "warning" | "error" | "info"
 
 export interface AlertBannerProps {
   severity: Severity
-  text?: string
+  text?: JSX.Element | string
   error?: ApiError | Error | unknown
   actions?: ReactElement[]
   dismissible?: boolean

diff --git a/site/src/components/AlertBanner/severityConstants.tsx b/site/src/components/AlertBanner/severityConstants.tsx
@@ -1,6 +1,6 @@
-import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
-import ErrorOutlineOutlinedIcon from "@material-ui/icons/ErrorOutlineOutlined"
-import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined"
+import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined"
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"
 import { colors } from "theme/colors"
 import { Severity } from "./alertTypes"
 import { ReactElement } from "react"

diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -1,8 +1,8 @@
-import CircularProgress from "@material-ui/core/CircularProgress"
-import Link from "@material-ui/core/Link"
-import { makeStyles } from "@material-ui/core/styles"
-import Tooltip from "@material-ui/core/Tooltip"
-import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
+import CircularProgress from "@mui/material/CircularProgress"
+import Link from "@mui/material/Link"
+import { makeStyles } from "@mui/styles"
+import Tooltip from "@mui/material/Tooltip"
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"
 import { PrimaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"

diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import * as TypesGen from "api/typesGenerated"

diff --git a/site/src/components/AppLink/BaseIcon.tsx b/site/src/components/AppLink/BaseIcon.tsx
@@ -1,6 +1,6 @@
 import { WorkspaceApp } from "api/typesGenerated"
 import { FC } from "react"
-import ComputerIcon from "@material-ui/icons/Computer"
+import ComputerIcon from "@mui/icons-material/Computer"
 
 export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
   return app.icon ? (

diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx
@@ -1,8 +1,8 @@
-import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
-import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
-import LaunchOutlinedIcon from "@material-ui/icons/LaunchOutlined"
+import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined"
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined"
+import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined"
 import * as TypesGen from "../../api/typesGenerated"
-import Tooltip from "@material-ui/core/Tooltip"
+import Tooltip from "@mui/material/Tooltip"
 import { useTranslation } from "react-i18next"
 
 export interface ShareIconProps {

diff --git a/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react"
 import { AuditLog } from "api/typesGenerated"
 import { Link as RouterLink } from "react-router-dom"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 import { Trans, useTranslation } from "react-i18next"
 import { BuildAuditDescription } from "./BuildAuditDescription"
 

diff --git a/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx
@@ -2,7 +2,7 @@ import { Trans, useTranslation } from "react-i18next"
 import { AuditLog } from "api/typesGenerated"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 
 export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({
   auditLog,

diff --git a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { AuditLog } from "api/typesGenerated"
 import { colors } from "theme/colors"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"

diff --git a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx
@@ -1,9 +1,9 @@
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import Table from "@mui/material/Table"
+import TableBody from "@mui/material/TableBody"
+import TableCell from "@mui/material/TableCell"
+import TableContainer from "@mui/material/TableContainer"
+import TableHead from "@mui/material/TableHead"
+import TableRow from "@mui/material/TableRow"
 import { ComponentMeta, Story } from "@storybook/react"
 import {
   MockAuditLog,

diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -1,6 +1,6 @@
-import Collapse from "@material-ui/core/Collapse"
-import { makeStyles } from "@material-ui/core/styles"
-import TableCell from "@material-ui/core/TableCell"
+import Collapse from "@mui/material/Collapse"
+import { makeStyles } from "@mui/styles"
+import TableCell from "@mui/material/TableCell"
 import { AuditLog } from "api/typesGenerated"
 import {
   CloseDropdown,
@@ -11,11 +11,11 @@ import { Stack } from "components/Stack/Stack"
 import { TimelineEntry } from "components/Timeline/TimelineEntry"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { useState } from "react"
-import { PaletteIndex } from "theme/palettes"
 import userAgentParser from "ua-parser-js"
 import { AuditLogDiff, determineGroupDiff } from "./AuditLogDiff"
 import { useTranslation } from "react-i18next"
 import { AuditLogDescription } from "./AuditLogDescription"
+import { PaletteIndex } from "theme/theme"
 
 const httpStatusColor = (httpStatus: number): PaletteIndex => {
   // redirects are successful

diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import { Avatar, AvatarIcon, AvatarProps } from "./Avatar"
-import PauseIcon from "@material-ui/icons/PauseOutlined"
+import PauseIcon from "@mui/icons-material/PauseOutlined"
 
 export default {
   title: "components/Avatar",

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,9 +1,7 @@
 // This is the only place MuiAvatar can be used
 // eslint-disable-next-line no-restricted-imports -- Read above
-import MuiAvatar, {
-  AvatarProps as MuiAvatarProps,
-} from "@material-ui/core/Avatar"
-import { makeStyles } from "@material-ui/core/styles"
+import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
 import { firstLetter } from "./firstLetter"