Tracks dimissed trial banner

src/plus/webviews/graph/graphWebview.ts

@@ -26,14 +26,14 @@ import { onIpc } from '../../../webviews/protocol';
 import { WebviewBase } from '../../../webviews/webviewBase';
 import type { SubscriptionChangeEvent } from '../../subscription/subscriptionService';
 import { ensurePlusFeaturesEnabled } from '../../subscription/utils';
-import type { GraphCompositeConfig, GraphRepository, State } from './protocol';
+import type { DismissBannerParams, GraphCompositeConfig, GraphRepository, State } from './protocol';
 import {
 	DidChangeCommitsNotificationType,
 	DidChangeGraphConfigurationNotificationType,
 	DidChangeNotificationType,
 	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
-	DismissPreviewCommandType,
+	DismissBannerCommandType,
 	GetMoreCommitsCommandType,
 	UpdateColumnCommandType,
 	UpdateSelectedRepositoryCommandType,
@@ -90,6 +90,7 @@ export class GraphWebview extends WebviewBase<State> {
 	private _theme: ColorTheme | undefined;
 
 	private previewBanner?: boolean;
+	private trialBanner?: boolean;
 
 	constructor(container: Container) {
 		super(
@@ -176,8 +177,8 @@ export class GraphWebview extends WebviewBase<State> {
 
 	protected override onMessageReceived(e: IpcMessage) {
 		switch (e.method) {
-			case DismissPreviewCommandType.method:
-				onIpc(DismissPreviewCommandType, e, () => this.dismissPreview());
+			case DismissBannerCommandType.method:
+				onIpc(DismissBannerCommandType, e, params => this.dismissBanner(params.key));
 				break;
 			case GetMoreCommitsCommandType.method:
 				onIpc(GetMoreCommitsCommandType, e, params => this.onGetMoreCommits(params.limit));
@@ -286,11 +287,15 @@ export class GraphWebview extends WebviewBase<State> {
 		this.updateState();
 	}
 
-	private dismissPreview() {
-		this.previewBanner = false;
+	private dismissBanner(key: DismissBannerParams['key']) {
+		if (key === 'preview') {
+			this.previewBanner = false;
+		} else if (key === 'trial') {
+			this.trialBanner = false;
+		}
 
 		let banners = this.container.storage.getWorkspace('graph:banners:dismissed');
-		banners = updateRecordValue(banners, 'preview', true);
+		banners = updateRecordValue(banners, key, true);
 		void this.container.storage.storeWorkspace('graph:banners:dismissed', banners);
 	}
 
@@ -436,9 +441,14 @@ export class GraphWebview extends WebviewBase<State> {
 	private async getState(): Promise<State> {
 		if (this.container.git.repositoryCount === 0) return { repositories: [] };
 
-		if (this.previewBanner == null) {
+		if (this.previewBanner == null || this.trialBanner == null) {
 			const banners = this.container.storage.getWorkspace('graph:banners:dismissed');
-			this.previewBanner = !banners?.['preview'];
+			if (this.previewBanner == null) {
+				this.previewBanner = !banners?.['preview'];
+			}
+			if (this.trialBanner == null) {
+				this.trialBanner = !banners?.['trial'];
+			}
 		}
 
 		if (this.repository == null) {
@@ -476,6 +486,7 @@ export class GraphWebview extends WebviewBase<State> {
 
 		return {
 			previewBanner: this.previewBanner,
+			trialBanner: this.trialBanner,
 			repositories: formatRepositories(this.container.git.openRepositories),
 			selectedRepository: this.repository.path,
 			selectedSha: this._selectedSha,

src/plus/webviews/graph/protocol.ts

@@ -17,6 +17,7 @@ export interface State {
 	config?: GraphCompositeConfig;
 	nonce?: string;
 	previewBanner?: boolean;
+	trialBanner?: boolean;
 
 	// Props below are computed in the webview (not passed)
 	mixedColumnColors?: Record<string, string>;
@@ -63,7 +64,10 @@ export interface CommitListCallback {
 }
 
 // Commands
-export const DismissPreviewCommandType = new IpcCommandType<undefined>('graph/dismissPreview');
+export interface DismissBannerParams {
+	key: 'preview' | 'trial';
+}
+export const DismissBannerCommandType = new IpcCommandType<DismissBannerParams>('graph/dismissBanner');
 
 export interface GetMoreCommitsParams {
 	limit?: number;

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -12,6 +12,7 @@ import { RepositoryVisibility } from '../../../../git/gitProvider';
 import type { GitGraphRowType } from '../../../../git/models/graph';
 import type {
 	CommitListCallback,
+	DismissBannerParams,
 	GraphCompositeConfig,
 	GraphRepository,
 	State,
@@ -26,7 +27,7 @@ export interface GraphWrapperProps extends State {
 	onSelectRepository?: (repository: GraphRepository) => void;
 	onColumnChange?: (name: string, settings: GraphColumnConfig) => void;
 	onMoreCommits?: (limit?: number) => void;
-	onDismissPreview?: () => void;
+	onDismissBanner?: (key: DismissBannerParams['key']) => void;
 	onSelectionChange?: (selection: { id: string; type: GitGraphRowType }[]) => void;
 }
 
@@ -132,7 +133,8 @@ export function GraphWrapper({
 	nonce,
 	mixedColumnColors,
 	previewBanner = true,
-	onDismissPreview,
+	trialBanner = true,
+	onDismissBanner,
 }: GraphWrapperProps) {
 	const [graphList, setGraphList] = useState(rows);
 	const [reposList, setReposList] = useState(repositories);
@@ -152,7 +154,7 @@ export function GraphWrapper({
 	// banner
 	const [showPreview, setShowPreview] = useState(previewBanner);
 	// account
-	const [showAccount, setShowAccount] = useState(true);
+	const [showAccount, setShowAccount] = useState(trialBanner);
 	const [isAllowed, setIsAllowed] = useState(allowed ?? false);
 	const [isPrivateRepo, setIsPrivateRepo] = useState(selectedVisibility === RepositoryVisibility.Private);
 	const [subscriptionSnapshot, setSubscriptionSnapshot] = useState<Subscription | undefined>(subscription);
@@ -230,11 +232,12 @@ export function GraphWrapper({
 
 	const handleDismissPreview = () => {
 		setShowPreview(false);
-		onDismissPreview?.();
+		onDismissBanner?.('preview');
 	};
 
 	const handleDismissAccount = () => {
 		setShowAccount(false);
+		onDismissBanner?.('trial');
 	};
 
 	const renderAlertContent = () => {
@@ -303,13 +306,13 @@ export function GraphWrapper({
 						<p className="alert__message">
 							Upgrade your account to use the Commit Graph and other GitLens+ features on private repos.
 						</p>
-						<p>
-							<a className="alert-action" href="command:gitlens.plus.purchase">
-								Upgrade Your Account
-							</a>
-						</p>
 					</>
 				);
+				actions = (
+					<a className="alert-action" href="command:gitlens.plus.purchase">
+						Upgrade Your Account
+					</a>
+				);
 				break;
 			case SubscriptionState.VerificationRequired:
 				icon = 'unverified';

src/webviews/apps/plus/graph/graph.tsx

@@ -4,14 +4,19 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import type { GitGraphRowType } from 'src/git/models/graph';
 import type { GraphColumnConfig } from '../../../../config';
-import type { CommitListCallback, GraphRepository, State } from '../../../../plus/webviews/graph/protocol';
+import type {
+	CommitListCallback,
+	DismissBannerParams,
+	GraphRepository,
+	State,
+} from '../../../../plus/webviews/graph/protocol';
 import {
 	DidChangeCommitsNotificationType,
 	DidChangeGraphConfigurationNotificationType,
 	DidChangeNotificationType,
 	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
-	DismissPreviewCommandType,
+	DismissBannerCommandType,
 	GetMoreCommitsCommandType,
 	UpdateColumnCommandType,
 	UpdateSelectedRepositoryCommandType as UpdateRepositorySelectionCommandType,
@@ -68,7 +73,7 @@ export class GraphApp extends App<State> {
 						(selection: { id: string; type: GitGraphRowType }[]) => this.onSelectionChanged(selection),
 						250,
 					)}
-					onDismissPreview={() => this.onDismissPreview()}
+					onDismissBanner={key => this.onDismissBanner(key)}
 					{...this.state}
 				/>,
 				$root,
@@ -218,8 +223,8 @@ export class GraphApp extends App<State> {
 		return mixedGraphColors;
 	}
 
-	private onDismissPreview() {
-		this.sendCommand(DismissPreviewCommandType, undefined);
+	private onDismissBanner(key: DismissBannerParams['key']) {
+		this.sendCommand(DismissBannerCommandType, { key: key });
 	}
 
 	private onColumnChanged(name: string, settings: GraphColumnConfig) {