Adds a jump to ref button to the graph

Author: eamodio

src/git/models/reference.ts

@@ -104,6 +104,7 @@ export interface GitBranchReference {
 	id?: string;
 	name: string;
 	ref: string;
+	sha?: string;
 	readonly remote: boolean;
 	readonly upstream?: { name: string; missing: boolean };
 	repoPath: string;
@@ -114,6 +115,7 @@ export interface GitRevisionReference {
 	id?: undefined;
 	name: string;
 	ref: string;
+	sha: string;
 	repoPath: string;
 
 	number?: string | undefined;
@@ -125,6 +127,7 @@ export interface GitStashReference {
 	id?: undefined;
 	name: string;
 	ref: string;
+	sha: string;
 	repoPath: string;
 	number: string;
 
@@ -137,6 +140,7 @@ export interface GitTagReference {
 	id?: string;
 	name: string;
 	ref: string;
+	sha?: string;
 	repoPath: string;
 }
 
@@ -199,6 +203,7 @@ export function createReference(
 				refType: 'stash',
 				repoPath: repoPath,
 				ref: ref,
+				sha: ref,
 				name: options.name,
 				number: options.number,
 				message: options.message,
@@ -217,6 +222,7 @@ export function createReference(
 				refType: 'revision',
 				repoPath: repoPath,
 				ref: ref,
+				sha: ref,
 				name: options.name ?? shortenRevision(ref, { force: true, strings: { working: 'Working Tree' } }),
 				message: options.message,
 			};

src/plus/webviews/graph/graphWebview.ts

@@ -70,6 +70,7 @@ import {
 } from '../../../git/models/repository';
 import type { GitSearch } from '../../../git/search';
 import { getSearchQueryComparisonKey } from '../../../git/search';
+import { ReferencesQuickPickIncludes, showReferencePicker } from '../../../quickpicks/referencePicker';
 import { showRepositoryPicker } from '../../../quickpicks/repositoryPicker';
 import { executeActionCommand, executeCommand, executeCoreCommand, registerCommand } from '../../../system/command';
 import { configuration } from '../../../system/configuration';
@@ -141,6 +142,7 @@ import type {
 	UpdateSelectionParams,
 } from './protocol';
 import {
+	ChooseRefRequest,
 	ChooseRepositoryCommand,
 	DidChangeAvatarsNotification,
 	DidChangeColumnsNotification,
@@ -628,6 +630,9 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			case ChooseRepositoryCommand.is(e):
 				void this.onChooseRepository();
 				break;
+			case ChooseRefRequest.is(e):
+				void this.onChooseRef(ChooseRefRequest, e);
+				break;
 			case DoubleClickedCommandType.is(e):
 				void this.onDoubleClick(e.params);
 				break;
@@ -1410,6 +1415,33 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		this.repository = pick;
 	}
 
+	async onChooseRef<T extends typeof ChooseRefRequest>(requestType: T, msg: IpcCallMessageType<T>) {
+		if (this.repository == null) {
+			return this.host.respond(requestType, msg, undefined);
+		}
+
+		let pick;
+		// If not alt, then jump directly to HEAD
+		if (!msg.params.alt) {
+			let branch = find(this._graph!.branches.values(), b => b.current);
+			if (branch == null) {
+				branch = await this.repository.getBranch();
+			}
+			if (branch != null) {
+				pick = branch;
+			}
+		} else {
+			pick = await showReferencePicker(
+				this.repository.path,
+				`Jump to Reference ${GlyphChars.Dot} ${this.repository?.name}`,
+				'Choose a reference to jump to',
+				{ include: ReferencesQuickPickIncludes.BranchesAndTags },
+			);
+		}
+
+		return this.host.respond(requestType, msg, pick?.sha != null ? { name: pick.name, sha: pick.sha } : undefined);
+	}
+
 	private _fireSelectionChangedDebounced: Deferrable<GraphWebviewProvider['fireSelectionChanged']> | undefined =
 		undefined;
 

src/plus/webviews/graph/protocol.ts

@@ -219,6 +219,12 @@ export type UpdateStateCallback = (
 
 export const ChooseRepositoryCommand = new IpcCommand(scope, 'chooseRepository');
 
+export interface ChooseRefParams {
+	alt: boolean;
+}
+export type DidChooseRefParams = { name: string; sha: string } | undefined;
+export const ChooseRefRequest = new IpcRequest<ChooseRefParams, DidChooseRefParams>(scope, 'chooseRef');
+
 export type DoubleClickedParams =
 	| {
 			type: 'ref';

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

@@ -14,7 +14,7 @@ import type {
 } from '@gitkraken/gitkraken-components';
 import GraphContainer, { CommitDateTimeSources, refZone } from '@gitkraken/gitkraken-components';
 import { VSCodeCheckbox, VSCodeRadio, VSCodeRadioGroup } from '@vscode/webview-ui-toolkit/react';
-import type { FormEvent, ReactElement } from 'react';
+import type { FormEvent, MouseEvent, ReactElement } from 'react';
 import React, { createElement, useEffect, useMemo, useRef, useState } from 'react';
 import { getPlatform } from '@env/platform';
 import type { DateStyle } from '../../../../config';
@@ -62,6 +62,8 @@ import { pluralize } from '../../../../system/string';
 import { createWebviewCommandLink } from '../../../../system/webview';
 import type { IpcNotification } from '../../../protocol';
 import { DidChangeHostWindowFocusNotification } from '../../../protocol';
+import { GlButton } from '../../shared/components/button.react';
+import { CodeIcon } from '../../shared/components/code-icon.react';
 import { MenuDivider, MenuItem, MenuLabel, MenuList } from '../../shared/components/menu/react';
 import { PopMenu } from '../../shared/components/overlays/pop-menu/react';
 import { GlPopover } from '../../shared/components/overlays/popover.react';
@@ -86,6 +88,7 @@ export interface GraphWrapperProps {
 	onDoubleClickRef?: (ref: GraphRef, metadata?: GraphRefMetadataItem) => void;
 	onDoubleClickRow?: (row: GraphRow, preserveFocus?: boolean) => void;
 	onHoverRowPromise?: (row: GraphRow) => Promise<DidGetRowHoverParams | undefined>;
+	onJumpToRefPromise?: (alt: boolean) => Promise<{ name: string; sha: string } | undefined>;
 	onMissingAvatars?: (emails: Record<string, string>) => void;
 	onMissingRefsMetadata?: (metadata: GraphMissingRefsMetadata) => void;
 	onMoreRows?: (id?: string) => void;
@@ -210,6 +213,7 @@ export function GraphWrapper({
 	onDoubleClickRow,
 	onEnsureRowPromise,
 	onHoverRowPromise,
+	onJumpToRefPromise,
 	onMissingAvatars,
 	onMissingRefsMetadata,
 	onMoreRows,
@@ -702,6 +706,16 @@ export function GraphWrapper({
 		onChooseRepository?.();
 	};
 
+	const handleJumpToRef = async (e: MouseEvent) => {
+		const ref = await onJumpToRefPromise?.(e.altKey);
+		if (ref != null) {
+			const sha = await ensureSearchResultRow(ref.sha);
+			if (sha == null) return;
+
+			queueMicrotask(() => graphRef.current?.selectCommits([sha], false, true));
+		}
+	};
+
 	const handleFilterChange = (e: Event | FormEvent<HTMLElement>) => {
 		const $el = e.target as HTMLInputElement;
 
@@ -1202,6 +1216,14 @@ export function GraphWrapper({
 										</span>
 									</div>
 								</GlPopover>
+								<GlButton appearance="toolbar" onClick={handleJumpToRef}>
+									<CodeIcon icon="target"></CodeIcon>
+									<span slot="tooltip">
+										Jump to HEAD
+										<br />
+										[Alt] Jump to Reference...
+									</span>
+								</GlButton>
 								<span>
 									<span className="codicon codicon-chevron-right"></span>
 								</span>

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

@@ -18,6 +18,7 @@ import type {
 	UpdateStateCallback,
 } from '../../../../plus/webviews/graph/protocol';
 import {
+	ChooseRefRequest,
 	ChooseRepositoryCommand,
 	DidChangeAvatarsNotification,
 	DidChangeColumnsNotification,
@@ -106,6 +107,7 @@ export class GraphApp extends App<State> {
 					onDoubleClickRef={(ref, metadata) => this.onDoubleClickRef(ref, metadata)}
 					onDoubleClickRow={(row, preserveFocus) => this.onDoubleClickRow(row, preserveFocus)}
 					onHoverRowPromise={(row: GraphRow) => this.onHoverRowPromise(row)}
+					onJumpToRefPromise={(shift: boolean) => this.onJumpToRefPromise(shift)}
 					onMissingAvatars={(...params) => this.onGetMissingAvatars(...params)}
 					onMissingRefsMetadata={(...params) => this.onGetMissingRefsMetadata(...params)}
 					onMoreRows={(...params) => this.onGetMoreRows(...params)}
@@ -557,6 +559,16 @@ export class GraphApp extends App<State> {
 		}
 	}
 
+	private async onJumpToRefPromise(alt: boolean): Promise<{ name: string; sha: string } | undefined> {
+		try {
+			// Assuming we have a command to get the ref details
+			const rsp = await this.sendRequest(ChooseRefRequest, { alt: alt });
+			return rsp;
+		} catch {
+			return undefined;
+		}
+	}
+
 	private onGetMissingAvatars(emails: GraphAvatars) {
 		this.sendCommand(GetMissingAvatarsCommand, { emails: emails });
 	}

src/webviews/apps/shared/components/button.react.tsx

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

src/webviews/apps/shared/components/button.ts

@@ -159,8 +159,8 @@ export class GlButton extends LitElement {
 	@query('.control')
 	protected control!: HTMLElement;
 
-	@property()
-	appearance?: string;
+	@property({ reflect: true })
+	appearance?: 'alert' | 'secondary' | 'toolbar';
 
 	@property({ type: Boolean, reflect: true })
 	disabled = false;

src/webviews/apps/shared/components/code-icon.react.tsx

@@ -0,0 +1,5 @@
+import { CodeIcon as CodeIconWC } from './code-icon';
+import { reactWrapper } from './helpers/react-wrapper';
+
+export interface CodeIcon extends CodeIconWC {}
+export const CodeIcon = reactWrapper(CodeIconWC, { tagName: 'code-icon' });

src/webviews/apps/shared/components/code-icon.ts

@@ -644,19 +644,19 @@ export class CodeIcon extends LitElement {
 			transform: rotateZ(45deg);
 		}
 	`;
-	@property()
+	@property({ reflect: true })
 	icon = '';
 
-	@property()
+	@property({ reflect: true })
 	modifier = '';
 
 	@property({ type: Number })
 	size: number | undefined = undefined;
 
-	@property()
+	@property({ reflect: true })
 	flip?: 'inline' | 'block';
 
-	@property()
+	@property({ reflect: true })
 	rotate?: '45';
 
 	override updated(changedProperties: Map<string, unknown>) {