add tips for graph for each trial day

Author: sergiolms

src/constants.storage.ts

@@ -77,8 +77,9 @@ export type GlobalStorage = {
 	'launchpadView:groups:expanded': StoredLaunchpadGroup[];
 	'graph:searchMode': StoredGraphSearchMode;
 	'views:scm:grouped:welcome:dismissed': boolean;
-} & { [key in `confirm:ai:tos:${AIProviders}`]: boolean }
-} & { [key in `plus:featurePreviewTrial:${Sources}:consumedDays`]: { startedOn: string; expiresOn: string }[] } & {
+} & { [key in `confirm:ai:tos:${AIProviders}`]: boolean } & {
+	[key in `plus:featurePreviewTrial:${Sources}:consumedDays`]: { startedOn: string; expiresOn: string }[];
+} & {
 	[key in `confirm:ai:tos:${AIProviders}`]: boolean;
 } & {
 	[key in `provider:authentication:skip:${string}`]: boolean;

src/plus/webviews/graph/graphWebview.ts

@@ -20,7 +20,7 @@ import type {
 import { GlyphChars } from '../../../constants';
 import { Commands } from '../../../constants.commands';
 import type { StoredGraphFilters, StoredGraphRefType } from '../../../constants.storage';
-import { proPreviewLengthInDays, proTrialLengthInDays } from '../../../constants.subscription';
+import { proPreviewLengthInDays } from '../../../constants.subscription';
 import type { GraphShownTelemetryContext, GraphTelemetryContext, TelemetryEvents } from '../../../constants.telemetry';
 import type { Container } from '../../../container';
 import { CancellationError } from '../../../errors';
@@ -2574,6 +2574,7 @@ export class GraphWebviewProvider implements WebviewProvider<State, State, Graph
 
 		return {
 			...this.host.baseWebviewState,
+			webroot: this.host.getWebRoot(),
 			windowFocused: this.isWindowFocused,
 			repositories: await formatRepositories(this.container.git.openRepositories),
 			selectedRepository: this.repository.path,

src/plus/webviews/graph/protocol.ts

@@ -25,7 +25,7 @@ import type {
 import type { Config, DateStyle, GraphBranchesVisibility } from '../../../config';
 import type { SupportedCloudIntegrationIds } from '../../../constants.integrations';
 import type { SearchQuery } from '../../../constants.search';
-import type { Source, Sources } from '../../../constants.telemetry';
+import type { Sources } from '../../../constants.telemetry';
 import type { RepositoryVisibility } from '../../../git/gitProvider';
 import type { GitTrackingState } from '../../../git/models/branch';
 import type { GitGraphRowType } from '../../../git/models/graph';
@@ -93,6 +93,7 @@ export const supportedRefMetadataTypes: GraphRefMetadataType[] = ['upstream', 'p
 
 export interface State extends WebviewState {
 	windowFocused?: boolean;
+	webroot?: string;
 	repositories?: GraphRepository[];
 	selectedRepository?: string;
 	selectedRepositoryVisibility?: RepositoryVisibility;

src/webviews/apps/media/graph-commit-search.png

@@ -1547,6 +1547,7 @@ export function GraphWrapper({
 				featureWithArticleIfNeeded="the Commit Graph"
 				source={{ source: 'graph', detail: 'gate' }}
 				state={subscription?.state}
+				webroot={state.webroot}
 				visible={!allowed}
 			>
 				<p slot="feature">

src/webviews/apps/media/graph-minimap.png

@@ -1,3 +1,4 @@
+import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { urls } from '../../../../../constants';
@@ -90,6 +91,9 @@ export class GlFeatureGatePlusState extends LitElement {
 	@property({ attribute: false, type: Number })
 	state?: SubscriptionState;
 
+	@property({ type: String })
+	webroot?: string;
+
 	protected override firstUpdated() {
 		if (this.appearance === 'alert') {
 			queueMicrotask(() => this.button.focus());
@@ -111,8 +115,6 @@ export class GlFeatureGatePlusState extends LitElement {
 			consumedDaysCount = this.featureInPreviewTrial?.[feature]?.consumedDays?.length ?? 0;
 		}
 
-		const feature = this.source?.source || '';
-
 		switch (this.state) {
 			case SubscriptionState.VerificationRequired:
 				return html`
@@ -142,21 +144,7 @@ export class GlFeatureGatePlusState extends LitElement {
 					proPreviewLengthInDays - consumedDaysCount > 0
 				) {
 					return html`
-						<gl-button appearance="${appearance}" href="${this.featurePreviewTrialCommandLink}"
-							>Continue</gl-button
-						>
-						<p>
-							Continuing gives you ${pluralize('day', proPreviewLengthInDays - consumedDaysCount)} to
-							preview ${this.featureWithArticleIfNeeded ? `${this.featureWithArticleIfNeeded} on` : ''}
-							privately-hosted repositories.<br />
-							${appearance !== 'alert' ? html`<br />` : ''} For full access to all GitLens Pro features,
-							<a href="${generateCommandLink(Commands.PlusSignUp, this.source)}"
-								>start your free ${proTrialLengthInDays}-day Pro trial</a
-							>
-							- no credit card required. Or
-							<a href="${generateCommandLink(Commands.PlusLogin, this.source)}" title="Sign In">sign in</a
-							>.
-						</p>
+						${this.getFeaturePreviewModalFor(feature, proPreviewLengthInDays - consumedDaysCount)}
 					`;
 				}
 
@@ -206,6 +194,80 @@ export class GlFeatureGatePlusState extends LitElement {
 	private renderPromo(promo: Promo | undefined) {
 		return html`<gl-promo .promo=${promo}></gl-promo>`;
 	}
+
+	private getFeaturePreviewModalFor(feature: Sources, daysLeft: number) {
+		const appearance = (this.appearance ?? 'alert') === 'alert' ? 'alert' : nothing;
+		let partial: TemplateResult<1> | undefined;
+		switch (feature) {
+			case 'graph':
+				switch (daysLeft) {
+					case 2:
+						partial = html`<p>Try Commit Search</p>
+							<p>
+								Search for commits in your repo by author, commit message, SHA, file, change, or type.
+								Turn on the commit filter to show only commits that match your query.
+							</p>
+							<p>
+								<img
+									src="${this.webroot ?? ''}/media/graph-commit-search.webp"
+									style="width:100%"
+									alt="Graph Commit Search"
+								/>
+							</p> `;
+						break;
+					case 1:
+						partial = html`
+							<p>Try the Graph Minimap</p>
+							<p>
+								Visualize the amount of changes to a repository over time, and inspect specific points
+								in the history to locate branches, stashes, tags and pull requests.
+							</p>
+							<p>
+								<img
+									src="${this.webroot ?? ''}/media/graph-minimap.webp"
+									style="width:100%"
+									alt="Graph Minimap"
+								/>
+							</p>
+						`;
+						break;
+				}
+				return html`
+					${partial}
+					<gl-button appearance="${appearance}" href="${this.featurePreviewTrialCommandLink}"
+						>Continue</gl-button
+					>
+					<p>
+						Continuing gives you ${pluralize('day', daysLeft)} to preview
+						${this.featureWithArticleIfNeeded ? `${this.featureWithArticleIfNeeded} on` : ''}
+						privately-hosted repositories.<br />
+						${appearance !== 'alert' ? html`<br />` : ''} For full access to all GitLens Pro features,
+						<a href="${generateCommandLink(Commands.PlusSignUp, this.source)}"
+							>start your free ${proTrialLengthInDays}-day Pro trial</a
+						>
+						- no credit card required. Or
+						<a href="${generateCommandLink(Commands.PlusLogin, this.source)}" title="Sign In">sign in</a>.
+					</p>
+				`;
+			default:
+				return html`
+					<gl-button appearance="${appearance}" href="${this.featurePreviewTrialCommandLink}"
+						>Continue</gl-button
+					>
+					<p>
+						Continuing gives you ${pluralize('day', daysLeft)} to preview
+						${this.featureWithArticleIfNeeded ? `${this.featureWithArticleIfNeeded} on` : ''}
+						privately-hosted repositories.<br />
+						${appearance !== 'alert' ? html`<br />` : ''} For full access to all GitLens Pro features,
+						<a href="${generateCommandLink(Commands.PlusSignUp, this.source)}"
+							>start your free ${proTrialLengthInDays}-day Pro trial</a
+						>
+						- no credit card required. Or
+						<a href="${generateCommandLink(Commands.PlusLogin, this.source)}" title="Sign In">sign in</a>.
+					</p>
+				`;
+		}
+	}
 }
 
 function generateCommandLink(command: Commands, source: Source | undefined) {

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

@@ -113,6 +113,9 @@ export class GlFeatureGate extends LitElement {
 	@property({ type: Boolean })
 	visible?: boolean;
 
+	@property({ type: String })
+	webroot?: string;
+
 	override render() {
 		if (!this.visible || (this.state != null && isSubscriptionStatePaidOrTrial(this.state))) {
 			this.hidden = true;
@@ -125,17 +128,26 @@ export class GlFeatureGate extends LitElement {
 				: 'welcome';
 
 		this.hidden = false;
+
+		const featureInTrial = this.source?.source;
+		const featureInTrialInfo = featureInTrial ? this.featureInPreviewTrial?.[featureInTrial] : undefined;
+		const shouldHideFeature =
+			featureInTrial === 'graph' &&
+			featureInTrialInfo &&
+			featureInTrialInfo.consumedDays.length > 0 &&
+			featureInTrialInfo.consumedDays.length < 3;
 		return html`
 			<section>
 				<slot></slot>
-				<slot name="feature"></slot>
+				<slot name="feature" ?hidden=${shouldHideFeature}></slot>
 				<gl-feature-gate-plus-state
 					appearance=${appearance}
 					.featureWithArticleIfNeeded=${this.featureWithArticleIfNeeded}
 					.source=${this.source}
 					.state=${this.state}
 					.featureInPreviewTrial=${this.featureInPreviewTrial}
-					featurePreviewTrialCommandLink=${this.featurePreviewTrialCommandLink}
+					.featurePreviewTrialCommandLink=${this.featurePreviewTrialCommandLink}
+					.webroot=${this.webroot}
 				></gl-feature-gate-plus-state>
 			</section>
 		`;