feat(discover): Persist dataset selection on add to dashboards (#74658)

Add dataset selection to add to dashboards flow

Author: shruthilayaj

static/app/components/modals/widgetBuilder/addToDashboardModal.spec.tsx

@@ -7,7 +7,11 @@ import selectEvent from 'sentry-test/selectEvent';
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import AddToDashboardModal from 'sentry/components/modals/widgetBuilder/addToDashboardModal';
 import type {DashboardDetails, DashboardListItem} from 'sentry/views/dashboards/types';
-import {DashboardWidgetSource, DisplayType} from 'sentry/views/dashboards/types';
+import {
+  DashboardWidgetSource,
+  DisplayType,
+  WidgetType,
+} from 'sentry/views/dashboards/types';
 
 const stubEl = (props: {children?: React.ReactNode}) => <div>{props.children}</div>;
 
@@ -366,7 +370,7 @@ describe('add to dashboard modal', () => {
         CloseButton={stubEl}
         closeModal={() => undefined}
         organization={initialData.organization}
-        widget={widget}
+        widget={{...widget, widgetType: WidgetType.ERRORS}}
         selection={defaultSelection}
         router={initialData.router}
         widgetAsQueryParams={mockWidgetAsQueryParams}
@@ -387,7 +391,11 @@ describe('add to dashboard modal', () => {
     await waitFor(() => {
       expect(dashboardDetailPutMock).toHaveBeenCalledWith(
         '/organizations/org-slug/dashboards/1/',
-        expect.objectContaining({data: expect.objectContaining({widgets: [widget]})})
+        expect.objectContaining({
+          data: expect.objectContaining({
+            widgets: [{...widget, widgetType: WidgetType.ERRORS}],
+          }),
+        })
       );
     });
   });

static/app/components/modals/widgetBuilder/addToDashboardModal.tsx

@@ -34,7 +34,10 @@ import {
   getSavedFiltersAsPageFilters,
   getSavedPageFilters,
 } from 'sentry/views/dashboards/utils';
-import {NEW_DASHBOARD_ID} from 'sentry/views/dashboards/widgetBuilder/utils';
+import {
+  type DataSet,
+  NEW_DASHBOARD_ID,
+} from 'sentry/views/dashboards/widgetBuilder/utils';
 import WidgetCard from 'sentry/views/dashboards/widgetCard';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 import {MetricsDataSwitcher} from 'sentry/views/performance/landing/metricsDataSwitcher';
@@ -47,6 +50,7 @@ type WidgetAsQueryParams = Query<{
   environment: string[];
   project: number[];
   source: string;
+  dataset?: DataSet;
   end?: DateString;
   start?: DateString;
   statsPeriod?: string | null;

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

@@ -42,7 +42,7 @@ export enum DataSet {
   RELEASES = 'releases',
   METRICS = 'metrics',
   ERRORS = 'error-events',
-  TRANSACTIONS = 'transaction-like"',
+  TRANSACTIONS = 'transaction-like',
 }
 
 export enum SortDirection {

static/app/views/discover/homepage.tsx

@@ -78,7 +78,10 @@ class HomepageQueryAPI extends DeprecatedAsyncComponent<Props, HomepageQueryStat
 
       browserHistory.replace({
         ...this.props.location,
-        query,
+        query: {
+          ...query,
+          queryDataset: this.state.savedQuery?.queryDataset,
+        },
       });
     }
   }
@@ -97,30 +100,39 @@ class HomepageQueryAPI extends DeprecatedAsyncComponent<Props, HomepageQueryStat
   }
 
   onRequestSuccess({stateKey, data}) {
+    const {organization} = this.props;
     // No homepage query results in a 204, returning an empty string
     if (stateKey === 'savedQuery' && data === '') {
       this.setState({savedQuery: null});
+      return;
+    }
+    if (stateKey === 'savedQuery') {
+      this.setState({
+        savedQuery: organization.features.includes(
+          'performance-discover-dataset-selector'
+        )
+          ? getSavedQueryWithDataset(data)
+          : data,
+      });
     }
   }
 
   setSavedQuery = (newSavedQuery?: SavedQuery) => {
-    this.setState({savedQuery: newSavedQuery});
+    const {organization} = this.props;
+    this.setState({
+      savedQuery: organization.features.includes('performance-discover-dataset-selector')
+        ? getSavedQueryWithDataset(newSavedQuery)
+        : newSavedQuery,
+    });
   };
 
   renderBody(): React.ReactNode {
     const {savedQuery, loading} = this.state;
-    const {organization} = this.props;
-    let savedQueryWithDataset = savedQuery;
-    if (
-      organization.features.includes('performance-discover-dataset-selector') &&
-      savedQuery
-    ) {
-      savedQueryWithDataset = getSavedQueryWithDataset(savedQuery);
-    }
+
     return (
       <Results
         {...this.props}
-        savedQuery={savedQueryWithDataset ?? undefined}
+        savedQuery={savedQuery ?? undefined}
         loading={loading}
         setSavedQuery={this.setSavedQuery}
         isHomepage

static/app/views/discover/queryList.spec.tsx

@@ -13,7 +13,7 @@ import {
 
 import {openAddToDashboardModal} from 'sentry/actionCreators/modal';
 import {browserHistory} from 'sentry/utils/browserHistory';
-import {DisplayModes} from 'sentry/utils/discover/types';
+import {DisplayModes, SavedQueryDatasets} from 'sentry/utils/discover/types';
 import {DashboardWidgetSource, DisplayType} from 'sentry/views/dashboards/types';
 import QueryList from 'sentry/views/discover/queryList';
 
@@ -503,6 +503,7 @@ describe('Discover > QueryList', function () {
               orderby: 'count()',
               fields: ['test', 'count()'],
               yAxis: ['count()'],
+              queryDataset: SavedQueryDatasets.TRANSACTIONS,
             }),
           ]}
           pageLinks=""
@@ -554,4 +555,76 @@ describe('Discover > QueryList', function () {
       });
     });
   });
