From 30d415032557400034a1bd764cfbaa1952eb00ab Mon Sep 17 00:00:00 2001
From: nzaytsev <nikolai.zaytsev@gitkraken.com>
Date: Tue, 12 Nov 2024 14:51:43 +0700
Subject: [PATCH 1/5] 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
---
 .../apps/home/components/preview-banner.ts    |  8 ++---
 .../apps/plus/home/components/active-work.ts  | 31 +++++++++++++++----
 .../plus/home/components/branch-section.ts    |  5 ++-
 .../components/branch-threshold-filter.ts     | 14 ++++++---
 .../apps/plus/home/components/overview.ts     |  8 +++--
 src/webviews/apps/shared/components/button.ts |  1 +
 src/webviews/home/homeWebview.ts              | 12 ++++++-
 7 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src/webviews/apps/home/components/preview-banner.ts b/src/webviews/apps/home/components/preview-banner.ts
index edde5782b74ce..030ff49f84afd 100644
--- a/src/webviews/apps/home/components/preview-banner.ts
+++ b/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()}>
diff --git a/src/webviews/apps/plus/home/components/active-work.ts b/src/webviews/apps/plus/home/components/active-work.ts
index 6752e01711a99..0d9110ec537b1 100644
--- a/src/webviews/apps/plus/home/components/active-work.ts
+++ b/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"
diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts
index 48644f78eb28b..fa515fa3b649d 100644
--- a/src/webviews/apps/plus/home/components/branch-section.ts
+++ b/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>`,
diff --git a/src/webviews/apps/plus/home/components/branch-threshold-filter.ts b/src/webviews/apps/plus/home/components/branch-threshold-filter.ts
index 1d0cf3c901eb1..ec7523d3e820b 100644
--- a/src/webviews/apps/plus/home/components/branch-threshold-filter.ts
+++ b/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);
diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
index d59e11a45f5c1..85bade0993396 100644
--- a/src/webviews/apps/plus/home/components/overview.ts
+++ b/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>
diff --git a/src/webviews/apps/shared/components/button.ts b/src/webviews/apps/shared/components/button.ts
index 8a6d1e5b46400..4e24377a5dcbd 100644
--- a/src/webviews/apps/shared/components/button.ts
+++ b/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;
diff --git a/src/webviews/home/homeWebview.ts b/src/webviews/home/homeWebview.ts
index 66c5ecadc672a..7451daa8db3c5 100644
--- a/src/webviews/home/homeWebview.ts
+++ b/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);
 				}
 			}),

From c0bf7a1995a496879452637befa74f66e913bd69 Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Tue, 12 Nov 2024 10:53:15 -0500
Subject: [PATCH 2/5] Ensures preview banner for old home view

---
 .../apps/home/components/preview-banner.ts    | 58 +++++++++----------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/webviews/apps/home/components/preview-banner.ts b/src/webviews/apps/home/components/preview-banner.ts
index 030ff49f84afd..53e389859451d 100644
--- a/src/webviews/apps/home/components/preview-banner.ts
+++ b/src/webviews/apps/home/components/preview-banner.ts
@@ -66,46 +66,42 @@ export class GlPreviewBanner extends LitElement {
 	private _button!: HTMLButtonElement;
 
 	override render() {
-		if (this.closed || this._state.previewCollapsed === true) {
-			return nothing;
-		}
-
-		if (this._state.previewEnabled === true) {
+		if (this._state.previewEnabled !== true) {
 			return html`
-				<gl-card>
-					<p><strong>Welcome to the new Home View!</strong></p>
-					<p>
+				<gl-tooltip placement="bottom">
+					<button class="text-button text-button--end" @click=${() => this.togglePreview()}>
+						New Home View <code-icon icon="arrow-right"></code-icon>
+					</button>
+					<p slot="content">
+						<strong>Switch to the new Home View!</strong><br />
 						We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to
-						refine this view and welcome your
-						<a href="https://github.com/gitkraken/vscode-gitlens/discussions/3721">feedback</a>.
+						refine this view and welcome your feedback.
 					</p>
-					<button-container>
-						<gl-button appearance="secondary" @click=${() => this.togglePreview()} full
-							><code-icon icon="arrow-left"></code-icon> Revert to Old Home View</gl-button
-						>
-					</button-container>
-					<gl-button
-						slot="actions"
-						appearance="toolbar"
-						tooltip="Dismiss Welcome"
-						@click=${() => this.onClose()}
-						><code-icon icon="close"></code-icon
-					></gl-button>
-				</gl-card>
+				</gl-tooltip>
 			`;
 		}
 
+		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()}>
-					New Home View <code-icon icon="arrow-right"></code-icon>
-				</button>
-				<p slot="content">
-					<strong>Switch to the new Home View!</strong><br />
+			<gl-card>
+				<p><strong>Welcome to the new Home View!</strong></p>
+				<p>
 					We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to refine
-					this view and welcome your feedback.
+					this view and welcome your
+					<a href="https://github.com/gitkraken/vscode-gitlens/discussions/3721">feedback</a>.
 				</p>
-			</gl-tooltip>
+				<button-container>
+					<gl-button appearance="secondary" @click=${() => this.togglePreview()} full
+						><code-icon icon="arrow-left"></code-icon> Revert to Old Home View</gl-button
+					>
+				</button-container>
+				<gl-button slot="actions" appearance="toolbar" tooltip="Dismiss Welcome" @click=${() => this.onClose()}
+					><code-icon icon="close"></code-icon
+				></gl-button>
+			</gl-card>
 		`;
 	}
 

