Adds Visual History button to Graph header

Author: eamodio

src/constants.commands.ts

@@ -34,9 +34,12 @@ type InternalGraphWebviewCommands =
 	| 'gitlens.graph.abortPausedOperation'
 	| 'gitlens.graph.continuePausedOperation'
 	| 'gitlens.graph.openRebaseEditor'
-	| 'gitlens.graph.skipPausedOperation';
+	| 'gitlens.graph.skipPausedOperation'
+	| 'gitlens.visualizeHistory.repo:graph';
 
 type InternalHomeWebviewCommands =
+	| 'gitlens.ai.explainWip:home'
+	| 'gitlens.ai.explainBranch:home'
 	| 'gitlens.home.changeBranchMergeTarget'
 	| 'gitlens.home.deleteBranchOrWorktree'
 	| 'gitlens.home.pushBranch'
@@ -50,8 +53,6 @@ type InternalHomeWebviewCommands =
 	| 'gitlens.home.switchToBranch'
 	| 'gitlens.home.fetch'
 	| 'gitlens.home.openInGraph'
-	| 'gitlens.home.visualizeHistory.repo:home'
-	| 'gitlens.home.visualizeHistory.branch:home'
 	| 'gitlens.home.createBranch'
 	| 'gitlens.home.mergeIntoCurrent'
 	| 'gitlens.home.rebaseCurrentOnto'
@@ -60,10 +61,10 @@ type InternalHomeWebviewCommands =
 	| 'gitlens.home.skipPausedOperation'
 	| 'gitlens.home.continuePausedOperation'
 	| 'gitlens.home.abortPausedOperation'
-	| 'gitlens.ai.explainWip:home'
-	| 'gitlens.ai.explainBranch:home'
 	| 'gitlens.home.openRebaseEditor'
-	| 'gitlens.home.enableAi';
+	| 'gitlens.home.enableAi'
+	| 'gitlens.visualizeHistory.repo:home'
+	| 'gitlens.visualizeHistory.branch:home';
 
 type InternalHomeWebviewViewCommands =
 	| 'gitlens.views.home.account.resync'
@@ -126,8 +127,6 @@ type InternalGlCommands =
 	| 'gitlens.openWalkthrough'
 	| 'gitlens.refreshHover'
 	| 'gitlens.visualizeHistory'
-	| 'gitlens.visualizeHistory.repo:home'
-	| 'gitlens.visualizeHistory.branch:home'
 	| InternalGraphWebviewCommands
 	| InternalHomeWebviewCommands
 	| InternalHomeWebviewViewCommands
@@ -201,6 +200,8 @@ type FilterCommands<Prefix extends string, U, Suffix extends string = ''> = U ex
 		: never
 	: never;
 
+export type PlusCommands = FilterCommands<'gitlens.plus.', GlCommands>;
+
 export type TreeViewCommands =
 	| FilterCommands<`gitlens.views.${TreeViewTypes}`, GlCommands>
 	| FilterCommands<`gitlens.`, GlCommands, ':views'>;

src/system/webview.ts

