feat(dashboards): Add releases overlay on dashboard charts

static/app/components/modals/widgetViewerModal.spec.tsx

@@ -311,6 +311,7 @@ describe('Modals -> WidgetViewerModal', function () {
               query: {
                 viewerEnd: '2022-03-01T07:33:20',
                 viewerStart: '2022-03-01T02:00:00',
+                unselectedSeries: 'Releases',
               },
             })
           )
@@ -336,7 +337,7 @@ describe('Modals -> WidgetViewerModal', function () {
         expect(initialData.router.replace).toHaveBeenCalledWith(
           expect.objectContaining({
             pathname: '/mock-pathname/',
-            query: {query: 1},
+            query: {query: 1, unselectedSeries: 'Releases'},
           })
         );
         // Need to manually set the new router location and rerender to simulate the dropdown selection click
@@ -370,13 +371,13 @@ describe('Modals -> WidgetViewerModal', function () {
       it('renders with first legend disabled by default', async function () {
         mockEvents();
         // Rerender with first legend disabled
-        initialData.router.location.query = {legend: ['Query Name']};
+        initialData.router.location.query = {legend: ['Query Name', 'Releases']};
         await renderModal({initialData, widget: mockWidget});
         expect(ReactEchartsCore).toHaveBeenLastCalledWith(
           expect.objectContaining({
             option: expect.objectContaining({
               legend: expect.objectContaining({
-                selected: {'Query Name': false},
+                selected: {Releases: false},
               }),
             }),
           }),
@@ -463,6 +464,7 @@ describe('Modals -> WidgetViewerModal', function () {
               query: {
                 viewerEnd: '2022-03-01T05:53:20',
                 viewerStart: '2022-03-01T03:40:00',
+                unselectedSeries: 'Releases',
               },
             })
           )
@@ -753,7 +755,7 @@ describe('Modals -> WidgetViewerModal', function () {
         expect(initialData.router.push).toHaveBeenCalledWith(
           expect.objectContaining({
             pathname: '/mock-pathname/',
-            query: {sort: '-count()'},
+            query: {sort: '-count()', unselectedSeries: 'Releases'},
           })
         );
         // Need to manually set the new router location and rerender to simulate the sortable column click
@@ -829,7 +831,7 @@ describe('Modals -> WidgetViewerModal', function () {
         await userEvent.click(screen.getByRole('button', {name: 'Next'}));
         expect(initialData.router.replace).toHaveBeenCalledWith(
           expect.objectContaining({
-            query: {cursor: '0:10:0'},
+            query: {cursor: '0:10:0', unselectedSeries: 'Releases'},
           })
         );
         // Need to manually set the new router location and rerender to simulate the next page click
@@ -919,6 +921,7 @@ describe('Modals -> WidgetViewerModal', function () {
             query: {
               viewerEnd: '2022-03-01T05:53:20',
               viewerStart: '2022-03-01T03:40:00',
+              unselectedSeries: 'Releases',
             },
           })
         );
@@ -1388,7 +1391,7 @@ describe('Modals -> WidgetViewerModal', function () {
       expect(initialData.router.push).toHaveBeenCalledWith(
         expect.objectContaining({
           pathname: '/mock-pathname/',
-          query: {sort: '-sum(session)'},
+          query: {sort: '-sum(session)', unselectedSeries: 'Releases'},
         })
       );
       // Need to manually set the new router location and rerender to simulate the sortable column click

static/app/components/modals/widgetViewerModal.tsx

@@ -103,6 +103,7 @@ export interface WidgetViewerModalOptions {
   onEdit?: () => void;
   onMetricWidgetEdit?: (widget: Widget) => void;
   pageLinks?: string;
+  releaseSeries?: Series[];
   seriesData?: Series[];
   seriesResultsType?: Record<string, AggregationOutputType>;
   tableData?: TableDataWithTitle[];
@@ -181,6 +182,7 @@ function WidgetViewerModal(props: Props) {
     pageLinks: defaultPageLinks,
     seriesResultsType,
     dashboardFilters,
+    releaseSeries,
   } = props;
   const location = useLocation();
   const {projects} = useProjects();
@@ -870,6 +872,7 @@ function WidgetViewerModal(props: Props) {
                 showSlider={shouldShowSlider}
                 noPadding
                 chartZoomOptions={chartZoomOptions}
+                releaseSeries={releaseSeries}
               />
             ) : (
               <MemoizedWidgetCardChartContainer
@@ -887,6 +890,7 @@ function WidgetViewerModal(props: Props) {
                 showSlider={shouldShowSlider}
                 noPadding
                 chartZoomOptions={chartZoomOptions}
+                releaseSeries={releaseSeries}
               />
             )}
           </Container>

static/app/views/dashboards/dashboard.tsx

@@ -22,6 +22,7 @@ import {t} from 'sentry/locale';
 import GroupStore from 'sentry/stores/groupStore';
 import {space} from 'sentry/styles/space';
 import type {PageFilters} from 'sentry/types/core';
+import type {Series} from 'sentry/types/echarts';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -53,7 +54,7 @@ import {
 } from './layoutUtils';
 import SortableWidget from './sortableWidget';
 import type {DashboardDetails, Widget} from './types';
-import {DashboardWidgetSource, WidgetType} from './types';
+import {DashboardWidgetSource, DisplayType, WidgetType} from './types';
 import {connectDashboardCharts, getDashboardFiltersFromURL} from './utils';
 
 export const DRAG_HANDLE_CLASS = 'widget-drag';
@@ -94,6 +95,7 @@ type Props = {
   onSetNewWidget?: () => void;
   paramDashboardId?: string;
   paramTemplateId?: string;
+  releaseSeries?: Series[];
 };
 
 type State = {
@@ -398,6 +400,10 @@ class Dashboard extends Component<Props, State> {
       isPreview,
 
       dashboardFilters: getDashboardFiltersFromURL(location) ?? dashboard.filters,
+      releaseSeries:
+        widget.displayType === DisplayType.AREA || widget.displayType === DisplayType.LINE
+          ? this.props.releaseSeries
+          : undefined,
     };
 
     const key = constructGridItemKey(widget);

static/app/views/dashboards/detail.spec.tsx

@@ -31,6 +31,14 @@ describe('Dashboards > Detail', function () {
   });
   const projects = [ProjectFixture()];
 
+  beforeEach(function () {
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: '/organizations/org-slug/releases/stats/',
+      body: [],
+    });
+  });
+
   describe('prebuilt dashboards', function () {
     let initialData;