From 02e94d696d0b4c0ccbd1844ff8a7a65a092136b5 Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Tue, 12 Nov 2024 13:21:03 -0500
Subject: [PATCH 3/5] Prevents error in tooltip when shoelace hasn't upgraded
 yet

---
 src/webviews/apps/shared/components/overlays/tooltip.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/webviews/apps/shared/components/overlays/tooltip.ts b/src/webviews/apps/shared/components/overlays/tooltip.ts
index 55e80d3ccdd50..d2e05d78ac34f 100644
--- a/src/webviews/apps/shared/components/overlays/tooltip.ts
+++ b/src/webviews/apps/shared/components/overlays/tooltip.ts
@@ -82,6 +82,9 @@ export class GlTooltip extends LitElement {
 		});
 
 		const target: any = this.shadowRoot?.querySelector('sl-tooltip')?.shadowRoot;
+		// TODO: sometimes sl-tooltip might not be upgraded yet, need to look at watching for the upgrade
+		if (!target) return;
+
 		this.observer.observe(target, {
 			attributes: true,
 			attributeFilter: ['data-current-placement'],

From 7559b2ec6b5e27de1c860ad193a2d7f0a3be3c41 Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Tue, 12 Nov 2024 13:39:44 -0500
Subject: [PATCH 4/5] Adds integration connect link in launchpad summary

---
 .../apps/plus/home/components/launchpad.ts         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/webviews/apps/plus/home/components/launchpad.ts b/src/webviews/apps/plus/home/components/launchpad.ts
index db9adcb535cc9..4097cdda96296 100644
--- a/src/webviews/apps/plus/home/components/launchpad.ts
+++ b/src/webviews/apps/plus/home/components/launchpad.ts
@@ -148,6 +148,20 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 	}
 
 	private renderSummaryResult() {
+		if (this._homeState.hasAnyIntegrationConnected === false) {
+			return html`<ul class="menu">
+				<li>
+					<a
+						class="launchpad-action"
+						href="command:gitlens.plus.cloudIntegrations.connect?%7B%22source%22%3A%22home%22%7D"
+					>
+						<code-icon class="launchpad-action__icon" icon="plug"></code-icon>
+						<span>Connect to see PRs and Issue here</span>
+					</a>
+				</li>
+			</ul>`;
+		}
+
 		return this._summaryState.render({
 			pending: () => this.renderPending(),
 			complete: summary => this.renderSummary(summary),

From 4898cc6793ffb968d1fd6666ac4a6a6f2c0ab5d5 Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Tue, 12 Nov 2024 13:42:43 -0500
Subject: [PATCH 5/5] Fixes preview banner

---
 src/webviews/apps/home/components/preview-banner.ts  | 12 ++++++++----
 .../apps/plus/home/components/active-work.ts         |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/webviews/apps/home/components/preview-banner.ts b/src/webviews/apps/home/components/preview-banner.ts
index 53e389859451d..8a501394d2033 100644
--- a/src/webviews/apps/home/components/preview-banner.ts
+++ b/src/webviews/apps/home/components/preview-banner.ts
@@ -74,7 +74,7 @@ export class GlPreviewBanner extends LitElement {
 					</button>
 					<p slot="content">
 						<strong>Switch to the new Home View!</strong><br />
-						We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to
+						We're reimagining GitLens' Home to be a more helpful daily workflow tool. We'll continue to
 						refine this view and welcome your feedback.
 					</p>
 				</gl-tooltip>
@@ -89,12 +89,12 @@ export class GlPreviewBanner extends LitElement {
 			<gl-card>
 				<p><strong>Welcome to the new Home View!</strong></p>
 				<p>
-					We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to refine
+					We're reimagining GitLens' Home to be a more helpful daily workflow tool. We'll continue to refine
 					this view and welcome your
 					<a href="https://github.com/gitkraken/vscode-gitlens/discussions/3721">feedback</a>.
 				</p>
 				<button-container>
-					<gl-button appearance="secondary" @click=${() => this.togglePreview()} full
+					<gl-button appearance="secondary" @click=${() => this.togglePreview(true)} full
 						><code-icon icon="arrow-left"></code-icon> Revert to Old Home View</gl-button
 					>
 				</button-container>
@@ -105,8 +105,12 @@ export class GlPreviewBanner extends LitElement {
 		`;
 	}
 
-	private togglePreview() {
+	private togglePreview(dismiss = false) {
 		this._ipc.sendCommand(TogglePreviewEnabledCommand);
+
+		if (dismiss) {
+			this.onClose();
+		}
 	}
 
 	private onClose() {
diff --git a/src/webviews/apps/plus/home/components/active-work.ts b/src/webviews/apps/plus/home/components/active-work.ts
index 0d9110ec537b1..06375a139e4ec 100644
--- a/src/webviews/apps/plus/home/components/active-work.ts
+++ b/src/webviews/apps/plus/home/components/active-work.ts
@@ -96,7 +96,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 					() =>
 						html`<span
 							><gl-button
-								aria-busy="${isFetching}"
+								aria-busy="${ifDefined(isFetching)}"
 								?disabled=${isFetching}
 								class="section-heading-action"
 								appearance="toolbar"