Fixes new home view bugs

- listening to git updates (push/pull/commit)
- add an indication of the async task is fetching
- fix gl-button click area in case of using tooltip prop
- add tooltip to the `publish branch` action
- fix promo banner dismissal

Author: nzaytsev

src/webviews/apps/home/components/preview-banner.ts

@@ -66,6 +66,10 @@ export class GlPreviewBanner extends LitElement {
 	private _button!: HTMLButtonElement;
 
 	override render() {
+		if (this.closed || this._state.previewCollapsed === true) {
+			return nothing;
+		}
+
 		if (this._state.previewEnabled === true) {
 			return html`
 				<gl-card>
@@ -91,10 +95,6 @@ export class GlPreviewBanner extends LitElement {
 			`;
 		}
 
-		if (this.closed || this._state.previewCollapsed === true) {
-			return nothing;
-		}
-
 		return html`
 			<gl-tooltip placement="bottom">
 				<button class="text-button text-button--end" @click=${() => this.togglePreview()}>

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

@@ -2,6 +2,7 @@ import { consume } from '@lit/context';
 import { SignalWatcher } from '@lit-labs/signals';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 import type { GitTrackingState } from '../../../../../git/models/branch';
 import { createWebviewCommandLink } from '../../../../../system/webview';
@@ -79,10 +80,10 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				<skeleton-loader lines="3"></skeleton-loader>
 			`;
 		}
-		return this.renderComplete(this._overviewState.state);
+		return this.renderComplete(this._overviewState.state, true);
 	}
 
-	private renderComplete(overview: Overview) {
+	private renderComplete(overview: Overview, isFetching = false) {
 		const repo = overview?.repository;
 		const activeBranches = repo?.branches?.active;
 		if (!activeBranches) return html`<span>None</span>`;
@@ -95,6 +96,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 					() =>
 						html`<span
 							><gl-button
+								aria-busy="${isFetching}"
+								?disabled=${isFetching}
 								class="section-heading-action"
 								appearance="toolbar"
 								tooltip="Change Repository"
@@ -103,11 +106,11 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 						></span>`,
 				)}
 			</h3>
-			${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path))}
+			${activeBranches.map(branch => this.renderRepoBranchCard(branch, repo.path, isFetching))}
 		`;
 	}
 
-	private renderRepoBranchCard(branch: GetOverviewBranch, repo: string) {
+	private renderRepoBranchCard(branch: GetOverviewBranch, repo: string, isFetching: boolean) {
 		const { name, pr, state, workingTreeState, upstream } = branch;
 		return html`
 			<gl-card class="branch-item" active>
@@ -117,7 +120,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 					</span>
 					<span class="branch-item__name">${name}</span>
 				</p>
