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

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');
+  });
 });

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;
+}