Adds branch switching to Home nav

Author: eamodio

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

@@ -15,8 +15,10 @@ import type {
 	OpenInTimelineParams,
 	State,
 } from '../../../../home/protocol';
+import { ExecuteCommand } from '../../../../protocol';
 import { stateContext } from '../../../home/context';
 import type { RepoButtonGroupClickEvent } from '../../../shared/components/repo-button-group';
+import { ipcContext } from '../../../shared/contexts/ipc';
 import { linkStyles, ruleStyles } from '../../shared/components/vscode.css';
 import { branchCardStyles, GlBranchCardBase } from './branch-card';
 import type { ActiveOverviewState } from './overviewState';
@@ -31,6 +33,7 @@ import '../../../shared/components/menu/menu-item';
 import '../../../shared/components/menu/menu-label';
 import '../../../shared/components/overlays/popover';
 import '../../../shared/components/pills/tracking';
+import '../../../shared/components/ref-button';
 import '../../../shared/components/repo-button-group';
 import '../../../shared/components/rich/issue-icon';
 import '../../../shared/components/rich/pr-icon';
@@ -104,6 +107,9 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	@consume({ context: activeOverviewStateContext })
 	private _activeOverviewState!: ActiveOverviewState;
 
+	@consume({ context: ipcContext })
+	private _ipc!: typeof ipcContext.__context__;
+
 	@state()
 	private repoCollapsed = true;
 
@@ -119,6 +125,13 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		}
 	}
 
+	private onBranchSelectorClicked() {
+		this._ipc.sendCommand(ExecuteCommand, {
+			command: 'gitlens.home.switchToBranch',
+			args: [{ repoPath: this._activeOverviewState.state?.active.repoPath }],
+		});
+	}
+
 	override render(): unknown {
 		if (this._homeState.discovering) {
 			return this.renderLoader();
@@ -176,7 +189,9 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 						></gl-breadcrumb-item
 					>
 					<gl-breadcrumb-item collapsibleState="none" icon="git-branch" class="heading-branch-breadcrumb"
-						>${activeBranch.name}</gl-breadcrumb-item
+						><gl-ref-button .ref=${activeBranch.reference} @click=${this.onBranchSelectorClicked}
+							><span slot="tooltip">Switch to Another Branch... </span></gl-ref-button
+						></gl-breadcrumb-item
 					>
 				</gl-breadcrumbs>
 				<span class="section-heading-actions" slot="heading-actions">
@@ -546,18 +561,19 @@ export class GlActiveBranchCard extends GlBranchCardBase {
 
 			return html`<div class="branch-item__row" full>
 				<span class="branch-item__missing" full>Current work item</span>
-				<gl-tooltip hoist content="Associate an issue">
-					<a
-						href=${this.createCommandLink<AssociateIssueWithBranchCommandArgs>(
-							'gitlens.associateIssueWithBranch',
-							{
-								branch: this.branch.reference,
-								source: 'home',
-							},
-						)}
-						><span class="branch-item__icon"> <issue-icon></issue-icon> </span
-					></a>
-				</gl-tooltip>
+				<gl-button
+					appearance="toolbar"
+					href=${this.createCommandLink<AssociateIssueWithBranchCommandArgs>(
+						'gitlens.associateIssueWithBranch',
+						{
+							branch: this.branch.reference,
+							source: 'home',
+						},
+					)}
+					tooltip="Associate Issue with Branch"
+					aria-label="Associate Issue with Branch"
+					><issue-icon></issue-icon>
+				</gl-button>
 			</div>`;
 		}
 		return super.renderIssuesItem();

src/webviews/home/homeWebview.ts

@@ -1502,12 +1502,10 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 		openWorkspace(worktree.uri, location ? { location: location } : undefined);
 	}
 
-	@log<HomeWebviewProvider['switchToBranch']>({ args: { 0: r => r.branchId } })
-	private async switchToBranch(ref: BranchRef) {
+	@log<HomeWebviewProvider['switchToBranch']>({ args: { 0: r => r?.branchId } })
+	private async switchToBranch(ref: BranchRef | { repoPath: string; branchName?: never; branchId?: never }) {
 		const { repo, branch } = await this.getRepoInfoFromRef(ref);
-		if (branch == null) return;
-
-		void RepoActions.switchTo(repo, getReferenceFromBranch(branch));
+		void RepoActions.switchTo(repo, branch ? getReferenceFromBranch(branch) : undefined);
 	}
 
 	@log<HomeWebviewProvider['fetch']>({ args: { 0: r => r?.branchId } })
@@ -1560,10 +1558,11 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	}
 
 	private async getRepoInfoFromRef(
-		ref: BranchRef,
+		ref: BranchRef | { repoPath: string; branchName?: string },
 	): Promise<{ repo: Repository; branch: GitBranch | undefined } | { repo: undefined; branch: undefined }> {
 		const repo = this.container.git.getRepository(ref.repoPath);
 		if (repo == null) return { repo: undefined, branch: undefined };
+		if (!ref.branchName) return { repo: repo, branch: undefined };
 
 		const branch = await repo.git.branches.getBranch(ref.branchName);
 		return { repo: repo, branch: branch };

src/webviews/protocol.ts

@@ -82,7 +82,7 @@ export const WebviewFocusChangedCommand = new IpcCommand<WebviewFocusChangedPara
 
 export interface ExecuteCommandParams {
 	command: GlCommands;
-	args?: [];
+	args?: unknown[];
 }
 export const ExecuteCommand = new IpcCommand<ExecuteCommandParams>('core', 'command/execute');