-				${when(state, () => this.renderBranchStateActions(state, upstream))}
+				${when(state, () => this.renderBranchStateActions(state, upstream, isFetching))}
 				${when(pr, pr => {
 					return html` <p class="branch-item__main is-end">
 						<span class="branch-item__icon">
@@ -179,14 +182,22 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		return html`<action-nav class="branch-item__actions">${actions}</action-nav>`;
 	}
 
-	private renderBranchStateActions(state?: GitTrackingState, upstream?: { name: string; missing: boolean }) {
+	private renderBranchStateActions(
+		state?: GitTrackingState,
+		upstream?: { name: string; missing: boolean },
+		isFetching?: boolean,
+	) {
 		if (upstream?.missing !== false) {
+			const publishTooltip = upstream?.name ? `Publish branch to ${upstream.name}` : 'Publish branch';
 			return html`<div>
 				<button-container>
 					<gl-button
+						aria-busy=${ifDefined(isFetching)}
+						?disabled=${isFetching}
 						href=${createWebviewCommandLink('gitlens.views.home.publishBranch', 'gitlens.views.home', '')}
 						full
 						appearance="secondary"
+						tooltip="${publishTooltip}"
 						><code-icon icon="cloud-upload" slot="prefix"></code-icon> Publish Branch</gl-button
 					></button-container
 				>
@@ -201,6 +212,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				return html`<div>
 					<button-container>
 						<gl-button
+							aria-busy=${ifDefined(isFetching)}
+							?disabled=${isFetching}
 							href=${createWebviewCommandLink('gitlens.views.home.pull', 'gitlens.views.home', '')}
 							full
 							appearance="secondary"
@@ -213,6 +226,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 							></gl-tracking-pill
 						></gl-button>
 						<gl-button
+							aria-busy=${ifDefined(isFetching)}
+							?disabled=${isFetching}
 							href=${createWebviewCommandLink('gitlens.views.home.push', 'gitlens.views.home', '', {
 								force: true,
 							})}
@@ -229,6 +244,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				return html`<div>
 					<button-container>
 						<gl-button
+							aria-busy=${ifDefined(isFetching)}
+							?disabled=${isFetching}
 							href=${createWebviewCommandLink('gitlens.views.home.pull', 'gitlens.views.home', '')}
 							full
 							appearance="secondary"
@@ -247,6 +264,8 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 				return html`<div>
 					<button-container>
 						<gl-button
+							aria-busy=${ifDefined(isFetching)}
+							?disabled=${isFetching}
 							href=${createWebviewCommandLink('gitlens.views.home.push', 'gitlens.views.home', '')}
 							full
 							appearance="secondary"

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

@@ -59,11 +59,14 @@ export class GlBranchSection extends LitElement {
 	@property({ type: String }) label!: string;
 	@property() repo!: string;
 	@property({ type: Array }) branches!: GetOverviewBranch[];
+	@property({ type: Boolean }) isFetching = false;
 
 	override render() {
 		return html`
 			<gl-section>
-				<span slot="heading">${this.label}</span>
+				<span slot="heading"
+					>${this.label}${when(!this.isFetching, () => html` (${this.branches.length})`)}</span
+				>
 				<span slot="heading-actions"><slot name="heading-actions"></slot></span>
 				${this.branches.map(
 					branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,

src/webviews/apps/plus/home/components/branch-threshold-filter.ts

@@ -11,19 +11,22 @@ export const selectStyles = css`
 		background: none;
 		outline: none;
 		border: none;
-		cursor: pointer;
-		color: var(--color-foreground--50);
 		text-decoration: none !important;
 		font-weight: 500;
+		color: var(--color-foreground--25);
 	}
 	.select option {
 		color: var(--vscode-foreground);
 		background-color: var(--vscode-dropdown-background);
 	}
-	.select:focus {
+	.select:not(:disabled) {
+		cursor: pointer;
+		color: var(--color-foreground--50);
+	}
+	.select:not(:disabled):focus {
 		outline: 1px solid var(--color-focus-border);
 	}
-	.select:hover {
+	.select:not(:disabled):hover {
 		color: var(--vscode-foreground);
 		text-decoration: underline !important;
 	}
@@ -32,6 +35,7 @@ export const selectStyles = css`
 export abstract class GlObjectSelect<T, L = T[keyof T], V = T[keyof T]> extends GlElement {
 	static override readonly styles = [selectStyles];
 
+	@property({ type: Boolean }) disabled: boolean = false;
 	@property({ type: String }) value?: V;
 	@property({ type: Array }) options?: T[];
 
@@ -44,7 +48,7 @@ export abstract class GlObjectSelect<T, L = T[keyof T], V = T[keyof T]> extends
 			return;
 		}
 		return html`
-			<select class="select" @change=${(e: InputEvent) => this.onChange?.(e)}>
+			<select .disabled=${this.disabled} class="select" @change=${(e: InputEvent) => this.onChange?.(e)}>
 				${repeat(this.options, item => {
 					const value = this.getValue(item);
 					const label = this.getLabel(item);

src/webviews/apps/plus/home/components/overview.ts

@@ -66,7 +66,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 				<skeleton-loader lines="3"></skeleton-loader>
 			`;
 		}
-		return this.renderComplete(this._overviewState.state);
+		return this.renderComplete(this._overviewState.state, true);
 	}
 
 	@consume({ context: ipcContext })
@@ -82,13 +82,14 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		});
 	}
 
-	private renderComplete(overview: Overview) {
+	private renderComplete(overview: Overview, isFetching = false) {
 		if (overview == null) return nothing;
 		const { repository } = overview;
 		return html`
 			<div class="repository">
 				<gl-branch-section
-					label="Recent (${repository.branches.recent.length})"
+					label="Recent"
+					.isFetching=${isFetching}
 					.repo=${repository.path}
 					.branches=${repository.branches.recent}
 				>
@@ -103,6 +104,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 							value: OverviewRecentThreshold;
 							label: string;
 						}[]}
+						.disabled=${isFetching}
 						.value=${this._overviewState.filter.recent?.threshold}
 					></gl-branch-threshold-filter>
 				</gl-branch-section>

src/webviews/apps/shared/components/button.ts

@@ -150,6 +150,7 @@ export class GlButton extends LitElement {
 
 			gl-tooltip {
 				height: 100%;
+				width: 100%;
 				display: inline-flex;
 				align-items: center;
 				justify-content: center;

src/webviews/home/homeWebview.ts

@@ -469,7 +469,17 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 			repo.watchFileSystem(1000),
 			repo.onDidChangeFileSystem(() => this.onWipChanged(repo)),
 			repo.onDidChange(e => {
-				if (e.changed(RepositoryChange.Index, RepositoryChangeComparisonMode.Any)) {
+				if (
+					e.changed(
+						RepositoryChange.Unknown,
+						RepositoryChange.Index,
+						RepositoryChange.Status,
+						RepositoryChange.Remotes,
+						RepositoryChange.Config,
+						RepositoryChange.Heads,
+						RepositoryChangeComparisonMode.Any,
+					)
+				) {
 					this.onWipChanged(repo);
 				}
 			}),