Adds open in graph action to Focus view branches

src/plus/webviews/focus/focusWebview.ts

@@ -28,8 +28,14 @@ import type { IpcMessage } from '../../../webviews/protocol';
 import { onIpc } from '../../../webviews/protocol';
 import type { WebviewController, WebviewProvider } from '../../../webviews/webviewController';
 import type { SubscriptionChangeEvent } from '../../subscription/subscriptionService';
-import type { OpenWorktreeParams, State, SwitchToBranchParams } from './protocol';
-import { DidChangeNotificationType, OpenWorktreeCommandType, SwitchToBranchCommandType } from './protocol';
+import type { ShowInCommitGraphCommandArgs } from '../graph/protocol';
+import type { OpenBranchParams, OpenWorktreeParams, State, SwitchToBranchParams } from './protocol';
+import {
+	DidChangeNotificationType,
+	OpenBranchCommandType,
+	OpenWorktreeCommandType,
+	SwitchToBranchCommandType,
+} from './protocol';
 
 interface RepoWithRichRemote {
 	repo: Repository;
@@ -75,6 +81,9 @@ export class FocusWebviewProvider implements WebviewProvider {
 
 	onMessageReceived(e: IpcMessage) {
 		switch (e.method) {
+			case OpenBranchCommandType.method:
+				onIpc(OpenBranchCommandType, e, params => this.onOpenBranch(params));
+				break;
 			case SwitchToBranchCommandType.method:
 				onIpc(SwitchToBranchCommandType, e, params => this.onSwitchBranch(params));
 				break;
@@ -158,6 +167,21 @@ export class FocusWebviewProvider implements WebviewProvider {
 		};
 	}
 
+	private async onOpenBranch({ pullRequest }: OpenBranchParams) {
+		const prWithRemote = this.findSearchedPullRequest(pullRequest);
+		if (prWithRemote == null) return;
+
+		const remoteBranch = await this.getRemoteBranch(prWithRemote);
+		if (remoteBranch == null) {
+			void window.showErrorMessage(
+				`Unable to find remote branch for '${prWithRemote.pullRequest.refs?.head.owner}:${prWithRemote.pullRequest.refs?.head.branch}'`,
+			);
+			return;
+		}
+
+		void executeCommand<ShowInCommitGraphCommandArgs>(Commands.ShowInCommitGraph, { ref: remoteBranch.reference });
+	}
+
 	private async onSwitchBranch({ pullRequest }: SwitchToBranchParams) {
 		const prWithRemote = this.findSearchedPullRequest(pullRequest);
 		if (prWithRemote == null || prWithRemote.isCurrentBranch) return;

src/plus/webviews/focus/protocol.ts

@@ -41,6 +41,11 @@ export interface OpenWorktreeParams {
 }
 export const OpenWorktreeCommandType = new IpcCommandType<OpenWorktreeParams>('focus/pr/openWorktree');
 
+export interface OpenBranchParams {
+	pullRequest: PullRequestShape;
+}
+export const OpenBranchCommandType = new IpcCommandType<OpenBranchParams>('focus/pr/openBranch');
+
 export interface SwitchToBranchParams {
 	pullRequest: PullRequestShape;
 }

src/webviews/apps/plus/focus/components/branch-tag.css.ts

@@ -15,5 +15,6 @@ export const repoBranchStyles = css`
 	}
 
 	.repo-branch__tag {
+		cursor: pointer;
 	}
 `;

src/webviews/apps/plus/focus/components/gk-pull-request-row.ts

@@ -246,7 +246,7 @@ export class GkPullRequestRow extends LitElement {
 						<gk-date-from class="${this.dateStyle}" date="${this.lastUpdatedDate}"></gk-date-from>
 					</span>
 					<div slot="repo" class="repo-branch">
-						<gk-tag class="repo-branch__tag" full>
+						<gk-tag class="repo-branch__tag" full @click=${this.onOpenBranchClick}>
 							<span slot="prefix"><code-icon icon="source-control"></code-icon></span>
 							${this.pullRequest.refs?.isCrossRepository === true
 								? html`${this.pullRequest.refs?.head.owner}:${this.pullRequest.refs?.head.branch}`
@@ -287,6 +287,10 @@ export class GkPullRequestRow extends LitElement {
 		`;
 	}
 
+	onOpenBranchClick(_e: Event) {
+		this.dispatchEvent(new CustomEvent('open-branch', { detail: this.pullRequest! }));
+	}
+
 	onOpenWorktreeClick(e: Event) {
 		if (this.isCurrentWorktree) {
 			e.preventDefault();

src/webviews/apps/plus/focus/focus.ts

@@ -2,6 +2,7 @@ import type { PullRequestShape } from '../../../../git/models/pullRequest';
 import type { State } from '../../../../plus/webviews/focus/protocol';
 import {
 	DidChangeNotificationType,
+	OpenBranchCommandType,
 	OpenWorktreeCommandType,
 	SwitchToBranchCommandType,
 } from '../../../../plus/webviews/focus/protocol';
@@ -32,6 +33,9 @@ export class FocusApp extends App {
 				'open-worktree',
 				(e, target: HTMLElement) => this.onOpenWorktree(e, target),
 			),
+			DOM.on<GkPullRequestRow, PullRequestShape>('gk-pull-request-row', 'open-branch', (e, target: HTMLElement) =>
+				this.onOpenBranch(e, target),
+			),
 			DOM.on<GkPullRequestRow, PullRequestShape>(
 				'gk-pull-request-row',
 				'switch-branch',
@@ -54,6 +58,11 @@ export class FocusApp extends App {
 		this.component.state = this.state;
 	}
 
+	private onOpenBranch(e: CustomEvent<PullRequestShape>, _target: HTMLElement) {
+		if (e.detail?.refs?.head == null) return;
+		this.sendCommand(OpenBranchCommandType, { pullRequest: e.detail });
+	}
+
 	private onSwitchBranch(e: CustomEvent<PullRequestShape>, _target: HTMLElement) {
 		if (e.detail?.refs?.head == null) return;
 		this.sendCommand(SwitchToBranchCommandType, { pullRequest: e.detail });