feat(dashboards-eap): Allow multiple queries for spans dataset (#92399)

- The "Add Filter" button should appear for the spans dataset in the
  widget builder
- A widget should be saveable with multiple filters
- When a widget is "Open in Explore"'d, if there's a single query (i.e.
  one filter) it will direct users to the regular explore page. If there
  are multiple, we send them to the comparison view

Since multiple filters are only allowed for timeseries charts, those are
the only types we expect to handle with this method

Author: narsaynorath

static/app/views/dashboards/utils/getWidgetExploreUrl.spec.tsx

@@ -156,4 +156,52 @@ describe('getWidgetExploreUrl', () => {
       '&query=%28span.description%3Atest%29%20release%3A%5B%221.0.0%22%2C%222.0.0%22%5D%20'
     );
   });
+
+  it('returns the correct url for multiple queries', () => {
+    const widget = WidgetFixture({
+      displayType: DisplayType.LINE,
+      queries: [
+        {
+          fields: [],
+          aggregates: ['count(span.duration)', 'avg(span.duration)'],
+          columns: ['span.description'],
+          conditions: 'is_transaction:true',
+          orderby: '',
+          name: '',
+        },
+        {
+          fields: [],
+          aggregates: ['avg(span.duration)'],
+          columns: ['span.description'],
+          conditions: 'is_transaction:false',
+          orderby: '',
+          name: '',
+        },
+      ],
+    });
+
+    const url = getWidgetExploreUrl(widget, undefined, selection, organization);
+
+    // Provide a fake base URL to allow parsing the relative URL
+    const urlObject = new URL(url, 'https://www.example.com');
+    expect(urlObject.pathname).toBe('/organizations/org-slug/explore/traces/compare/');
+
+    expect(urlObject.searchParams.get('interval')).toBe('30m');
+    expect(urlObject.searchParams.get('title')).toBe('Widget');
+
+    const queries = urlObject.searchParams.getAll('queries');
+    expect(queries).toHaveLength(2);
+
+    const query1 = JSON.parse(queries[0]!);
+    expect(query1.chartType).toBe(1);
+    expect(query1.fields).toEqual([]);
+    expect(query1.groupBys).toEqual(['span.description']);
+    expect(query1.query).toBe('is_transaction:true');
+
+    const query2 = JSON.parse(queries[1]!);
+    expect(query2.chartType).toBe(1);
+    expect(query2.fields).toEqual([]);
+    expect(query2.groupBys).toEqual(['span.description']);
+    expect(query2.query).toBe('is_transaction:false');
+  });
 });

static/app/views/dashboards/utils/getWidgetExploreUrl.tsx

@@ -8,7 +8,12 @@ import {
   getAggregateAlias,
   isAggregateFieldOrEquation,
 } from 'sentry/utils/discover/fields';
