Show a summary of changes (added/deleted/changed) in notifications (#781

)
fwouts · Jun 3, 2021 · 689be9d · 689be9d
1 parent 2333829
commit 689be9d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 6 deletions.
diff --git a/src/components/PullRequestItem.tsx b/src/components/PullRequestItem.tsx
@@ -39,15 +39,34 @@ const Title = styled.div`
   padding: 8px;
 `;
 
-const Repo = styled.div`
+const ContextSummary = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 0.9em;
-  color: #555;
   padding: 8px;
 `;
 
+const ChangeSummary = styled.span`
+  margin-left: 8px;
+`;
+
+const LinesAdded = styled.span`
+  color: #22863a;
+`;
+
+const LinesDeleted = styled.span`
+  color: #cb2431;
+`;
+
+const ChangedFiles = styled.span`
+  color: #555;
+`;
+
+const Repo = styled.span`
+  color: #555;
+`;
+
 const AuthorWidth = "80px";
 const AuthorAvatarSize = "40px";
 
@@ -186,10 +205,31 @@ export const PullRequestItem = observer((props: PullRequestItemProps) => {
           )}
         </Title>
         <PullRequestStatus pullRequest={props.pullRequest} />
-        <Repo>
-          {props.pullRequest.repoOwner}/{props.pullRequest.repoName} (#
-          {props.pullRequest.pullRequestNumber})
-        </Repo>
+        <ContextSummary>
+          <Repo>
+            {props.pullRequest.repoOwner}/{props.pullRequest.repoName} (#
+            {props.pullRequest.pullRequestNumber})
+          </Repo>
+          {props.pullRequest.changeSummary &&
+            (() => {
+              const adds = props.pullRequest.changeSummary.additions;
+              const dels = props.pullRequest.changeSummary.deletions;
+              const files = props.pullRequest.changeSummary.changedFiles;
+              return (
+                <ChangeSummary
+                  title={`${adds} line${
+                    adds == 1 ? "" : "s"
+                  } added, ${dels} line${
+                    dels == 1 ? "" : "s"
+                  } removed, ${files} file${files == 1 ? "" : "s"} changed`}
+                >
+                  <LinesAdded>+{adds}</LinesAdded>
+                  <LinesDeleted>-{dels}</LinesDeleted>
+                  <ChangedFiles>@{files}</ChangedFiles>
+                </ChangeSummary>
+              );
+            })()}
+        </ContextSummary>
       </Info>
       <AuthorBox title={props.pullRequest.author.login}>
         {props.pullRequest.author && (

diff --git a/src/loading/internal/pull-requests.ts b/src/loading/internal/pull-requests.ts
@@ -112,6 +112,11 @@ function pullRequestFromResponse(
       login: response.user.login,
       avatarUrl: response.user.avatar_url,
     },
+    changeSummary: {
+      changedFiles: details.changed_files,
+      additions: details.additions,
+      deletions: details.deletions,
+    },
     title: response.title,
     draft: response.draft,
     mergeable: details.mergeable,

diff --git a/src/storage/loaded-state.ts b/src/storage/loaded-state.ts
@@ -55,6 +55,11 @@ export interface PullRequest {
     login: string;
     avatarUrl: string;
   };
+  changeSummary: {
+    changedFiles: number;
+    additions: number;
+    deletions: number;
+  };
   title: string;
   draft?: boolean;
   mergeable?: boolean;

diff --git a/src/testing/fake-pr.ts b/src/testing/fake-pr.ts
@@ -96,6 +96,11 @@ class FakePullRequestBuilder {
         login: this._author,
         avatarUrl: "",
       },
+      changeSummary: {
+        changedFiles: 5,
+        additions: 100,
+        deletions: 50,
+      },
       title: "PR",
       repoOwner: this._ref.repo.owner,
       repoName: this._ref.repo.name,