Render resolved conversations as collapsed on description page (#2471)

src/common/comment.ts

@@ -37,4 +37,5 @@ export interface IComment {
 	inReplyToId?: number;
 	graphNodeId: string;
 	reactions?: Reaction[];
+	isResolved?: boolean;
 }

src/github/graphql.ts

@@ -194,9 +194,10 @@ export interface PullRequestState {
 export interface PullRequestCommentsResponse {
 	repository: {
 		pullRequest: {
-			reviews: {
+			reviewThreads: {
 				nodes: [
 					{
+						isResolved: boolean;
 						comments: {
 							nodes: ReviewComment[];
 						}

src/github/pullRequestModel.ts

@@ -282,7 +282,7 @@ export class PullRequestModel extends IssueModel implements IPullRequestModel {
 
 		return {
 			deletedReviewId: databaseId,
-			deletedReviewComments: comments.nodes.map(parseGraphQLComment)
+			deletedReviewComments: comments.nodes.map(comment => parseGraphQLComment(comment, false))
 		};
 	}
 
@@ -312,7 +312,7 @@ export class PullRequestModel extends IssueModel implements IPullRequestModel {
 		this.hasPendingReview = true;
 		await this.updateDraftModeContext();
 
-		return parseGraphQLComment(data.addPullRequestReview.pullRequestReview.comments.nodes[0]);
+		return parseGraphQLComment(data.addPullRequestReview.pullRequestReview.comments.nodes[0], false);
 	}
 
 	/**
@@ -395,7 +395,7 @@ export class PullRequestModel extends IssueModel implements IPullRequestModel {
 		});
 
 		const { comment } = data!.addPullRequestReviewComment;
-		return parseGraphQLComment(comment);
+		return parseGraphQLComment(comment, false);
 	}
 
 	/**
@@ -445,7 +445,7 @@ export class PullRequestModel extends IssueModel implements IPullRequestModel {
 			}
 		});
 
-		return parseGraphQLComment(data!.updatePullRequestReviewComment.pullRequestReviewComment);
+		return parseGraphQLComment(data!.updatePullRequestReviewComment.pullRequestReviewComment, !!comment.isResolved);
 	}
 
 	/**
@@ -524,8 +524,8 @@ export class PullRequestModel extends IssueModel implements IPullRequestModel {
 				}
 			});
 
-			const comments = data.repository.pullRequest.reviews.nodes
-				.map((node: any) => node.comments.nodes.map((comment: any) => parseGraphQLComment(comment), remote))
+			const comments = data.repository.pullRequest.reviewThreads.nodes
+				.map((node: any) => node.comments.nodes.map((comment: any) => parseGraphQLComment(comment, node.isResolved), remote))
 				.reduce((prev: any, curr: any) => prev.concat(curr), [])
 				.sort((a: IComment, b: IComment) => { return a.createdAt > b.createdAt ? 1 : -1; });
 

src/github/queries.gql

@@ -216,8 +216,9 @@ query GetPendingReviewId($pullRequestId: ID!, $author: String!) {
 query PullRequestComments($owner:String!, $name:String!, $number:Int!, $first:Int=100) {
 	repository(owner:$owner, name:$name) {
 		pullRequest(number:$number) {
-			reviews(first:$first) {
+			reviewThreads(first:$first) {
 				nodes {
+					isResolved
 					comments(first:100) {
 						nodes { ...ReviewComment }
 					}

src/github/utils.ts

@@ -255,7 +255,7 @@ export function convertGraphQLEventType(text: string) {
 	}
 }
 
-export function parseGraphQLComment(comment: GraphQL.ReviewComment): IComment {
+export function parseGraphQLComment(comment: GraphQL.ReviewComment, isResolved: boolean): IComment {
 	const c: IComment = {
 		id: comment.databaseId,
 		url: comment.url,
@@ -276,7 +276,8 @@ export function parseGraphQLComment(comment: GraphQL.ReviewComment): IComment {
 		graphNodeId: comment.id,
 		isDraft: comment.state === 'PENDING',
 		inReplyToId: comment.replyTo && comment.replyTo.databaseId,
-		reactions: parseGraphQLReaction(comment.reactionGroups)
+		reactions: parseGraphQLReaction(comment.reactionGroups),
+		isResolved
 	};
 
 	const diffHunks = parseCommentDiffHunk(c);
@@ -491,7 +492,7 @@ export function loginComparator(a: IAccount, b: IAccount) {
 export function parseGraphQLReviewEvent(review: GraphQL.SubmittedReview, githubRepository: GitHubRepository): Common.ReviewEvent {
 	return {
 		event: Common.EventType.Reviewed,
-		comments: review.comments.nodes.map(parseGraphQLComment).filter(c => !c.inReplyToId),
+		comments: review.comments.nodes.map(comment => parseGraphQLComment(comment, false)).filter(c => !c.inReplyToId),
 		submittedAt: review.submittedAt,
 		body: review.body,
 		bodyHTML: review.bodyHTML,

webviews/components/diff.tsx

@@ -4,22 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as React from 'react';
-import { useContext } from 'react';
 
-import { IComment } from '../../src/common/comment';
 import { DiffHunk, DiffLine, DiffChangeType } from '../../src/common/diffHunk';
-import PullRequestContext from '../common/context';
 
-function Diff({ comment, hunks, path, outdated=false }: { comment: IComment, hunks: DiffHunk[], outdated: boolean, path: string }) {
-	const { openDiff } = useContext(PullRequestContext);
+function Diff({ hunks }: { hunks: DiffHunk[] }) {
 	return <div className='diff'>
-		<div className='diffHeader'>
-			{
-				outdated
-					? <span><span>{path}</span><span className='outdatedLabel'>Outdated</span></span>
-					: <a className='diffPath' onClick={() => openDiff(comment)}>{path}</a>
-			}
-		</div>
 		{hunks.map(hunk => <Hunk hunk={hunk} />)}
 	</div>;
 }

webviews/components/timeline.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as React from 'react';
-import { useContext, useRef } from 'react';
+import { useContext, useRef, useState } from 'react';
 
 import { IComment } from '../../src/common/comment';
 import { TimelineEvent, isReviewEvent, isCommitEvent, isCommentEvent, isMergedEvent, isAssignEvent, ReviewEvent, CommitEvent, CommentEvent, MergedEvent, AssignEvent, isHeadDeleteEvent, HeadRefDeleteEvent } from '../../src/common/timelineEvent';
@@ -113,15 +113,9 @@ const ReviewEventView = (event: ReviewEvent) => {
 			<div className='comment-body review-comment-body'>{
 				Object.entries(comments)
 					.map(
-						([key, thread]) =>
-							<div className='diff-container'>
-								<Diff key={key}
-									comment={thread[0]}
-									hunks={thread[0].diffHunks}
-									outdated={thread[0].position === null}
-									path={thread[0].path} />
-								{thread.map(c => <CommentView {...c} pullRequestReviewId={event.id} />)}
-							</div>
+						([key, thread]) => {
+							return <CommentThread key={key} thread={thread} eventId={event.id} />;
+						}
 					)
 			}</div>
 			{
@@ -133,6 +127,35 @@ const ReviewEventView = (event: ReviewEvent) => {
 	</div>;
 };
 
+function CommentThread({ key, thread, eventId }: { key: string, thread: IComment[], eventId: number }) {
+	const comment = thread[0];
+	const [revealed, setRevealed] = useState(!comment.isResolved);
+	const { openDiff } = useContext(PullRequestContext);
+	return <div key={key} className='diff-container'>
+		<div className='resolved-container'>
+			<div>
+				{
+					comment.position === null
+						? <span><span>{comment.path}</span><span className='outdatedLabel'>Outdated</span></span>
+						: <a className='diffPath' onClick={() => openDiff(comment)}>{comment.path}</a>
+				}
+			</div>
+			{comment.isResolved
+				? <button className='secondary' onClick={() => setRevealed(!revealed)}>{revealed ? 'Hide resolved' : 'Show resolved'}</button>
+				: null
+			}
+		</div>
+		{
+			revealed
+				? <div>
+					<Diff hunks={comment.diffHunks} />
+					{thread.map(c => <CommentView {...c} pullRequestReviewId={eventId} />)}
+				</div>
+				: null
+		}
+	</div>;
+}
+
 function AddReviewSummaryComment() {
 	const { requestChanges, approve, submit } = useContext(PullRequestContext);
 	const comment = useRef<HTMLTextAreaElement>();

webviews/editorWebview/index.css

@@ -253,7 +253,7 @@ body .merged .merged-message > a {
 }
 
 body .comment-container .review-comment-container .pending-label,
-body .diff .diffHeader .outdatedLabel {
+body .resolved-container .outdatedLabel {
 		border: 1px solid;
 		border-radius: 2px 2px 2px 2px;
 		padding: 0.1rem 0.3rem;
@@ -785,13 +785,16 @@ code {
 	height: 18px;
 }
 
-.diff .diffHeader {
+.resolved-container {
 	padding: 6px 12px;
-	line-height: 1.5;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 	background: var(--vscode-editorGroupHeader-tabsBackground);
+	line-height: 1.5;
 }
 
-.diff .diffHeader .diffPath:hover {
+.resolved-container .diffPath:hover {
 	text-decoration: underline;
 	color: var(--vscode-textLink-activeForeground);
 	cursor: pointer;
@@ -861,7 +864,7 @@ code {
 	background: none;
 }
 
-.vscode-high-contrast .diff .diffHeader {
+.vscode-high-contrast .resolved-container {
 	background: none;
 }