Adds create branch split-dropdown button to the commit graph

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

@@ -1,7 +1,7 @@
 import { QuickInputButtons } from 'vscode';
 import type { Container } from '../../container';
 import type { GitBranchReference, GitReference } from '../../git/models/reference';
-import { getNameWithoutRemote, getReferenceLabel, isRevisionReference } from '../../git/models/reference';
+import { getReferenceLabel, isRevisionReference } from '../../git/models/reference';
 import { Repository } from '../../git/models/repository';
 import type { GitWorktree } from '../../git/models/worktree';
 import { getWorktreesByBranch } from '../../git/models/worktree';
@@ -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++;
 					}
@@ -357,7 +361,7 @@ export class BranchGitCommand extends QuickCommand {
 						icon: false,
 						label: state.reference.refType !== 'branch',
 					})}`,
-					value: state.name ?? getNameWithoutRemote(state.reference),
+					value: state.name,
 				});
 				if (result === StepResultBreak) continue;
 

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,8 +19,9 @@ 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 { Commands } from '../../../../constants.commands';
 import type { SearchQuery } from '../../../../constants.search';
 import type { Subscription } from '../../../../plus/gk/account/subscription';
 import { isSubscriptionPaid } from '../../../../plus/gk/account/subscription';
@@ -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 ?? []);
@@ -1107,7 +1109,7 @@ export function GraphWrapper({
 										) : (
 											''
 										)}
-										{branchName}
+										<span className="action-button__truncated">{branchName}</span>
 										<span
 											className="codicon codicon-chevron-down action-button__more"
 											aria-hidden="true"
@@ -1144,6 +1146,25 @@ export function GraphWrapper({
 						)}
 					</div>
 					<div className="titlebar__group">
+						<GlTooltip placement="bottom">
+							<a
+								className="action-button"
+								href={createCommandLink<BranchGitCommandArgs>(Commands.GitCommandsBranch, {
+									state: {
+										subcommand: 'create',
+										reference: branch,
+									},
+									command: 'branch',
+									confirm: true,
+								})}
+							>
+								<span className="codicon codicon-custom-git-branch-create action-button__icon"></span>
+							</a>
+							<span slot="content">
+								Create New Branch from <span className="codicon codicon-git-branch"></span>
+								<span className="md-code">{branchName}</span>
+							</span>
+						</GlTooltip>
 						<GlTooltip placement="bottom">
 							<a
 								href={`command:gitlens.showLaunchpad?${encodeURIComponent(

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

@@ -304,6 +304,20 @@ button:not([disabled]),
 	.codicon[class*='codicon-graph-line'] {
 		transform: translateY(1px);
 	}
+	.codicon-custom-git-branch-create {
+		&:before {
+			content: '\ea68';
+		}
+		&:after {
+			content: '\ea60';
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			font-size: 0.6em;
+			line-height: normal;
+			transform: translate(-50%, 0%);
+		}
+	}
 
 	&__pill {
 		.is-ahead & {
@@ -345,6 +359,12 @@ button:not([disabled]),
 		overflow: hidden;
 	}
 
+	&__truncated {
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	&.is-ahead {
 		background-color: var(--branch-status-ahead-background);
 
@@ -966,6 +986,7 @@ gl-feature-gate gl-feature-badge {
 	&__header {
 		flex: none;
 		z-index: 101;
+		// width: fit-content;
 		position: relative;
 	}