coder · Kira-Pilot · Jan 10, 2023 · Jan 10, 2023
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)