feat(discover): discover add to dashboard button uses y axis from que…

…ry (#29046)

Updated discover add to dashboard widget to prefill Y-Axis fields with Y-Axis and Column values from the discover query based on the visualization type.

static/app/components/modals/addDashboardWidgetModal.tsx

@@ -58,7 +58,8 @@ export type DashboardWidgetModalOptions = {
   onAddWidget?: (data: Widget) => void;
   widget?: Widget;
   onUpdateWidget?: (nextWidget: Widget) => void;
-  defaultQuery?: string;
+  defaultWidgetQuery?: WidgetQuery;
+  defaultTableColumns?: readonly string[];
   defaultTitle?: string;
   fromDiscover?: boolean;
   start?: DateString;
@@ -87,6 +88,7 @@ type State = {
   errors?: Record<string, any>;
   dashboards: DashboardListItem[];
   selectedDashboard?: SelectValue<string>;
+  userHasModified: boolean;
 };
 
 const newQuery = {
@@ -99,17 +101,18 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const {widget, defaultQuery, defaultTitle, fromDiscover} = props;
+    const {widget, defaultWidgetQuery, defaultTitle, fromDiscover} = props;
 
     if (!widget) {
       this.state = {
         title: defaultTitle ?? '',
         displayType: DisplayType.LINE,
         interval: '5m',
-        queries: [{...newQuery, ...(defaultQuery ? {conditions: defaultQuery} : {})}],
+        queries: [defaultWidgetQuery ? {...defaultWidgetQuery} : {...newQuery}],
         errors: undefined,
         loading: !!fromDiscover,
         dashboards: [],
+        userHasModified: false,
       };
       return;
     }
@@ -122,6 +125,7 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
       errors: undefined,
       loading: false,
       dashboards: [],
+      userHasModified: false,
     };
   }
 
@@ -230,13 +234,29 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
   };
 
   handleFieldChange = (field: string) => (value: string) => {
+    const {defaultWidgetQuery, defaultTableColumns} = this.props;
     this.setState(prevState => {
       const newState = cloneDeep(prevState);
       set(newState, field, value);
 
       if (field === 'displayType') {
         const displayType = value as Widget['displayType'];
-        set(newState, 'queries', normalizeQueries(displayType, prevState.queries));
+        const normalized = normalizeQueries(displayType, prevState.queries);
+
+        // If switching to Table visualization, use saved query fields for Y-Axis if user has not made query changes
+        if (defaultWidgetQuery && defaultTableColumns && !prevState.userHasModified) {
+          if (displayType === DisplayType.TABLE) {
+            normalized.forEach(query => {
+              query.fields = [...defaultTableColumns];
+            });
+          } else {
+            normalized.forEach(query => {
+              query.fields = [...defaultWidgetQuery.fields];
+            });
+          }
+        }
+
+        set(newState, 'queries', normalized);
       }
 
       return {...newState, errors: undefined};
@@ -247,6 +267,7 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
     this.setState(prevState => {
       const newState = cloneDeep(prevState);
       set(newState, `queries.${index}`, widgetQuery);
+      set(newState, 'userHasModified', true);
 
       return {...newState, errors: undefined};
     });

static/app/views/eventsV2/queryList.tsx

@@ -24,6 +24,7 @@ import EventView from 'app/utils/discover/eventView';
 import parseLinkHeader from 'app/utils/parseLinkHeader';
 import {decodeList} from 'app/utils/queryString';
 import withApi from 'app/utils/withApi';
+import {WidgetQuery} from 'app/views/dashboardsV2/types';
 
 import {handleCreateQuery, handleDeleteQuery} from './savedQuery/utils';
 import MiniGraph from './miniGraph';
@@ -93,14 +94,25 @@ class QueryList extends React.Component<Props> {
       const {organization} = this.props;
       event.preventDefault();
       event.stopPropagation();
+
+      const defaultWidgetQuery: WidgetQuery = {
+        name: '',
+        fields: savedQuery?.yAxis ?? ['count()'],
+        conditions: eventView.query,
+        orderby: '',
+      };
+
       openAddDashboardWidgetModal({
         organization,
-        defaultQuery: eventView.query,
         start: eventView.start,
         end: eventView.end,
         statsPeriod: eventView.statsPeriod,
         fromDiscover: true,
-        defaultTitle: savedQuery?.name ?? eventView.name,
+        defaultWidgetQuery,
+        defaultTableColumns: eventView.fields.map(({field}) => field),
+        defaultTitle:
+          savedQuery?.name ??
+          (eventView.name !== 'All Events' ? eventView.name : undefined),
       });
     };
 

static/app/views/eventsV2/savedQuery/index.tsx

@@ -25,6 +25,7 @@ import EventView from 'app/utils/discover/eventView';
 import {getDiscoverLandingUrl} from 'app/utils/discover/urls';
 import withApi from 'app/utils/withApi';
 import withProjects from 'app/utils/withProjects';
+import {WidgetQuery} from 'app/views/dashboardsV2/types';
 import InputControl from 'app/views/settings/components/forms/controls/input';
 
 import DiscoverQueryMenu from './discoverQueryMenu';
@@ -224,13 +225,22 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
   };
 
   handleAddDashboardWidget = () => {
-    const {organization, eventView, savedQuery} = this.props;
+    const {organization, eventView, savedQuery, yAxis} = this.props;
+    const defaultWidgetQuery: WidgetQuery = {
+      name: '',
+      fields: yAxis ?? ['count()'],
+      conditions: eventView.query,
+      orderby: '',
+    };
+
     openAddDashboardWidgetModal({
       organization,
-      defaultQuery: eventView.query,
-      defaultTitle:
-        savedQuery?.name ?? eventView.name !== 'All Events' ? eventView.name : undefined,
       fromDiscover: true,
+      defaultWidgetQuery,
+      defaultTableColumns: eventView.fields.map(({field}) => field),
+      defaultTitle:
+        savedQuery?.name ??
+        (eventView.name !== 'All Events' ? eventView.name : undefined),
     });
   };
 

tests/js/spec/components/modals/addDashboardWidgetModal.spec.jsx

@@ -11,7 +11,14 @@ import * as types from 'app/views/dashboardsV2/types';
 
 const stubEl = props => <div>{props.children}</div>;
 
-function mountModal({initialData, onAddWidget, onUpdateWidget, widget, fromDiscover}) {
+function mountModal({
+  initialData,
+  onAddWidget,
+  onUpdateWidget,
+  widget,
+  fromDiscover,
+  defaultWidgetQuery,
+}) {
   return mountWithTheme(
     <AddDashboardWidgetModal
       Header={stubEl}
@@ -23,6 +30,7 @@ function mountModal({initialData, onAddWidget, onUpdateWidget, widget, fromDisco
       widget={widget}
       closeModal={() => void 0}
       fromDiscover={fromDiscover}
+      defaultWidgetQuery={defaultWidgetQuery}
     />,
     initialData.routerContext
   );
@@ -865,4 +873,28 @@ describe('Modals -> AddDashboardWidgetModal', function () {
 
     wrapper.unmount();
   });
+
+  it('should use defaultWidgetQuery Y-Axis and Conditions if given a defaultWidgetQuery', async function () {
+    const wrapper = mountModal({
+      initialData,
+      onAddWidget: () => undefined,
+      onUpdateWidget: () => undefined,
+      widget: undefined,
+      fromDiscover: true,
+      defaultWidgetQuery: {
+        name: '',
+        fields: ['count()', 'failure_count()', 'count_unique(user)'],
+        conditions: 'tag:value',
+        orderby: '',
+      },
+    });
+
+    expect(wrapper.find('SearchBar').props().query).toEqual('tag:value');
+    const queryFields = wrapper.find('QueryField');
+    expect(queryFields.length).toEqual(3);
+    expect(queryFields.at(0).props().fieldValue.function[0]).toEqual('count');
+    expect(queryFields.at(1).props().fieldValue.function[0]).toEqual('failure_count');
+    expect(queryFields.at(2).props().fieldValue.function[0]).toEqual('count_unique');
+    wrapper.unmount();
+  });
 });