feat(dashboards): Apply global filters to widget queries (#101451)

- Appends global filters to widget queries of the same dataset
- Warns users about conflicts between global filters and widget filters

Fixes
[DAIN-994](https://linear.app/getsentry/issue/DAIN-994/apply-global-filters-to-widget-queries)

Author: Ahmed-Labs

static/app/components/modals/widgetViewerModal.tsx

@@ -395,7 +395,10 @@ function WidgetViewerModal(props: Props) {
   const queryOptions = sortedQueries.map((query, index) => {
     const {name, conditions} = query;
     // Creates the highlighted query elements to be used in the Query Select
-    const dashboardFiltersString = dashboardFiltersToString(dashboardFilters);
+    const dashboardFiltersString = dashboardFiltersToString(
+      dashboardFilters,
+      widget.widgetType
+    );
     const parsedQuery =
       !name && !!conditions
         ? parseSearch(

static/app/views/dashboards/utils.tsx

@@ -576,12 +576,14 @@ export function getDashboardFiltersFromURL(location: Location): DashboardFilters
 }
 
 export function dashboardFiltersToString(
-  dashboardFilters: DashboardFilters | null | undefined
+  dashboardFilters: DashboardFilters | null | undefined,
+  widgetType?: WidgetType
 ): string {
   let dashboardFilterConditions = '';
-  const supportedFilters = omit(dashboardFilters, DashboardFilterKeys.GLOBAL_FILTER);
-  if (supportedFilters) {
-    for (const [key, activeFilters] of Object.entries(supportedFilters)) {
+
+  const pinnedFilters = omit(dashboardFilters, DashboardFilterKeys.GLOBAL_FILTER);
+  if (pinnedFilters) {
+    for (const [key, activeFilters] of Object.entries(pinnedFilters)) {
       if (activeFilters.length === 1) {
         dashboardFilterConditions += `${key}:"${activeFilters[0]}" `;
       } else if (activeFilters.length > 1) {
@@ -591,6 +593,17 @@ export function dashboardFiltersToString(
       }
     }
   }
+
+  const globalFilters = dashboardFilters?.[DashboardFilterKeys.GLOBAL_FILTER];
+  // If widgetType is provided, concatenate global filters that apply
+  if (widgetType && globalFilters) {
+    dashboardFilterConditions +=
+      globalFilters
+        .filter(globalFilter => globalFilter.dataset === widgetType)
+        .map(globalFilter => globalFilter.value)
+        .join(' ') ?? '';
+  }
+
   return dashboardFilterConditions;
 }
 

static/app/views/dashboards/widgetCard/genericWidgetQueries.tsx

@@ -216,7 +216,10 @@ class GenericWidgetQueries<SeriesResponse, TableResponse> extends Component<
   applyDashboardFilters(widget: Widget): Widget {
     const {dashboardFilters, skipDashboardFilterParens} = this.props;
 
-    const dashboardFilterConditions = dashboardFiltersToString(dashboardFilters);
+    const dashboardFilterConditions = dashboardFiltersToString(
+      dashboardFilters,
+      widget.widgetType
+    );
     widget.queries.forEach(query => {
       if (dashboardFilterConditions) {
         // If there is no base query, there's no need to add parens

static/app/views/dashboards/widgetCard/index.tsx

@@ -1,4 +1,4 @@
-import {useContext, useEffect, useRef, useState} from 'react';
+import {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import type {LegendComponentOption} from 'echarts';
 import type {Location} from 'history';
@@ -9,6 +9,8 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import {isWidgetViewerPath} from 'sentry/components/modals/widgetViewerModal/utils';
 import PanelAlert from 'sentry/components/panels/panelAlert';
 import Placeholder from 'sentry/components/placeholder';
+import {parseQueryBuilderValue} from 'sentry/components/searchQueryBuilder/utils';
+import {Token} from 'sentry/components/searchSyntax/parser';
 import {t, tct} from 'sentry/locale';
 import HookStore from 'sentry/stores/hookStore';
 import {space} from 'sentry/styles/space';
@@ -19,6 +21,7 @@ import type {Confidence, Organization} from 'sentry/types/organization';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import type {AggregationOutputType, Sort} from 'sentry/utils/discover/fields';
 import {statsPeriodToDays} from 'sentry/utils/duration/statsPeriodToDays';
+import {getFieldDefinition} from 'sentry/utils/fields';
 import {hasOnDemandMetricWidgetFeature} from 'sentry/utils/onDemandMetrics/features';
 import {useExtractionStatus} from 'sentry/utils/performance/contexts/metricsEnhancedPerformanceDataContext';
 import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
@@ -34,6 +37,7 @@ import withSentryRouter from 'sentry/utils/withSentryRouter';
 import {DASHBOARD_CHART_GROUP} from 'sentry/views/dashboards/dashboard';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {
+  DashboardFilterKeys,
   DisplayType,
   OnDemandExtractionState,
   WidgetType,
@@ -199,6 +203,10 @@ function WidgetCard(props: Props) {
   const droppedColumnsWarning = useDroppedColumnsWarning(widget);
   const sessionDurationWarning = hasSessionDuration ? SESSION_DURATION_ALERT_TEXT : null;
   const spanTimeRangeWarning = useTimeRangeWarning({widget});
+  const conflictingFilterWarning = useConflictingFilterWarning({
+    widget,
+    dashboardFilters,
+  });
 
   const onDataFetchStart = () => {
     if (timeoutRef.current) {
@@ -269,6 +277,7 @@ function WidgetCard(props: Props) {
     spanTimeRangeWarning,
     transactionsDeprecationWarning,
     droppedColumnsWarning,
+    conflictingFilterWarning,
   ].filter(Boolean) as string[];
 
   const actionsDisabled = Boolean(props.isPreview);
@@ -436,6 +445,45 @@ function useTimeRangeWarning({widget}: {widget: Widget}) {
   return null;
 }
 
+// Displays a warning message if there is a conflict between widget and global filters
+function useConflictingFilterWarning({
+  widget,
+  dashboardFilters,
+}: {
+  dashboardFilters: DashboardFilters | undefined;
+  widget: Widget;
+}) {
+  const conflictingFilterKeys = useMemo(() => {
+    if (!dashboardFilters) return [];
+
+    const widgetFilterKeys = widget.queries.flatMap(query => {
+      const parseResult = parseQueryBuilderValue(query.conditions, getFieldDefinition);
+      if (!parseResult) {
+        return [];
+      }
+      return parseResult
+        .filter(token => token.type === Token.FILTER)
+        .map(token => token.key.text);
+    });
+    const globalFilterKeys =
+      dashboardFilters?.[DashboardFilterKeys.GLOBAL_FILTER]
+        ?.filter(filter => filter.dataset === widget.widgetType)
+        .map(filter => filter.tag.key) ?? [];
+
+    const widgetFilterKeySet = new Set(widgetFilterKeys);
+    return globalFilterKeys.filter(key => widgetFilterKeySet.has(key));
+  }, [widget.queries, widget.widgetType, dashboardFilters]);
+
+  if (conflictingFilterKeys.length > 0) {
+    return tct('[strong:Filter conflicts:] [filters]', {
+      strong: <strong />,
+      filters: conflictingFilterKeys.join(', '),
+    });
+  }
+
+  return null;
+}
+
 const ErrorCard = styled(Placeholder)`
   display: flex;
   align-items: center;

static/app/views/dashboards/widgetCard/releaseWidgetQueries.tsx

@@ -2,7 +2,6 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
-import pick from 'lodash/pick';
 import trimStart from 'lodash/trimStart';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
@@ -22,7 +21,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {ReleasesConfig} from 'sentry/views/dashboards/datasetConfig/releases';
 import type {DashboardFilters, Widget, WidgetQuery} from 'sentry/views/dashboards/types';
-import {DEFAULT_TABLE_LIMIT, DisplayType} from 'sentry/views/dashboards/types';
+import {
+  DEFAULT_TABLE_LIMIT,
+  DisplayType,
+  WidgetType,
+} from 'sentry/views/dashboards/types';
 import {dashboardFiltersToString} from 'sentry/views/dashboards/utils';
 import {
   DERIVED_STATUS_METRICS_PATTERN,
@@ -246,7 +249,7 @@ function ReleaseWidgetQueries({
             environment: selection.environments,
             // Propagate release filters
             query: dashboardFilters
-              ? dashboardFiltersToString(pick(dashboardFilters, 'release'))
+              ? dashboardFiltersToString(dashboardFilters, WidgetType.RELEASE)
               : undefined,
           },
         }