webui: force import order

Quentin Gliech created 5 years ago

Change summary

webui/.eslintrc                  | 25 +++++++++++++++++++++++--
webui/codegen.yaml               |  2 +-
webui/package.json               |  2 +-
webui/src/App.tsx                |  4 ++--
webui/src/Author.tsx             |  2 +-
webui/src/Content.tsx            |  7 ++++---
webui/src/CurrentIdentity.tsx    |  2 +-
webui/src/Label.tsx              |  6 +++---
webui/src/bug/Bug.tsx            |  6 ++++--
webui/src/bug/BugQuery.tsx       |  2 +-
webui/src/bug/LabelChange.js     |  1 +
webui/src/bug/Message.js         |  5 +++--
webui/src/bug/SetStatus.js       |  1 +
webui/src/bug/SetTitle.js        |  1 +
webui/src/bug/Timeline.js        |  1 +
webui/src/bug/TimelineQuery.js   |  2 +-
webui/src/index.tsx              |  4 ++--
webui/src/list/BugRow.tsx        |  8 +++++---
webui/src/list/Filter.tsx        | 12 ++++++------
webui/src/list/FilterToolbar.tsx |  9 +++++----
webui/src/list/List.tsx          |  1 +
webui/src/list/ListQuery.tsx     | 13 +++++++------
webui/src/tag/ImageTag.tsx       |  2 +-
webui/src/tag/PreTag.tsx         |  2 +-
24 files changed, 77 insertions(+), 43 deletions(-)

Detailed changes

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"
+      }
+    ]
+  }
 }

webui/codegen.yaml

@@ -26,4 +26,4 @@ generates:
 
 hooks:
   afterOneFileWrite:
-  - prettier --write
+  - eslint --fix

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": [

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

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';

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';
 

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';
 

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;

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

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;

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';

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

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';
 

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';
 

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';

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

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

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

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> };
 

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,

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';
 

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 };

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

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