Linking PR to issue(s) from the PR Overview

src/github/graphql.ts

@@ -557,6 +557,15 @@ export interface Issue {
 	title: string;
 	titleHTML: string;
 	assignees?: {
+	closingIssuesReferences?: {
+		nodes: {
+			id: string;
+			databaseId: number;
+			number: number;
+			title: string;
+			state: 'OPEN' | 'CLOSED' | 'MERGED';
+		}[];
+	};
 		nodes: Account[];
 	};
 	author: Account;

src/github/interface.ts

@@ -223,6 +223,7 @@ export interface PullRequest extends Issue {
 	mergeCommitMeta?: { title: string, description: string };
 	squashCommitMeta?: { title: string, description: string };
 	suggestedReviewers?: ISuggestedReviewer[];
+	closingIssuesReferences?: Pick<Issue, 'id' | 'number' | 'state' | 'title'>[]
 	hasComments?: boolean;
 }
 

src/github/pullRequestModel.ts

@@ -56,6 +56,7 @@ import {
 	IAccount,
 	IGitTreeItem,
 	IRawFileChange,
+	Issue,
 	IRawFileContent,
 	ISuggestedReviewer,
 	ITeam,
@@ -121,6 +122,8 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 	public conflicts?: string[];
 	public suggestedReviewers?: ISuggestedReviewer[];
 	public hasChangesSinceLastReview?: boolean;
+	public issues: Partial<Issue>[];
+
 	private _showChangesSinceReview: boolean;
 	private _hasPendingReview: boolean = false;
 	private _onDidChangePendingReviewState: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
@@ -144,7 +147,6 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 	private _comments: readonly IComment[] | undefined;
 	private _onDidChangeComments: vscode.EventEmitter<void> = new vscode.EventEmitter();
 	public readonly onDidChangeComments: vscode.Event<void> = this._onDidChangeComments.event;
-
 	// Whether the pull request is currently checked out locally
 	private _isActive: boolean;
 	public get isActive(): boolean {
@@ -248,6 +250,7 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 		super.update(item);
 		this.isDraft = item.isDraft;
 		this.suggestedReviewers = item.suggestedReviewers;
+		this.issues = item.closingIssuesReferences ?? [];
 
 		if (item.isRemoteHeadDeleted != null) {
 			this.isRemoteHeadDeleted = item.isRemoteHeadDeleted;

src/github/queriesExtra.gql

@@ -179,6 +179,15 @@ fragment PullRequestFragment on PullRequest {
 			}
 		}
 	}
+	closingIssuesReferences(first: 50) {
+		nodes {
+			id
+			databaseId
+			body
+			number
+			title
+		}
+	}
 
 	comments(first: 1) {
 		totalCount

src/github/utils.ts

@@ -778,6 +778,7 @@ export function parseGraphQLPullRequest(
 		milestone: parseMilestone(graphQLPullRequest.milestone),
 		assignees: graphQLPullRequest.assignees?.nodes.map(assignee => parseAccount(assignee, githubRepository)),
 		commits: parseCommits(graphQLPullRequest.commits.nodes),
+		closingIssuesReferences: parseIssues(graphQLPullRequest.closingIssuesReferences?.nodes),
 		reactionCount: graphQLPullRequest.reactions.totalCount,
 		commentCount: graphQLPullRequest.comments.totalCount,
 	};
@@ -867,6 +868,35 @@ function parseComments(comments: GraphQL.AbbreviatedIssueComment[] | undefined,
 	return parsedComments;
 }
 
+function parseIssues(issues: Pick<GraphQL.PullRequest, 'id' | 'databaseId' | 'number' | 'title' | 'state'>[] | undefined): {
+	id: number;
+	number: number;
+	title: string;
+	state: 'OPEN' | 'CLOSED' | 'MERGED';
+}[] | undefined {
+	if (!issues) {
+		return undefined;
+	}
+
+	const parsedIssues: {
+		id: number;
+		number: number;
+		title: string;
+		state: 'OPEN' | 'CLOSED' | 'MERGED';
+	}[] = [];
+
+	for (const issue of issues) {
+		parsedIssues.push({
+			id: issue.databaseId,
+			number: issue.number,
+			title: issue.title,
+			state: issue.state,
+		});
+	}
+
+	return parsedIssues;
+}
+
 export function parseGraphQLIssue(issue: GraphQL.Issue, githubRepository: GitHubRepository): Issue {
 	return {
 		id: issue.databaseId,

src/github/views.ts

@@ -10,6 +10,7 @@ import {
 	ILabel,
 	IMilestone,
 	IProjectItem,
+	Issue,
 	MergeMethod,
 	MergeMethodsAvailability,
 	MergeQueueState,
@@ -40,6 +41,7 @@ export interface Issue {
 	assignees: IAccount[];
 	projectItems: IProjectItem[] | undefined;
 	milestone: IMilestone | undefined;
+	issues: Partial<Issue>[];
 	/**
 	 * User can edit PR title and description (author or user with push access)
 	 */

webviews/components/sidebar.tsx

@@ -14,7 +14,7 @@ import { AuthorLink, Avatar } from '../components/user';
 import { closeIcon, copilotIcon, settingsIcon } from './icon';
 import { Reviewer } from './reviewer';
 
-export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue, projectItems: projects, milestone, assignees, canAssignCopilot }: PullRequest) {
+export default function Sidebar({ reviewers, labels, issues, hasWritePermission, isIssue, projectItems: projects, milestone, assignees, canAssignCopilot }: PullRequest) {
 	const {
 		addReviewers,
 		addAssignees,
@@ -202,6 +202,30 @@ export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue
 					<div className="section-placeholder">No milestone</div>
 				)}
 			</div>
+			<div id="linked-issues" className="section">
+				<div className="section-header" onClick={async () => {
+					const newMilestone = await addMilestone();
+					updatePR({ milestone: newMilestone.added });
+				}}>
+					<div className="section-title">Linked issues</div>
+					{hasWritePermission ? (
+						<button
+							className="icon-button"
+							title="Link Issue">
+							{settingsIcon}
+						</button>
+					) : null}
+				</div>
+				{issues.length ? (
+					<div className="issues-list">
+						{issues.map(issue => (
+							<Issue key={issue.title} {...issue} />
+						))}
+					</div>
+				) : (
+					<div className="section-placeholder">None yet</div>
+				)}
+			</div>
 		</div>
 	);
 }
@@ -273,3 +297,14 @@ function Project(project: IProjectItem & { canDelete: boolean }) {
 		</div>
 	);
 }
+
+function Issue(issue: any) {
+	return (
+		<div className="issues-list">
+			<div className="issue-item">
+				<h1>{issue.title}</h1>
+				{/* Add more details about the issue as needed */}
+			</div>
+		</div>
+	);
+}

webviews/editorWebview/test/builder/pullRequest.ts

@@ -57,5 +57,6 @@ export const PullRequestBuilder = createBuilderClass<PullRequest>()({
 	hasReviewDraft: { default: false },
 	busy: { default: undefined },
 	lastReviewType: { default: undefined },
+	issues: { default: [] },
 	canAssignCopilot: { default: false },
 });