Display linked issue(s) from the PR Overview #5824 by mohamedamara1 · Pull Request #6835 · microsoft/vscode-pull-request-github

mohamedamara1 · 2025-04-26T21:49:07Z

Replacement of #5825

mohamedamara1 · 2025-04-26T21:51:16Z

the closing issues of a PR are retireved succesfully as props to the sidebar component, what's missing is

listing them down in the UI
improvements on the selected fields

mohamedamara1 · 2025-04-29T18:05:40Z

any comments on this so far ? @alexr00
I know that I still need to fix the UI a bit (icons)

alexr00 · 2025-04-30T07:59:37Z

I'll try to take a look on Friday. We're doing our release prep week now (endgame).

alexr00

Thanks for the PR @mohamedamara1! I made a few small changes, and I have a few comments, as well as feedback on the UI itself:

alexr00 · 2025-05-07T10:44:20Z

+					<div className="section-title">Linked Issues</div>
+				</div>
+				{closingIssues.length > 0 ? (
+					<div className="p-2">


Please use a class name that is consistent with the class naming scheme in the file.

Same for gap-2 below.

alexr00 · 2025-05-07T10:45:37Z

 	lastReviewType?: ReviewType;
 	revertable?: boolean;
 	busy?: boolean;
+	closingIssues: Pick<Issue, 'title' | 'number' | 'state'>[];


Pick<Issue, 'title' | 'number' | 'state'> is used in more than one place, can you refactor it into an IssueReference type in this file?

alexr00 · 2025-05-07T10:46:10Z

+
+	switch (normalizedState) {
+		case 'open':
+			return settingsIcon;


Why not issueIcon?

mohamedamara1 · 2026-01-20T15:34:45Z

hello @alexr00, it's been a while but I'm picking this up, converting it to draft first and when it's ready for review I will let you know

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>

- 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.

- 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. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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).

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.

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.

alexr00 · 2026-04-23T15:13:58Z

+	return (
+		<div className="avatar-with-author">
+			<span className={`section-icon ${isOpen ? 'issue-open' : 'issue-closed'}`}>
+				{isOpen ? issueIcon : issueClosedIcon}


Should use issuescon (looks like there's a typo in the icon variable, but that's the correct icon) instead of issueIcon.

alexr00 · 2026-04-23T15:16:05Z

+			<span className={`section-icon ${isOpen ? 'issue-open' : 'issue-closed'}`}>
+				{isOpen ? issueIcon : issueClosedIcon}
+			</span>
+			<a href={issue.url} title={issue.url}>#{issue.number} {issue.title}</a>


Can the styling of this be improved?

not blue

overflow shouldn't wrap to the next line, and instead end with ...

would also be nice to use the same colors as GH for the icon.

What it currently looks like:

Also, when it's clicked it should open the issue webview, rather than issue in your browser.

alexr00 · 2026-04-23T15:18:55Z

 		mergeCommitMessage
 		mergeCommitTitle
 	}
+	closingIssuesReferences(first: 50) {


Also needs to be added in queriesExtra.gql and queriesLimited.gql.

alexr00 · 2026-04-23T15:20:07Z


 // Other icons
+export const issueIcon = <Icon src={require('../../resources/icons/issue_webview.svg')} />;
+export const issueClosedIcon = <Icon src={require('../../resources/icons/codicons/pass.svg')} />;


No need to add another export here, pass is already exported above.

alexr00 · 2026-04-23T15:20:46Z

 				)}
 			</Section>
+
+			<Section


If there are no closing issues, let's just not show this section. It's not actionable when there's nothing in it.

alexr00 · 2026-04-23T15:21:22Z

+function IssueItem({ issue }: { issue: IssueReference }) {
+	const isOpen = issue.state === GithubItemStateEnum.Open;
+	return (
+		<div className="avatar-with-author">


This seems like a weird class to use here, as there's no avatar with author in the div.

mohamedamara1 mentioned this pull request Apr 26, 2025

Linking PR to issue(s) from the PR Overview #5825

Closed

mohamedamara1 marked this pull request as draft April 26, 2025 23:32

mohamedamara1 marked this pull request as ready for review April 26, 2025 23:33

knight174 reviewed Apr 27, 2025

View reviewed changes

Comment thread src/github/graphql.ts

alexr00 added this to the May 2025 milestone Apr 30, 2025

alexr00 requested changes May 7, 2025

View reviewed changes

mohamedamara1 and others added 2 commits April 22, 2026 14:07

mohamedamara1 force-pushed the feature/5824-v2 branch from 6feea6a to 3050d45 Compare April 22, 2026 13:24

mohamedamara1 force-pushed the feature/5824-v2 branch from 3050d45 to d817cc8 Compare April 22, 2026 13:29

mohamedamara1 added 3 commits April 22, 2026 14:47

mohamedamara1 requested a review from alexr00 April 22, 2026 15:41

alexr00 requested changes Apr 23, 2026

View reviewed changes

Conversation

mohamedamara1 commented Apr 26, 2025

Uh oh!

mohamedamara1 commented Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mohamedamara1 commented Apr 29, 2025

Uh oh!

alexr00 commented Apr 30, 2025

Uh oh!

alexr00 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mohamedamara1 commented Jan 20, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mohamedamara1 commented Apr 26, 2025 •

edited

Loading

alexr00 left a comment •

edited

Loading