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;