diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 7ee997c1e9aad..a50d0845b4134 100644 --- 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 index 978ed067e9f4f..c2e32619e5f92 100644 --- 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" @@ -19,12 +19,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 = () => ( - }> +export const AppRouter: FC = () => ( + }> ( } /> - + ) diff --git a/site/src/Main.tsx b/site/src/Main.tsx index 4abd5d0b0d1cf..885c778309865 100644 --- 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 index 14385e612c826..b9f9a13a35f5a 100644 --- 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
{children}
} diff --git a/site/src/app.tsx b/site/src/app.tsx index dd210ef8f022a..8782f663884d6 100644 --- 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 ( = ({ children }) => ( +export const AuthAndFrame: FC = ({ children }) => ( <> diff --git a/site/src/components/AvatarData/AvatarData.stories.tsx b/site/src/components/AvatarData/AvatarData.stories.tsx index da03672a13ef6..1f41e07a7d841 100644 --- 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 index 730d6f1f742b5..ee9d00138b6bb 100644 --- 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 = ({ title, subtitle, link }) => { +export const AvatarData: FC = ({ 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 index e53deab3fab06..779f4d8f8a309 100644 --- 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 index 3842b4be785a9..88eeef7867ade 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.tsx @@ -1,6 +1,6 @@ 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" @@ -8,7 +8,7 @@ export type BorderedMenuProps = Omit & { variant?: BorderedMenuVariant } -export const BorderedMenu: React.FC = ({ children, variant, ...rest }) => { +export const BorderedMenu: FC = ({ children, variant, ...rest }) => { const styles = useStyles() return ( diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 32b218b282853..6147108299d9f 100644 --- 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 = ({ +export const BorderedMenuRow: FC = ({ active, description, Icon, diff --git a/site/src/components/BuildsTable/BuildsTable.stories.tsx b/site/src/components/BuildsTable/BuildsTable.stories.tsx index 4626b8723cd87..e7791d428326e 100644 --- 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 index 683bbeee5fe91..1c20dec65c80e 100644 --- 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 = ({ builds, className }) => { +export const BuildsTable: FC = ({ 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 index 30fcab7f96042..93c6572678e5b 100644 --- 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 index 4f12ea7c63be0..26994cfff1273 100644 --- 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 index 75bb13dca5fdf..1f0ed8a82b70a 100644 --- 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 = ({ sessionToken }) => { +export const CliAuthToken: FC = ({ sessionToken }) => { const styles = useStyles() return ( diff --git a/site/src/components/CodeBlock/CodeBlock.stories.tsx b/site/src/components/CodeBlock/CodeBlock.stories.tsx index db2d1d22ca8cc..98bc4464afaad 100644 --- 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 index f3d7413418d56..3140893385c84 100644 --- 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 index eb5f6face2d62..4de4d0d955ef0 100644 --- 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 = ({ lines, ctas, className = "" }) => { +export const CodeBlock: FC = ({ lines, ctas, className = "" }) => { const styles = useStyles() return ( @@ -24,7 +24,7 @@ export const CodeBlock: React.FC = ({ lines, ctas, className = " {ctas && ctas.length && (
{ctas.map((cta, i) => { - return {cta} + return {cta} })}
)} diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx index 42e03ac80fc08..2853ff5e40328 100644 --- 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 index a94f2e3ff0db0..32d992f44eb24 100644 --- 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 index 326c5da65a820..d0ec4fe084252 100644 --- 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 = ({ code }) => { +export const CodeExample: FC = ({ code }) => { const styles = useStyles() return ( diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx index e295a9501aa7b..9c32bd7610dcf 100644 --- 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 index 8ea9fc8a2e540..27ea733ff6c7a 100644 --- 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 = (props: ConfirmDialogProps) => { + export const Component: FC = (props: ConfirmDialogProps) => { return ( diff --git a/site/src/components/CreateUserForm/CreateUserForm.stories.tsx b/site/src/components/CreateUserForm/CreateUserForm.stories.tsx index 1ae62559554e0..e19884883bf9b 100644 --- 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 index 710d41d6b6576..78ad0f6cfc5f0 100644 --- 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 = ({ +export const CreateUserForm: FC = ({ onSubmit, onCancel, formErrors, diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx index 4e236903f109e..6f64ad36d1451 100644 --- 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 } -export const CloseDropdown: React.FC = () => { +export const CloseDropdown: FC = () => { const styles = useStyles() return } diff --git a/site/src/components/EmptyState/EmptyState.test.tsx b/site/src/components/EmptyState/EmptyState.test.tsx index 0a33e516b7a65..c3c6a6e903fc1 100644 --- 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 index 0662beb0d6a65..c344a45033da6 100644 --- 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 = (props) => { +export const EmptyState: FC = (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 index e7ea55811dd48..2565cab09fc28 100644 --- 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 index b435e4777847d..070e255b34751 100644 --- 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 = ({ +export const EnterpriseSnackbar: FC = ({ onClose, variant = "info", ContentProps = {}, diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx index 1e54293b8ee87..a3c8a6d387a68 100644 --- a/site/src/components/ErrorBoundary/ErrorBoundary.tsx +++ b/site/src/components/ErrorBoundary/ErrorBoundary.tsx @@ -1,4 +1,4 @@ -import React from "react" +import { Component, ReactNode } from "react" import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState" type ErrorBoundaryProps = Record @@ -11,7 +11,7 @@ interface ErrorBoundaryState { * Our app's Error Boundary * Read more about React Error Boundaries: https://reactjs.org/docs/error-boundaries.html */ -export class ErrorBoundary extends React.Component { +export class ErrorBoundary extends Component { constructor(props: ErrorBoundaryProps) { super(props) this.state = { error: null } @@ -21,7 +21,7 @@ export class ErrorBoundary extends React.Component } diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx index 2788fcbd2d272..205b08da908a2 100644 --- a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx +++ b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx @@ -1,6 +1,5 @@ import { action } from "@storybook/addon-actions" import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { ErrorSummary, ErrorSummaryProps } from "./ErrorSummary" export default { diff --git a/site/src/components/ErrorSummary/ErrorSummary.test.tsx b/site/src/components/ErrorSummary/ErrorSummary.test.tsx index 5db395c91e025..4b153f8ebfde5 100644 --- a/site/src/components/ErrorSummary/ErrorSummary.test.tsx +++ b/site/src/components/ErrorSummary/ErrorSummary.test.tsx @@ -1,5 +1,4 @@ import { render, screen } from "@testing-library/react" -import React from "react" import { ErrorSummary } from "./ErrorSummary" describe("ErrorSummary", () => { diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx index 4f54daff1d1db..8f50ce91362d7 100644 --- a/site/src/components/ErrorSummary/ErrorSummary.tsx +++ b/site/src/components/ErrorSummary/ErrorSummary.tsx @@ -1,6 +1,6 @@ import Button from "@material-ui/core/Button" import RefreshIcon from "@material-ui/icons/Refresh" -import React from "react" +import { FC } from "react" import { Stack } from "../Stack/Stack" const Language = { @@ -13,7 +13,7 @@ export interface ErrorSummaryProps { retry?: () => void } -export const ErrorSummary: React.FC = ({ error, retry }) => ( +export const ErrorSummary: FC = ({ error, retry }) => ( {!(error instanceof Error) ?
{Language.unknownErrorMessage}
:
{error.toString()}
} diff --git a/site/src/components/Footer/Footer.test.tsx b/site/src/components/Footer/Footer.test.tsx index f47ee0aac64ed..a9f44dce1f00c 100644 --- a/site/src/components/Footer/Footer.test.tsx +++ b/site/src/components/Footer/Footer.test.tsx @@ -1,5 +1,4 @@ import { screen } from "@testing-library/react" -import React from "react" import { MockBuildInfo, render } from "../../testHelpers/renderHelpers" import { Footer, Language } from "./Footer" diff --git a/site/src/components/FormCloseButton/FormCloseButton.stories.tsx b/site/src/components/FormCloseButton/FormCloseButton.stories.tsx index 152cc675c9cdd..823277b362875 100644 --- a/site/src/components/FormCloseButton/FormCloseButton.stories.tsx +++ b/site/src/components/FormCloseButton/FormCloseButton.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { FormCloseButton, FormCloseButtonProps } from "./FormCloseButton" export default { diff --git a/site/src/components/FormCloseButton/FormCloseButton.test.tsx b/site/src/components/FormCloseButton/FormCloseButton.test.tsx index 393f7bcc657f0..7fd1d97093be4 100644 --- a/site/src/components/FormCloseButton/FormCloseButton.test.tsx +++ b/site/src/components/FormCloseButton/FormCloseButton.test.tsx @@ -1,5 +1,4 @@ import { fireEvent, render, screen } from "@testing-library/react" -import React from "react" import { FormCloseButton } from "./FormCloseButton" describe("FormCloseButton", () => { diff --git a/site/src/components/FormDropdownField/FormDropdownField.tsx b/site/src/components/FormDropdownField/FormDropdownField.tsx index 58c2584f819af..6c807396ab225 100644 --- a/site/src/components/FormDropdownField/FormDropdownField.tsx +++ b/site/src/components/FormDropdownField/FormDropdownField.tsx @@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box" import MenuItem from "@material-ui/core/MenuItem" import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" -import React from "react" +import { ReactElement } from "react" import { FormTextField, FormTextFieldProps } from "../FormTextField/FormTextField" export interface FormDropdownItem { @@ -15,7 +15,7 @@ export interface FormDropdownFieldProps extends FormTextFieldProps { items: FormDropdownItem[] } -export const FormDropdownField = ({ items, ...props }: FormDropdownFieldProps): React.ReactElement => { +export const FormDropdownField = ({ items, ...props }: FormDropdownFieldProps): ReactElement => { const styles = useStyles() return ( diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx index 4590a263013d9..580105bac26a2 100644 --- a/site/src/components/FormFooter/FormFooter.stories.tsx +++ b/site/src/components/FormFooter/FormFooter.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { FormFooter, FormFooterProps } from "./FormFooter" export default { diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index ec41d99a38ac9..e73358fea96eb 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -1,6 +1,6 @@ import Button from "@material-ui/core/Button" import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" import { LoadingButton } from "../LoadingButton/LoadingButton" export const Language = { @@ -27,11 +27,7 @@ const useStyles = makeStyles(() => ({ }, })) -export const FormFooter: React.FC = ({ - onCancel, - isLoading, - submitLabel = Language.defaultSubmitLabel, -}) => { +export const FormFooter: FC = ({ onCancel, isLoading, submitLabel = Language.defaultSubmitLabel }) => { const styles = useStyles() return (
diff --git a/site/src/components/FormSection/FormSection.tsx b/site/src/components/FormSection/FormSection.tsx index 5621c9858e53b..df67b13cdc506 100644 --- a/site/src/components/FormSection/FormSection.tsx +++ b/site/src/components/FormSection/FormSection.tsx @@ -1,6 +1,6 @@ import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" -import React from "react" +import { FC } from "react" export interface FormSectionProps { title: string @@ -39,7 +39,7 @@ export const useStyles = makeStyles((theme) => ({ }, })) -export const FormSection: React.FC = ({ title, description, children }) => { +export const FormSection: FC = ({ title, description, children }) => { const styles = useStyles() return ( diff --git a/site/src/components/FormTextField/FormTextField.test.tsx b/site/src/components/FormTextField/FormTextField.test.tsx index 3cb02cdcbbf88..7b0cb885318f4 100644 --- a/site/src/components/FormTextField/FormTextField.test.tsx +++ b/site/src/components/FormTextField/FormTextField.test.tsx @@ -1,6 +1,6 @@ import { act, fireEvent, render, screen } from "@testing-library/react" import { useFormik } from "formik" -import React from "react" +import { FC } from "react" import * as yup from "yup" import { FormTextField, FormTextFieldProps } from "./FormTextField" @@ -11,7 +11,7 @@ namespace Helpers { export const requiredValidationMsg = "required" - export const Component: React.FC, "form" | "formFieldName">> = (props) => { + export const Component: FC, "form" | "formFieldName">> = (props) => { const form = useFormik({ initialValues: { name: "", diff --git a/site/src/components/FormTextField/FormTextField.tsx b/site/src/components/FormTextField/FormTextField.tsx index 0498913cb8589..5b6d5cd1b2d39 100644 --- a/site/src/components/FormTextField/FormTextField.tsx +++ b/site/src/components/FormTextField/FormTextField.tsx @@ -1,6 +1,6 @@ import TextField, { TextFieldProps } from "@material-ui/core/TextField" import { FormikContextType } from "formik" -import React from "react" +import { ReactElement } from "react" import { PasswordField } from "../PasswordField/PasswordField" /** @@ -118,7 +118,7 @@ export const FormTextField = ({ type, variant = "outlined", ...rest -}: FormTextFieldProps): React.ReactElement => { +}: FormTextFieldProps): ReactElement => { const isError = form.touched[formFieldName] && Boolean(form.errors[formFieldName]) // Conversion to a string primitive is necessary as formFieldName is an in diff --git a/site/src/components/FormTitle/FormTitle.tsx b/site/src/components/FormTitle/FormTitle.tsx index 59b9ef7e7beea..d432229b41837 100644 --- a/site/src/components/FormTitle/FormTitle.tsx +++ b/site/src/components/FormTitle/FormTitle.tsx @@ -1,10 +1,10 @@ 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 FormTitleProps { title: string - detail?: React.ReactNode + detail?: ReactNode } const useStyles = makeStyles((theme) => ({ @@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({ }, })) -export const FormTitle: React.FC = ({ title, detail }) => { +export const FormTitle: FC = ({ title, detail }) => { const styles = useStyles() return ( diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index 3a92bc64cca1e..65a5f19bf1cea 100644 --- a/site/src/components/FullPageForm/FullPageForm.stories.tsx +++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx @@ -1,7 +1,6 @@ import TextField from "@material-ui/core/TextField" import { action } from "@storybook/addon-actions" import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { FormFooter } from "../FormFooter/FormFooter" import { Stack } from "../Stack/Stack" import { FullPageForm, FullPageFormProps } from "./FullPageForm" diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx index cc131e1280385..09f23a250d05f 100644 --- a/site/src/components/FullPageForm/FullPageForm.tsx +++ b/site/src/components/FullPageForm/FullPageForm.tsx @@ -1,12 +1,12 @@ import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC, ReactNode } from "react" import { FormCloseButton } from "../FormCloseButton/FormCloseButton" import { FormTitle } from "../FormTitle/FormTitle" import { Margins } from "../Margins/Margins" export interface FullPageFormProps { title: string - detail?: React.ReactNode + detail?: ReactNode onCancel: () => void } @@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({ }, })) -export const FullPageForm: React.FC = ({ title, detail, onCancel, children }) => { +export const FullPageForm: FC = ({ title, detail, onCancel, children }) => { const styles = useStyles() return (
diff --git a/site/src/components/Icons/BuildingIcon.stories.tsx b/site/src/components/Icons/BuildingIcon.stories.tsx index 5f490d4755da3..5ae86601d6b2a 100644 --- a/site/src/components/Icons/BuildingIcon.stories.tsx +++ b/site/src/components/Icons/BuildingIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { BuildingIcon } from "./BuildingIcon" export default { diff --git a/site/src/components/Icons/BuildingIcon.tsx b/site/src/components/Icons/BuildingIcon.tsx index 381cd106154e4..7f293e839f7e7 100644 --- a/site/src/components/Icons/BuildingIcon.tsx +++ b/site/src/components/Icons/BuildingIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" -import React from "react" export const BuildingIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/CloseIcon.stories.tsx b/site/src/components/Icons/CloseIcon.stories.tsx index e352cd50864cd..2838b0c4e4956 100644 --- a/site/src/components/Icons/CloseIcon.stories.tsx +++ b/site/src/components/Icons/CloseIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { CloseIcon } from "./CloseIcon" export default { diff --git a/site/src/components/Icons/CloseIcon.tsx b/site/src/components/Icons/CloseIcon.tsx index ab9a44a898941..42bfb52f33200 100644 --- a/site/src/components/Icons/CloseIcon.tsx +++ b/site/src/components/Icons/CloseIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon from "@material-ui/core/SvgIcon" -import React from "react" export const CloseIcon: typeof SvgIcon = (props) => ( diff --git a/site/src/components/Icons/CoderIcon.stories.tsx b/site/src/components/Icons/CoderIcon.stories.tsx index 8581d663ed607..1691e1b93051b 100644 --- a/site/src/components/Icons/CoderIcon.stories.tsx +++ b/site/src/components/Icons/CoderIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { CoderIcon } from "./CoderIcon" export default { diff --git a/site/src/components/Icons/CoderIcon.tsx b/site/src/components/Icons/CoderIcon.tsx index 9a391d889d5e7..f0dcb7e37edda 100644 --- a/site/src/components/Icons/CoderIcon.tsx +++ b/site/src/components/Icons/CoderIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" -import React from "react" /** * CoderIcon represents the cloud with brackets Coder brand icon. It does not diff --git a/site/src/components/Icons/DocsIcon.stories.tsx b/site/src/components/Icons/DocsIcon.stories.tsx index fa50b9a7ca8ae..699bdbf8ab4f2 100644 --- a/site/src/components/Icons/DocsIcon.stories.tsx +++ b/site/src/components/Icons/DocsIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { DocsIcon } from "./DocsIcon" export default { diff --git a/site/src/components/Icons/DocsIcon.tsx b/site/src/components/Icons/DocsIcon.tsx index a56579fed5d36..e6ce20fda7cb8 100644 --- a/site/src/components/Icons/DocsIcon.tsx +++ b/site/src/components/Icons/DocsIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" -import React from "react" export const DocsIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/ErrorIcon.stories.tsx b/site/src/components/Icons/ErrorIcon.stories.tsx index cddba329e6a59..d6d31e9e93a46 100644 --- a/site/src/components/Icons/ErrorIcon.stories.tsx +++ b/site/src/components/Icons/ErrorIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { ErrorIcon } from "./ErrorIcon" export default { diff --git a/site/src/components/Icons/ErrorIcon.tsx b/site/src/components/Icons/ErrorIcon.tsx index 591ae2d9ea5ac..34abda7c574a6 100644 --- a/site/src/components/Icons/ErrorIcon.tsx +++ b/site/src/components/Icons/ErrorIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" -import React from "react" export const ErrorIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/FileCopyIcon.stories.tsx b/site/src/components/Icons/FileCopyIcon.stories.tsx index c67afad36b953..266a9247994c1 100644 --- a/site/src/components/Icons/FileCopyIcon.stories.tsx +++ b/site/src/components/Icons/FileCopyIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { FileCopyIcon } from "./FileCopyIcon" export default { diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx index f4269405c4117..e45047587d953 100644 --- a/site/src/components/Icons/FileCopyIcon.tsx +++ b/site/src/components/Icons/FileCopyIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon from "@material-ui/core/SvgIcon" -import React from "react" export const FileCopyIcon: typeof SvgIcon = (props) => ( diff --git a/site/src/components/Icons/Logo.stories.tsx b/site/src/components/Icons/Logo.stories.tsx index 7bc33230a8db3..80aac5f10c4f8 100644 --- a/site/src/components/Icons/Logo.stories.tsx +++ b/site/src/components/Icons/Logo.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { Logo } from "./Logo" export default { diff --git a/site/src/components/Icons/LogoutIcon.stories.tsx b/site/src/components/Icons/LogoutIcon.stories.tsx index e886d0f41cf95..4d60b288db3d2 100644 --- a/site/src/components/Icons/LogoutIcon.stories.tsx +++ b/site/src/components/Icons/LogoutIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { LogoutIcon } from "./LogoutIcon" export default { diff --git a/site/src/components/Icons/LogoutIcon.tsx b/site/src/components/Icons/LogoutIcon.tsx index d4024e73b07c1..ba67e7680a51d 100644 --- a/site/src/components/Icons/LogoutIcon.tsx +++ b/site/src/components/Icons/LogoutIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" -import React from "react" export const LogoutIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/SearchIcon.tsx b/site/src/components/Icons/SearchIcon.tsx index 65da1c0b90e05..fac0069985958 100644 --- a/site/src/components/Icons/SearchIcon.tsx +++ b/site/src/components/Icons/SearchIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon from "@material-ui/core/SvgIcon" -import React from "react" export const SearchIcon: typeof SvgIcon = (props) => ( diff --git a/site/src/components/Icons/UsersOutlinedIcon.stories.tsx b/site/src/components/Icons/UsersOutlinedIcon.stories.tsx index ad2119e17314f..1372da50650d9 100644 --- a/site/src/components/Icons/UsersOutlinedIcon.stories.tsx +++ b/site/src/components/Icons/UsersOutlinedIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { UsersOutlinedIcon } from "./UsersOutlinedIcon" export default { diff --git a/site/src/components/Icons/UsersOutlinedIcon.tsx b/site/src/components/Icons/UsersOutlinedIcon.tsx index b297380d125e4..b1264fc93a1db 100644 --- a/site/src/components/Icons/UsersOutlinedIcon.tsx +++ b/site/src/components/Icons/UsersOutlinedIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon from "@material-ui/core/SvgIcon" -import React from "react" export const UsersOutlinedIcon: typeof SvgIcon = (props) => ( diff --git a/site/src/components/Icons/WorkspacesIcon.stories.tsx b/site/src/components/Icons/WorkspacesIcon.stories.tsx index 2e44efcf2b7af..9b778dc89b0aa 100644 --- a/site/src/components/Icons/WorkspacesIcon.stories.tsx +++ b/site/src/components/Icons/WorkspacesIcon.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { WorkspacesIcon } from "./WorkspacesIcon" export default { diff --git a/site/src/components/Icons/WorkspacesIcon.tsx b/site/src/components/Icons/WorkspacesIcon.tsx index 12cd10fe070d9..b42639d51d514 100644 --- a/site/src/components/Icons/WorkspacesIcon.tsx +++ b/site/src/components/Icons/WorkspacesIcon.tsx @@ -1,5 +1,4 @@ import SvgIcon from "@material-ui/core/SvgIcon" -import React from "react" export const WorkspacesIcon: typeof SvgIcon = (props) => ( diff --git a/site/src/components/Loader/FullScreenLoader.test.tsx b/site/src/components/Loader/FullScreenLoader.test.tsx index 31a40dbfc4913..3bf1ea41bd23f 100644 --- a/site/src/components/Loader/FullScreenLoader.test.tsx +++ b/site/src/components/Loader/FullScreenLoader.test.tsx @@ -1,5 +1,4 @@ import { render, screen } from "@testing-library/react" -import React from "react" import { FullScreenLoader } from "./FullScreenLoader" describe("FullScreenLoader", () => { diff --git a/site/src/components/Loader/FullScreenLoader.tsx b/site/src/components/Loader/FullScreenLoader.tsx index fa6aabb98235b..45e881667bdad 100644 --- a/site/src/components/Loader/FullScreenLoader.tsx +++ b/site/src/components/Loader/FullScreenLoader.tsx @@ -1,6 +1,6 @@ import CircularProgress from "@material-ui/core/CircularProgress" import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" export const useStyles = makeStyles((theme) => ({ root: { @@ -16,7 +16,7 @@ export const useStyles = makeStyles((theme) => ({ }, })) -export const FullScreenLoader: React.FC = () => { +export const FullScreenLoader: FC = () => { const styles = useStyles() return ( diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx index 465ee4455de71..ca971351c965d 100644 --- a/site/src/components/Loader/Loader.tsx +++ b/site/src/components/Loader/Loader.tsx @@ -1,8 +1,8 @@ import Box from "@material-ui/core/Box" import CircularProgress from "@material-ui/core/CircularProgress" -import React from "react" +import { FC } from "react" -export const Loader: React.FC<{ size?: number }> = ({ size = 26 }) => { +export const Loader: FC<{ size?: number }> = ({ size = 26 }) => { return ( diff --git a/site/src/components/LoadingButton/LoadingButton.stories.tsx b/site/src/components/LoadingButton/LoadingButton.stories.tsx index 19192572dd8b0..08f7c29f44b4c 100644 --- a/site/src/components/LoadingButton/LoadingButton.stories.tsx +++ b/site/src/components/LoadingButton/LoadingButton.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { LoadingButton, LoadingButtonProps } from "./LoadingButton" export default { diff --git a/site/src/components/LoadingButton/LoadingButton.test.tsx b/site/src/components/LoadingButton/LoadingButton.test.tsx index 11107661503a5..c663d3db5ecbd 100644 --- a/site/src/components/LoadingButton/LoadingButton.test.tsx +++ b/site/src/components/LoadingButton/LoadingButton.test.tsx @@ -1,5 +1,4 @@ import { render, screen } from "@testing-library/react" -import React from "react" import { LoadingButton } from "./LoadingButton" describe("LoadingButton", () => { diff --git a/site/src/components/Logs/Logs.stories.tsx b/site/src/components/Logs/Logs.stories.tsx index 12ff5264a31dd..f5d56590f24d4 100644 --- a/site/src/components/Logs/Logs.stories.tsx +++ b/site/src/components/Logs/Logs.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { MockWorkspaceBuildLogs } from "../../testHelpers/entities" import { Logs, LogsProps } from "./Logs" diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx index 05541e79be0c5..d0103904dd034 100644 --- a/site/src/components/Logs/Logs.tsx +++ b/site/src/components/Logs/Logs.tsx @@ -1,6 +1,6 @@ import { makeStyles } from "@material-ui/core/styles" import dayjs from "dayjs" -import React from "react" +import { FC } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../util/combineClasses" @@ -14,7 +14,7 @@ export interface LogsProps { className?: string } -export const Logs: React.FC = ({ lines, className = "" }) => { +export const Logs: FC = ({ lines, className = "" }) => { const styles = useStyles() return ( diff --git a/site/src/components/Margins/Margins.stories.tsx b/site/src/components/Margins/Margins.stories.tsx index 0a01e753c2507..9403a2d738c0d 100644 --- a/site/src/components/Margins/Margins.stories.tsx +++ b/site/src/components/Margins/Margins.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { Margins } from "./Margins" export default { diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx index e927a1ac4eaf6..f09cf1c2c2438 100644 --- a/site/src/components/Margins/Margins.tsx +++ b/site/src/components/Margins/Margins.tsx @@ -1,5 +1,5 @@ import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" import { maxWidth, sidePadding } from "../../theme/constants" const useStyles = makeStyles(() => ({ @@ -12,7 +12,7 @@ const useStyles = makeStyles(() => ({ }, })) -export const Margins: React.FC = ({ children }) => { +export const Margins: FC = ({ children }) => { const styles = useStyles() return
{children}
} diff --git a/site/src/components/NavbarView/NavbarView.stories.tsx b/site/src/components/NavbarView/NavbarView.stories.tsx index ec00f8b4843f8..c1ff477d5f130 100644 --- a/site/src/components/NavbarView/NavbarView.stories.tsx +++ b/site/src/components/NavbarView/NavbarView.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { MockUser, MockUser2 } from "../../testHelpers/entities" import { NavbarView, NavbarViewProps } from "./NavbarView" diff --git a/site/src/components/NavbarView/NavbarView.test.tsx b/site/src/components/NavbarView/NavbarView.test.tsx index 8ef6cdc312a99..60740a8a4426b 100644 --- a/site/src/components/NavbarView/NavbarView.test.tsx +++ b/site/src/components/NavbarView/NavbarView.test.tsx @@ -1,5 +1,4 @@ import { screen } from "@testing-library/react" -import React from "react" import { MockUser } from "../../testHelpers/entities" import { render } from "../../testHelpers/renderHelpers" import { Language as navLanguage, NavbarView } from "./NavbarView" diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx index 092a299851e91..99d4382dadce0 100644 --- a/site/src/components/NavbarView/NavbarView.tsx +++ b/site/src/components/NavbarView/NavbarView.tsx @@ -1,7 +1,6 @@ import List from "@material-ui/core/List" import ListItem from "@material-ui/core/ListItem" import { fade, makeStyles } from "@material-ui/core/styles" -import React from "react" import { NavLink } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { navHeight } from "../../theme/constants" diff --git a/site/src/components/ParameterInput/ParameterInput.stories.tsx b/site/src/components/ParameterInput/ParameterInput.stories.tsx index af5e05bdac0fb..4b801697d536f 100644 --- a/site/src/components/ParameterInput/ParameterInput.stories.tsx +++ b/site/src/components/ParameterInput/ParameterInput.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { ParameterSchema } from "../../api/typesGenerated" import { ParameterInput, ParameterInputProps } from "./ParameterInput" diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx index 521ea20aa6fe7..d56768fe65884 100644 --- a/site/src/components/ParameterInput/ParameterInput.tsx +++ b/site/src/components/ParameterInput/ParameterInput.tsx @@ -4,7 +4,7 @@ import Radio from "@material-ui/core/Radio" import RadioGroup from "@material-ui/core/RadioGroup" import { lighten, makeStyles } from "@material-ui/core/styles" import TextField from "@material-ui/core/TextField" -import React from "react" +import { FC } from "react" import { ParameterSchema } from "../../api/typesGenerated" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" @@ -14,7 +14,7 @@ export interface ParameterInputProps { onChange: (value: string) => void } -export const ParameterInput: React.FC = ({ disabled, onChange, schema }) => { +export const ParameterInput: FC = ({ disabled, onChange, schema }) => { const styles = useStyles() return ( diff --git a/site/src/components/PasswordField/PasswordField.test.tsx b/site/src/components/PasswordField/PasswordField.test.tsx index ffc003d905ce2..e5c08afa44bb9 100644 --- a/site/src/components/PasswordField/PasswordField.test.tsx +++ b/site/src/components/PasswordField/PasswordField.test.tsx @@ -1,5 +1,4 @@ import { render, screen } from "@testing-library/react" -import React from "react" import { PasswordField } from "./PasswordField" describe("PasswordField", () => { diff --git a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx index 177b7b1a28a78..436d4ee9b5dc7 100644 --- a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx +++ b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { MockUser } from "../../testHelpers/renderHelpers" import { ResetPasswordDialog, ResetPasswordDialogProps } from "./ResetPasswordDialog" diff --git a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx index 472e233688f27..21f976291d987 100644 --- a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx +++ b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx @@ -2,7 +2,7 @@ import DialogActions from "@material-ui/core/DialogActions" import DialogContent from "@material-ui/core/DialogContent" import DialogContentText from "@material-ui/core/DialogContentText" import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { CodeBlock } from "../CodeBlock/CodeBlock" import { Dialog, DialogActionButtons, DialogTitle } from "../Dialog/Dialog" @@ -26,7 +26,7 @@ export const Language = { confirmText: "Reset password", } -export const ResetPasswordDialog: React.FC = ({ +export const ResetPasswordDialog: FC = ({ open, onClose, onConfirm, diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index 1979ea37d6034..f78b51696d22d 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -5,7 +5,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 { Workspace, WorkspaceResource } from "../../api/typesGenerated" import { getDisplayAgentStatus } from "../../util/workspace" import { TableHeaderRow } from "../TableHeaders/TableHeaders" @@ -27,7 +27,7 @@ interface ResourcesProps { workspace: Workspace } -export const Resources: React.FC = ({ resources, getResourcesError, workspace }) => { +export const Resources: FC = ({ resources, getResourcesError, workspace }) => { const styles = useStyles() const theme: Theme = useTheme() diff --git a/site/src/components/RoleSelect/RoleSelect.stories.tsx b/site/src/components/RoleSelect/RoleSelect.stories.tsx index 72352afc53a1e..ab3949baa63ac 100644 --- a/site/src/components/RoleSelect/RoleSelect.stories.tsx +++ b/site/src/components/RoleSelect/RoleSelect.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { MockAdminRole, MockMemberRole, MockSiteRoles } from "../../testHelpers/renderHelpers" import { RoleSelect, RoleSelectProps } from "./RoleSelect" diff --git a/site/src/components/RoleSelect/RoleSelect.tsx b/site/src/components/RoleSelect/RoleSelect.tsx index b644d353d15b4..63b19d23d41cd 100644 --- a/site/src/components/RoleSelect/RoleSelect.tsx +++ b/site/src/components/RoleSelect/RoleSelect.tsx @@ -2,7 +2,7 @@ import Checkbox from "@material-ui/core/Checkbox" import MenuItem from "@material-ui/core/MenuItem" import Select from "@material-ui/core/Select" import { makeStyles, Theme } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" import { Role } from "../../api/typesGenerated" export const Language = { @@ -16,7 +16,7 @@ export interface RoleSelectProps { open?: boolean } -export const RoleSelect: React.FC = ({ roles, selectedRoles, loading, onChange, open }) => { +export const RoleSelect: FC = ({ roles, selectedRoles, loading, onChange, open }) => { const styles = useStyles() const value = selectedRoles.map((r) => r.name) const renderValue = () => selectedRoles.map((r) => r.display_name).join(", ") diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx index 7206060e3906d..3b4db9f6744d3 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx @@ -1,5 +1,5 @@ import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { ReactElement } from "react" import { CodeBlock } from "../CodeBlock/CodeBlock" import { createCtas } from "./createCtas" @@ -63,7 +63,7 @@ export const createFormattedStackTrace = (error: Error, mappedStack: string[] | /** * A code block component that contains the error stack resulting from an error boundary trigger */ -export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): React.ReactElement => { +export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): ReactElement => { const styles = useStyles() if (!mappedStack) { diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx index 5466459d91c3a..d9ea22aae8fe9 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { RuntimeErrorState, RuntimeErrorStateProps } from "./RuntimeErrorState" const error = new Error("An error occurred") diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx index 19a09cdde4d86..627260aa16234 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx @@ -1,5 +1,4 @@ import { screen } from "@testing-library/react" -import React from "react" import { render } from "../../testHelpers/renderHelpers" import { Language as ButtonLanguage } from "./createCtas" import { Language as RuntimeErrorStateLanguage, RuntimeErrorState } from "./RuntimeErrorState" diff --git a/site/src/components/RuntimeErrorState/createCtas.tsx b/site/src/components/RuntimeErrorState/createCtas.tsx index e41b5a4fdf9f1..977c46eab6994 100644 --- a/site/src/components/RuntimeErrorState/createCtas.tsx +++ b/site/src/components/RuntimeErrorState/createCtas.tsx @@ -1,7 +1,7 @@ import Button from "@material-ui/core/Button" import { makeStyles } from "@material-ui/core/styles" import RefreshIcon from "@material-ui/icons/Refresh" -import React from "react" +import { ReactElement } from "react" import { CopyButton } from "../CopyButton/CopyButton" export const Language = { @@ -12,7 +12,7 @@ export const Language = { /** * A wrapper component for a full-width copy button */ -const CopyStackButton = ({ text }: { text: string }): React.ReactElement => { +const CopyStackButton = ({ text }: { text: string }): ReactElement => { const styles = useStyles() return ( @@ -28,7 +28,7 @@ const CopyStackButton = ({ text }: { text: string }): React.ReactElement => { /** * A button that reloads our application */ -const ReloadAppButton = (): React.ReactElement => { +const ReloadAppButton = (): ReactElement => { const styles = useStyles() return ( @@ -47,7 +47,7 @@ const ReloadAppButton = (): React.ReactElement => { /** * createCtas generates an array of buttons to be used with our error boundary UI */ -export const createCtas = (codeBlock: string[]): React.ReactElement[] => { +export const createCtas = (codeBlock: string[]): ReactElement[] => { // REMARK: we don't have to worry about key order changing // eslint-disable-next-line react/jsx-key return [, ] diff --git a/site/src/components/Section/Section.stories.tsx b/site/src/components/Section/Section.stories.tsx index dfddc65284a6c..c53c3c8124916 100644 --- a/site/src/components/Section/Section.stories.tsx +++ b/site/src/components/Section/Section.stories.tsx @@ -1,7 +1,6 @@ import Button from "@material-ui/core/Button" import TextField from "@material-ui/core/TextField" import { Story } from "@storybook/react" -import React from "react" import { Section, SectionProps } from "./Section" export default { diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx index 22bf0dd101a73..9ea2bde7af7aa 100644 --- a/site/src/components/Section/Section.tsx +++ b/site/src/components/Section/Section.tsx @@ -1,7 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import { fade } from "@material-ui/core/styles/colorManipulator" import Typography from "@material-ui/core/Typography" -import React from "react" +import { FC } from "react" import { combineClasses } from "../../util/combineClasses" import { SectionAction } from "../SectionAction/SectionAction" @@ -17,7 +17,7 @@ export interface SectionProps { children?: React.ReactNode } -type SectionFC = React.FC & { Action: typeof SectionAction } +type SectionFC = FC & { Action: typeof SectionAction } export const Section: SectionFC = ({ title, diff --git a/site/src/components/SectionAction/SectionAction.tsx b/site/src/components/SectionAction/SectionAction.tsx index 8a40c90fb9023..d8574a85248a7 100644 --- a/site/src/components/SectionAction/SectionAction.tsx +++ b/site/src/components/SectionAction/SectionAction.tsx @@ -1,5 +1,5 @@ import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" const useStyles = makeStyles((theme) => ({ root: { @@ -11,7 +11,7 @@ const useStyles = makeStyles((theme) => ({ * SectionAction is a content box that call to actions should be placed * within */ -export const SectionAction: React.FC = ({ children }) => { +export const SectionAction: FC = ({ children }) => { const styles = useStyles() return
{children}
} diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx index 4c90deb61daa9..bc633f015815a 100644 --- a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx +++ b/site/src/components/SettingsAccountForm/SettingsAccountForm.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 { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils" import { LoadingButton } from "../LoadingButton/LoadingButton" @@ -32,7 +32,7 @@ export interface AccountFormProps { error?: string } -export const AccountForm: React.FC = ({ +export const AccountForm: FC = ({ email, isLoading, onSubmit, diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx index 786e7bc027418..ba35c489fd419 100644 --- a/site/src/components/SettingsLayout/SettingsLayout.tsx +++ b/site/src/components/SettingsLayout/SettingsLayout.tsx @@ -1,5 +1,5 @@ import Box from "@material-ui/core/Box" -import React from "react" +import { FC } from "react" import { Outlet } from "react-router-dom" import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame" import { Margins } from "../Margins/Margins" @@ -18,7 +18,7 @@ const menuItems = [ { label: Language.sshKeysLabel, path: "/settings/ssh-keys" }, ] -export const SettingsLayout: React.FC = () => { +export const SettingsLayout: FC = () => { return ( diff --git a/site/src/components/SignInForm/SignInForm.stories.tsx b/site/src/components/SignInForm/SignInForm.stories.tsx index 90bdf0a39a73f..e40384464eec2 100644 --- a/site/src/components/SignInForm/SignInForm.stories.tsx +++ b/site/src/components/SignInForm/SignInForm.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { SignInForm, SignInFormProps } from "./SignInForm" export default { diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx index 502726c09fd1e..6dff3c4251551 100644 --- a/site/src/components/SignInForm/SignInForm.tsx +++ b/site/src/components/SignInForm/SignInForm.tsx @@ -4,7 +4,7 @@ import Link from "@material-ui/core/Link" import { makeStyles } from "@material-ui/core/styles" import TextField from "@material-ui/core/TextField" import { FormikContextType, useFormik } from "formik" -import React from "react" +import { FC } from "react" import * as Yup from "yup" import { AuthMethods } from "../../api/typesGenerated" import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils" @@ -60,7 +60,7 @@ export interface SignInFormProps { onSubmit: ({ email, password }: { email: string; password: string }) => Promise } -export const SignInForm: React.FC = ({ +export const SignInForm: FC = ({ authMethods, redirectTo, isLoading, diff --git a/site/src/components/SplitButton/SplitButton.test.tsx b/site/src/components/SplitButton/SplitButton.test.tsx index 67bfbe25676d1..d4bdecbe3f912 100644 --- a/site/src/components/SplitButton/SplitButton.test.tsx +++ b/site/src/components/SplitButton/SplitButton.test.tsx @@ -1,5 +1,4 @@ import { fireEvent, render, screen } from "@testing-library/react" -import React from "react" import { SplitButton, SplitButtonProps } from "./SplitButton" namespace Helpers { diff --git a/site/src/components/Stack/Stack.stories.tsx b/site/src/components/Stack/Stack.stories.tsx index 7957e677d2bba..508d49eaa7f2c 100644 --- a/site/src/components/Stack/Stack.stories.tsx +++ b/site/src/components/Stack/Stack.stories.tsx @@ -1,6 +1,5 @@ import TextField from "@material-ui/core/TextField" import { Story } from "@storybook/react" -import React from "react" import { Stack, StackProps } from "./Stack" export default { diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx index 97bb40538617c..dc91c716f863c 100644 --- a/site/src/components/Stack/Stack.tsx +++ b/site/src/components/Stack/Stack.tsx @@ -1,5 +1,5 @@ import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" import { combineClasses } from "../../util/combineClasses" type Direction = "column" | "row" @@ -23,7 +23,7 @@ export interface StackProps { spacing?: number } -export const Stack: React.FC = ({ children, className, direction = "column", spacing = 2 }) => { +export const Stack: FC = ({ children, className, direction = "column", spacing = 2 }) => { const styles = useStyles({ spacing, direction }) return
{children}
diff --git a/site/src/components/TabPanel/TabPanel.stories.tsx b/site/src/components/TabPanel/TabPanel.stories.tsx index 9cf305d9ee001..4f014637c885e 100644 --- a/site/src/components/TabPanel/TabPanel.stories.tsx +++ b/site/src/components/TabPanel/TabPanel.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { TabPanel, TabPanelProps } from "./TabPanel" export default { diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx index 4771e18279e80..25eddc7f508c1 100644 --- a/site/src/components/TabPanel/TabPanel.tsx +++ b/site/src/components/TabPanel/TabPanel.tsx @@ -1,6 +1,6 @@ import { makeStyles } from "@material-ui/core/styles" import { fade } from "@material-ui/core/styles/colorManipulator" -import React from "react" +import { FC } from "react" import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar" export type AdminMenuItemCallback = (menuItem: string) => void @@ -10,7 +10,7 @@ export interface TabPanelProps { menuItems: TabSidebarItem[] } -export const TabPanel: React.FC = ({ children, title, menuItems }) => { +export const TabPanel: FC = ({ children, title, menuItems }) => { const styles = useStyles() return ( diff --git a/site/src/components/TabSidebar/TabSidebar.stories.tsx b/site/src/components/TabSidebar/TabSidebar.stories.tsx index c35b6d4a62bd3..516789a034acf 100644 --- a/site/src/components/TabSidebar/TabSidebar.stories.tsx +++ b/site/src/components/TabSidebar/TabSidebar.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { TabSidebar, TabSidebarProps } from "./TabSidebar" export default { diff --git a/site/src/components/TabSidebar/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx index 99973084d670c..f3f5494fe9ba9 100644 --- a/site/src/components/TabSidebar/TabSidebar.tsx +++ b/site/src/components/TabSidebar/TabSidebar.tsx @@ -1,7 +1,7 @@ import List from "@material-ui/core/List" import ListItem from "@material-ui/core/ListItem" import { makeStyles } from "@material-ui/core/styles" -import React from "react" +import { FC } from "react" import { NavLink } from "react-router-dom" import { combineClasses } from "../../util/combineClasses" @@ -15,7 +15,7 @@ export interface TabSidebarProps { menuItems: TabSidebarItem[] } -export const TabSidebar: React.FC = ({ menuItems }) => { +export const TabSidebar: FC = ({ menuItems }) => { const styles = useStyles() return ( diff --git a/site/src/components/Table/Table.test.tsx b/site/src/components/Table/Table.test.tsx index edf936f355ae8..eb9f20e29dc28 100644 --- a/site/src/components/Table/Table.test.tsx +++ b/site/src/components/Table/Table.test.tsx @@ -1,5 +1,4 @@ import { screen } from "@testing-library/react" -import React from "react" import { render } from "../../testHelpers/renderHelpers" import { Column, Table } from "./Table" diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx index 82c68a9f9cc93..8b39216b3476f 100644 --- a/site/src/components/Table/Table.tsx +++ b/site/src/components/Table/Table.tsx @@ -4,7 +4,7 @@ import TableBody from "@material-ui/core/TableBody" import TableCell from "@material-ui/core/TableCell" import TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" -import React from "react" +import { ReactElement } from "react" import { TableHeaders } from "../TableHeaders/TableHeaders" import { TableTitle } from "../TableTitle/TableTitle" @@ -21,7 +21,7 @@ export type Column = { /** * Custom render for the field inside the table */ - renderer?: (field: T[K], data: T) => React.ReactElement + renderer?: (field: T[K], data: T) => ReactElement } }[keyof T] @@ -41,14 +41,14 @@ export interface TableProps { /** * Optional empty state UI when the data is empty */ - emptyState?: React.ReactElement + emptyState?: ReactElement /** * Optional element to render row actions like delete, update, etc */ - rowMenu?: (data: T) => React.ReactElement + rowMenu?: (data: T) => ReactElement } -export const Table = ({ columns, data, emptyState, title, rowMenu }: TableProps): React.ReactElement => { +export const Table = ({ columns, data, emptyState, title, rowMenu }: TableProps): ReactElement => { const columnNames = columns.map(({ name }) => name) const body = renderTableBody(data, columns, emptyState, rowMenu) @@ -69,8 +69,8 @@ export const Table = ({ columns, data, emptyState, title, rowMenu }: TablePr const renderTableBody = ( data: T[], columns: Column[], - emptyState?: React.ReactElement, - rowMenu?: (data: T) => React.ReactElement, + emptyState?: ReactElement, + rowMenu?: (data: T) => ReactElement, ) => { if (data.length > 0) { const rows = data.map((item: T, index) => { diff --git a/site/src/components/TableHeaders/TableHeaders.tsx b/site/src/components/TableHeaders/TableHeaders.tsx index eafcac500206c..5138dd47701cd 100644 --- a/site/src/components/TableHeaders/TableHeaders.tsx +++ b/site/src/components/TableHeaders/TableHeaders.tsx @@ -1,19 +1,19 @@ import { makeStyles } from "@material-ui/core/styles" import TableCell from "@material-ui/core/TableCell" import TableRow from "@material-ui/core/TableRow" -import React from "react" +import { FC } from "react" export interface TableHeadersProps { columns: string[] hasMenu?: boolean } -export const TableHeaderRow: React.FC = ({ children }) => { +export const TableHeaderRow: FC = ({ children }) => { const styles = useStyles() return {children} } -export const TableHeaders: React.FC = ({ columns, hasMenu }) => { +export const TableHeaders: FC = ({ columns, hasMenu }) => { return ( {columns.map((c, idx) => ( diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx index 0caf1c8aa8382..413d86208c77d 100644 --- a/site/src/components/TableLoader/TableLoader.tsx +++ b/site/src/components/TableLoader/TableLoader.tsx @@ -1,10 +1,10 @@ import { makeStyles } from "@material-ui/core/styles" import TableCell from "@material-ui/core/TableCell" import TableRow from "@material-ui/core/TableRow" -import React from "react" +import { FC } from "react" import { Loader } from "../Loader/Loader" -export const TableLoader: React.FC = () => { +export const TableLoader: FC = () => { const styles = useStyles() return ( diff --git a/site/src/components/TableRowMenu/TableRowMenu.stories.tsx b/site/src/components/TableRowMenu/TableRowMenu.stories.tsx index 39b2aec38c300..567f95d11267e 100644 --- a/site/src/components/TableRowMenu/TableRowMenu.stories.tsx +++ b/site/src/components/TableRowMenu/TableRowMenu.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { TableRowMenu, TableRowMenuProps } from "./TableRowMenu" export default { diff --git a/site/src/components/TableRowMenu/TableRowMenu.tsx b/site/src/components/TableRowMenu/TableRowMenu.tsx index 8e10df4e88ba7..840da0f53b8a4 100644 --- a/site/src/components/TableRowMenu/TableRowMenu.tsx +++ b/site/src/components/TableRowMenu/TableRowMenu.tsx @@ -2,7 +2,7 @@ import IconButton from "@material-ui/core/IconButton" import Menu, { MenuProps } from "@material-ui/core/Menu" import MenuItem from "@material-ui/core/MenuItem" import MoreVertIcon from "@material-ui/icons/MoreVert" -import React from "react" +import { MouseEvent, useState } from "react" export interface TableRowMenuProps { data: TData @@ -13,9 +13,9 @@ export interface TableRowMenuProps { } export const TableRowMenu = ({ data, menuItems }: TableRowMenuProps): JSX.Element => { - const [anchorEl, setAnchorEl] = React.useState(null) + const [anchorEl, setAnchorEl] = useState(null) - const handleClick = (event: React.MouseEvent) => { + const handleClick = (event: MouseEvent) => { setAnchorEl(event.currentTarget) } diff --git a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx index 4b340e36cb807..cb8b7ce22f37e 100644 --- a/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx +++ b/site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx @@ -4,7 +4,7 @@ import TableBody from "@material-ui/core/TableBody" import TableCell from "@material-ui/core/TableCell" import TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" -import React from "react" +import { FC } from "react" import { WorkspaceResource } from "../../api/typesGenerated" import { TableHeaderRow } from "../TableHeaders/TableHeaders" @@ -17,7 +17,7 @@ interface TemplateResourcesProps { resources: WorkspaceResource[] } -export const TemplateResourcesTable: React.FC = ({ resources }) => { +export const TemplateResourcesTable: FC = ({ resources }) => { const styles = useStyles() return ( diff --git a/site/src/components/TemplateStats/TemplateStats.stories.tsx b/site/src/components/TemplateStats/TemplateStats.stories.tsx index 8ae21da32f5e5..3056187d110d4 100644 --- a/site/src/components/TemplateStats/TemplateStats.stories.tsx +++ b/site/src/components/TemplateStats/TemplateStats.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import * as Mocks from "../../testHelpers/renderHelpers" import { TemplateStats, TemplateStatsProps } from "../TemplateStats/TemplateStats" diff --git a/site/src/components/TemplateStats/TemplateStats.tsx b/site/src/components/TemplateStats/TemplateStats.tsx index 5410113ff4aa3..24da983939975 100644 --- a/site/src/components/TemplateStats/TemplateStats.tsx +++ b/site/src/components/TemplateStats/TemplateStats.tsx @@ -1,7 +1,7 @@ import { makeStyles } from "@material-ui/core/styles" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" -import React from "react" +import { FC } from "react" import { Template, TemplateVersion } from "../../api/typesGenerated" import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants" @@ -20,7 +20,7 @@ export interface TemplateStatsProps { activeVersion: TemplateVersion } -export const TemplateStats: React.FC = ({ template, activeVersion }) => { +export const TemplateStats: FC = ({ template, activeVersion }) => { const styles = useStyles() return ( diff --git a/site/src/components/TerminalLink/TerminalLink.stories.tsx b/site/src/components/TerminalLink/TerminalLink.stories.tsx index 417821f53d30b..12f1d6c71b814 100644 --- a/site/src/components/TerminalLink/TerminalLink.stories.tsx +++ b/site/src/components/TerminalLink/TerminalLink.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { MockWorkspace } from "../../testHelpers/renderHelpers" import { TerminalLink, TerminalLinkProps } from "./TerminalLink" diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx index 0160e30910e58..adf34850db424 100644 --- a/site/src/components/TerminalLink/TerminalLink.tsx +++ b/site/src/components/TerminalLink/TerminalLink.tsx @@ -1,7 +1,7 @@ import Link from "@material-ui/core/Link" import { makeStyles } from "@material-ui/core/styles" import ComputerIcon from "@material-ui/icons/Computer" -import React from "react" +import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { combineClasses } from "../../util/combineClasses" @@ -23,7 +23,7 @@ export interface TerminalLinkProps { * If no user name is provided "me" is used however it makes the link not * shareable. */ -export const TerminalLink: React.FC = ({ agentName, userName = "me", workspaceName, className }) => { +export const TerminalLink: FC = ({ agentName, userName = "me", workspaceName, className }) => { const styles = useStyles() return ( diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx index 87fc049446d2b..dc0500c8183a6 100644 --- a/site/src/components/Typography/Typography.stories.tsx +++ b/site/src/components/Typography/Typography.stories.tsx @@ -1,5 +1,4 @@ import { Story } from "@storybook/react" -import React from "react" import { Typography, TypographyProps } from "./Typography" export default { diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx index 4095e91a60c3b..222cf6c915e00 100644 --- a/site/src/components/UserAvatar/UserAvatar.tsx +++ b/site/src/components/UserAvatar/UserAvatar.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 { combineClasses } from "../../util/combineClasses" import { firstLetter } from "../../util/firstLetter" @@ -9,7 +9,7 @@ export interface UserAvatarProps { username: string } -export const UserAvatar: React.FC = ({ username, className }) => { +export const UserAvatar: FC = ({ username, className }) => { const styles = useStyles() return ( diff --git a/site/src/components/UserCell/UserCell.stories.tsx b/site/src/components/UserCell/UserCell.stories.tsx index 83225340d8efb..e8d1a2efd274e 100644 --- a/site/src/components/UserCell/UserCell.stories.tsx +++ b/site/src/components/UserCell/UserCell.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { MockUser, MockUserAgent } from "../../testHelpers/renderHelpers" import { UserCell, UserCellProps } from "./UserCell" diff --git a/site/src/components/UserCell/UserCell.test.tsx b/site/src/components/UserCell/UserCell.test.tsx index 9986edac0c5d5..48768ca48d1cb 100644 --- a/site/src/components/UserCell/UserCell.test.tsx +++ b/site/src/components/UserCell/UserCell.test.tsx @@ -1,5 +1,5 @@ import { fireEvent, render, screen } from "@testing-library/react" -import React from "react" +import { FC } from "react" import { MockUser, MockUserAgent, WrapperComponent } from "../../testHelpers/renderHelpers" import { UserCell, UserCellProps } from "./UserCell" @@ -13,7 +13,7 @@ namespace Helpers { onPrimaryTextSelect: jest.fn(), } - export const Component: React.FC = (props) => ( + export const Component: FC = (props) => ( diff --git a/site/src/components/UserCell/UserCell.tsx b/site/src/components/UserCell/UserCell.tsx index 4f6774890cf22..c3f54167d3995 100644 --- a/site/src/components/UserCell/UserCell.tsx +++ b/site/src/components/UserCell/UserCell.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 Typography from "@material-ui/core/Typography" -import React from "react" +import { FC } from "react" import { UserAvatar, UserAvatarProps } from "../UserAvatar/UserAvatar" export interface UserCellProps { @@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => ({ * UserCell is a single cell in an audit log table row that contains user-level * information */ -export const UserCell: React.FC = ({ Avatar, caption, primaryText, onPrimaryTextSelect }) => { +export const UserCell: FC = ({ Avatar, caption, primaryText, onPrimaryTextSelect }) => { const styles = useStyles() return ( diff --git a/site/src/components/UserDropdown/UserDropdown.stories.tsx b/site/src/components/UserDropdown/UserDropdown.stories.tsx index 14d89ee5d37e8..1ba9ee38b7c1a 100644 --- a/site/src/components/UserDropdown/UserDropdown.stories.tsx +++ b/site/src/components/UserDropdown/UserDropdown.stories.tsx @@ -1,6 +1,5 @@ import Box from "@material-ui/core/Box" import { Story } from "@storybook/react" -import React from "react" import { MockUser } from "../../testHelpers/entities" import { UserDropdown, UserDropdownProps } from "./UsersDropdown" diff --git a/site/src/components/UserDropdown/UserDropdown.test.tsx b/site/src/components/UserDropdown/UserDropdown.test.tsx index 6e9422eded0a7..400c006af4982 100644 --- a/site/src/components/UserDropdown/UserDropdown.test.tsx +++ b/site/src/components/UserDropdown/UserDropdown.test.tsx @@ -1,5 +1,4 @@ import { screen } from "@testing-library/react" -import React from "react" import { MockAdminRole, MockMemberRole, MockUser } from "../../testHelpers/entities" import { render } from "../../testHelpers/renderHelpers" import { Language, UserDropdown, UserDropdownProps } from "./UsersDropdown" diff --git a/site/src/components/UserProfileCard/UserProfileCard.tsx b/site/src/components/UserProfileCard/UserProfileCard.tsx index 020461dfcf573..d171ab4b3951d 100644 --- a/site/src/components/UserProfileCard/UserProfileCard.tsx +++ b/site/src/components/UserProfileCard/UserProfileCard.tsx @@ -1,7 +1,7 @@ import Chip from "@material-ui/core/Chip" import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" -import React from "react" +import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { Role } from "../../api/typesGenerated" import { UserAvatar } from "../UserAvatar/UserAvatar" @@ -10,7 +10,7 @@ export interface UserProfileCardProps { user: TypesGen.User } -export const UserProfileCard: React.FC = ({ user }) => { +export const UserProfileCard: FC = ({ user }) => { const styles = useStyles() return ( diff --git a/site/src/components/UsersTable/UsersTable.stories.tsx b/site/src/components/UsersTable/UsersTable.stories.tsx index bb806ea2f968f..0719d02a8d8d5 100644 --- a/site/src/components/UsersTable/UsersTable.stories.tsx +++ b/site/src/components/UsersTable/UsersTable.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { MockSiteRoles, MockUser, MockUser2 } from "../../testHelpers/renderHelpers" import { UsersTable, UsersTableProps } from "./UsersTable" diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx index f71dfde32b770..d0e507eda690f 100644 --- a/site/src/components/UsersTable/UsersTable.tsx +++ b/site/src/components/UsersTable/UsersTable.tsx @@ -4,7 +4,7 @@ import TableBody from "@material-ui/core/TableBody" import TableCell from "@material-ui/core/TableCell" import TableHead from "@material-ui/core/TableHead" import TableRow from "@material-ui/core/TableRow" -import React from "react" +import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { AvatarData } from "../AvatarData/AvatarData" import { EmptyState } from "../EmptyState/EmptyState" @@ -35,7 +35,7 @@ export interface UsersTableProps { onUpdateUserRoles: (user: TypesGen.User, roles: TypesGen.Role["name"][]) => void } -export const UsersTable: React.FC = ({ +export const UsersTable: FC = ({ users, roles, onSuspendUser, diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx index 309265f5994c3..6414af1ba0661 100644 --- a/site/src/components/Welcome/Welcome.tsx +++ b/site/src/components/Welcome/Welcome.tsx @@ -1,9 +1,9 @@ import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" -import React from "react" +import { FC } from "react" import { CoderIcon } from "../Icons/CoderIcon" -export const Welcome: React.FC = () => { +export const Welcome: FC = () => { const styles = useStyles() return ( diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx index 44a26919588cb..fe888478041ab 100644 --- a/site/src/components/Workspace/Workspace.stories.tsx +++ b/site/src/components/Workspace/Workspace.stories.tsx @@ -1,6 +1,5 @@ import { action } from "@storybook/addon-actions" import { Story } from "@storybook/react" -import React from "react" import { MockCanceledWorkspace, MockCancelingWorkspace, diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index ec9343d5e18e7..02976742f4943 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -1,6 +1,6 @@ import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" -import React from "react" +import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { BuildsTable } from "../BuildsTable/BuildsTable" @@ -26,7 +26,7 @@ export interface WorkspaceProps { /** * Workspace is the top-level component for viewing an individual workspace */ -export const Workspace: React.FC = ({ +export const Workspace: FC = ({ handleStart, handleStop, handleUpdate, diff --git a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.stories.tsx b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.stories.tsx index 4995769fabe4a..225e8e8e0fd4b 100644 --- a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.stories.tsx +++ b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.stories.tsx @@ -1,6 +1,5 @@ import PlayArrowRoundedIcon from "@material-ui/icons/PlayArrowRounded" import { ComponentMeta, Story } from "@storybook/react" -import React from "react" import { WorkspaceActionButton, WorkspaceActionButtonProps } from "./WorkspaceActionButton" export default { diff --git a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx index 631cff5f9bf4a..be8e7161044a9 100644 --- a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx +++ b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx @@ -1,5 +1,5 @@ import Button from "@material-ui/core/Button" -import React from "react" +import { FC } from "react" export interface WorkspaceActionButtonProps { label: string @@ -8,7 +8,7 @@ export interface WorkspaceActionButtonProps { className?: string } -export const WorkspaceActionButton: React.FC = ({ label, icon, onClick, className }) => { +export const WorkspaceActionButton: FC = ({ label, icon, onClick, className }) => { return (