Display linked issue(s) from the PR Overview #5824 (#6835)

* Display linked issues in PR overview sidebar

Adds a "Linked Issues" section to the PR Overview sidebar that lists the
issues a PR closes, using the GraphQL `closingIssuesReferences` field.
The section is read-only since GitHub's API does not expose a mutation
for linking/unlinking issues.

Squashed and rebased onto current main; drops the now-redundant
`parsePullRequestState` helper since main has independently introduced
`stateToStateEnum` for the same dedup, and replaces it with an inline
OPEN/CLOSED mapping in `parseClosingIssuesReferences`.

Co-Authored-By: Alex Ross <38270282+alexr00@users.noreply.github.com>

* Address review feedback for #6835

- Extract IssueReference type into views.ts and use it for closingIssues
  (alexr00 review feedback).
- Sidebar: drop orphan tailwind-style class names (p-2, gap-2, p-4,
  text-sm, text-gray-500, text-center, h2) that are not defined in the
  project's CSS — replace with the project's section conventions.
- Use the existing issueIcon / issueClosedIcon for the issue state icon
  instead of settingsIcon / closeIcon.
- Switch on GithubItemStateEnum directly rather than lowercasing strings.
- Move the React `key` to the iterating element and key by issue.number
  (titles are not guaranteed unique).
- Render the issue number alongside the title.
- Initialize PullRequestModel.closingIssues to [] so the field is never
  undefined when serialized to the webview.

* Add issueIcon and issueClosedIcon exports

The previous commit imported these from './icon' but they were
removed from icon.tsx during the codicon refactor on main. Restore
them as named exports — issueIcon uses the existing issue_webview.svg,
issueClosedIcon uses the pass codicon (checkmark in circle).

* Make linked issues clickable links to open in browser

Adds the issue url to the GraphQL query and through the IssueReference
type, then wraps the issue label in an <a href> in the sidebar. VS Code's
webview intercepts the click and opens the URL via openExternal, matching
the behavior of AuthorLink in the same view.

* Color and align linked issue icons

Wraps the issue state icon in a .section-icon span and adds two new
state classes (.issue-open, .issue-closed) coloured with the existing
--vscode-issues-open and --vscode-issues-closed tokens that this
extension contributes. Matches the colouring convention already used
for reviewer state icons (.section-icon.approved). The .section-icon
container also provides flex centering and 3px padding, which fixes
the icon-vs-link spacing in the row.

* Address PR feedback

Co-authored-by: Copilot <copilot@github.com>

---------

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

Author: 3 people

src/github/graphql.ts

