May 31, 2022 · May 27, 2022 · May 27, 2022 · May 31, 2022 · May 27, 2022
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
  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
 importReact 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"
 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
        <Route path="*" element={<NotFoundPage />} />
      </Route>
    </Routes>
  </React.Suspense>
  </Suspense>
 )
diff --git a/site/src/Main.tsx b/site/src/Main.tsx
 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
 importReact 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
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 importReact from "react"
 import{ FC } from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
 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
 importReact from "react"
 import{ FC } from "react"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
 import { RequireAuth } from "../RequireAuth/RequireAuth"
 /**
 * 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
 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
 import Avatar from "@material-ui/core/Avatar"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 importReact from "react"
 import{ FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { combineClasses } from "../../util/combineClasses"
 import { firstLetter } from "../../util/firstLetter"
  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
 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
 import Popover, { PopoverProps } from "@material-ui/core/Popover"
 import { fade, makeStyles } from "@material-ui/core/styles"
 importReact 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
 import { makeStyles } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import CheckIcon from "@material-ui/icons/Check"
 importReact from "react"
 import{ FC } from "react"
 import { NavLink } from "react-router-dom"
 import { ellipsizeText } from "../../util/ellipsizeText"
 import { Typography } from "../Typography/Typography"
  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
 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
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
 importReact from "react"
 import{ FC } from "react"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
  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
 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
 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
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 importReact 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
 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
 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
 import { makeStyles } from "@material-ui/core/styles"
 importReact 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 (
      {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
 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
 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
 import { makeStyles } from "@material-ui/core/styles"
 importReact from "react"
 import{ FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { CopyButton } from "../CopyButton/CopyButton"

 /**
 * 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
 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
 import { fireEvent, render } from "@testing-library/react"
 importReact 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
 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
 import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 importReact from "react"
 import{ FC } from "react"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
  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
 import { fade, makeStyles, Theme } from "@material-ui/core/styles"
 import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
 importReact from "react"
 import{ FC } from "react"

 const useStyles = makeStyles((theme: Theme) => ({
  arrowIcon: {
  },
 }))

 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
 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
 import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 importReact 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
 }

 /**
 * 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
 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
 import Snackbar, { SnackbarProps as MuiSnackbarProps } from "@material-ui/core/Snackbar"
 import { makeStyles } from "@material-ui/core/styles"
 import CloseIcon from "@material-ui/icons/Close"
 importReact from "react"
 import{ FC } from "react"
 import { combineClasses } from "../../util/combineClasses"

 type EnterpriseSnackbarVariant = "error" | "info"
 *
 * 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 = {},
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
Copy link MemberAuthor Kira-PilotMay 27, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Turning off these ESLint rules (as suggested by React) so we don't hear it complain.
		settings:
		react:
		version: detect
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		importReact 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"
Expand All		@@ -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
Expand DownExpand Up		@@ -157,5 +157,5 @@ export const AppRouter: React.FC = () => (
		<Route path="*" element={<NotFoundPage />} />
		</Route>
		</Routes>
		</React.Suspense>
		</Suspense>
		)
Original file line number	Diff line number	Diff line change
		@@ -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"
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		importReact from "react"
		import{ FC } from "react"

		const ReactMarkdown:React.FC = ({ children }) => {
		const ReactMarkdown: FC = ({ children }) => {
		return <div data-testid="markdown">{children}</div>
		}

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import CssBaseline from "@material-ui/core/CssBaseline"
		import ThemeProvider from "@material-ui/styles/ThemeProvider"
		importReact from "react"
		import{ FC } from "react"
		import { BrowserRouter as Router } from "react-router-dom"
		import { SWRConfig } from "swr"
		import { AppRouter } from "./AppRouter"
Expand All		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		import { Story } from "@storybook/react"
		import React from "react"
		import { AvatarData, AvatarDataProps } from "./AvatarData"

		export default {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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"
		importReact from "react"
		import{ FC } from "react"
		import { Link as RouterLink } from "react-router-dom"
		import { combineClasses } from "../../util/combineClasses"
		import { firstLetter } from "../../util/firstLetter"
Expand All		@@ -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 (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,14 +1,14 @@
		import Popover, { PopoverProps } from "@material-ui/core/Popover"
		import { fade, makeStyles } from "@material-ui/core/styles"
		importReact 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 (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"
		importReact from "react"
		import{ FC } from "react"
		import { NavLink } from "react-router-dom"
		import { ellipsizeText } from "../../util/ellipsizeText"
		import { Typography } from "../Typography/Typography"
Expand All		@@ -26,7 +26,7 @@ interface BorderedMenuRowProps {
		onClick?: () => void
		}

		export const BorderedMenuRow:React.FC<BorderedMenuRowProps> = ({
		export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
		active,
		description,
		Icon,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		import { ComponentMeta, Story } from "@storybook/react"
		import React from "react"
		import { MockBuilds } from "../../testHelpers/entities"
		import { BuildsTable, BuildsTableProps } from "./BuildsTable"

Expand Down