From a6ccbfc2ba8a477f463ce46d240438fa7b3e2026 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 20:15:29 +0000
Subject: [PATCH 01/14] chore(deps): upgrade @material-ui/core to 4.12.4

This is the latest version which includes a fix for the warning we were
seeing while running our tests about `css` function being deprecated.
---
 site/package.json |  2 +-
 site/yarn.lock    | 42 +++++++++++++++++++++---------------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/site/package.json b/site/package.json
index 4ff8d296a7fd5..e24fc516c8407 100644
--- a/site/package.json
+++ b/site/package.json
@@ -30,7 +30,7 @@
     "@emoji-mart/react": "^1.0.1",
     "@fontsource/ibm-plex-mono": "4.5.10",
     "@fontsource/inter": "4.5.11",
-    "@material-ui/core": "4.9.4",
+    "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
     "@testing-library/react-hooks": "8.0.1",
diff --git a/site/yarn.lock b/site/yarn.lock
index d4a7facdb4b27..6072c4580981a 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -1648,23 +1648,23 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
-"@material-ui/core@4.9.4":
-  version "4.9.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.9.4.tgz#796515b12845dc6ea7e21872888cfc4c0c1c1efe"
-  integrity sha512-1wqm3jBC8mGpVHu0wVOYBX7LUzkPsWxkkTtKSn0Hz66T6TDJkke72mkSIL7akNdjnxy+bRc2Vi6NiJ4YutkDcw==
+"@material-ui/core@^4.12.4":
+  version "4.12.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
+  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.9.0"
-    "@material-ui/system" "^4.9.3"
-    "@material-ui/types" "^5.0.0"
-    "@material-ui/utils" "^4.7.1"
+    "@material-ui/styles" "^4.11.5"
+    "@material-ui/system" "^4.12.2"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.3"
     "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.2"
+    clsx "^1.0.4"
     hoist-non-react-statics "^3.3.2"
-    popper.js "^1.14.1"
+    popper.js "1.16.1-lts"
     prop-types "^15.7.2"
-    react-is "^16.8.0"
-    react-transition-group "^4.3.0"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
 
 "@material-ui/icons@4.5.1":
   version "4.5.1"
@@ -1684,7 +1684,7 @@
     prop-types "^15.7.2"
     react-is "^16.8.0"
 
-"@material-ui/styles@^4.9.0":
+"@material-ui/styles@^4.11.5":
   version "4.11.5"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
   integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
@@ -1706,7 +1706,7 @@
     jss-plugin-vendor-prefixer "^10.5.1"
     prop-types "^15.7.2"
 
-"@material-ui/system@^4.9.3":
+"@material-ui/system@^4.12.2":
   version "4.12.2"
   resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
   integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
@@ -1716,7 +1716,7 @@
     csstype "^2.5.2"
     prop-types "^15.7.2"
 
-"@material-ui/types@5.1.0", "@material-ui/types@^5.0.0":
+"@material-ui/types@5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
@@ -5617,7 +5617,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.0.4, clsx@^1.1.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -11689,10 +11689,10 @@ polished@^4.0.5, polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
-popper.js@^1.14.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
@@ -12531,7 +12531,7 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-transition-group@^4.3.0:
+react-transition-group@^4.4.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==

From 72bcd1cf1860fba9e846c872b4ce44eda71986f1 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 20:17:15 +0000
Subject: [PATCH 02/14] refactor: use alpha() instead of fade

`fade()` was deprecated in favor of `alpha()` in a previous version of
`@material-ui/core/styles`.
---
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   |  6 ++--
 site/src/components/Dialogs/Dialog.tsx        | 36 +++++++++----------
 site/src/components/TabPanel/TabPanel.tsx     |  4 +--
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index 93439c1ede17d..4d5732ba7d276 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import DialogActions from "@material-ui/core/DialogActions"
-import { fade, makeStyles } from "@material-ui/core/styles"
+import { alpha, makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React, { ReactNode } from "react"
 import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog"
@@ -65,11 +65,11 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(3),
   },
   description: {
-    color: fade(theme.palette.text.secondary, 0.75),
+    color: alpha(theme.palette.text.secondary, 0.75),
     lineHeight: "160%",
 
     "& strong": {
-      color: fade(theme.palette.text.secondary, 0.95),
+      color: alpha(theme.palette.text.secondary, 0.95),
     },
   },
 }))
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index 0d53f462f8ea2..391178cfadbc2 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -1,6 +1,6 @@
 import MuiDialog, { DialogProps as MuiDialogProps } from "@material-ui/core/Dialog"
 import MuiDialogTitle from "@material-ui/core/DialogTitle"
