Updates home view when no repo is found

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

@@ -1,4 +1,4 @@
-import { attr, css, customElement, FASTElement, html, volatile, when } from '@microsoft/fast-element';
+import { attr, css, customElement, FASTElement, html, observable, volatile, when } from '@microsoft/fast-element';
 import { SubscriptionState } from '../../../../subscription';
 import { pluralize } from '../../../../system/string';
 import { numberConverter } from '../../shared/components/converters/number-converter';
@@ -15,11 +15,16 @@ const template = html`
 				that enhance your GitLens experience.
 			</h3>
 
-			<p class="mb-1">
-				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.startPreviewTrial')}"
-					>Try GitLens+ features on private repos</vscode-button
-				>
-			</p>
+			${when(
+				y => y.extensionEnabled,
+				html<PlusBanner>`
+					<p class="mb-1">
+						<vscode-button @click="${x => x.fireAction('command:gitlens.plus.startPreviewTrial')}"
+							>Try GitLens+ features on private repos</vscode-button
+						>
+					</p>
+				`,
+			)}
 		`,
 	)}
 	${when(
@@ -43,11 +48,16 @@ const template = html`
 				<a title="Learn more about GitLens+ features" href="command:gitlens.plus.learn">GitLens+ features</a> on
 				private repos.
 			</p>
-			<p class="mb-1">
-				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
-					>Upgrade to Pro</vscode-button
-				>
-			</p>
+			${when(
+				y => y.extensionEnabled,
+				html<PlusBanner>`
+					<p class="mb-1">
+						<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
+							>Upgrade to Pro</vscode-button
+						>
+					</p>
+				`,
+			)}
 		`,
 	)}
 	${when(
@@ -70,11 +80,16 @@ const template = html`
 				Your free 3-day GitLens Pro trial has ended, extend your trial to get an additional free 7-days of
 				GitLens+ features on private repos.
 			</p>
-			<p class="mb-1">
-				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"
-					>Extend Pro Trial</vscode-button
-				>
-			</p>
+			${when(
+				y => y.extensionEnabled,
+				html<PlusBanner>`
+					<p class="mb-1">
+						<vscode-button @click="${x => x.fireAction('command:gitlens.plus.loginOrSignUp')}"
+							>Extend Pro Trial</vscode-button
+						>
+					</p>
+				`,
+			)}
 		`,
 	)}
 	${when(
@@ -85,11 +100,16 @@ const template = html`
 				Your GitLens Pro trial has ended, please upgrade to GitLens Pro to continue to use GitLens+ features on
 				private repos.
 			</p>
-			<p class="mb-1">
-				<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
-					>Upgrade to Pro</vscode-button
-				>
-			</p>
+			${when(
+				y => y.extensionEnabled,
+				html<PlusBanner>`
+					<p class="mb-1">
+						<vscode-button @click="${x => x.fireAction('command:gitlens.plus.purchase')}"
+							>Upgrade to Pro</vscode-button
+						>
+					</p>
+				`,
+			)}
 		`,
 	)}
 	${when(
@@ -117,7 +137,7 @@ const template = html`
 				SubscriptionState.Free,
 				SubscriptionState.FreePreviewTrialExpired,
 				SubscriptionState.FreePlusTrialExpired,
-			].includes(x.state),
+			].includes(x.state) && x.extensionEnabled,
 		html<PlusBanner>`
 			<p class="mb-0">
 				${when(
@@ -131,6 +151,14 @@ const template = html`
 			</p>
 		`,
 	)}
+	${when(
+		x => !x.extensionEnabled,
+		html<PlusBanner>`
+			<p class="mb-0">
+				To use GitLens+, open a folder containing a git repository or clone from a URL from the Explorer.
+			</p>
+		`,
+	)}
 `;
 
 const styles = css`
@@ -201,6 +229,9 @@ export class PlusBanner extends FASTElement {
 	@attr({ mode: 'boolean' })
 	plus = true;
 
+	@observable
+	extensionEnabled = true;
+
 	get daysRemaining() {
 		if (this.days < 1) {
 			return 'less than one day';

src/webviews/apps/home/home.html

@@ -65,6 +65,25 @@
 			</nav>
 		</div>
 		<header class="home__header">
+			<div id="no-repo-alert" class="alert alert--info mb-0" aria-hidden="true">
+				<h1 class="alert__title">No repository detected</h1>
+				<div class="alert__description">
+					<p>
+						To use GitLens, open a folder containing a git repository or clone from a URL from the Explorer.
+					</p>
+					<p class="centered">
+						<vscode-button data-action="command:workbench.view.explorer"
+							>Open a Folder or Repository</vscode-button
+						>
+					</p>
+					<p class="mb-0">
+						If you have opened a folder with a repository, please let us know by
+						<a class="one-line" href="https://github.com/gitkraken/vscode-gitlens/issues/new/choose"
+							>creating an Issue</a
+						>.
+					</p>
+				</div>
+			</div>
 			<header-card id="header-card" image="#{webroot}/media/gitlens-logo.webp"></header-card>
 		</header>
 		<main class="home__main scrollable" id="main" tabindex="-1">
@@ -115,16 +134,10 @@
 						views. Learn more in the <a href="command:gitlens.getStarted">Feature Walkthrough</a>.
 					</p>
 					<card-section no-heading id="no-repo" aria-hidden="true">
-						<div class="centered">
-							<p>
-								To use GitLens, open a folder containing a git repository or clone from a URL from the
-								Explorer.
-							</p>
-
-							<vscode-button class="mb-1" data-action="command:workbench.view.explorer"
-								>Open a Folder or Repository</vscode-button
-							>
-						</div>
+						<p class="centered mb-0">
+							To use GitLens, open a folder containing a git repository or clone from a URL from the
+							Explorer.
+						</p>
 					</card-section>
 					<div class="activitybar-banner">
 						<div class="activitybar-banner__content">

src/webviews/apps/home/home.scss

@@ -133,6 +133,10 @@ body {
 		flex: none;
 		padding: 0 2rem;
 		position: relative;
+
+		[aria-hidden='false'] + header-card {
+			display: none;
+		}
 	}
 	&__main {
 		flex: 1;
@@ -271,6 +275,10 @@ ul {
 	text-align: center;
 }
 
+.one-line {
+	white-space: nowrap;
+}
+
 .foreground {
 	color: var(--color-view-foreground);
 }
@@ -374,6 +382,21 @@ ul {
 		font-size: 1.2rem;
 		margin: 0.4rem 0 0;
 	}
+
+	&--info {
+		background-color: var(--color-alert-infoBackground);
+		border-left-color: var(--color-alert-infoBorder);
+	}
+
+	&--warning {
+		background-color: var(--color-alert-warningBackground);
+		border-left-color: var(--color-alert-warningBorder);
+	}
+
+	&--danger {
+		background-color: var(--color-alert-errorBackground);
+		border-left-color: var(--color-alert-errorBorder);
+	}
 }
 
 .activitybar-banner {

src/webviews/apps/home/home.ts

@@ -244,10 +244,13 @@ export class HomeApp extends App {
 	private updateNoRepo() {
 		const { extensionEnabled } = this.state;
 
-		const $el = document.getElementById('no-repo');
-		if ($el) {
-			$el.setAttribute('aria-hidden', extensionEnabled ? 'true' : 'false');
-		}
+		const value = extensionEnabled ? 'true' : 'false';
+
+		let $el = document.getElementById('no-repo');
+		$el?.setAttribute('aria-hidden', value);
+
+		$el = document.getElementById('no-repo-alert');
+		$el?.setAttribute('aria-hidden', value);
 	}
 
 	private updateLayout() {
@@ -270,6 +273,7 @@ export class HomeApp extends App {
 			$plusContent.setAttribute('visibility', visibility);
 			$plusContent.setAttribute('plan', subscription.plan.effective.name);
 			$plusContent.setAttribute('plus', plusEnabled.toString());
+			($plusContent as PlusBanner).extensionEnabled = this.state.extensionEnabled;
 		}
 
 		$plusContent = document.getElementById('plus-content');