chore: forbid direct react import (#5658)

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

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

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

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

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()

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()

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

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") {

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()

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} />
 }

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,

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("")

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

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(() => {

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>()

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: {

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)

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)
 

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()

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()

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,

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 } 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,

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>

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 (

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 = () => {

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 (

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} />

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

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) {

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 {

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,

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 (

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 (

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 (

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)

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 (

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 (

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, {

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,

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: {

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,

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.")

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,

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, {

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

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

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,

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, {

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 } =