Fixes timeline gate

Removes sign in from gate when signed in

Author: eamodio

src/webviews/apps/plus/graph/gate.ts

@@ -42,10 +42,10 @@ export class GlGraphGate extends GlElement {
 			)}
 			appearance="alert"
 			featureWithArticleIfNeeded="the Commit Graph"
+			?hidden=${this.state.allowed !== false}
 			.source=${{ source: 'graph', detail: 'gate' } as const}
 			.state=${this.state.subscription?.state}
 			.webroot=${this.state.webroot}
-			?visible=${!this.state.allowed}
 		>
 			<p slot="feature">
 				<a href="https://help.gitkraken.com/gitlens/gitlens-features/#commit-graph-pro">Commit Graph</a>

src/webviews/apps/plus/shared/components/feature-gate-plus-state.ts

@@ -207,11 +207,6 @@ export class GlFeatureGatePlusState extends LitElement {
 								...(this.source ?? { source: 'feature-gate' }),
 							})}"
 							>Upgrade to Pro</gl-button
-						><span
-							>or
-							<a href="${createCommandLink<Source>('gitlens.plus.login', this.source)}" title="Sign In"
-								>sign in</a
-							></span
 						>
 					</p>
 					<p>${this.renderPromo()}</p>`;
@@ -224,11 +219,6 @@ export class GlFeatureGatePlusState extends LitElement {
 							appearance="${ifDefined(appearance)}"
 							href="${createCommandLink<Source>('gitlens.plus.reactivateProTrial', this.source)}"
 							>Continue</gl-button
-						><span
-							>or
-							<a href="${createCommandLink<Source>('gitlens.plus.login', this.source)}" title="Sign In"
-								>sign in</a
-							></span
 						>
 					</p>
 					<p>

src/webviews/apps/plus/timeline/timeline.ts

@@ -40,7 +40,7 @@ export class GlTimelineApp extends GlApp<State> {
 		delegatesFocus: true,
 	};
 
-	static override styles = [timelineBaseStyles, timelineStyles];
+	static override styles = [linkStyles, timelineBaseStyles, timelineStyles];
 
 	@query('#chart')
 	private _chart?: GlTimelineChart;
@@ -95,12 +95,19 @@ export class GlTimelineApp extends GlApp<State> {
 
 	override render(): unknown {
 		return html`
-			${this.allowed
-				? html`<gl-feature-gate
-						.source=${{ source: 'timeline' as const, detail: 'gate' }}
-						.state=${this.subscription?.state}
-				  ></gl-feature-gate>`
-				: nothing}
+			<gl-feature-gate
+				?hidden=${this.allowed !== false}
+				.source=${{ source: 'timeline' as const, detail: 'gate' }}
+				.state=${this.subscription?.state}
+				><p slot="feature">
+					<a href="https://help.gitkraken.com/gitlens/gitlens-features/#visual-file-history-pro"
+						>Visual File History</a
+					>
+					<gl-feature-badge></gl-feature-badge>
+					&mdash; visualize the evolution of a file and quickly identify when the most impactful changes were
+					made and by whom.
+				</p></gl-feature-gate
+			>
 			<div class="container">
 				<progress-indicator ?active=${this._loading}></progress-indicator>
 				<header class="header" ?hidden=${!this.uri}>

src/webviews/apps/shared/components/feature-gate.ts

@@ -4,8 +4,8 @@ import type { SubscriptionState } from '../../../../constants.subscription';
 import type { Source } from '../../../../constants.telemetry';
 import type { FeaturePreview } from '../../../../features';
 import { isSubscriptionStatePaidOrTrial } from '../../../../plus/gk/utils/subscription.utils';
-import '../../plus/shared/components/feature-gate-plus-state';
 import { linkStyles } from '../../plus/shared/components/vscode.css';
+import '../../plus/shared/components/feature-gate-plus-state';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -114,18 +114,11 @@ export class GlFeatureGate extends LitElement {
 	@property({ attribute: false, type: Number })
 	state?: SubscriptionState;
 
-	@property({ type: Boolean })
-	visible?: boolean;
-
 	@property({ type: String })
 	webroot?: string;
 
 	override render(): unknown {
-		const hidden = !this.visible || (this.state != null && isSubscriptionStatePaidOrTrial(this.state));
-		// eslint-disable-next-line lit/no-this-assign-in-render
-		this.hidden = hidden;
-
-		if (hidden) return undefined;
+		if (this.hidden || isSubscriptionStatePaidOrTrial(this.state)) return undefined;
 
 		const appearance =
 			this.appearance ?? (document.body.getAttribute('data-placement') ?? 'editor') === 'editor'