Skip to content

Commit 710b5d3

Browse files
BrunoQuaresmapull[bot]
BrunoQuaresma
authored and
pull[bot]
committed
chore(site): Upgrade to MUI v5 (coder#7437)
1 parent f676731 commit 710b5d3

File tree

258 files changed

+1999
-2490
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

258 files changed

+1999
-2490
lines changed

‎site/.eslintrc.yaml

+6-7
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@ rules:
8686
- argsIgnorePattern: "^_"
8787
varsIgnorePattern: "^_"
8888
ignoreRestSiblings: true
89+
"@typescript-eslint/no-empty-interface":
90+
- error
91+
- allowSingleExtends: true
8992
"brace-style": "off"
9093
"curly": ["error", "all"]
9194
"eslint-comments/require-description": "error"
@@ -113,19 +116,15 @@ rules:
113116
no-restricted-imports:
114117
- error
115118
- paths:
116-
- name: "@material-ui/core"
117-
message:
118-
"Use path imports to avoid pulling in unused modules. See:
119-
https://material-ui.com/guides/minimizing-bundle-size/"
120-
- name: "@material-ui/icons"
119+
- name: "@mui/material"
121120
message:
122121
"Use path imports to avoid pulling in unused modules. See:
123122
https://material-ui.com/guides/minimizing-bundle-size/"
124-
- name: "@material-ui/styles"
123+
- name: "@mui/icons-material"
125124
message:
126125
"Use path imports to avoid pulling in unused modules. See:
127126
https://material-ui.com/guides/minimizing-bundle-size/"
128-
- name: "@material-ui/core/Avatar"
127+
- name: "@mui/material/Avatar"
129128
message:
130129
"You should use the Avatar component provided on
131130
components/Avatar/Avatar"

‎site/.storybook/preview.jsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import CssBaseline from "@material-ui/core/CssBaseline"
2-
import ThemeProvider from "@material-ui/styles/ThemeProvider"
1+
import CssBaseline from "@mui/material/CssBaseline"
2+
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
33
import { createMemoryHistory } from "history"
44
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
55
import { dark } from "../src/theme"
@@ -10,10 +10,12 @@ const history = createMemoryHistory()
1010

1111
export const decorators = [
1212
(Story) => (
13-
<ThemeProvider theme={dark}>
14-
<CssBaseline />
15-
<Story />
16-
</ThemeProvider>
13+
<StyledEngineProvider injectFirst>
14+
<ThemeProvider theme={dark}>
15+
<CssBaseline />
16+
<Story />
17+
</ThemeProvider>
18+
</StyledEngineProvider>
1719
),
1820
(Story) => {
1921
return (

‎site/mui.d.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles"
2+
3+
declare module "@mui/styles/defaultTheme" {
4+
interface DefaultTheme extends Theme {}
5+
}
6+
7+
declare module "@mui/material/styles" {
8+
interface TypeBackground {
9+
paperLight: string
10+
}
11+
12+
interface Palette {
13+
neutral: PaletteColor
14+
}
15+
16+
interface PaletteOptions {
17+
neutral?: PaletteColorOptions
18+
}
19+
}
20+
21+
declare module "@mui/material/Button" {
22+
interface ButtonPropsColorOverrides {
23+
neutral: true
24+
}
25+
}

‎site/package.json

+7-4
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,15 @@
3030
"dependencies": {
3131
"@emoji-mart/data": "1.0.5",
3232
"@emoji-mart/react": "1.0.1",
33+
"@emotion/react": "^11.10.8",
34+
"@emotion/styled": "^11.10.8",
3335
"@fontsource/ibm-plex-mono": "4.5.10",
3436
"@fontsource/inter": "4.5.11",
35-
"@material-ui/core": "4.12.1",
36-
"@material-ui/icons": "4.5.1",
37-
"@material-ui/lab": "4.0.0-alpha.42",
3837
"@monaco-editor/react": "4.5.0",
38+
"@mui/icons-material": "^5.11.16",
39+
"@mui/lab": "^5.0.0-alpha.129",
40+
"@mui/material": "^5.12.3",
41+
"@mui/styles": "^5.12.3",
3942
"@tanstack/react-query": "4.22.4",
4043
"@testing-library/react-hooks": "8.0.1",
4144
"@types/color-convert": "2.0.0",
@@ -72,7 +75,7 @@
7275
"react-dom": "18.2.0",
7376
"react-headless-tabs": "6.0.3",
7477
"react-helmet-async": "1.3.0",
75-
"react-i18next": "12.1.1",
78+
"react-i18next": "12.2.2",
7679
"react-markdown": "8.0.3",
7780
"react-router-dom": "6.4.1",
7881
"react-syntax-highlighter": "15.5.0",

‎site/src/app.tsx

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import CssBaseline from "@material-ui/core/CssBaseline"
2-
import ThemeProvider from "@material-ui/styles/ThemeProvider"
1+
import CssBaseline from "@mui/material/CssBaseline"
32
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
43
import { AuthProvider } from "components/AuthProvider/AuthProvider"
54
import { FC, PropsWithChildren } from "react"
@@ -9,6 +8,7 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
98
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
109
import { dark } from "./theme"
1110
import "./theme/globalFonts"
11+
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
1212

1313
const queryClient = new QueryClient({
1414
defaultOptions: {
@@ -24,17 +24,19 @@ const queryClient = new QueryClient({
2424
export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
2525
return (
2626
<HelmetProvider>
27-
<ThemeProvider theme={dark}>
28-
<CssBaseline />
29-
<ErrorBoundary>
30-
<QueryClientProvider client={queryClient}>
31-
<AuthProvider>
32-
{children}
33-
<GlobalSnackbar />
34-
</AuthProvider>
35-
</QueryClientProvider>
36-
</ErrorBoundary>
37-
</ThemeProvider>
27+
<StyledEngineProvider injectFirst>
28+
<ThemeProvider theme={dark}>
29+
<CssBaseline enableColorScheme />
30+
<ErrorBoundary>
31+
<QueryClientProvider client={queryClient}>
32+
<AuthProvider>
33+
{children}
34+
<GlobalSnackbar />
35+
</AuthProvider>
36+
</QueryClientProvider>
37+
</ErrorBoundary>
38+
</ThemeProvider>
39+
</StyledEngineProvider>
3840
</HelmetProvider>
3941
)
4042
}

‎site/src/components/AlertBanner/AlertBanner.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Story } from "@storybook/react"
22
import { AlertBanner } from "./AlertBanner"
3-
import Button from "@material-ui/core/Button"
3+
import Button from "@mui/material/Button"
44
import { mockApiError } from "testHelpers/entities"
55
import { AlertBannerProps } from "./alertTypes"
6-
import Link from "@material-ui/core/Link"
6+
import Link from "@mui/material/Link"
77

88
export default {
99
title: "components/AlertBanner",

‎site/src/components/AlertBanner/AlertBanner.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { useState, FC, Children } from "react"
2-
import Collapse from "@material-ui/core/Collapse"
2+
import Collapse from "@mui/material/Collapse"
33
import { Stack } from "components/Stack/Stack"
4-
import { makeStyles, Theme } from "@material-ui/core/styles"
4+
import { makeStyles } from "@mui/styles"
55
import { colors } from "theme/colors"
66
import { useTranslation } from "react-i18next"
77
import { getErrorDetail, getErrorMessage } from "api/errors"
88
import { Expander } from "components/Expander/Expander"
99
import { Severity, AlertBannerProps } from "./alertTypes"
1010
import { severityConstants } from "./severityConstants"
1111
import { AlertBannerCtas } from "./AlertBannerCtas"
12+
import { Theme } from "@mui/material/styles"
1213

1314
/**
1415
* @param children: the children to be displayed in the alert
@@ -96,6 +97,7 @@ interface StyleProps {
9697

9798
const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
9899
alertContainer: (props) => ({
100+
...theme.typography.body2,
99101
borderColor: severityConstants[props.severity].color,
100102
border: `1px solid ${colors.orange[7]}`,
101103
borderRadius: theme.shape.borderRadius,
@@ -104,13 +106,13 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
104106
textAlign: "left",
105107

106108
"& > span": {
107-
paddingTop: `${theme.spacing(0.25)}px`,
109+
paddingTop: theme.spacing(0.25),
108110
},
109111

110112
// targeting the alert icon rather than the expander icon
111113
"& svg:nth-child(2)": {
112-
marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit",
113-
marginRight: `${theme.spacing(1)}px`,
114+
marginTop: props.hasDetail ? theme.spacing(1) : "inherit",
115+
marginRight: theme.spacing(1),
114116
},
115117
}),
116118

‎site/src/components/AlertBanner/AlertBannerCtas.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { FC } from "react"
22
import { AlertBannerProps } from "./alertTypes"
33
import { Stack } from "components/Stack/Stack"
4-
import Button from "@material-ui/core/Button"
5-
import RefreshIcon from "@material-ui/icons/Refresh"
4+
import Button from "@mui/material/Button"
5+
import RefreshIcon from "@mui/icons-material/Refresh"
66
import { useTranslation } from "react-i18next"
77

88
type AlertBannerCtasProps = Pick<
@@ -29,20 +29,15 @@ export const AlertBannerCtas: FC<AlertBannerCtasProps> = ({
2929
{/* retry CTA */}
3030
{retry && (
3131
<div>
32-
<Button
33-
size="small"
34-
onClick={retry}
35-
startIcon={<RefreshIcon />}
36-
variant="outlined"
37-
>
32+
<Button size="small" onClick={retry} startIcon={<RefreshIcon />}>
3833
{t("ctas.retry")}
3934
</Button>
4035
</div>
4136
)}
4237

4338
{/* close CTA */}
4439
{dismissible && (
45-
<Button size="small" onClick={() => setOpen(false)} variant="outlined">
40+
<Button size="small" onClick={() => setOpen(false)}>
4641
{t("ctas.dismissCta")}
4742
</Button>
4843
)}

‎site/src/components/AlertBanner/alertTypes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export type Severity = "warning" | "error" | "info"
55

66
export interface AlertBannerProps {
77
severity: Severity
8-
text?: string
8+
text?: JSX.Element | string
99
error?: ApiError | Error | unknown
1010
actions?: ReactElement[]
1111
dismissible?: boolean

‎site/src/components/AlertBanner/severityConstants.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
2-
import ErrorOutlineOutlinedIcon from "@material-ui/icons/ErrorOutlineOutlined"
3-
import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined"
1+
import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined"
2+
import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"
3+
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"
44
import { colors } from "theme/colors"
55
import { Severity } from "./alertTypes"
66
import { ReactElement } from "react"

‎site/src/components/AppLink/AppLink.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import CircularProgress from "@material-ui/core/CircularProgress"
2-
import Link from "@material-ui/core/Link"
3-
import { makeStyles } from "@material-ui/core/styles"
4-
import Tooltip from "@material-ui/core/Tooltip"
5-
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
1+
import CircularProgress from "@mui/material/CircularProgress"
2+
import Link from "@mui/material/Link"
3+
import { makeStyles } from "@mui/styles"
4+
import Tooltip from "@mui/material/Tooltip"
5+
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"
66
import { PrimaryAgentButton } from "components/Resources/AgentButton"
77
import { FC } from "react"
88
import { combineClasses } from "utils/combineClasses"

‎site/src/components/AppLink/AppPreviewLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { makeStyles } from "@material-ui/core/styles"
1+
import { makeStyles } from "@mui/styles"
22
import { Stack } from "components/Stack/Stack"
33
import { FC } from "react"
44
import * as TypesGen from "api/typesGenerated"

‎site/src/components/AppLink/BaseIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { WorkspaceApp } from "api/typesGenerated"
22
import { FC } from "react"
3-
import ComputerIcon from "@material-ui/icons/Computer"
3+
import ComputerIcon from "@mui/icons-material/Computer"
44

55
export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
66
return app.icon ? (

‎site/src/components/AppLink/ShareIcon.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
2-
import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
3-
import LaunchOutlinedIcon from "@material-ui/icons/LaunchOutlined"
1+
import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined"
2+
import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined"
3+
import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined"
44
import * as TypesGen from "../../api/typesGenerated"
5-
import Tooltip from "@material-ui/core/Tooltip"
5+
import Tooltip from "@mui/material/Tooltip"
66
import { useTranslation } from "react-i18next"
77

88
export interface ShareIconProps {

‎site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from "react"
22
import { AuditLog } from "api/typesGenerated"
33
import { Link as RouterLink } from "react-router-dom"
4-
import Link from "@material-ui/core/Link"
4+
import Link from "@mui/material/Link"
55
import { Trans, useTranslation } from "react-i18next"
66
import { BuildAuditDescription } from "./BuildAuditDescription"
77

‎site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Trans, useTranslation } from "react-i18next"
22
import { AuditLog } from "api/typesGenerated"
33
import { FC } from "react"
44
import { Link as RouterLink } from "react-router-dom"
5-
import Link from "@material-ui/core/Link"
5+
import Link from "@mui/material/Link"
66

77
export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({
88
auditLog,

‎site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { makeStyles } from "@material-ui/core/styles"
1+
import { makeStyles } from "@mui/styles"
22
import { AuditLog } from "api/typesGenerated"
33
import { colors } from "theme/colors"
44
import { MONOSPACE_FONT_FAMILY } from "theme/constants"

‎site/src/components/AuditLogRow/AuditLogRow.stories.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import Table from "@material-ui/core/Table"
2-
import TableBody from "@material-ui/core/TableBody"
3-
import TableCell from "@material-ui/core/TableCell"
4-
import TableContainer from "@material-ui/core/TableContainer"
5-
import TableHead from "@material-ui/core/TableHead"
6-
import TableRow from "@material-ui/core/TableRow"
1+
import Table from "@mui/material/Table"
2+
import TableBody from "@mui/material/TableBody"
3+
import TableCell from "@mui/material/TableCell"
4+
import TableContainer from "@mui/material/TableContainer"
5+
import TableHead from "@mui/material/TableHead"
6+
import TableRow from "@mui/material/TableRow"
77
import { ComponentMeta, Story } from "@storybook/react"
88
import {
99
MockAuditLog,

‎site/src/components/AuditLogRow/AuditLogRow.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Collapse from "@material-ui/core/Collapse"
2-
import { makeStyles } from "@material-ui/core/styles"
3-
import TableCell from "@material-ui/core/TableCell"
1+
import Collapse from "@mui/material/Collapse"
2+
import { makeStyles } from "@mui/styles"
3+
import TableCell from "@mui/material/TableCell"
44
import { AuditLog } from "api/typesGenerated"
55
import {
66
CloseDropdown,
@@ -11,11 +11,11 @@ import { Stack } from "components/Stack/Stack"
1111
import { TimelineEntry } from "components/Timeline/TimelineEntry"
1212
import { UserAvatar } from "components/UserAvatar/UserAvatar"
1313
import { useState } from "react"
14-
import { PaletteIndex } from "theme/palettes"
1514
import userAgentParser from "ua-parser-js"
1615
import { AuditLogDiff, determineGroupDiff } from "./AuditLogDiff"
1716
import { useTranslation } from "react-i18next"
1817
import { AuditLogDescription } from "./AuditLogDescription"
18+
import { PaletteIndex } from "theme/theme"
1919

2020
const httpStatusColor = (httpStatus: number): PaletteIndex => {
2121
// redirects are successful

‎site/src/components/Avatar/Avatar.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Story } from "@storybook/react"
22
import { Avatar, AvatarIcon, AvatarProps } from "./Avatar"
3-
import PauseIcon from "@material-ui/icons/PauseOutlined"
3+
import PauseIcon from "@mui/icons-material/PauseOutlined"
44

55
export default {
66
title: "components/Avatar",

‎site/src/components/Avatar/Avatar.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
// This is the only place MuiAvatar can be used
22
// eslint-disable-next-line no-restricted-imports -- Read above
3-
import MuiAvatar, {
4-
AvatarProps as MuiAvatarProps,
5-
} from "@material-ui/core/Avatar"
6-
import { makeStyles } from "@material-ui/core/styles"
3+
import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar"
4+
import { makeStyles } from "@mui/styles"
75
import { FC } from "react"
86
import { combineClasses } from "utils/combineClasses"
97
import { firstLetter } from "./firstLetter"

0 commit comments

Comments
 (0)