+
+  it('passes dataset to open modal', async function () {
+    const featuredOrganization = OrganizationFixture({
+      features: ['dashboards-edit', 'performance-discover-dataset-selector'],
+    });
+    render(
+      <QueryList
+        savedQuerySearchQuery=""
+        router={RouterFixture()}
+        renderPrebuilt={false}
+        organization={featuredOrganization}
+        savedQueries={[
+          DiscoverSavedQueryFixture({
+            display: DisplayModes.DEFAULT,
+            orderby: 'count()',
+            fields: ['test', 'count()'],
+            yAxis: ['count()'],
+            queryDataset: SavedQueryDatasets.TRANSACTIONS,
+          }),
+        ]}
+        pageLinks=""
+        onQueryChange={queryChangeMock}
+        location={location}
+      />
+    );
+
+    const contextMenu = await screen.findByTestId('menu-trigger');
+    expect(contextMenu).toBeInTheDocument();
+
+    expect(screen.queryByTestId('add-to-dashboard')).not.toBeInTheDocument();
+
+    await userEvent.click(contextMenu);
+
+    const addToDashboardMenuItem = await screen.findByTestId('add-to-dashboard');
+
+    await userEvent.click(addToDashboardMenuItem);
+
+    await waitFor(() => {
+      expect(openAddToDashboardModal).toHaveBeenCalledWith(
+        expect.objectContaining({
+          widget: {
+            displayType: 'line',
+            interval: undefined,
+            limit: undefined,
+            queries: [
+              {
+                aggregates: ['count()'],
+                columns: [],
+                conditions: '',
+                fields: ['count()'],
+                name: '',
+                orderby: '',
+              },
+            ],
+            title: 'Saved query #1',
+            widgetType: 'transaction-like',
+          },
+          widgetAsQueryParams: expect.objectContaining({
+            cursor: '0:1:1',
+            dataset: 'transaction-like',
+            defaultTableColumns: ['test', 'count()'],
+            defaultTitle: 'Saved query #1',
+            defaultWidgetQuery:
+              'name=&aggregates=count()&columns=&fields=count()&conditions=&orderby=',
+            displayType: 'line',
+            source: 'discoverv2',
+            statsPeriod: '14d',
+          }),
+        })
+      );
+    });
+  });
 });

static/app/views/discover/savedQuery/index.spec.tsx

@@ -2,9 +2,11 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {openAddToDashboardModal} from 'sentry/actionCreators/modal';
 import type {NewQuery} from 'sentry/types/organization';
 import EventView from 'sentry/utils/discover/eventView';
-import {DisplayModes} from 'sentry/utils/discover/types';
+import {DisplayModes, SavedQueryDatasets} from 'sentry/utils/discover/types';
+import {WidgetType} from 'sentry/views/dashboards/types';
 import {ALL_VIEWS} from 'sentry/views/discover/data';
 import SavedQueryButtonGroup from 'sentry/views/discover/savedQuery';
 import * as utils from 'sentry/views/discover/savedQuery/utils';
@@ -133,6 +135,71 @@ describe('Discover > SaveQueryButtonGroup', function () {
       ).toBeInTheDocument();
     });
 