-import { darken, fade, lighten, makeStyles } from "@material-ui/core/styles"
+import { alpha, darken, lighten, makeStyles } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import * as React from "react"
 import { combineClasses } from "../../util/combineClasses"
@@ -57,7 +57,7 @@ const useTitleStyles = makeStyles(
     icon: {
       height: 84,
       width: 84,
-      color: fade(theme.palette.action.disabled, 0.4),
+      color: alpha(theme.palette.action.disabled, 0.4),
     },
   }),
   { name: "CdrDialogTitle" },
@@ -155,27 +155,27 @@ const useButtonStyles = makeStyles((theme) => ({
     boxShadow: "none",
   },
   cancelButton: {
-    background: fade(theme.palette.primary.main, 0.1),
+    background: alpha(theme.palette.primary.main, 0.1),
     color: theme.palette.primary.main,
 
     "&:hover": {
-      background: fade(theme.palette.primary.main, 0.3),
+      background: alpha(theme.palette.primary.main, 0.3),
     },
   },
   confirmDialogCancelButton: (props: StyleProps) => {
     const color =
       props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText
     return {
-      background: fade(color, 0.15),
+      background: alpha(color, 0.15),
       color,
 
       "&:hover": {
-        background: fade(color, 0.3),
+        background: alpha(color, 0.3),
       },
 
       "&.Mui-disabled": {
-        background: fade(color, 0.15),
-        color: fade(color, 0.5),
+        background: alpha(color, 0.15),
+        color: alpha(color, 0.5),
       },
     }
   },
@@ -214,7 +214,7 @@ const useButtonStyles = makeStyles((theme) => ({
       },
       "&.Mui-disabled": {
         backgroundColor: theme.palette.action.disabledBackground,
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
 
@@ -222,7 +222,7 @@ const useButtonStyles = makeStyles((theme) => ({
       color: theme.palette.error.main,
       borderColor: theme.palette.error.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
@@ -231,7 +231,7 @@ const useButtonStyles = makeStyles((theme) => ({
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
         borderColor: theme.palette.action.disabled,
       },
     },
@@ -239,13 +239,13 @@ const useButtonStyles = makeStyles((theme) => ({
     "&.MuiButton-text": {
       color: theme.palette.error.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.error.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
   },
@@ -264,7 +264,7 @@ const useButtonStyles = makeStyles((theme) => ({
       },
       "&.Mui-disabled": {
         backgroundColor: theme.palette.action.disabledBackground,
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
 
@@ -272,7 +272,7 @@ const useButtonStyles = makeStyles((theme) => ({
       color: theme.palette.success.main,
       borderColor: theme.palette.success.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
@@ -281,7 +281,7 @@ const useButtonStyles = makeStyles((theme) => ({
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
         borderColor: theme.palette.action.disabled,
       },
     },
@@ -289,13 +289,13 @@ const useButtonStyles = makeStyles((theme) => ({
     "&.MuiButton-text": {
       color: theme.palette.success.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.success.main, theme.palette.action.hoverOpacity),
+        backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
       },
       "&.Mui-disabled": {
-        color: fade(theme.palette.text.disabled, 0.5),
+        color: alpha(theme.palette.text.disabled, 0.5),
       },
     },
   },
diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx
index 83ae6ea957f3c..c60e02fea6352 100644
--- a/site/src/components/TabPanel/TabPanel.tsx
+++ b/site/src/components/TabPanel/TabPanel.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { fade } from "@material-ui/core/styles/colorManipulator"
+import { alpha } from "@material-ui/core/styles/colorManipulator"
 import { FC } from "react"
 import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar"
 
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
     position: "absolute",
     left: -50,
     top: 31,
-    color: fade(theme.palette.common.black, 0.1),
+    color: alpha(theme.palette.common.black, 0.1),
     transition: "transform 0.3s ease",
     zIndex: -1,
   },

From 94dae6fea86fd5fc9e07494613571b9cd37f9c9f Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 20:18:13 +0000
Subject: [PATCH 03/14] refactor: rows -> minRows

This was deprecated in a previous version of `@material-ui/core`.
---
 site/src/components/FormTextField/FormTextField.tsx          | 2 +-
 site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/FormTextField/FormTextField.tsx b/site/src/components/FormTextField/FormTextField.tsx
index 04976889bb51f..e15e7806b4d16 100644
--- a/site/src/components/FormTextField/FormTextField.tsx
+++ b/site/src/components/FormTextField/FormTextField.tsx
@@ -44,7 +44,7 @@ export interface FormTextFieldProps<T>
       | "onChange"
       | "placeholder"
       | "required"
-      | "rows"
+      | "minRows"
       | "select"
       | "SelectProps"
       | "style"
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
index 11a0143d7892c..38c355aeba28c 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -104,7 +104,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
           fullWidth
           label={Language.descriptionLabel}
           variant="outlined"
-          rows={2}
+          minRows={2}
         />
 
         <div className={styles.iconField}>

From 78882eee0b62573eed6f0a679964d442a361cb07 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 20:18:52 +0000
Subject: [PATCH 04/14] refactor: overlap circle -> circular

overlap="circle" was deprecated in favor of overlap="circular".
---
 site/src/components/UserDropdown/UsersDropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
index a391951196cda..2673c97c5ed34 100644
--- a/site/src/components/UserDropdown/UsersDropdown.tsx
+++ b/site/src/components/UserDropdown/UsersDropdown.tsx
@@ -37,7 +37,7 @@ export const UserDropdown: React.FC<React.PropsWithChildren<UserDropdownProps>>
         data-testid="user-dropdown-trigger"
       >
         <div className={styles.inner}>
-          <Badge overlap="circle">
+          <Badge overlap="circular">
             <UserAvatar username={user.username} avatarURL={user.avatar_url} />
           </Badge>
           {anchorEl ? (

From f351752cc4508f64c0da71f818961296eeaefa11 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 20:19:41 +0000
Subject: [PATCH 05/14] refactor: createMuiTheme -> createTheme

This was deprecated and changed to `createTheme`.
---
 site/src/theme/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 523dfd47031c6..fbb6ee63c0261 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -1,4 +1,4 @@
-import { createMuiTheme } from "@material-ui/core/styles"
+import { createTheme } from "@material-ui/core/styles"
 import { PaletteOptions } from "@material-ui/core/styles/createPalette"
 import { borderRadius } from "./constants"
 import { getOverrides } from "./overrides"
@@ -7,7 +7,7 @@ import { props } from "./props"
 import { typography } from "./typography"
 
 const makeTheme = (palette: PaletteOptions) => {
-  const theme = createMuiTheme({
+  const theme = createTheme({
     palette,
     typography,
     shape: {

From 6c2dccfbf02adf09a2981b7a9738e21299555d73 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 20:22:40 +0000
Subject: [PATCH 06/14] fixup!: chore(deps): upgrade @material-ui/core to
 4.12.4

---
 site/yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/yarn.lock b/site/yarn.lock
index 6072c4580981a..8e977862d9965 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -1648,7 +1648,7 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
-"@material-ui/core@^4.12.4":
+"@material-ui/core@4.12.4":
   version "4.12.4"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
   integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==

From fa120f4845f38e4fca5c7a0b3fd51b6b97b55fb4 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 22:25:03 +0000
Subject: [PATCH 07/14] fixup!: refactor: createMuiTheme -> createTheme

---
 site/src/components/LoadingButton/LoadingButton.tsx             | 2 +-
 site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/LoadingButton/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx
index 4e9fe0f57bab1..6efb4e4aa7f7e 100644
--- a/site/src/components/LoadingButton/LoadingButton.tsx
+++ b/site/src/components/LoadingButton/LoadingButton.tsx
@@ -1,7 +1,7 @@
 import Button, { ButtonProps } from "@material-ui/core/Button"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { makeStyles } from "@material-ui/core/styles"
-import { Theme } from "@material-ui/core/styles/createMuiTheme"
+import { Theme } from "@material-ui/core/styles/createTheme"
 import { FC } from "react"
 
 export interface LoadingButtonProps extends ButtonProps {
diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
index 9772ac28e4cf1..80407aada484a 100644
--- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
+++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -5,7 +5,7 @@ import Menu from "@material-ui/core/Menu"
 import MenuItem from "@material-ui/core/MenuItem"
 import OutlinedInput from "@material-ui/core/OutlinedInput"
 import { makeStyles } from "@material-ui/core/styles"
-import { Theme } from "@material-ui/core/styles/createMuiTheme"
+import { Theme } from "@material-ui/core/styles/createTheme"
 import SearchIcon from "@material-ui/icons/Search"
 import debounce from "just-debounce-it"
 import { useCallback, useRef, useState } from "react"

From a8f2b21a72f71431f7de50a0a5b8d498cc45322a Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 22 Sep 2022 22:48:59 +0000
Subject: [PATCH 08/14] fix: add SvgIconProps on icons

I couldn't find any release notes or breaking changes related to this
but it seems `props` can no longer be inferred on `SvgIcon`s so I had to
manually add the type.
---
 site/src/components/Icons/CloseIcon.tsx         | 4 ++--
 site/src/components/Icons/SearchIcon.tsx        | 4 ++--
 site/src/components/Icons/UsersOutlinedIcon.tsx | 4 ++--
 site/src/components/Icons/WorkspacesIcon.tsx    | 4 ++--
 site/src/components/PageHeader/PageHeader.tsx   | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/src/components/Icons/CloseIcon.tsx b/site/src/components/Icons/CloseIcon.tsx
index 5a8faad0597a0..af225f2cde358 100644
--- a/site/src/components/Icons/CloseIcon.tsx
+++ b/site/src/components/Icons/CloseIcon.tsx
@@ -1,6 +1,6 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
 
-export const CloseIcon: typeof SvgIcon = (props) => (
+export const CloseIcon: typeof SvgIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 31 31">
     <path
       d="M29.5 1.5l-28 28M29.5 29.5l-28-28"
diff --git a/site/src/components/Icons/SearchIcon.tsx b/site/src/components/Icons/SearchIcon.tsx
index fac0069985958..7d83f82e57664 100644
--- a/site/src/components/Icons/SearchIcon.tsx
+++ b/site/src/components/Icons/SearchIcon.tsx
@@ -1,6 +1,6 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
 
-export const SearchIcon: typeof SvgIcon = (props) => (
+export const SearchIcon: typeof SvgIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 16 16">
     <path d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z" />
   </SvgIcon>
diff --git a/site/src/components/Icons/UsersOutlinedIcon.tsx b/site/src/components/Icons/UsersOutlinedIcon.tsx
index b1264fc93a1db..0c407ec70f2b4 100644
--- a/site/src/components/Icons/UsersOutlinedIcon.tsx
+++ b/site/src/components/Icons/UsersOutlinedIcon.tsx
@@ -1,6 +1,6 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
 
-export const UsersOutlinedIcon: typeof SvgIcon = (props) => (
+export const UsersOutlinedIcon: typeof SvgIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
diff --git a/site/src/components/Icons/WorkspacesIcon.tsx b/site/src/components/Icons/WorkspacesIcon.tsx
index b42639d51d514..c9374043d7149 100644
--- a/site/src/components/Icons/WorkspacesIcon.tsx
+++ b/site/src/components/Icons/WorkspacesIcon.tsx
@@ -1,6 +1,6 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
 
-export const WorkspacesIcon: typeof SvgIcon = (props) => (
+export const WorkspacesIcon: typeof SvgIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 16 16">
     <path d="M6 14H2V2H12V5.5L14 7V1C14 0.734784 13.8946 0.48043 13.7071 0.292893C13.5196 0.105357 13.2652 0 13 0L1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1L0 15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16H6V14Z" />
     <path d="M12 8L8 11V16H11V13H13.035V16H16V11L12 8Z" />
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index c6cbb6a35c282..e9aa3937f6c85 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -12,7 +12,7 @@ export const PageHeader: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   actions,
   className,
 }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return (
     <div className={combineClasses([styles.root, className])}>
@@ -27,7 +27,7 @@ export const PageHeader: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
 }
 
 export const PageHeaderTitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return <h1 className={styles.title}>{children}</h1>
 }

From 156bbfc481025eeb20e92e7ce3566d62b8abc61e Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Fri, 23 Sep 2022 16:54:52 +0000
Subject: [PATCH 09/14] Revert "refactor: rows -> minRows"

This reverts commit 94dae6fea86fd5fc9e07494613571b9cd37f9c9f.
---
 site/src/components/FormTextField/FormTextField.tsx          | 2 +-
 site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/FormTextField/FormTextField.tsx b/site/src/components/FormTextField/FormTextField.tsx
index e15e7806b4d16..04976889bb51f 100644
--- a/site/src/components/FormTextField/FormTextField.tsx
+++ b/site/src/components/FormTextField/FormTextField.tsx
@@ -44,7 +44,7 @@ export interface FormTextFieldProps<T>
       | "onChange"
       | "placeholder"
       | "required"
-      | "minRows"
+      | "rows"
       | "select"
       | "SelectProps"
       | "style"
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
index 38c355aeba28c..11a0143d7892c 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -104,7 +104,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
           fullWidth
           label={Language.descriptionLabel}
           variant="outlined"
-          minRows={2}
+          rows={2}
         />
 
         <div className={styles.iconField}>

From f01619c5309bf0105432e9e3fa97b26c772f62a2 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Fri, 23 Sep 2022 17:21:35 +0000
Subject: [PATCH 10/14] chore(deps): downgrade @material-ui/core to 4.12.0

---
 site/package.json |  2 +-
 site/yarn.lock    | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/package.json b/site/package.json
index e24fc516c8407..35639adf1372e 100644
--- a/site/package.json
+++ b/site/package.json
@@ -30,7 +30,7 @@
     "@emoji-mart/react": "^1.0.1",
     "@fontsource/ibm-plex-mono": "4.5.10",
     "@fontsource/inter": "4.5.11",
-    "@material-ui/core": "4.12.4",
+    "@material-ui/core": "4.12.1",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
     "@testing-library/react-hooks": "8.0.1",
diff --git a/site/yarn.lock b/site/yarn.lock
index 8e977862d9965..c64dbbf2534a8 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -1648,16 +1648,16 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
-"@material-ui/core@4.12.4":
-  version "4.12.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
-  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
+"@material-ui/core@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.1.tgz#ac8f081498047aa02bb6ee70b77c5dad6a2a6e73"
+  integrity sha512-C6hYsjkWCTfBx9FaqxhCZCITBagh7fyCKFtHyvO3tTOcBw6NJaktdhNZ2n82jQdQdgfFvg6OOxi7OOzsAdAcBQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.5"
-    "@material-ui/system" "^4.12.2"
+    "@material-ui/styles" "^4.11.4"
+    "@material-ui/system" "^4.12.1"
     "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
+    "@material-ui/utils" "^4.11.2"
     "@types/react-transition-group" "^4.2.0"
     clsx "^1.0.4"
     hoist-non-react-statics "^3.3.2"
@@ -1684,7 +1684,7 @@
     prop-types "^15.7.2"
     react-is "^16.8.0"
 
-"@material-ui/styles@^4.11.5":
+"@material-ui/styles@^4.11.4":
   version "4.11.5"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
   integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
@@ -1706,7 +1706,7 @@
     jss-plugin-vendor-prefixer "^10.5.1"
     prop-types "^15.7.2"
 
-"@material-ui/system@^4.12.2":
+"@material-ui/system@^4.12.1":
   version "4.12.2"
   resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
   integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
@@ -1721,7 +1721,7 @@
   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
 
-"@material-ui/utils@^4.11.3", "@material-ui/utils@^4.7.1":
+"@material-ui/utils@^4.11.2", "@material-ui/utils@^4.11.3", "@material-ui/utils@^4.7.1":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
   integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==

From dbeced0469d507d809874716d1ceace2740e4b73 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Fri, 23 Sep 2022 17:24:00 +0000
Subject: [PATCH 11/14] fixup!: fix: add SvgIconProps on icons

---
 site/src/components/Icons/FileCopyIcon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx
index e45047587d953..74be3ce6e7664 100644
--- a/site/src/components/Icons/FileCopyIcon.tsx
+++ b/site/src/components/Icons/FileCopyIcon.tsx
@@ -1,6 +1,6 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
 
-export const FileCopyIcon: typeof SvgIcon = (props) => (
+export const FileCopyIcon: typeof SvgIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <path
       d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"

From 9ccf773ba88d52f15cd670419775f84b7281674a Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Fri, 23 Sep 2022 17:24:47 +0000
Subject: [PATCH 12/14] fix: pass {} to useStyles

Looks like we may need to pass an empty object if some components in a
file use `props` in styles and some don't.
---
 site/src/components/TableCellData/TableCellData.tsx    |  2 +-
 .../components/Tooltips/HelpTooltip/HelpTooltip.tsx    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/src/components/TableCellData/TableCellData.tsx b/site/src/components/TableCellData/TableCellData.tsx
index aec8938640ee9..2081e1e49d84e 100644
--- a/site/src/components/TableCellData/TableCellData.tsx
+++ b/site/src/components/TableCellData/TableCellData.tsx
@@ -22,7 +22,7 @@ export const TableCellDataPrimary: React.FC<React.PropsWithChildren<{ highlight?
 export const TableCellDataSecondary: React.FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return <span className={styles.secondary}>{children}</span>
 }
diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
index 87b90aafef372..e2d77dac1662e 100644
--- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -97,13 +97,13 @@ export const HelpTooltip: React.FC<React.PropsWithChildren<HelpTooltipProps>> =
 }
 
 export const HelpTooltipTitle: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return <h4 className={styles.title}>{children}</h4>
 }
 
 export const HelpTooltipText: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return <p className={styles.text}>{children}</p>
 }
@@ -112,7 +112,7 @@ export const HelpTooltipLink: React.FC<React.PropsWithChildren<{ href: string }>
   children,
   href,
 }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return (
     <Link href={href} target="_blank" rel="noreferrer" className={styles.link}>
@@ -129,7 +129,7 @@ export const HelpTooltipAction: React.FC<
     ariaLabel?: string
   }>
 > = ({ children, icon: Icon, onClick, ariaLabel }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
   const tooltip = useHelpTooltip()
 
   return (
@@ -149,7 +149,7 @@ export const HelpTooltipAction: React.FC<
 }
 
 export const HelpTooltipLinksGroup: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const styles = useStyles()
+  const styles = useStyles({})
 
   return (
     <Stack spacing={1} className={styles.linksGroup}>

From 6c79fb3de209bf0762756b11c2f3ae9c386970af Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Fri, 23 Sep 2022 17:25:37 +0000
Subject: [PATCH 13/14] fix: update types in Pill.tsx

We need to use generics so that `makeStyles` correctly infers the types
for the `Pill.tsx` styles.

I also updated the types to use `PillProps` directly to make sure they
stay in sync.
---
 site/src/components/Pill/Pill.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index 2c70a6d674d75..a0a7315bf6c75 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles, Theme } from "@material-ui/core/styles"
 import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { PaletteIndex } from "theme/palettes"
@@ -12,8 +12,9 @@ export interface PillProps {
   lightBorder?: boolean
 }
 
-export const Pill: FC<PillProps> = ({ className, icon, text, type, lightBorder = false }) => {
-  const styles = useStyles({ icon, type, lightBorder })
+export const Pill: FC<PillProps> = (props) => {
+  const { className, icon, text = false } = props
+  const styles = useStyles(props)
   return (
     <div className={combineClasses([styles.wrapper, styles.pillColor, className])} role="status">
       {icon && <div className={styles.iconWrapper}>{icon}</div>}
@@ -22,7 +23,7 @@ export const Pill: FC<PillProps> = ({ className, icon, text, type, lightBorder =
   )
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles<Theme, PillProps>((theme) => ({
   wrapper: {
     fontFamily: MONOSPACE_FONT_FAMILY,
     display: "inline-flex",
@@ -34,16 +35,16 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 500,
     color: "#FFF",
     height: theme.spacing(3),
-    paddingLeft: ({ icon }: { icon?: React.ReactNode }) =>
+    paddingLeft: ({ icon }) =>
       icon ? theme.spacing(0.75) : theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
     whiteSpace: "nowrap",
   },
 
   pillColor: {
-    backgroundColor: ({ type }: { type?: PaletteIndex }) =>
+    backgroundColor: ({ type }) =>
       type ? theme.palette[type].dark : theme.palette.text.secondary,
-    borderColor: ({ type, lightBorder }: { type?: PaletteIndex; lightBorder?: boolean }) =>
+    borderColor: ({ type, lightBorder }) =>
       type
         ? lightBorder
           ? theme.palette[type].light

From 92c076ee37835f75c21d3e31dd344300f3c4e0d4 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Fri, 23 Sep 2022 18:06:49 +0000
Subject: [PATCH 14/14] fixup:formatting

---
 site/src/components/Pill/Pill.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index a0a7315bf6c75..49cbb478068a8 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -35,15 +35,13 @@ const useStyles = makeStyles<Theme, PillProps>((theme) => ({
     fontWeight: 500,
     color: "#FFF",
     height: theme.spacing(3),
-    paddingLeft: ({ icon }) =>
-      icon ? theme.spacing(0.75) : theme.spacing(1.5),
+    paddingLeft: ({ icon }) => (icon ? theme.spacing(0.75) : theme.spacing(1.5)),
     paddingRight: theme.spacing(1.5),
     whiteSpace: "nowrap",
   },
 
   pillColor: {
-    backgroundColor: ({ type }) =>
-      type ? theme.palette[type].dark : theme.palette.text.secondary,
+    backgroundColor: ({ type }) => (type ? theme.palette[type].dark : theme.palette.text.secondary),
     borderColor: ({ type, lightBorder }) =>
       type
         ? lightBorder