feat(dashboards): Add Big Number Widget threshold hover (#79240)

Didn't want to lose this feature from the current implementation.

Author: gggritso

static/app/views/dashboards/utils.tsx

@@ -66,7 +66,7 @@ import {
   WidgetType,
 } from 'sentry/views/dashboards/types';
 
-import ThresholdsHoverWrapper from './widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper';
+import {ThresholdsHoverWrapper} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper';
 import type {ThresholdsConfig} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsStep';
 import {ThresholdMaxKeys} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsStep';
 
@@ -188,7 +188,7 @@ export function getColoredWidgetIndicator(
   }
 
   return (
-    <ThresholdsHoverWrapper thresholds={thresholds} tableData={tableData}>
+    <ThresholdsHoverWrapper thresholds={thresholds} type={dataType}>
       <CircleIndicator color={color} size={12} />
     </ThresholdsHoverWrapper>
   );

static/app/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper.tsx

@@ -5,28 +5,23 @@ import CircleIndicator from 'sentry/components/circleIndicator';
 import {Hovercard} from 'sentry/components/hovercard';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import theme from 'sentry/utils/theme';
 
 import type {ThresholdsConfig} from './thresholdsStep';
 
 type Props = {
   children: React.ReactNode;
-  tableData: TableDataWithTitle[];
   thresholds: ThresholdsConfig;
+  type?: string;
 };
 
-function ThresholdsHoverWrapper({children, thresholds, tableData}: Props) {
+export function ThresholdsHoverWrapper({children, thresholds, type}: Props) {
   const {
     unit,
     max_values: {max1, max2},
   } = thresholds;
-  const tableMeta = {...tableData[0].meta};
-  const fields = Object.keys(tableMeta);
-  const field = fields[0];
-  const dataType = tableMeta[field];
   const formattedUnit =
-    unit && (dataType === 'duration' ? `${unit}s` : `/${unit.split('/')[1]}`);
+    unit && (type === 'duration' ? `${unit}s` : `/${unit.split('/')[1]}`);
   const title = unit ? t(`Thresholds in %s`, formattedUnit) : t('Thresholds');
 
   const notSetMsg = t('Not set');
@@ -87,5 +82,3 @@ const ContextTitle = styled('h6')`
 const StyledIndicator = styled(CircleIndicator)`
   margin-right: ${space(1)};
 `;
-
-export default ThresholdsHoverWrapper;

static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx

@@ -218,7 +218,7 @@ describe('BigNumberWidget', () => {
   });
 
   describe('Thresholds', () => {
-    it('Evaluates the current value against a threshold', () => {
+    it('Evaluates the current value against a threshold', async () => {
       render(
         <BigNumberWidget
           data={[
@@ -245,6 +245,9 @@ describe('BigNumberWidget', () => {
       );
 
       expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'meh');
+
+      await userEvent.hover(screen.getByRole('status'));
+      expect(await screen.findByText('Thresholds in /second')).toBeInTheDocument();
     });
 
     it('Normalizes the units', () => {

static/app/views/dashboards/widgets/bigNumberWidget/thresholdsIndicator.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import type {Polarity} from 'sentry/components/percentChange';
 
 import {normalizeUnit} from '../../utils';
+import {ThresholdsHoverWrapper} from '../../widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper';
 import type {Thresholds} from '../common/types';
 
 interface ThresholdsIndicatorProps {
@@ -39,7 +40,11 @@ export function ThresholdsIndicator({
 
   const colorName = COLOR_NAME_FOR_STATE[state];
 
-  return <Circle role="status" aria-label={state} color={theme[colorName]} />;
+  return (
+    <ThresholdsHoverWrapper thresholds={thresholds} type={type}>
+      <Circle role="status" aria-label={state} color={theme[colorName]} />
+    </ThresholdsHoverWrapper>
+  );
 }
 
 const Circle = styled('div')<{color: string}>`