Graph: double-click on a ref to check it out (similar to GKC) (#2258)

* Graph: double-click on a ref to check it out (similar to GKC)

* Renamed command type and function as requested in PR

* Removed cast to any

src/plus/webviews/graph/graphWebview.ts

@@ -1,3 +1,5 @@
+import type { Head } from '@gitkraken/gitkraken-components';
+import { stringify } from 'json5';
 import type {
 	ColorTheme,
 	ConfigurationChangeEvent,
@@ -81,6 +83,7 @@ import type { SubscriptionChangeEvent } from '../../subscription/subscriptionSer
 import { arePlusFeaturesEnabled, ensurePlusFeaturesEnabled } from '../../subscription/utils';
 import type {
 	DismissBannerParams,
+	DoubleClickedRefParams,
 	EnsureRowParams,
 	GetMissingAvatarsParams,
 	GetMissingRefsMetadataParams,
@@ -104,7 +107,7 @@ import type {
 	UpdateColumnParams,
 	UpdateRefsVisibilityParams,
 	UpdateSelectedRepositoryParams,
-	UpdateSelectionParams,
+	UpdateSelectionParams
 } from './protocol';
 import {
 	DidChangeAvatarsNotificationType,
@@ -120,6 +123,7 @@ import {
 	DidEnsureRowNotificationType,
 	DidSearchNotificationType,
 	DismissBannerCommandType,
+	DoubleClickedRefCommandType,
 	EnsureRowCommandType,
 	GetMissingAvatarsCommandType,
 	GetMissingRefsMetadataCommandType,
@@ -420,6 +424,9 @@ export class GraphWebview extends WebviewBase {
 			case UpdateRefsVisibilityCommandType.method:
 				onIpc(UpdateRefsVisibilityCommandType, e, params => this.onRefsVisibilityChanged(params));
 				break;
+			case DoubleClickedRefCommandType.method:
+				onIpc(DoubleClickedRefCommandType, e, params => this.onDoubleClickRef(params));
+				break;
 			case UpdateSelectedRepositoryCommandType.method:
 				onIpc(UpdateSelectedRepositoryCommandType, e, params => this.onSelectedRepositoryChanged(params));
 				break;
@@ -561,6 +568,22 @@ export class GraphWebview extends WebviewBase {
 		this.updateHiddenRefs(e.refs, e.visible);
 	}
 
+	private onDoubleClickRef(e: DoubleClickedRefParams) {
+		if (e.ref.context) {
+			const item: GraphItemContext = typeof e.ref.context === 'string'
+				? JSON.parse(e.ref.context)
+				: e.ref.context as GraphItemContext;
+
+			const { ref } = item.webviewItemValue as GraphItemRefContextValue;
+			if (e.ref.refType === 'head' && (e.ref as Head).isCurrentHead) {
+				return GitActions.switchTo(ref.repoPath);
+			}
+			return GitActions.switchTo(ref.repoPath, ref);
+		}
+
+		return Promise.resolve();
+	}
+
 	@debug()
 	private async onEnsureRow(e: EnsureRowParams, completionId?: string) {
 		if (this._graph == null) return;

src/plus/webviews/graph/protocol.ts

@@ -2,6 +2,7 @@ import type {
 	CssVariables,
 	GraphColumnSetting,
 	GraphContexts,
+	GraphRef,
 	GraphRefOptData,
 	GraphRow,
 	GraphZoneType,
@@ -178,6 +179,11 @@ export const UpdateRefsVisibilityCommandType = new IpcCommandType
 	'graph/refs/update/visibility',
 );
 
+export interface DoubleClickedRefParams {
+	ref: GraphRef
+}
+export const DoubleClickedRefCommandType = new IpcCommandType<DoubleClickedRefParams>('graph/ref/doubleclick');
+
 export interface UpdateSelectedRepositoryParams {
 	path: string;
 }

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

@@ -3,7 +3,9 @@ import type {
 	GraphColumnSetting,
 	GraphContainerProps,
 	GraphPlatform,
-	GraphRefOptData,
+	GraphRef,
+	GraphRefGroup,
+    GraphRefOptData,
 	GraphRow,
 	OnFormatCommitDateTime,
 } from '@gitkraken/gitkraken-components';
@@ -57,6 +59,7 @@ export interface GraphWrapperProps {
 	subscriber: (callback: UpdateStateCallback) => () => void;
 	onSelectRepository?: (repository: GraphRepository) => void;
 	onColumnChange?: (name: GraphColumnName, settings: GraphColumnConfig) => void;
+	onDoubleClickRef?: (ref: GraphRef) => void;
 	onMissingAvatars?: (emails: { [email: string]: string }) => void;
 	onMissingRefsMetadata?: (metadata: GraphMissingRefsMetadata) => void;
 	onMoreRows?: (id?: string) => void;
@@ -140,6 +143,7 @@ export function GraphWrapper({
 	state,
 	onSelectRepository,
 	onColumnChange,
+	onDoubleClickRef,
 	onEnsureRowPromise,
 	onMissingAvatars,
 	onMissingRefsMetadata,
@@ -506,6 +510,12 @@ export function GraphWrapper({
 		onRefsVisibilityChange?.(refs, visible);
 	};
 
+	const handleOnDoubleClickRef = (event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, refGroup: GraphRefGroup) => {
+		if (refGroup.length > 0) {
+			onDoubleClickRef?.(refGroup[0]);
+		}
+	};
+
 	const handleSelectGraphRows = (rows: GraphRow[]) => {
 		const active = rows[0];
 		const activeKey = active != null ? `${active.sha}|${active.date}` : undefined;
@@ -733,6 +743,7 @@ export function GraphWrapper({
 								isSelectedBySha={selectedRows}
 								nonce={nonce}
 								onColumnResized={handleOnColumnResized}
+								onDoubleClickGraphRef={handleOnDoubleClickRef}
 								onSelectGraphRows={handleSelectGraphRows}
 								onToggleRefsVisibilityClick={handleOnToggleRefsVisibilityClick}
 								onEmailsMissingAvatarUrls={handleMissingAvatars}

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

@@ -1,5 +1,5 @@
 /*global document window*/
-import type { CssVariables, GraphRow } from '@gitkraken/gitkraken-components';
+import type { CssVariables, GraphRef, GraphRow } from '@gitkraken/gitkraken-components';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import type { GitGraphRowType } from '../../../../git/models/graph';
@@ -14,7 +14,7 @@ import type {
 	GraphRepository,
 	InternalNotificationType,
 	State,
-	UpdateStateCallback,
+	UpdateStateCallback
 } from '../../../../plus/webviews/graph/protocol';
 import {
 	DidChangeAvatarsNotificationType,
@@ -30,6 +30,7 @@ import {
 	DidEnsureRowNotificationType,
 	DidSearchNotificationType,
 	DismissBannerCommandType,
+	DoubleClickedRefCommandType,
 	EnsureRowCommandType,
 	GetMissingAvatarsCommandType,
 	GetMissingRefsMetadataCommandType,
@@ -94,6 +95,7 @@ export class GraphApp extends App {
 						path => this.onRepositorySelectionChanged(path),
 						250,
 					)}
+					onDoubleClickRef={(ref) => this.onDoubleClickRef(ref)}
 					onMissingAvatars={(...params) => this.onGetMissingAvatars(...params)}
 					onMissingRefsMetadata={(...params) => this.onGetMissingRefsMetadata(...params)}
 					onMoreRows={(...params) => this.onGetMoreRows(...params)}
@@ -390,6 +392,12 @@ export class GraphApp extends App {
 		});
 	}
 
+	private onDoubleClickRef(ref: GraphRef) {
+		this.sendCommand(DoubleClickedRefCommandType, {
+			ref: ref,
+		});
+	}
+
 	private onRepositorySelectionChanged(repo: GraphRepository) {
 		this.sendCommand(UpdateRepositorySelectionCommandType, {
 			path: repo.path,