13 files changed, 136 insertions, 99 deletions
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.tsx
index 442cbbb4..e7c75a37 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.tsx
@@ -1,9 +1,10 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
 import Label from '../Label';
+import { LabelChangeFragment } from './LabelChangeFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -15,7 +16,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function LabelChange({ op }) {
+type Props = {
+  op: LabelChangeFragment;
+};
+
+function LabelChange({ op }: Props) {
   const { added, removed } = op;
   const classes = useStyles();
   return (
diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/bug/LabelChangeFragment.graphql
index 07b1d351..631de70c 100644
--- a/webui/src/bug/LabelChangeFragment.graphql
+++ b/webui/src/bug/LabelChangeFragment.graphql
@@ -1,15 +1,13 @@
 #import "../Author.graphql"
 #import "../Label.graphql"
 
-fragment LabelChange on TimelineItem {
-  ... on LabelChangeTimelineItem {
-    date
-    ...authored
-    added {
-      ...Label
-    }
-    removed {
-      ...Label
-    }
+fragment LabelChange on LabelChangeTimelineItem {
+  date
+  ...authored
+  added {
+    ...Label
+  }
+  removed {
+    ...Label
   }
 }
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.tsx
index 68d3cea0..33e0f1da 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.tsx
@@ -1,11 +1,13 @@
 import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/styles';
+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 { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   author: {
@@ -47,7 +49,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function Message({ op }) {
+type Props = {
+  op: AddCommentFragment | CreateFragment;
+};
+
+function Message({ op }: Props) {
   const classes = useStyles();
   return (
     <article className={classes.container}>
diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/bug/MessageCommentFragment.graphql
index 83cc9f61..38d626d0 100644
--- a/webui/src/bug/MessageCommentFragment.graphql
+++ b/webui/src/bug/MessageCommentFragment.graphql
@@ -1,10 +1,8 @@
 #import "../Author.graphql"
 
-fragment AddComment on TimelineItem {
-  ... on AddCommentTimelineItem {
-    createdAt
-    ...authored
-    edited
-    message
-  }
+fragment AddComment on AddCommentTimelineItem {
+  createdAt
+  ...authored
+  edited
+  message
 }
diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/bug/MessageCreateFragment.graphql
index e753444f..08477470 100644
--- a/webui/src/bug/MessageCreateFragment.graphql
+++ b/webui/src/bug/MessageCreateFragment.graphql
@@ -1,10 +1,8 @@
 #import "../Author.graphql"
 
-fragment Create on TimelineItem {
-  ... on CreateTimelineItem {
-    createdAt
-    ...authored
-    edited
-    message
-  }
+fragment Create on CreateTimelineItem {
+  createdAt
+  ...authored
+  edited
+  message
 }
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.tsx
index b6dd419d..6d51e342 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.tsx
@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
+import { SetStatusFragment } from './SetStatusFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -11,7 +12,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SetStatus({ op }) {
+type Props = {
+  op: SetStatusFragment;
+};
+
+function SetStatus({ op }: Props) {
   const classes = useStyles();
   return (
     <div className={classes.main}>
diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/bug/SetStatusFragment.graphql
index 56e22c2b..0fdea01b 100644
--- a/webui/src/bug/SetStatusFragment.graphql
+++ b/webui/src/bug/SetStatusFragment.graphql
@@ -1,9 +1,7 @@
 #import "../Author.graphql"
 
-fragment SetStatus on TimelineItem {
-  ... on SetStatusTimelineItem {
-    date
-    ...authored
-    status
-  }
+fragment SetStatus on SetStatusTimelineItem {
+  date
+  ...authored
+  status
 }
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.tsx
index 09343ad1..8a578aa1 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.tsx
@@ -1,8 +1,9 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
+import { SetTitleFragment } from './SetTitleFragment.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -14,7 +15,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SetTitle({ op }) {
+type Props = {
+  op: SetTitleFragment;
+};
+
+function SetTitle({ op }: Props) {
   const classes = useStyles();
   return (
     <div className={classes.main}>
diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/bug/SetTitleFragment.graphql
index a15c3eb3..432c4449 100644
--- a/webui/src/bug/SetTitleFragment.graphql
+++ b/webui/src/bug/SetTitleFragment.graphql
@@ -1,10 +1,8 @@
 #import "../Author.graphql"
 
-fragment SetTitle on TimelineItem {
-  ... on SetTitleTimelineItem {
-    date
-    ...authored
-    title
-    was
-  }
+fragment SetTitle on SetTitleTimelineItem {
+  date
+  ...authored
+  title
+  was
 }
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
deleted file mode 100644
index aeef7d2b..00000000
--- a/webui/src/bug/Timeline.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import LabelChange from './LabelChange';
-import Message from './Message';
-import SetStatus from './SetStatus';
-import SetTitle from './SetTitle';
-
-const useStyles = makeStyles(theme => ({
-  main: {
-    '& > *:not(:last-child)': {
-      marginBottom: theme.spacing(2),
-    },
-  },
-}));
-
-const componentMap = {
-  CreateTimelineItem: Message,
-  AddCommentTimelineItem: Message,
-  LabelChangeTimelineItem: LabelChange,
-  SetTitleTimelineItem: SetTitle,
-  SetStatusTimelineItem: SetStatus,
-};
-
-function Timeline({ ops }) {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.main}>
-      {ops.map((op, index) => {
-        const Component = componentMap[op.__typename];
-
-        if (!Component) {
-          console.warn('unsupported operation type ' + op.__typename);
-          return null;
-        }
-
-        return <Component key={index} op={op} />;
-      })}
-    </div>
-  );
-}
-
-export default Timeline;
diff --git a/webui/src/bug/Timeline.tsx b/webui/src/bug/Timeline.tsx
new file mode 100644
index 00000000..ba0f9fc7
--- /dev/null
+++ b/webui/src/bug/Timeline.tsx
@@ -0,0 +1,48 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+import LabelChange from './LabelChange';
+import Message from './Message';
+import SetStatus from './SetStatus';
+import SetTitle from './SetTitle';
+import { TimelineItemFragment } from './TimelineQuery.generated';
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    '& > *:not(:last-child)': {
+      marginBottom: theme.spacing(2),
+    },
+  },
+}));
+
+type Props = {
+  ops: Array<TimelineItemFragment>;
+};
+
+function Timeline({ ops }: Props) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.main}>
+      {ops.map((op, index) => {
+        switch (op.__typename) {
+          case 'CreateTimelineItem':
+            return <Message key={index} op={op} />;
+          case 'AddCommentTimelineItem':
+            return <Message key={index} op={op} />;
+          case 'LabelChangeTimelineItem':
+            return <LabelChange key={index} op={op} />;
+          case 'SetTitleTimelineItem':
+            return <SetTitle key={index} op={op} />;
+          case 'SetStatusTimelineItem':
+            return <SetStatus key={index} op={op} />;
+        }
+
+        console.warn('unsupported operation type ' + op.__typename);
+        return null;
+      })}
+    </div>
+  );
+}
+
+export default Timeline;
diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/bug/TimelineQuery.graphql
index 493f4416..6d78ab7f 100644
--- a/webui/src/bug/TimelineQuery.graphql
+++ b/webui/src/bug/TimelineQuery.graphql
@@ -9,11 +9,7 @@ query Timeline($id: String!, $first: Int = 10, $after: String) {
     bug(prefix: $id) {
       timeline(first: $first, after: $after) {
         nodes {
-          ...LabelChange
-          ...SetStatus
-          ...SetTitle
-          ...AddComment
-          ...Create
+          ...TimelineItem
         }
         pageInfo {
           hasNextPage
@@ -23,3 +19,21 @@ query Timeline($id: String!, $first: Int = 10, $after: String) {
     }
   }
 }
+
+fragment TimelineItem on TimelineItem {
+  ... on LabelChangeTimelineItem {
+    ...LabelChange
+  }
+  ... on SetStatusTimelineItem {
+    ...SetStatus
+  }
+  ... on SetTitleTimelineItem {
+    ...SetTitle
+  }
+  ... on AddCommentTimelineItem {
+    ...AddComment
+  }
+  ... on CreateTimelineItem {
+    ...Create
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.tsx
index 886edab2..9c4cf183 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.tsx
@@ -4,8 +4,12 @@ import React from 'react';
 import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 
-const TimelineQuery = ({ id }) => {
-  const { loading, error, data, fetchMore } = useTimelineQuery({
+type Props = {
+  id: string;
+};
+
+const TimelineQuery = ({ id }: Props) => {
+  const { loading, error, data } = useTimelineQuery({
     variables: {
       id,
       first: 100,
@@ -14,9 +18,13 @@ const TimelineQuery = ({ id }) => {
 
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
-  return (
-    <Timeline ops={data.repository.bug.timeline.nodes} fetchMore={fetchMore} />
-  );
+
+  const nodes = data?.repository?.bug?.timeline.nodes;
+  if (!nodes) {
+    return null;
+  }
+
+  return <Timeline ops={nodes} />;
 };
 
 export default TimelineQuery;