fix(discover): Updates Discover widget modal to propagate global header selection to the dashboard view when submitting (#30641)

static/app/components/modals/addDashboardWidgetModal.tsx

@@ -242,7 +242,7 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
     errors: FlatValidationError,
     widgetData: Widget
   ) => {
-    const {closeModal, organization} = this.props;
+    const {closeModal, organization, selection} = this.props;
     const {selectedDashboard, dashboards} = this.state;
     // Validate that a dashboard was selected since api call to /dashboards/widgets/ does not check for dashboard
     if (
@@ -279,6 +279,10 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
         interval: widgetData.interval,
         title: widgetData.title,
         ...queryData,
+        // Propagate global header selection
+        ...selection.datetime,
+        project: selection.projects,
+        environment: selection.environments,
       };
 
       trackAdvancedAnalyticsEvent('discover_views.add_to_dashboard.confirm', {

static/app/views/dashboardsV2/view.tsx

@@ -1,5 +1,6 @@
 import {useEffect, useState} from 'react';
 import {browserHistory, RouteComponentProps} from 'react-router';
+import pick from 'lodash/pick';
 
 import {updateDashboardVisit} from 'sentry/actionCreators/dashboards';
 import Feature from 'sentry/components/acl/feature';
@@ -17,6 +18,8 @@ import OrgDashboards from './orgDashboards';
 import {DashboardState, Widget} from './types';
 import {constructWidgetFromQuery} from './utils';
 
+const ALLOWED_PARAMS = ['start', 'end', 'utc', 'period', 'project', 'environment'];
+
 type Props = RouteComponentProps<{orgId: string; dashboardId: string}, {}> & {
   organization: Organization;
   children: React.ReactNode;
@@ -37,9 +40,12 @@ function ViewEditDashboard(props: Props) {
 
     const constructedWidget = constructWidgetFromQuery(location.query);
     setNewWidget(constructedWidget);
-    // Clean up url after constructing widget from query string
+    // Clean up url after constructing widget from query string, only allow GHS params
     if (constructedWidget) {
-      browserHistory.replace(location.pathname);
+      browserHistory.replace({
+        pathname: location.pathname,
+        query: pick(location.query, ALLOWED_PARAMS),
+      });
     }
   }, [api, orgSlug, dashboardId]);
 

tests/js/spec/views/dashboardsV2/view.spec.tsx

@@ -0,0 +1,61 @@
+import {browserHistory} from 'react-router';
+
+import {initializeOrg} from 'sentry-test/initializeOrg';
+import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
+
+import ViewEditDashboard from 'sentry/views/dashboardsV2/view';
+
+describe('Dashboards > ViewEditDashboard', function () {
+  const initialData = initializeOrg();
+
+  it('removes widget params from url and preserves selection params', function () {
+    const location = {
+      pathname: '/',
+      query: {
+        environment: 'canary',
+        period: '7d',
+        project: '11111',
+        start: null,
+        end: null,
+        utc: null,
+        displayType: 'line',
+        interval: '5m',
+        queryConditions: '',
+        queryFields: 'count()',
+        queryNames: '',
+        queryOrderby: '',
+        title: 'test',
+      },
+    };
+    mountWithTheme(
+      <ViewEditDashboard
+        location={TestStubs.location(location)}
+        organization={initialData.organization}
+        router={initialData.router}
+        params={{
+          orgId: initialData.organization.slug,
+          dashboardId: '1',
+        }}
+        route={{}}
+        routes={[]}
+        routeParams={{}}
+      >
+        {() => undefined}
+      </ViewEditDashboard>
+    );
+
+    expect(browserHistory.replace).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pathname: '/',
+        query: {
+          end: null,
+          environment: 'canary',
+          period: '7d',
+          project: '11111',
+          start: null,
+          utc: null,
+        },
+      })
+    );
+  });
+});