5 files changed, 67 insertions, 25 deletions
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
index 3847c755..34fc3ad4 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.js
@@ -1,9 +1,9 @@
 import { withStyles } from '@material-ui/core/styles'
-import Tooltip from '@material-ui/core/Tooltip/Tooltip'
 import Typography from '@material-ui/core/Typography/Typography'
 import gql from 'graphql-tag'
-import * as moment from 'moment'
 import React from 'react'
+import Author from '../Author'
+import Date from '../Date'
 import TimelineQuery from './TimelineQuery'
 
 const styles = theme => ({
@@ -21,7 +21,8 @@ const styles = theme => ({
     marginLeft: 15,
   },
   container: {
-    display: 'flex'
+    display: 'flex',
+    marginBottom: 30
   },
   timeline: {
     width: '70%',
@@ -47,11 +48,9 @@ const Bug = ({bug, classes}) => (
       <span className={classes.id}>{bug.humanId}</span>
 
       <Typography color={'textSecondary'}>
-        <Tooltip title={bug.author.email}><span>{bug.author.name}</span></Tooltip>
+        <Author author={bug.author}/>
         <span> opened this bug </span>
-        <Tooltip title={moment(bug.createdAt).format('MMMM D, YYYY, h:mm a')}>
-          <span> {moment(bug.createdAt).fromNow()} </span>
-        </Tooltip>
+        <Date date={bug.createdAt} />
       </Typography>
     </div>
 
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
new file mode 100644
index 00000000..f954372a
--- /dev/null
+++ b/webui/src/bug/LabelChange.js
@@ -0,0 +1,44 @@
+import { withStyles } from '@material-ui/core/styles'
+import gql from 'graphql-tag'
+import React from 'react'
+import Author from '../Author'
+import Date from '../Date'
+import Label from '../Label'
+
+const styles = theme => ({
+  main: {
+    ...theme.typography.body2
+  },
+})
+
+const LabelChange = ({op, classes}) => {
+  const {added, removed} = op
+  return (
+    <div className={classes.main}>
+      <Author author={op.author} bold />
+      { added.length > 0 && <span> added the </span>}
+      { added.map((label, index) => <Label key={index} label={label} />)}
+      { (added.length > 0 && removed.length > 0) && <span> and</span>}
+      { removed.length > 0 && <span> removed the </span>}
+      { removed.map((label, index) => <Label key={index} label={label} />)}
+      <span> label{ (added.length + removed.length > 1) && 's'} </span>
+      <Date date={op.date} />
+    </div>
+  )
+}
+
+LabelChange.fragment = gql`
+  fragment LabelChange on Operation {
+    ... on LabelChangeOperation {
+      date
+      author {
+        name
+        email
+      }
+      added
+      removed
+    }
+  }
+`
+
+export default withStyles(styles)(LabelChange)
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 04c7dfab..612a9563 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,9 +1,9 @@
 import { withStyles } from '@material-ui/core/styles'
-import Tooltip from '@material-ui/core/Tooltip/Tooltip'
 import Typography from '@material-ui/core/Typography'
 import gql from 'graphql-tag'
-import * as moment from 'moment'
 import React from 'react'
+import Author from '../Author'
+import Date from '../Date'
 
 const styles = theme => ({
   header: {
@@ -14,10 +14,6 @@ const styles = theme => ({
     borderTopLeftRadius: 3,
     borderTopRightRadius: 3,
   },
-  author: {
-    ...theme.typography.body2,
-    fontWeight: 'bold'
-  },
   message: {
     borderLeft: '1px solid #d1d5da',
     borderRight: '1px solid #d1d5da',
@@ -25,23 +21,20 @@ const styles = theme => ({
     borderBottomLeftRadius: 3,
     borderBottomRightRadius: 3,
     backgroundColor: '#fff',
-    minHeight: 50
+    minHeight: 50,
+    padding: 5,
   }
 })
 
-const Message = ({message, classes}) => (
+const Message = ({op, classes}) => (
   <div>
     <div className={classes.header}>
-      <Tooltip title={message.author.email}>
-        <span className={classes.author}>{message.author.name}</span>
-      </Tooltip>
+      <Author className={classes.author} author={op.author} bold />
       <span> commented </span>
-      <Tooltip title={moment(message.date).format('MMMM D, YYYY, h:mm a')}>
-        <span> {moment(message.date).fromNow()} </span>
-      </Tooltip>
+      <Date date={op.date} />
     </div>
     <div className={classes.message}>
-      <Typography>{message.message}</Typography>
+      <Typography>{op.message}</Typography>
     </div>
   </div>
 )
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index 0c4100ec..72c07121 100644
--- a/webui/src/bug/Timeline.js
+++ b/webui/src/bug/Timeline.js
@@ -1,5 +1,6 @@
 import { withStyles } from '@material-ui/core/styles'
 import React from 'react'
+import LabelChange from './LabelChange'
 import Message from './Message'
 
 const styles = theme => ({
@@ -26,9 +27,11 @@ class Timeline extends React.Component {
         { ops.map((op, index) => {
           switch (op.__typename) {
             case 'CreateOperation':
-              return <Message key={index} message={op}/>
+              return <Message key={index} op={op}/>
             case 'AddCommentOperation':
-              return <Message key={index} message={op}/>
+              return <Message key={index} op={op}/>
+            case 'LabelChangeOperation':
+              return <LabelChange key={index} op={op}/>
 
             default:
               console.log('unsupported operation type ' + op.__typename)
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index e773aac0..ad4d00b0 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -2,6 +2,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import gql from 'graphql-tag'
 import React from 'react'
 import { Query } from 'react-apollo'
+import LabelChange from './LabelChange'
 import Timeline from './Timeline'
 import Message from './Message'
 
@@ -13,6 +14,7 @@ const QUERY = gql`
           nodes {
             ...Create
             ...Comment
+            ...LabelChange
           }
           pageInfo {
             hasNextPage
@@ -24,10 +26,11 @@ const QUERY = gql`
   }
   ${Message.createFragment}
   ${Message.commentFragment}
+  ${LabelChange.fragment}
 `
 
 const TimelineQuery = ({id}) => (
-  <Query query={QUERY} variables={{id}}>
+  <Query query={QUERY} variables={{id, first: 100}}>
     {({loading, error, data, fetchMore}) => {
       if (loading) return <CircularProgress/>
       if (error) return <p>Error: {error}</p>