feat(discover): Add to Dashboard default Widget Display Type based on Discover Query

static/app/components/modals/addDashboardWidgetModal.tsx

@@ -62,6 +62,7 @@ export type DashboardWidgetModalOptions = {
   defaultWidgetQuery?: WidgetQuery;
   defaultTableColumns?: readonly string[];
   defaultTitle?: string;
+  displayType?: DisplayType;
   fromDiscover?: boolean;
   start?: DateString;
   end?: DateString;
@@ -102,12 +103,11 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
-    const {widget, defaultWidgetQuery, defaultTitle, fromDiscover} = props;
-
+    const {widget, defaultWidgetQuery, defaultTitle, displayType, fromDiscover} = props;
     if (!widget) {
       this.state = {
         title: defaultTitle ?? '',
-        displayType: DisplayType.LINE,
+        displayType: displayType ?? DisplayType.LINE,
         interval: '5m',
         queries: [defaultWidgetQuery ? {...defaultWidgetQuery} : {...newQuery}],
         errors: undefined,

static/app/views/eventsV2/queryList.tsx

@@ -23,12 +23,17 @@ import {Organization, SavedQuery} from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import trackAdvancedAnalyticsEvent from 'app/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'app/utils/discover/eventView';
+import {DisplayModes} from 'app/utils/discover/types';
 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 {
+  displayModeToDisplayType,
+  handleCreateQuery,
+  handleDeleteQuery,
+} from './savedQuery/utils';
 import MiniGraph from './miniGraph';
 import QueryCard from './querycard';
 import {getPrebuiltQueries} from './utils';
@@ -124,6 +129,7 @@ class QueryList extends React.Component<Props> {
         defaultTitle:
           savedQuery?.name ??
           (eventView.name !== 'All Events' ? eventView.name : undefined),
+        displayType: displayModeToDisplayType(eventView.display as DisplayModes),
       });
     };
 

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

@@ -25,13 +25,19 @@ import {trackAnalyticsEvent} from 'app/utils/analytics';
 import trackAdvancedAnalyticsEvent from 'app/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'app/utils/discover/eventView';
 import {getEquation, isEquation} from 'app/utils/discover/fields';
+import {DisplayModes} from 'app/utils/discover/types';
 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 {handleCreateQuery, handleDeleteQuery, handleUpdateQuery} from './utils';
+import {
+  displayModeToDisplayType,
+  handleCreateQuery,
+  handleDeleteQuery,
+  handleUpdateQuery,
+} from './utils';
 
 type DefaultProps = {
   disabled: boolean;
@@ -262,6 +268,7 @@ class SavedQueryButtonGroup extends React.PureComponent<Props, State> {
       defaultTitle:
         savedQuery?.name ??
         (eventView.name !== 'All Events' ? eventView.name : undefined),
+      displayType: displayModeToDisplayType(eventView.display as DisplayModes),
     });
   };
 

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

@@ -9,6 +9,8 @@ import {t} from 'app/locale';
 import {NewQuery, Organization, SavedQuery} from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import EventView from 'app/utils/discover/eventView';
+import {DisplayModes} from 'app/utils/discover/types';
+import {DisplayType} from 'app/views/dashboardsV2/types';
 
 export function handleCreateQuery(
   api: Client,
@@ -239,3 +241,14 @@ export function extractAnalyticsQueryFields(payload: NewQuery): Partial<NewQuery
     query,
   };
 }
+
+export function displayModeToDisplayType(displayMode: DisplayModes): DisplayType {
+  switch (displayMode) {
+    case DisplayModes.BAR:
+      return DisplayType.BAR;
+    case DisplayModes.WORLDMAP:
+      return DisplayType.WORLD_MAP;
+    default:
+      return DisplayType.LINE;
+  }
+}

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

@@ -18,6 +18,7 @@ function mountModal({
   widget,
   fromDiscover,
   defaultWidgetQuery,
+  displayType,
 }) {
   return mountWithTheme(
     <AddDashboardWidgetModal
@@ -31,6 +32,7 @@ function mountModal({
       closeModal={() => void 0}
       fromDiscover={fromDiscover}
       defaultWidgetQuery={defaultWidgetQuery}
+      displayType={displayType}
     />,
     initialData.routerContext
   );
@@ -928,4 +930,17 @@ describe('Modals -> AddDashboardWidgetModal', function () {
     expect(queryFields.at(2).props().fieldValue.function[0]).toEqual('count_unique');
     wrapper.unmount();
   });
+
+  it('uses displayType if given a displayType', async function () {
+    const wrapper = mountModal({
+      initialData,
+      onAddWidget: () => undefined,
+      onUpdateWidget: () => undefined,
+      fromDiscover: true,
+      displayType: types.DisplayType.BAR,
+    });
+
+    expect(wrapper.find('SelectPicker').at(1).props().value.value).toEqual('bar');
+    wrapper.unmount();
+  });
 });