coder · greyscaled · Apr 5, 2022 · Apr 5, 2022
@@ -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]))

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

@@ -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 }) => {

@@ -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",

@@ -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"

@@ -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"
 

@@ -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

@@ -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 (

@@ -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"

@@ -1,3 +1,3 @@
-export * from "./SplitButton"
-export * from "./LoadingButton"
 export * from "./CopyButton"
+export * from "./LoadingButton"
+export * from "./SplitButton"
@@ -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", () => {

@@ -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", () => {

@@ -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 {

@@ -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", () => {

@@ -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 */

@@ -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 {

@@ -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.

@@ -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"
 

@@ -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", () => {

@@ -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"
 

@@ -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][] => {

@@ -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"

@@ -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

@@ -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 { UserResponse } from "../../api/types"
 import { LogoutIcon } from "../Icons"
-import { BorderedMenu } from "./BorderedMenu"
-import { UserProfileCard } from "../User/UserProfileCard"
-
 import { UserAvatar } from "../User"
-import { UserResponse } from "../../api/types"
+import { UserProfileCard } from "../User/UserProfileCard"
+import { BorderedMenu } from "./BorderedMenu"
 
 export interface UserDropdownProps {
   user: UserResponse

@@ -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)

@@ -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"
 

@@ -1,3 +1,3 @@
+export * from "./AuthAndNav"
 export * from "./Footer"
 export * from "./RequireAuth"
-export * from "./AuthAndNav"
@@ -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", () => {

@@ -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"
 

@@ -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)

@@ -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()

@@ -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 = {

@@ -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

@@ -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> {
   /**

@@ -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[]

@@ -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 {

@@ -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",

@@ -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 () => {

@@ -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 {

@@ -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 () => {