-import {decodeBoolean, decodeList, decodeScalar} from 'sentry/utils/queryString';
+import {
+  decodeBoolean,
+  decodeList,
+  decodeScalar,
+  decodeSorts,
+} from 'sentry/utils/queryString';
 import type {DashboardFilters, Widget} from 'sentry/views/dashboards/types';
 import {DisplayType} from 'sentry/views/dashboards/types';
 import {
@@ -18,21 +23,57 @@ import {
   getWidgetInterval,
 } from 'sentry/views/dashboards/utils';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
-import {getExploreUrl} from 'sentry/views/explore/utils';
+import {getExploreMultiQueryUrl, getExploreUrl} from 'sentry/views/explore/utils';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
 
 export function getWidgetExploreUrl(
   widget: Widget,
   dashboardFilters: DashboardFilters | undefined,
   selection: PageFilters,
   organization: Organization
+) {
+  if (widget.queries.length > 1) {
+    return _getWidgetExploreUrlForMultipleQueries(
+      widget,
+      dashboardFilters,
+      selection,
+      organization
+    );
+  }
+
+  return _getWidgetExploreUrl(widget, dashboardFilters, selection, organization);
+}
+
+function getChartType(displayType: DisplayType) {
+  let chartType: ChartType = ChartType.LINE;
+  switch (displayType) {
+    case DisplayType.BAR:
+      chartType = ChartType.BAR;
+      break;
+    case DisplayType.LINE:
+      chartType = ChartType.LINE;
+      break;
+    case DisplayType.AREA:
+      chartType = ChartType.AREA;
+      break;
+    case DisplayType.TABLE:
+    case DisplayType.BIG_NUMBER:
+      break;
+    default:
+      break;
+  }
+
+  return chartType;
+}
+
+function _getWidgetExploreUrl(
+  widget: Widget,
+  dashboardFilters: DashboardFilters | undefined,
+  selection: PageFilters,
+  organization: Organization
 ) {
   const eventView = eventViewFromWidget(widget.title, widget.queries[0]!, selection);
-  const {query: locationQueryParams} = eventView.getResultsViewUrlTarget(
-    organization,
-    false,
-    undefined
-  );
+  const locationQueryParams = eventView.generateQueryStringObject();
 
   // Inject the sort field for cases of arbitrary sorting
   // The sort is not picked up by eventView unless it is
@@ -50,20 +91,17 @@ export function getWidgetExploreUrl(
     ),
   ].slice(0, 3);
 
+  const chartType = getChartType(widget.displayType);
   let exploreMode: Mode | undefined = undefined;
-  let chartType: ChartType = ChartType.LINE;
   switch (widget.displayType) {
     case DisplayType.BAR:
       exploreMode = Mode.AGGREGATE;
-      chartType = ChartType.BAR;
       break;
     case DisplayType.LINE:
       exploreMode = Mode.AGGREGATE;
-      chartType = ChartType.LINE;
       break;
     case DisplayType.AREA:
       exploreMode = Mode.AGGREGATE;
-      chartType = ChartType.AREA;
       break;
     case DisplayType.TABLE:
     case DisplayType.BIG_NUMBER:
@@ -158,3 +196,39 @@ function _isSortIncluded(sort: string, yAxes: string[]) {
   const rawSort = trimStart(sort, '-');
   return yAxes.map(getAggregateAlias).includes(getAggregateAlias(rawSort));
 }
+
+function _getWidgetExploreUrlForMultipleQueries(
+  widget: Widget,
+  dashboardFilters: DashboardFilters | undefined,
+  selection: PageFilters,
+  organization: Organization
+): string {
+  const eventView = eventViewFromWidget(widget.title, widget.queries[0]!, selection);
+  const locationQueryParams = eventView.generateQueryStringObject();
+  const datetime = {
+    end: decodeScalar(locationQueryParams.end) ?? null,
+    period: decodeScalar(locationQueryParams.statsPeriod) ?? null,
+    start: decodeScalar(locationQueryParams.start) ?? null,
+    utc: decodeBoolean(locationQueryParams.utc) ?? null,
+  };
+
+  const currentSelection = {
+    ...selection,
+    datetime,
+  };
+
+  return getExploreMultiQueryUrl({
+    organization,
+    title: widget.title,
+    selection: currentSelection,
+    queries: widget.queries.map(query => ({
+      chartType: getChartType(widget.displayType),
+      query: applyDashboardFilters(query.conditions, dashboardFilters) ?? '',
+      sortBys: decodeSorts(query.orderby),
+      yAxes: query.aggregates,
+      fields: [],
+      groupBys: query.columns,
+    })),
+    interval: getWidgetInterval(widget, currentSelection.datetime),
+  });
+}

static/app/views/dashboards/widgetBuilder/components/queryFilterBuilder.spec.tsx

@@ -141,4 +141,28 @@ describe('QueryFilterBuilder', () => {
 
     expect(screen.queryByText('+ Add Filter')).not.toBeInTheDocument();
   });
+
+  it('allow adding filters for the spans dataset', async () => {
+    render(
+      <WidgetBuilderProvider>
+        <WidgetBuilderQueryFilterBuilder
+          onQueryConditionChange={() => {}}
+          validatedWidgetResponse={{} as any}
+        />
+      </WidgetBuilderProvider>,
+      {
+        organization,
+
+        router: RouterFixture({
+          location: LocationFixture({
+            query: {query: [], dataset: WidgetType.SPANS, displayType: DisplayType.LINE},
+          }),
+        }),
+
+        deprecatedRouterMocks: true,
+      }
+    );
+
+    expect(await screen.findByText('+ Add Filter')).toBeInTheDocument();
+  });
 });

static/app/views/dashboards/widgetBuilder/components/queryFilterBuilder.tsx

@@ -59,7 +59,6 @@ function WidgetBuilderQueryFilterBuilder({
   const canAddSearchConditions =
     state.displayType !== DisplayType.TABLE &&
     state.displayType !== DisplayType.BIG_NUMBER &&
-    state.dataset !== WidgetType.SPANS &&
     state.query &&
     state.query.length < 3;
 

static/app/views/explore/utils.tsx

@@ -143,7 +143,7 @@ export function getExploreUrlFromSavedQueryUrl({
   });
 }
 
-function getExploreMultiQueryUrl({
+export function getExploreMultiQueryUrl({
   organization,
   selection,
   interval,