webui: force import order

24 files changed, 77 insertions, 43 deletions

diff --git a/webui/.eslintrc b/webui/.eslintrc
index 112028d8..3c6e976f 100644
--- a/webui/.eslintrc
+++ b/webui/.eslintrc
@@ -1,4 +1,25 @@
 {
-  "extends": ["react-app", "plugin:prettier/recommended"],
-  "ignorePatterns": ["src/fragmentTypes.js"]
+  "extends": [
+    "react-app",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "import/order": [
+      "error", {
+        "alphabetize": {"order": "asc"},
+        "pathGroups": [{
+          "pattern": "@material-ui/**",
+          "group": "external",
+          "position": "after"
+        }, {
+          "pattern": "*.generated",
+          "group": "sibling",
+          "position": "after"
+        }],
+        "groups": [["builtin", "external"], "parent", ["sibling", "index"]],
+        "newlines-between": "always"
+      }
+    ]
+  }
 }
diff --git a/webui/codegen.yaml b/webui/codegen.yaml
index 161fd1c7..30b67e45 100644
--- a/webui/codegen.yaml
+++ b/webui/codegen.yaml
@@ -26,4 +26,4 @@ generates:
 
 hooks:
   afterOneFileWrite:
-  - prettier --write
+  - eslint --fix
diff --git a/webui/package.json b/webui/package.json
index 03ac4da9..ed143e68 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -46,7 +46,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "generate": "graphql-codegen",
-    "lint": "eslint src/"
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "proxy": "http://localhost:3001",
   "browserslist": [
diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 928d7350..6f66a6ec 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -1,18 +1,18 @@
 import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
 import {
   createMuiTheme,
   ThemeProvider,
   makeStyles,
 } from '@material-ui/core/styles';
-import Toolbar from '@material-ui/core/Toolbar';
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import { Link } from 'react-router-dom';
 
+import CurrentIdentity from './CurrentIdentity';
 import BugQuery from './bug/BugQuery';
 import ListQuery from './list/ListQuery';
-import CurrentIdentity from './CurrentIdentity';
 
 const theme = createMuiTheme({
   palette: {
diff --git a/webui/src/Author.tsx b/webui/src/Author.tsx
index 475244db..20de583a 100644
--- a/webui/src/Author.tsx
+++ b/webui/src/Author.tsx
@@ -1,5 +1,5 @@
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import MAvatar from '@material-ui/core/Avatar';
+import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import React from 'react';
 
 import { AuthoredFragment } from './Author.generated';
diff --git a/webui/src/Content.tsx b/webui/src/Content.tsx
index 9683f478..889c9987 100644
--- a/webui/src/Content.tsx
+++ b/webui/src/Content.tsx
@@ -1,8 +1,9 @@
-import unified from 'unified';
-import parse from 'remark-parse';
+import { ReactNode } from 'react';
 import html from 'remark-html';
+import parse from 'remark-parse';
 import remark2react from 'remark-react';
-import { ReactNode } from 'react';
+import unified from 'unified';
+
 import ImageTag from './tag/ImageTag';
 import PreTag from './tag/PreTag';
 
diff --git a/webui/src/CurrentIdentity.tsx b/webui/src/CurrentIdentity.tsx
index 07ff648c..5b8fcbb9 100644
--- a/webui/src/CurrentIdentity.tsx
+++ b/webui/src/CurrentIdentity.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
 
 import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
 
diff --git a/webui/src/Label.tsx b/webui/src/Label.tsx
index 68c50b9d..a33b4c2c 100644
--- a/webui/src/Label.tsx
+++ b/webui/src/Label.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import { common } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   getContrastRatio,
   darken,
 } from '@material-ui/core/styles/colorManipulator';
-import { common } from '@material-ui/core/colors';
+import React from 'react';
 
-import { Color } from './gqlTypes';
 import { LabelFragment } from './Label.generated';
+import { Color } from './gqlTypes';
 
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;
diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx
index 3685b506..f4029a5f 100644
--- a/webui/src/bug/Bug.tsx
+++ b/webui/src/bug/Bug.tsx
@@ -1,11 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
-import TimelineQuery from './TimelineQuery';
 import Label from '../Label';
+
 import { BugFragment } from './Bug.generated';
+import TimelineQuery from './TimelineQuery';
 
 const useStyles = makeStyles(theme => ({
   main: {
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
index b436db5a..ea7bb7da 100644
--- a/webui/src/bug/BugQuery.tsx
+++ b/webui/src/bug/BugQuery.tsx
@@ -2,8 +2,8 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { useGetBugQuery } from './BugQuery.generated';
 import Bug from './Bug';
+import { useGetBugQuery } from './BugQuery.generated';
 
 type Props = RouteComponentProps<{
   id: string;
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index df8ab0a5..442cbbb4 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
 import Label from '../Label';
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 4c22745f..68d3cea0 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,10 +1,11 @@
-import { makeStyles } from '@material-ui/styles';
 import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import { Avatar } from '../Author';
-import Date from '../Date';
 import Content from '../Content';
+import Date from '../Date';
 
 const useStyles = makeStyles(theme => ({
   author: {
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index eb7f5bfe..b6dd419d 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
 
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index b20ed9ca..09343ad1 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
 
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index 7d1946f2..aeef7d2b 100644
--- a/webui/src/bug/Timeline.js
+++ b/webui/src/bug/Timeline.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import LabelChange from './LabelChange';
 import Message from './Message';
 import SetStatus from './SetStatus';
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index 0c9305b1..11f3d08c 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -1,7 +1,7 @@
 import CircularProgress from '@material-ui/core/CircularProgress';
 import React from 'react';
-import Timeline from './Timeline';
 
+import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 
 const TimelineQuery = ({ id }) => {
diff --git a/webui/src/index.tsx b/webui/src/index.tsx
index 6f838c69..c64daf0c 100644
--- a/webui/src/index.tsx
+++ b/webui/src/index.tsx
@@ -1,5 +1,5 @@
-import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import { createMuiTheme } from '@material-ui/core/styles';
+import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import ApolloClient from 'apollo-boost';
 import {
   IntrospectionFragmentMatcher,
@@ -10,8 +10,8 @@ import { ApolloProvider } from 'react-apollo';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 
-import introspectionQueryResultData from './fragmentTypes';
 import App from './App';
+import introspectionQueryResultData from './fragmentTypes';
 
 const theme = createMuiTheme();
 
diff --git a/webui/src/list/BugRow.tsx b/webui/src/list/BugRow.tsx
index 6979b296..f94538a7 100644
--- a/webui/src/list/BugRow.tsx
+++ b/webui/src/list/BugRow.tsx
@@ -1,16 +1,18 @@
-import { makeStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell/TableCell';
 import TableRow from '@material-ui/core/TableRow/TableRow';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { makeStyles } from '@material-ui/core/styles';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import React from 'react';
 import { Link } from 'react-router-dom';
+
 import Date from '../Date';
 import Label from '../Label';
-import { BugRowFragment } from './BugRow.generated';
 import { Status } from '../gqlTypes';
 
+import { BugRowFragment } from './BugRow.generated';
+
 type OpenClosedProps = { className: string };
 const Open = ({ className }: OpenClosedProps) => (
   <Tooltip title="Open">
diff --git a/webui/src/list/Filter.tsx b/webui/src/list/Filter.tsx
index d0091306..30b52de8 100644
--- a/webui/src/list/Filter.tsx
+++ b/webui/src/list/Filter.tsx
@@ -1,12 +1,12 @@
-import React, { useState, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { LocationDescriptor } from 'history';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { makeStyles } from '@material-ui/core/styles';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import clsx from 'clsx';
+import { LocationDescriptor } from 'history';
+import React, { useState, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 export type Query = { [key: string]: Array<string> };
 
diff --git a/webui/src/list/FilterToolbar.tsx b/webui/src/list/FilterToolbar.tsx
index 2aaf7f84..df295054 100644
--- a/webui/src/list/FilterToolbar.tsx
+++ b/webui/src/list/FilterToolbar.tsx
@@ -1,10 +1,11 @@
-import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
-import { LocationDescriptor } from 'history';
 import { pipe } from '@arrows/composition';
 import Toolbar from '@material-ui/core/Toolbar';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { makeStyles } from '@material-ui/core/styles';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { LocationDescriptor } from 'history';
+import React from 'react';
+
 import {
   FilterDropdown,
   FilterProps,
diff --git a/webui/src/list/List.tsx b/webui/src/list/List.tsx
index 23b193d4..cebd13f2 100644
--- a/webui/src/list/List.tsx
+++ b/webui/src/list/List.tsx
@@ -1,6 +1,7 @@
 import Table from '@material-ui/core/Table/Table';
 import TableBody from '@material-ui/core/TableBody/TableBody';
 import React from 'react';
+
 import BugRow from './BugRow';
 import { BugListFragment } from './ListQuery.generated';
 
diff --git a/webui/src/list/ListQuery.tsx b/webui/src/list/ListQuery.tsx
index a9bb15df..c91264e1 100644
--- a/webui/src/list/ListQuery.tsx
+++ b/webui/src/list/ListQuery.tsx
@@ -1,16 +1,17 @@
-import { fade, makeStyles, Theme } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
+import InputBase from '@material-ui/core/InputBase';
+import Paper from '@material-ui/core/Paper';
+import { fade, makeStyles, Theme } from '@material-ui/core/styles';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-import Paper from '@material-ui/core/Paper';
-import InputBase from '@material-ui/core/InputBase';
 import Skeleton from '@material-ui/lab/Skeleton';
+import { ApolloError } from 'apollo-boost';
 import React, { useState, useEffect, useRef } from 'react';
 import { useLocation, useHistory, Link } from 'react-router-dom';
-import { ApolloError } from 'apollo-boost';
-import List from './List';
+
 import FilterToolbar from './FilterToolbar';
+import List from './List';
 import { useListBugsQuery } from './ListQuery.generated';
 
 type StylesProps = { searching?: boolean };
diff --git a/webui/src/tag/ImageTag.tsx b/webui/src/tag/ImageTag.tsx
index 7c7d7e98..bdb36873 100644
--- a/webui/src/tag/ImageTag.tsx
+++ b/webui/src/tag/ImageTag.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
 const useStyles = makeStyles({
   tag: {
diff --git a/webui/src/tag/PreTag.tsx b/webui/src/tag/PreTag.tsx
index 01999277..d3b4c273 100644
--- a/webui/src/tag/PreTag.tsx
+++ b/webui/src/tag/PreTag.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
 const useStyles = makeStyles({
   tag: {