Adds open in graph action

Author: d13

src/webviews/apps/plus/home/components/active-work.ts

@@ -6,8 +6,10 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 import type { GitTrackingState } from '../../../../../git/models/branch';
 import { createWebviewCommandLink } from '../../../../../system/webview';
-import type { GetOverviewBranch, State } from '../../../../home/protocol';
+import type { GetOverviewBranch, OpenInGraphParams, State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
+import { ipcContext } from '../../../shared/context';
+import type { HostIpc } from '../../../shared/ipc';
 import { branchCardStyles, createCommandLink, headingLoaderStyles } from './branch-section';
 import type { Overview, OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
@@ -51,6 +53,9 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	@consume({ context: overviewStateContext })
 	private _overviewState!: OverviewState;
 
+	@consume({ context: ipcContext })
+	private _ipc!: HostIpc;
+
 	override connectedCallback() {
 		super.connectedCallback();
 
@@ -103,13 +108,15 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				>
 				<span slot="heading-actions"
 					><gl-button
-						hidden
 						aria-busy="${ifDefined(isFetching)}"
 						?disabled=${isFetching}
 						class="section-heading-action"
 						appearance="toolbar"
 						tooltip="Open in Commit Graph"
-						@click=${(_e: MouseEvent) => {}}
+						href=${createCommandLink('gitlens.home.openInGraph', {
+							type: 'repo',
+							repoPath: this._overviewState.state!.repository.path,
+						} satisfies OpenInGraphParams)}
 						><code-icon icon="gl-graph"></code-icon
 					></gl-button>
 					${when(

src/webviews/apps/plus/home/components/branch-section.ts

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import type { Commands } from '../../../../../constants.commands';
 import type { GitTrackingState } from '../../../../../git/models/branch';
-import type { GetOverviewBranch } from '../../../../home/protocol';
+import type { GetOverviewBranch, OpenInGraphParams } from '../../../../home/protocol';
 import { srOnlyStyles } from '../../../shared/components/styles/lit/a11y.css';
 import '../../../shared/components/code-icon';
 import '../../../shared/components/avatar/avatar';
@@ -370,6 +370,16 @@ export class GlBranchCard extends LitElement {
 				href=${this.createCommandLink('gitlens.home.fetch')}
 			></action-item>`,
 		);
+		actions.push(
+			html`<action-item
+				label="Open in Commit Graph"
+				icon="gl-graph"
+				href=${createCommandLink('gitlens.home.openInGraph', {
+					...this.branchRefs,
+					type: 'branch',
+				} satisfies OpenInGraphParams)}
+			></action-item>`,
+		);
 
 		if (!actions.length) {
 			return nothing;

src/webviews/home/homeWebview.ts

@@ -24,6 +24,7 @@ import { getOpenedWorktreesByBranch, groupWorktreesByBranch } from '../../git/mo
 import type { Subscription } from '../../plus/gk/account/subscription';
 import type { SubscriptionChangeEvent } from '../../plus/gk/account/subscriptionService';
 import { getLaunchpadSummary } from '../../plus/launchpad/utils';
+import type { ShowInCommitGraphCommandArgs } from '../../plus/webviews/graph/protocol';
 import { showRepositoryPicker } from '../../quickpicks/repositoryPicker';
 import type { Deferrable } from '../../system/function';
 import { debounce } from '../../system/function';
@@ -42,6 +43,7 @@ import type {
 	GetOverviewBranch,
 	GetOverviewBranches,
 	GetOverviewResponse,
+	OpenInGraphParams,
 	OverviewFilters,
 	OverviewRecentThreshold,
 	OverviewStaleThreshold,
@@ -64,6 +66,7 @@ import {
 	GetLaunchpadSummary,
 	GetOverview,
 	GetOverviewFilterState,
+	OpenInGraphCommand,
 	SetOverviewFilter,
 	TogglePreviewEnabledCommand,
 } from './protocol';
@@ -268,6 +271,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			registerCommand('gitlens.home.openWorktree', this.worktreeOpen, this),
 			registerCommand('gitlens.home.switchToBranch', this.switchToBranch, this),
 			registerCommand('gitlens.home.fetch', this.fetch, this),
+			registerCommand('gitlens.home.openInGraph', this.openInGraph, this),
 		];
 	}
 
@@ -303,6 +307,9 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			case TogglePreviewEnabledCommand.is(e):
 				this.onTogglePreviewEnabled();
 				break;
+			case OpenInGraphCommand.is(e):
+				this.openInGraph(e.params);
+				break;
 		}
 	}
 
@@ -339,6 +346,31 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		this.notifyDidChangeRepositories(true);
 	}
 
+	private openInGraph(params: OpenInGraphParams) {
+		if (params?.type === 'branch') {
+			const repo = this._repositoryBranches.get(params.repoPath);
+			if (repo == null) return;
+
+			const branch = repo.branches.find(b => b.id === params.branchId);
+			if (branch == null) return;
+
+			const ref = getReferenceFromBranch(branch);
+			if (ref == null) return;
+			void executeCommand<ShowInCommitGraphCommandArgs>(Commands.ShowInCommitGraph, { ref: ref });
+			return;
+		}
+
+		let repo: Repository | undefined;
+		if (params == null) {
+			repo = this.getSelectedRepository();
+		} else {
+			const repoBranches = this._repositoryBranches.get(params.repoPath);
+			repo = repoBranches?.repo;
+		}
+		if (repo == null) return;
+		void executeCommand(Commands.ShowGraph, repo);
+	}
+
 	private onTogglePreviewEnabled(isEnabled?: boolean) {
 		if (isEnabled === undefined) {
 			isEnabled = !this.getPreviewEnabled();

src/webviews/home/protocol.ts

@@ -141,6 +141,12 @@ export const DismissWalkthroughSection = new IpcCommand<void>(scope, 'walkthroug
 
 export const SetOverviewFilter = new IpcCommand<OverviewFilters>(scope, 'overview/filter/set');
 
+export type OpenInGraphParams =
+	| { type: 'repo'; repoPath: string }
+	| { type: 'branch'; repoPath: string; branchId: string }
+	| undefined;
+export const OpenInGraphCommand = new IpcCommand<OpenInGraphParams>(scope, 'openInGraph');
+
 // NOTIFICATIONS
 
 export interface DidCompleteDiscoveringRepositoriesParams {