Adds PR info to the Graph header

Fixes missing repo from Graph header

src/plus/webviews/graph/graphWebview.ts

@@ -41,7 +41,7 @@ import type { GitCommit } from '../../../git/models/commit';
 import { uncommitted } from '../../../git/models/constants';
 import { GitContributor } from '../../../git/models/contributor';
 import type { GitGraph, GitGraphRowType } from '../../../git/models/graph';
-import { getComparisonRefsForPullRequest } from '../../../git/models/pullRequest';
+import { getComparisonRefsForPullRequest, serializePullRequest } from '../../../git/models/pullRequest';
 import type {
 	GitBranchReference,
 	GitReference,
@@ -126,6 +126,7 @@ import type {
 	GraphUpstreamMetadata,
 	GraphUpstreamStatusContextValue,
 	GraphWorkingTreeStats,
+	OpenPullRequestDetailsParams,
 	SearchOpenInViewParams,
 	SearchParams,
 	State,
@@ -157,6 +158,7 @@ import {
 	GetMissingAvatarsCommand,
 	GetMissingRefsMetadataCommand,
 	GetMoreRowsCommand,
+	OpenPullRequestDetailsCommand,
 	SearchOpenInViewCommand,
 	SearchRequest,
 	supportedRefMetadataTypes,
@@ -632,6 +634,9 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			case GetMoreRowsCommand.is(e):
 				void this.onGetMoreRows(e.params);
 				break;
+			case OpenPullRequestDetailsCommand.is(e):
+				void this.onOpenPullRequestDetails(e.params);
+				break;
 			case SearchRequest.is(e):
 				void this.onSearchRequest(SearchRequest, e);
 				break;
@@ -1092,6 +1097,21 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		void this.notifyDidChangeRows(sendSelectedRows);
 	}
 
+	@log()
+	async onOpenPullRequestDetails(_params: OpenPullRequestDetailsParams) {
+		// TODO: a hack for now, since we aren't using the params at all right now and always opening the current branch's PR
+		const repo = this.repository;
+		if (repo == null) return undefined;
+
+		const branch = await repo.getBranch();
+		if (branch == null) return undefined;
+
+		const pr = await branch.getAssociatedPullRequest();
+		if (pr == null) return undefined;
+
+		return this.container.pullRequestView.showPullRequest(pr, branch);
+	}
+
 	@debug()
 	private async onSearchRequest<T extends typeof SearchRequest>(requestType: T, msg: IpcCallMessageType<T>) {
 		try {
@@ -2004,14 +2024,24 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			if (branch.upstream != null) {
 				branchState.upstream = branch.upstream.name;
 
-				const remote = await branch.getRemote();
+				const [remoteResult, prResult] = await Promise.allSettled([
+					branch.getRemote(),
+					branch.getAssociatedPullRequest(),
+				]);
+
+				const remote = getSettledValue(remoteResult);
 				if (remote?.provider != null) {
 					branchState.provider = {
 						name: remote.provider.name,
 						icon: remote.provider.icon === 'remote' ? 'cloud' : remote.provider.icon,
 						url: remote.provider.url({ type: RemoteResourceType.Repo }),
 					};
 				}
+
+				const pr = getSettledValue(prResult);
+				if (pr != null) {
+					branchState.pr = serializePullRequest(pr);
+				}
 			}
 		}
 

src/plus/webviews/graph/protocol.ts

@@ -26,7 +26,7 @@ import type { Config, DateStyle } from '../../../config';
 import type { RepositoryVisibility } from '../../../git/gitProvider';
 import type { GitTrackingState } from '../../../git/models/branch';
 import type { GitGraphRowType } from '../../../git/models/graph';
-import type { PullRequestRefs } from '../../../git/models/pullRequest';
+import type { PullRequestRefs, PullRequestShape } from '../../../git/models/pullRequest';
 import type {
 	GitBranchReference,
 	GitReference,
@@ -131,6 +131,7 @@ export interface BranchState extends GitTrackingState {
 		icon?: string;
 		url?: string;
 	};
+	pr?: PullRequestShape;
 }
 
 export type GraphWorkingTreeStats = WorkDirStats;
@@ -243,6 +244,14 @@ export interface GetMoreRowsParams {
 }
 export const GetMoreRowsCommand = new IpcCommand<GetMoreRowsParams>(scope, 'rows/get');
 
+export interface OpenPullRequestDetailsParams {
+	id?: string;
+}
+export const OpenPullRequestDetailsCommand = new IpcCommand<OpenPullRequestDetailsParams>(
+	scope,
+	'pullRequest/openDetails',
+);
+
 export interface SearchOpenInViewParams {
 	search: SearchQuery;
 }

src/webviews/apps/commitDetails/components/commit-details-app.ts

@@ -42,6 +42,7 @@ import {
 } from '../../../commitDetails/protocol';
 import type { IpcMessage } from '../../../protocol';
 import { ExecuteCommand } from '../../../protocol';
+import type { IssuePullRequest } from '../../shared/components/rich/issue-pull-request';
 import type { WebviewPane, WebviewPaneExpandedChangeEventDetail } from '../../shared/components/webview-pane';
 import type { Disposable } from '../../shared/dom';
 import { DOM } from '../../shared/dom';
@@ -59,7 +60,6 @@ import './gl-commit-details';
 import './gl-wip-details';
 import './gl-inspect-nav';
 import './gl-status-nav';
-import type { IssuePullRequest } from '../../shared/components/rich/issue-pull-request';
 
 export const uncommittedSha = '0000000000000000000000000000000000000000';
 

src/webviews/apps/commitDetails/components/gl-commit-details.ts

@@ -268,7 +268,7 @@ export class GlCommitDetails extends GlDetailsBase {
 															type="autolink"
 															name="${name}"
 															url="${autolink.url}"
-															key="${autolink.prefix}${autolink.id}"
+															identifier="${autolink.prefix}${autolink.id}"
 															status=""
 														></issue-pull-request>
 													`;
@@ -289,9 +289,9 @@ export class GlCommitDetails extends GlDetailsBase {
 																type="pr"
 																name="${pr.title}"
 																url="${pr.url}"
-																key="#${pr.id}"
+																identifier="#${pr.id}"
 																status="${pr.state}"
-																date=${pr.updatedDate}
+																.date=${pr.updatedDate}
 																.dateFormat="${this.state!.preferences.dateFormat}"
 																.dateStyle="${this.state!.preferences.dateStyle}"
 															></issue-pull-request>
@@ -310,11 +310,9 @@ export class GlCommitDetails extends GlDetailsBase {
 															type="issue"
 															name="${issue.title}"
 															url="${issue.url}"
-															key="${issue.id}"
+															identifier="${issue.id}"
 															status="${issue.state}"
-															date="${issue.closed
-																? issue.closedDate
-																: issue.createdDate}"
+															.date=${issue.closed ? issue.closedDate : issue.createdDate}
 															.dateFormat="${this.state!.preferences.dateFormat}"
 															.dateStyle="${this.state!.preferences.dateStyle}"
 														></issue-pull-request>

src/webviews/apps/commitDetails/components/gl-status-nav.ts

@@ -105,7 +105,7 @@ export class GlStatusNav extends LitElement {
 									type="pr"
 									name="${this.wip!.pullRequest!.title}"
 									url="${this.wip!.pullRequest!.url}"
-									key="#${this.wip!.pullRequest!.id}"
+									identifier="#${this.wip!.pullRequest!.id}"
 									status="${this.wip!.pullRequest!.state}"
 									.date=${this.wip!.pullRequest!.updatedDate}
 									.dateFormat="${this.preferences?.dateFormat}"

src/webviews/apps/commitDetails/components/gl-wip-details.ts

@@ -271,7 +271,7 @@ export class GlWipDetails extends GlDetailsBase {
 						type="pr"
 						name="${this.wip.pullRequest.title}"
 						url="${this.wip.pullRequest.url}"
-						key="#${this.wip.pullRequest.id}"
+						identifier="#${this.wip.pullRequest.id}"
 						status="${this.wip.pullRequest.state}"
 						.date=${this.wip.pullRequest.updatedDate}
 						.dateFormat="${this.preferences?.dateFormat}"

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -62,9 +62,11 @@ import type { IpcNotification } from '../../../protocol';
 import { DidChangeHostWindowFocusNotification } from '../../../protocol';
 import { MenuDivider, MenuItem, MenuLabel, MenuList } from '../../shared/components/menu/react';
 import { PopMenu } from '../../shared/components/overlays/pop-menu/react';
-import { GlTooltip } from '../../shared/components/overlays/react';
+import { GlPopover } from '../../shared/components/overlays/popover.react';
+import { GlTooltip } from '../../shared/components/overlays/tooltip.react';
 import { GlFeatureBadge } from '../../shared/components/react/feature-badge';
 import { GlFeatureGate } from '../../shared/components/react/feature-gate';
+import { GlIssuePullRequest } from '../../shared/components/react/issue-pull-request';
 import { GlSearchBox } from '../../shared/components/search/react';
 import type { SearchNavigationEventDetail } from '../../shared/components/search/search-box';
 import type { DateTimeFormat } from '../../shared/date';
@@ -84,6 +86,7 @@ export interface GraphWrapperProps {
 	onMissingAvatars?: (emails: Record<string, string>) => void;
 	onMissingRefsMetadata?: (metadata: GraphMissingRefsMetadata) => void;
 	onMoreRows?: (id?: string) => void;
+	onOpenPullRequest?: (pr: NonNullable<NonNullable<State['branchState']>['pr']>) => void;
 	onRefsVisibilityChange?: (refs: GraphExcludedRef[], visible: boolean) => void;
 	onSearch?: (search: SearchQuery | undefined, options?: { limit?: number }) => void;
 	onSearchPromise?: (
@@ -207,6 +210,7 @@ export function GraphWrapper({
 	onMissingAvatars,
 	onMissingRefsMetadata,
 	onMoreRows,
+	onOpenPullRequest,
 	onRefsVisibilityChange,
 	onSearch,
 	onSearchPromise,
@@ -1058,7 +1062,6 @@ export function GraphWrapper({
 						<button
 							type="button"
 							className="action-button"
-							slot="trigger"
 							aria-label="Switch to Another Repository..."
 							disabled={repos.length < 2}
 							onClick={() => handleChooseRepository()}
@@ -1078,32 +1081,66 @@ export function GraphWrapper({
 							<span>
 								<span className="codicon codicon-chevron-right"></span>
 							</span>
-							<GlTooltip placement="bottom">
+							{branchState?.pr && (
+								<GlPopover placement="bottom">
+									<button slot="anchor" type="button" className="action-button">
+										<GlIssuePullRequest
+											type="pr"
+											identifier={`#${branchState.pr.id}`}
+											status={branchState.pr.state}
+											compact
+										/>
+									</button>
+									<div slot="content">
+										<GlIssuePullRequest
+											type="pr"
+											name={branchState.pr.title}
+											url={branchState.pr.url}
+											identifier={`#${branchState.pr.id}`}
+											status={branchState.pr.state}
+											date={branchState.pr.updatedDate}
+											dateFormat={graphConfig?.dateFormat}
+											dateStyle={graphConfig?.dateStyle}
+											details
+											onOpenDetails={() =>
+												branchState.pr?.id ? onOpenPullRequest?.(branchState.pr) : undefined
+											}
+										/>
+									</div>
+								</GlPopover>
+							)}
+							<GlPopover placement="bottom">
 								<a
+									slot="anchor"
 									href={createWebviewCommandLink(
 										'gitlens.graph.switchToAnotherBranch',
 										state.webviewId,
 										state.webviewInstanceId,
 									)}
 									className="action-button"
+									style={branchState?.pr ? { marginLeft: '-0.6rem' } : {}}
 									aria-label="Switch to Another Branch..."
 								>
-									<span className="codicon codicon-git-branch" aria-hidden="true"></span>
+									{!branchState?.pr ? (
+										<span className="codicon codicon-git-branch" aria-hidden="true"></span>
+									) : (
+										''
+									)}
 									{branchName}
 									<span
 										className="codicon codicon-chevron-down action-button__more"
 										aria-hidden="true"
 									></span>
 								</a>
 								<div slot="content">
-									<span style={{ whiteSpace: 'preserve' }}>
+									<span>
 										Switch to Another Branch...
 										<hr />
 										<span className="codicon codicon-git-branch" aria-hidden="true"></span>{' '}
 										<span className="md-code">{branchName}</span>
 									</span>
 								</div>
-							</GlTooltip>
+							</GlPopover>
 							<span>
 								<span className="codicon codicon-chevron-right"></span>
 							</span>

src/webviews/apps/plus/graph/graph.tsx

@@ -38,6 +38,7 @@ import {
 	GetMissingAvatarsCommand,
 	GetMissingRefsMetadataCommand,
 	GetMoreRowsCommand,
+	OpenPullRequestDetailsCommand,
 	SearchOpenInViewCommand,
 	SearchRequest,
 	UpdateColumnsCommand,
@@ -108,6 +109,7 @@ export class GraphApp extends App<State> {
 					onMissingAvatars={(...params) => this.onGetMissingAvatars(...params)}
 					onMissingRefsMetadata={(...params) => this.onGetMissingRefsMetadata(...params)}
 					onMoreRows={(...params) => this.onGetMoreRows(...params)}
+					onOpenPullRequest={(...params) => this.onOpenPullRequest(...params)}
 					onSearch={debounce<GraphApp['onSearch']>((search, options) => this.onSearch(search, options), 250)}
 					onSearchPromise={(...params) => this.onSearchPromise(...params)}
 					onSearchOpenInView={(...params) => this.onSearchOpenInView(...params)}
@@ -561,6 +563,10 @@ export class GraphApp extends App<State> {
 		this.sendCommand(GetMoreRowsCommand, { id: sha });
 	}
 
+	onOpenPullRequest(pr: NonNullable<NonNullable<State['branchState']>['pr']>): void {
+		this.sendCommand(OpenPullRequestDetailsCommand, { id: pr.id });
+	}
+
 	private async onSearch(search: SearchQuery | undefined, options?: { limit?: number }) {
 		if (search == null) {
 			this.state.searchResults = undefined;

src/webviews/apps/shared/components/overlays/popover.react.tsx

@@ -0,0 +1,5 @@
+import { reactWrapper } from '../helpers/react-wrapper';
+import { GlPopover as GlPopoverWC } from './popover';
+
+export interface GlPopover extends GlPopoverWC {}
+export const GlPopover = reactWrapper(GlPopoverWC, { tagName: 'gl-popover' });

src/webviews/apps/shared/components/react/issue-pull-request.tsx

@@ -0,0 +1,12 @@
+import type { EventName } from '@lit/react';
+import type { CustomEventType } from '../element';
+import { reactWrapper } from '../helpers/react-wrapper';
+import { IssuePullRequest as IssuePullRequestWC } from '../rich/issue-pull-request';
+
+export interface GlIssuePullRequest extends IssuePullRequestWC {}
+export const GlIssuePullRequest = reactWrapper(IssuePullRequestWC, {
+	tagName: 'issue-pull-request',
+	events: {
+		onOpenDetails: 'gl-issue-pull-request-details' as EventName<CustomEventType<'gl-issue-pull-request-details'>>,
+	},
+});