Skip to content

Commit ef116f9

Browse files
vishwa-ubervishwa-uber
committed
Adding new feature live bar for Grafana helm setup
1 parent fc64180 commit ef116f9

File tree

5 files changed

+111
-193
lines changed

5 files changed

+111
-193
lines changed

‎src/components/GrafanaSetupPopup/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const GrafanaSetupPopup: React.FC = () => {
2525
<NewFeaturePopup
2626
featureId="grafana_helm_setup_2025_ultra_v2"
2727
title="✨ Brand New: Grafana Helm Setup Guide"
28-
description="🎯 Get production-ready monitoring for your Cadence workflows! Our comprehensive guide covers ServiceMonitor setup, automated metrics scraping, and pre-built dashboards. Perfect for Kubernetes deployments."
28+
description=""
2929
linkUrl="/docs/concepts/grafana-helm-setup"
30-
linkText="🚀 Explore the Guide"
30+
linkText="📖 View Guide"
3131
showDays={365}
3232
/>
3333
</div>

‎src/components/NewFeaturePopup/index.tsx‎

Lines changed: 23 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,18 @@ const NewFeaturePopup: React.FC<NewFeaturePopupProps> = ({
3838
const now = new Date().getTime();
3939

4040
if (!lastShown) {
41-
// First time - show popup with delay for better UX
42-
console.log('🎯 First time, showing popup');
43-
setTimeout(() => {
44-
setIsVisible(true);
45-
setTimeout(() => setIsAnimating(true), 100);
46-
}, 2000); // 2 second delay
41+
// First time - show popup immediately
42+
console.log('🎯 First time, showing popup immediately');
43+
setIsVisible(true);
44+
setIsAnimating(true);
4745
localStorage.setItem(`popup_${featureId}_lastShown`, now.toString());
4846
} else {
4947
const daysSinceLastShown = (now - parseInt(lastShown)) / (1000 * 60 * 60 * 24);
5048
console.log('📅 Days since last shown:', daysSinceLastShown);
5149
if (daysSinceLastShown < showDays) {
52-
console.log('✨ Within show period, showing popup');
53-
setTimeout(() => {
54-
setIsVisible(true);
55-
setTimeout(() => setIsAnimating(true), 100);
56-
}, 2000);
50+
console.log('✨ Within show period, showing popup immediately');
51+
setIsVisible(true);
52+
setIsAnimating(true);
5753
} else {
5854
console.log('⏰ Outside show period, not showing popup');
5955
}
@@ -82,86 +78,27 @@ const NewFeaturePopup: React.FC<NewFeaturePopupProps> = ({
8278
}
8379

8480
return (
85-
<>
86-
<div
87-
className={`${styles.overlay} ${isAnimating ? styles.overlayVisible : styles.overlayHidden}`}
88-
onClick={handleClose}
89-
/>
90-
<div className={`${styles.popup} ${isAnimating ? styles.popupVisible : styles.popupHidden}`}>
91-
{/* Decorative elements */}
92-
<div className={styles.decorativeTop}></div>
93-
<div className={styles.floatingOrbs}>
94-
<div className={styles.orb1}></div>
95-
<div className={styles.orb2}></div>
96-
<div className={styles.orb3}></div>
97-
</div>
98-
99-
{/* Header */}
100-
<div className={styles.header}>
101-
<div className={styles.iconContainer}>
102-
<div className={styles.sparkles}>✨</div>
103-
<div className={styles.iconGlow}></div>
81+
<div
82+
className={`${styles.popup} ${isAnimating ? styles.popupVisible : styles.popupHidden}`}
83+
onClick={handleNavigate}
84+
>
85+
<div className={styles.content}>
86+
{/* Badge */}
87+
<div className={styles.badge}>
88+
<div className={styles.badgeInner}>
89+
<span className={styles.badgeText}>NEW FEATURE</span>
10490
</div>
105-
<button className={styles.closeButton} onClick={handleClose} aria-label="Close popup">
106-
<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
107-
<path d="M9 7.5l3.5-3.5a1 1 0 111.414 1.414L10.414 9l3.5 3.5a1 1 0 11-1.414 1.414L9 10.414l-3.5 3.5a1 1 0 11-1.414-1.414L7.586 9 4.086 5.5A1 1 0 115.5 4.086L9 7.5z"/>
108-
</svg>
109-
</button>
11091
</div>
11192

112-
{/* Content */}
113-
<div className={styles.content}>
114-
{/* Premium badge */}
115-
<div className={styles.badge}>
116-
<div className={styles.badgeInner}>
117-
<span className={styles.badgeText}>NEW FEATURE</span>
118-
<div className={styles.badgeShine}></div>
119-
</div>
120-
<div className={styles.badgePulse}></div>
121-
</div>
122-
123-
{/* Title */}
124-
<h3 className={styles.title}>{title}</h3>
125-
126-
{/* Description */}
127-
<p className={styles.description}>{description}</p>
128-
129-
{/* Feature highlights */}
130-
<div className={styles.features}>
131-
<div className={styles.feature}>
132-
<div className={styles.featureIcon}>⚡</div>
133-
<span>Quick Setup</span>
134-
</div>
135-
<div className={styles.feature}>
136-
<div className={styles.featureIcon}>📊</div>
137-
<span>Pre-built Dashboards</span>
138-
</div>
139-
<div className={styles.feature}>
140-
<div className={styles.featureIcon}>🔄</div>
141-
<span>Auto ServiceMonitor</span>
142-
</div>
143-
</div>
144-
145-
{/* Actions */}
146-
<div className={styles.actions}>
147-
<button className={styles.primaryButton} onClick={handleNavigate}>
148-
<span className={styles.buttonText}>{linkText}</span>
149-
<div className={styles.buttonShine}></div>
150-
<svg className={styles.buttonIcon} width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
151-
<path d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
152-
<path d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
153-
</svg>
154-
</button>
155-
<button className={styles.secondaryButton} onClick={handleDismiss}>
156-
<span>Maybe later</span>
157-
</button>
158-
</div>
159-
</div>
93+
{/* Title only */}
94+
<h3 className={styles.title}>{title}</h3>
16095

161-
{/* Bottom gradient border */}
162-
<div className={styles.gradientBorder}></div>
96+
{/* Click indicator */}
97+
<div className={styles.clickIndicator}>
98+
<span className={styles.clickText}>Click to explore →</span>
99+
</div>
163100
</div>
164-
</>
101+
</div>
165102
);
166103
};
167104

0 commit comments

Comments
 (0)