From 402ff592aefbc9dc60c328a38f877c07c42a73d3 Mon Sep 17 00:00:00 2001
From: Eric Amodio <eamodio@gmail.com>
Date: Mon, 22 Aug 2022 04:00:57 -0400
Subject: [PATCH] Updates commit graph preview banner Reworks graph preview
 banner storage

---
 src/plus/webviews/graph/graphWebview.ts       | 9 +++++++--
 src/storage.ts                                | 4 +++-
 src/webviews/apps/plus/graph/GraphWrapper.tsx | 7 ++++---
 src/webviews/apps/plus/graph/graph.scss       | 4 +++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/plus/webviews/graph/graphWebview.ts b/src/plus/webviews/graph/graphWebview.ts
index b7617ab..f0ecc3b 100644
--- a/src/plus/webviews/graph/graphWebview.ts
+++ b/src/plus/webviews/graph/graphWebview.ts
@@ -17,6 +17,7 @@ import type { GitRemote } from '../../../git/models/remote';
 import type { Repository, RepositoryChangeEvent } from '../../../git/models/repository';
 import { RepositoryChange, RepositoryChangeComparisonMode } from '../../../git/models/repository';
 import type { GitTag } from '../../../git/models/tag';
+import { updateRecordValue } from '../../../system/object';
 import { RepositoryFolderNode } from '../../../views/nodes/viewNode';
 import type { IpcMessage } from '../../../webviews/protocol';
 import { onIpc } from '../../../webviews/protocol';
@@ -170,7 +171,10 @@ export class GraphWebview extends WebviewBase<State> {
 
 	private dismissPreview() {
 		this.previewBanner = false;
-		void this.container.storage.storeWorkspace('graph:preview', false);
+
+		let banners = this.container.storage.getWorkspace('graph:banners:dismissed');
+		banners = updateRecordValue(banners, 'preview', true);
+		void this.container.storage.storeWorkspace('graph:banners:dismissed', banners);
 	}
 
 	private changeColumn(name: string, config: GraphColumnConfig) {
@@ -394,7 +398,8 @@ export class GraphWebview extends WebviewBase<State> {
 		}
 
 		if (this.previewBanner == null) {
-			this.previewBanner = this.container.storage.getWorkspace('graph:preview') ?? true;
+			const banners = this.container.storage.getWorkspace('graph:banners:dismissed');
+			this.previewBanner = !banners?.['preview'];
 		}
 
 		if (this.selectedRepository === undefined) {
diff --git a/src/storage.ts b/src/storage.ts
index 95ddbd8..0c0f1f8 100644
--- a/src/storage.ts
+++ b/src/storage.ts
@@ -152,8 +152,10 @@ export interface WorkspaceStorage {
 	};
 	gitPath?: string;
 	graph: {
+		banners: {
+			dismissed?: Record<string, boolean>;
+		};
 		columns?: Record<string, GraphColumnConfig>;
-		preview?: boolean;
 	};
 	remote: {
 		default?: string;
diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
index 0874b97..0cd96cc 100644
--- a/src/webviews/apps/plus/graph/GraphWrapper.tsx
+++ b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -301,11 +301,12 @@ export function GraphWrapper({
 			{showBanner && (
 				<section className="graph-app__banner">
 					<div className="alert">
-						<span className="alert__icon codicon codicon-preview"></span>
+						<span className="alert__icon codicon codicon-search"></span>
 						<div className="alert__content">
-							<p className="alert__title">Preview</p>
+							<p className="alert__title">Preview Feature</p>
 							<p className="alert__message">
-								This is a GitLens+ feature that requires a paid account for use on private repositories.
+								The Commit Graph is a ✨ GitLens+ feature currently in preview. It is freely available
+								for local and public repos, while a paid account is required for use on private repos.
 							</p>
 						</div>
 						<button className="alert__action" type="button" onClick={() => handleDismissBanner()}>
diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss
index ee05dc8..75b6b91 100644
--- a/src/webviews/apps/plus/graph/graph.scss
+++ b/src/webviews/apps/plus/graph/graph.scss
@@ -136,11 +136,13 @@ body {
 		padding-top: 0.24rem;
 	}
 	&__title {
-		font-size: 1.2rem;
+		font-size: 1.3rem;
 		font-weight: 700;
 		margin: 0;
+		text-transform: uppercase;
 	}
 	&__message {
+		font-size: 1.2rem;
 		margin: 0;
 	}