Adds publish branch button to graph actions

- Displays a "Publish Branch" action in the graph header when the active branch has no upstream
- Scales button layouts gracefully during resizing by collapsing the publish label sequentially before the fetch label
- Falls back to publishing the current branch when the command is triggered in the header without custom branch context
- Improves fetch button layout styling and adds an accessible label

Closes #5327

Author: eamodio

CHANGELOG.md

@@ -29,6 +29,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Adds the ability to drop multiple commits from the _Commit Graph_ — select commits on the current branch, right-click, and choose _Drop Commits_ to remove them ([#5161](https://github.com/gitkraken/vscode-gitlens/issues/5161))
 - Adds the ability to reword a commit's message from the _Commit Graph_ — right-click a commit on the current branch and choose _Reword Commit_ ([#5161](https://github.com/gitkraken/vscode-gitlens/issues/5161))
 - Adds a _Modify Commits (Interactive Rebase)_ action to the _Commit Graph_ that opens the interactive rebase editor scoped from the selected commit(s) for squashing, rewording, reordering, dropping, and editing ([#5161](https://github.com/gitkraken/vscode-gitlens/issues/5161))
+- Adds a _Publish Branch_ action to the _Commit Graph_ header that appears when the current branch has no upstream — publishes (pushes and sets the upstream of) the current branch in one click, sitting just left of _Fetch_ and collapsing to its icon when the header is too narrow ([#5327](https://github.com/gitkraken/vscode-gitlens/issues/5327))
 
 ### Changed
 

src/webviews/apps/plus/graph/actions/gitActionsButtons.ts

@@ -39,8 +39,16 @@ export class GitActionsButtons extends LitElement {
 			}
 
 			gl-fetch-button {
-				flex-shrink: 1;
-				min-width: 3.2rem;
+				flex: 0 1 max-content;
+				min-width: 3.1rem;
+			}
+
+			/* Publish yields its label before Fetch loses a pixel, so the two collapse
+			   sequentially (publish → icon, then fetch → icon) instead of both shrinking
+			   halfway together and neither reaching its icon-only floor. */
+			gl-publish-button {
+				flex: 0 1000 max-content;
+				min-width: 3.1rem;
 			}
 
 			.wip-button {
@@ -142,6 +150,7 @@ export class GitActionsButtons extends LitElement {
 				.fetchedText=${this.fetchedText}
 				.branchName=${this.branchName}
 			></gl-push-pull-button>
+			<gl-publish-button .branchState=${this.branchState} .branchName=${this.branchName}></gl-publish-button>
 			<gl-fetch-button
 				.branchState=${this.branchState}
 				.fetchedText=${this.fetchedText}
@@ -198,7 +207,9 @@ export class GlFetchButton extends LitElement {
 			gl-popover.fetch-popover {
 				display: block;
 				min-width: 0;
+				width: 100%;
 				max-width: 100%;
+				--gl-popover-anchor-width: 100%;
 			}
 			/* Use CSS Grid so the text column's min-content is 0,
 			   allowing the text to shrink and ellipsize without expanding
@@ -207,6 +218,8 @@ export class GlFetchButton extends LitElement {
 				display: grid;
 				grid-template-columns: auto minmax(0, 1fr);
 				align-items: center;
+				overflow: hidden;
+				width: 100%;
 				max-width: 100%;
 			}
 			.action-button__text {
@@ -336,7 +349,12 @@ export class GlFetchButton extends LitElement {
 	override render() {
 		return html`
 			<gl-popover class="fetch-popover" placement="bottom" ?arrow=${false} distance=${4}>
-				<a slot="anchor" href=${this._webview.createCommandLink('gitlens.fetch:')} class="action-button">
+				<a
+					slot="anchor"
+					href=${this._webview.createCommandLink('gitlens.fetch:')}
+					class="action-button"
+					aria-label="Fetch"
+				>
 					<code-icon class="action-button__icon" icon="repo-fetch"></code-icon>
 					<span class="action-button__text"
 						><span class="action-button__label">Fetch</span>${this.fetchedTextShort
@@ -574,10 +592,77 @@ export class PushPullButton extends LitElement {
 	}
 }
 
+@customElement('gl-publish-button')
+export class GlPublishButton extends LitElement {
+	static override styles = [
+		linkBase,
+		actionButton,
+		css`
+			:host {
+				display: inline-flex;
+				min-width: 0;
+				max-width: 100%;
+			}
+			gl-tooltip {
+				display: block;
+				min-width: 0;
+				width: 100%;
+				max-width: 100%;
+			}
+			.action-button {
+				display: grid;
+				grid-template-columns: auto minmax(0, 1fr);
+				align-items: center;
+				overflow: hidden;
+				width: 100%;
+				max-width: 100%;
+			}
+			.publish-button__text {
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		`,
+	];
+
+	@consume({ context: webviewContext })
+	private _webview!: WebviewContext;
+
+	@property({ type: Object })
+	branchState?: BranchState;
+
+	@property({ type: String })
+	branchName?: string;
+
+	override render() {
+		// Only when the current branch has no upstream (unpublished)
+		if (this.branchState == null || this.branchState.upstream != null) return nothing;
+
+		return html`
+			<gl-tooltip placement="bottom">
+				<a
+					href=${this._webview.createCommandLink('gitlens.publishBranch:')}
+					class="action-button"
+					aria-label="Publish Branch"
+				>
+					<code-icon class="action-button__icon" icon="cloud-upload"></code-icon>
+					<span class="publish-button__text">Publish Branch</span>
+				</a>
+				<span slot="content">
+					Publish (push) ${this.branchName ? html`<strong>${this.branchName}</strong>` : 'this branch'} to a
+					remote
+				</span>
+			</gl-tooltip>
+		`;
+	}
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'gl-git-actions-buttons': GitActionsButtons;
 		'gl-fetch-button': GlFetchButton;
+		'gl-publish-button': GlPublishButton;
 		'gl-push-pull-button': PushPullButton;
 	}
 }

src/webviews/plus/graph/graphWebview.ts

@@ -8701,7 +8701,12 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 	@command('gitlens.publishBranch:graph')
 	@debug()
 	private async publishBranch(item?: GraphItemContext | BranchRef) {
-		const ref = await this.resolveBranchRef(item);
+		let ref = await this.resolveBranchRef(item);
+		if (ref == null) {
+			// Header publish button passes no branch context — fall back to the current branch
+			const branch = await this.repository?.git.branches.getBranch();
+			ref = branch != null ? getReferenceFromBranch(branch) : undefined;
+		}
 		if (ref == null) return;
 
 		await RepoActions.push(ref.repoPath, undefined, ref);