Use markdown in PR tree labels (#8069)

* Use markdown in PR tree labels

* Make escape syntax more specific

* Fix test

Author: kycutler

package.json

@@ -35,6 +35,7 @@
 		"remoteCodingAgents",
 		"shareProvider",
 		"tokenInformation",
+		"treeItemMarkdownLabel",
 		"treeViewMarkdownMessage"
 	],
 	"version": "0.120.0",

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

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  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' {
+
+	// @kycutler https://github.com/microsoft/vscode/issues/271523
+
+	export interface TreeItemLabel2 {
+		highlights?: [number, number][];
+
+		/**
+		 * A human-readable string or MarkdownString describing the {@link TreeItem Tree item}.
+		 *
+		 * When using MarkdownString, only the following Markdown syntax is supported:
+		 * - Icons (e.g., `$(icon-name)`, when the `supportIcons` flag is also set)
+		 * - Bold, italics, and strikethrough formatting, but only when the syntax wraps the entire string
+		 *   (e.g., `**bold**`, `_italic_`, `~~strikethrough~~`)
+		 */
+		label: string | MarkdownString;
+	}
+}

src/test/view/prsTree.test.ts

@@ -256,14 +256,18 @@ describe('GitHub Pull Requests view', function () {
 			assert.strictEqual(localChildren.length, 2);
 			const [localItem0, localItem1] = await Promise.all(localChildren.map(node => node.getTreeItem()));
 
-			assert.strictEqual(localItem0.label, 'zero');
+			const label0 = (localItem0.label as vscode.TreeItemLabel2).label;
+			assert.ok(label0 instanceof vscode.MarkdownString);
+			assert.equal(label0.value, 'zero');
 			assert.strictEqual(localItem0.tooltip, undefined);
 			assert.strictEqual(localItem0.description, 'by @me');
 			assert.strictEqual(localItem0.collapsibleState, vscode.TreeItemCollapsibleState.Collapsed);
 			assert.strictEqual(localItem0.contextValue, 'pullrequest:local:nonactive:hasHeadRef');
 			assert.deepStrictEqual(localItem0.iconPath!.toString(), 'https://avatars.com/me.jpg');
 
-			assert.strictEqual(localItem1.label, '✓ one');
+			const label1 = (localItem1.label as vscode.TreeItemLabel2).label;
+			assert.ok(label1 instanceof vscode.MarkdownString);
+			assert.equal(label1.value, '$(check) one');
 			assert.strictEqual(localItem1.tooltip, undefined);
 			assert.strictEqual(localItem1.description, 'by @you');
 			assert.strictEqual(localItem1.collapsibleState, vscode.TreeItemCollapsibleState.Collapsed);

src/view/treeNodes/pullRequestNode.ts

@@ -297,30 +297,45 @@ export class PRNode extends TreeNode implements vscode.CommentingRangeProvider2
 		}
 	}
 
-	async getTreeItem(): Promise<vscode.TreeItem> {
+	private _getLabel(): string {
 		const currentBranchIsForThisPR = this.pullRequestModel.equals(this._folderReposManager.activePullRequest);
+		const { title, number, author, isDraft } = this.pullRequestModel;
+		let label = '';
 
-		const { title, number, author, isDraft, html_url } = this.pullRequestModel;
-		let labelTitle = this.pullRequestModel.title.length > 50 ? `${this.pullRequestModel.title.substring(0, 50)}...` : this.pullRequestModel.title;
-		if (COPILOT_ACCOUNTS[this.pullRequestModel.author.login]) {
-			labelTitle = labelTitle.replace('[WIP]', '');
+		if (currentBranchIsForThisPR) {
+			label += '$(check) ';
 		}
-		const login = author.specialDisplayName ?? author.login;
-
-		const hasNotification = this._notificationProvider.hasNotification(this.pullRequestModel) || this._prsTreeModel.hasCopilotNotification(this.pullRequestModel.remote.owner, this.pullRequestModel.remote.repositoryName, this.pullRequestModel.number);
-
-		const formattedPRNumber = number.toString();
-		let labelPrefix = currentBranchIsForThisPR ? '✓ ' : '';
 
 		if (
 			vscode.workspace
 				.getConfiguration(PR_SETTINGS_NAMESPACE)
 				.get<boolean>(SHOW_PULL_REQUEST_NUMBER_IN_TREE, false)
 		) {
-			labelPrefix += `#${formattedPRNumber}: `;
+			label += `#${number}: `;
+		}
+
+		let labelTitle = title.length > 50 ? `${title.substring(0, 50)}...` : title;
+		if (COPILOT_ACCOUNTS[author.login]) {
+			labelTitle = labelTitle.replace('[WIP]', '');
 		}
+		// Escape any $(...) syntax to avoid rendering PR titles as icons.
+		label += labelTitle.replace(/\$\([a-zA-Z0-9~-]+\)/g, '\\$&');
 
-		const label = `${labelPrefix}${isDraft ? '\u270E ' : ''}${labelTitle}`;
+		if (isDraft) {
+			label = `_${label}_`;
+		}
+
+		return label;
+	}
+
+	async getTreeItem(): Promise<vscode.TreeItem> {
+		const currentBranchIsForThisPR = this.pullRequestModel.equals(this._folderReposManager.activePullRequest);
+		const { title, number, author, isDraft, html_url } = this.pullRequestModel;
+		const login = author.specialDisplayName ?? author.login;
+		const hasNotification = this._notificationProvider.hasNotification(this.pullRequestModel) || this._prsTreeModel.hasCopilotNotification(this.pullRequestModel.remote.owner, this.pullRequestModel.remote.repositoryName, this.pullRequestModel.number);
+		const label: vscode.TreeItemLabel2 = {
+			label: new vscode.MarkdownString(this._getLabel(), true)
+		};
 		const description = `by @${login}`;
 		const command = {
 			title: vscode.l10n.t('View Pull Request Description'),
@@ -329,7 +344,7 @@ export class PRNode extends TreeNode implements vscode.CommentingRangeProvider2
 		};
 
 		return {
-			label,
+			label: label as vscode.TreeItemLabel,
 			id: `${this.parent instanceof TreeNode ? (this.parent.id ?? this.parent.label) : ''}${html_url}${this._isLocal ? this.pullRequestModel.localBranchName : ''}`, // unique id stable across checkout status
 			description,
 			collapsibleState: 1,
@@ -341,7 +356,7 @@ export class PRNode extends TreeNode implements vscode.CommentingRangeProvider2
 				(((this.pullRequestModel.item.isRemoteHeadDeleted && !this._isLocal) || !this._folderReposManager.isPullRequestAssociatedWithOpenRepository(this.pullRequestModel)) ? '' : ':hasHeadRef'),
 			iconPath: await this._getIcon(),
 			accessibilityInformation: {
-				label: `${isDraft ? 'Draft ' : ''}Pull request number ${formattedPRNumber}: ${title} by ${login}`
+				label: `${isDraft ? 'Draft ' : ''}Pull request number ${number}: ${title} by ${login}`
 			},
 			resourceUri: createPRNodeUri(this.pullRequestModel, this.parent instanceof CategoryTreeNode && this.parent.isCopilot ? true : undefined),
 			command