check if users can operate on reactions

src/vs/editor/common/modes.ts

@@ -1235,6 +1235,7 @@ export interface NewCommentAction {
 export interface CommentReaction {
 	readonly label?: string;
 	readonly hasReacted?: boolean;
+	readonly canEdit?: boolean;
 }
 
 /**

src/vs/workbench/api/node/extHostComments.ts

@@ -258,6 +258,9 @@ function convertToComment(provider: vscode.DocumentCommentProvider | vscode.Work
 	const canEdit = !!(provider as vscode.DocumentCommentProvider).editComment && vscodeComment.canEdit;
 	const canDelete = !!(provider as vscode.DocumentCommentProvider).deleteComment && vscodeComment.canDelete;
 	const iconPath = vscodeComment.userIconPath ? vscodeComment.userIconPath.toString() : vscodeComment.gravatar;
+	const providerCanDeleteReaction = !!(provider as vscode.DocumentCommentProvider).deleteReaction;
+	const providerCanAddReaction = !!(provider as vscode.DocumentCommentProvider).addReaction;
+
 	return {
 		commentId: vscodeComment.commentId,
 		body: extHostTypeConverter.MarkdownString.from(vscodeComment.body),
@@ -267,6 +270,12 @@ function convertToComment(provider: vscode.DocumentCommentProvider | vscode.Work
 		canDelete: canDelete,
 		command: vscodeComment.command ? commandsConverter.toInternal(vscodeComment.command) : null,
 		isDraft: vscodeComment.isDraft,
-		commentReactions: vscodeComment.commentReactions
+		commentReactions: vscodeComment.commentReactions.map(reaction => {
+			return {
+				label: reaction.label,
+				hasReacted: reaction.hasReacted,
+				canEdit: (reaction.hasReacted && providerCanDeleteReaction) || (!reaction.hasReacted && providerCanAddReaction)
+			};
+		})
 	};
 }

src/vs/workbench/contrib/comments/electron-browser/commentNode.ts

@@ -180,7 +180,7 @@ export class CommentNode extends Disposable {
 		this._toDispose.push(this._reactionsActionBar);
 
 		let reactionActions = this.comment.commentReactions!.map(reaction => {
-			return new Action(`reaction.${reaction.label}`, `${reaction.label}`, reaction.hasReacted ? 'active' : '', true, async () => {
+			return new Action(`reaction.${reaction.label}`, `${reaction.label}`, reaction.hasReacted && reaction.canEdit ? 'active' : '', reaction.canEdit, async () => {
 				try {
 					if (reaction.hasReacted) {
 						await this.commentService.deleteReaction(this.owner, this.resource, this.comment, reaction);

src/vs/workbench/contrib/comments/electron-browser/commentsEditorContribution.ts

@@ -748,13 +748,13 @@ registerThemingParticipant((theme, collector) => {
 
 	const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND);
 	if (statusBarItemHoverBackground) {
-		collector.addRule(`.monaco-editor .review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label:hover { background-color: ${statusBarItemHoverBackground}; border: 1px solid grey;
+		collector.addRule(`.monaco-editor .review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.active:hover { background-color: ${statusBarItemHoverBackground}; border: 1px solid grey;
 		border-radius: 3px; }`);
 	}
 
 	const statusBarItemActiveBackground = theme.getColor(STATUS_BAR_ITEM_ACTIVE_BACKGROUND);
 	if (statusBarItemActiveBackground) {
-		collector.addRule(`.monaco-editor .review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label:active { background-color: ${statusBarItemActiveBackground}; border: 1px solid grey;
+		collector.addRule(`.monaco-editor .review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.active:active { background-color: ${statusBarItemActiveBackground}; border: 1px solid grey;
 		border-radius: 3px;}`);
 	}
 });