chore(metrics): Rename metrics widget type (#67867)

Simplify type names.
Rename `MetricWidgetQueryParams` to `MetricsWidget`
Rename `MetricFormulaWidgetParams` to `MetricsEquationWidget`
Rename `MetricQueryWidgetParams` to `MetricsQueryWidget`

static/app/utils/metrics/constants.tsx

@@ -1,8 +1,8 @@
 import {t} from 'sentry/locale';
 import type {MRI} from 'sentry/types';
 import type {
-  MetricFormulaWidgetParams,
-  MetricQueryWidgetParams,
+  MetricsEquationWidget,
+  MetricsQueryWidget,
   SortState,
 } from 'sentry/utils/metrics/types';
 import {MetricDisplayType, MetricExpressionType} from 'sentry/utils/metrics/types';
@@ -31,7 +31,7 @@ export const DEFAULT_SORT_STATE: SortState = {
 
 export const NO_QUERY_ID = -1;
 
-export const emptyMetricsQueryWidget: MetricQueryWidgetParams = {
+export const emptyMetricsQueryWidget: MetricsQueryWidget = {
   type: MetricExpressionType.QUERY,
   id: NO_QUERY_ID,
   mri: 'd:transactions/duration@millisecond' satisfies MRI,
@@ -43,7 +43,7 @@ export const emptyMetricsQueryWidget: MetricQueryWidgetParams = {
   isHidden: false,
 };
 
-export const emptyMetricsFormulaWidget: MetricFormulaWidgetParams = {
+export const emptyMetricsFormulaWidget: MetricsEquationWidget = {
   type: MetricExpressionType.EQUATION,
   id: NO_QUERY_ID,
   formula: '',

static/app/utils/metrics/index.tsx

@@ -36,7 +36,7 @@ import {formatMRI, formatMRIField, MRIToField, parseMRI} from 'sentry/utils/metr
 import type {
   MetricsQuery,
   MetricsQueryParams,
-  MetricWidgetQueryParams,
+  MetricsWidget,
 } from 'sentry/utils/metrics/types';
 import {MetricDisplayType} from 'sentry/utils/metrics/types';
 import {
@@ -78,7 +78,7 @@ export function getMetricsUrl(
     project,
     ...otherParams
   }: Omit<MetricsQueryParams, 'project' | 'widgets'> & {
-    widgets: Partial<MetricWidgetQueryParams>[];
+    widgets: Partial<MetricsWidget>[];
     project?: (string | number)[];
   }
 ) {

static/app/utils/metrics/types.tsx

@@ -41,20 +41,20 @@ export interface BaseWidgetParams {
   sort?: SortState;
 }
 
-export interface MetricQueryWidgetParams extends BaseWidgetParams, MetricsQuery {
+export interface MetricsQueryWidget extends BaseWidgetParams, MetricsQuery {
   type: MetricExpressionType.QUERY;
   powerUserMode?: boolean;
 }
 
-export interface MetricFormulaWidgetParams extends BaseWidgetParams {
+export interface MetricsEquationWidget extends BaseWidgetParams {
   formula: string;
   type: MetricExpressionType.EQUATION;
 }
 
-export type MetricWidgetQueryParams = MetricQueryWidgetParams | MetricFormulaWidgetParams;
+export type MetricsWidget = MetricsQueryWidget | MetricsEquationWidget;
 
 export interface MetricsQueryParams {
-  widgets: string; // stringified json representation of MetricWidgetQueryParams
+  widgets: string; // stringified json representation of MetricsWidget
   end?: DateString;
   environment?: string[];
   project?: number[];

static/app/views/dashboards/utils.tsx

@@ -45,7 +45,7 @@ import {DiscoverDatasets, DisplayModes} from 'sentry/utils/discover/types';
 import {getMeasurements} from 'sentry/utils/measurements/measurements';
 import {getMetricDisplayType, getMetricsUrl} from 'sentry/utils/metrics';
 import {parseField} from 'sentry/utils/metrics/mri';
-import type {MetricWidgetQueryParams} from 'sentry/utils/metrics/types';
+import type {MetricsWidget} from 'sentry/utils/metrics/types';
 import {decodeList} from 'sentry/utils/queryString';
 import theme from 'sentry/utils/theme';
 import type {
@@ -426,7 +426,7 @@ export function getWidgetMetricsUrl(
         groupBy: query.columns,
         query: query.conditions ?? '',
         displayType: getMetricDisplayType(_widget.displayType),
-      } satisfies Partial<MetricWidgetQueryParams>;
+      } satisfies Partial<MetricsWidget>;
     }),
   });
 

static/app/views/metrics/context.tsx

@@ -16,10 +16,7 @@ import {
   emptyMetricsQueryWidget,
   NO_QUERY_ID,
 } from 'sentry/utils/metrics/constants';
-import {
-  MetricExpressionType,
-  type MetricWidgetQueryParams,
-} from 'sentry/utils/metrics/types';
+import {MetricExpressionType, type MetricsWidget} from 'sentry/utils/metrics/types';
 import type {MetricsSamplesResults} from 'sentry/utils/metrics/useMetricsSamples';
 import {decodeInteger, decodeScalar} from 'sentry/utils/queryString';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
@@ -56,11 +53,8 @@ interface MetricsContextValue {
   setSelectedWidgetIndex: (index: number) => void;
   showQuerySymbols: boolean;
   toggleWidgetVisibility: (index: number) => void;
-  updateWidget: (
-    index: number,
-    data: Partial<Omit<MetricWidgetQueryParams, 'type'>>
-  ) => void;
-  widgets: MetricWidgetQueryParams[];
+  updateWidget: (index: number, data: Partial<Omit<MetricsWidget, 'type'>>) => void;
+  widgets: MetricsWidget[];
   highlightedSampleId?: string;
   metricsSamples?: MetricsSamplesResults<Field>['data'];
 }
@@ -96,10 +90,7 @@ export function useMetricWidgets() {
   const updateQuery = useUpdateQuery();
 
   const widgets = useStructuralSharing(
-    useMemo<MetricWidgetQueryParams[]>(
-      () => parseMetricWidgetsQueryParam(urlWidgets),
-      [urlWidgets]
-    )
+    useMemo<MetricsWidget[]>(() => parseMetricWidgetsQueryParam(urlWidgets), [urlWidgets])
   );
 
   // We want to have it as a ref, so that we can use it in the setWidget callback
@@ -107,7 +98,7 @@ export function useMetricWidgets() {
   const currentWidgetsRef = useInstantRef(widgets);
 
   const setWidgets = useCallback(
-    (newWidgets: React.SetStateAction<MetricWidgetQueryParams[]>) => {
+    (newWidgets: React.SetStateAction<MetricsWidget[]>) => {
       const currentWidgets = currentWidgetsRef.current;
       updateQuery({
         widgets: JSON.stringify(
@@ -119,7 +110,7 @@ export function useMetricWidgets() {
   );
 
   const updateWidget = useCallback(
-    (index: number, data: Partial<Omit<MetricWidgetQueryParams, 'type'>>) => {
+    (index: number, data: Partial<Omit<MetricsWidget, 'type'>>) => {
       setWidgets(currentWidgets => {
         const newWidgets = [...currentWidgets];
         newWidgets[index] = {
@@ -308,7 +299,7 @@ export function DDMContextProvider({children}: {children: React.ReactNode}) {
   );
 
   const handleUpdateWidget = useCallback(
-    (index: number, data: Partial<MetricWidgetQueryParams>) => {
+    (index: number, data: Partial<MetricsWidget>) => {
       updateWidget(index, data);
       handleSetSelectedWidgetIndex(index);
       if (index === focusAreaSelection?.widgetIndex) {

static/app/views/metrics/metricFormulaContextMenu.tsx

@@ -10,7 +10,7 @@ import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {isCustomMeasurement} from 'sentry/utils/metrics';
 import {hasCustomMetrics} from 'sentry/utils/metrics/features';
-import type {MetricFormulaWidgetParams} from 'sentry/utils/metrics/types';
+import type {MetricsEquationWidget} from 'sentry/utils/metrics/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useMetricsContext} from 'sentry/views/metrics/context';
 import {useCreateDashboard} from 'sentry/views/metrics/useCreateDashboard';
@@ -18,7 +18,7 @@ import type {useFormulaDependencies} from 'sentry/views/metrics/utils/useFormula
 
 type ContextMenuProps = {
   formulaDependencies: ReturnType<typeof useFormulaDependencies>;
-  formulaWidget: MetricFormulaWidgetParams;
+  formulaWidget: MetricsEquationWidget;
   widgetIndex: number;
 };
 
@@ -119,7 +119,7 @@ export function MetricFormulaContextMenu({
 }
 
 export function useCreateDashboardWidget(
-  formulaWidget: MetricFormulaWidgetParams,
+  formulaWidget: MetricsEquationWidget,
   formulaDependencies: ReturnType<typeof useFormulaDependencies>
 ) {
   const {dependencies, isError} = formulaDependencies[formulaWidget.id];

static/app/views/metrics/pageHeaderActions.tsx

@@ -18,10 +18,7 @@ import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {isCustomMeasurement} from 'sentry/utils/metrics';
 import {MRIToField} from 'sentry/utils/metrics/mri';
-import {
-  MetricExpressionType,
-  type MetricQueryWidgetParams,
-} from 'sentry/utils/metrics/types';
+import {MetricExpressionType, type MetricsQueryWidget} from 'sentry/utils/metrics/types';
 import {middleEllipsis} from 'sentry/utils/middleEllipsis';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
@@ -113,7 +110,7 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
     () =>
       widgets
         .filter(
-          (query): query is MetricQueryWidgetParams =>
+          (query): query is MetricsQueryWidget =>
             query.type === MetricExpressionType.QUERY
         )
         .map((widget, index) => {

static/app/views/metrics/queries.tsx

@@ -11,10 +11,10 @@ import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   MetricExpressionType,
-  type MetricFormulaWidgetParams,
-  type MetricQueryWidgetParams,
+  type MetricsEquationWidget,
   type MetricsQuery,
-  type MetricWidgetQueryParams,
+  type MetricsQueryWidget,
+  type MetricsWidget,
 } from 'sentry/utils/metrics/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
@@ -51,7 +51,7 @@ export function Queries() {
   }, [widgets]);
 
   const handleChange = useCallback(
-    (index: number, widget: Partial<MetricWidgetQueryParams>) => {
+    (index: number, widget: Partial<MetricsWidget>) => {
       updateWidget(index, widget);
     },
     [updateWidget]
@@ -147,11 +147,11 @@ interface QueryProps {
   canBeHidden: boolean;
   index: number;
   isSelected: boolean;
-  onChange: (index: number, data: Partial<MetricWidgetQueryParams>) => void;
+  onChange: (index: number, data: Partial<MetricsWidget>) => void;
   onToggleVisibility: (index: number) => void;
   projects: number[];
   showQuerySymbols: boolean;
-  widget: MetricQueryWidgetParams;
+  widget: MetricsQueryWidget;
 }
 
 function Query({
@@ -180,7 +180,7 @@ function Query({
 
   const handleChange = useCallback(
     (data: Partial<MetricsQuery>) => {
-      const changes: Partial<MetricQueryWidgetParams> = {...data};
+      const changes: Partial<MetricsQueryWidget> = {...data};
       if (changes.mri || changes.groupBy) {
         changes.focusedSeries = undefined;
       }
@@ -228,10 +228,10 @@ interface FormulaProps {
   formulaDependencies: ReturnType<typeof useFormulaDependencies>;
   index: number;
   isSelected: boolean;
-  onChange: (index: number, data: Partial<MetricWidgetQueryParams>) => void;
+  onChange: (index: number, data: Partial<MetricsWidget>) => void;
   onToggleVisibility: (index: number) => void;
   showQuerySymbols: boolean;
-  widget: MetricFormulaWidgetParams;
+  widget: MetricsEquationWidget;
 }
 
 function Formula({
@@ -250,7 +250,7 @@ function Formula({
   }, [index, onToggleVisibility]);
 
   const handleChange = useCallback(
-    (data: Partial<MetricFormulaWidgetParams>) => {
+    (data: Partial<MetricsEquationWidget>) => {
       onChange(index, data);
     },
     [index, onChange]

static/app/views/metrics/scratchpad.tsx

@@ -7,10 +7,7 @@ import type {Field} from 'sentry/components/metrics/metricSamplesTable';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {getMetricsCorrelationSpanUrl} from 'sentry/utils/metrics';
-import {
-  MetricExpressionType,
-  type MetricWidgetQueryParams,
-} from 'sentry/utils/metrics/types';
+import {MetricExpressionType, type MetricsWidget} from 'sentry/utils/metrics/types';
 import type {MetricsQueryApiQueryParams} from 'sentry/utils/metrics/useMetricsQuery';
 import type {MetricsSamplesResults} from 'sentry/utils/metrics/useMetricsSamples';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -48,7 +45,7 @@ export function MetricScratchpad() {
   }, [widgets]);
 
   const handleChange = useCallback(
-    (index: number, widget: Partial<MetricWidgetQueryParams>) => {
+    (index: number, widget: Partial<MetricsWidget>) => {
       updateWidget(index, widget);
     },
     [updateWidget]
@@ -161,7 +158,7 @@ function MultiChartWidgetQueries({
 }: {
   children: (queries: MetricsQueryApiQueryParams[]) => JSX.Element;
   formulaDependencies: ReturnType<typeof useFormulaDependencies>;
-  widget: MetricWidgetQueryParams;
+  widget: MetricsWidget;
 }) {
   const queries = useMemo(() => {
     return [

static/app/views/metrics/useCreateDashboard.tsx

@@ -2,10 +2,7 @@ import {useMemo} from 'react';
 
 import {openCreateDashboardFromScratchpad} from 'sentry/actionCreators/modal';
 import {convertToDashboardWidget} from 'sentry/utils/metrics/dashboard';
-import {
-  MetricExpressionType,
-  type MetricWidgetQueryParams,
-} from 'sentry/utils/metrics/types';
+import {MetricExpressionType, type MetricsWidget} from 'sentry/utils/metrics/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
@@ -13,7 +10,7 @@ import type {Widget} from 'sentry/views/dashboards/types';
 import type {useFormulaDependencies} from 'sentry/views/metrics/utils/useFormulaDependencies';
 
 export function useCreateDashboard(
-  widgets: MetricWidgetQueryParams[],
+  widgets: MetricsWidget[],
   formulaDependencies: ReturnType<typeof useFormulaDependencies>,
   isMultiChartMode: boolean
 ) {
@@ -24,33 +21,30 @@ export function useCreateDashboard(
   const dashboardWidgets = useMemo(() => {
     if (!isMultiChartMode) {
       const queryIdsInArray = new Set<number>();
-      const widgetsWithDependencies = widgets.reduce<MetricWidgetQueryParams[]>(
-        (acc, widget) => {
-          if (widget.type === MetricExpressionType.EQUATION) {
-            const {dependencies, isError} = formulaDependencies[widget.id];
-            if (isError) {
-              return acc;
+      const widgetsWithDependencies = widgets.reduce<MetricsWidget[]>((acc, widget) => {
+        if (widget.type === MetricExpressionType.EQUATION) {
+          const {dependencies, isError} = formulaDependencies[widget.id];
+          if (isError) {
+            return acc;
+          }
+          // Only add dependencies that are not already in the list of widgets
+          const filteredDependencies: MetricsWidget[] = [];
+          dependencies.forEach(dependency => {
+            if (!queryIdsInArray.has(dependency.id)) {
+              filteredDependencies.push({...dependency, isHidden: true});
+              queryIdsInArray.add(dependency.id);
             }
-            // Only add dependencies that are not already in the list of widgets
-            const filteredDependencies: MetricWidgetQueryParams[] = [];
-            dependencies.forEach(dependency => {
-              if (!queryIdsInArray.has(dependency.id)) {
-                filteredDependencies.push({...dependency, isHidden: true});
-                queryIdsInArray.add(dependency.id);
-              }
-            });
+          });
 
-            return [...filteredDependencies, ...acc, widget];
-          }
+          return [...filteredDependencies, ...acc, widget];
+        }
 
-          if (queryIdsInArray.has(widget.id)) {
-            return acc;
-          }
-          queryIdsInArray.add(widget.id);
-          return [...acc, widget];
-        },
-        []
-      );
+        if (queryIdsInArray.has(widget.id)) {
+          return acc;
+        }
+        queryIdsInArray.add(widget.id);
+        return [...acc, widget];
+      }, []);
       return [convertToDashboardWidget(widgetsWithDependencies, widgets[0].displayType)];
     }