Add comment reactors to comment reaction (microsoft#5567)

package.json

@@ -14,6 +14,7 @@
 		"tokenInformation",
 		"contribShareMenu",
 		"fileComments",
+		"commentReactor",
 		"contribCommentPeekContext",
 		"contribCommentThreadAdditionalMenu",
 		"codiconDecoration",

src/@types/vscode.proposed.commentReactor.d.ts

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+declare module 'vscode' {
+	export interface CommentReaction {
+		readonly reactors?: readonly string[];
+	}
+}

src/common/comment.ts

@@ -23,6 +23,7 @@ export interface Reaction {
 	count: number;
 	icon?: vscode.Uri;
 	viewerHasReacted: boolean;
+	reactors: readonly string[];
 }
 
 export enum SubjectType {

src/github/graphql.ts

@@ -70,7 +70,10 @@ export interface IssueComment extends AbbreviatedIssueComment {
 export interface ReactionGroup {
 	content: string;
 	viewerHasReacted: boolean;
-	users: {
+	reactors: {
+		nodes: {
+			login: string;
+		}[]
 		totalCount: number;
 	};
 }

src/github/queriesShared.gql

@@ -147,7 +147,12 @@ fragment Reactable on Reactable {
 	reactionGroups {
 		content
 		viewerHasReacted
-		users {
+		reactors(first: 10) {
+			nodes {
+				... on User {
+					login
+				}
+			}
 			totalCount
 		}
 	}
@@ -399,13 +404,7 @@ fragment ReviewComment on PullRequestReviewComment {
 	originalCommit {
 		oid
 	}
-	reactionGroups {
-		content
-		viewerHasReacted
-		users {
-			totalCount
-		}
-	}
+	...Reactable
 	viewerCanUpdate
 	viewerCanDelete
 }

src/github/utils.ts

@@ -217,6 +217,7 @@ export function updateCommentReactions(comment: vscode.Comment, reactions: React
 				authorHasReacted: matchedReaction.viewerHasReacted,
 				count: matchedReaction.count,
 				iconPath: reaction.icon || '',
+				reactors: matchedReaction.reactors
 			};
 		} else {
 			newReaction = { label: reaction.label, authorHasReacted: false, count: 0, iconPath: reaction.icon || '' };
@@ -511,13 +512,14 @@ export function parseGraphQLReaction(reactionGroups: GraphQL.ReactionGroup[]): R
 	}, {} as { [key: string]: { title: string; label: string; icon?: vscode.Uri } });
 
 	const reactions = reactionGroups
-		.filter(group => group.users.totalCount > 0)
+		.filter(group => group.reactors.totalCount > 0)
 		.map(group => {
 			const reaction: Reaction = {
 				label: reactionContentEmojiMapping[group.content].label,
-				count: group.users.totalCount,
+				count: group.reactors.totalCount,
 				icon: reactionContentEmojiMapping[group.content].icon,
 				viewerHasReacted: group.viewerHasReacted,
+				reactors: group.reactors.nodes.map(node => node.login)
 			};
 
 			return reaction;