webui: start reorganizing the component structure

webui/package.json

@@ -49,7 +49,8 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "generate": "graphql-codegen",
-    "lint": "eslint src --ext .ts --ext .tsx --ext .js --ext .jsx --ext .graphql"
+    "lint": "eslint src --ext .ts --ext .tsx --ext .js --ext .jsx --ext .graphql",
+    "clean": "rimraf src/**.generated.* src/schema.json src/gqlTypes.* src/fragmentTypes.*"
   },
   "proxy": "http://localhost:3001",
   "browserslist": [

webui/src/Label.graphql

@@ -1,8 +0,0 @@
-fragment Label on Label {
-  name
-  color {
-    R
-    G
-    B
-  }
-}

webui/src/bug/Bug.graphql

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

webui/src/bug/Bug.tsx

@@ -2,9 +2,9 @@ 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 Label from '../Label';
+import Author from '../components/Author';
+import Date from '../components/Date';
+import Label from '../components/Label';
 
 import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';

webui/src/bug/CommentForm.tsx

@@ -6,7 +6,7 @@ import TextField from '@material-ui/core/TextField';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import React, { useState, useRef } from 'react';
 
-import Content from '../Content';
+import Content from '../components/Content';
 
 import { useAddCommentMutation } from './CommentForm.generated';
 import { TimelineDocument } from './TimelineQuery.generated';

webui/src/bug/LabelChange.tsx

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

webui/src/bug/LabelChangeFragment.graphql

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

webui/src/bug/Message.tsx

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

webui/src/bug/MessageCommentFragment.graphql

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

webui/src/bug/MessageCreateFragment.graphql

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

webui/src/bug/SetStatus.tsx

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

webui/src/bug/SetStatusFragment.graphql

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

webui/src/bug/SetTitle.tsx

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

webui/src/bug/SetTitleFragment.graphql

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

webui/src/components/Author.tsx

@@ -2,7 +2,7 @@ import MAvatar from '@material-ui/core/Avatar';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import React from 'react';
 
-import { AuthoredFragment } from './Author.generated';
+import { AuthoredFragment } from './fragments.generated';
 
 type Props = AuthoredFragment & {
   className?: string;

webui/src/components/Content/index.tsx

@@ -4,8 +4,8 @@ import parse from 'remark-parse';
 import remark2react from 'remark-react';
 import unified from 'unified';
 
-import ImageTag from './tag/ImageTag';
-import PreTag from './tag/PreTag';
+import ImageTag from './ImageTag';
+import PreTag from './PreTag';
 
 type Props = { markdown: string };
 const Content: React.FC<Props> = ({ markdown }: Props) => {

webui/src/components/Label.tsx

@@ -6,8 +6,8 @@ import {
 } from '@material-ui/core/styles/colorManipulator';
 import React from 'react';
 
-import { LabelFragment } from './Label.generated';
-import { Color } from './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/components/fragments.graphql

@@ -1,3 +1,14 @@
+# Label.tsx
+fragment Label on Label {
+  name
+  color {
+    R
+    G
+    B
+  }
+}
+
+# Author.tsx
 fragment authored on Authored {
   author {
     name

webui/src/list/BugRow.graphql

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

webui/src/list/BugRow.tsx

@@ -7,8 +7,8 @@ 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 Date from '../components/Date';
+import Label from '../components/Label';
 import { Status } from '../gqlTypes';
 
 import { BugRowFragment } from './BugRow.generated';