+    it('opens dashboard modal with the right props', async () => {
+      organization = OrganizationFixture({
+        features: [
+          'discover-query',
+          'dashboards-edit',
+          'performance-discover-dataset-selector',
+        ],
+      });
+      mount(
+        location,
+        organization,
+        router,
+        errorsView,
+        {...savedQuery, queryDataset: SavedQueryDatasets.ERRORS},
+        yAxis
+      );
+
+      expect(
+        screen.getByRole('button', {name: /discover context menu/i})
+      ).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('button', {name: /discover context menu/i}));
+      expect(
+        screen.queryByRole('menuitemradio', {name: /add to dashboard/i})
+      ).toBeInTheDocument();
+      await userEvent.click(
+        screen.getByRole('menuitemradio', {name: /add to dashboard/i})
+      );
+
+      expect(openAddToDashboardModal).toHaveBeenCalledWith(
+        expect.objectContaining({
+          widget: {
+            displayType: 'line',
+            interval: undefined,
+            limit: undefined,
+            queries: [
+              {
+                aggregates: ['count()', 'failure_count()'],
+                columns: [],
+                conditions: 'event.type:error',
+                fields: ['count()', 'failure_count()'],
+                name: '',
+                orderby: '-count()',
+              },
+            ],
+            title: 'Errors by Title',
+            widgetType: WidgetType.ERRORS,
+          },
+          widgetAsQueryParams: expect.objectContaining({
+            dataset: WidgetType.ERRORS,
+            defaultTableColumns: ['title', 'count()', 'count_unique(user)', 'project'],
+            defaultTitle: 'Errors by Title',
+            defaultWidgetQuery:
+              'name=&aggregates=count()%2Cfailure_count()&columns=&fields=count()%2Cfailure_count()&conditions=event.type%3Aerror&orderby=-count()',
+            displayType: 'line',
+            end: undefined,
+            limit: undefined,
+            source: 'discoverv2',
+            start: undefined,
+            statsPeriod: '24h',
+          }),
+        })
+      );
+    });
+
     it('hides the banner when save is complete.', async () => {
       mount(location, organization, router, errorsView, undefined, yAxis);
 

static/app/views/discover/savedQuery/utils.tsx

@@ -253,7 +253,7 @@ export function displayModeToDisplayType(displayMode: DisplayModes): DisplayType
 
 export function getSavedQueryDataset(
   location: Location | undefined,
-  savedQuery: SavedQuery | undefined,
+  savedQuery: SavedQuery | NewQuery | undefined,
   splitDecision?: SavedQueryDatasets
 ): SavedQueryDatasets {
   const dataset = decodeScalar(location?.query?.[DATASET_PARAM]);

static/app/views/discover/utils.tsx

@@ -43,18 +43,18 @@ import {
   PROFILING_FIELDS,
   TRACING_FIELDS,
 } from 'sentry/utils/discover/fields';
-import type {DisplayModes} from 'sentry/utils/discover/types';
-import {TOP_N} from 'sentry/utils/discover/types';
+import {type DisplayModes, SavedQueryDatasets, TOP_N} from 'sentry/utils/discover/types';
 import {getTitle} from 'sentry/utils/events';
 import {DISCOVER_FIELDS, FieldValueType, getFieldDefinition} from 'sentry/utils/fields';
 import localStorage from 'sentry/utils/localStorage';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {DataSet} from 'sentry/views/dashboards/widgetBuilder/utils';
 
 import type {WidgetQuery} from '../dashboards/types';
 import {DashboardWidgetSource, DisplayType} from '../dashboards/types';
 import {transactionSummaryRouteWithQuery} from '../performance/transactionSummary/utils';
 
-import {displayModeToDisplayType} from './savedQuery/utils';
+import {displayModeToDisplayType, getSavedQueryDataset} from './savedQuery/utils';
 import type {FieldValue, TableColumn} from './table/types';
 import {FieldValueKind} from './table/types';
 import {ALL_VIEWS, TRANSACTION_VIEWS, WEB_VITALS_VIEWS} from './data';
@@ -695,6 +695,8 @@ export function handleAddQueryToDashboard({
     yAxis,
   });
 
+  const dataset = getSavedQueryDataset(location, query);
+
   const {query: widgetAsQueryParams} = constructAddQueryToDashboardLink({
     eventView,
     query,
@@ -728,6 +730,9 @@ export function handleAddQueryToDashboard({
         displayType === DisplayType.TOP_N
           ? Number(eventView.topEvents) || TOP_N
           : undefined,
+      widgetType: organization.features.includes('performance-discover-dataset-selector')
+        ? getWidgetDataset(dataset)
+        : undefined,
     },
     router,
     widgetAsQueryParams,
@@ -793,6 +798,8 @@ export function constructAddQueryToDashboardLink({
     displayType,
     yAxis,
   });
+  const dataset = getSavedQueryDataset(location, query);
+
   const defaultTitle =
     query?.name ?? (eventView.name !== 'All Events' ? eventView.name : undefined);
 
@@ -808,10 +815,25 @@ export function constructAddQueryToDashboardLink({
       defaultTableColumns: defaultTableFields,
       defaultTitle,
       displayType: displayType === DisplayType.TOP_N ? DisplayType.AREA : displayType,
+      dataset: organization.features.includes('performance-discover-dataset-selector')
+        ? getWidgetDataset(dataset)
+        : undefined,
       limit:
         displayType === DisplayType.TOP_N
           ? Number(eventView.topEvents) || TOP_N
           : undefined,
     },
   };
 }
+function getWidgetDataset(dataset: SavedQueryDatasets) {
+  switch (dataset) {
+    case SavedQueryDatasets.TRANSACTIONS:
+      return DataSet.TRANSACTIONS;
+
+    case SavedQueryDatasets.ERRORS:
+      return DataSet.ERRORS;
+
+    default:
+      return undefined;
+  }
+}