From 0a88cb528abb7ec823b0db315e64dd5b7162a697 Mon Sep 17 00:00:00 2001
From: Brendan O'Handley <brendan.ohandley@grafana.com>
Date: Wed, 12 Feb 2025 16:51:58 -0600
Subject: [PATCH] Explore metrics: Show the native histogram banner once
 (#99857)

* use local storage to show the native histogram banner has been loaded

* remove banner logic from datatrail

* set banner shown in local storage on closing the banner
---
 .../trails/banners/NativeHistogramBanner.test.tsx    |  7 +++++++
 .../trails/banners/NativeHistogramBanner.tsx         | 12 +++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/public/app/features/trails/banners/NativeHistogramBanner.test.tsx b/public/app/features/trails/banners/NativeHistogramBanner.test.tsx
index d5191037dae..23d4d4f21d1 100644
--- a/public/app/features/trails/banners/NativeHistogramBanner.test.tsx
+++ b/public/app/features/trails/banners/NativeHistogramBanner.test.tsx
@@ -51,4 +51,11 @@ describe('NativeHistogramBanner', () => {
     fireEvent.click(histogramButton);
     expect(mockTrail.publishEvent).toHaveBeenCalledWith(new MetricSelectedEvent('histogram1'), true);
   });
+
+  test('Set that the banner has been shown in local storage when a user closes the banner', () => {
+    render(<NativeHistogramBanner {...mockProps} />);
+    // click the button with aria label "Close alert"
+    fireEvent.click(screen.getByLabelText('Close alert'));
+    expect(localStorage.getItem('nativeHistogramBanner')).toBe('true');
+  });
 });
diff --git a/public/app/features/trails/banners/NativeHistogramBanner.tsx b/public/app/features/trails/banners/NativeHistogramBanner.tsx
index 68ca35c0c67..d32375e054e 100644
--- a/public/app/features/trails/banners/NativeHistogramBanner.tsx
+++ b/public/app/features/trails/banners/NativeHistogramBanner.tsx
@@ -21,7 +21,7 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
   const [showHistogramExamples, setShowHistogramExamples] = useState(false);
   const styles = useStyles2(getStyles, 0);
 
-  if (!histogramsLoaded || nativeHistograms.length === 0 || !histogramMessage) {
+  if (bannerHasBeenShown() || !histogramsLoaded || nativeHistograms.length === 0 || !histogramMessage) {
     return null;
   }
 
@@ -32,6 +32,8 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
           title={'Native Histogram Support'}
           severity={'info'}
           onRemove={() => {
+            // when a user explicitly closes the banner, save that it has been closed in local storage to not show again
+            setBannerHasBeenShown();
             setHistogramMessage(false);
           }}
           className={styles.banner}
@@ -275,3 +277,11 @@ function getStyles(theme: GrafanaTheme2, _chromeHeaderHeight: number) {
     }),
   };
 }
+
+export function setBannerHasBeenShown() {
+  localStorage.setItem('nativeHistogramBanner', 'true');
+}
+
+export function bannerHasBeenShown() {
+  return localStorage.getItem('nativeHistogramBanner') ?? false;
+}