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,124 +54,169 @@ export function NativeHistogramBanner(props: NativeHistogramInfoProps) {
               </div>
             </div>
           </div>
-          {!showHistogramExamples && (
-            <div>
-              <Button
-                className={styles.seeExamplesButton}
-                type="button"
-                fill="text"
-                variant="primary"
-                onClick={() => {
-                  setShowHistogramExamples(true);
-                }}
-              >
-                {`> See examples`}
-              </Button>
-            </div>
-          )}
+          <NativeHistogramExamplesButton
+            showHistogramExamples={showHistogramExamples}
+            setShowHistogramExamples={setShowHistogramExamples}
+          />
           {showHistogramExamples && (
-            <>
-              <div className={`${styles.histogramRow} ${styles.seeExamplesRow}`}>
-                <div className={styles.histogramImageCol}>
-                  <div>
-                    <Trans i18nKey="trails.native-histogram-banner.now">Now:</Trans>
-                  </div>
-                </div>
-                <div className={`${styles.histogramImageCol} ${styles.rightCol}`}>
-                  <div>
-                    <Trans i18nKey="trails.native-histogram-banner.previously">Previously:</Trans>
-                  </div>
-                </div>
+            <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(!showHistogramExamples)}
+      >
+        {showHistogramExamples ? `Hide examples` : `> See examples`}
+      </Button>
+    </div>
+  );
+};
+
+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}>
+          <div>
+            <Trans i18nKey="trails.native-histogram-banner.now">Now:</Trans>
+          </div>
+        </div>
+        <div className={`${styles.histogramImageCol} ${styles.rightCol}`}>
+          <div>
+            <Trans i18nKey="trails.native-histogram-banner.previously">Previously:</Trans>
+          </div>
+        </div>
+      </div>
+      <div className={`${styles.histogramRow} ${styles.seeExamplesRow}`}>
+        <div className={styles.histogramImageCol}>
+          <div className={styles.histogramRow}>
+            <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
+              <div className={styles.imageText}>
+                <Trans i18nKey="trails.native-histogram-banner.nh-heatmap">
+                  Native Histogram displayed as heatmap:
+                </Trans>
+              </div>
+              <div>
+                <img width="100%" src={images.nativeHeatmap} alt="Native Histogram displayed as heatmap" />
+              </div>
+            </div>
+            <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
+              <div className={styles.imageText}>
+                <Trans i18nKey="trails.native-histogram-banner.nh-histogram">
+                  Native Histogram displayed as histogram:
+                </Trans>
+              </div>
+              <div>
+                <img width="100%" src={images.nativeHistogram} alt="Native Histogram displayed as histogram" />
               </div>
-              <div className={`${styles.histogramRow} ${styles.seeExamplesRow}`}>
-                <div className={styles.histogramImageCol}>
-                  <div className={styles.histogramRow}>
-                    <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
-                      <div className={styles.imageText}>
-                        <Trans i18nKey="trails.native-histogram-banner.nh-heatmap">
-                          Native Histogram displayed as heatmap:
-                        </Trans>
-                      </div>
-                      <div>
-                        <img width="100%" src={images.nativeHeatmap} alt="Native Histogram displayed as heatmap" />
-                      </div>
-                    </div>
-                    <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
-                      <div className={styles.imageText}>
-                        <Trans i18nKey="trails.native-histogram-banner.nh-histogram">
-                          Native Histogram displayed as histogram:
-                        </Trans>
-                      </div>
-                      <div>
-                        <img width="100%" src={images.nativeHistogram} alt="Native Histogram displayed as histogram" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className={`${styles.histogramImageCol} ${styles.rightImageCol} ${styles.rightCol}`}>
-                  <div className={styles.histogramRow}>
-                    <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
-                      <div className={styles.imageText}>
-                        <Trans i18nKey="trails.native-histogram-banner.ch-heatmap">
-                          Classic Histogram displayed as heatmap:
-                        </Trans>
-                      </div>
-                      <div>
-                        <img width="100%" src={images.classicHeatmap} alt="Classic Histogram displayed as heatmap" />
-                      </div>
-                    </div>
-                    <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
-                      <div className={styles.imageText}>
-                        <Trans i18nKey="trails.native-histogram-banner.ch-histogram">
-                          Classic Histogram displayed as histogram:
-                        </Trans>
-                      </div>
-                      <div>
-                        <img
-                          width="100%"
-                          src={images.classicHistogram}
-                          alt="Classic Histogram displayed as histogram"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
+            </div>
+          </div>
+        </div>
+        <div className={`${styles.histogramImageCol} ${styles.rightImageCol} ${styles.rightCol}`}>
+          <div className={styles.histogramRow}>
+            <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
+              <div className={styles.imageText}>
+                <Trans i18nKey="trails.native-histogram-banner.ch-heatmap">
+                  Classic Histogram displayed as heatmap:
+                </Trans>
               </div>
-              <br />
               <div>
-                <Trans i18nKey="trails.native-histogram-banner.click-histogram">
-                  Click any of the native histograms below to explore them:
+                <img width="100%" src={images.classicHeatmap} alt="Classic Histogram displayed as heatmap" />
+              </div>
+            </div>
+            <div className={`${styles.histogramImageCol} ${styles.fontSmall}`}>
+              <div className={styles.imageText}>
+                <Trans i18nKey="trails.native-histogram-banner.ch-histogram">
+                  Classic Histogram displayed as histogram:
                 </Trans>
               </div>
               <div>
-                {nativeHistograms.map((el) => {
-                  return (
-                    <div key={el}>
-                      <Button
-                        onClick={() => {
-                          selectNativeHistogram(el);
-                          setHistogramMessage(false);
-                        }}
-                        key={el}
-                        variant="primary"
-                        size="sm"
-                        fill="text"
-                      >
-                        {el}
-                      </Button>
-                    </div>
-                  );
-                })}
+                <img width="100%" src={images.classicHistogram} alt="Classic Histogram displayed as histogram" />
               </div>
-            </>
-          )}
-        </Alert>
-      )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <br />
+      <div>
+        <Trans i18nKey="trails.native-histogram-banner.click-histogram">
+          Click any of the native histograms below to explore them:
+        </Trans>
+      </div>
+      <div>
+        {nativeHistograms.map((el) => {
+          return (
+            <div key={el}>
+              <Button
+                onClick={() => {
+                  selectNativeHistogram(el);
+                  setHistogramMessage(false);
+                }}
+                key={el}
+                variant="primary"
+                size="sm"
+                fill="text"
+              >
+                {el}
+              </Button>
+            </div>
+          );
+        })}
+      </div>
     </>
   );
-}
+};
 
-function getStyles(theme: GrafanaTheme2, chromeHeaderHeight: number) {
+function getStyles(theme: GrafanaTheme2, _chromeHeaderHeight: number) {
   return {
     histogramRow: css({
       display: 'flex',