chore(site): organize imports (#876)

site/.storybook/preview.js

@@ -1,9 +1,9 @@
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
-import { light, dark } from "../src/theme"
-import { addDecorator } from "node_modules/@storybook/react"
 import { createMemoryHistory } from "history"
+import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import { dark, light } from "../src/theme"
 import "../src/theme/global-fonts"
 
 addDecorator(withThemes(ThemeProvider, [light, dark]))

site/e2e/playwright.config.ts

@@ -1,5 +1,5 @@
-import * as path from "path"
 import { PlaywrightTestConfig } from "@playwright/test"
+import * as path from "path"
 
 const config: PlaywrightTestConfig = {
   testDir: "tests",

site/e2e/tests/login.spec.ts

@@ -1,6 +1,6 @@
 import { test } from "@playwright/test"
-import { ProjectsPage, SignInPage } from "../pom"
 import { email, password } from "../constants"
+import { ProjectsPage, SignInPage } from "../pom"
 import { waitForClientSideNavigation } from "./../util"
 
 test("Login takes user to /projects", async ({ baseURL, page }) => {

site/package.json

@@ -80,6 +80,7 @@
     "mini-css-extract-plugin": "2.6.0",
     "msw": "0.39.2",
     "prettier": "2.6.2",
+    "prettier-plugin-organize-imports": "2.3.4",
     "react-hot-loader": "4.13.0",
     "sql-formatter": "4.0.2",
     "style-loader": "3.3.1",

site/src/AppRouter.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Routes, Route } from "react-router-dom"
-import { RequireAuth, AuthAndNav } from "./components"
+import { Route, Routes } from "react-router-dom"
+import { AuthAndNav, RequireAuth } from "./components"
 import { IndexPage } from "./pages"
 import { NotFoundPage } from "./pages/404"
 import { CliAuthenticationPage } from "./pages/cli-auth"

site/src/Main.tsx

@@ -1,6 +1,6 @@
+import { inspect } from "@xstate/inspect"
 import React from "react"
 import ReactDOM from "react-dom"
-import { inspect } from "@xstate/inspect"
 import { Interpreter } from "xstate"
 import { App } from "./app"
 

site/src/api/index.test.ts

@@ -1,6 +1,6 @@
 import axios from "axios"
 import { getApiKey, login, logout } from "."
-import { LoginResponse, APIKeyResponse } from "./types"
+import { APIKeyResponse, LoginResponse } from "./types"
 
 // Mock the axios module so that no real network requests are made, but rather
 // we swap in a resolved or rejected value

site/src/app.tsx

@@ -1,13 +1,12 @@
-import React from "react"
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-import { SWRConfig } from "swr"
-import { light } from "./theme"
+import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
-
-import { XServiceProvider } from "./xServices/StateContext"
+import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
+import { light } from "./theme"
 import "./theme/global-fonts"
+import { XServiceProvider } from "./xServices/StateContext"
 
 export const App: React.FC = () => {
   return (

site/src/components/Button/CopyButton.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
 import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import React, { useState } from "react"

site/src/components/Button/index.ts

@@ -1,3 +1,3 @@
-export * from "./SplitButton"
-export * from "./LoadingButton"
 export * from "./CopyButton"
+export * from "./LoadingButton"
+export * from "./SplitButton"

site/src/components/CodeBlock/index.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "../../test_helpers"
 import React from "react"
+import { render } from "../../test_helpers"
 import { CodeBlock } from "./index"
 
 describe("CodeBlock", () => {

site/src/components/CodeExample/CodeExample.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "../../test_helpers"
 import React from "react"
+import { render } from "../../test_helpers"
 import { CodeExample } from "./CodeExample"
 
 describe("CodeExample", () => {

site/src/components/CodeExample/CodeExample.tsx

@@ -1,7 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-
 import { CopyButton } from "../Button"
 
 export interface CodeExampleProps {

site/src/components/EmptyState/index.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "../../test_helpers"
 import React from "react"
+import { render } from "../../test_helpers"
 import { EmptyState } from "./index"
 
 describe("EmptyState", () => {

site/src/components/EmptyState/index.tsx

@@ -1,8 +1,8 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
 import Box from "@material-ui/core/Box"
 import Button, { ButtonProps } from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
+import React from "react"
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */

site/src/components/Form/FormDropdownField.tsx

@@ -3,7 +3,6 @@ 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 { FormTextField, FormTextFieldProps } from "./FormTextField"
 
 export interface DropdownItem {

site/src/components/Form/FormTextField.tsx

@@ -1,7 +1,7 @@
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
+import { FormikContextType } from "formik"
 import React from "react"
 import { PasswordField } from "./PasswordField"
-import { FormikContextType } from "formik"
 
 /**
  * FormFieldProps are required props for creating form fields using a factory.

site/src/components/Form/index.ts

@@ -2,8 +2,8 @@ import { FormikContextType, getIn } from "formik"
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react"
 
 export * from "./FormCloseButton"
-export * from "./FormSection"
 export * from "./FormDropdownField"
+export * from "./FormSection"
 export * from "./FormTextField"
 export * from "./FormTitle"
 

site/src/components/Header/index.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "./../../test_helpers"
 import React from "react"
+import { render } from "./../../test_helpers"
 import { Header } from "./index"
 
 describe("Header", () => {

site/src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import Box from "@material-ui/core/Box"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { HeaderButton } from "./HeaderButton"
 

site/src/components/Icons/index.test.tsx

@@ -1,7 +1,6 @@
-import React from "react"
 import SvgIcon from "@material-ui/core/SvgIcon"
+import React from "react"
 import { render } from "./../../test_helpers"
-
 import * as Icons from "./index"
 
 const getAllIcons = (): [string, typeof SvgIcon][] => {

site/src/components/Navbar/NavbarView.test.tsx

@@ -1,6 +1,5 @@
-import React from "react"
 import { screen } from "@testing-library/react"
-
+import React from "react"
 import { render } from "../../test_helpers"
 import { MockUser } from "../../test_helpers/entities"
 import { NavbarView } from "./NavbarView"

site/src/components/Navbar/NavbarView.tsx

@@ -1,10 +1,10 @@
-import React from "react"
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { Link } from "react-router-dom"
+import { UserResponse } from "../../api/types"
 import { Logo } from "../Icons"
 import { UserDropdown } from "./UserDropdown"
-import { UserResponse } from "../../api/types"
 
 export interface NavbarViewProps {
   user?: UserResponse

site/src/components/Navbar/UserDropdown.tsx

@@ -7,12 +7,11 @@ import { fade, makeStyles } from "@material-ui/core/styles"
 import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
 import React, { useState } from "react"
-import { LogoutIcon } from "../Icons"
-import { BorderedMenu } from "./BorderedMenu"
-import { UserProfileCard } from "../User/UserProfileCard"
-
-import { UserAvatar } from "../User"
 import { UserResponse } from "../../api/types"
+import { LogoutIcon } from "../Icons"
+import { UserAvatar } from "../User"
+import { UserProfileCard } from "../User/UserProfileCard"
+import { BorderedMenu } from "./BorderedMenu"
 
 export interface UserDropdownProps {
   user: UserResponse

site/src/components/Navbar/index.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from "react"
 import { useActor } from "@xstate/react"
-import { NavbarView } from "./NavbarView"
+import React, { useContext } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
+import { NavbarView } from "./NavbarView"
 
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)

site/src/components/Page/Footer.test.tsx

@@ -1,6 +1,5 @@
-import React from "react"
 import { screen } from "@testing-library/react"
-
+import React from "react"
 import { render } from "../../test_helpers"
 import { Footer } from "./Footer"
 

site/src/components/Page/index.tsx

@@ -1,3 +1,3 @@
+export * from "./AuthAndNav"
 export * from "./Footer"
 export * from "./RequireAuth"
-export * from "./AuthAndNav"

site/src/components/SignIn/CliAuthToken.test.tsx

@@ -1,7 +1,6 @@
-import React from "react"
 import { screen } from "@testing-library/react"
+import React from "react"
 import { render } from "../../test_helpers"
-
 import { CliAuthToken } from "./CliAuthToken"
 
 describe("CliAuthToken", () => {

site/src/components/SignIn/CliAuthToken.tsx

@@ -1,6 +1,6 @@
 import Paper from "@material-ui/core/Paper"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { CodeExample } from "../CodeExample"
 

site/src/components/SignIn/SignInForm.tsx

@@ -1,13 +1,12 @@
+import FormHelperText from "@material-ui/core/FormHelperText"
 import { makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-
-import { Welcome } from "./Welcome"
-import FormHelperText from "@material-ui/core/FormHelperText"
-import { LoadingButton } from "./../Button"
-import TextField from "@material-ui/core/TextField"
 import { getFormHelpers, onChangeTrimmed } from "../Form"
+import { LoadingButton } from "./../Button"
+import { Welcome } from "./Welcome"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)

site/src/components/SignIn/Welcome.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { CoderIcon } from "../Icons"
-import React from "react"
 import Typography from "@material-ui/core/Typography"
+import React from "react"
+import { CoderIcon } from "../Icons"
 
 export const Welcome: React.FC = () => {
   const styles = useStyles()

site/src/components/Table/Cells/UserCell.test.tsx

@@ -1,7 +1,7 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import React from "react"
 import { MockUser, MockUserAgent, WrapperComponent } from "../../../test_helpers"
 import { UserCell, UserCellProps } from "./UserCell"
-import React from "react"
-import { fireEvent, render, screen } from "@testing-library/react"
 
 namespace Helpers {
   export const Props: UserCellProps = {

site/src/components/Table/Table.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
-import { render } from "./../../test_helpers"
 import React from "react"
-import { Table, Column } from "./Table"
+import { render } from "./../../test_helpers"
+import { Column, Table } from "./Table"
 
 interface TestData {
   name: string

site/src/components/Table/Table.tsx

@@ -1,13 +1,12 @@
-import React from "react"
 import Box from "@material-ui/core/Box"
 import MuiTable from "@material-ui/core/Table"
+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 TableCell from "@material-ui/core/TableCell"
-
-import { TableTitle } from "./TableTitle"
+import React from "react"
 import { TableHeaders } from "./TableHeaders"
-import TableBody from "@material-ui/core/TableBody"
+import { TableTitle } from "./TableTitle"
 
 export interface Column<T> {
   /**

site/src/components/Table/TableHeaders.tsx

@@ -1,7 +1,7 @@
-import React from "react"
+import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
 import TableRow from "@material-ui/core/TableRow"
-import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 
 export interface TableHeadersProps {
   columns: string[]

site/src/components/User/UserProfileCard.tsx

@@ -2,7 +2,6 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { UserResponse } from "../../api/types"
-
 import { UserAvatar } from "./UserAvatar"
 
 interface UserProfileCardProps {

site/src/components/Workspace/Workspace.stories.tsx

@@ -1,7 +1,7 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { Workspace, WorkspaceProps } from "./Workspace"
 import { MockOrganization, MockProject, MockWorkspace } from "../../test_helpers"
+import { Workspace, WorkspaceProps } from "./Workspace"
 
 export default {
   title: "Workspaces/Workspace",

site/src/components/Workspace/Workspace.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { Workspace } from "./Workspace"
 import { MockOrganization, MockProject, MockWorkspace, render } from "../../test_helpers"
+import { Workspace } from "./Workspace"
 
 describe("Workspace", () => {
   it("renders", async () => {

site/src/components/Workspace/Workspace.tsx

@@ -1,12 +1,12 @@
 import Box from "@material-ui/core/Box"
 import Paper from "@material-ui/core/Paper"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
 import CloudCircleIcon from "@material-ui/icons/CloudCircle"
-import { Link } from "react-router-dom"
 import React from "react"
-import * as Constants from "./constants"
+import { Link } from "react-router-dom"
 import * as Types from "../../api/types"
+import * as Constants from "./constants"
 import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {

site/src/forms/CreateProjectForm.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
+import { MockOrganization, MockProject, MockProvisioner } from "./../test_helpers"
 import { CreateProjectForm } from "./CreateProjectForm"
-import { MockProvisioner, MockOrganization, MockProject } from "./../test_helpers"
 
 describe("CreateProjectForm", () => {
   it("renders", async () => {

site/src/forms/CreateProjectForm.tsx

@@ -3,17 +3,16 @@ import { makeStyles } from "@material-ui/core/styles"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-
+import { CreateProjectRequest, Organization, Project, Provisioner } from "../api/types"
+import { LoadingButton } from "../components/Button"
 import {
   DropdownItem,
+  FormCloseButton,
   FormDropdownField,
+  FormSection,
   FormTextField,
   FormTitle,
-  FormSection,
-  FormCloseButton,
 } from "../components/Form"
-import { LoadingButton } from "../components/Button"
-import { Organization, Project, Provisioner, CreateProjectRequest } from "../api/types"
 
 export interface CreateProjectFormProps {
   provisioners: Provisioner[]

site/src/forms/CreateWorkspaceForm.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
-import { CreateWorkspaceForm } from "./CreateWorkspaceForm"
 import { MockProject, MockWorkspace } from "./../test_helpers"
+import { CreateWorkspaceForm } from "./CreateWorkspaceForm"
 
 describe("CreateWorkspaceForm", () => {
   it("renders", async () => {

site/src/forms/CreateWorkspaceForm.tsx

@@ -3,10 +3,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-
-import { FormCloseButton, FormTextField, FormTitle, FormSection } from "../components/Form"
+import { CreateWorkspaceRequest, Project, Workspace } from "../api/types"
 import { LoadingButton } from "../components/Button"
-import { Project, Workspace, CreateWorkspaceRequest } from "../api/types"
+import { FormCloseButton, FormSection, FormTextField, FormTitle } from "../components/Form"
 
 export interface CreateWorkspaceForm {
   project: Project

site/src/pages/404.tsx

@@ -1,7 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
-
 import Typography from "@material-ui/core/Typography"
+import React from "react"
 
 export const NotFoundPage: React.FC = () => {
   const styles = useStyles()

site/src/pages/cli-auth.tsx

@@ -1,10 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
 import { getApiKey } from "../api"
-import { CliAuthToken } from "../components/SignIn"
-
 import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
-import { useActor } from "@xstate/react"
+import { CliAuthToken } from "../components/SignIn"
 import { XServiceContext } from "../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {

site/src/pages/index.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-
 import { Navigate } from "react-router-dom"
 
 export const IndexPage: React.FC = () => {

site/src/pages/login.test.tsx

@@ -1,11 +1,11 @@
-import React from "react"
 import { act, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { history, render } from "../test_helpers"
-import { SignInPage } from "./login"
-import { server } from "../test_helpers/server"
 import { rest } from "msw"
+import React from "react"
 import { Language } from "../components/SignIn/SignInForm"
+import { history, render } from "../test_helpers"
+import { server } from "../test_helpers/server"
+import { SignInPage } from "./login"
 
 describe("SignInPage", () => {
   beforeEach(() => {

site/src/pages/login.tsx

@@ -1,10 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { SignInForm } from "./../components/SignIn"
 import { Navigate, useLocation } from "react-router-dom"
-import { XServiceContext } from "../xServices/StateContext"
 import { retrieveRedirect } from "../util/redirect"
+import { XServiceContext } from "../xServices/StateContext"
+import { SignInForm } from "./../components/SignIn"
 
 export const useStyles = makeStyles((theme) => ({
   root: {

site/src/pages/projects/[organization]/[project]/create.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback } from "react"
 import { makeStyles } from "@material-ui/core/styles"
+import React, { useCallback } from "react"
 import { useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
-
-import * as Types from "../../../../api/types"
 import * as API from "../../../../api"
+import * as Types from "../../../../api/types"
 import { ErrorSummary } from "../../../../components/ErrorSummary"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { CreateWorkspaceForm } from "../../../../forms/CreateWorkspaceForm"

site/src/pages/projects/[organization]/[project]/index.tsx

@@ -1,18 +1,17 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
 import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
-
 import { Organization, Project, Workspace } from "../../../../api/types"
+import { EmptyState } from "../../../../components/EmptyState"
+import { ErrorSummary } from "../../../../components/ErrorSummary"
 import { Header } from "../../../../components/Header"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { Footer } from "../../../../components/Page"
 import { Column, Table } from "../../../../components/Table"
-import { ErrorSummary } from "../../../../components/ErrorSummary"
-import { firstOrItem } from "../../../../util/array"
-import { EmptyState } from "../../../../components/EmptyState"
 import { unsafeSWRArgument } from "../../../../util"
+import { firstOrItem } from "../../../../util/array"
 
 export const ProjectPage: React.FC = () => {
   const styles = useStyles()

site/src/pages/projects/index.tsx

@@ -1,17 +1,16 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
 import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { Link } from "react-router-dom"
+import useSWR from "swr"
+import { Organization, Project } from "../../api/types"
 import { EmptyState } from "../../components"
+import { CodeExample } from "../../components/CodeExample/CodeExample"
 import { ErrorSummary } from "../../components/ErrorSummary"
 import { Header } from "../../components/Header"
+import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { Footer } from "../../components/Page"
 import { Column, Table } from "../../components/Table"
-import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-
-import { Organization, Project } from "../../api/types"
-import useSWR from "swr"
-import { CodeExample } from "../../components/CodeExample/CodeExample"
 
 export const ProjectsPage: React.FC = () => {
   const styles = useStyles()

site/src/pages/workspaces/[workspace].tsx

@@ -1,14 +1,14 @@
-import React from "react"
-import useSWR from "swr"
 import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { useParams } from "react-router-dom"
-import { Footer } from "../../components/Page"
-import { firstOrItem } from "../../util/array"
+import useSWR from "swr"
+import * as Types from "../../api/types"
 import { ErrorSummary } from "../../components/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { Footer } from "../../components/Page"
 import { Workspace } from "../../components/Workspace"
 import { unsafeSWRArgument } from "../../util"
-import * as Types from "../../api/types"
+import { firstOrItem } from "../../util/array"
 
 export const WorkspacePage: React.FC = () => {
   const styles = useStyles()

site/src/test_helpers/entities.ts

@@ -1,4 +1,4 @@
-import { Provisioner, Organization, Project, Workspace, UserResponse, UserAgent } from "../api/types"
+import { Organization, Project, Provisioner, UserAgent, UserResponse, Workspace } from "../api/types"
 
 export const MockSessionToken = { session_token: "my-session-token" }
 

site/src/test_helpers/index.tsx

@@ -1,10 +1,9 @@
-import { render as wrappedRender, RenderResult } from "@testing-library/react"
-import React from "react"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-
-import { dark } from "../theme"
+import { render as wrappedRender, RenderResult } from "@testing-library/react"
 import { createMemoryHistory } from "history"
+import React from "react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import { dark } from "../theme"
 import { XServiceProvider } from "../xServices/StateContext"
 
 export const history = createMemoryHistory()

site/src/theme/index.ts

@@ -1 +1 @@
-export { light, dark } from "./theme"
+export { dark, light } from "./theme"

site/src/xServices/StateContext.tsx

@@ -1,5 +1,5 @@
-import React, { createContext } from "react"
 import { useInterpret } from "@xstate/react"
+import React, { createContext } from "react"
 import { ActorRefFrom } from "xstate"
 import { userMachine } from "./user/userXService"
 

site/src/xServices/user/userXService.ts

@@ -1,6 +1,6 @@
-import { createMachine, assign } from "xstate"
-import * as Types from "../../api/types"
+import { assign, createMachine } from "xstate"
 import * as API from "../../api"
+import * as Types from "../../api/types"
 
 export interface UserContext {
   getUserError?: Error | unknown

site/webpack.dev.ts

@@ -5,7 +5,6 @@
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
 import { Configuration } from "webpack"
 import "webpack-dev-server"
-
 import { commonWebpackConfig } from "./webpack.common"
 
 const commonPlugins = commonWebpackConfig.plugins || []

site/yarn.lock

@@ -11664,6 +11664,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-plugin-organize-imports@2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-2.3.4.tgz#65473861ae5ab7960439fff270a2258558fbe9ba"
+  integrity sha512-R8o23sf5iVL/U71h9SFUdhdOEPsi3nm42FD/oDYIZ2PQa4TNWWuWecxln6jlIQzpZTDMUeO1NicJP6lLn2TtRw==
+
 prettier@2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"