the closing issues (linked issues) are listed in the UI; only the icons are missing

Author: mohamedamara1

src/github/graphql.ts

@@ -636,8 +636,8 @@ export interface PullRequest extends Issue {
 		nodes: {
 			id: number,
 			title: string,
-			number: number
-
+			number: number,
+			state: 'CLOSED' | 'OPEN'
 		}[];
 	};
 }

src/github/interface.ts

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

src/github/pullRequestModel.ts

@@ -57,7 +57,6 @@ import {
 	IGitTreeItem,
 	IRawFileChange,
 	IRawFileContent,
-	Issue,
 	ISuggestedReviewer,
 	ITeam,
 	MergeMethod,
@@ -122,7 +121,7 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 	public conflicts?: string[];
 	public suggestedReviewers?: ISuggestedReviewer[];
 	public hasChangesSinceLastReview?: boolean;
-	public closingIssues: Pick<Issue, 'id' | 'title' | 'number'>[];
+	public closingIssues: Pick<IssueModel, 'id' | 'title' | 'number' | 'state'>[];
 	private _showChangesSinceReview: boolean;
 	private _hasPendingReview: boolean = false;
 	private _onDidChangePendingReviewState: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
@@ -250,8 +249,10 @@ export class PullRequestModel extends IssueModel<PullRequest> implements IPullRe
 		super.update(item);
 		this.isDraft = item.isDraft;
 		this.suggestedReviewers = item.suggestedReviewers;
-		this.closingIssues = item.closingIssues ?? [];
-
+		this.closingIssues = (item.closingIssues ?? []).map(issue => ({
+			...issue,
+			state: issue.state as GithubItemStateEnum
+		}));
 		if (item.isRemoteHeadDeleted != null) {
 			this.isRemoteHeadDeleted = item.isRemoteHeadDeleted;
 		}

src/github/queries.gql

@@ -209,6 +209,7 @@ fragment PullRequestFragment on PullRequest {
 			id
 			number
 			title
+			state
 		}
 	}
 	merged

src/github/utils.ts

@@ -26,6 +26,7 @@ import { GitHubRepository, ViewerPermission } from './githubRepository';
 import * as GraphQL from './graphql';
 import {
 	AccountType,
+	GithubItemStateEnum,
 	IAccount,
 	IActor,
 	IGitHubRef,
@@ -924,16 +925,17 @@ function parseSuggestedReviewers(
 }
 
 function parseClosingIssuesReferences(
-	closingIssuesReferences: Array<{ id: number, number: number, title: string }> | undefined
-): Array<{ id: number, number: number, title: string }> {
+	closingIssuesReferences: Array<{ id: number, number: number, title: string, state: 'CLOSED' | 'OPEN' }> | undefined
+): Array<{ id: number, number: number, title: string, state: GithubItemStateEnum }> {
 	if (!closingIssuesReferences) {
 		return [];
 	}
 
 	return closingIssuesReferences.map(issue => ({
 		id: issue.id,
 		number: issue.number,
-		title: issue.title
+		title: issue.title,
+		state: issue.state as GithubItemStateEnum
 	}));
 }
 

src/github/views.ts

@@ -96,7 +96,7 @@ export interface PullRequest extends Issue {
 	lastReviewType?: ReviewType;
 	revertable?: boolean;
 	busy?: boolean;
-	closingIssues: Pick<Issue, 'title' | 'number'>[];
+	closingIssues: Pick<Issue, 'title' | 'number' | 'state'>[];
 }
 
 export interface ProjectItemsReply {

webviews/components/sidebar.tsx

@@ -6,7 +6,7 @@
 import React, { useContext } from 'react';
 import { COPILOT_LOGINS } from '../../src/common/copilot';
 import { gitHubLabelColor } from '../../src/common/utils';
-import { IMilestone, IProjectItem, reviewerId } from '../../src/github/interface';
+import { IMilestone, IProjectItem, Issue, reviewerId, } from '../../src/github/interface';
 import { PullRequest } from '../../src/github/views';
 import PullRequestContext from '../common/context';
 import { Label } from '../common/label';
@@ -54,7 +54,7 @@ export default function Sidebar({ reviewers, labels, closingIssues, hasWritePerm
 					</div>
 					{reviewers && reviewers.length ? (
 						reviewers.map(state => (
-							<Reviewer key={reviewerId(state.reviewer)} {...{reviewState: state}} />
+							<Reviewer key={reviewerId(state.reviewer)} {...{ reviewState: state }} />
 						))
 					) : (
 						<div className="section-placeholder">None yet</div>
@@ -199,32 +199,29 @@ export default function Sidebar({ reviewers, labels, closingIssues, hasWritePerm
 				{milestone ? (
 					<Milestone key={milestone.title} {...milestone} canDelete={hasWritePermission} />
 				) : (
-				<>
-					<div className="section-placeholder">No milestoooone</div>
-					<button onClick={() => {
-							console.log('Sidebar props:', { reviewers, labels, closingIssues, hasWritePermission, isIssue, projects, milestone, assignees, canAssignCopilot });
-
-					}}>Click me to test</button>
-				</>
+					<>
+						<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>
+			<div id="closingIssues" className="section">
+				<div className="section-header">
+					<div className="section-title">Linked Issues</div>
 				</div>
-				{closingIssues.length ? (
-					<div className="issues-list">
+				{closingIssues.length > 0 ? (
+					<div className="p-2">
 						{closingIssues.map(issue => (
-							<Issue key={issue.title} {...issue} />
+							<div className="section-item reviewer">
+								<div className="avatar-with-author gap-2">
+									<IssueItem key={issue.title} issue={issue} />
+								</div>
+							</div>
 						))}
 					</div>
 				) : (
-					<div className="section-placeholder">None yet</div>
+					<div className="p-4 text-sm text-gray-500 text-center">None yet</div>
 				)}
-			</div> */}
+			</div>
 		</div>
 	);
 }
@@ -297,13 +294,26 @@ function Project(project: IProjectItem & { canDelete: boolean }) {
 	);
 }
 
-function Issue(issue: any) {
+function IssueItem({ issue }: { issue: Pick<Issue, 'title' | 'number' | 'state'> }) {
 	return (
-		<div className="issues-list">
-			<div className="issue-item">
-				<h1>{issue.title}</h1>
-				{/* Add more details about the issue as needed */}
-			</div>
-		</div>
+		<>
+			<IssueStateIcon state={issue.state} />
+			<span className="h2">{issue.title}</span>
+		</>
+
 	);
 }
+
+function IssueStateIcon({ state }: { state: string }) {
+	const normalizedState = state.toLowerCase().trim();
+
+	switch (normalizedState) {
+		case 'open':
+			return settingsIcon;
+		case 'closed':
+			return closeIcon;
+		default:
+			return closeIcon;
+	}
+}
+