Aug 22, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022 · Aug 2, 2022
diff --git a/site/package.json b/site/package.json
    "cron-parser": "4.5.0",
    "cronstrue": "2.11.0",
    "dayjs": "1.11.4",
    "formik": "2.2.9",
    "formik": "^2.2.9",
    "front-matter": "4.0.2",
    "history": "5.3.0",
    "just-debounce-it": "3.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-helmet": "6.1.0",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-helmet-async": "1.3.0",
    "react-markdown": "8.0.3",
    "react-router-dom": "6.3.0",
    "sourcemapped-stacktrace": "1.1.11",
    "swr": "1.3.0",
    "tzdata": "1.0.30",
    "uuid": "8.3.2",
    "xstate": "4.32.1",
    "@storybook/addon-links": "6.5.9",
    "@storybook/react": "6.4.22",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "12.1.5",
    "@testing-library/user-event": "14.3.0",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/express": "4.17.13",
    "@types/jest": "27.4.1",
    "@types/node": "14.18.22",
    "@types/react": "17.0.44",
    "@types/react-dom": "17.0.16",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "@types/react-helmet": "6.1.5",
    "@types/superagent": "4.1.15",
    "@types/uuid": "8.3.4",
    "jest-runner-eslint": "1.0.0",
    "jest-websocket-mock": "2.3.0",
    "mini-css-extract-plugin": "2.6.1",
    "msw": "0.42.0",
    "msw": "^0.44.2",
    "prettier": "2.7.1",
    "prettier-plugin-organize-imports": "3.0.0",
    "react-hot-loader": "4.13.0",
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
 export const AppRouter: FC = () => {
  const xServices = useContext(XServiceContext)
  const permissions = useSelector(xServices.authXService, selectPermissions)

  return (
    <Suspense fallback={<></>}>
      <Routes>
diff --git a/site/src/Main.tsx b/site/src/Main.tsx
 import { inspect } from "@xstate/inspect"
 importReactDOMfrom "react-dom"
 import{ createRoot }from "react-dom/client"
 import { Interpreter } from "xstate"
 import { App } from "./app"

     ██████▀▄█    ▀▀▀▀   ▀▀▀▀  ▀▀▀▀▀  ▀▀▀▀ ▀
 `)
  const element = document.getElementById("root")
  ReactDOM.render(<App />, element)
  if (element === null) {
    throw new Error("root element is null")
  }
  const root = createRoot(element)
  root.render(<App />)
 }

 main()
diff --git a/site/src/__mocks__/react-markdown.tsx b/site/src/__mocks__/react-markdown.tsx
 import { FC } from "react"
 import { FC, PropsWithChildren } from "react"

 const ReactMarkdown: FC = ({ children }) => {
 const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ 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"
 import { FC } from "react"
 import { HelmetProvider } from "react-helmet-async"
 import { BrowserRouter as Router } from "react-router-dom"
 import { AppRouter } from "./AppRouter"
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
 export const App: FC = () => {
  return (
    <Router>
      <ThemeProvider theme={dark}>
        <CssBaseline />
        <ErrorBoundary>
          <XServiceProvider>
            <AppRouter />
            <GlobalSnackbar />
          </XServiceProvider>
        </ErrorBoundary>
      </ThemeProvider>
      <HelmetProvider>
        <ThemeProvider theme={dark}>
          <CssBaseline />
          <ErrorBoundary>
            <XServiceProvider>
              <AppRouter />
              <GlobalSnackbar />
            </XServiceProvider>
          </ErrorBoundary>
        </ThemeProvider>
      </HelmetProvider>
    </Router>
  )
 }
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import ComputerIcon from "@material-ui/icons/Computer"
 import { FC } from "react"
 import { FC, PropsWithChildren } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../util/random"

  appIcon?: TypesGen.WorkspaceApp["icon"]
 }

 export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, appIcon }) => {
 export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
  userName,
  workspaceName,
  appName,
  appIcon,
 }) => {
  const styles = useStyles()
  const href = `/@${userName}/${workspaceName}/apps/${appName}`

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"
 import { FC } from "react"
 import { FC, PropsWithChildren } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { firstLetter } from "../../util/firstLetter"
 import {
  avatar?: React.ReactNode
 }

 export const AvatarData: FC<AvatarDataProps> = ({
 export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
  title,
  subtitle,
  link,
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"
 import { FC } from "react"
 import { FC, PropsWithChildren } from "react"

 type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"

 export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
  variant?: BorderedMenuVariant
 }

 export const BorderedMenu: FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
 export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
  children,
  variant,
  ...rest
 }) => {
  const styles = useStyles()

  return (
diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
  onClick?: () => void
 }

 export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
 export const BorderedMenuRow: FC<React.PropsWithChildren<BorderedMenuRowProps>> = ({
  active,
  description,
  Icon,
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
  className?: string
 }

 export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
 export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
  builds,
  className,
 }) => {
  const { username, workspace: workspaceName } = useParams()
  const isLoading = !builds
  const theme: Theme = useTheme()
diff --git a/site/src/components/CliAuthToken/CliAuthToken.tsx b/site/src/components/CliAuthToken/CliAuthToken.tsx
  sessionToken: string
 }

 export const CliAuthToken: FC<CliAuthTokenProps> = ({ sessionToken }) => {
 export const CliAuthToken: FC<React.PropsWithChildren<CliAuthTokenProps>> = ({ sessionToken }) => {
  const styles = useStyles()
  return (
    <Paper className={styles.container}>
diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
  className?: string
 }

 export const CodeBlock: FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
 export const CodeBlock: FC<React.PropsWithChildren<CodeBlockProps>> = ({
  lines,
  ctas,
  className = "",
 }) => {
  const styles = useStyles()

  return (
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
 /**
 * Component to show single-line code examples, with a copy button
 */
 export const CodeExample: FC<CodeExampleProps> = ({
 export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
  code,
  className,
  buttonClassName,
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"
 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: FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
  export const Component: FC<React.PropsWithChildren<ConfirmDialogProps>> = (
    props: ConfirmDialogProps,
  ) => {
    return (
      <WrapperComponent>
        <ConfirmDialog {...props} />

    // When
    const { getByText } = render(<Helpers.Component {...props} />)
    act(() => {
      fireEvent.click(getByText("CANCEL"))
    })
    fireEvent.click(getByText("CANCEL"))

    // Then
    expect(onCloseMock).toBeCalledTimes(1)

    // When
    const { getByText } = render(<Helpers.Component {...props} />)
    act(() => {
      fireEvent.click(getByText("CONFIRM"))
    })
    fireEvent.click(getByText("CONFIRM"))

    // Then
    expect(onCloseMock).toBeCalledTimes(0)
diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
 * Quick-use version of the Dialog component with slightly alternative styles,
 * great to use for dialogs that don't have any interaction beyond yes / no.
 */
 export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 export const ConfirmDialog: React.FC<React.PropsWithChildren<ConfirmDialogProps>> = ({
  cancelText,
  confirmLoading,
  confirmText,
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
 /**
 * Copy button used inside the CodeBlock component internally
 */
 export const CopyButton: React.FC<CopyButtonProps> = ({
 export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
  text,
  ctaCopy,
  wrapperClassName = "",
diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
  username: nameValidator(Language.usernameLabel),
 })

 export const CreateUserForm: FC<CreateUserFormProps> = ({
 export const CreateUserForm: FC<React.PropsWithChildren<CreateUserFormProps>> = ({
  onSubmit,
  onCancel,
  formErrors,
diff --git a/site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx b/site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx
  handleCancel: () => void
 }

 export const DeleteWorkspaceDialog: React.FC<DeleteWorkspaceDialogProps> = ({
  isOpen,
  handleCancel,
  handleConfirm,
 }) => (
 export const DeleteWorkspaceDialog: React.FC<
  React.PropsWithChildren<DeleteWorkspaceDialogProps>
 > = ({ isOpen, handleCancel, handleConfirm }) => (
  <ConfirmDialog
    type="delete"
    hideCancel={false}
diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
 * 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: FC<EmptyStateProps> = (props) => {
 export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (props) => {
  const { message, description, cta, descriptionClassName, className, ...boxProps } = props
  const styles = useStyles()

diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
 *
 * See original component's Material UI documentation here: https://material-ui.com/components/snackbars/
 */
 export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
 export const EnterpriseSnackbar: FC<React.PropsWithChildren<EnterpriseSnackbarProps>> = ({
  onClose,
  variant = "info",
  ContentProps = {},
diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
 import { Component, ReactNode } from "react"
 importReact,{ Component, ReactNode } from "react"
 import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"

 type ErrorBoundaryProps =Record<string,unknown>
 type ErrorBoundaryProps =React.PropsWithChildren<unknown>

 interface ErrorBoundaryState {
  error: Error | null
diff --git a/site/src/components/ErrorSummary/ErrorSummary.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
  defaultMessage?: string
 }

 export const ErrorSummary: FC<ErrorSummaryProps> = ({
 export const ErrorSummary: FC<React.PropsWithChildren<ErrorSummaryProps>> = ({
  error,
  retry,
  dismissible,
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
  buildInfo?: TypesGen.BuildInfoResponse
 }

 export const Footer: React.FC<FooterProps> = ({ buildInfo }) => {
 export const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({ buildInfo }) => {
  const styles = useFooterStyles()

  const githubUrl = `https://github.com/coder/coder/issues/new?labels=needs+grooming&body=${encodeURIComponent(`Version: [\`${buildInfo?.version}\`](${buildInfo?.external_url})
diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx
  onClose: () => void
 }

 export const FormCloseButton: React.FC<FormCloseButtonProps> = ({ onClose }) => {
 export const FormCloseButton: React.FC<React.PropsWithChildren<FormCloseButtonProps>> = ({
  onClose,
 }) => {
  const styles = useStyles()

  useEffect(() => {
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
  },
 }))

 export const FormFooter: FC<FormFooterProps> = ({
 export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
  onCancel,
  isLoading,
  submitLabel = Language.defaultSubmitLabel,
diff --git a/site/src/components/FormSection/FormSection.tsx b/site/src/components/FormSection/FormSection.tsx
  },
 }))

 export const FormSection: FC<FormSectionProps> = ({ title, description, children }) => {
 export const FormSection: FC<React.PropsWithChildren<FormSectionProps>> = ({
  title,
  description,
  children,
 }) => {
  const styles = useStyles()

  return (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,16 +39,17 @@
		"cron-parser": "4.5.0",
		"cronstrue": "2.11.0",
		"dayjs": "1.11.4",
		"formik": "2.2.9",
		"formik": "^2.2.9",
		"front-matter": "4.0.2",
		"history": "5.3.0",
		"just-debounce-it": "3.0.1",
		"react": "17.0.2",
		"react-dom": "17.0.2",
		"react-helmet": "6.1.0",
		"react": "^18.2.0",
ammario marked this conversation as resolved. Show resolvedHide resolved
		"react-dom": "18.2.0",
		"react-helmet-async": "1.3.0",
		"react-markdown": "8.0.3",
		"react-router-dom": "6.3.0",
		"sourcemapped-stacktrace": "1.1.11",
		"swr": "1.3.0",
		"tzdata": "1.0.30",
		"uuid": "8.3.2",
		"xstate": "4.32.1",
Expand All		@@ -70,13 +71,13 @@
		"@storybook/addon-links": "6.5.9",
		"@storybook/react": "6.4.22",
		"@testing-library/jest-dom": "5.16.4",
		"@testing-library/react": "12.1.5",
		"@testing-library/user-event": "14.3.0",
		"@testing-library/react": "^13.3.0",
		"@testing-library/user-event": "^14.4.3",
		"@types/express": "4.17.13",
		"@types/jest": "27.4.1",
		"@types/node": "14.18.22",
		"@types/react": "17.0.44",
		"@types/react-dom": "17.0.16",
		"@types/react": "18.0.15",
		"@types/react-dom": "18.0.6",
		"@types/react-helmet": "6.1.5",
		"@types/superagent": "4.1.15",
		"@types/uuid": "8.3.4",
Expand DownExpand Up		@@ -105,7 +106,7 @@
		"jest-runner-eslint": "1.0.0",
		"jest-websocket-mock": "2.3.0",
		"mini-css-extract-plugin": "2.6.1",
		"msw": "0.42.0",
		"msw": "^0.44.2",
		"prettier": "2.7.1",
		"prettier-plugin-organize-imports": "3.0.0",
		"react-hot-loader": "4.13.0",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,7 +35,6 @@ const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
		export const AppRouter: FC = () => {
		const xServices = useContext(XServiceContext)
		const permissions = useSelector(xServices.authXService, selectPermissions)

		return (
		<Suspense fallback={<></>}>
		<Routes>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import { inspect } from "@xstate/inspect"
		importReactDOMfrom "react-dom"
		import{ createRoot }from "react-dom/client"
		import { Interpreter } from "xstate"
		import { App } from "./app"

Expand All		@@ -25,7 +25,11 @@ const main = () => {
		██████▀▄█ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀ ▀
		`)
		const element = document.getElementById("root")
		ReactDOM.render(<App />, element)
		if (element === null) {
		throw new Error("root element is null")
		}
		const root = createRoot(element)
		root.render(<App />)
		}

		main()
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import { FC } from "react"
		import { FC, PropsWithChildren } from "react"

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

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,7 @@
		import CssBaseline from "@material-ui/core/CssBaseline"
		import ThemeProvider from "@material-ui/styles/ThemeProvider"
		import { FC } from "react"
		import { HelmetProvider } from "react-helmet-async"
		import { BrowserRouter as Router } from "react-router-dom"
		import { AppRouter } from "./AppRouter"
		import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
Expand All		@@ -12,15 +13,17 @@ import { XServiceProvider } from "./xServices/StateContext"
		export const App: FC = () => {
		return (
		<Router>
		<ThemeProvider theme={dark}>
		<CssBaseline />
		<ErrorBoundary>
		<XServiceProvider>
		<AppRouter />
		<GlobalSnackbar />
		</XServiceProvider>
		</ErrorBoundary>
		</ThemeProvider>
		<HelmetProvider>
		<ThemeProvider theme={dark}>
		<CssBaseline />
		<ErrorBoundary>
		<XServiceProvider>
		<AppRouter />
		<GlobalSnackbar />
		</XServiceProvider>
		</ErrorBoundary>
		</ThemeProvider>
		</HelmetProvider>
		</Router>
		)
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
		import Link from "@material-ui/core/Link"
		import { makeStyles } from "@material-ui/core/styles"
		import ComputerIcon from "@material-ui/icons/Computer"
		import { FC } from "react"
		import { FC, PropsWithChildren } from "react"
		import * as TypesGen from "../../api/typesGenerated"
		import { generateRandomString } from "../../util/random"

Expand All		@@ -17,7 +17,12 @@ export interface AppLinkProps {
		appIcon?: TypesGen.WorkspaceApp["icon"]
		}

		export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, appIcon }) => {
		export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
		userName,
		workspaceName,
		appName,
		appIcon,
		}) => {
		const styles = useStyles()
		const href = `/@${userName}/${workspaceName}/apps/${appName}`

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"
		import { FC } from "react"
		import { FC, PropsWithChildren } from "react"
		import { Link as RouterLink } from "react-router-dom"
		import { firstLetter } from "../../util/firstLetter"
		import {
Expand All		@@ -18,7 +18,7 @@ export interface AvatarDataProps {
		avatar?: React.ReactNode
		}

		export const AvatarData: FC<AvatarDataProps> = ({
		export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
		title,
		subtitle,
		link,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,14 +1,18 @@
		import Popover, { PopoverProps } from "@material-ui/core/Popover"
		import { fade, makeStyles } from "@material-ui/core/styles"
		import { FC } from "react"
		import { FC, PropsWithChildren } from "react"

		type BorderedMenuVariant = "admin-dropdown" \| "user-dropdown"

		export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
		variant?: BorderedMenuVariant
		}

		export const BorderedMenu: FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
		export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
		children,
		variant,
		...rest
		}) => {
		const styles = useStyles()

		return (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,7 +26,7 @@ interface BorderedMenuRowProps {
		onClick?: () => void
		}

		export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
		export const BorderedMenuRow: FC<React.PropsWithChildren<BorderedMenuRowProps>> = ({
		active,
		description,
		Icon,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,7 +30,10 @@ export interface BuildsTableProps {
		className?: string
		}

		export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
		export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
		builds,
		className,
		}) => {
		const { username, workspace: workspaceName } = useParams()
		const isLoading = !builds
		const theme: Theme = useTheme()
Expand Down