Upgrade to React 18

coder · ammario · Aug 22, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022
commit d889b183e0e334eb17e668588e217f9a55098ff1
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -43,9 +43,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": "^6.1.0",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.3.0",
     "sourcemapped-stacktrace": "1.1.11",
@@ -72,8 +72,8 @@
     "@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": "^17.0.17",
     "@types/react-helmet": "6.1.5",
     "@types/superagent": "4.1.15",
     "@types/uuid": "8.3.4",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -31,10 +31,9 @@ const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"
 const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
 const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
 
-export const AppRouter: FC = () => {
+export const AppRouter: FC<React.PropsWithChildren<unknown>> = () => {
   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"
 
-const ReactMarkdown: FC = ({ children }) => {
+const ReactMarkdown: FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return <div data-testid="markdown">{children}</div>
 }
 

diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -9,7 +9,7 @@ import { dark } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"
 
-export const App: FC = () => {
+export const App: FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <Router>
       <ThemeProvider theme={dark}>

diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -17,7 +17,7 @@ export interface AppLinkProps {
   appIcon?: TypesGen.WorkspaceApp["icon"]
 }
 
-export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, appIcon }) => {
+export const AppLink: FC<React.PropsWithChildren<AppLinkProps>> = ({ userName, workspaceName, appName, appIcon }) => {
   const styles = useStyles()
   const href = `/@${userName}/${workspaceName}/apps/${appName}`
 

diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -13,7 +13,7 @@ interface AuthAndFrameProps {
 /**
  * Wraps page in RequireAuth and renders it between Navbar and Footer
  */
-export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
+export const AuthAndFrame: FC<React.PropsWithChildren<AuthAndFrameProps>> = ({ children }) => {
   const styles = useStyles()
   const xServices = useContext(XServiceContext)
 

diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -18,7 +18,7 @@ export interface AvatarDataProps {
   avatar?: React.ReactNode
 }
 
-export const AvatarData: FC<AvatarDataProps> = ({
+export const AvatarData: FC<React.PropsWithChildren<AvatarDataProps>> = ({
   title,
   subtitle,
   link,

diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx
@@ -8,7 +8,7 @@ export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
   variant?: BorderedMenuVariant
 }
 
-export const BorderedMenu: FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
+export const BorderedMenu: FC<React.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,7 @@ 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,7 @@ 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
@@ -5,7 +5,7 @@ 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} />

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,7 +12,7 @@ export interface DeleteWorkspaceDialogProps {
   handleCancel: () => void
 }
 
-export const DeleteWorkspaceDialog: React.FC<DeleteWorkspaceDialogProps> = ({
+export const DeleteWorkspaceDialog: React.FC<React.PropsWithChildren<DeleteWorkspaceDialogProps>> = ({
   isOpen,
   handleCancel,
   handleConfirm,

diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
@@ -22,7 +22,7 @@ export interface DialogTitleProps {
 /**
  * Override of Material UI's DialogTitle that allows for a supertitle and background icon
  */
-export const DialogTitle: React.FC<DialogTitleProps> = ({ title, icon: Icon, superTitle }) => {
+export const DialogTitle: React.FC<React.PropsWithChildren<DialogTitleProps>> = ({ title, icon: Icon, superTitle }) => {
   const styles = useTitleStyles()
   return (
     <MuiDialogTitle disableTypography>
@@ -92,7 +92,7 @@ const typeToColor = (type: ConfirmDialogType): LoadingButtonProps["color"] => {
 /**
  * Quickly handles most modals actions, some combination of a cancel and confirm button
  */
-export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
+export const DialogActionButtons: React.FC<React.PropsWithChildren<DialogActionButtonsProps>> = ({
   cancelText = "Cancel",
   confirmText = "Confirm",
   confirmLoading = false,
@@ -309,7 +309,7 @@ export type DialogSearchProps = Omit<
  * Formats a search bar right below the title of a Dialog. Passes all props
  * through to the Material UI OutlinedInput component contained within.
  */
-export const DialogSearch: React.FC<DialogSearchProps> = (props) => {
+export const DialogSearch: React.FC<React.PropsWithChildren<DialogSearchProps>> = (props) => {
   const styles = useSearchStyles()
   return (
     <div className={styles.root}>
@@ -356,7 +356,7 @@ export type DialogProps = MuiDialogProps
  *
  * See original component's Material UI documentation here: https://material-ui.com/components/dialogs/
  */
-export const Dialog: React.FC<DialogProps> = (props) => {
+export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = (props) => {
   // Wrapped so we can add custom attributes below
   return <MuiDialog {...props} />
 }
diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -15,12 +15,12 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export const OpenDropdown: FC = () => {
+export const OpenDropdown: FC<React.PropsWithChildren<unknown>> = () => {
   const styles = useStyles()
   return <KeyboardArrowDown className={styles.arrowIcon} />
 }
 
-export const CloseDropdown: FC = () => {
+export const CloseDropdown: FC<React.PropsWithChildren<unknown>> = () => {
   const styles = useStyles()
   return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
 }
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/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,7 @@ 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,7 @@ 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 (

diff --git a/site/src/components/FormTextField/FormTextField.test.tsx b/site/src/components/FormTextField/FormTextField.test.tsx
@@ -11,7 +11,7 @@ namespace Helpers {
 
   export const requiredValidationMsg = "required"
 
-  export const Component: FC<Omit<FormTextFieldProps<FormValues>, "form" | "formFieldName">> = (
+  export const Component: FC<React.PropsWithChildren<Omit<FormTextFieldProps<FormValues>, "form" | "formFieldName">>> = (
     props,
   ) => {
     const form = useFormik<FormValues>({

diff --git a/site/src/components/FormTitle/FormTitle.tsx b/site/src/components/FormTitle/FormTitle.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FormTitle: FC<FormTitleProps> = ({ title, detail }) => {
+export const FormTitle: FC<React.PropsWithChildren<FormTitleProps>> = ({ title, detail }) => {
   const styles = useStyles()
 
   return (

diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-export const FullPageForm: FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
+export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({ title, detail, onCancel, children }) => {
   const styles = useStyles()
   return (
     <main className={styles.root}>

diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -25,7 +25,7 @@ const variantFromMsgType = (type: MsgType) => {
   }
 }
 
-export const GlobalSnackbar: React.FC = () => {
+export const GlobalSnackbar: React.FC<React.PropsWithChildren<unknown>> = () => {
   const styles = useStyles()
   const [open, setOpen] = useState<boolean>(false)
   const [notification, setNotification] = useState<NotificationMsg>()

diff --git a/site/src/components/Loader/FullScreenLoader.tsx b/site/src/components/Loader/FullScreenLoader.tsx
@@ -16,7 +16,7 @@ export const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FullScreenLoader: FC = () => {
+export const FullScreenLoader: FC<React.PropsWithChildren<unknown>> = () => {
   const styles = useStyles()
 
   return (

diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { FC } from "react"
 
-export const Loader: FC<{ size?: number }> = ({ size = 26 }) => {
+export const Loader: FC<React.PropsWithChildren<{ size?: number }>> = ({ size = 26 }) => {
   return (
     <Box p={4} width="100%" display="flex" alignItems="center" justifyContent="center">
       <CircularProgress size={size} />

diff --git a/site/src/components/LoadingButton/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx
@@ -17,7 +17,7 @@ export interface LoadingButtonProps extends ButtonProps {
  * In Material-UI 5+ - this is built-in, but since we're on an earlier version,
  * we have to roll our own.
  */
-export const LoadingButton: FC<LoadingButtonProps> = ({
+export const LoadingButton: FC<React.PropsWithChildren<LoadingButtonProps>> = ({
   loading = false,
   loadingLabel,
   children,

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

diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -24,7 +24,7 @@ interface MarginsProps {
   size?: Size
 }
 
-export const Margins: FC<MarginsProps> = ({ children, size = "regular" }) => {
+export const Margins: FC<React.PropsWithChildren<MarginsProps>> = ({ children, size = "regular" }) => {
   const styles = useStyles({ maxWidth: widthBySize[size] })
   return <div className={styles.margins}>{children}</div>
 }