Fixes new home view bugs

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

@@ -66,28 +66,18 @@ export class GlPreviewBanner extends LitElement {
 	private _button!: HTMLButtonElement;
 
 	override render() {
-		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>
-						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>.
+				<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 reimagining GitLens' Home to be a more helpful daily workflow tool. We'll continue to
+						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>
 			`;
 		}
 
@@ -96,21 +86,31 @@ export class GlPreviewBanner extends LitElement {
 		}
 
 		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 />
-					We're reinventing GitLens' Home to be a more helpful daily workflow tool. We'll continue to refine
-					this view and welcome your feedback.
+			<gl-card>
+				<p><strong>Welcome to the new Home View!</strong></p>
+				<p>
+					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>
-			</gl-tooltip>
+				<button-container>
+					<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>
+				<gl-button slot="actions" appearance="toolbar" tooltip="Dismiss Welcome" @click=${() => this.onClose()}
+					><code-icon icon="close"></code-icon
+				></gl-button>
+			</gl-card>
 		`;
 	}
 
-	private togglePreview() {
+	private togglePreview(dismiss = false) {
 		this._ipc.sendCommand(TogglePreviewEnabledCommand);
+
+		if (dismiss) {
+			this.onClose();
+		}
 	}
 
 	private onClose() {

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="${ifDefined(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/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),

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/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'],

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);
 				}
 			}),