Highlight draft PRs (#235)

Fixes #218

src/components/PullRequestItem.tsx

@@ -102,7 +102,7 @@ export const PullRequestItem = observer((props: PullRequestItemProps) => {
             </SmallButton>
           )}
         </Title>
-        <PullRequestStatus status={props.pullRequest.status} />
+        <PullRequestStatus pullRequest={props.pullRequest} />
         <Repo>
           {props.pullRequest.repoOwner}/{props.pullRequest.repoName} (#
           {props.pullRequest.pullRequestNumber})

src/components/PullRequestStatus.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { Badge } from "react-bootstrap";
+import { EnrichedPullRequest } from "../filtering/enriched-pull-request";
 import { PullRequestStatus as Status } from "../filtering/status";
 
 const StatusBox = styled.div`
@@ -26,21 +27,42 @@ const NEW_COMMIT = (
   </Badge>
 );
 
-export const PullRequestStatus = observer((props: { status: Status }) => {
-  switch (props.status) {
+const DRAFT = (
+  <Badge pill variant="dark">
+    Draft
+  </Badge>
+);
+
+export const PullRequestStatus = observer(
+  ({ pullRequest }: { pullRequest: EnrichedPullRequest }) => {
+    const status = renderStatus(pullRequest.status);
+    const draft = pullRequest.draft && DRAFT;
+    if (status || draft) {
+      return (
+        <StatusBox>
+          {draft} {status}
+        </StatusBox>
+      );
+    }
+    return <></>;
+  }
+);
+
+function renderStatus(status: Status) {
+  switch (status) {
     case Status.INCOMING_NEW_REVIEW_REQUESTED:
-      return <StatusBox>{UNREVIEWED}</StatusBox>;
+      return UNREVIEWED;
     case Status.INCOMING_REVIEWED_NEW_COMMENT_BY_AUTHOR:
-      return <StatusBox>{AUTHOR_REPLIED}</StatusBox>;
+      return AUTHOR_REPLIED;
     case Status.INCOMING_REVIEWED_NEW_COMMIT:
-      return <StatusBox>{NEW_COMMIT}</StatusBox>;
+      return NEW_COMMIT;
     case Status.INCOMING_REVIEWED_NEW_COMMIT_AND_NEW_COMMENT_BY_AUTHOR:
       return (
-        <StatusBox>
+        <>
           {AUTHOR_REPLIED} {NEW_COMMIT}
-        </StatusBox>
+        </>
       );
     default:
-      return <></>;
+      return null;
   }
-});
+}

src/github-api/api.ts

@@ -69,6 +69,7 @@ export interface PullsSearchResponseItem {
   updated_at: string;
   title: string;
   number: number;
+  draft: boolean;
   user: {
     login: string;
     avatar_url: string;

src/github-api/implementation.ts

@@ -3,7 +3,12 @@ import { GitHubApi } from "./api";
 
 export function buildGitHubApi(token: string): GitHubApi {
   const octokit = new Octokit({
-    auth: `token ${token}`
+    auth: `token ${token}`,
+    headers: {
+      // https://developer.github.com/v3/pulls/#list-pull-requests
+      // Enable Draft Pull Request API.
+      Accept: "application/vnd.github.shadow-cat-preview+json"
+    }
   });
   return {
     async loadAuthenticatedUser() {

src/loading/internal/pull-requests.spec.ts

@@ -32,6 +32,7 @@ describe("refreshOpenPullRequests", () => {
             repository_url: "https://github.com/zenclabs/prmonitor",
             number: 1,
             title: "authored",
+            draft: false,
             user: {
               login: "author",
               avatar_url: "http://avatar"
@@ -48,6 +49,7 @@ describe("refreshOpenPullRequests", () => {
             repository_url: "https://github.com/zenclabs/prmonitor",
             number: 2,
             title: "commented",
+            draft: false,
             user: {
               login: "someone",
               avatar_url: "http://avatar"
@@ -64,6 +66,7 @@ describe("refreshOpenPullRequests", () => {
             repository_url: "https://github.com/zenclabs/prmonitor",
             number: 3,
             title: "review-requested",
+            draft: false,
             user: {
               login: "someone",
               avatar_url: "http://avatar"

src/loading/internal/pull-requests.ts

@@ -102,6 +102,7 @@ function pullRequestFromResponse(
       avatarUrl: response.user.avatar_url
     },
     title: response.title,
+    draft: response.draft,
     reviewRequested,
     reviews,
     comments,

src/storage/loaded-state.ts

@@ -48,6 +48,7 @@ export interface PullRequest {
     avatarUrl: string;
   };
   title: string;
+  draft?: boolean;
   /**
    * Whether a review is requested from the current user.
    */