From a2721971ba82a6ba0e735bd06cf555a4c1bca84e Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Mon, 3 Feb 2020 23:08:26 +0100
Subject: webui: generate TS types for graphql queries

---
 webui/src/bug/Bug.graphql      |  14 ++++++
 webui/src/bug/Bug.js           | 104 -----------------------------------------
 webui/src/bug/Bug.tsx          |  92 ++++++++++++++++++++++++++++++++++++
 webui/src/bug/BugQuery.graphql |   9 ++++
 webui/src/bug/BugQuery.js      |  30 ------------
 webui/src/bug/BugQuery.tsx     |  20 ++++++++
 6 files changed, 135 insertions(+), 134 deletions(-)
 create mode 100644 webui/src/bug/Bug.graphql
 delete mode 100644 webui/src/bug/Bug.js
 create mode 100644 webui/src/bug/Bug.tsx
 create mode 100644 webui/src/bug/BugQuery.graphql
 delete mode 100644 webui/src/bug/BugQuery.js
 create mode 100644 webui/src/bug/BugQuery.tsx

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/Bug.graphql b/webui/src/bug/Bug.graphql
new file mode 100644
index 00000000..112024aa
--- /dev/null
+++ b/webui/src/bug/Bug.graphql
@@ -0,0 +1,14 @@
+#import "../Label.graphql"
+#import "../Author.graphql"
+
+fragment Bug on Bug {
+  id
+  humanId
+  status
+  title
+  labels {
+    ...Label
+  }
+  createdAt
+  ...authored
+}
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
deleted file mode 100644
index 5a159f0f..00000000
--- a/webui/src/bug/Bug.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import Typography from '@material-ui/core/Typography/Typography';
-import gql from 'graphql-tag';
-import React from 'react';
-import Author from '../Author';
-import Date from '../Date';
-import TimelineQuery from './TimelineQuery';
-import Label from '../Label';
-
-const useStyles = makeStyles(theme => ({
-  main: {
-    maxWidth: 800,
-    margin: 'auto',
-    marginTop: theme.spacing(4),
-  },
-  header: {
-    marginLeft: theme.spacing(1) + 40,
-  },
-  title: {
-    ...theme.typography.h5,
-  },
-  id: {
-    ...theme.typography.subtitle1,
-    marginLeft: theme.spacing(1),
-  },
-  container: {
-    display: 'flex',
-    marginBottom: theme.spacing(1),
-  },
-  timeline: {
-    flex: 1,
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    minWidth: 0,
-  },
-  sidebar: {
-    marginTop: theme.spacing(2),
-    flex: '0 0 200px',
-  },
-  labelList: {
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-  },
-  label: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-    '& > *': {
-      display: 'block',
-    },
-  },
-}));
-
-function Bug({ bug }) {
-  const classes = useStyles();
-  return (
-    <main className={classes.main}>
-      <div className={classes.header}>
-        <span className={classes.title}>{bug.title}</span>
-        <span className={classes.id}>{bug.humanId}</span>
-
-        <Typography color={'textSecondary'}>
-          <Author author={bug.author} />
-          {' opened this bug '}
-          <Date date={bug.createdAt} />
-        </Typography>
-      </div>
-
-      <div className={classes.container}>
-        <div className={classes.timeline}>
-          <TimelineQuery id={bug.id} />
-        </div>
-        <div className={classes.sidebar}>
-          <Typography variant={'subtitle1'}>Labels</Typography>
-          <ul className={classes.labelList}>
-            {bug.labels.map(l => (
-              <li className={classes.label} key={l.name}>
-                <Label label={l} key={l.name} />
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </main>
-  );
-}
-
-Bug.fragment = gql`
-  fragment Bug on Bug {
-    id
-    humanId
-    status
-    title
-    labels {
-      ...Label
-    }
-    createdAt
-    ...authored
-  }
-  ${Label.fragment}
-  ${Author.fragment}
-`;
-
-export default Bug;
diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx
new file mode 100644
index 00000000..75b6ffff
--- /dev/null
+++ b/webui/src/bug/Bug.tsx
@@ -0,0 +1,92 @@
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography/Typography';
+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';
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    maxWidth: 800,
+    margin: 'auto',
+    marginTop: theme.spacing(4),
+  },
+  header: {
+    marginLeft: theme.spacing(1) + 40,
+  },
+  title: {
+    ...theme.typography.h5,
+  },
+  id: {
+    ...theme.typography.subtitle1,
+    marginLeft: theme.spacing(1),
+  },
+  container: {
+    display: 'flex',
+    marginBottom: theme.spacing(1),
+  },
+  timeline: {
+    flex: 1,
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    minWidth: 0,
+  },
+  sidebar: {
+    marginTop: theme.spacing(2),
+    flex: '0 0 200px',
+  },
+  labelList: {
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+  },
+  label: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    '& > *': {
+      display: 'block',
+    },
+  },
+}));
+
+type Props = {
+  bug: BugFragment
+};
+
+function Bug({ bug }: Props) {
+  const classes = useStyles();
+  return (
+    <main className={classes.main}>
+      <div className={classes.header}>
+        <span className={classes.title}>{bug.title}</span>
+        <span className={classes.id}>{bug.humanId}</span>
+
+        <Typography color={'textSecondary'}>
+          <Author author={bug.author} />
+          {' opened this bug '}
+          <Date date={bug.createdAt} />
+        </Typography>
+      </div>
+
+      <div className={classes.container}>
+        <div className={classes.timeline}>
+          <TimelineQuery id={bug.id} />
+        </div>
+        <div className={classes.sidebar}>
+          <Typography variant={'subtitle1'}>Labels</Typography>
+          <ul className={classes.labelList}>
+            {bug.labels.map(l => (
+              <li className={classes.label} key={l.name}>
+                <Label label={l} key={l.name} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default Bug;
diff --git a/webui/src/bug/BugQuery.graphql b/webui/src/bug/BugQuery.graphql
new file mode 100644
index 00000000..caa247ed
--- /dev/null
+++ b/webui/src/bug/BugQuery.graphql
@@ -0,0 +1,9 @@
+#import "./Bug.graphql"
+
+query GetBug($id: String!) {
+  defaultRepository {
+    bug(prefix: $id) {
+      ...Bug
+    }
+  }
+}
diff --git a/webui/src/bug/BugQuery.js b/webui/src/bug/BugQuery.js
deleted file mode 100644
index dbf24c31..00000000
--- a/webui/src/bug/BugQuery.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import gql from 'graphql-tag';
-import React from 'react';
-import { Query } from 'react-apollo';
-
-import Bug from './Bug';
-
-const QUERY = gql`
-  query GetBug($id: String!) {
-    defaultRepository {
-      bug(prefix: $id) {
-        ...Bug
-      }
-    }
-  }
-
-  ${Bug.fragment}
-`;
-
-const BugQuery = ({ match }) => (
-  <Query query={QUERY} variables={{ id: match.params.id }}>
-    {({ loading, error, data }) => {
-      if (loading) return <CircularProgress />;
-      if (error) return <p>Error: {error}</p>;
-      return <Bug bug={data.defaultRepository.bug} />;
-    }}
-  </Query>
-);
-
-export default BugQuery;
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
new file mode 100644
index 00000000..6bf525e6
--- /dev/null
+++ b/webui/src/bug/BugQuery.tsx
@@ -0,0 +1,20 @@
+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';
+
+type Props = RouteComponentProps<{
+  id: string
+}>;
+
+const BugQuery: React.FC<Props> = ({ match }: Props) => {
+  const { loading, error, data } = useGetBugQuery({ variables: { id: match.params.id } });
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+  if (!data?.defaultRepository?.bug) return <p>404.</p>;
+  return <Bug bug={data.defaultRepository.bug} />;
+};
+
+export default BugQuery;
-- 
cgit 


From 9c570cac725fe7048ddd1d181b33b8fa1808e401 Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Mon, 3 Feb 2020 23:35:48 +0100
Subject: webui: convert bug view to TypeScript

---
 webui/src/bug/LabelChange.js                 | 19 ---------
 webui/src/bug/LabelChangeFragment.graphql    | 15 +++++++
 webui/src/bug/Message.js                     | 27 ------------
 webui/src/bug/MessageCommentFragment.graphql | 10 +++++
 webui/src/bug/MessageCreateFragment.graphql  | 10 +++++
 webui/src/bug/SetStatus.js                   | 13 ------
 webui/src/bug/SetStatusFragment.graphql      |  9 ++++
 webui/src/bug/SetTitle.js                    | 14 ------
 webui/src/bug/SetTitleFragment.graphql       | 10 +++++
 webui/src/bug/TimelineQuery.graphql          | 25 +++++++++++
 webui/src/bug/TimelineQuery.js               | 64 ++++++++--------------------
 11 files changed, 97 insertions(+), 119 deletions(-)
 create mode 100644 webui/src/bug/LabelChangeFragment.graphql
 create mode 100644 webui/src/bug/MessageCommentFragment.graphql
 create mode 100644 webui/src/bug/MessageCreateFragment.graphql
 create mode 100644 webui/src/bug/SetStatusFragment.graphql
 create mode 100644 webui/src/bug/SetTitleFragment.graphql
 create mode 100644 webui/src/bug/TimelineQuery.graphql

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index 4773e7eb..df8ab0a5 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -40,22 +39,4 @@ function LabelChange({ op }) {
   );
 }
 
-LabelChange.fragment = gql`
-  fragment LabelChange on TimelineItem {
-    ... on LabelChangeTimelineItem {
-      date
-      ...authored
-      added {
-        ...Label
-      }
-      removed {
-        ...Label
-      }
-    }
-  }
-
-  ${Label.fragment}
-  ${Author.fragment}
-`;
-
 export default LabelChange;
diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/bug/LabelChangeFragment.graphql
new file mode 100644
index 00000000..07b1d351
--- /dev/null
+++ b/webui/src/bug/LabelChangeFragment.graphql
@@ -0,0 +1,15 @@
+#import "../Author.graphql"
+#import "../Label.graphql"
+
+fragment LabelChange on TimelineItem {
+  ... on LabelChangeTimelineItem {
+    date
+    ...authored
+    added {
+      ...Label
+    }
+    removed {
+      ...Label
+    }
+  }
+}
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 06c12815..4c22745f 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/styles';
 import Paper from '@material-ui/core/Paper';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import { Avatar } from '../Author';
@@ -69,30 +68,4 @@ function Message({ op }) {
   );
 }
 
-Message.createFragment = gql`
-  fragment Create on TimelineItem {
-    ... on CreateTimelineItem {
-      createdAt
-      ...authored
-      edited
-      message
-    }
-  }
-
-  ${Author.fragment}
-`;
-
-Message.commentFragment = gql`
-  fragment AddComment on TimelineItem {
-    ... on AddCommentTimelineItem {
-      createdAt
-      ...authored
-      edited
-      message
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default Message;
diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/bug/MessageCommentFragment.graphql
new file mode 100644
index 00000000..83cc9f61
--- /dev/null
+++ b/webui/src/bug/MessageCommentFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment AddComment on TimelineItem {
+  ... on AddCommentTimelineItem {
+    createdAt
+    ...authored
+    edited
+    message
+  }
+}
diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/bug/MessageCreateFragment.graphql
new file mode 100644
index 00000000..e753444f
--- /dev/null
+++ b/webui/src/bug/MessageCreateFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment Create on TimelineItem {
+  ... on CreateTimelineItem {
+    createdAt
+    ...authored
+    edited
+    message
+  }
+}
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index 070bbb8f..eb7f5bfe 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -22,16 +21,4 @@ function SetStatus({ op }) {
   );
 }
 
-SetStatus.fragment = gql`
-  fragment SetStatus on TimelineItem {
-    ... on SetStatusTimelineItem {
-      date
-      ...authored
-      status
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default SetStatus;
diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/bug/SetStatusFragment.graphql
new file mode 100644
index 00000000..56e22c2b
--- /dev/null
+++ b/webui/src/bug/SetStatusFragment.graphql
@@ -0,0 +1,9 @@
+#import "../Author.graphql"
+
+fragment SetStatus on TimelineItem {
+  ... on SetStatusTimelineItem {
+    date
+    ...authored
+    status
+  }
+}
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index e4c30a8d..b20ed9ca 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -28,17 +27,4 @@ function SetTitle({ op }) {
   );
 }
 
-SetTitle.fragment = gql`
-  fragment SetTitle on TimelineItem {
-    ... on SetTitleTimelineItem {
-      date
-      ...authored
-      title
-      was
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default SetTitle;
diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/bug/SetTitleFragment.graphql
new file mode 100644
index 00000000..a15c3eb3
--- /dev/null
+++ b/webui/src/bug/SetTitleFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment SetTitle on TimelineItem {
+  ... on SetTitleTimelineItem {
+    date
+    ...authored
+    title
+    was
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/bug/TimelineQuery.graphql
new file mode 100644
index 00000000..7a8bc736
--- /dev/null
+++ b/webui/src/bug/TimelineQuery.graphql
@@ -0,0 +1,25 @@
+#import "./MessageCreateFragment.graphql"
+#import "./MessageCommentFragment.graphql"
+#import "./LabelChangeFragment.graphql"
+#import "./SetTitleFragment.graphql"
+#import "./SetStatusFragment.graphql"
+
+query Timeline($id: String!, $first: Int = 10, $after: String) {
+  defaultRepository {
+    bug(prefix: $id) {
+      timeline(first: $first, after: $after) {
+        nodes {
+          ...LabelChange
+          ...SetStatus
+          ...SetTitle
+          ...AddComment
+          ...Create
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index ebb20f9d..0c9305b1 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -1,53 +1,25 @@
 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 SetStatus from './SetStatus';
-import SetTitle from './SetTitle';
 import Timeline from './Timeline';
-import Message from './Message';
 
-const QUERY = gql`
-  query($id: String!, $first: Int = 10, $after: String) {
-    defaultRepository {
-      bug(prefix: $id) {
-        timeline(first: $first, after: $after) {
-          nodes {
-            ...LabelChange
-            ...SetStatus
-            ...SetTitle
-            ...AddComment
-            ...Create
-          }
-          pageInfo {
-            hasNextPage
-            endCursor
-          }
-        }
-      }
-    }
-  }
-  ${Message.createFragment}
-  ${Message.commentFragment}
-  ${LabelChange.fragment}
-  ${SetTitle.fragment}
-  ${SetStatus.fragment}
-`;
+import { useTimelineQuery } from './TimelineQuery.generated';
 
-const TimelineQuery = ({ id }) => (
-  <Query query={QUERY} variables={{ id, first: 100 }}>
-    {({ loading, error, data, fetchMore }) => {
-      if (loading) return <CircularProgress />;
-      if (error) return <p>Error: {error}</p>;
-      return (
-        <Timeline
-          ops={data.defaultRepository.bug.timeline.nodes}
-          fetchMore={fetchMore}
-        />
-      );
-    }}
-  </Query>
-);
+const TimelineQuery = ({ id }) => {
+  const { loading, error, data, fetchMore } = useTimelineQuery({
+    variables: {
+      id,
+      first: 100,
+    },
+  });
+
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+  return (
+    <Timeline
+      ops={data.defaultRepository.bug.timeline.nodes}
+      fetchMore={fetchMore}
+    />
+  );
+};
 
 export default TimelineQuery;
-- 
cgit 


From 6a502c145bd8f2e2e1a9c0b103c11f0433c60737 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Tue, 4 Feb 2020 20:57:43 +0100
Subject: webui: convert bug list to typescript

---
 webui/src/bug/Bug.tsx      | 2 +-
 webui/src/bug/BugQuery.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx
index 75b6ffff..3685b506 100644
--- a/webui/src/bug/Bug.tsx
+++ b/webui/src/bug/Bug.tsx
@@ -52,7 +52,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 type Props = {
-  bug: BugFragment
+  bug: BugFragment;
 };
 
 function Bug({ bug }: Props) {
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
index 6bf525e6..b436db5a 100644
--- a/webui/src/bug/BugQuery.tsx
+++ b/webui/src/bug/BugQuery.tsx
@@ -6,11 +6,13 @@ import { useGetBugQuery } from './BugQuery.generated';
 import Bug from './Bug';
 
 type Props = RouteComponentProps<{
-  id: string
+  id: string;
 }>;
 
 const BugQuery: React.FC<Props> = ({ match }: Props) => {
-  const { loading, error, data } = useGetBugQuery({ variables: { id: match.params.id } });
+  const { loading, error, data } = useGetBugQuery({
+    variables: { id: match.params.id },
+  });
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
   if (!data?.defaultRepository?.bug) return <p>404.</p>;
-- 
cgit 


From 9ddcb4b09215f942cb7889f9756d426ad3c90253 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Tue, 11 Feb 2020 20:54:01 +0100
Subject: webui: force import order

---
 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 +-
 8 files changed, 13 insertions(+), 6 deletions(-)

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx
index 3685b506..f4029a5f 100644
--- a/webui/src/bug/Bug.tsx
+++ b/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: {
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
index b436db5a..ea7bb7da 100644
--- a/webui/src/bug/BugQuery.tsx
+++ b/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;
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index df8ab0a5..442cbbb4 100644
--- a/webui/src/bug/LabelChange.js
+++ b/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';
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 4c22745f..68d3cea0 100644
--- a/webui/src/bug/Message.js
+++ b/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: {
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index eb7f5bfe..b6dd419d 100644
--- a/webui/src/bug/SetStatus.js
+++ b/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';
 
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index b20ed9ca..09343ad1 100644
--- a/webui/src/bug/SetTitle.js
+++ b/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';
 
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index 7d1946f2..aeef7d2b 100644
--- a/webui/src/bug/Timeline.js
+++ b/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';
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index 0c9305b1..11f3d08c 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/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 }) => {
-- 
cgit 


From 465f7ca73d7093eeeecb6553c804d8cfb06e6652 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Tue, 11 Feb 2020 21:49:19 +0100
Subject: webui: stop using defaultRepository

---
 webui/src/bug/BugQuery.graphql      | 2 +-
 webui/src/bug/BugQuery.tsx          | 4 ++--
 webui/src/bug/TimelineQuery.graphql | 2 +-
 webui/src/bug/TimelineQuery.js      | 5 +----
 4 files changed, 5 insertions(+), 8 deletions(-)

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/BugQuery.graphql b/webui/src/bug/BugQuery.graphql
index caa247ed..cdc4723f 100644
--- a/webui/src/bug/BugQuery.graphql
+++ b/webui/src/bug/BugQuery.graphql
@@ -1,7 +1,7 @@
 #import "./Bug.graphql"
 
 query GetBug($id: String!) {
-  defaultRepository {
+  repository {
     bug(prefix: $id) {
       ...Bug
     }
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
index ea7bb7da..2ecf718c 100644
--- a/webui/src/bug/BugQuery.tsx
+++ b/webui/src/bug/BugQuery.tsx
@@ -15,8 +15,8 @@ const BugQuery: React.FC<Props> = ({ match }: Props) => {
   });
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
-  if (!data?.defaultRepository?.bug) return <p>404.</p>;
-  return <Bug bug={data.defaultRepository.bug} />;
+  if (!data?.repository?.bug) return <p>404.</p>;
+  return <Bug bug={data.repository.bug} />;
 };
 
 export default BugQuery;
diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/bug/TimelineQuery.graphql
index 7a8bc736..493f4416 100644
--- a/webui/src/bug/TimelineQuery.graphql
+++ b/webui/src/bug/TimelineQuery.graphql
@@ -5,7 +5,7 @@
 #import "./SetStatusFragment.graphql"
 
 query Timeline($id: String!, $first: Int = 10, $after: String) {
-  defaultRepository {
+  repository {
     bug(prefix: $id) {
       timeline(first: $first, after: $after) {
         nodes {
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index 11f3d08c..886edab2 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -15,10 +15,7 @@ const TimelineQuery = ({ id }) => {
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
   return (
-    <Timeline
-      ops={data.defaultRepository.bug.timeline.nodes}
-      fetchMore={fetchMore}
-    />
+    <Timeline ops={data.repository.bug.timeline.nodes} fetchMore={fetchMore} />
   );
 };
 
-- 
cgit 


From d0a6da286a28e79ae3bb75af41219c4cc4df20b0 Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Wed, 12 Feb 2020 23:09:45 +0100
Subject: webui: finish TypeScript conversion

---
 webui/src/bug/LabelChange.js                 | 43 ---------------
 webui/src/bug/LabelChange.tsx                | 48 +++++++++++++++++
 webui/src/bug/LabelChangeFragment.graphql    | 18 +++----
 webui/src/bug/Message.js                     | 72 -------------------------
 webui/src/bug/Message.tsx                    | 78 ++++++++++++++++++++++++++++
 webui/src/bug/MessageCommentFragment.graphql | 12 ++---
 webui/src/bug/MessageCreateFragment.graphql  | 12 ++---
 webui/src/bug/SetStatus.js                   | 25 ---------
 webui/src/bug/SetStatus.tsx                  | 30 +++++++++++
 webui/src/bug/SetStatusFragment.graphql      | 10 ++--
 webui/src/bug/SetTitle.js                    | 31 -----------
 webui/src/bug/SetTitle.tsx                   | 36 +++++++++++++
 webui/src/bug/SetTitleFragment.graphql       | 12 ++---
 webui/src/bug/Timeline.js                    | 44 ----------------
 webui/src/bug/Timeline.tsx                   | 48 +++++++++++++++++
 webui/src/bug/TimelineQuery.graphql          | 24 +++++++--
 webui/src/bug/TimelineQuery.js               | 22 --------
 webui/src/bug/TimelineQuery.tsx              | 30 +++++++++++
 18 files changed, 316 insertions(+), 279 deletions(-)
 delete mode 100644 webui/src/bug/LabelChange.js
 create mode 100644 webui/src/bug/LabelChange.tsx
 delete mode 100644 webui/src/bug/Message.js
 create mode 100644 webui/src/bug/Message.tsx
 delete mode 100644 webui/src/bug/SetStatus.js
 create mode 100644 webui/src/bug/SetStatus.tsx
 delete mode 100644 webui/src/bug/SetTitle.js
 create mode 100644 webui/src/bug/SetTitle.tsx
 delete mode 100644 webui/src/bug/Timeline.js
 create mode 100644 webui/src/bug/Timeline.tsx
 delete mode 100644 webui/src/bug/TimelineQuery.js
 create mode 100644 webui/src/bug/TimelineQuery.tsx

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
deleted file mode 100644
index 442cbbb4..00000000
--- a/webui/src/bug/LabelChange.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import Author from '../Author';
-import Date from '../Date';
-import Label from '../Label';
-
-const useStyles = makeStyles(theme => ({
-  main: {
-    ...theme.typography.body1,
-    marginLeft: theme.spacing(1) + 40,
-  },
-  author: {
-    fontWeight: 'bold',
-  },
-}));
-
-function LabelChange({ op }) {
-  const { added, removed } = op;
-  const classes = useStyles();
-  return (
-    <div className={classes.main}>
-      <Author author={op.author} className={classes.author} />
-      {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>
-  );
-}
-
-export default LabelChange;
diff --git a/webui/src/bug/LabelChange.tsx b/webui/src/bug/LabelChange.tsx
new file mode 100644
index 00000000..e7c75a37
--- /dev/null
+++ b/webui/src/bug/LabelChange.tsx
@@ -0,0 +1,48 @@
+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: {
+    ...theme.typography.body1,
+    marginLeft: theme.spacing(1) + 40,
+  },
+  author: {
+    fontWeight: 'bold',
+  },
+}));
+
+type Props = {
+  op: LabelChangeFragment;
+};
+
+function LabelChange({ op }: Props) {
+  const { added, removed } = op;
+  const classes = useStyles();
+  return (
+    <div className={classes.main}>
+      <Author author={op.author} className={classes.author} />
+      {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>
+  );
+}
+
+export default LabelChange;
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.js
deleted file mode 100644
index 68d3cea0..00000000
--- a/webui/src/bug/Message.js
+++ /dev/null
@@ -1,72 +0,0 @@
-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 Content from '../Content';
-import Date from '../Date';
-
-const useStyles = makeStyles(theme => ({
-  author: {
-    fontWeight: 'bold',
-  },
-  container: {
-    display: 'flex',
-  },
-  avatar: {
-    marginTop: 2,
-  },
-  bubble: {
-    flex: 1,
-    marginLeft: theme.spacing(1),
-    minWidth: 0,
-  },
-  header: {
-    ...theme.typography.body1,
-    color: '#444',
-    padding: '0.5rem 1rem',
-    borderBottom: '1px solid #ddd',
-    display: 'flex',
-  },
-  title: {
-    flex: 1,
-  },
-  tag: {
-    ...theme.typography.button,
-    color: '#888',
-    border: '#ddd solid 1px',
-    padding: '0 0.5rem',
-    fontSize: '0.75rem',
-    borderRadius: 2,
-    marginLeft: '0.5rem',
-  },
-  body: {
-    ...theme.typography.body2,
-    padding: '0 1rem',
-  },
-}));
-
-function Message({ op }) {
-  const classes = useStyles();
-  return (
-    <article className={classes.container}>
-      <Avatar author={op.author} className={classes.avatar} />
-      <Paper elevation={1} className={classes.bubble}>
-        <header className={classes.header}>
-          <div className={classes.title}>
-            <Author className={classes.author} author={op.author} />
-            <span> commented </span>
-            <Date date={op.createdAt} />
-          </div>
-          {op.edited && <div className={classes.tag}>Edited</div>}
-        </header>
-        <section className={classes.body}>
-          <Content markdown={op.message} />
-        </section>
-      </Paper>
-    </article>
-  );
-}
-
-export default Message;
diff --git a/webui/src/bug/Message.tsx b/webui/src/bug/Message.tsx
new file mode 100644
index 00000000..33e0f1da
--- /dev/null
+++ b/webui/src/bug/Message.tsx
@@ -0,0 +1,78 @@
+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 { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
+
+const useStyles = makeStyles(theme => ({
+  author: {
+    fontWeight: 'bold',
+  },
+  container: {
+    display: 'flex',
+  },
+  avatar: {
+    marginTop: 2,
+  },
+  bubble: {
+    flex: 1,
+    marginLeft: theme.spacing(1),
+    minWidth: 0,
+  },
+  header: {
+    ...theme.typography.body1,
+    color: '#444',
+    padding: '0.5rem 1rem',
+    borderBottom: '1px solid #ddd',
+    display: 'flex',
+  },
+  title: {
+    flex: 1,
+  },
+  tag: {
+    ...theme.typography.button,
+    color: '#888',
+    border: '#ddd solid 1px',
+    padding: '0 0.5rem',
+    fontSize: '0.75rem',
+    borderRadius: 2,
+    marginLeft: '0.5rem',
+  },
+  body: {
+    ...theme.typography.body2,
+    padding: '0 1rem',
+  },
+}));
+
+type Props = {
+  op: AddCommentFragment | CreateFragment;
+};
+
+function Message({ op }: Props) {
+  const classes = useStyles();
+  return (
+    <article className={classes.container}>
+      <Avatar author={op.author} className={classes.avatar} />
+      <Paper elevation={1} className={classes.bubble}>
+        <header className={classes.header}>
+          <div className={classes.title}>
+            <Author className={classes.author} author={op.author} />
+            <span> commented </span>
+            <Date date={op.createdAt} />
+          </div>
+          {op.edited && <div className={classes.tag}>Edited</div>}
+        </header>
+        <section className={classes.body}>
+          <Content markdown={op.message} />
+        </section>
+      </Paper>
+    </article>
+  );
+}
+
+export default Message;
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.js
deleted file mode 100644
index b6dd419d..00000000
--- a/webui/src/bug/SetStatus.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import Author from '../Author';
-import Date from '../Date';
-
-const useStyles = makeStyles(theme => ({
-  main: {
-    ...theme.typography.body1,
-    marginLeft: theme.spacing(1) + 40,
-  },
-}));
-
-function SetStatus({ op }) {
-  const classes = useStyles();
-  return (
-    <div className={classes.main}>
-      <Author author={op.author} bold />
-      <span> {op.status.toLowerCase()} this</span>
-      <Date date={op.date} />
-    </div>
-  );
-}
-
-export default SetStatus;
diff --git a/webui/src/bug/SetStatus.tsx b/webui/src/bug/SetStatus.tsx
new file mode 100644
index 00000000..6d51e342
--- /dev/null
+++ b/webui/src/bug/SetStatus.tsx
@@ -0,0 +1,30 @@
+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: {
+    ...theme.typography.body1,
+    marginLeft: theme.spacing(1) + 40,
+  },
+}));
+
+type Props = {
+  op: SetStatusFragment;
+};
+
+function SetStatus({ op }: Props) {
+  const classes = useStyles();
+  return (
+    <div className={classes.main}>
+      <Author author={op.author} bold />
+      <span> {op.status.toLowerCase()} this</span>
+      <Date date={op.date} />
+    </div>
+  );
+}
+
+export default SetStatus;
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.js
deleted file mode 100644
index 09343ad1..00000000
--- a/webui/src/bug/SetTitle.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { makeStyles } from '@material-ui/styles';
-import React from 'react';
-
-import Author from '../Author';
-import Date from '../Date';
-
-const useStyles = makeStyles(theme => ({
-  main: {
-    ...theme.typography.body1,
-    marginLeft: theme.spacing(1) + 40,
-  },
-  bold: {
-    fontWeight: 'bold',
-  },
-}));
-
-function SetTitle({ op }) {
-  const classes = useStyles();
-  return (
-    <div className={classes.main}>
-      <Author author={op.author} className={classes.bold} />
-      <span> changed the title from </span>
-      <span className={classes.bold}>{op.was}</span>
-      <span> to </span>
-      <span className={classes.bold}>{op.title}</span>
-      <Date date={op.date} />
-    </div>
-  );
-}
-
-export default SetTitle;
diff --git a/webui/src/bug/SetTitle.tsx b/webui/src/bug/SetTitle.tsx
new file mode 100644
index 00000000..8a578aa1
--- /dev/null
+++ b/webui/src/bug/SetTitle.tsx
@@ -0,0 +1,36 @@
+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: {
+    ...theme.typography.body1,
+    marginLeft: theme.spacing(1) + 40,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+}));
+
+type Props = {
+  op: SetTitleFragment;
+};
+
+function SetTitle({ op }: Props) {
+  const classes = useStyles();
+  return (
+    <div className={classes.main}>
+      <Author author={op.author} className={classes.bold} />
+      <span> changed the title from </span>
+      <span className={classes.bold}>{op.was}</span>
+      <span> to </span>
+      <span className={classes.bold}>{op.title}</span>
+      <Date date={op.date} />
+    </div>
+  );
+}
+
+export default SetTitle;
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.js
deleted file mode 100644
index 886edab2..00000000
--- a/webui/src/bug/TimelineQuery.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import React from 'react';
-
-import Timeline from './Timeline';
-import { useTimelineQuery } from './TimelineQuery.generated';
-
-const TimelineQuery = ({ id }) => {
-  const { loading, error, data, fetchMore } = useTimelineQuery({
-    variables: {
-      id,
-      first: 100,
-    },
-  });
-
-  if (loading) return <CircularProgress />;
-  if (error) return <p>Error: {error}</p>;
-  return (
-    <Timeline ops={data.repository.bug.timeline.nodes} fetchMore={fetchMore} />
-  );
-};
-
-export default TimelineQuery;
diff --git a/webui/src/bug/TimelineQuery.tsx b/webui/src/bug/TimelineQuery.tsx
new file mode 100644
index 00000000..9c4cf183
--- /dev/null
+++ b/webui/src/bug/TimelineQuery.tsx
@@ -0,0 +1,30 @@
+import CircularProgress from '@material-ui/core/CircularProgress';
+import React from 'react';
+
+import Timeline from './Timeline';
+import { useTimelineQuery } from './TimelineQuery.generated';
+
+type Props = {
+  id: string;
+};
+
+const TimelineQuery = ({ id }: Props) => {
+  const { loading, error, data } = useTimelineQuery({
+    variables: {
+      id,
+      first: 100,
+    },
+  });
+
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+
+  const nodes = data?.repository?.bug?.timeline.nodes;
+  if (!nodes) {
+    return null;
+  }
+
+  return <Timeline ops={nodes} />;
+};
+
+export default TimelineQuery;
-- 
cgit 


From c48a4dc79464d8b5f1d0912bc2a14c02d9509cee Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Wed, 12 Feb 2020 23:17:41 +0100
Subject: webui: run linter

---
 webui/src/bug/LabelChange.tsx | 1 +
 webui/src/bug/Message.tsx     | 1 +
 webui/src/bug/SetStatus.tsx   | 1 +
 webui/src/bug/SetTitle.tsx    | 1 +
 4 files changed, 4 insertions(+)

(limited to 'webui/src/bug')

diff --git a/webui/src/bug/LabelChange.tsx b/webui/src/bug/LabelChange.tsx
index e7c75a37..572579bd 100644
--- a/webui/src/bug/LabelChange.tsx
+++ b/webui/src/bug/LabelChange.tsx
@@ -4,6 +4,7 @@ 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 => ({
diff --git a/webui/src/bug/Message.tsx b/webui/src/bug/Message.tsx
index 33e0f1da..c8d0710d 100644
--- a/webui/src/bug/Message.tsx
+++ b/webui/src/bug/Message.tsx
@@ -6,6 +6,7 @@ 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';
 
diff --git a/webui/src/bug/SetStatus.tsx b/webui/src/bug/SetStatus.tsx
index 6d51e342..3e1a7989 100644
--- a/webui/src/bug/SetStatus.tsx
+++ b/webui/src/bug/SetStatus.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
+
 import { SetStatusFragment } from './SetStatusFragment.generated';
 
 const useStyles = makeStyles(theme => ({
diff --git a/webui/src/bug/SetTitle.tsx b/webui/src/bug/SetTitle.tsx
index 8a578aa1..0b088e0b 100644
--- a/webui/src/bug/SetTitle.tsx
+++ b/webui/src/bug/SetTitle.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import Author from '../Author';
 import Date from '../Date';
+
 import { SetTitleFragment } from './SetTitleFragment.generated';
 
 const useStyles = makeStyles(theme => ({
-- 
cgit