Adds create branch button to the commit graph

Author: nzaytsev

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Adds a new `${authorFirst}` and `${authorLast}` commit formatting tokens that can be used in inline blame, commit hovers, etc — closes [#2980](https://github.com/gitkraken/vscode-gitlens/issues/2980)
 - Adds a way to force push from the Graph
 - Adds a new `gitlens.launchpad.includedOrganizations` setting to specify which organizations to include in _Launchpad_ — closes [#3550](https://github.com/gitkraken/vscode-gitlens/issues/3550)
+- Adds create branch button to the commit graph — closes [#3553](https://github.com/gitkraken/vscode-gitlens/issues/3553)
 
 ### Changed
 

src/commands/git/branch.ts

@@ -155,6 +155,10 @@ export class BranchGitCommand extends QuickCommand {
 
 			switch (args?.state.subcommand) {
 				case 'create':
+					if (args.state.flags != null) {
+						counter++;
+					}
+
 					if (args.state.reference != null) {
 						counter++;
 					}

src/commands/gitWizard.ts

@@ -93,7 +93,7 @@ export class GitWizardCommand extends QuickWizardCommandBase {
 	) {
 		switch (context.command) {
 			case Commands.GitCommandsBranch:
-				return this.execute({ command: 'branch' });
+				return this.execute({ command: 'branch', ...args });
 			case Commands.GitCommandsBranchCreate:
 				return this.execute({ command: 'branch', state: { subcommand: 'create' } });
 			case Commands.GitCommandsBranchDelete:

src/plus/webviews/graph/graphWebview.ts

@@ -2428,7 +2428,16 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 			selectedRepository: this.repository.path,
 			selectedRepositoryVisibility: visibility,
 			branchesVisibility: refsVisibility.branchesVisibility,
-			branchName: branch?.name,
+			branch: branch && {
+				name: branch.name,
+				ref: branch.ref,
+				refType: branch.refType,
+				remote: branch.remote,
+				repoPath: branch.repoPath,
+				sha: branch.sha,
+				id: branch.id,
+				upstream: branch.upstream,
+			},
 			branchState: branchState,
 			lastFetched: new Date(getSettledValue(lastFetchedResult)!),
 			selectedRows: this._selectedRows,

src/plus/webviews/graph/protocol.ts

@@ -95,7 +95,7 @@ export interface State extends WebviewState {
 	selectedRepository?: string;
 	selectedRepositoryVisibility?: RepositoryVisibility;
 	branchesVisibility?: GraphBranchesVisibility;
-	branchName?: string;
+	branch?: GitBranchReference;
 	branchState?: BranchState;
 	lastFetched?: Date;
 	selectedRows?: GraphSelectedRows;

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

@@ -19,6 +19,7 @@ import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react';
 import type { FormEvent, MouseEvent, ReactElement } from 'react';
 import React, { createElement, useEffect, useMemo, useRef, useState } from 'react';
 import type { ConnectCloudIntegrationsCommandArgs } from '../../../../commands/cloudIntegrations';
+import type { BranchGitCommandArgs } from '../../../../commands/git/branch';
 import type { DateStyle, GraphBranchesVisibility } from '../../../../config';
 import type { Commands } from '../../../../constants.commands';
 import type { SearchQuery } from '../../../../constants.search';
@@ -269,7 +270,7 @@ export function GraphWrapper({
 	const [pagingHasMore, setPagingHasMore] = useState(state.paging?.hasMore ?? false);
 	const [isLoading, setIsLoading] = useState(state.loading);
 	const [styleProps, setStyleProps] = useState(state.theming);
-	const [branchName, setBranchName] = useState(state.branchName);
+	const [branch, setBranch] = useState(state.branch);
 	const [lastFetched, setLastFetched] = useState(state.lastFetched);
 	const [windowFocused, setWindowFocused] = useState(state.windowFocused);
 	const [allowed, setAllowed] = useState(state.allowed ?? false);
@@ -287,6 +288,7 @@ export function GraphWrapper({
 	const [workingTreeStats, setWorkingTreeStats] = useState(
 		state.workingTreeStats ?? { added: 0, modified: 0, deleted: 0 },
 	);
+	const branchName = branch?.name;
 
 	const minimap = useRef<GlGraphMinimapContainer | undefined>(undefined);
 	const hover = useRef<GlGraphHover | undefined>(undefined);
@@ -388,7 +390,7 @@ export function GraphWrapper({
 				if (!themingChanged) {
 					setStyleProps(state.theming);
 				}
-				setBranchName(state.branchName);
+				setBranch(state.branch);
 				setLastFetched(state.lastFetched);
 				setColumns(state.columns);
 				setRows(state.rows ?? []);
@@ -1144,6 +1146,96 @@ export function GraphWrapper({
 						)}
 					</div>
 					<div className="titlebar__group--last">
+						<span className="button-group">
+							<GlTooltip placement="bottom">
+								<a
+									className="action-button"
+									href={createCommandLink(Commands.GitCommandsBranch, {
+										args: {
+											state: { subcommand: 'create', flags: ['--switch'], reference: branch },
+											command: 'branch',
+											confirm: false,
+										} satisfies BranchGitCommandArgs,
+									})}
+								>
+									<span className="codicon codicon-git-branch-create action-button__icon"></span>
+								</a>
+								<span slot="content">
+									Create a branch from <i>{branchName}</i> and switch
+								</span>
+							</GlTooltip>
+							<GlTooltip placement="top" distance={7}>
+								<PopMenu position="right">
+									<button
+										type="button"
+										className="action-button"
+										slot="trigger"
+										aria-label="Minimap Options"
+									>
+										<span
+											className="codicon codicon-chevron-down action-button__more"
+											aria-hidden="true"
+										></span>
+									</button>
+									<MenuList slot="content" id="create-branch">
+										<MenuLabel>Create branch options</MenuLabel>
+										<MenuItem>
+											<a href={createCommandLink(Commands.GitCommandsBranchCreate)}>
+												Create Branch...
+											</a>
+										</MenuItem>
+										<MenuItem>
+											<a
+												href={createCommandLink(Commands.GitCommandsBranch, {
+													args: {
+														command: 'branch',
+														confirm: false,
+														state: { flags: [], reference: branch, subcommand: 'create' },
+													} satisfies BranchGitCommandArgs,
+												})}
+											>
+												Create Branch from <i>{branchName}</i>
+											</a>
+										</MenuItem>
+										<MenuItem>
+											<a
+												href={createCommandLink(Commands.GitCommandsBranch, {
+													args: {
+														command: 'branch',
+														confirm: false,
+														state: {
+															flags: ['--switch'],
+															reference: branch,
+															subcommand: 'create',
+														},
+													} satisfies BranchGitCommandArgs,
+												})}
+											>
+												Create from <i>{branchName}</i> & Switch to Branch
+											</a>
+										</MenuItem>
+										<MenuItem>
+											<a
+												href={createCommandLink(Commands.GitCommandsBranch, {
+													args: {
+														state: {
+															subcommand: 'create',
+															flags: ['--worktree'],
+															reference: branch,
+														},
+														command: 'branch',
+														confirm: false,
+													} satisfies BranchGitCommandArgs,
+												})}
+											>
+												Create Branch from <i>{branchName}</i> in New Worktree
+											</a>
+										</MenuItem>
+									</MenuList>
+								</PopMenu>
+								<span slot="content">Create branch options</span>
+							</GlTooltip>
+						</span>
 						<GlTooltip placement="bottom">
 							<a
 								href={`command:gitlens.showLaunchpad?${encodeURIComponent(

src/webviews/apps/plus/graph/graph.scss

@@ -979,7 +979,7 @@ gl-feature-gate gl-feature-badge {
 	&__header {
 		flex: none;
 		z-index: 101;
-		width: fit-content;
+		width: --webkit-fill-available;
 		position: relative;
 	}
 
@@ -1197,6 +1197,14 @@ gl-feature-gate gl-feature-badge {
 	width: 1px;
 }
 
+menu-list#create-branch {
+	menu-item > a {
+		display: block;
+		color: var(--vscode-foreground);
+		text-decoration: none;
+	}
+}
+
 #opts-popover {
 	font-size: var(--vscode-font-size);
 	font-family: var(--vscode-font-family);

src/webviews/apps/shared/codicons.scss

@@ -159,6 +159,15 @@
 .codicon-git-branch-create:before {
 	content: '\ea68';
 }
+.codicon-git-branch-create:after {
+	content: '\ea60';
+	position: absolute;
+	right: 0;
+	bottom: 0px;
+	font-size: 0.6em;
+	line-height: normal;
+	transform: translate(-50%, 0%);
+}
 .codicon-git-branch-delete:before {
 	content: '\ea68';
 }