coder · ammario · Aug 22, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022
diff --git a/site/package.json b/site/package.json
@@ -39,16 +39,17 @@
     "cron-parser": "4.5.0",
     "cronstrue": "2.11.0",
     "dayjs": "1.11.4",
-    "formik": "2.2.9",
+    "formik": "^2.2.9",
     "front-matter": "4.0.2",
     "history": "5.3.0",
     "just-debounce-it": "3.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-helmet": "6.1.0",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-helmet-async": "1.3.0",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.3.0",
     "sourcemapped-stacktrace": "1.1.11",
+    "swr": "1.3.0",
     "tzdata": "1.0.30",
     "uuid": "8.3.2",
     "xstate": "4.32.1",
@@ -70,13 +71,13 @@
     "@storybook/addon-links": "6.5.9",
     "@storybook/react": "6.4.22",
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "14.3.0",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/express": "4.17.13",
     "@types/jest": "27.4.1",
     "@types/node": "14.18.22",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "17.0.16",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
     "@types/react-helmet": "6.1.5",
     "@types/superagent": "4.1.15",
     "@types/uuid": "8.3.4",
@@ -105,7 +106,7 @@
     "jest-runner-eslint": "1.0.0",
     "jest-websocket-mock": "2.3.0",
     "mini-css-extract-plugin": "2.6.1",
-    "msw": "0.42.0",
+    "msw": "^0.44.2",
     "prettier": "2.7.1",
     "prettier-plugin-organize-imports": "3.0.0",
     "react-hot-loader": "4.13.0",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -35,7 +35,6 @@ const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
   const permissions = useSelector(xServices.authXService, selectPermissions)
