Address PR feedback

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

Author: alexr00

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';
@@ -459,7 +460,13 @@ export class PullRequestOverviewPanel extends IssueOverviewPanel<PullRequestMode
 				revertable: pullRequest.state === GithubItemStateEnum.Merged,
 				isCopilotOnMyBehalf: await isCopilotOnMyBehalf(pullRequest, currentUser, coAuthors),
 				generateDescriptionTitle: this.getGenerateDescriptionTitle(),
-				closingIssues: pullRequest.closingIssues,
+				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/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

webviews/common/common.css

@@ -294,6 +294,27 @@ body img.avatar {
 	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;

webviews/components/icon.tsx

@@ -53,8 +53,6 @@ export const outputIcon = <Icon src={require('../../resources/icons/codicons/out
 export const skipIcon = <Icon src={require('../../resources/icons/codicons/skip.svg')} className='skip' />;
 
 // Other icons
-export const issueIcon = <Icon src={require('../../resources/icons/issue_webview.svg')} />;
-export const issueClosedIcon = <Icon src={require('../../resources/icons/codicons/pass.svg')} />;
 export const copilotErrorIcon = <Icon className='copilot-icon' src={require('../../resources/icons/copilot-error.svg')} />;
 export const copilotInProgressIcon = <Icon className='copilot-icon' src={require('../../resources/icons/copilot-in-progress.svg')} />;
 export const copilotSuccessIcon = <Icon className='copilot-icon' src={require('../../resources/icons/copilot-success.svg')} />;

webviews/components/sidebar.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { closeIcon, copilotIcon, issueClosedIcon, issueIcon, settingsIcon } from './icon';
+import { closeIcon, copilotIcon, issuescon, passIcon, settingsIcon } from './icon';
 import { Reviewer } from './reviewer';
 import { COPILOT_LOGINS } from '../../src/common/copilot';
 import { gitHubLabelColor } from '../../src/common/utils';
@@ -269,21 +269,17 @@ export default function Sidebar({ reviewers, labels, closingIssues, hasWritePerm
 				)}
 			</Section>
 
-			<Section
-				id="closingIssues"
-				title="Linked Issues"
-				hasWritePermission={false}
-			>
-				{closingIssues.length ? (
-					closingIssues.map(issue => (
-						<div key={issue.number} className="section-item">
-							<IssueItem issue={issue} />
-						</div>
-					))
-				) : (
-					<div className="section-placeholder">None yet</div>
-				)}
-			</Section>
+			{closingIssues.length > 0 && (
+				<Section
+					id="closingIssues"
+					title="Linked Issues"
+					hasWritePermission={false}
+				>
+					{closingIssues.map(issue => (
+						<IssueItem key={issue.number} issue={issue} />
+					))}
+				</Section>
+			)}
 		</div>
 	);
 }
@@ -597,12 +593,12 @@ function ConvertToDraft() {
 function IssueItem({ issue }: { issue: IssueReference }) {
 	const isOpen = issue.state === GithubItemStateEnum.Open;
 	return (
-		<div className="avatar-with-author">
+		<a className="issue-item" href={issue.url} title={`#${issue.number} ${issue.title}`}>
 			<span className={`section-icon ${isOpen ? 'issue-open' : 'issue-closed'}`}>
-				{isOpen ? issueIcon : issueClosedIcon}
+				{isOpen ? issuescon : passIcon}
 			</span>
-			<a href={issue.url} title={issue.url}>#{issue.number} {issue.title}</a>
-		</div>
+			<span className="issue-item-text">#{issue.number} {issue.title}</span>
+		</a>
 	);
 }