Improve overview titles (#8498)

* Improve overview titles

* Fix tests

Author: alexr00

resources/icons/dark/issue_webview.svg

@@ -64,7 +64,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 		if (panel) {
 			panel._panel.reveal(activeColumn, true);
 		} else {
-			const title = `Issue #${identity.number.toString()}`;
+			const title = `#${identity.number.toString()}`;
 			panel = new IssueOverviewPanel(
 				telemetry,
 				extensionUri,
@@ -108,6 +108,21 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 		return this._panels.get(panelKey(owner, repo, number));
 	}
 
+	/**
+	 * Build a short panel title: `#<number> <truncated title>`.
+	 * The item title is truncated to approximately `maxLength` characters on a
+	 * word boundary and suffixed with "..." when it doesn't fit in full.
+	 */
+	protected buildPanelTitle(itemNumber: number, itemTitle: string, maxLength: number = 20): string {
+		let truncated = itemTitle;
+		if (itemTitle.length > maxLength) {
+			const lastSpace = itemTitle.lastIndexOf(' ', maxLength);
+			const cutOff = lastSpace > 0 ? lastSpace : maxLength;
+			truncated = itemTitle.substring(0, cutOff) + '...';
+		}
+		return `#${itemNumber} ${truncated}`;
+	}
+
 	protected setPanelTitle(title: string): void {
 		try {
 			this._panel.title = title;
@@ -125,10 +140,13 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 		folderRepositoryManager: FolderRepositoryManager,
 		private readonly type: string = IssueOverviewPanel.viewType,
 		existingPanel?: vscode.WebviewPanel,
-		iconSubpath?: {
+		iconSubpath: {
 			light: string,
 			dark: string,
-		}
+		} = {
+				light: 'resources/icons/issue_webview.svg',
+				dark: 'resources/icons/dark/issue_webview.svg',
+			}
 	) {
 		super();
 		this._folderRepositoryManager = folderRepositoryManager;
@@ -144,12 +162,10 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			enableFindWidget: true
 		}));
 
-		if (iconSubpath) {
-			this._panel.iconPath = {
-				dark: vscode.Uri.joinPath(_extensionUri, iconSubpath.dark),
-				light: vscode.Uri.joinPath(_extensionUri, iconSubpath.light)
-			};
-		}
+		this._panel.iconPath = {
+			dark: vscode.Uri.joinPath(_extensionUri, iconSubpath.dark),
+			light: vscode.Uri.joinPath(_extensionUri, iconSubpath.light)
+		};
 
 		this._webview = this._panel.webview;
 		super.initialize();
@@ -298,7 +314,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			}
 
 			this._item = issue as TItem;
-			this.setPanelTitle(`Issue #${issueModel.number.toString()}`);
+			this.setPanelTitle(this.buildPanelTitle(issueModel.number, issueModel.title));
 
 			Logger.debug('pr.initialize', IssueOverviewPanel.ID);
 			this._postMessage({

resources/icons/issue_webview.svg

@@ -91,7 +91,7 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 		if (panel) {
 			panel._panel.reveal(activeColumn, preserveFocus);
 		} else {
-			const title = `Pull Request #${identity.number.toString()}`;
+			const title = `#${identity.number.toString()}`;
 			panel = new PullRequestOverviewPanel(
 				telemetry,
 				extensionUri,
@@ -364,7 +364,7 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 			this._repositoryDefaultBranch = defaultBranch!;
 			this._teamsCount = orgTeamsCount;
 			this._assignableUsers = assignableUsers;
-			this.setPanelTitle(`Pull Request #${pullRequestModel.number.toString()}`);
+			this.setPanelTitle(this.buildPanelTitle(pullRequestModel.number, pullRequestModel.title));
 
 			const isCurrentlyCheckedOut = pullRequestModel.equals(this._folderRepositoryManager.activePullRequest);
 			const mergeMethodsAvailability = repositoryAccess!.mergeMethodsAvailability;

src/github/issueOverview.ts

@@ -89,7 +89,7 @@ describe('PullRequestOverview', function () {
 			await PullRequestOverviewPanel.createOrShow(telemetry, EXTENSION_URI, pullRequestManager, identity, prModel);
 
 			assert(
-				createWebviewPanel.calledWith(sinonMatch.string, 'Pull Request #1000', vscode.ViewColumn.One, {
+				createWebviewPanel.calledWith(sinonMatch.string, '#1000', vscode.ViewColumn.One, {
 					enableScripts: true,
 					retainContextWhenHidden: true,
 					localResourceRoots: [vscode.Uri.joinPath(EXTENSION_URI, 'dist')],
@@ -130,7 +130,7 @@ describe('PullRequestOverview', function () {
 			const panel0 = PullRequestOverviewPanel.findPanel(identity0.owner, identity0.repo, identity0.number);
 			assert.notStrictEqual(panel0, undefined);
 			assert.strictEqual(createWebviewPanel.callCount, 1);
-			assert.strictEqual(panel0!.getCurrentTitle(), 'Pull Request #1000');
+			assert.strictEqual(panel0!.getCurrentTitle(), '#1000 New feature');
 
 			// Opening the same PR again should reuse the existing panel
 			await PullRequestOverviewPanel.createOrShow(telemetry, EXTENSION_URI, pullRequestManager, identity0, prModel0);
@@ -185,8 +185,8 @@ describe('PullRequestOverview', function () {
 			assert.notStrictEqual(panel1, undefined);
 			assert.notStrictEqual(panel0, panel1);
 			assert.strictEqual(createWebviewPanel.callCount, 2);
-			assert.strictEqual(panel0!.getCurrentTitle(), 'Pull Request #1000');
-			assert.strictEqual(panel1!.getCurrentTitle(), 'Pull Request #2000');
+			assert.strictEqual(panel0!.getCurrentTitle(), '#1000 New feature');
+			assert.strictEqual(panel1!.getCurrentTitle(), '#2000 New feature');
 		});
 	});
 });