-
   return (
     <Suspense fallback={<></>}>
       <Routes>

diff --git a/site/src/Main.tsx b/site/src/Main.tsx
@@ -1,5 +1,5 @@
 import { inspect } from "@xstate/inspect"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { Interpreter } from "xstate"
 import { App } from "./app"
 
@@ -25,7 +25,11 @@ const main = () => {
      ██████▀▄█    ▀▀▀▀   ▀▀▀▀  ▀▀▀▀▀  ▀▀▀▀ ▀
 `)
   const element = document.getElementById("root")
-  ReactDOM.render(<App />, element)
+  if (element === null) {
+    throw new Error("root element is null")
+  }
+  const root = createRoot(element)
+  root.render(<App />)
 }
 
 main()
diff --git a/site/src/__mocks__/react-markdown.tsx b/site/src/__mocks__/react-markdown.tsx
@@ -1,6 +1,6 @@
-import { FC } from "react"
+import { FC, PropsWithChildren } from "react"
 
-const ReactMarkdown: FC = ({ children }) => {
+const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
   return <div data-testid="markdown">{children}</div>
 }
 

diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -1,6 +1,7 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { FC } from "react"
+import { HelmetProvider } from "react-helmet-async"
 import { BrowserRouter as Router } from "react-router-dom"
 import { AppRouter } from "./AppRouter"
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
@@ -12,15 +13,17 @@ import { XServiceProvider } from "./xServices/StateContext"
 export const App: FC = () => {
   return (
     <Router>
-      <ThemeProvider theme={dark}>
-        <CssBaseline />
-        <ErrorBoundary>
-          <XServiceProvider>
-            <AppRouter />
-            <GlobalSnackbar />
-          </XServiceProvider>
-        </ErrorBoundary>
-      </ThemeProvider>
+      <HelmetProvider>
+        <ThemeProvider theme={dark}>
+          <CssBaseline />
+          <ErrorBoundary>
+            <XServiceProvider>
+              <AppRouter />
+              <GlobalSnackbar />
+            </XServiceProvider>
+          </ErrorBoundary>
+        </ThemeProvider>
+      </HelmetProvider>
     </Router>
   )
 }
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import ComputerIcon from "@material-ui/icons/Computer"
-import { FC } from "react"
+import { FC, PropsWithChildren } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../util/random"
 
@@ -17,7 +17,12 @@ export interface AppLinkProps {
   appIcon?: TypesGen.WorkspaceApp["icon"]
 }
 
-export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, appIcon }) => {
+export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
+  userName,
+  workspaceName,
+  appName,
+  appIcon,
+}) => {
   const styles = useStyles()
   const href = `/@${userName}/${workspaceName}/apps/${appName}`
 

diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -1,7 +1,7 @@
 import Avatar from "@material-ui/core/Avatar"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import { FC } from "react"
+import { FC, PropsWithChildren } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { firstLetter } from "../../util/firstLetter"
 import {
@@ -18,7 +18,7 @@ export interface AvatarDataProps {
   avatar?: React.ReactNode
 }
 
-export const AvatarData: FC<AvatarDataProps> = ({
+export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
   title,
   subtitle,
   link,

diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx
@@ -1,14 +1,18 @@
 import Popover, { PopoverProps } from "@material-ui/core/Popover"
 import { fade, makeStyles } from "@material-ui/core/styles"
-import { FC } from "react"
+import { FC, PropsWithChildren } from "react"
 
 type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
 
 export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
   variant?: BorderedMenuVariant
 }
 
-export const BorderedMenu: FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
+export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
+  children,
+  variant,
+  ...rest
+}) => {
   const styles = useStyles()
 
   return (

diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
@@ -26,7 +26,7 @@ interface BorderedMenuRowProps {
   onClick?: () => void
 }
 
-export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
+export const BorderedMenuRow: FC<React.PropsWithChildren<BorderedMenuRowProps>> = ({
   active,
   description,
   Icon,

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -30,7 +30,10 @@ export interface BuildsTableProps {
   className?: string
 }
 
-export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
+export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
+  builds,
+  className,
+}) => {
   const { username, workspace: workspaceName } = useParams()
   const isLoading = !builds
   const theme: Theme = useTheme()

diff --git a/site/src/components/CliAuthToken/CliAuthToken.tsx b/site/src/components/CliAuthToken/CliAuthToken.tsx
@@ -8,7 +8,7 @@ export interface CliAuthTokenProps {
   sessionToken: string
 }
 
-export const CliAuthToken: FC<CliAuthTokenProps> = ({ sessionToken }) => {
+export const CliAuthToken: FC<React.PropsWithChildren<CliAuthTokenProps>> = ({ sessionToken }) => {
   const styles = useStyles()
   return (
     <Paper className={styles.container}>

diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -9,7 +9,11 @@ export interface CodeBlockProps {
   className?: string
 }
 
-export const CodeBlock: FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
+export const CodeBlock: FC<React.PropsWithChildren<CodeBlockProps>> = ({
+  lines,
+  ctas,
+  className = "",
+}) => {
   const styles = useStyles()
 
   return (

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -14,7 +14,7 @@ export interface CodeExampleProps {
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<CodeExampleProps> = ({
+export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
   code,
   className,
   buttonClassName,

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx
@@ -1,11 +1,12 @@
 import { fireEvent, render } from "@testing-library/react"
 import { FC } from "react"
-import { act } from "react-dom/test-utils"
 import { WrapperComponent } from "../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 namespace Helpers {
-  export const Component: FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
+  export const Component: FC<React.PropsWithChildren<ConfirmDialogProps>> = (
+    props: ConfirmDialogProps,
+  ) => {
     return (
       <WrapperComponent>
         <ConfirmDialog {...props} />
@@ -116,9 +117,7 @@ describe("ConfirmDialog", () => {
 
     // When
     const { getByText } = render(<Helpers.Component {...props} />)
-    act(() => {
-      fireEvent.click(getByText("CANCEL"))
-    })
+    fireEvent.click(getByText("CANCEL"))
 
     // Then
     expect(onCloseMock).toBeCalledTimes(1)
@@ -140,9 +139,7 @@ describe("ConfirmDialog", () => {
 
     // When
     const { getByText } = render(<Helpers.Component {...props} />)
-    act(() => {
-      fireEvent.click(getByText("CONFIRM"))
-    })
+    fireEvent.click(getByText("CONFIRM"))
 
     // Then
     expect(onCloseMock).toBeCalledTimes(0)

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
  * Quick-use version of the Dialog component with slightly alternative styles,
  * great to use for dialogs that don't have any interaction beyond yes / no.
  */
-export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+export const ConfirmDialog: React.FC<React.PropsWithChildren<ConfirmDialogProps>> = ({
   cancelText,
   confirmLoading,
   confirmText,

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -22,7 +22,7 @@ export const Language = {
 /**
  * Copy button used inside the CodeBlock component internally
  */
-export const CopyButton: React.FC<CopyButtonProps> = ({
+export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
   text,
   ctaCopy,
   wrapperClassName = "",

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -35,7 +35,7 @@ const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
 })
 
-export const CreateUserForm: FC<CreateUserFormProps> = ({
+export const CreateUserForm: FC<React.PropsWithChildren<CreateUserFormProps>> = ({
   onSubmit,
   onCancel,
   formErrors,

diff --git a/site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx b/site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx
@@ -12,11 +12,9 @@ export interface DeleteWorkspaceDialogProps {
   handleCancel: () => void
 }
 
-export const DeleteWorkspaceDialog: React.FC<DeleteWorkspaceDialogProps> = ({
-  isOpen,
-  handleCancel,
-  handleConfirm,
-}) => (
+export const DeleteWorkspaceDialog: React.FC<
+  React.PropsWithChildren<DeleteWorkspaceDialogProps>
+> = ({ isOpen, handleCancel, handleConfirm }) => (
   <ConfirmDialog
     type="delete"
     hideCancel={false}

diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -23,7 +23,7 @@ export interface EmptyStateProps {
  * EmptyState's props extend the [Material UI Box component](https://material-ui.com/components/box/)
  * that you can directly pass props through to to customize the shape and layout of it.
  */
-export const EmptyState: FC<EmptyStateProps> = (props) => {
+export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (props) => {
   const { message, description, cta, descriptionClassName, className, ...boxProps } = props
   const styles = useStyles()
 

diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
@@ -25,7 +25,7 @@ export interface EnterpriseSnackbarProps extends MuiSnackbarProps {
  *
  * See original component's Material UI documentation here: https://material-ui.com/components/snackbars/
  */
-export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
+export const EnterpriseSnackbar: FC<React.PropsWithChildren<EnterpriseSnackbarProps>> = ({
   onClose,
   variant = "info",
   ContentProps = {},

diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
-import { Component, ReactNode } from "react"
+import React, { Component, ReactNode } from "react"
 import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"
 
-type ErrorBoundaryProps = Record<string, unknown>
+type ErrorBoundaryProps = React.PropsWithChildren<unknown>
 
 interface ErrorBoundaryState {
   error: Error | null

diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
@@ -23,7 +23,7 @@ export interface ErrorSummaryProps {
   defaultMessage?: string
 }
 
-export const ErrorSummary: FC<ErrorSummaryProps> = ({
+export const ErrorSummary: FC<React.PropsWithChildren<ErrorSummaryProps>> = ({
   error,
   retry,
   dismissible,

diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
@@ -18,7 +18,7 @@ export interface FooterProps {
   buildInfo?: TypesGen.BuildInfoResponse
 }
 
-export const Footer: React.FC<FooterProps> = ({ buildInfo }) => {
+export const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({ buildInfo }) => {
   const styles = useFooterStyles()
 
   const githubUrl = `https://github.com/coder/coder/issues/new?labels=needs+grooming&body=${encodeURIComponent(`Version: [\`${buildInfo?.version}\`](${buildInfo?.external_url})

diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx
@@ -8,7 +8,9 @@ export interface FormCloseButtonProps {
   onClose: () => void
 }
 
-export const FormCloseButton: React.FC<FormCloseButtonProps> = ({ onClose }) => {
+export const FormCloseButton: React.FC<React.PropsWithChildren<FormCloseButtonProps>> = ({
+  onClose,
+}) => {
   const styles = useStyles()
 
   useEffect(() => {

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FormFooter: FC<FormFooterProps> = ({
+export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
   onCancel,
   isLoading,
   submitLabel = Language.defaultSubmitLabel,

diff --git a/site/src/components/FormSection/FormSection.tsx b/site/src/components/FormSection/FormSection.tsx
@@ -39,7 +39,11 @@ export const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FormSection: FC<FormSectionProps> = ({ title, description, children }) => {
+export const FormSection: FC<React.PropsWithChildren<FormSectionProps>> = ({
+  title,
+  description,
+  children,
+}) => {
   const styles = useStyles()
 
   return (