From a39c49add1b06e3c32d094d2171ad07a964a053c Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira.pilot23@gmail.com>
Date: Tue, 10 Jan 2023 17:27:00 +0000
Subject: [PATCH] chore: forbid direct react import

---
 site/.eslintrc.yaml                           |  9 +++++
 .../components/AppLink/AppLinkSkeleton.tsx    |  4 +--
 .../CopyableValue/CopyableValue.tsx           |  4 +--
 .../DeploySettingsLayout/Badges.tsx           | 14 ++++----
 .../DeploySettingsLayout.tsx                  |  7 ++--
 .../DeploySettingsLayout/Fieldset.tsx         |  8 ++---
 .../DeploySettingsLayout/Header.tsx           |  4 +--
 .../DeploySettingsLayout/Option.tsx           | 12 +++----
 .../DeploySettingsLayout/OptionsTable.tsx     |  4 +--
 .../DeploySettingsLayout/Sidebar.tsx          |  8 ++---
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   |  8 ++---
 .../Dialogs/DeleteDialog/DeleteDialog.tsx     | 14 +++++---
 .../ErrorBoundary/ErrorBoundary.tsx           |  4 +--
 .../FormCloseButton/FormCloseButton.tsx       |  8 ++---
 .../GlobalSnackbar/GlobalSnackbar.tsx         |  4 +--
 site/src/components/Markdown/Markdown.tsx     |  4 +--
 site/src/components/Navbar/Navbar.tsx         |  4 +--
 .../PasswordField/PasswordField.tsx           |  9 ++---
 .../components/RequireAuth/RequireAuth.tsx    |  8 ++---
 .../components/Resources/ResourceAvatar.tsx   |  4 +--
 .../RuntimeErrorState/RuntimeErrorState.tsx   |  6 ++--
 .../SettingsSecurityForm.tsx                  |  4 +--
 .../TableCellData/TableCellData.tsx           | 16 ++++-----
 .../Tooltips/HelpTooltip/HelpTooltip.tsx      | 36 +++++++++++--------
 .../components/UserDropdown/UsersDropdown.tsx | 12 ++++---
 .../WorkspaceSection/WorkspaceSection.tsx     | 13 ++++---
 .../WorkspaceStatusBadge.tsx                  | 10 +++---
 site/src/pages/CliAuthPage/CliAuthPage.tsx    |  6 ++--
 .../src/pages/CliAuthPage/CliAuthPageView.tsx |  6 ++--
 .../CreateWorkspacePage/SelectedTemplate.tsx  |  2 +-
 .../AppearanceSettingsPage.tsx                |  4 +--
 .../GeneralSettingsPage.tsx                   |  4 +--
 .../GitAuthSettingsPage.tsx                   |  4 +--
 .../NetworkSettingsPage.tsx                   |  4 +--
 .../SecuritySettingsPage.tsx                  |  4 +--
 .../UserAuthSettingsPage.tsx                  |  4 +--
 site/src/pages/GitAuthPage/GitAuthPage.tsx    |  4 +--
 site/src/pages/GroupsPage/CreateGroupPage.tsx |  4 +--
 .../pages/GroupsPage/CreateGroupPageView.tsx  |  4 +--
 site/src/pages/GroupsPage/GroupsPage.tsx      |  4 +--
 site/src/pages/GroupsPage/GroupsPageView.tsx  |  4 +--
 .../pages/GroupsPage/SettingsGroupPage.tsx    |  4 +--
 .../GroupsPage/SettingsGroupPageView.tsx      |  6 ++--
 .../src/pages/TemplatesPage/TemplatesPage.tsx |  4 +--
 .../AccountPage/AccountPage.tsx               |  4 +--
 .../SSHKeysPage/SSHKeysPage.tsx               |  4 +--
 .../SecurityPage/SecurityPage.tsx             |  4 +--
 .../CreateUserPage/CreateUserPage.tsx         |  4 +--
 .../WorkspaceSchedulePage.tsx                 |  4 +--
 49 files changed, 171 insertions(+), 159 deletions(-)

diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
index 58bb2490505b5..c467e18627595 100644
--- a/site/.eslintrc.yaml
+++ b/site/.eslintrc.yaml
@@ -122,6 +122,15 @@ rules:
   react/jsx-uses-react: "off"
   react/react-in-jsx-scope: "off"
   "unicorn/explicit-length-check": "error"
+  # https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944
+  no-restricted-syntax:
+    [
+      "error",
+      {
+        selector: "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
+        message: "Default React import not allowed",
+      },
+    ]
 settings:
   react:
     version: detect
diff --git a/site/src/components/AppLink/AppLinkSkeleton.tsx b/site/src/components/AppLink/AppLinkSkeleton.tsx
index d26118e9a6272..d81630ac3eb55 100644
--- a/site/src/components/AppLink/AppLinkSkeleton.tsx
+++ b/site/src/components/AppLink/AppLinkSkeleton.tsx
@@ -1,9 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { Skeleton } from "@material-ui/lab"
-import React from "react"
+import { FC } from "react"
 import { borderRadiusSm } from "theme/constants"
 
