From 0f1cefa94249040dd4b4b0f3d06968cd50e4dabb Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Tue, 27 Feb 2024 12:07:55 -0600
Subject: [PATCH] VizTooltip: Cleanup (#83462)

---
 .../src/components/VizTooltip/HeaderLabel.tsx | 24 ---------
 .../VizTooltip/VizTooltipContent.tsx          | 54 +++++++------------
 .../VizTooltip/VizTooltipHeader.tsx           | 25 +++++----
 .../VizTooltip/VizTooltipHeaderLabelValue.tsx | 25 ---------
 .../components/VizTooltip/VizTooltipRow.tsx   |  6 +--
 .../src/components/VizTooltip/types.ts        |  2 +-
 .../src/components/VizTooltip/utils.ts        | 10 ++--
 .../panel/heatmap/HeatmapHoverView.tsx        | 25 +++++----
 .../state-timeline/StateTimelineTooltip2.tsx  |  8 +--
 .../panel/timeseries/TimeSeriesTooltip.tsx    |  8 +--
 .../plugins/panel/xychart/XYChartTooltip.tsx  | 10 ++--
 11 files changed, 73 insertions(+), 124 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx
 delete mode 100644 packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx

diff --git a/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx b/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx
deleted file mode 100644
index b18c1510dde..00000000000
--- a/packages/grafana-ui/src/components/VizTooltip/HeaderLabel.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { VizTooltipRow } from './VizTooltipRow';
-import { LabelValue } from './types';
-
-interface Props {
-  headerLabel: LabelValue;
-  isPinned: boolean;
-}
-
-export const HeaderLabel = ({ headerLabel, isPinned }: Props) => {
-  const { label, value, color, colorIndicator } = headerLabel;
-
-  return (
-    <VizTooltipRow
-      label={label}
-      value={value}
-      color={color}
-      colorIndicator={colorIndicator}
-      marginRight={'22px'}
-      isPinned={isPinned}
-    />
-  );
-};
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
index 2d48af640c5..802debb59c8 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
@@ -1,21 +1,21 @@
 import { css } from '@emotion/css';
-import React, { CSSProperties, ReactElement } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 
 import { VizTooltipRow } from './VizTooltipRow';
-import { LabelValue } from './types';
+import { VizTooltipItem } from './types';
 
-interface Props {
-  contentLabelValue: LabelValue[];
-  customContent?: ReactElement[];
+interface VizTooltipContentProps {
+  items: VizTooltipItem[];
+  children?: ReactNode;
   scrollable?: boolean;
   isPinned: boolean;
 }
 
-export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned, scrollable = false }: Props) => {
+export const VizTooltipContent = ({ items, children, isPinned, scrollable = false }: VizTooltipContentProps) => {
   const styles = useStyles2(getStyles);
 
   const scrollableStyle: CSSProperties = scrollable
@@ -27,31 +27,20 @@ export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned,
 
   return (
     <div className={styles.wrapper} style={scrollableStyle}>
-      <div>
-        {contentLabelValue.map((labelValue, i) => {
-          const { label, value, color, colorIndicator, colorPlacement, isActive } = labelValue;
-          return (
-            <VizTooltipRow
-              key={i}
-              label={label}
-              value={value}
-              color={color}
-              colorIndicator={colorIndicator}
-              colorPlacement={colorPlacement}
-              isActive={isActive}
-              justify={'space-between'}
-              isPinned={isPinned}
-            />
-          );
-        })}
-      </div>
-      {customContent?.map((content, i) => {
-        return (
-          <div key={i} className={styles.customContentPadding}>
-            {content}
-          </div>
-        );
-      })}
+      {items.map(({ label, value, color, colorIndicator, colorPlacement, isActive }, i) => (
+        <VizTooltipRow
+          key={i}
+          label={label}
+          value={value}
+          color={color}
+          colorIndicator={colorIndicator}
+          colorPlacement={colorPlacement}
+          isActive={isActive}
+          justify={'space-between'}
+          isPinned={isPinned}
+        />
+      ))}
+      {children}
     </div>
   );
 };
@@ -65,7 +54,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
     borderTop: `1px solid ${theme.colors.border.medium}`,
     padding: theme.spacing(1),
   }),
-  customContentPadding: css({
-    padding: `${theme.spacing(1)} 0`,
-  }),
 });
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx
index 6e497e96d26..360145db48f 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx
@@ -1,27 +1,32 @@
 import { css } from '@emotion/css';
