diff --git a/src/plus/webviews/graph/graphWebview.ts b/src/plus/webviews/graph/graphWebview.ts index b9879cb..20425b4 100644 --- a/src/plus/webviews/graph/graphWebview.ts +++ b/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 { private _theme: ColorTheme | undefined; private previewBanner?: boolean; + private trialBanner?: boolean; constructor(container: Container) { super( @@ -176,8 +177,8 @@ export class GraphWebview extends WebviewBase { 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 { 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 { private async getState(): Promise { 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 { return { previewBanner: this.previewBanner, + trialBanner: this.trialBanner, repositories: formatRepositories(this.container.git.openRepositories), selectedRepository: this.repository.path, selectedSha: this._selectedSha, diff --git a/src/plus/webviews/graph/protocol.ts b/src/plus/webviews/graph/protocol.ts index 601b5f3..9737d7d 100644 --- a/src/plus/webviews/graph/protocol.ts +++ b/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; @@ -63,7 +64,10 @@ export interface CommitListCallback { } // Commands -export const DismissPreviewCommandType = new IpcCommandType('graph/dismissPreview'); +export interface DismissBannerParams { + key: 'preview' | 'trial'; +} +export const DismissBannerCommandType = new IpcCommandType('graph/dismissBanner'); export interface GetMoreCommitsParams { limit?: number; diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx index b7cedc9..bffa1a8 100644 --- a/src/webviews/apps/plus/graph/GraphWrapper.tsx +++ b/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); @@ -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({

Upgrade your account to use the Commit Graph and other GitLens+ features on private repos.

-

- - Upgrade Your Account - -

); + actions = ( + + Upgrade Your Account + + ); break; case SubscriptionState.VerificationRequired: icon = 'unverified'; diff --git a/src/webviews/apps/plus/graph/graph.tsx b/src/webviews/apps/plus/graph/graph.tsx index ac55d78..3443d75 100644 --- a/src/webviews/apps/plus/graph/graph.tsx +++ b/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 { (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 { return mixedGraphColors; } - private onDismissPreview() { - this.sendCommand(DismissPreviewCommandType, undefined); + private onDismissBanner(key: DismissBannerParams['key']) { + this.sendCommand(DismissBannerCommandType, { key: key }); } private onColumnChanged(name: string, settings: GraphColumnConfig) {