feat(dashboards): Add releases overlay on dashboard charts

static/app/components/modals/widgetViewerModal.tsx

@@ -130,7 +130,13 @@ const shouldWidgetCardChartMemo = (prevProps, props) => {
   );
   const isNotTopNWidget =
     props.widget.displayType !== DisplayType.TOP_N && !defined(props.widget.limit);
-  return selectionMatches && chartZoomOptionsMatches && (sortMatches || isNotTopNWidget);
+  const legendMatches = isEqual(props.legendOptions, prevProps.legendOptions);
+  return (
+    selectionMatches &&
+    chartZoomOptionsMatches &&
+    (sortMatches || isNotTopNWidget) &&
+    legendMatches
+  );
 };
 
 // WidgetCardChartContainer and WidgetCardChart rerenders if selection was changed.

static/app/views/dashboards/widgetCard/chart.tsx

@@ -13,6 +13,7 @@ import {BarChart} from 'sentry/components/charts/barChart';
 import ChartZoom from 'sentry/components/charts/chartZoom';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
 import {LineChart} from 'sentry/components/charts/lineChart';
+import ReleaseSeries from 'sentry/components/charts/releaseSeries';
 import SimpleTableChart from 'sentry/components/charts/simpleTableChart';
 import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
@@ -305,6 +306,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
       chartZoomOptions,
       timeseriesResultsTypes,
       shouldResize,
+      organization,
     } = this.props;
 
     if (widget.displayType === 'table') {
@@ -340,6 +342,7 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
 
     const {location, router, selection, onLegendSelectChanged} = this.props;
     const {start, end, period, utc} = selection.datetime;
+    const {projects, environments} = selection;
 
     const legend = {
       left: 0,
@@ -520,7 +523,54 @@ class WidgetCardChart extends Component<WidgetCardChartProps> {
 
           const forwardedRef = this.props.chartGroup ? this.handleRef : undefined;
 
-          return (
+          return organization.features.includes('dashboards-releases-on-charts') &&
+            (widget.displayType === DisplayType.LINE ||
+              widget.displayType === DisplayType.AREA) ? (
+            <ReleaseSeries
+              end={end}
+              start={start}
+              period={period}
+              environments={environments}
+              projects={projects}
+              memoized
+            >
+              {({releaseSeries}) => {
+                legend.selected = {Releases: false, ...legend.selected};
+
+                return (
+                  <TransitionChart loading={loading} reloading={loading}>
+                    <LoadingScreen loading={loading} />
+                    <ChartWrapper
+                      autoHeightResize={shouldResize ?? true}
+                      noPadding={noPadding}
+                    >
+                      {getDynamicText({
+                        value: this.chartComponent({
+                          ...zoomRenderProps,
+                          ...chartOptions,
+                          // Override default datazoom behaviour for updating Global Selection Header
+                          ...(onZoom
+                            ? {
+                                onDataZoom: (evt, chartProps) =>
+                                  // Need to pass seriesStart and seriesEnd to onZoom since slider zooms
+                                  // callback with percentage instead of datetime values. Passing seriesStart
+                                  // and seriesEnd allows calculating datetime values with percentage.
+                                  onZoom({...evt, seriesStart, seriesEnd}, chartProps),
+                              }
+                            : {}),
+                          legend,
+                          series: [...series, ...releaseSeries],
+                          onLegendSelectChanged,
+                          forwardedRef,
+                        }),
+                        fixed: <Placeholder height="200px" testId="skeleton-ui" />,
+                      })}
+                    </ChartWrapper>
+                  </TransitionChart>
+                );
+              }}
+            </ReleaseSeries>
+          ) : (
             <TransitionChart loading={loading} reloading={loading}>
               <LoadingScreen loading={loading} />
               <ChartWrapper autoHeightResize={shouldResize ?? true} noPadding={noPadding}>