coder · Kira-Pilot · May 31, 2022 · May 27, 2022 · May 27, 2022 · May 31, 2022
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -114,6 +114,9 @@ rules:
   react/jsx-curly-brace-presence:
     - error
     - children: ignore
+  # https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
+  react/jsx-uses-react: "off"
+  react/react-in-jsx-scope: "off"
 settings:
   react:
     version: detect

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { FC, lazy, Suspense } from "react"
 import { Route, Routes } from "react-router-dom"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
@@ -18,12 +18,12 @@ import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPag
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSchedulePage } from "./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"
 
-const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
-const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
-const CreateWorkspacePage = React.lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
+const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
+const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
+const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
 
-export const AppRouter: React.FC = () => (
-  <React.Suspense fallback={<></>}>
+export const AppRouter: FC = () => (
+  <Suspense fallback={<></>}>
     <Routes>
       <Route path="/">
         <Route
@@ -157,5 +157,5 @@ export const AppRouter: React.FC = () => (
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
-  </React.Suspense>
+  </Suspense>
 )
diff --git a/site/src/Main.tsx b/site/src/Main.tsx
@@ -1,5 +1,4 @@
 import { inspect } from "@xstate/inspect"
-import React from "react"
 import ReactDOM from "react-dom"
 import { Interpreter } from "xstate"
 import { App } from "./app"

diff --git a/site/src/__mocks__/react-markdown.tsx b/site/src/__mocks__/react-markdown.tsx
@@ -1,6 +1,6 @@
-import React from "react"
+import { FC } from "react"
 
-const ReactMarkdown: React.FC = ({ children }) => {
+const ReactMarkdown: FC = ({ children }) => {
   return <div data-testid="markdown">{children}</div>
 }
 

diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -1,6 +1,6 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-import React from "react"
+import { FC } from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
@@ -10,7 +10,7 @@ import { dark } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"
 
-export const App: React.FC = () => {
+export const App: FC = () => {
   return (
     <Router>
       <SWRConfig

diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
 import { RequireAuth } from "../RequireAuth/RequireAuth"
@@ -10,7 +10,7 @@ interface AuthAndFrameProps {
 /**
  * Wraps page in RequireAuth and renders it between Navbar and Footer
  */
-export const AuthAndFrame: React.FC<AuthAndFrameProps> = ({ children }) => (
+export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => (
   <RequireAuth>
     <>
       <Navbar />

diff --git a/site/src/components/AvatarData/AvatarData.stories.tsx b/site/src/components/AvatarData/AvatarData.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { AvatarData, AvatarDataProps } from "./AvatarData"
 
 export default {

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

diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow"
 import { BuildingIcon } from "../Icons/BuildingIcon"
 import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon"

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

diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
@@ -2,7 +2,7 @@ import ListItem from "@material-ui/core/ListItem"
 import { makeStyles } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import CheckIcon from "@material-ui/icons/Check"
-import React from "react"
+import { FC } from "react"
 import { NavLink } from "react-router-dom"
 import { ellipsizeText } from "../../util/ellipsizeText"
 import { Typography } from "../Typography/Typography"
@@ -26,7 +26,7 @@ interface BorderedMenuRowProps {
   onClick?: () => void
 }
 
-export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
+export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
   active,
   description,
   Icon,

diff --git a/site/src/components/BuildsTable/BuildsTable.stories.tsx b/site/src/components/BuildsTable/BuildsTable.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { MockBuilds } from "../../testHelpers/entities"
 import { BuildsTable, BuildsTableProps } from "./BuildsTable"
 

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -6,7 +6,7 @@ import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
-import React from "react"
+import { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
@@ -27,7 +27,7 @@ export interface BuildsTableProps {
   className?: string
 }
 
-export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) => {
+export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
   const isLoading = !builds
   const theme: Theme = useTheme()
   const navigate = useNavigate()

diff --git a/site/src/components/CliAuthToken/CliAuthToken.stories.tsx b/site/src/components/CliAuthToken/CliAuthToken.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CliAuthToken, CliAuthTokenProps } from "./CliAuthToken"
 
 export default {

diff --git a/site/src/components/CliAuthToken/CliAuthToken.test.tsx b/site/src/components/CliAuthToken/CliAuthToken.test.tsx
@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { CliAuthToken } from "./CliAuthToken"
 

diff --git a/site/src/components/CliAuthToken/CliAuthToken.tsx b/site/src/components/CliAuthToken/CliAuthToken.tsx
@@ -1,14 +1,14 @@
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC } from "react"
 import { CodeExample } from "../CodeExample/CodeExample"
 
 export interface CliAuthTokenProps {
   sessionToken: string
 }
 
-export const CliAuthToken: React.FC<CliAuthTokenProps> = ({ sessionToken }) => {
+export const CliAuthToken: FC<CliAuthTokenProps> = ({ sessionToken }) => {
   const styles = useStyles()
   return (
     <Paper className={styles.container}>

diff --git a/site/src/components/CodeBlock/CodeBlock.stories.tsx b/site/src/components/CodeBlock/CodeBlock.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CodeBlock, CodeBlockProps } from "./CodeBlock"
 
 const sampleLines = `Successfully assigned coder/image-jcws7 to cluster-1

diff --git a/site/src/components/CodeBlock/CodeBlock.test.tsx b/site/src/components/CodeBlock/CodeBlock.test.tsx
@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { CodeBlock } from "./CodeBlock"
 

diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -1,15 +1,15 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC, Fragment, ReactElement } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 
 export interface CodeBlockProps {
   lines: string[]
-  ctas?: React.ReactElement[]
+  ctas?: ReactElement[]
   className?: string
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
+export const CodeBlock: FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
   const styles = useStyles()
 
   return (
@@ -24,7 +24,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "
       {ctas && ctas.length && (
         <div className={styles.ctaBar}>
           {ctas.map((cta, i) => {
-            return <React.Fragment key={i}>{cta}</React.Fragment>
+            return <Fragment key={i}>{cta}</Fragment>
           })}
         </div>
       )}

diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CodeExample, CodeExampleProps } from "./CodeExample"
 
 const sampleCode = `echo "Hello, world"`

diff --git a/site/src/components/CodeExample/CodeExample.test.tsx b/site/src/components/CodeExample/CodeExample.test.tsx
@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { CodeExample } from "./CodeExample"
 

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { CopyButton } from "../CopyButton/CopyButton"
 
@@ -10,7 +10,7 @@ export interface CodeExampleProps {
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
+export const CodeExample: FC<CodeExampleProps> = ({ code }) => {
   const styles = useStyles()
 
   return (

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 export default {

diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx
@@ -1,11 +1,11 @@
 import { fireEvent, render } from "@testing-library/react"
-import React from "react"
+import { FC } from "react"
 import { act } from "react-dom/test-utils"
 import { WrapperComponent } from "../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 namespace Helpers {
-  export const Component: React.FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
+  export const Component: FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
     return (
       <WrapperComponent>
         <ConfirmDialog {...props} />

diff --git a/site/src/components/CreateUserForm/CreateUserForm.stories.tsx b/site/src/components/CreateUserForm/CreateUserForm.stories.tsx
@@ -1,6 +1,5 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
-import React from "react"
 import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
 
 export default {

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -1,7 +1,7 @@
 import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
@@ -34,7 +34,7 @@ const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
 })
 
-export const CreateUserForm: React.FC<CreateUserFormProps> = ({
+export const CreateUserForm: FC<CreateUserFormProps> = ({
   onSubmit,
   onCancel,
   formErrors,

diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
@@ -1,7 +1,7 @@
 import { fade, makeStyles, Theme } from "@material-ui/core/styles"
 import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
-import React from "react"
+import { FC } from "react"
 
 const useStyles = makeStyles((theme: Theme) => ({
   arrowIcon: {
@@ -15,12 +15,12 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export const OpenDropdown: React.FC = () => {
+export const OpenDropdown: FC = () => {
   const styles = useStyles()
   return <KeyboardArrowDown className={styles.arrowIcon} />
 }
 
-export const CloseDropdown: React.FC = () => {
+export const CloseDropdown: FC = () => {
   const styles = useStyles()
   return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
 }
diff --git a/site/src/components/EmptyState/EmptyState.test.tsx b/site/src/components/EmptyState/EmptyState.test.tsx
@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { EmptyState } from "./EmptyState"
 

diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -1,14 +1,14 @@
 import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC, ReactNode } from "react"
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */
   message: string
   /** Longer optional description to display below the message */
   description?: string
-  cta?: React.ReactNode
+  cta?: ReactNode
 }
 
 /**
@@ -19,7 +19,7 @@ export interface EmptyStateProps {
  * EmptyState's props extend the [Material UI Box component](https://material-ui.com/components/box/)
  * that you can directly pass props through to to customize the shape and layout of it.
  */
-export const EmptyState: React.FC<EmptyStateProps> = (props) => {
+export const EmptyState: FC<EmptyStateProps> = (props) => {
   const { message, description, cta, ...boxProps } = props
   const styles = useStyles()
 

diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx
@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { EnterpriseSnackbar, EnterpriseSnackbarProps } from "./EnterpriseSnackbar"
 
 export default {

diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
@@ -2,7 +2,7 @@ import IconButton from "@material-ui/core/IconButton"
 import Snackbar, { SnackbarProps as MuiSnackbarProps } from "@material-ui/core/Snackbar"
 import { makeStyles } from "@material-ui/core/styles"
 import CloseIcon from "@material-ui/icons/Close"
-import React from "react"
+import { FC } from "react"
 import { combineClasses } from "../../util/combineClasses"
 
 type EnterpriseSnackbarVariant = "error" | "info"
@@ -25,7 +25,7 @@ export interface EnterpriseSnackbarProps extends MuiSnackbarProps {
  *
  * See original component's Material UI documentation here: https://material-ui.com/components/snackbars/
  */
-export const EnterpriseSnackbar: React.FC<EnterpriseSnackbarProps> = ({
+export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
   onClose,
   variant = "info",
   ContentProps = {},