-export const AppLinkSkeleton: React.FC<{ width: number }> = ({ width }) => {
+export const AppLinkSkeleton: FC<{ width: number }> = ({ width }) => {
   const styles = useStyles()
   return (
     <Skeleton
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
index 15bd72d84ccbe..e5ff15414cd9c 100644
--- a/site/src/components/CopyableValue/CopyableValue.tsx
+++ b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -2,14 +2,14 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import { useClickable } from "hooks/useClickable"
 import { useClipboard } from "hooks/useClipboard"
-import React, { HTMLProps } from "react"
+import { FC, HTMLProps } from "react"
 import { combineClasses } from "util/combineClasses"
 
 interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
   value: string
 }
 
-export const CopyableValue: React.FC<CopyableValueProps> = ({
+export const CopyableValue: FC<CopyableValueProps> = ({
   value,
   className,
   ...props
diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
index 14f3844ddf807..747d8f5ab127f 100644
--- a/site/src/components/DeploySettingsLayout/Badges.tsx
+++ b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -1,10 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { Stack } from "components/Stack/Stack"
-import React, { PropsWithChildren } from "react"
+import { PropsWithChildren, FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { combineClasses } from "util/combineClasses"
 
-export const EnabledBadge: React.FC = () => {
+export const EnabledBadge: FC = () => {
   const styles = useStyles()
   return (
     <span className={combineClasses([styles.badge, styles.enabledBadge])}>
@@ -13,7 +13,7 @@ export const EnabledBadge: React.FC = () => {
   )
 }
 
-export const EntitledBadge: React.FC = () => {
+export const EntitledBadge: FC = () => {
   const styles = useStyles()
   return (
     <span className={combineClasses([styles.badge, styles.enabledBadge])}>
@@ -22,7 +22,7 @@ export const EntitledBadge: React.FC = () => {
   )
 }
 
-export const DisabledBadge: React.FC = () => {
+export const DisabledBadge: FC = () => {
   const styles = useStyles()
   return (
     <span className={combineClasses([styles.badge, styles.disabledBadge])}>
@@ -31,7 +31,7 @@ export const DisabledBadge: React.FC = () => {
   )
 }
 
-export const EnterpriseBadge: React.FC = () => {
+export const EnterpriseBadge: FC = () => {
   const styles = useStyles()
   return (
     <span className={combineClasses([styles.badge, styles.enterpriseBadge])}>
@@ -40,7 +40,7 @@ export const EnterpriseBadge: React.FC = () => {
   )
 }
 
-export const VersionBadge: React.FC<{
+export const VersionBadge: FC<{
   version: string
 }> = ({ version }) => {
   const styles = useStyles()
@@ -51,7 +51,7 @@ export const VersionBadge: React.FC<{
   )
 }
 
-export const Badges: React.FC<PropsWithChildren> = ({ children }) => {
+export const Badges: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
   return (
     <Stack
diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
index 33d8db4d57d2d..a9d2986ee5046 100644
--- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
+++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
@@ -2,12 +2,13 @@ import { makeStyles } from "@material-ui/core/styles"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
 import { Sidebar } from "./Sidebar"
-import React, {
+import {
   createContext,
   PropsWithChildren,
   Suspense,
   useContext,
   useEffect,
+  FC,
 } from "react"
 import { useActor } from "@xstate/react"
 import { XServiceContext } from "xServices/StateContext"
@@ -30,9 +31,7 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
   return context
 }
 
-export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
+export const DeploySettingsLayout: FC<PropsWithChildren> = ({ children }) => {
   const xServices = useContext(XServiceContext)
   const [state, send] = useActor(xServices.deploymentConfigXService)
   const styles = useStyles()
diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
index 9bec8f2322684..ea13402982f64 100644
--- a/site/src/components/DeploySettingsLayout/Fieldset.tsx
+++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -1,13 +1,13 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC, ReactNode, FormEventHandler } from "react"
 import Button from "@material-ui/core/Button"
 
-export const Fieldset: React.FC<{
-  children: React.ReactNode
+export const Fieldset: FC<{
+  children: ReactNode
   title: string | JSX.Element
   validation?: string | JSX.Element | false
   button?: JSX.Element | false
-  onSubmit: React.FormEventHandler<HTMLFormElement>
+  onSubmit: FormEventHandler<HTMLFormElement>
   isSubmitting?: boolean
 }> = ({ title, children, validation, button, onSubmit, isSubmitting }) => {
   const styles = useStyles()
diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
index 638725fbd1070..858a76c221086 100644
--- a/site/src/components/DeploySettingsLayout/Header.tsx
+++ b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
 import { Stack } from "components/Stack/Stack"
-import React from "react"
+import { FC } from "react"
 
-export const Header: React.FC<{
+export const Header: FC<{
   title: string | JSX.Element
   description?: string | JSX.Element
   secondary?: boolean
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
index d82aeff1d41d4..2a8f82a942265 100644
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -1,27 +1,25 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React, { PropsWithChildren } from "react"
+import { PropsWithChildren, FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { DisabledBadge, EnabledBadge } from "./Badges"
 
-export const OptionName: React.FC<PropsWithChildren> = ({ children }) => {
+export const OptionName: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
   return <span className={styles.optionName}>{children}</span>
 }
 
-export const OptionDescription: React.FC<PropsWithChildren> = ({
-  children,
-}) => {
+export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
   return <span className={styles.optionDescription}>{children}</span>
 }
 
-const NotSet: React.FC = () => {
+const NotSet: FC = () => {
   const styles = useStyles()
 
   return <span className={styles.optionValue}>Not set</span>
 }
 
-export const OptionValue: React.FC<PropsWithChildren> = ({ children }) => {
+export const OptionValue: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
 
   if (typeof children === "boolean") {
diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
index 4e793629261d9..4a1b04973c320 100644
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@@ -11,9 +11,9 @@ import {
   OptionName,
   OptionValue,
 } from "components/DeploySettingsLayout/Option"
-import React from "react"
+import { FC } from "react"
 
-const OptionsTable: React.FC<{
+const OptionsTable: FC<{
   options: Record<string, DeploymentConfigField<Flaggable>>
 }> = ({ options }) => {
   const styles = useStyles()
diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
index 9e0b32f8c481c..f051ea930db19 100644
--- a/site/src/components/DeploySettingsLayout/Sidebar.tsx
+++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -6,11 +6,11 @@ import Globe from "@material-ui/icons/Public"
 import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
 import { GitIcon } from "components/Icons/GitIcon"
 import { Stack } from "components/Stack/Stack"
-import React, { ElementType, PropsWithChildren, ReactNode } from "react"
+import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
 import { NavLink } from "react-router-dom"
 import { combineClasses } from "util/combineClasses"
 
-const SidebarNavItem: React.FC<
+const SidebarNavItem: FC<
   PropsWithChildren<{ href: string; icon: ReactNode }>
 > = ({ children, href, icon }) => {
   const styles = useStyles()
@@ -32,9 +32,7 @@ const SidebarNavItem: React.FC<
   )
 }
 
-const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
-  icon: Icon,
-}) => {
+const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
   const styles = useStyles()
   return <Icon className={styles.sidebarNavItemIcon} />
 }
diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index d6fbb08fa69b4..0028fc84992e7 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -1,7 +1,7 @@
 import DialogActions from "@material-ui/core/DialogActions"
 import { alpha, makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React, { ReactNode } from "react"
+import { ReactNode, FC, PropsWithChildren } from "react"
 import {
   Dialog,
   DialogActionButtons,
@@ -37,7 +37,7 @@ export interface ConfirmDialogProps
     DialogActionButtonsProps,
     "color" | "confirmDialog" | "onCancel"
   > {
-  readonly description?: React.ReactNode
+  readonly description?: ReactNode
   /**
    * hideCancel hides the cancel button when set true, and shows the cancel
    * button when set to false. When undefined:
@@ -88,9 +88,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<
-  React.PropsWithChildren<ConfirmDialogProps>
-> = ({
+export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
   cancelText,
   confirmLoading,
   confirmText,
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index 78b16b853d276..6f6026ae404e7 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -4,7 +4,7 @@ import TextField from "@material-ui/core/TextField"
 import Typography from "@material-ui/core/Typography"
 import { Maybe } from "components/Conditionals/Maybe"
 import { Stack } from "components/Stack/Stack"
-import React, { ChangeEvent, useState } from "react"
+import { ChangeEvent, useState, PropsWithChildren, FC } from "react"
 import { useTranslation } from "react-i18next"
 import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
 
@@ -18,9 +18,15 @@ export interface DeleteDialogProps {
   confirmLoading?: boolean
 }
 
-export const DeleteDialog: React.FC<
-  React.PropsWithChildren<DeleteDialogProps>
-> = ({ isOpen, onCancel, onConfirm, entity, info, name, confirmLoading }) => {
+export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+  entity,
+  info,
+  name,
+  confirmLoading,
+}) => {
   const styles = useStyles()
   const { t } = useTranslation("common")
   const [nameValue, setNameValue] = useState("")
diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
index 3080452d6cc8b..9f6eae8c971a6 100644
--- a/site/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
-import React, { Component, ReactNode } from "react"
+import { Component, ReactNode, PropsWithChildren } from "react"
 import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"
 
-type ErrorBoundaryProps = React.PropsWithChildren<unknown>
+type ErrorBoundaryProps = PropsWithChildren<unknown>
 
 interface ErrorBoundaryState {
   error: Error | null
diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx
index 39755b286ba7e..7b196681d0f9b 100644
--- a/site/src/components/FormCloseButton/FormCloseButton.tsx
+++ b/site/src/components/FormCloseButton/FormCloseButton.tsx
@@ -1,16 +1,16 @@
 import IconButton from "@material-ui/core/IconButton"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React, { useEffect } from "react"
+import { useEffect, FC, PropsWithChildren } from "react"
 import { CloseIcon } from "../Icons/CloseIcon"
 
 export interface FormCloseButtonProps {
   onClose: () => void
 }
 
-export const FormCloseButton: React.FC<
-  React.PropsWithChildren<FormCloseButtonProps>
-> = ({ onClose }) => {
+export const FormCloseButton: FC<PropsWithChildren<FormCloseButtonProps>> = ({
+  onClose,
+}) => {
   const styles = useStyles()
 
   useEffect(() => {
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
index 8b05e29696537..7eed5d2c8a6ba 100644
--- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React, { useCallback, useState } from "react"
+import { useCallback, useState, FC } from "react"
 import { useCustomEvent } from "../../hooks/events"
 import { CustomEventListener } from "../../util/events"
 import { EnterpriseSnackbar } from "../EnterpriseSnackbar/EnterpriseSnackbar"
@@ -25,7 +25,7 @@ const variantFromMsgType = (type: MsgType) => {
   }
 }
 
-export const GlobalSnackbar: React.FC = () => {
+export const GlobalSnackbar: FC = () => {
   const styles = useStyles()
   const [open, setOpen] = useState<boolean>(false)
   const [notification, setNotification] = useState<NotificationMsg>()
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index 8becdb8cba783..12c3722d8b429 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -6,7 +6,7 @@ import TableCell from "@material-ui/core/TableCell"
 import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
-import React, { FC } from "react"
+import { FC, memo } from "react"
 import ReactMarkdown from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import gfm from "remark-gfm"
@@ -98,7 +98,7 @@ export const Markdown: FC<{ children: string }> = ({ children }) => {
   )
 }
 
-export const MemoizedMarkdown = React.memo(Markdown)
+export const MemoizedMarkdown = memo(Markdown)
 
 const useStyles = makeStyles((theme) => ({
   markdown: {
diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
index c1e6e7e1044e8..811410e2b21cb 100644
--- a/site/src/components/Navbar/Navbar.tsx
+++ b/site/src/components/Navbar/Navbar.tsx
@@ -1,11 +1,11 @@
 import { shallowEqual, useActor, useSelector } from "@xstate/react"
 import { FeatureNames } from "api/types"
-import React, { useContext } from "react"
+import { useContext, FC } from "react"
 import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors"
 import { XServiceContext } from "../../xServices/StateContext"
 import { NavbarView } from "../NavbarView/NavbarView"
 
-export const Navbar: React.FC = () => {
+export const Navbar: FC = () => {
   const xServices = useContext(XServiceContext)
   const [appearanceState] = useActor(xServices.appearanceXService)
   const [authState, authSend] = useActor(xServices.authXService)
diff --git a/site/src/components/PasswordField/PasswordField.tsx b/site/src/components/PasswordField/PasswordField.tsx
index e6250bb5070b9..2463ac4fbbe5f 100644
--- a/site/src/components/PasswordField/PasswordField.tsx
+++ b/site/src/components/PasswordField/PasswordField.tsx
@@ -4,13 +4,14 @@ import { makeStyles } from "@material-ui/core/styles"
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
 import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined"
 import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined"
-import React, { useCallback, useState } from "react"
+import { useCallback, useState, FC, PropsWithChildren } from "react"
 
 type PasswordFieldProps = Omit<TextFieldProps, "InputProps" | "type">
 
-export const PasswordField: React.FC<
-  React.PropsWithChildren<PasswordFieldProps>
-> = ({ variant = "outlined", ...rest }) => {
+export const PasswordField: FC<PropsWithChildren<PasswordFieldProps>> = ({
+  variant = "outlined",
+  ...rest
+}) => {
   const styles = useStyles()
   const [showPassword, setShowPassword] = useState<boolean>(false)
 
diff --git a/site/src/components/RequireAuth/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx
index 8786b5a718953..f2e79b82f9a2f 100644
--- a/site/src/components/RequireAuth/RequireAuth.tsx
+++ b/site/src/components/RequireAuth/RequireAuth.tsx
@@ -1,5 +1,5 @@
 import { useActor } from "@xstate/react"
-import React, { useContext } from "react"
+import { useContext, FC, PropsWithChildren } from "react"
 import { Navigate, useLocation } from "react-router"
 import { embedRedirect } from "../../util/redirect"
 import { XServiceContext } from "../../xServices/StateContext"
@@ -9,9 +9,9 @@ export interface RequireAuthProps {
   children: JSX.Element
 }
 
-export const RequireAuth: React.FC<
-  React.PropsWithChildren<RequireAuthProps>
-> = ({ children }) => {
+export const RequireAuth: FC<PropsWithChildren<RequireAuthProps>> = ({
+  children,
+}) => {
   const xServices = useContext(XServiceContext)
   const [authState] = useActor(xServices.authXService)
   const location = useLocation()
diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
index 85d99d3fbb13b..dd7c38caedfb3 100644
--- a/site/src/components/Resources/ResourceAvatar.tsx
+++ b/site/src/components/Resources/ResourceAvatar.tsx
@@ -1,6 +1,6 @@
 import Avatar from "@material-ui/core/Avatar"
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { WorkspaceResource } from "../../api/typesGenerated"
 
 const FALLBACK_ICON = "/icon/widgets.svg"
@@ -34,7 +34,7 @@ const getIconPathResource = (resourceType: string): string => {
 
 export type ResourceAvatarProps = { resource: WorkspaceResource }
 
-export const ResourceAvatar: React.FC<ResourceAvatarProps> = ({ resource }) => {
+export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
   const hasIcon = resource.icon && resource.icon !== ""
   const avatarSrc = hasIcon ? resource.icon : getIconPathResource(resource.type)
   const styles = useStyles()
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
index ff8981eea9498..46416dafc54ab 100644
--- a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
+++ b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
-import React, { useEffect, useReducer } from "react"
+import { useEffect, useReducer, FC } from "react"
 import { mapStackTrace } from "sourcemapped-stacktrace"
 import { Margins } from "../Margins/Margins"
 import { Section } from "../Section/Section"
@@ -61,9 +61,7 @@ const ErrorStateDescription = ({ emailBody }: { emailBody?: string }) => {
 /**
  * An error UI that is displayed when our error boundary (ErrorBoundary.tsx) is triggered
  */
-export const RuntimeErrorState: React.FC<RuntimeErrorStateProps> = ({
-  error,
-}) => {
+export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
   const styles = useStyles()
   const [reportState, dispatch] = useReducer(reducer, {
     error,
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
index 1b73f0ffe86bf..152e51ed45b79 100644
--- a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
+++ b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -1,6 +1,6 @@
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
@@ -49,7 +49,7 @@ export interface SecurityFormProps {
   initialTouched?: FormikTouched<SecurityFormValues>
 }
 
-export const SecurityForm: React.FC<SecurityFormProps> = ({
+export const SecurityForm: FC<SecurityFormProps> = ({
   isLoading,
   onSubmit,
   initialValues,
diff --git a/site/src/components/TableCellData/TableCellData.tsx b/site/src/components/TableCellData/TableCellData.tsx
index 92a089e4bc098..21e88e3f7a7f9 100644
--- a/site/src/components/TableCellData/TableCellData.tsx
+++ b/site/src/components/TableCellData/TableCellData.tsx
@@ -1,28 +1,26 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React, { ReactNode } from "react"
+import { ReactNode, FC, PropsWithChildren } from "react"
 import { Stack } from "../Stack/Stack"
 
 interface StyleProps {
   highlight?: boolean
 }
 
-export const TableCellData: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
+export const TableCellData: FC<{ children: ReactNode }> = ({ children }) => {
   return <Stack spacing={0}>{children}</Stack>
 }
 
-export const TableCellDataPrimary: React.FC<
-  React.PropsWithChildren<{ highlight?: boolean }>
+export const TableCellDataPrimary: FC<
+  PropsWithChildren<{ highlight?: boolean }>
 > = ({ children, highlight }) => {
   const styles = useStyles({ highlight })
 
   return <span className={styles.primary}>{children}</span>
 }
 
-export const TableCellDataSecondary: React.FC<
-  React.PropsWithChildren<unknown>
-> = ({ children }) => {
+export const TableCellDataSecondary: FC<PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   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 72f4721f407a2..610a23db0bc3b 100644
--- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -3,7 +3,14 @@ import Popover, { PopoverProps } from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
 import HelpIcon from "@material-ui/icons/HelpOutline"
 import OpenInNewIcon from "@material-ui/icons/OpenInNew"
-import React, { createContext, useContext, useRef, useState } from "react"
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  FC,
+  PropsWithChildren,
+} from "react"
 import { combineClasses } from "util/combineClasses"
 import { Stack } from "../../Stack/Stack"
 
@@ -39,7 +46,7 @@ const useHelpTooltip = () => {
   return helpTooltipContext
 }
 
-export const HelpPopover: React.FC<
+export const HelpPopover: FC<
   PopoverProps & { onOpen: () => void; onClose: () => void }
 > = ({ onOpen, onClose, children, ...props }) => {
   const styles = useStyles({ size: "small" })
@@ -68,9 +75,7 @@ export const HelpPopover: React.FC<
   )
 }
 
-export const HelpTooltip: React.FC<
-  React.PropsWithChildren<HelpTooltipProps>
-> = ({
+export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
   children,
   open,
   size = "medium",
@@ -122,7 +127,7 @@ export const HelpTooltip: React.FC<
   )
 }
 
-export const HelpTooltipTitle: React.FC<React.PropsWithChildren<unknown>> = ({
+export const HelpTooltipTitle: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
   const styles = useStyles({})
@@ -130,7 +135,7 @@ export const HelpTooltipTitle: React.FC<React.PropsWithChildren<unknown>> = ({
   return <h4 className={styles.title}>{children}</h4>
 }
 
-export const HelpTooltipText: React.FC<React.PropsWithChildren<unknown>> = ({
+export const HelpTooltipText: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
   const styles = useStyles({})
@@ -138,9 +143,10 @@ export const HelpTooltipText: React.FC<React.PropsWithChildren<unknown>> = ({
   return <p className={styles.text}>{children}</p>
 }
 
-export const HelpTooltipLink: React.FC<
-  React.PropsWithChildren<{ href: string }>
-> = ({ children, href }) => {
+export const HelpTooltipLink: FC<PropsWithChildren<{ href: string }>> = ({
+  children,
+  href,
+}) => {
   const styles = useStyles({})
 
   return (
@@ -151,8 +157,8 @@ export const HelpTooltipLink: React.FC<
   )
 }
 
-export const HelpTooltipAction: React.FC<
-  React.PropsWithChildren<{
+export const HelpTooltipAction: FC<
+  PropsWithChildren<{
     icon: Icon
     onClick: () => void
     ariaLabel?: string
@@ -177,9 +183,9 @@ export const HelpTooltipAction: React.FC<
   )
 }
 
-export const HelpTooltipLinksGroup: React.FC<
-  React.PropsWithChildren<unknown>
-> = ({ children }) => {
+export const HelpTooltipLinksGroup: FC<PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const styles = useStyles({})
 
   return (
diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
index fc5367bcb50ba..e9650fc29d8dd 100644
--- a/site/src/components/UserDropdown/UsersDropdown.tsx
+++ b/site/src/components/UserDropdown/UsersDropdown.tsx
@@ -1,7 +1,7 @@
 import Badge from "@material-ui/core/Badge"
 import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
-import React, { useState } from "react"
+import { useState, FC, PropsWithChildren, MouseEvent } from "react"
 import { colors } from "theme/colors"
 import * as TypesGen from "../../api/typesGenerated"
 import { navHeight } from "../../theme/constants"
@@ -16,13 +16,15 @@ export interface UserDropdownProps {
   onSignOut: () => void
 }
 
-export const UserDropdown: React.FC<
-  React.PropsWithChildren<UserDropdownProps>
-> = ({ buildInfo, user, onSignOut }: UserDropdownProps) => {
+export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
+  buildInfo,
+  user,
+  onSignOut,
+}: UserDropdownProps) => {
   const styles = useStyles()
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
 
-  const handleDropdownClick = (ev: React.MouseEvent<HTMLLIElement>): void => {
+  const handleDropdownClick = (ev: MouseEvent<HTMLLIElement>): void => {
     setAnchorEl(ev.currentTarget)
   }
   const onPopoverClose = () => {
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
index b5eacf54e453e..540858e9bd5e9 100644
--- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx
+++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -1,7 +1,7 @@
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React, { HTMLProps } from "react"
+import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react"
 import { CardPadding } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 
@@ -9,14 +9,17 @@ export interface WorkspaceSectionProps {
   /**
    * action appears in the top right of the section card
    */
-  action?: React.ReactNode
+  action?: ReactNode
   contentsProps?: HTMLProps<HTMLDivElement>
   title?: string | JSX.Element
 }
 
-export const WorkspaceSection: React.FC<
-  React.PropsWithChildren<WorkspaceSectionProps>
-> = ({ action, children, contentsProps, title }) => {
+export const WorkspaceSection: FC<PropsWithChildren<WorkspaceSectionProps>> = ({
+  action,
+  children,
+  contentsProps,
+  title,
+}) => {
   const styles = useStyles()
 
   return (
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index 43625ee63203f..1df7f9a9a340c 100644
--- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -5,10 +5,10 @@ import PlayIcon from "@material-ui/icons/PlayArrowOutlined"
 import { WorkspaceBuild } from "api/typesGenerated"
 import { Pill } from "components/Pill/Pill"
 import i18next from "i18next"
-import React from "react"
+import { FC, ReactNode, PropsWithChildren } from "react"
 import { PaletteIndex } from "theme/palettes"
 
-const LoadingIcon: React.FC = () => {
+const LoadingIcon: FC = () => {
   return <CircularProgress size={10} style={{ color: "#FFF" }} />
 }
 
@@ -17,7 +17,7 @@ export const getStatus = (
 ): {
   type?: PaletteIndex
   text: string
-  icon: React.ReactNode
+  icon: ReactNode
 } => {
   const { t } = i18next
 
@@ -95,8 +95,8 @@ export type WorkspaceStatusBadgeProps = {
   className?: string
 }
 
-export const WorkspaceStatusBadge: React.FC<
-  React.PropsWithChildren<WorkspaceStatusBadgeProps>
+export const WorkspaceStatusBadge: FC<
+  PropsWithChildren<WorkspaceStatusBadgeProps>
 > = ({ build, className }) => {
   const { text, icon, type } = getStatus(build)
   return <Pill className={className} icon={icon} text={text} type={type} />
diff --git a/site/src/pages/CliAuthPage/CliAuthPage.tsx b/site/src/pages/CliAuthPage/CliAuthPage.tsx
index 9bc89120843fd..0358a9f9d13eb 100644
--- a/site/src/pages/CliAuthPage/CliAuthPage.tsx
+++ b/site/src/pages/CliAuthPage/CliAuthPage.tsx
@@ -1,14 +1,12 @@
 import { useActor } from "@xstate/react"
-import React, { useContext, useEffect, useState } from "react"
+import { useContext, useEffect, useState, FC, PropsWithChildren } from "react"
 import { Helmet } from "react-helmet-async"
 import { getApiKey } from "../../api/api"
 import { pageTitle } from "../../util/page"
 import { XServiceContext } from "../../xServices/StateContext"
 import { CliAuthPageView } from "./CliAuthPageView"
 
-export const CliAuthenticationPage: React.FC<
-  React.PropsWithChildren<unknown>
-> = () => {
+export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {
   const xServices = useContext(XServiceContext)
   const [authState] = useActor(xServices.authXService)
   const { me } = authState.context
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
index d512a60859e3f..aa2f08202d00b 100644
--- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx
+++ b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { CodeExample } from "components/CodeExample/CodeExample"
 import { SignInLayout } from "components/SignInLayout/SignInLayout"
 import { Welcome } from "components/Welcome/Welcome"
-import React from "react"
+import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 
@@ -11,9 +11,7 @@ export interface CliAuthPageViewProps {
   sessionToken: string | null
 }
 
-export const CliAuthPageView: React.FC<CliAuthPageViewProps> = ({
-  sessionToken,
-}) => {
+export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
   const styles = useStyles()
 
   if (!sessionToken) {
diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
index 295cb34d5e686..29d1030f19ebf 100644
--- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
+++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
@@ -2,7 +2,7 @@ import Avatar from "@material-ui/core/Avatar"
 import { makeStyles } from "@material-ui/core/styles"
 import { Template, TemplateExample } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
-import React, { FC } from "react"
+import { FC } from "react"
 import { firstLetter } from "util/firstLetter"
 
 export interface SelectedTemplateProps {
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
index 81bcfe2c1554c..ee1e1809d9a2c 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import { FeatureNames } from "api/types"
 import { AppearanceConfig } from "api/typesGenerated"
-import React, { useContext } from "react"
+import { useContext, FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { XServiceContext } from "xServices/StateContext"
@@ -11,7 +11,7 @@ import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"
 // implements a form, whereas the others are read-only. We make this
 // exception because the Service Banner is visual, and configuring it from
 // the command line would be a significantly worse user experience.
-const AppearanceSettingsPage: React.FC = () => {
+const AppearanceSettingsPage: FC = () => {
   const xServices = useContext(XServiceContext)
   const [appearanceXService, appearanceSend] = useActor(
     xServices.appearanceXService,
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
index 0cb1528a88247..111011d4e014f 100644
--- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -1,10 +1,10 @@
 import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { GeneralSettingsPageView } from "./GeneralSettingsPageView"
 
-const GeneralSettingsPage: React.FC = () => {
+const GeneralSettingsPage: FC = () => {
   const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
   return (
diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage.tsx
index 0b2e1682ffec8..ecbb193726f64 100644
--- a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPage.tsx
@@ -1,10 +1,10 @@
 import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { GitAuthSettingsPageView } from "./GitAuthSettingsPageView"
 
-const GitAuthSettingsPage: React.FC = () => {
+const GitAuthSettingsPage: FC = () => {
   const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
   return (
diff --git a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx b/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx
index ac60b4ff7678e..fad3beccb5b04 100644
--- a/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage.tsx
@@ -1,10 +1,10 @@
 import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { NetworkSettingsPageView } from "./NetworkSettingsPageView"
 
-const NetworkSettingsPage: React.FC = () => {
+const NetworkSettingsPage: FC = () => {
   const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
   return (
diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
index 914928094fe64..82f0b0c1cbedb 100644
--- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx
@@ -1,13 +1,13 @@
 import { useActor } from "@xstate/react"
 import { FeatureNames } from "api/types"
 import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import React, { useContext } from "react"
+import { useContext, FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { XServiceContext } from "xServices/StateContext"
 import { SecuritySettingsPageView } from "./SecuritySettingsPageView"
 
-const SecuritySettingsPage: React.FC = () => {
+const SecuritySettingsPage: FC = () => {
   const { deploymentConfig: deploymentConfig } = useDeploySettings()
   const xServices = useContext(XServiceContext)
   const [entitlementsState] = useActor(xServices.entitlementsXService)
diff --git a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx
index f88e9217acd61..13e58139ffd12 100644
--- a/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPage.tsx
@@ -1,10 +1,10 @@
 import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView"
 
-const UserAuthSettingsPage: React.FC = () => {
+const UserAuthSettingsPage: FC = () => {
   const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
   return (
diff --git a/site/src/pages/GitAuthPage/GitAuthPage.tsx b/site/src/pages/GitAuthPage/GitAuthPage.tsx
index 3b6866f56214f..27eacef1bd257 100644
--- a/site/src/pages/GitAuthPage/GitAuthPage.tsx
+++ b/site/src/pages/GitAuthPage/GitAuthPage.tsx
@@ -2,10 +2,10 @@ import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import { SignInLayout } from "components/SignInLayout/SignInLayout"
 import { Welcome } from "components/Welcome/Welcome"
-import React from "react"
+import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 
-const GitAuthPage: React.FC = () => {
+const GitAuthPage: FC = () => {
   const styles = useStyles()
 
   return (
diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
index e5b67c8d4ff29..0864a452ff3ea 100644
--- a/site/src/pages/GroupsPage/CreateGroupPage.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -1,13 +1,13 @@
 import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate } from "react-router-dom"
 import { pageTitle } from "util/page"
 import { createGroupMachine } from "xServices/groups/createGroupXService"
 import CreateGroupPageView from "./CreateGroupPageView"
 
-export const CreateGroupPage: React.FC = () => {
+export const CreateGroupPage: FC = () => {
   const navigate = useNavigate()
   const organizationId = useOrganizationId()
   const [createState, sendCreateEvent] = useMachine(createGroupMachine, {
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
index 2af7ecc257158..e025d6263e2d8 100644
--- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -4,7 +4,7 @@ import { FormFooter } from "components/FormFooter/FormFooter"
 import { FullPageForm } from "components/FullPageForm/FullPageForm"
 import { Margins } from "components/Margins/Margins"
 import { useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import * as Yup from "yup"
@@ -19,7 +19,7 @@ export type CreateGroupPageViewProps = {
   isLoading: boolean
 }
 
-export const CreateGroupPageView: React.FC<CreateGroupPageViewProps> = ({
+export const CreateGroupPageView: FC<CreateGroupPageViewProps> = ({
   onSubmit,
   formErrors,
   isLoading,
diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx
index 1802a1e421d20..3319fe74e2126 100644
--- a/site/src/pages/GroupsPage/GroupsPage.tsx
+++ b/site/src/pages/GroupsPage/GroupsPage.tsx
@@ -2,13 +2,13 @@ import { useMachine } from "@xstate/react"
 import { useFeatureVisibility } from "hooks/useFeatureVisibility"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { usePermissions } from "hooks/usePermissions"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "util/page"
 import { groupsMachine } from "xServices/groups/groupsXService"
 import GroupsPageView from "./GroupsPageView"
 
-export const GroupsPage: React.FC = () => {
+export const GroupsPage: FC = () => {
   const organizationId = useOrganizationId()
   const [state] = useMachine(groupsMachine, {
     context: {
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
index 20510ab37a19a..2d6982f276830 100644
--- a/site/src/pages/GroupsPage/GroupsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -17,7 +17,7 @@ import { EmptyState } from "components/EmptyState/EmptyState"
 import { Stack } from "components/Stack/Stack"
 import { TableLoader } from "components/TableLoader/TableLoader"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
-import React from "react"
+import { FC } from "react"
 import { Link as RouterLink, useNavigate } from "react-router-dom"
 import { Paywall } from "components/Paywall/Paywall"
 import { Group } from "api/typesGenerated"
@@ -29,7 +29,7 @@ export type GroupsPageViewProps = {
   isTemplateRBACEnabled: boolean
 }
 
-export const GroupsPageView: React.FC<GroupsPageViewProps> = ({
+export const GroupsPageView: FC<GroupsPageViewProps> = ({
   groups,
   canCreateGroup,
   isTemplateRBACEnabled,
diff --git a/site/src/pages/GroupsPage/SettingsGroupPage.tsx b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
index 4460292d0d840..d8b2dd05851a1 100644
--- a/site/src/pages/GroupsPage/SettingsGroupPage.tsx
+++ b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
@@ -1,12 +1,12 @@
 import { useMachine } from "@xstate/react"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate, useParams } from "react-router-dom"
 import { pageTitle } from "util/page"
 import { editGroupMachine } from "xServices/groups/editGroupXService"
 import SettingsGroupPageView from "./SettingsGroupPageView"
 
-export const SettingsGroupPage: React.FC = () => {
+export const SettingsGroupPage: FC = () => {
   const { groupId } = useParams()
   if (!groupId) {
     throw new Error("Group ID not defined.")
diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
index 80c08296b809a..dd1cf83abb20e 100644
--- a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
+++ b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx
@@ -13,7 +13,7 @@ import { FullPageForm } from "components/FullPageForm/FullPageForm"
 import { FullScreenLoader } from "components/Loader/FullScreenLoader"
 import { Margins } from "components/Margins/Margins"
 import { useFormik } from "formik"
-import React, { useRef, useState } from "react"
+import { useRef, useState, FC } from "react"
 import { useTranslation } from "react-i18next"
 import { colors } from "theme/colors"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
@@ -30,7 +30,7 @@ const validationSchema = Yup.object({
   quota_allowance: Yup.number().required().min(0).integer(),
 })
 
-const UpdateGroupForm: React.FC<{
+const UpdateGroupForm: FC<{
   group: Group
   errors: unknown
   onSubmit: (data: FormData) => void
@@ -153,7 +153,7 @@ export type SettingsGroupPageViewProps = {
   isUpdating: boolean
 }
 
-export const SettingsGroupPageView: React.FC<SettingsGroupPageViewProps> = ({
+export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
   onCancel,
   onSubmit,
   group,
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
index 58563990370a1..7a6701026694d 100644
--- a/site/src/pages/TemplatesPage/TemplatesPage.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,13 +1,13 @@
 import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { usePermissions } from "hooks/usePermissions"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "../../util/page"
 import { templatesMachine } from "../../xServices/templates/templatesXService"
 import { TemplatesPageView } from "./TemplatesPageView"
 
-export const TemplatesPage: React.FC = () => {
+export const TemplatesPage: FC = () => {
   const organizationId = useOrganizationId()
   const permissions = usePermissions()
   const [templatesState] = useMachine(templatesMachine, {
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
index 31381a0499e4b..94cb1eb369154 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,5 +1,5 @@
 import { useActor } from "@xstate/react"
-import React, { useContext } from "react"
+import { useContext, FC } from "react"
 import { Section } from "../../../components/Section/Section"
 import { AccountForm } from "../../../components/SettingsAccountForm/SettingsAccountForm"
 import { XServiceContext } from "../../../xServices/StateContext"
@@ -8,7 +8,7 @@ export const Language = {
   title: "Account",
 }
 
-export const AccountPage: React.FC = () => {
+export const AccountPage: FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { me, permissions, updateProfileError } = authState.context
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
index f4836e08c83d5..cf18ba303d2c5 100644
--- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
+++ b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
@@ -1,5 +1,5 @@
 import { useActor } from "@xstate/react"
-import React, { useContext, useEffect } from "react"
+import { useContext, useEffect, PropsWithChildren, FC } from "react"
 import { ConfirmDialog } from "../../../components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Section } from "../../../components/Section/Section"
 import { XServiceContext } from "../../../xServices/StateContext"
@@ -23,7 +23,7 @@ export const Language = {
   cancelLabel: "Cancel",
 }
 
-export const SSHKeysPage: React.FC<React.PropsWithChildren<unknown>> = () => {
+export const SSHKeysPage: FC<PropsWithChildren<unknown>> = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { sshKey, getSSHKeyError, regenerateSSHKeyError } = authState.context
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
index 956789b945c5f..bf5905c85c1fc 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -1,6 +1,6 @@
 import { useMachine } from "@xstate/react"
 import { useMe } from "hooks/useMe"
-import React from "react"
+import { FC } from "react"
 import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService"
 import { Section } from "../../../components/Section/Section"
 import { SecurityForm } from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
@@ -9,7 +9,7 @@ export const Language = {
   title: "Security",
 }
 
-export const SecurityPage: React.FC = () => {
+export const SecurityPage: FC = () => {
   const me = useMe()
   const [securityState, securitySend] = useMachine(
     userSecuritySettingsMachine,
diff --git a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
index bbe5771a18479..e767c27fc4d49 100644
--- a/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
+++ b/site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx
@@ -1,6 +1,6 @@
 import { useMachine } from "@xstate/react"
 import { useOrganizationId } from "hooks/useOrganizationId"
-import React from "react"
+import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate } from "react-router"
 import { createUserMachine } from "xServices/users/createUserXService"
@@ -13,7 +13,7 @@ export const Language = {
   unknownError: "Oops, an unknown error occurred.",
 }
 
-export const CreateUserPage: React.FC = () => {
+export const CreateUserPage: FC = () => {
   const myOrgId = useOrganizationId()
   const navigate = useNavigate()
   const [createUserState, createUserSend] = useMachine(createUserMachine, {
diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
index 744c18a38706e..a709f58a64ddc 100644
--- a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
+++ b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -6,7 +6,7 @@ import { Margins } from "components/Margins/Margins"
 import dayjs from "dayjs"
 import { scheduleToAutoStart } from "pages/WorkspaceSchedulePage/schedule"
 import { ttlMsToAutoStop } from "pages/WorkspaceSchedulePage/ttl"
-import React, { useEffect } from "react"
+import { useEffect, FC } from "react"
 import { useTranslation } from "react-i18next"
 import { Navigate, useNavigate, useParams } from "react-router-dom"
 import { scheduleChanged } from "util/schedule"
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const WorkspaceSchedulePage: React.FC = () => {
+export const WorkspaceSchedulePage: FC = () => {
   const { t } = useTranslation("workspaceSchedulePage")
   const styles = useStyles()
   const { username: usernameQueryParam, workspace: workspaceQueryParam } =