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:

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

@mohamedamara1 I find myself really needing this these days as Copilot created PRs link the issue to the PR, but don't mention the issue number in the PR description. I'm going to address my own comments. Thank you for pushing for this!

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

Copilot

Pull request overview

Adds support for showing “Linked Issues” (issues the PR will close) in the PR Overview webview sidebar by fetching closingIssuesReferences from GitHub GraphQL, parsing it into the model/view payload, and rendering a new sidebar section.

Changes:

Extend PR GraphQL fragments/types + parsing to include closingIssuesReferences.
Plumb closingIssues through PullRequestModel → PR overview webview initialization (with issue links converted to “open issue webview” URIs).
Render a new “Linked Issues” sidebar section and add CSS styling.

Show a summary per file

File	Description
webviews/editorWebview/test/builder/pullRequest.ts	Adds `closingIssues` default to the PR test builder.
webviews/components/sidebar.tsx	Renders a new “Linked Issues” section in the sidebar.
webviews/common/common.css	Adds styles for linked issue rows + open/closed issue icon coloring.
src/github/views.ts	Adds `IssueReference` and `closingIssues` to the webview PR shape.
src/github/utils.ts	Parses `closingIssuesReferences` nodes into `closingIssues` on the internal PR model.
src/github/queriesLimited.gql	Adds `closingIssuesReferences` fields to the limited PR fragment.
src/github/queriesExtra.gql	Adds `closingIssuesReferences` fields to the extra PR fragment.
src/github/queries.gql	Adds `closingIssuesReferences` fields to the main PR fragment.
src/github/pullRequestOverview.ts	Transforms linked issue URLs into issue-webview URIs and includes them in `pr.initialize`.
src/github/pullRequestModel.ts	Stores `closingIssues` on the PR model and populates it from parsed item data.
src/github/interface.ts	Introduces internal `IssueReference` and adds `closingIssues` to internal PR type.
src/github/graphql.ts	Extends the GraphQL PR type with `closingIssuesReferences`.

Copilot's findings

Comments suppressed due to low confidence (1)

webviews/components/sidebar.tsx:280

React keying closingIssues items by issue.number can collide when linked issues span multiple repositories (e.g. owner1/repo1#123 and owner2/repo2#123). Use a stable unique key (e.g. issue.url or an explicit id/owner+repo+number field) to avoid incorrect item reuse during re-renders.

					{closingIssues.map(issue => (
						<IssueItem key={issue.number} issue={issue} />
					))}

Files reviewed: 12/12 changed files
Comments generated: 10

Copilot · 2026-04-29T12:51:31Z

 		commentCount: graphQLPullRequest.comments.totalCount,
 		additions: graphQLPullRequest.additions,
 		deletions: graphQLPullRequest.deletions,
+		closingIssues: parseClosingIssuesReferences(graphQLPullRequest.closingIssuesReferences?.nodes),
 	};


New closingIssues parsing/mapping is untested. Since parseGraphQLPullRequest already has unit coverage under src/test (e.g. prsTree.test.ts), consider adding a case that includes closingIssuesReferences to verify state mapping and that the parsed references are propagated correctly.

alexr00 · 2026-04-29T12:52:30Z

/AzurePipelines run

azure-pipelines · 2026-04-29T12:52:37Z

Azure Pipelines could not run because the pipeline triggers exclude this branch/path.

mohamedamara1 · 2026-04-30T06:07:36Z

@mohamedamara1 I find myself really needing this these days as Copilot created PRs link the issue to the PR, but don't mention the issue number in the PR description. I'm going to address my own comments. Thank you for pushing for this!

Great, thanks

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

Comment thread src/github/interface.ts Outdated

Comment thread webviews/components/sidebar.tsx Outdated

Comment thread src/github/views.ts Outdated

Comment thread webviews/components/sidebar.tsx Outdated

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

alexr00 reviewed Apr 29, 2026

View reviewed changes

Address PR feedback

a9d529c

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

Copilot AI review requested due to automatic review settings April 29, 2026 12:44

Copilot started reviewing on behalf of alexr00 April 29, 2026 12:44 View session

alexr00 enabled auto-merge (squash) April 29, 2026 12:45

alexr00 approved these changes Apr 29, 2026

View reviewed changes

ulugbekna approved these changes Apr 29, 2026

View reviewed changes

Copilot AI reviewed Apr 29, 2026

View reviewed changes

alexr00 merged commit c9ecbbe into microsoft:main Apr 29, 2026
7 checks passed

alexr00 modified the milestones: May 2025, 1.119.0 Apr 29, 2026

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!

Uh oh!

Uh oh!

Uh oh!

mohamedamara1 commented Jan 20, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexr00 left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexr00 commented Apr 29, 2026

Uh oh!

azure-pipelines Bot commented Apr 29, 2026

Uh oh!

Uh oh!

mohamedamara1 commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mohamedamara1 commented Apr 26, 2025 •

edited

Loading

alexr00 left a comment •

edited

Loading