feat: hide examples via button

public/app/features/trails/banners/NativeHistogramBanner.tsx

@@ -1,18 +1,18 @@
 import { css } from '@emotion/css';
-import { useState } from 'react';
+import { useState, type Dispatch, type SetStateAction } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, useTheme, Alert, Button } from '@grafana/ui';
+import { useStyles2, useTheme2, Alert, Button } from '@grafana/ui';
 import { Trans } from '@grafana/ui/src/utils/i18n';
 
 import { DataTrail } from '../DataTrail';
 import { MetricSelectedEvent } from '../shared';
 
-type NativeHistogramInfoProps = {
+interface NativeHistogramInfoProps {
   histogramsLoaded: boolean;
   nativeHistograms: string[];
   trail: DataTrail;
-};
+}
 
 export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
   const { histogramsLoaded, nativeHistograms, trail } = props;
@@ -20,29 +20,13 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
   const [showHistogramExamples, setShowHistogramExamples] = useState(false);
   const styles = useStyles2(getStyles, 0);
 
-  const isDark = useTheme().isDark;
-  const images = {
-    nativeHeatmap: isDark
-      ? 'public/img/native-histograms/DarkModeHeatmapNativeHistogram.png'
-      : 'public/img/native-histograms/LightModeHeatmapNativeHistogram.png',
-    classicHeatmap: isDark
-      ? 'public/img/native-histograms/DarkModeHeatmapClassicHistogram.png'
-      : 'public/img/native-histograms/LightModeHeatmapClassicHistogram.png',
-    nativeHistogram: isDark
-      ? 'public/img/native-histograms/DarkModeHistogramNativehistogram.png'
-      : 'public/img/native-histograms/LightModeHistogramClassicHistogram.png',
-    classicHistogram: isDark
-      ? 'public/img/native-histograms/DarkModeHistogramClassicHistogram.png'
-      : 'public/img/native-histograms/LightModeHistogramClassicHistogram.png',
-  };
-
-  const selectNativeHistogram = (metric: string) => {
-    trail.publishEvent(new MetricSelectedEvent(metric), true);
-  };
+  if (!histogramsLoaded || nativeHistograms.length === 0 || !histogramMessage) {
+    return null;
+  }
 
   return (
     <>
-      {histogramsLoaded && (nativeHistograms ?? []).length > 0 && histogramMessage && (
+      {
         <Alert
           title={'Native Histogram Support'}
           severity={'info'}
@@ -70,22 +54,75 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
               </div>
             </div>
           </div>
-          {!showHistogramExamples && (
+          <NativeHistogramExamplesButton
+            showHistogramExamples={showHistogramExamples}
+            setShowHistogramExamples={setShowHistogramExamples}
+          />
+          {showHistogramExamples && (
+            <NativeHistogramExamples
+              trail={trail}
+              nativeHistograms={nativeHistograms}
+              setHistogramMessage={setHistogramMessage}
+            />
+          )}
+        </Alert>
+      }
+    </>
+  );
+}
+
+interface NativeHistogramExamplesButtonProps {
+  showHistogramExamples: boolean;
+  setShowHistogramExamples: Dispatch<SetStateAction<boolean>>;
+}
+
+const NativeHistogramExamplesButton = ({
+  showHistogramExamples,
+  setShowHistogramExamples,
+}: NativeHistogramExamplesButtonProps) => {
+  const styles = useStyles2(getStyles, 0);
+
+  return (
     <div>
       <Button
         className={styles.seeExamplesButton}
         type="button"
         fill="text"
         variant="primary"
-                onClick={() => {
-                  setShowHistogramExamples(true);
-                }}
+        onClick={() => setShowHistogramExamples(!showHistogramExamples)}
       >
-                {`> See examples`}
+        {showHistogramExamples ? `Hide examples` : `> See examples`}
       </Button>
     </div>
-          )}
-          {showHistogramExamples && (
+  );
+};
+
+type NativeHistogramExamplesProps = Pick<NativeHistogramInfoProps, 'trail' | 'nativeHistograms'> & {
+  setHistogramMessage: Dispatch<SetStateAction<boolean>>;
+};
+
+const NativeHistogramExamples = ({ trail, nativeHistograms, setHistogramMessage }: NativeHistogramExamplesProps) => {
+  const styles = useStyles2(getStyles, 0);
+  const isDark = useTheme2().isDark;
+  const selectNativeHistogram = (metric: string) => {
+    trail.publishEvent(new MetricSelectedEvent(metric), true);
+  };
+  const images = {
+    nativeHeatmap: isDark
+      ? 'public/img/native-histograms/DarkModeHeatmapNativeHistogram.png'
+      : 'public/img/native-histograms/LightModeHeatmapNativeHistogram.png',
+    classicHeatmap: isDark
+      ? 'public/img/native-histograms/DarkModeHeatmapClassicHistogram.png'
+      : 'public/img/native-histograms/LightModeHeatmapClassicHistogram.png',
+    nativeHistogram: isDark
+      ? 'public/img/native-histograms/DarkModeHistogramNativehistogram.png'
+      : 'public/img/native-histograms/LightModeHistogramClassicHistogram.png',
+    classicHistogram: isDark
+      ? 'public/img/native-histograms/DarkModeHistogramClassicHistogram.png'
+      : 'public/img/native-histograms/LightModeHistogramClassicHistogram.png',
+  };
+
+  return (
     <>
       <div className={`${styles.histogramRow} ${styles.seeExamplesRow}`}>
         <div className={styles.histogramImageCol}>
@@ -143,11 +180,7 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
                 </Trans>
               </div>
               <div>
-                        <img
-                          width="100%"
-                          src={images.classicHistogram}
-                          alt="Classic Histogram displayed as histogram"
-                        />
+                <img width="100%" src={images.classicHistogram} alt="Classic Histogram displayed as histogram" />
               </div>
             </div>
           </div>
@@ -180,14 +213,10 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
         })}
       </div>
     </>
-          )}
-        </Alert>
-      )}
-    </>
   );
-}
+};
 
-function getStyles(theme: GrafanaTheme2, chromeHeaderHeight: number) {
+function getStyles(theme: GrafanaTheme2, _chromeHeaderHeight: number) {
   return {
     histogramRow: css({
       display: 'flex',