-import React, { ReactElement } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 
-import { HeaderLabel } from './HeaderLabel';
-import { VizTooltipHeaderLabelValue } from './VizTooltipHeaderLabelValue';
-import { LabelValue } from './types';
+import { VizTooltipRow } from './VizTooltipRow';
+import { VizTooltipItem } from './types';
 
 interface Props {
-  headerLabel: LabelValue;
-  keyValuePairs?: LabelValue[];
-  customValueDisplay?: ReactElement | null;
+  item: VizTooltipItem;
   isPinned: boolean;
 }
-export const VizTooltipHeader = ({ headerLabel, keyValuePairs, customValueDisplay, isPinned }: Props) => {
+export const VizTooltipHeader = ({ item, isPinned }: Props) => {
   const styles = useStyles2(getStyles);
 
+  const { label, value, color, colorIndicator } = item;
+
   return (
     <div className={styles.wrapper}>
-      <HeaderLabel headerLabel={headerLabel} isPinned={isPinned} />
-      {customValueDisplay || <VizTooltipHeaderLabelValue keyValuePairs={keyValuePairs} isPinned={isPinned} />}
+      <VizTooltipRow
+        label={label}
+        value={value}
+        color={color}
+        colorIndicator={colorIndicator}
+        marginRight={'22px'}
+        isPinned={isPinned}
+      />
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx
deleted file mode 100644
index 3a930ba5c18..00000000000
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { VizTooltipRow } from './VizTooltipRow';
-import { LabelValue } from './types';
-
-interface Props {
-  keyValuePairs?: LabelValue[];
-  isPinned: boolean;
-}
-
-export const VizTooltipHeaderLabelValue = ({ keyValuePairs, isPinned }: Props) => (
-  <>
-    {keyValuePairs?.map((keyValuePair, i) => (
-      <VizTooltipRow
-        key={i}
-        label={keyValuePair.label}
-        value={keyValuePair.value}
-        color={keyValuePair.color}
-        colorIndicator={keyValuePair.colorIndicator!}
-        justify={'space-between'}
-        isPinned={isPinned}
-      />
-    ))}
-  </>
-);
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
index f6f079c511e..5faa6b31dfa 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -8,9 +8,9 @@ import { InlineToast } from '../InlineToast/InlineToast';
 import { Tooltip } from '../Tooltip';
 
 import { ColorIndicatorPosition, VizTooltipColorIndicator } from './VizTooltipColorIndicator';
-import { ColorPlacement, LabelValue } from './types';
+import { ColorPlacement, VizTooltipItem } from './types';
 
-interface Props extends Omit<LabelValue, 'value'> {
+interface VizTooltipRowProps extends Omit<VizTooltipItem, 'value'> {
   value: string | number | null | ReactNode;
   justify?: string;
   isActive?: boolean; // for series list
@@ -36,7 +36,7 @@ export const VizTooltipRow = ({
   isActive = false,
   marginRight = '0px',
   isPinned,
-}: Props) => {
+}: VizTooltipRowProps) => {
   const styles = useStyles2(getStyles, justify, marginRight);
 
   const [showLabelTooltip, setShowLabelTooltip] = useState(false);
diff --git a/packages/grafana-ui/src/components/VizTooltip/types.ts b/packages/grafana-ui/src/components/VizTooltip/types.ts
index a33868ce7b5..8a734a85092 100644
--- a/packages/grafana-ui/src/components/VizTooltip/types.ts
+++ b/packages/grafana-ui/src/components/VizTooltip/types.ts
@@ -17,7 +17,7 @@ export enum ColorPlacement {
   trailing = 'trailing',
 }
 
-export interface LabelValue {
+export interface VizTooltipItem {
   label: string;
   value: string;
   color?: string;
diff --git a/packages/grafana-ui/src/components/VizTooltip/utils.ts b/packages/grafana-ui/src/components/VizTooltip/utils.ts
index 7bbc0795b69..70de02fd701 100644
--- a/packages/grafana-ui/src/components/VizTooltip/utils.ts
+++ b/packages/grafana-ui/src/components/VizTooltip/utils.ts
@@ -2,7 +2,7 @@ import { FALLBACK_COLOR, Field, FieldType, formattedValueToString } from '@grafa
 import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
 
 import { ColorIndicatorStyles } from './VizTooltipColorIndicator';
-import { ColorIndicator, ColorPlacement, LabelValue } from './types';
+import { ColorIndicator, ColorPlacement, VizTooltipItem } from './types';
 
 export const calculateTooltipPosition = (
   xPos = 0,
@@ -70,9 +70,9 @@ export const getColorIndicatorClass = (colorIndicator: string, styles: ColorIndi
   }
 };
 
-const numberCmp = (a: LabelValue, b: LabelValue) => a.numeric! - b.numeric!;
+const numberCmp = (a: VizTooltipItem, b: VizTooltipItem) => a.numeric! - b.numeric!;
 const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
-const stringCmp = (a: LabelValue, b: LabelValue) => collator.compare(`${a.value}`, `${b.value}`);
+const stringCmp = (a: VizTooltipItem, b: VizTooltipItem) => collator.compare(`${a.value}`, `${b.value}`);
 
 export const getContentItems = (
   fields: Field[],
@@ -82,8 +82,8 @@ export const getContentItems = (
   mode: TooltipDisplayMode,
   sortOrder: SortOrder,
   fieldFilter = (field: Field) => true
-): LabelValue[] => {
-  let rows: LabelValue[] = [];
+): VizTooltipItem[] => {
+  let rows: VizTooltipItem[] = [];
 
   let allNumeric = false;
 
diff --git a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
index ff8d3c2514e..8a4e16f918f 100644
--- a/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
+++ b/public/app/plugins/panel/heatmap/HeatmapHoverView.tsx
@@ -14,11 +14,11 @@ import {
   ScopedVars,
 } from '@grafana/data';
 import { HeatmapCellLayout } from '@grafana/schema';
-import { TooltipDisplayMode, useStyles2 } from '@grafana/ui';
+import { TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
-import { ColorIndicator, ColorPlacement, LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
+import { ColorIndicator, ColorPlacement, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
@@ -112,7 +112,7 @@ const HeatmapHoverCell = ({
 
   let nonNumericOrdinalDisplay: string | undefined = undefined;
 
-  let contentItems: LabelValue[] = [];
+  let contentItems: VizTooltipItem[] = [];
 
   const getYValueIndex = (idx: number) => {
     return idx % data.yBucketCount! ?? 0;
@@ -204,7 +204,7 @@ const HeatmapHoverCell = ({
     return vals;
   };
 
-  const getContentLabels = (): LabelValue[] => {
+  const getContentLabels = (): VizTooltipItem[] => {
     const isMulti = mode === TooltipDisplayMode.Multi && !isPinned;
 
     if (nonNumericOrdinalDisplay) {
@@ -242,7 +242,7 @@ const HeatmapHoverCell = ({
   let count = getCountValue(index);
 
   if (mode === TooltipDisplayMode.Single || isPinned) {
-    const fromToInt: LabelValue[] = interval ? [{ label: 'Duration', value: formatMilliseconds(interval) }] : [];
+    const fromToInt: VizTooltipItem[] = interval ? [{ label: 'Duration', value: formatMilliseconds(interval) }] : [];
 
     contentItems = [
       {
@@ -270,7 +270,7 @@ const HeatmapHoverCell = ({
       toIdx++;
     }
 
-    const vals: LabelValue[] = getDisplayData(fromIdx, toIdx);
+    const vals: VizTooltipItem[] = getDisplayData(fromIdx, toIdx);
     vals.forEach((val) => {
       contentItems.push({
         label: val.label,
@@ -330,7 +330,7 @@ const HeatmapHoverCell = ({
     [index]
   );
 
-  const headerLabel: LabelValue = {
+  const headerItem: VizTooltipItem = {
     label: '',
     value: xDisp(xBucketMax!)!,
   };
@@ -365,11 +365,18 @@ const HeatmapHoverCell = ({
   }
 
   const styles = useStyles2(getStyles);
+  const theme = useTheme2();
 
   return (
     <div className={styles.wrapper}>
-      <VizTooltipHeader headerLabel={headerLabel} isPinned={isPinned} />
-      <VizTooltipContent contentLabelValue={contentItems} customContent={customContent} isPinned={isPinned} />
+      <VizTooltipHeader item={headerItem} isPinned={isPinned} />
+      <VizTooltipContent items={contentItems} isPinned={isPinned}>
+        {customContent?.map((content, i) => (
+          <div key={i} style={{ padding: `${theme.spacing(1)} 0` }}>
+            {content}
+          </div>
+        ))}
+      </VizTooltipContent>
       {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
     </div>
   );
diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
index 848b2ea0a3a..98b6a6494d1 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
@@ -6,7 +6,7 @@ import { TooltipDisplayMode, useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
-import { LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
+import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
 import { findNextStateIndex, fmtDuration } from 'app/core/components/TimelineChart/utils';
 
@@ -73,7 +73,7 @@ export const StateTimelineTooltip2 = ({
     links = getDataLinks(field, dataIdx);
   }
 
-  const headerItem: LabelValue = {
+  const headerItem: VizTooltipItem = {
     label: xField.type === FieldType.time ? '' : getFieldDisplayName(xField, seriesFrame, frames),
     value: xVal,
   };
@@ -81,8 +81,8 @@ export const StateTimelineTooltip2 = ({
   return (
     <div>
       <div className={styles.wrapper}>
-        <VizTooltipHeader headerLabel={headerItem} isPinned={isPinned} />
-        <VizTooltipContent contentLabelValue={contentItems} isPinned={isPinned} scrollable={scrollable} />
+        <VizTooltipHeader item={headerItem} isPinned={isPinned} />
+        <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
         {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
       </div>
     </div>
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
index c7d9461bef8..5c3cef5f108 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
@@ -7,7 +7,7 @@ import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
-import { LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
+import { VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { getContentItems } from '@grafana/ui/src/components/VizTooltip/utils';
 
 import { getDataLinks } from '../status-history/utils';
@@ -67,7 +67,7 @@ export const TimeSeriesTooltip = ({
     links = getDataLinks(field, dataIdx);
   }
 
-  const headerItem: LabelValue = {
+  const headerItem: VizTooltipItem = {
     label: xField.type === FieldType.time ? '' : getFieldDisplayName(xField, seriesFrame, frames),
     value: xVal,
   };
@@ -75,8 +75,8 @@ export const TimeSeriesTooltip = ({
   return (
     <div>
       <div className={styles.wrapper}>
-        <VizTooltipHeader headerLabel={headerItem} isPinned={isPinned} />
-        <VizTooltipContent contentLabelValue={contentItems} isPinned={isPinned} scrollable={scrollable} />
+        <VizTooltipHeader item={headerItem} isPinned={isPinned} />
+        <VizTooltipContent items={contentItems} isPinned={isPinned} scrollable={scrollable} />
         {isPinned && <VizTooltipFooter dataLinks={links} annotate={annotate} />}
       </div>
     </div>
diff --git a/public/app/plugins/panel/xychart/XYChartTooltip.tsx b/public/app/plugins/panel/xychart/XYChartTooltip.tsx
index 00243d1c326..2a72c99138b 100644
--- a/public/app/plugins/panel/xychart/XYChartTooltip.tsx
+++ b/public/app/plugins/panel/xychart/XYChartTooltip.tsx
@@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui';
 import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
 import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
 import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
-import { ColorIndicator, LabelValue } from '@grafana/ui/src/components/VizTooltip/types';
+import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
 import { getTitleFromHref } from 'app/features/explore/utils/links';
 
 import { getStyles } from '../timeseries/TimeSeriesTooltip';
@@ -53,7 +53,7 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
     colorThing = colorThing[rowIndex];
   }
 
-  const headerItem: LabelValue = {
+  const headerItem: VizTooltipItem = {
     label,
     value: '',
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -61,7 +61,7 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
     colorIndicator: ColorIndicator.marker_md,
   };
 
-  const contentItems: LabelValue[] = [
+  const contentItems: VizTooltipItem[] = [
     {
       label: getFieldDisplayName(xField, frame),
       value: fmt(xField, xField.values[rowIndex]),
@@ -101,8 +101,8 @@ export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss,
 
   return (
     <div className={styles.wrapper}>
-      <VizTooltipHeader headerLabel={headerItem} isPinned={isPinned} />
-      <VizTooltipContent contentLabelValue={contentItems} isPinned={isPinned} />
+      <VizTooltipHeader item={headerItem} isPinned={isPinned} />
+      <VizTooltipContent items={contentItems} isPinned={isPinned} />
       {isPinned && <VizTooltipFooter dataLinks={getLinks()} />}
     </div>
   );