webui: move pages components

webui/.eslintrc.js

@@ -29,9 +29,13 @@ module.exports = {
             position: 'after',
           },
         ],
-        groups: [['builtin', 'external'], 'parent', ['sibling', 'index']],
+        pathGroupsExcludedImportTypes: ["builtin"],
+        groups: [['builtin', 'external'], ['internal', 'parent'], ['sibling', 'index']],
         'newlines-between': 'always',
       },
     ],
   },
+  settings: {
+    'import/internal-regex': '^src/',
+  },
 };

webui/src/App.tsx

@@ -1,68 +1,17 @@
-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 React from 'react';
 import { Route, Switch } from 'react-router';
-import { Link } from 'react-router-dom';
 
-import CurrentIdentity from './CurrentIdentity';
+import Layout from './layout';
-import BugQuery from './bug/BugQuery';
+import BugPage from './pages/bug';
-import ListQuery from './list/ListQuery';
+import ListPage from './pages/list';
-
-const theme = createMuiTheme({
-  palette: {
-    primary: {
-      main: '#263238',
-    },
-  },
-});
-
-const useStyles = makeStyles(theme => ({
-  offset: {
-    ...theme.mixins.toolbar,
-  },
-  filler: {
-    flexGrow: 1,
-  },
-  appTitle: {
-    ...theme.typography.h6,
-    color: 'white',
-    textDecoration: 'none',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  logo: {
-    height: '42px',
-    marginRight: theme.spacing(2),
-  },
-}));
 
 export default function App() {
-  const classes = useStyles();
-
   return (
-    <ThemeProvider theme={theme}>
+    <Layout>
-      <CssBaseline />
-      <AppBar position="fixed" color="primary">
-        <Toolbar>
-          <Link to="/" className={classes.appTitle}>
-            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
-            git-bug
-          </Link>
-          <div className={classes.filler}></div>
-          <CurrentIdentity />
-        </Toolbar>
-      </AppBar>
-      <div className={classes.offset} />
       <Switch>
-        <Route path="/" exact component={ListQuery} />
+        <Route path="/" exact component={ListPage} />
-        <Route path="/bug/:id" exact component={BugQuery} />
+        <Route path="/bug/:id" exact component={BugPage} />
       </Switch>
-    </ThemeProvider>
+    </Layout>
   );
 }

webui/src/__tests__/query.ts

@@ -1,4 +1,4 @@
-import { parse, stringify, quote } from '../list/Filter';
+import { parse, stringify, quote } from 'src/pages/list/Filter';
 
 it('parses a simple query', () => {
   expect(parse('foo:bar')).toEqual({

webui/src/apollo.ts

@@ -0,0 +1,18 @@
+import ApolloClient from 'apollo-boost';
+import {
+  IntrospectionFragmentMatcher,
+  InMemoryCache,
+} from 'apollo-cache-inmemory';
+
+import introspectionQueryResultData from './fragmentTypes';
+
+const client = new ApolloClient({
+  uri: '/graphql',
+  cache: new InMemoryCache({
+    fragmentMatcher: new IntrospectionFragmentMatcher({
+      introspectionQueryResultData,
+    }),
+  }),
+});
+
+export default client;

webui/src/components/Author.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
+
 import MAvatar from '@material-ui/core/Avatar';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import React from 'react';
 
 import { AuthoredFragment } from './fragments.generated';
 

webui/src/components/Content/ImageTag.tsx

@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
+import { makeStyles } from '@material-ui/styles';
+
 const useStyles = makeStyles({
   tag: {
     maxWidth: '100%',

webui/src/components/Content/PreTag.tsx

@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
+import { makeStyles } from '@material-ui/styles';
+
 const useStyles = makeStyles({
   tag: {
     maxWidth: '100%',

webui/src/components/Date.tsx

@@ -1,8 +1,9 @@
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import moment from 'moment';
 import React from 'react';
 import Moment from 'react-moment';
 
+import Tooltip from '@material-ui/core/Tooltip/Tooltip';
+
 const HOUR = 1000 * 3600;
 const DAY = 24 * HOUR;
 const WEEK = 7 * DAY;

webui/src/components/Label.tsx

@@ -1,13 +1,15 @@
+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 React from 'react';
+
+import { Color } from 'src/gqlTypes';
 
 import { LabelFragment } from './fragments.generated';
-import { Color } from '../gqlTypes';
 
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;

webui/src/index.tsx

@@ -1,36 +1,19 @@
-import { createMuiTheme } from '@material-ui/core/styles';
-import ThemeProvider from '@material-ui/styles/ThemeProvider';
-import ApolloClient from 'apollo-boost';
-import {
-  IntrospectionFragmentMatcher,
-  InMemoryCache,
-} from 'apollo-cache-inmemory';
 import React from 'react';
 import { ApolloProvider } from 'react-apollo';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 
+import ThemeProvider from '@material-ui/styles/ThemeProvider';
+
 import App from './App';
-import introspectionQueryResultData from './fragmentTypes';
+import apolloClient from './apollo';
-
+import theme from './theme';
-const theme = createMuiTheme();
-
-const client = new ApolloClient({
-  uri: '/graphql',
-  cache: new InMemoryCache({
-    fragmentMatcher: new IntrospectionFragmentMatcher({
-      introspectionQueryResultData,
-    }),
-  }),
-});
 
 ReactDOM.render(
-  <ApolloProvider client={client}>
+  <ApolloProvider client={apolloClient}>
     <BrowserRouter>
       <ThemeProvider theme={theme}>
-        <React.Suspense fallback={'Loading…'}>
         <App />
-        </React.Suspense>
       </ThemeProvider>
     </BrowserRouter>
   </ApolloProvider>,

webui/src/layout/CurrentIdentity.tsx

@@ -1,6 +1,7 @@
+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/layout/Header.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import { makeStyles } from '@material-ui/core/styles';
+
+import CurrentIdentity from './CurrentIdentity';
+
+const useStyles = makeStyles(theme => ({
+  offset: {
+    ...theme.mixins.toolbar,
+  },
+  filler: {
+    flexGrow: 1,
+  },
+  appTitle: {
+    ...theme.typography.h6,
+    color: 'white',
+    textDecoration: 'none',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  logo: {
+    height: '42px',
+    marginRight: theme.spacing(2),
+  },
+}));
+
+function Header() {
+  const classes = useStyles();
+
+  return (
+    <>
+      <AppBar position="fixed" color="primary">
+        <Toolbar>
+          <Link to="/" className={classes.appTitle}>
+            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
+            git-bug
+          </Link>
+          <div className={classes.filler}></div>
+          <CurrentIdentity />
+        </Toolbar>
+      </AppBar>
+      <div className={classes.offset} />
+    </>
+  );
+}
+
+export default Header;

webui/src/layout/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+import Header from './Header';
+
+type Props = { children: React.ReactNode };
+function Layout({ children }: Props) {
+  return (
+    <>
+      <CssBaseline />
+      <Header />
+      {children}
+    </>
+  );
+}
+
+export default Layout;

webui/src/pages/bug/Bug.tsx

@@ -1,10 +1,11 @@
-import Typography from '@material-ui/core/Typography/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
-import Author from '../components/Author';
+import Typography from '@material-ui/core/Typography/Typography';
-import Date from '../components/Date';
+import { makeStyles } from '@material-ui/core/styles';
-import Label from '../components/Label';
+
+import Author from 'src/components/Author';
+import Date from 'src/components/Date';
+import Label from 'src/components/Label';
 
 import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';

webui/src/pages/bug/BugQuery.tsx

@@ -1,7 +1,8 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
+import CircularProgress from '@material-ui/core/CircularProgress';
+
 import Bug from './Bug';
 import { useGetBugQuery } from './BugQuery.generated';
 

webui/src/pages/bug/CommentForm.tsx

@@ -1,12 +1,13 @@
+import React, { useState, useRef } from 'react';
+
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import TextField from '@material-ui/core/TextField';
 import { makeStyles, Theme } from '@material-ui/core/styles';
-import React, { useState, useRef } from 'react';
 
-import Content from '../components/Content';
+import Content from 'src/components/Content';
 
 import { useAddCommentMutation } from './CommentForm.generated';
 import { TimelineDocument } from './TimelineQuery.generated';

webui/src/pages/bug/LabelChange.tsx

@@ -1,9 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
-import Author from '../components/Author';
+import { makeStyles } from '@material-ui/core/styles';
-import Date from '../components/Date';
+
-import Label from '../components/Label';
+import Author from 'src/components/Author';
+import Date from 'src/components/Date';
+import Label from 'src/components/Label';
 
 import { LabelChangeFragment } from './LabelChangeFragment.generated';
 

webui/src/pages/bug/LabelChangeFragment.graphql

@@ -1,4 +1,4 @@
-#import "../components/fragments.graphql"
+#import "../../components/fragments.graphql"
 
 fragment LabelChange on LabelChangeTimelineItem {
   date

webui/src/pages/bug/Message.tsx

@@ -1,10 +1,11 @@
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
-import Author, { Avatar } from '../components/Author';
+import Paper from '@material-ui/core/Paper';
-import Date from '../components/Date';
+import { makeStyles } from '@material-ui/core/styles';
-import Content from '../components/Content';
+
+import Author, { Avatar } from 'src/components/Author';
+import Content from 'src/components/Content';
+import Date from 'src/components/Date';
 
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';

webui/src/pages/bug/MessageCommentFragment.graphql

@@ -1,4 +1,4 @@
-#import "../components/fragments.graphql"
+#import "../../components/fragments.graphql"
 
 fragment AddComment on AddCommentTimelineItem {
   createdAt

webui/src/pages/bug/MessageCreateFragment.graphql

@@ -1,4 +1,4 @@
-#import "../components/fragments.graphql"
+#import "../../components/fragments.graphql"
 
 fragment Create on CreateTimelineItem {
   createdAt

webui/src/pages/bug/SetStatus.tsx

@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
-import Author from '../components/Author';
+import { makeStyles } from '@material-ui/core/styles';
-import Date from '../components/Date';
+
+import Author from 'src/components/Author';
+import Date from 'src/components/Date';
 
 import { SetStatusFragment } from './SetStatusFragment.generated';
 

webui/src/pages/bug/SetStatusFragment.graphql

@@ -1,4 +1,4 @@
-#import "../components/fragments.graphql"
+#import "../../components/fragments.graphql"
 
 fragment SetStatus on SetStatusTimelineItem {
   date

webui/src/pages/bug/SetTitle.tsx

@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
-import Author from '../components/Author';
+import { makeStyles } from '@material-ui/core/styles';
-import Date from '../components/Date';
+
+import Author from 'src/components/Author';
+import Date from 'src/components/Date';
 
 import { SetTitleFragment } from './SetTitleFragment.generated';
 

webui/src/pages/bug/SetTitleFragment.graphql

@@ -1,4 +1,4 @@
-#import "../components/fragments.graphql"
+#import "../../components/fragments.graphql"
 
 fragment SetTitle on SetTitleTimelineItem {
   date

webui/src/pages/bug/Timeline.tsx

@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
+import { makeStyles } from '@material-ui/core/styles';
+
 import LabelChange from './LabelChange';
 import Message from './Message';
 import SetStatus from './SetStatus';

webui/src/pages/bug/TimelineQuery.tsx

@@ -1,6 +1,7 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
 import React from 'react';
 
+import CircularProgress from '@material-ui/core/CircularProgress';
+
 import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 

webui/src/pages/bug/index.tsx

@@ -0,0 +1 @@
+export { default } from './BugQuery';

webui/src/pages/list/BugRow.graphql

@@ -1,4 +1,4 @@
-#import "../components/fragments.graphql"
+#import "../../components/fragments.graphql"
 
 fragment BugRow on Bug {
   id

webui/src/pages/list/BugRow.tsx

@@ -1,15 +1,16 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
 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 { 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 '../components/Date';
+import Date from 'src/components/Date';
-import Label from '../components/Label';
+import Label from 'src/components/Label';
-import { Status } from '../gqlTypes';
+import { Status } from 'src/gqlTypes';
 
 import { BugRowFragment } from './BugRow.generated';
 

webui/src/pages/list/Filter.tsx

@@ -1,12 +1,13 @@
+import clsx from 'clsx';
+import { LocationDescriptor } from 'history';
+import React, { useState, useRef } from 'react';
+import { Link } from 'react-router-dom';
+
 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/pages/list/FilterToolbar.tsx

@@ -1,10 +1,11 @@
 import { pipe } from '@arrows/composition';
+import { LocationDescriptor } from 'history';
+import React from 'react';
+
 import Toolbar from '@material-ui/core/Toolbar';
 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,

webui/src/pages/list/List.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
+
 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/pages/list/ListQuery.tsx

@@ -1,3 +1,7 @@
+import { ApolloError } from 'apollo-boost';
+import React, { useState, useEffect, useRef } from 'react';
+import { useLocation, useHistory, Link } from 'react-router-dom';
+
 import IconButton from '@material-ui/core/IconButton';
 import InputBase from '@material-ui/core/InputBase';
 import Paper from '@material-ui/core/Paper';
@@ -6,9 +10,6 @@ import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 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 FilterToolbar from './FilterToolbar';
 import List from './List';

webui/src/pages/list/index.ts

@@ -0,0 +1 @@
+export { default } from './ListQuery';

webui/src/theme.ts

@@ -0,0 +1,11 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#263238',
+    },
+  },
+});
+
+export default theme;

webui/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -14,7 +18,13 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "typeRoots": ["node_modules/@types/", "types/"]
+    "typeRoots": [
+      "node_modules/@types/",
+      "types/"
+    ],
+    "baseUrl": "."
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ]
 }