Render emojis in labels correctly (#7400)

* Initial plan

* Initial exploration: identify emoji rendering issue in labels

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Add emoji support to label rendering in markdown and webviews

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Fix emoji rendering in labels by adding displayName property

- Add optional displayName property to ILabel interface
- Keep original name for API calls, use displayName for UI rendering
- Update issueOverview and createPRViewProvider to populate displayName with emojified text
- Update Label components to display emojified text while preserving original name for removeLabel operations

This addresses the issue where removeLabel was failing because it was trying to use emojified names in API calls.

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

* Make it work

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

common/views.ts

@@ -5,7 +5,7 @@
 
 import { ClosedEvent, CommentEvent } from '../src/common/timelineEvent';
 import { GithubItemStateEnum, IAccount, ILabel, IMilestone, IProject, ITeam, MergeMethod, MergeMethodsAvailability } from '../src/github/interface';
-import { PreReviewState } from '../src/github/views';
+import { DisplayLabel, PreReviewState } from '../src/github/views';
 
 export interface RemoteInfo {
 	owner: string;
@@ -108,7 +108,7 @@ export interface CreateParamsNew {
 	compareBranch?: string;
 	isDraftDefault: boolean;
 	isDraft?: boolean;
-	labels?: ILabel[];
+	labels?: DisplayLabel[];
 	projects?: IProject[];
 	assignees?: IAccount[];
 	reviewers?: (IAccount | ITeam)[];
@@ -169,14 +169,14 @@ export interface TitleAndDescriptionResult {
 	description: string | undefined;
 }
 
-export interface CloseResult {
-	state: GithubItemStateEnum;
-	commentEvent?: CommentEvent;
-	closeEvent: ClosedEvent;
-}
-
-export interface OpenCommitChangesArgs {
-	commitSha: string;
-}
-
+export interface CloseResult {
+	state: GithubItemStateEnum;
+	commentEvent?: CommentEvent;
+	closeEvent: ClosedEvent;
+}
+
+export interface OpenCommitChangesArgs {
+	commitSha: string;
+}
+
 // #endregion

src/github/activityBarViewProvider.ts

@@ -6,6 +6,7 @@
 import * as vscode from 'vscode';
 import { openPullRequestOnGitHub } from '../commands';
 import { IComment } from '../common/comment';
+import { emojify, ensureEmojis } from '../common/emoji';
 import { disposeAll } from '../common/lifecycle';
 import { ReviewEvent } from '../common/timelineEvent';
 import { formatError } from '../common/utils';
@@ -219,7 +220,8 @@ export class PullRequestViewProvider extends WebviewViewBase implements vscode.W
 			this._folderRepositoryManager.getPullRequestRepositoryDefaultBranch(pullRequestModel),
 			this._folderRepositoryManager.getCurrentUser(pullRequestModel.githubRepository),
 			pullRequestModel.canEdit(),
-			pullRequestModel.validateDraftMode()
+			pullRequestModel.validateDraftMode(),
+			ensureEmojis(this._folderRepositoryManager.context)
 		])
 			.then(result => {
 				const [pullRequest, repositoryAccess, timelineEvents, requestedReviewers, branchInfo, defaultBranch, currentUser, viewerCanEdit, hasReviewDraft] = result;
@@ -267,7 +269,7 @@ export class PullRequestViewProvider extends WebviewViewBase implements vscode.W
 					createdAt: pullRequest.createdAt,
 					body: pullRequest.body,
 					bodyHTML: pullRequest.bodyHTML,
-					labels: pullRequest.item.labels,
+					labels: pullRequest.item.labels.map(label => ({ ...label, displayName: emojify(label.name) })),
 					author: {
 						login: pullRequest.author.login,
 						name: pullRequest.author.name,

src/github/createPRViewProvider.ts

@@ -7,6 +7,7 @@ import * as vscode from 'vscode';
 import { ChooseBaseRemoteAndBranchResult, ChooseCompareRemoteAndBranchResult, ChooseRemoteAndBranchArgs, CreateParamsNew, CreatePullRequestNew, RemoteInfo, TitleAndDescriptionArgs } from '../../common/views';
 import type { Branch, Ref } from '../api/api';
 import { GitHubServerType } from '../common/authentication';
+import { emojify, ensureEmojis } from '../common/emoji';
 import { commands, contexts } from '../common/executeCommands';
 import Logger from '../common/logger';
 import { Protocol } from '../common/protocol';
@@ -38,7 +39,7 @@ import { PullRequestModel } from './pullRequestModel';
 import { getDefaultMergeMethod } from './pullRequestOverview';
 import { getAssigneesQuickPickItems, getLabelOptions, getMilestoneFromQuickPick, getProjectFromQuickPick, reviewersQuickPick } from './quickPicks';
 import { getIssueNumberLabelFromParsed, ISSUE_EXPRESSION, ISSUE_OR_URL_EXPRESSION, parseIssueExpressionOutput, variableSubstitution } from './utils';
-import { PreReviewState } from './views';
+import { DisplayLabel, PreReviewState } from './views';
 
 const ISSUE_CLOSING_KEYWORDS = new RegExp('closes|closed|close|fixes|fixed|fix|resolves|resolved|resolve\s$', 'i'); // https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword
 
@@ -170,7 +171,9 @@ export abstract class BaseCreatePullRequestViewProvider<T extends BasePullReques
 		const [detectedBaseMetadata, remotes, defaultOrigin] = await Promise.all([
 			this.detectBaseMetadata(defaultCompareBranch),
 			this._folderRepositoryManager.getGitHubRemotes(),
-			this._folderRepositoryManager.getOrigin(defaultCompareBranch)]);
+			this._folderRepositoryManager.getOrigin(defaultCompareBranch),
+			ensureEmojis(this._folderRepositoryManager.context)
+		]);
 
 		const defaultBaseRemote: RemoteInfo = {
 			owner: detectedBaseMetadata?.owner ?? this._pullRequestDefaults.owner,
@@ -225,7 +228,7 @@ export abstract class BaseCreatePullRequestViewProvider<T extends BasePullReques
 		}
 		const preReviewer = this._folderRepositoryManager.getAutoReviewer();
 
-		this.labels = labels;
+		this.labels = labels.map(label => ({ ...label, displayName: emojify(label.name) }));
 
 		const params: CreateParamsNew = {
 			canModifyBranches: true,
@@ -430,20 +433,20 @@ export abstract class BaseCreatePullRequestViewProvider<T extends BasePullReques
 		});
 	}
 