@@ -768,6 +768,15 @@ export interface PullRequest extends Issue {
 	suggestedReviewers: SuggestedReviewerResponse[];
 	additions?: number;
 	deletions?: number;
+	closingIssuesReferences?: {
+		nodes: {
+			id: number,
+			title: string,
+			number: number,
+			state: 'CLOSED' | 'OPEN',
+			url: string,
+		}[];
+	};
 }
 
 export enum DefaultCommitTitle {

src/github/interface.ts

@@ -223,6 +223,14 @@ export interface Issue {
 	reactions: Reaction[];
 }
 
+export interface IssueReference {
+	id: number;
+	number: number;
+	title: string;
+	state: GithubItemStateEnum;
+	url: string;
+}
+
 export interface PullRequest extends Issue {
 	isDraft?: boolean;
 	isRemoteHeadDeleted?: boolean;
@@ -242,6 +250,7 @@ export interface PullRequest extends Issue {
 	mergeCommitMeta?: { title: string, description: string };
 	squashCommitMeta?: { title: string, description: string };
 	suggestedReviewers?: ISuggestedReviewer[];
+	closingIssues?: IssueReference[]
 	hasComments?: boolean;
 	additions?: number;
 	deletions?: number;

src/github/pullRequestModel.ts

@@ -54,6 +54,7 @@ import {
 	IGitTreeItem,
 	IRawFileChange,
 	IRawFileContent,
+	IssueReference,
 	ISuggestedReviewer,
 	ITeam,
 	MergeMethod,
@@ -137,6 +138,7 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 	public conflicts?: string[];
 	public suggestedReviewers?: ISuggestedReviewer[];
 	public hasChangesSinceLastReview?: boolean;
+	public closingIssues: IssueReference[] = [];
 	private _showChangesSinceReview: boolean;
 	private _hasPendingReview: boolean = false;
 	private _onDidChangePendingReviewState: vscode.EventEmitter<boolean> = this._register(new vscode.EventEmitter<boolean>());
@@ -265,7 +267,7 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 		}
 
 		this.suggestedReviewers = item.suggestedReviewers;
-
+		this.closingIssues = item.closingIssues ?? [];
 		if (item.isRemoteHeadDeleted != null) {
 			this.isRemoteHeadDeleted = item.isRemoteHeadDeleted;
 		}

src/github/pullRequestOverview.ts

@@ -27,7 +27,7 @@ import { IssueOverviewPanel, panelKey } from './issueOverview';
 import { isCopilotOnMyBehalf, PullRequestModel } from './pullRequestModel';
 import { PullRequestReviewCommon, ReviewContext } from './pullRequestReviewCommon';
 import { branchPicks, pickEmail, reviewersQuickPick } from './quickPicks';
-import { parseReviewers, processDiffLinks, processPermalinks } from './utils';
+import { ISSUE_OR_URL_EXPRESSION, parseIssueExpressionOutput, parseReviewers, processDiffLinks, processPermalinks } from './utils';
 import { CancelCodingAgentReply, ChangeBaseReply, ChangeReviewersReply, DeleteReviewResult, MergeArguments, MergeResult, PullRequest, ReadyForReviewAndMergeContext, ReadyForReviewContext, ReviewCommentContext, ReviewType, UnresolvedIdentity } from './views';
 import { debounce } from '../common/async';
 import { COPILOT_ACCOUNTS, IComment } from '../common/comment';
@@ -38,6 +38,7 @@ import Logger from '../common/logger';
 import { CHECKOUT_DEFAULT_BRANCH, CHECKOUT_PULL_REQUEST_BASE_BRANCH, DEFAULT_MERGE_METHOD, DELETE_BRANCH_AFTER_MERGE, POST_DONE, PR_SETTINGS_NAMESPACE } from '../common/settingKeys';
 import { ITelemetry } from '../common/telemetry';
 import { EventType, ReviewEvent, SessionLinkInfo, TimelineEvent } from '../common/timelineEvent';
+import { toOpenIssueWebviewUri } from '../common/uri';
 import { asPromise, formatError } from '../common/utils';
 import { IRequestMessage, PULL_REQUEST_OVERVIEW_VIEW_TYPE } from '../common/webview';
 import { toCheckRunLogUri } from '../view/checkRunLogContentProvider';
@@ -458,7 +459,14 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 				currentUserReviewState: reviewState,
 				revertable: pullRequest.state === GithubItemStateEnum.Merged,
 				isCopilotOnMyBehalf: await isCopilotOnMyBehalf(pullRequest, currentUser, coAuthors),
-				generateDescriptionTitle: this.getGenerateDescriptionTitle()
+				generateDescriptionTitle: this.getGenerateDescriptionTitle(),
+				closingIssues: await Promise.all((pullRequest.closingIssues ?? []).map(async issue => {
+					const parsed = parseIssueExpressionOutput(issue.url.match(ISSUE_OR_URL_EXPRESSION));
+					const owner = parsed?.owner ?? pullRequest.remote.owner;
+					const repo = parsed?.name ?? pullRequest.remote.repositoryName;
+					const webviewUri = await toOpenIssueWebviewUri({ owner, repo, issueNumber: issue.number });
+					return { ...issue, url: webviewUri.toString() };
+				})),
 			};
 			this._postMessage({
 				command: 'pr.initialize',

src/github/queries.gql

@@ -224,6 +224,15 @@ fragment PullRequestFragment on PullRequest {
 		mergeCommitMessage
 		mergeCommitTitle
 	}
+	closingIssuesReferences(first: 50) {
+		nodes {
+			id
+			number
+			title
+			state
+			url
+		}
+	}
 	merged
 	mergeable
 	mergeQueueEntry {

src/github/queriesExtra.gql

@@ -237,6 +237,15 @@ fragment PullRequestFragment on PullRequest {
 		mergeCommitMessage
 		mergeCommitTitle
 	}
+	closingIssuesReferences(first: 50) {
+		nodes {
+			id
+			number
+			title
+			state
+			url
+		}
+	}
 	merged
 	mergeable
 	mergeQueueEntry {

src/github/queriesLimited.gql

@@ -206,6 +206,15 @@ fragment PullRequestFragment on PullRequest {
 		}
 		url
 	}
+	closingIssuesReferences(first: 50) {
+		nodes {
+			id
+			number
+			title
+			state
+			url
+		}
+	}
 	merged
 	mergeable
 	mergeStateStatus

src/github/utils.ts

@@ -924,6 +924,7 @@ export async function parseGraphQLPullRequest(
 		commentCount: graphQLPullRequest.comments.totalCount,
 		additions: graphQLPullRequest.additions,
 		deletions: graphQLPullRequest.deletions,
+		closingIssues: parseClosingIssuesReferences(graphQLPullRequest.closingIssuesReferences?.nodes),
 	};
 	pr.mergeCommitMeta = parseCommitMeta(graphQLPullRequest.baseRepository.mergeCommitTitle, graphQLPullRequest.baseRepository.mergeCommitMessage, pr);
 	pr.squashCommitMeta = parseCommitMeta(graphQLPullRequest.baseRepository.squashMergeCommitTitle, graphQLPullRequest.baseRepository.squashMergeCommitMessage, pr);
@@ -1068,6 +1069,22 @@ function parseSuggestedReviewers(
 	return ret.sort(loginComparator);
 }
 
+function parseClosingIssuesReferences(
+	closingIssuesReferences: Array<{ id: number, number: number, title: string, state: string, url: string }> | undefined
+): Array<{ id: number, number: number, title: string, state: GithubItemStateEnum, url: string }> {
+	if (!closingIssuesReferences) {
+		return [];
+	}
+
+	return closingIssuesReferences.map(issue => ({
+		id: issue.id,
+		number: issue.number,
+		title: issue.title,
+		state: issue.state === 'OPEN' ? GithubItemStateEnum.Open : GithubItemStateEnum.Closed,
+		url: issue.url,
+	}));
+}
+
 /**
  * Used for case insensitive sort by login
  */

src/github/views.ts

@@ -28,6 +28,13 @@ export enum ReviewType {
 	RequestChanges = 'requestChanges',
 }
 
+export interface IssueReference {
+	number: number;
+	title: string;
+	state: GithubItemStateEnum;
+	url: string;
+}
+
 export interface DisplayLabel extends ILabel {
 	displayName: string;
 }
@@ -112,6 +119,7 @@ export interface PullRequest extends Issue {
 	busy?: boolean;
 	loadingCommit?: string;
 	generateDescriptionTitle?: string;
+	closingIssues: IssueReference[];
 }
 
 export interface ProjectItemsReply {

webviews/common/common.css

@@ -312,6 +312,35 @@ body img.avatar {
 	fill: var(--vscode-issues-open);
 }
 
+.section-icon.issue-open svg path {
+	fill: var(--vscode-issues-open);
+}
+
+.section-icon.issue-closed svg path {
+	fill: var(--vscode-issues-closed);
+}
+
+.issue-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--vscode-foreground);
+	text-decoration: none;
+	overflow: hidden;
+}
+
+.issue-item:hover {
+	text-decoration: underline;
+	color: var(--vscode-foreground);
+}
+
+.issue-item-text {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: 1;
+	min-width: 0;
+}
 .reviewer-icons {
 	display: flex;
 	gap: 4px;