ref(dashboards): Remove usage of BigNumberWidget from Dashboards (#…

…86219) Small one. It used to be the case that we hoped to use `BigNumberWidget` everywhere, but we're moving to a different API, where `WidgetLayout` and the visualization are composed on a case-by-case basis. Because of this, the conditional that renders `BigNumberWidget` in `WidgetCard` is not needed at all! That piece of the conditional just re-implements the logic inside `WidgetChartChart` and `WidgetCardChartContainer` anyway.
getsentry · Mar 3, 2025 · c24d0cf · c24d0cf
1 parent 19a602c
commit c24d0cf
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 95 deletions.
diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx
@@ -307,7 +307,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
       return (
         <TransitionChart loading={loading} reloading={loading}>
           <LoadingScreen loading={loading} />
-          <BigNumberResizeWrapper>
+          <BigNumberResizeWrapper noPadding={noPadding}>
             {this.bigNumberComponent({tableResults, loading})}
           </BigNumberResizeWrapper>
         </TransitionChart>
@@ -579,10 +579,12 @@ const LoadingPlaceholder = styled(({className}: PlaceholderProps) => (
   background-color: ${p => p.theme.surface300};
 `;
 
-const BigNumberResizeWrapper = styled('div')`
+const BigNumberResizeWrapper = styled('div')<{noPadding?: boolean}>`
   flex-grow: 1;
   overflow: hidden;
   position: relative;
+  padding: ${p =>
+    p.noPadding ? `0` : `0${space(1)} ${space(3)} ${space(3)} ${space(3)}`};
 `;
 
 const BigNumber = styled('div')`
@@ -593,7 +595,6 @@ const BigNumber = styled('div')`
   min-height: 0;
   font-size: 32px;
   color: ${p => p.theme.headingColor};
-  padding: ${space(1)} ${space(3)} ${space(3)} ${space(3)};
 
   * {
     text-align: left !important;

diff --git a/static/app/views/dashboards/widgetCard/index.tsx b/static/app/views/dashboards/widgetCard/index.tsx
@@ -14,7 +14,6 @@ import type {PageFilters} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
 import type {WithRouterProps} from 'sentry/types/legacyReactRouter';
 import type {Confidence, Organization} from 'sentry/types/organization';
-import {defined} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import type {AggregationOutputType} from 'sentry/utils/discover/fields';
@@ -37,14 +36,11 @@ import type {DashboardFilters, Widget} from '../types';
 import {DisplayType, OnDemandExtractionState, WidgetType} from '../types';
 import {DEFAULT_RESULTS_LIMIT} from '../widgetBuilder/utils';
 import type WidgetLegendSelectionState from '../widgetLegendSelectionState';
-import {BigNumberWidget} from '../widgets/bigNumberWidget/bigNumberWidget';
-import type {Meta} from '../widgets/common/types';
 import {WidgetFrame} from '../widgets/common/widgetFrame';
 import {WidgetViewerContext} from '../widgetViewer/widgetViewerContext';
 
 import {useDashboardsMEPContext} from './dashboardsMEPContext';
 import {getMenuOptions, useIndexedEventsWarning} from './widgetCardContextMenu';
-import {WidgetCardDataLoader} from './widgetCardDataLoader';
 
 const SESSION_DURATION_INGESTION_STOP_DATE = new Date('2023-01-12');
 
@@ -239,97 +235,42 @@ function WidgetCard(props: Props) {
         }
         disabled={Number(props.index) !== 0}
       >
-        {widget.displayType === DisplayType.BIG_NUMBER ? (
-          <WidgetCardDataLoader
-            widget={widget}
+        <WidgetFrame
+          title={widget.title}
+          description={widget.description}
+          badgeProps={badges}
+          warnings={warnings}
+          actionsDisabled={actionsDisabled}
+          error={widgetQueryError}
+          actionsMessage={actionsMessage}
+          actions={actions}
+          onFullScreenViewClick={disableFullscreen ? undefined : onFullScreenViewClick}
+          borderless={props.borderless}
+          revealTooltip={props.forceDescriptionTooltip ? 'always' : undefined}
+          noVisualizationPadding
+        >
+          <WidgetCardChartContainer
+            location={location}
+            api={api}
+            organization={organization}
             selection={selection}
-            dashboardFilters={dashboardFilters}
+            widget={widget}
+            isMobile={isMobile}
+            renderErrorMessage={renderErrorMessage}
+            tableItemLimit={tableItemLimit}
+            windowWidth={windowWidth}
             onDataFetched={onDataFetched}
+            dashboardFilters={dashboardFilters}
+            chartGroup={DASHBOARD_CHART_GROUP}
             onWidgetSplitDecision={onWidgetSplitDecision}
-            tableItemLimit={tableItemLimit}
-          >
-            {({loading, errorMessage, tableResults}) => {
-              // Big Number widgets only support one query, so we take the first query's results and meta
-              const tableData = tableResults?.[0]?.data;
-              const tableMeta = tableResults?.[0]?.meta as Meta | undefined;
-              const fields = Object.keys(tableMeta?.fields ?? {});
-
-              let field = fields[0]!;
-              let selectedField = field;
-
-              if (defined(widget.queries[0]!.selectedAggregate)) {
-                const index = widget.queries[0]!.selectedAggregate;
-                selectedField = widget.queries[0]!.aggregates[index]!;
-                if (fields.includes(selectedField)) {
-                  field = selectedField;
-                }
-              }
-
-              const value = tableData?.[0]?.[selectedField];
-
-              return (
-                <BigNumberWidget
-                  title={widget.title}
-                  description={widget.description}
-                  badgeProps={badges}
-                  warnings={warnings}
-                  actionsDisabled={actionsDisabled}
-                  actionsMessage={actionsMessage}
-                  actions={actions}
-                  onFullScreenViewClick={
-                    disableFullscreen ? undefined : onFullScreenViewClick
-                  }
-                  isLoading={loading}
-                  thresholds={widget.thresholds ?? undefined}
-                  value={value}
-                  field={field}
-                  meta={tableMeta}
-                  error={widgetQueryError || errorMessage || undefined}
-                  preferredPolarity="-"
-                  borderless={props.borderless}
-                  revealTooltip={props.forceDescriptionTooltip ? 'always' : undefined}
-                />
-              );
-            }}
-          </WidgetCardDataLoader>
-        ) : (
-          <WidgetFrame
-            title={widget.title}
-            description={widget.description}
-            badgeProps={badges}
-            warnings={warnings}
-            actionsDisabled={actionsDisabled}
-            error={widgetQueryError}
-            actionsMessage={actionsMessage}
-            actions={actions}
-            onFullScreenViewClick={disableFullscreen ? undefined : onFullScreenViewClick}
-            borderless={props.borderless}
-            revealTooltip={props.forceDescriptionTooltip ? 'always' : undefined}
-            noVisualizationPadding
-          >
-            <WidgetCardChartContainer
-              location={location}
-              api={api}
-              organization={organization}
-              selection={selection}
-              widget={widget}
-              isMobile={isMobile}
-              renderErrorMessage={renderErrorMessage}
-              tableItemLimit={tableItemLimit}
-              windowWidth={windowWidth}
-              onDataFetched={onDataFetched}
-              dashboardFilters={dashboardFilters}
-              chartGroup={DASHBOARD_CHART_GROUP}
-              onWidgetSplitDecision={onWidgetSplitDecision}
-              shouldResize={shouldResize}
-              onLegendSelectChanged={onLegendSelectChanged}
-              legendOptions={legendOptions}
-              widgetLegendState={widgetLegendState}
-              showConfidenceWarning={showConfidenceWarning}
-              minTableColumnWidth={minTableColumnWidth}
-            />
-          </WidgetFrame>
-        )}
+            shouldResize={shouldResize}
+            onLegendSelectChanged={onLegendSelectChanged}
+            legendOptions={legendOptions}
+            widgetLegendState={widgetLegendState}
+            showConfidenceWarning={showConfidenceWarning}
+            minTableColumnWidth={minTableColumnWidth}
+          />
+        </WidgetFrame>
       </VisuallyCompleteWithData>
     </ErrorBoundary>
   );