-	private labels: ILabel[] = [];
+	private labels: DisplayLabel[] = [];
 	public async addLabels(): Promise<void> {
-		let newLabels: ILabel[] = [];
+		let newLabels: DisplayLabel[] = [];
 
-		const labelsToAdd = await vscode.window.showQuickPick(
+		const labelsToAdd = await vscode.window.showQuickPick<vscode.QuickPickItem & { name: string }>(
 			getLabelOptions(this._folderRepositoryManager, this.labels, this.model.baseOwner, this.model.repositoryName).then(options => {
 				newLabels = options.newLabels;
 				return options.labelPicks;
-			}) as Promise<vscode.QuickPickItem[]>,
+			}),
 			{ canPickMany: true, matchOnDescription: true, placeHolder: vscode.l10n.t('Apply labels') },
 		);
 
 		if (labelsToAdd) {
-			const addedLabels: ILabel[] = labelsToAdd.map(label => newLabels.find(l => l.name === label.label)!);
+			const addedLabels: DisplayLabel[] = labelsToAdd.map(label => newLabels.find(l => l.name === label.name)!);
 			this.labels = addedLabels;
 			this._postMessage({
 				command: 'set-labels',

src/github/issueOverview.ts

@@ -8,18 +8,19 @@ import * as vscode from 'vscode';
 import { CloseResult } from '../../common/views';
 import { openPullRequestOnGitHub } from '../commands';
 import { COPILOT_ACCOUNTS, IComment } from '../common/comment';
+import { emojify, ensureEmojis } from '../common/emoji';
 import Logger from '../common/logger';
 import { PR_SETTINGS_NAMESPACE, WEBVIEW_REFRESH_INTERVAL } from '../common/settingKeys';
 import { ITelemetry } from '../common/telemetry';
 import { CommentEvent, EventType, ReviewStateValue, TimelineEvent } from '../common/timelineEvent';
 import { asPromise, formatError } from '../common/utils';
 import { getNonce, IRequestMessage, WebviewBase } from '../common/webview';
 import { FolderRepositoryManager } from './folderRepositoryManager';
-import { GithubItemStateEnum, IAccount, ILabel, IMilestone, IProject, IProjectItem, RepoAccessAndMergeMethods } from './interface';
+import { GithubItemStateEnum, IAccount, IMilestone, IProject, IProjectItem, RepoAccessAndMergeMethods } from './interface';
 import { IssueModel } from './issueModel';
 import { getAssigneesQuickPickItems, getLabelOptions, getMilestoneFromQuickPick, getProjectFromQuickPick } from './quickPicks';
 import { isInCodespaces, vscodeDevPrLink } from './utils';
-import { ChangeAssigneesReply, Issue, ProjectItemsReply, SubmitReviewReply } from './views';
+import { ChangeAssigneesReply, DisplayLabel, Issue, ProjectItemsReply, SubmitReviewReply } from './views';
 
 export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends WebviewBase {
 	public static ID: string = 'IssueOverviewPanel';
@@ -42,6 +43,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 		issue: IssueModel,
 		toTheSide: Boolean = false,
 	) {
+		await ensureEmojis(folderRepositoryManager.context);
 		const activeColumn = toTheSide
 			? vscode.ViewColumn.Beside
 			: vscode.window.activeTextEditor
@@ -194,6 +196,11 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 	protected getInitializeContext(currentUser: IAccount, issue: IssueModel, timelineEvents: TimelineEvent[], repositoryAccess: RepoAccessAndMergeMethods, viewerCanEdit: boolean, assignableUsers: IAccount[]): Issue {
 		const hasWritePermission = repositoryAccess!.hasWritePermission;
 		const canEdit = hasWritePermission || viewerCanEdit;
+		const labels = issue.item.labels.map(label => ({
+			...label,
+			displayName: emojify(label.name)
+		}));
+
 		const context: Issue = {
 			owner: issue.remote.owner,
 			repo: issue.remote.repositoryName,
@@ -204,7 +211,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			createdAt: issue.createdAt,
 			body: issue.body,
 			bodyHTML: issue.bodyHTML,
-			labels: issue.item.labels,
+			labels: labels,
 			author: issue.author,
 			state: issue.state,
 			events: timelineEvents,
@@ -402,9 +409,9 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 	}
 
 	private async addLabels(message: IRequestMessage<void>): Promise<void> {
-		const quickPick = vscode.window.createQuickPick<vscode.QuickPickItem>();
+		const quickPick = vscode.window.createQuickPick<(vscode.QuickPickItem & { name: string })>();
 		try {
-			let newLabels: ILabel[] = [];
+			let newLabels: DisplayLabel[] = [];
 
 			quickPick.busy = true;
 			quickPick.canSelectMany = true;
@@ -420,13 +427,13 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 				return quickPick.selectedItems;
 			});
 			const hidePromise = asPromise<void>(quickPick.onDidHide);
-			const labelsToAdd = await Promise.race<readonly vscode.QuickPickItem[] | void>([acceptPromise, hidePromise]);
+			const labelsToAdd = await Promise.race<readonly (vscode.QuickPickItem & { name: string })[] | void>([acceptPromise, hidePromise]);
 			quickPick.busy = true;
 			quickPick.enabled = false;
 
 			if (labelsToAdd) {
-				await this._item.setLabels(labelsToAdd.map(r => r.label));
-				const addedLabels: ILabel[] = labelsToAdd.map(label => newLabels.find(l => l.name === label.label)!);
+				await this._item.setLabels(labelsToAdd.map(r => r.name));
+				const addedLabels: DisplayLabel[] = labelsToAdd.map(label => newLabels.find(l => l.name === label.name)!);
 
 				await this._replyMessage(message, {
 					added: addedLabels,

src/github/markdownUtils.ts

@@ -6,6 +6,7 @@
 import * as marked from 'marked';
 import 'url-search-params-polyfill';
 import * as vscode from 'vscode';
+import { ensureEmojis } from '../common/emoji';
 import Logger from '../common/logger';
 import { CODE_PERMALINK, findCodeLinkLocally } from '../issues/issueLinkLookup';
 import { PullRequestDefaults } from './folderRepositoryManager';
@@ -188,6 +189,7 @@ export async function issueMarkdown(
 	markdown.appendMarkdown(body + '  \n');
 
 	if (issue.item.labels.length > 0) {
+		await ensureEmojis(context);
 		markdown.appendMarkdown('   \n');
 		issue.item.labels.forEach(label => {
 			markdown.appendMarkdown(

src/github/quickPicks.ts

@@ -7,13 +7,15 @@
 import { Buffer } from 'buffer';
 import * as vscode from 'vscode';
 import { COPILOT_ACCOUNTS } from '../common/comment';
+import { emojify, ensureEmojis } from '../common/emoji';
 import Logger from '../common/logger';
 import { DataUri } from '../common/uri';
 import { formatError } from '../common/utils';
 import { FolderRepositoryManager } from './folderRepositoryManager';
 import { GitHubRepository, TeamReviewerRefreshKind } from './githubRepository';
 import { AccountType, IAccount, ILabel, IMilestone, IProject, isSuggestedReviewer, isTeam, ISuggestedReviewer, ITeam, reviewerId, ReviewState } from './interface';
 import { IssueModel } from './issueModel';
+import { DisplayLabel } from './views';
 
 async function getItems<T extends IAccount | ITeam | ISuggestedReviewer>(context: vscode.ExtensionContext, skipList: Set<string>, users: T[], picked: boolean, tooManyAssignable: boolean = false): Promise<(vscode.QuickPickItem & { user?: T })[]> {
 	const alreadyAssignedItems: (vscode.QuickPickItem & { user?: T })[] = [];
@@ -392,12 +394,14 @@ export async function getLabelOptions(
 	labels: ILabel[],
 	baseOwner: string,
 	repositoryName: string
-): Promise<{ newLabels: ILabel[], labelPicks: vscode.QuickPickItem[] }> {
-	const newLabels = await folderRepoManager.getLabels(undefined, { owner: baseOwner, repo: repositoryName });
+): Promise<{ newLabels: DisplayLabel[], labelPicks: (vscode.QuickPickItem & { name: string })[] }> {
+	await ensureEmojis(folderRepoManager.context);
+	const newLabels = (await folderRepoManager.getLabels(undefined, { owner: baseOwner, repo: repositoryName })).map(label => ({ ...label, displayName: emojify(label.name) }));
 
 	const labelPicks = newLabels.map(label => {
 		return {
-			label: label.name,
+			label: label.displayName,
+			name: label.name,
 			description: label.description ?? undefined,
 			picked: labels.some(existingLabel => existingLabel.name === label.name),
 			iconPath: DataUri.asImageDataURI(Buffer.from(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

src/github/utils.ts

@@ -12,6 +12,7 @@ import { GitApiImpl } from '../api/api1';
 import { AuthProvider, GitHubServerType } from '../common/authentication';
 import { COPILOT_ACCOUNTS, IComment, IReviewThread, SubjectType } from '../common/comment';
 import { DiffHunk, parseDiffHunk } from '../common/diffHunk';
+import { emojify } from '../common/emoji';
 import { GitHubRef } from '../common/githubRef';
 import Logger from '../common/logger';
 import { Remote } from '../common/remote';
@@ -1746,7 +1747,8 @@ export function vscodeDevPrLink(pullRequest: IssueModel) {
 export function makeLabel(label: ILabel): string {
 	const isDarkTheme = vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark;
 	const labelColor = gitHubLabelColor(label.color, isDarkTheme, true);
-	return `<span style="color:${labelColor.textColor};background-color:${labelColor.backgroundColor};border-radius:10px;">&nbsp;&nbsp;${label.name.trim()}&nbsp;&nbsp;</span>`;
+	const labelName = emojify(label.name.trim());
+	return `<span style="color:${labelColor.textColor};background-color:${labelColor.backgroundColor};border-radius:10px;">&nbsp;&nbsp;${labelName}&nbsp;&nbsp;</span>`;
 }
 
 

src/github/views.ts

@@ -26,6 +26,10 @@ export enum ReviewType {
 	RequestChanges = 'requestChanges',
 }
 
+export interface DisplayLabel extends ILabel {
+	displayName: string;
+}
+
 export interface Issue {
 	owner: string;
 	repo: string;
@@ -39,7 +43,7 @@ export interface Issue {
 	author: IAccount;
 	state: GithubItemStateEnum; // TODO: don't allow merged
 	events: TimelineEvent[];
-	labels: ILabel[];
+	labels: DisplayLabel[];
 	assignees: IAccount[];
 	projectItems: IProjectItem[] | undefined;
 	milestone: IMilestone | undefined;

src/lm/tools/displayIssuesTool.ts

@@ -5,6 +5,7 @@
 'use strict';
 
 import * as vscode from 'vscode';
+import { ensureEmojis } from '../../common/emoji';
 import Logger from '../../common/logger';
 import { reviewerLabel } from '../../github/interface';
 import { makeLabel } from '../../github/utils';
@@ -29,7 +30,7 @@ Here are the possible columns:
 export class DisplayIssuesTool extends ToolBase<DisplayIssuesParameters> {
 	public static readonly toolId = 'github-pull-request_renderIssues';
 	private static ID = 'DisplayIssuesTool';
-	constructor(chatParticipantState: ChatParticipantState) {
+	constructor(private readonly context: vscode.ExtensionContext, chatParticipantState: ChatParticipantState) {
 		super(chatParticipantState);
 	}
 
@@ -144,6 +145,7 @@ export class DisplayIssuesTool extends ToolBase<DisplayIssuesParameters> {
 	}
 
 	async invoke(options: vscode.LanguageModelToolInvocationOptions<DisplayIssuesParameters>, token: vscode.CancellationToken): Promise<vscode.LanguageModelToolResult | undefined> {
+		await ensureEmojis(this.context);
 		const issueItemsInfo: vscode.LanguageModelTextPart | undefined = this.chatParticipantState.firstUserMessage;
 		const issueItems: IssueSearchResultItem[] | undefined = options.input.arrayOfIssues;
 		if (!issueItems || issueItems.length === 0) {

src/lm/tools/tools.ts

@@ -50,5 +50,5 @@ function registerCopilotAgentTools(context: vscode.ExtensionContext, copilotRemo
 function registerSearchTools(context: vscode.ExtensionContext, credentialStore: CredentialStore, repositoriesManager: RepositoriesManager, chatParticipantState: ChatParticipantState) {
 	context.subscriptions.push(vscode.lm.registerTool(ConvertToSearchSyntaxTool.toolId, new ConvertToSearchSyntaxTool(credentialStore, repositoriesManager, chatParticipantState)));
 	context.subscriptions.push(vscode.lm.registerTool(SearchTool.toolId, new SearchTool(credentialStore, repositoriesManager, chatParticipantState)));
-	context.subscriptions.push(vscode.lm.registerTool(DisplayIssuesTool.toolId, new DisplayIssuesTool(chatParticipantState)));
+	context.subscriptions.push(vscode.lm.registerTool(DisplayIssuesTool.toolId, new DisplayIssuesTool(context, chatParticipantState)));
 }