Migrate theme options

coder · BrunoQuaresma · May 10, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
commit d0b064a8b89c36989f03a855765fbf08285f5a42
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"
@@ -121,10 +124,6 @@ rules:
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@mui/styles"
-          message:
-            "Use path imports to avoid pulling in unused modules. See:
-            https://material-ui.com/guides/minimizing-bundle-size/"
         - name: "@mui/material/Avatar"
           message:
             "You should use the Avatar component provided on

diff --git a/site/mui.d.ts b/site/mui.d.ts
@@ -0,0 +1,11 @@
+import { Theme } from "@mui/material/styles"
+
+declare module "@mui/material/styles" {
+  interface TypeBackground {
+    paperLight: string
+  }
+}
+
+declare module "@mui/styles/defaultTheme" {
+  interface DefaultTheme extends Theme {}
+}
diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -1,5 +1,4 @@
 import CssBaseline from "@mui/material/CssBaseline"
-import ThemeProvider from "@mui/styles/ThemeProvider"
 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: {
@@ -38,7 +38,7 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
         </ThemeProvider>
       </StyledEngineProvider>
     </HelmetProvider>
-  );
+  )
 }
 
 export const App: FC = () => {

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

diff --git a/site/src/components/AppLink/AppLinkSkeleton.tsx b/site/src/components/AppLink/AppLinkSkeleton.tsx
@@ -1,5 +1,5 @@
-import { makeStyles } from "@mui/material/styles"
-import { Skeleton } from '@mui/material';
+import { makeStyles } from "@mui/styles"
+import { Skeleton } from "@mui/material"
 import { FC } from "react"
 import { borderRadiusSm } from "theme/constants"
 
@@ -12,7 +12,7 @@ export const AppLinkSkeleton: FC<{ width: number }> = ({ width }) => {
       variant="rectangular"
       className={styles.skeleton}
     />
-  );
+  )
 }
 
 const useStyles = makeStyles(() => ({

diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/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/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/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.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -1,5 +1,5 @@
 import Collapse from "@mui/material/Collapse"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
 import { AuditLog } from "api/typesGenerated"
 import {

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,7 +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 "@mui/material/Avatar"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
 import { firstLetter } from "./firstLetter"

diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -1,7 +1,7 @@
 import { Avatar } from "components/Avatar/Avatar"
 import { FC, PropsWithChildren } from "react"
 import { Stack } from "components/Stack/Stack"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 
 export interface AvatarDataProps {
   title: string | JSX.Element

diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx
@@ -1,5 +1,5 @@
 import Popover, { PopoverProps } from "@mui/material/Popover"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, PropsWithChildren } from "react"
 
 type BorderedMenuVariant = "user-dropdown"

diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
@@ -1,5 +1,5 @@
 import ListItem from "@mui/material/ListItem"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import SvgIcon from "@mui/material/SvgIcon"
 import CheckIcon from "@mui/icons-material/Check"
 import { FC } from "react"

diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
 import { WorkspaceBuild } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"

diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, Fragment, ReactElement } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../utils/combineClasses"

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -1,5 +1,5 @@
 import IconButton from "@mui/material/Button"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import Tooltip from "@mui/material/Tooltip"
 import Check from "@mui/icons-material/Check"
 import { useClipboard } from "hooks/useClipboard"

diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import Tooltip from "@mui/material/Tooltip"
 import { useClickable } from "hooks/useClickable"
 import { useClipboard } from "hooks/useClipboard"

diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { useMachine } from "@xstate/react"
 import { UpdateCheckResponse } from "api/typesGenerated"
 import { DeploymentBanner } from "components/DeploymentBanner/DeploymentBanner"

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { Stack } from "components/Stack/Stack"
 import { PropsWithChildren, FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"

diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
 import { Sidebar } from "./Sidebar"

diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, ReactNode, FormEventHandler } from "react"
 import Button from "@mui/material/Button"
 

diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"

diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { PropsWithChildren, FC, ReactNode } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { DisabledBadge, EnabledBadge } from "./Badges"

diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import Table from "@mui/material/Table"
 import TableBody from "@mui/material/TableBody"
 import TableCell from "@mui/material/TableCell"

diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import Brush from "@mui/icons-material/Brush"
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined"
 import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined"

diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx
@@ -3,7 +3,7 @@ import { FC, useMemo, useEffect, useState } from "react"
 import prettyBytes from "pretty-bytes"
 import { getStatus } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import BuildingIcon from "@mui/icons-material/Build"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { RocketIcon } from "components/Icons/RocketIcon"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import Tooltip from "@mui/material/Tooltip"
@@ -251,7 +251,7 @@ const useStyles = makeStyles((theme) => ({
       height: 16,
     },
 
-    [theme.breakpoints.down('lg')]: {
+    [theme.breakpoints.down("lg")]: {
       display: "none",
     },
   },
@@ -269,7 +269,7 @@ const useStyles = makeStyles((theme) => ({
     gap: theme.spacing(4),
     borderTop: `1px solid ${theme.palette.divider}`,
 
-    [theme.breakpoints.down('lg')]: {
+    [theme.breakpoints.down("lg")]: {
       flexDirection: "column",
       gap: theme.spacing(1),
       alignItems: "left",

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import DialogActions from "@mui/material/DialogActions"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { ReactNode, FC, PropsWithChildren } from "react"
 import {
   Dialog,

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

diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx
@@ -1,7 +1,7 @@
 import IconButton from "@mui/material/IconButton"
 import { EditSquare } from "components/Icons/EditSquare"
 import { useRef, useState, FC } from "react"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { useTranslation } from "react-i18next"
 import Popover from "@mui/material/Popover"
 import { Stack } from "components/Stack/Stack"

diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -1,5 +1,5 @@
 import Box from "@mui/material/Box"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import Typography from "@mui/material/Typography"
 import { FC, ReactNode } from "react"
 import { combineClasses } from "../../utils/combineClasses"

diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
@@ -2,7 +2,7 @@ import IconButton from "@mui/material/IconButton"
 import Snackbar, {
   SnackbarProps as MuiSnackbarProps,
 } from "@mui/material/Snackbar"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import CloseIcon from "@mui/icons-material/Close"
 import { FC } from "react"
 import { combineClasses } from "../../utils/combineClasses"
@@ -42,7 +42,11 @@ export const EnterpriseSnackbar: FC<
       action={
         <div className={styles.actionWrapper}>
           {action}
-          <IconButton onClick={onClose} className={styles.iconButton} size="large">
+          <IconButton
+            onClick={onClose}
+            className={styles.iconButton}
+            size="large"
+          >
             <CloseIcon className={styles.closeIcon} aria-label="close" />
           </IconButton>
         </div>
@@ -58,7 +62,7 @@ export const EnterpriseSnackbar: FC<
       }}
       onClose={onClose}
     />
-  );
+  )
 }
 
 const useStyles = makeStyles((theme) => ({

diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { Stack } from "components/Stack/Stack"
 import { FC, DragEvent, useRef, ReactNode } from "react"
 import UploadIcon from "@mui/icons-material/CloudUploadOutlined"

diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import {
   FormFooterProps as BaseFormFooterProps,
   FormFooter as BaseFormFooter,
@@ -122,7 +122,7 @@ const useStyles = makeStyles((theme) => ({
     gap: ({ direction }: FormContextValue = {}) =>
       direction === "horizontal" ? theme.spacing(10) : theme.spacing(5),
 
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down("md")]: {
       gap: theme.spacing(8),
     },
   },
@@ -135,7 +135,7 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: ({ direction }: FormContextValue = {}) =>
       direction === "horizontal" ? "row" : "column",
 
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       gap: theme.spacing(2),
     },
@@ -150,7 +150,7 @@ const useStyles = makeStyles((theme) => ({
       direction === "horizontal" ? "sticky" : undefined,
     top: theme.spacing(3),
 
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down("md")]: {
       width: "100%",
       position: "initial",
     },
@@ -180,7 +180,7 @@ const useFormFooterStyles = makeStyles((theme) => ({
   button: {
     minWidth: theme.spacing(23),
 
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down("md")]: {
       width: "100%",
     },
   },
@@ -191,7 +191,7 @@ const useFormFooterStyles = makeStyles((theme) => ({
     flexDirection: "row-reverse",
     gap: theme.spacing(2),
 
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       gap: theme.spacing(1),
     },

diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx
@@ -1,5 +1,5 @@
 import IconButton from "@mui/material/IconButton"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import Typography from "@mui/material/Typography"
 import { useEffect, FC, PropsWithChildren } from "react"
 import { CloseIcon } from "../Icons/CloseIcon"
@@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({
       opacity: 1,
     },
 
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down("md")]: {
       top: theme.spacing(1),
       right: theme.spacing(1),
     },

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { ClassNameMap } from "@mui/material/styles/withStyles"
 import { FC } from "react"
 import { LoadingButton } from "../LoadingButton/LoadingButton"

diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -5,7 +5,7 @@ import {
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader"
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 
 export interface FullPageFormProps {
   title: string

diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@mui/material/styles"
+import { makeStyles } from "@mui/styles"
 import { useCallback, useState, FC } from "react"
 import { useCustomEvent } from "../../hooks/events"
 import { CustomEventListener } from "../../utils/events"