@@ -1,7 +1,8 @@
+import type { PlusCommands, WebviewCommands, WebviewViewCommands } from '../constants.commands';
 import type { WebviewIds, WebviewViewIds } from '../constants.views';
 
 export function createWebviewCommandLink<T>(
-	command: `${WebviewIds | WebviewViewIds}.${string}` | `gitlens.plus.${string}`,
+	command: WebviewCommands | WebviewViewCommands | PlusCommands,
 	webviewId: WebviewIds | WebviewViewIds,
 	webviewInstanceId: string | undefined,
 	args?: T,

src/webviews/apps/plus/graph/graph-header.ts

@@ -841,6 +841,29 @@ export class GlGraphHeader extends SignalWatcher(LitElement) {
 								to help you focus and keep your team unblocked
 							</span>
 						</gl-tooltip>
+						<gl-tooltip placement="bottom">
+							<a
+								href=${createWebviewCommandLink(
+									'gitlens.visualizeHistory.repo:graph',
+									this.hostState.webviewId,
+									this.hostState.webviewInstanceId,
+								)}
+								class="action-button"
+								aria-label=${`Open Visual History`}
+							>
+								<span>
+									<code-icon
+										class="action-button__icon"
+										icon=${'graph-scatter'}
+										aria-hidden="true"
+									></code-icon>
+								</span>
+							</a>
+							<span slot="content">
+								<strong>Visual History</strong> — visualize the evolution of a repository, branch,
+								folder, or file and identify when the most impactful changes were made and by whom
+							</span>
+						</gl-tooltip>
 						<gl-tooltip placement="bottom">
 							<a
 								href=${'command:gitlens.views.home.focus'}

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

@@ -157,7 +157,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 						class="section-heading-action"
 						appearance="toolbar"
 						tooltip="Visualize Repo History"
-						href=${createCommandLink('gitlens.home.visualizeHistory.repo:home', {
+						href=${createCommandLink('gitlens.visualizeHistory.repo:home', {
 							type: 'repo',
 							repoPath: this._activeOverviewState.state!.repository.path,
 						} satisfies OpenInTimelineParams)}

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

@@ -4,8 +4,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
-import type { GlCommands } from '../../../../../constants.commands';
-import type { WebviewIds, WebviewViewIds } from '../../../../../constants.views';
+import type { GlCommands, PlusCommands, WebviewCommands, WebviewViewCommands } from '../../../../../constants.commands';
 import type { LaunchpadCommandArgs } from '../../../../../plus/launchpad/launchpad';
 import {
 	actionGroupMap,
@@ -702,7 +701,7 @@ export abstract class GlBranchCardBase extends GlElement {
 	}
 
 	protected createWebviewCommandLink<T>(
-		command: `${WebviewIds | WebviewViewIds}.${string}` | `gitlens.plus.${string}`,
+		command: WebviewCommands | WebviewViewCommands | PlusCommands,
 		args?: T | any,
 	): string {
 		return createWebviewCommandLink<T>(
@@ -1066,7 +1065,7 @@ export class GlBranchCard extends GlBranchCardBase {
 			html` <action-item
 				label="Visualize Branch History"
 				icon="graph-scatter"
-				href=${createCommandLink('gitlens.home.visualizeHistory.branch:home', {
+				href=${createCommandLink('gitlens.visualizeHistory.branch:home', {
 					type: 'branch',
 					repoPath: this.repo,
 					branchId: this.branch.id,

src/webviews/home/homeWebview.ts

@@ -347,8 +347,8 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			registerCommand('gitlens.home.switchToBranch', this.switchToBranch, this),
 			registerCommand('gitlens.home.fetch', this.fetch, this),
 			registerCommand('gitlens.home.openInGraph', this.openInGraph, this),
-			registerCommand('gitlens.home.visualizeHistory.repo:home', this.openInTimeline, this),
-			registerCommand('gitlens.home.visualizeHistory.branch:home', this.openInTimeline, this),
+			registerCommand('gitlens.visualizeHistory.repo:home', this.openInTimeline, this),
+			registerCommand('gitlens.visualizeHistory.branch:home', this.openInTimeline, this),
 			registerCommand('gitlens.home.createBranch', this.createBranch, this),
 			registerCommand('gitlens.home.mergeIntoCurrent', this.mergeIntoCurrent, this),
 			registerCommand('gitlens.home.rebaseCurrentOnto', this.rebaseCurrentOnto, this),
@@ -490,7 +490,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		if (repo == null) return;
 
 		if (params?.type === 'repo') {
-			void executeCommand<TimelineCommandArgs | Uri>('gitlens.visualizeHistory.repo:home', repo.uri);
+			void executeCommand<TimelineCommandArgs>('gitlens.visualizeHistory', { type: 'repo', uri: repo.uri });
 			return;
 		}
 
@@ -499,7 +499,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 
 			const branch = repoInfo?.branches.find(b => b.id === params.branchId);
 			if (branch != null) {
-				void executeCommand<TimelineCommandArgs>('gitlens.visualizeHistory.branch:home', {
+				void executeCommand<TimelineCommandArgs>('gitlens.visualizeHistory', {
 					type: 'repo',
 					uri: repo.uri,
 					head: getReferenceFromBranch(branch),

src/webviews/plus/graph/graphWebview.ts

@@ -136,6 +136,7 @@ import type { IpcCallMessageType, IpcMessage, IpcNotification } from '../../prot
 import type { WebviewHost, WebviewProvider, WebviewShowingArgs } from '../../webviewProvider';
 import type { WebviewPanelShowCommandArgs, WebviewShowOptions } from '../../webviewsController';
 import { isSerializedState } from '../../webviewsController';
+import type { TimelineCommandArgs } from '../timeline/registration';
 import {
 	formatRepositories,
 	hasGitReference,
@@ -701,6 +702,7 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			this.host.registerWebviewCommand('gitlens.graph.skipPausedOperation', this.skipPausedOperation),
 
 			this.host.registerWebviewCommand('gitlens.ai.generateChangelogFrom:graph', this.generateChangelogFrom),
+			this.host.registerWebviewCommand('gitlens.visualizeHistory.repo:graph', this.visualizeHistoryRepo),
 		);
 
 		return commands;
@@ -4093,6 +4095,14 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 		return Promise.resolve();
 	}
 
+	@log()
+	private visualizeHistoryRepo() {
+		void executeCommand<TimelineCommandArgs | undefined>(
+			'gitlens.visualizeHistory',
+			this.repository != null ? { type: 'repo', uri: this.repository.uri } : undefined,
+		);
+	}
+
 	private getCommitFromGraphItemRef(item?: GraphItemContext): Promise<GitCommit | undefined> {
 		let ref: GitRevisionReference | GitStashReference | undefined = this.getGraphItemRef(item, 'revision');
 		if (ref != null) return this.container.git.commits(ref.repoPath).getCommit(ref.ref);

src/webviews/plus/timeline/registration.ts

@@ -103,19 +103,6 @@ export function registerTimelineWebviewCommands<T>(
 			return show(uri ? { type: 'folder', uri: uri } : undefined);
 		}),
 
-		registerCommand('gitlens.visualizeHistory.repo:home', (...args: unknown[]) => {
-			return show(
-				args[0] instanceof Uri
-					? { type: 'repo', uri: args[0] }
-					: isTimelineScope(args[0])
-					  ? args[0]
-					  : undefined,
-			);
-		}),
-		registerCommand('gitlens.visualizeHistory.branch:home', (...args: unknown[]) => {
-			return show(isTimelineScope(args[0]) ? args[0] : undefined);
-		}),
-
 		registerCommand(`${panels.id}.refresh`, () => void panels.getActiveInstance()?.refresh(true)),
 		registerCommand(
 			`${panels.id}.split`,