feat(releases): Use routing for Releases Drawer (#88562)

This allows the Releases drawer to be deeplinked (including charts).

This splits `<ReleasesDrawer>` into `useReleasesDrawer()` hook which
opens drawer and renders `<ReleasesDrawerList>` or
`<ReleasesDrawerDetails>`.

Author: billyvg

static/app/components/globalDrawer/index.tsx

@@ -70,7 +70,7 @@ export interface DrawerOptions {
   /**
    * If true (default), closes the drawer when the location changes
    */
-  shouldCloseOnLocationChange?: (newPathname: Location) => boolean;
+  shouldCloseOnLocationChange?: (nextLocation: Location) => boolean;
   //
   // Custom framer motion transition for the drawer
   //

static/app/utils/analytics/releasesAnalyticsEvents.tsx

@@ -3,6 +3,7 @@ import type {ReleaseComparisonChartType} from 'sentry/types/release';
 export type ReleasesEventParameters = {
   'releases.bubbles_legend': {selected: boolean};
   'releases.change_chart_type': {chartType: ReleaseComparisonChartType};
+  'releases.drawer_opened': {organization: string; release?: boolean};
   'releases.drawer_view_full_details': {project_id: string};
   'releases.quickstart_copied': {project_id: string};
   'releases.quickstart_create_integration.success': {
@@ -19,6 +20,7 @@ export const releasesEventMap: Record<ReleasesEventKey, string | null> = {
   'releases.bubbles_legend': 'Releases: Toggle Legend for Bubble',
   'releases.change_chart_type': 'Releases: Change Chart Type',
   'releases.drawer_view_full_details': 'Releases: Drawer View Full Details',
+  'releases.drawer_opened': 'Releases: Drawer Opened',
   'releases.quickstart_viewed': 'Releases: Quickstart Viewed',
   'releases.quickstart_copied': 'Releases: Quickstart Copied',
   'releases.quickstart_create_integration.success':

static/app/utils/dates.tsx

@@ -4,7 +4,6 @@ import ConfigStore from 'sentry/stores/configStore';
 
 import type {TableDataRow} from './discover/discoverQuery';
 
-// TODO(billy): Move to TimeRangeSelector specific utils
 export const DEFAULT_DAY_START_TIME = '00:00:00';
 export const DEFAULT_DAY_END_TIME = '23:59:59';
 const DATE_FORMAT_NO_TIMEZONE = 'YYYY/MM/DD HH:mm:ss';

static/app/utils/useReleaseStats.tsx

@@ -27,7 +27,10 @@ interface UseReleaseStatsParams {
  */
 export function useReleaseStats(
   {datetime, environments, projects, maxPages = 10}: UseReleaseStatsParams,
-  queryOptions: {staleTime: number} = {staleTime: Infinity}
+  queryOptions: {enabled?: boolean; staleTime?: number} = {
+    staleTime: Infinity,
+    enabled: true,
+  }
 ) {
   const organization = useOrganization();
 

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -1,5 +1,4 @@
 import {useCallback, useRef} from 'react';
-import {useNavigate} from 'react-router-dom';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
@@ -31,6 +30,8 @@ import {defined} from 'sentry/utils';
 import {uniq} from 'sentry/utils/array/uniq';
 import type {AggregationOutputType} from 'sentry/utils/discover/fields';
 import {type Range, RangeMap} from 'sentry/utils/number/rangeMap';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useWidgetSyncContext} from 'sentry/views/dashboards/contexts/widgetSyncContext';
@@ -45,7 +46,10 @@ import type {
 } from 'sentry/views/dashboards/widgets/common/types';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useReleaseBubbles} from 'sentry/views/releases/releaseBubbles/useReleaseBubbles';
-import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
+import {
+  makeReleaseDrawerPathname,
+  makeReleasesPathname,
+} from 'sentry/views/releases/utils/pathnames';
 
 import {formatTooltipValue} from './formatters/formatTooltipValue';
 import {formatXAxisTimestamp} from './formatters/formatXAxisTimestamp';
@@ -63,12 +67,6 @@ export interface TimeSeriesWidgetVisualizationProps
    * An array of `Plottable` objects. This can be any object that implements the `Plottable` interface.
    */
   plottables: Plottable[];
-  /**
-  /**
-   * Disables navigating to release details when clicked
-   * TODO(billy): temporary until we implement route based nav
-   */
-  disableReleaseNavigation?: boolean;
   /**
    * A mapping of time series field name to boolean. If the value is `false`, the series is hidden from view
    */
@@ -129,6 +127,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
   const theme = useTheme();
   const organization = useOrganization();
   const navigate = useNavigate();
+  const location = useLocation();
   const hasReleaseBubbles =
     organization.features.includes('release-bubbles-ui') &&
     props.showReleaseAs === 'bubble';
@@ -146,22 +145,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
-    chartRenderer: ({start: trimStart, end: trimEnd, ref: chartRendererRef}) => {
-      return (
-        <DrawerWidgetWrapper>
-          <TimeSeriesWidgetVisualization
-            {...props}
-            ref={chartRendererRef}
-            disableReleaseNavigation
-            onZoom={() => {}}
-            plottables={props.plottables.map(plottable =>
-              plottable.constrain(trimStart, trimEnd)
-            )}
-            showReleaseAs="line"
-          />
-        </DrawerWidgetWrapper>
-      );
-    },
+    chartId: props.id,
     minTime: earliestTimeStamp ? new Date(earliestTimeStamp).getTime() : undefined,
     maxTime: latestTimeStamp ? new Date(latestTimeStamp).getTime() : undefined,
     releases: hasReleaseBubbles
@@ -176,7 +160,8 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
           theme,
           props.releases,
           function onReleaseClick(release: Release) {
-            if (props.disableReleaseNavigation) {
+            if (organization.features.includes('release-bubbles-ui')) {
+              navigate(makeReleaseDrawerPathname({location, release: release.version}));
               return;
             }
             navigate(
@@ -717,8 +702,4 @@ const LoadingMask = styled(TransparentLoadingMask)`
   background: ${p => p.theme.background};
 `;
 
-const DrawerWidgetWrapper = styled('div')`
-  height: 220px;
-`;
-
 TimeSeriesWidgetVisualization.LoadingPlaceholder = LoadingPanel;

static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
 import {space} from 'sentry/styles/space';
-import {ResourceLandingDurationChartWidget} from 'sentry/views/insights/common/components/widgets/resourceLandingDurationChartWidget';
-import {ResourceLandingThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/resourceLandingThroughputChartWidget';
+import ResourceLandingDurationChartWidget from 'sentry/views/insights/common/components/widgets/resourceLandingDurationChartWidget';
+import ResourceLandingThroughputChartWidget from 'sentry/views/insights/common/components/widgets/resourceLandingThroughputChartWidget';
 
 export function ResourceLandingPageCharts() {
   return (

static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx

@@ -1,9 +1,9 @@
 import {Fragment} from 'react';
 
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
-import {ResourceSummaryAverageSizeChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget';
-import {ResourceSummaryDurationChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryDurationChartWidget';
-import {ResourceSummaryThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget';
+import ResourceSummaryAverageSizeChartWidget from 'sentry/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget';
+import ResourceSummaryDurationChartWidget from 'sentry/views/insights/common/components/widgets/resourceSummaryDurationChartWidget';
+import ResourceSummaryThroughputChartWidget from 'sentry/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget';
 
 function ResourceSummaryCharts() {
   return (

static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx

@@ -6,6 +6,7 @@ import {openInsightChartModal} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/core/button';
 import {IconExpand} from 'sentry/icons';
 import {t} from 'sentry/locale';
+import type {PageFilters} from 'sentry/types/core';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
@@ -47,8 +48,10 @@ export interface InsightsTimeSeriesWidgetProps
   interactiveTitle?: () => React.ReactNode;
   legendSelection?: LegendSelection | undefined;
   onLegendSelectionChange?: ((selection: LegendSelection) => void) | undefined;
+  pageFilters?: PageFilters;
   samples?: Samples;
   showLegend?: TimeSeriesWidgetVisualizationProps['showLegend'];
+  showReleaseAs?: 'line' | 'bubble';
   stacked?: boolean;
 }
 

static/app/views/insights/common/components/widgets/crashFreeSessionsChartWidget.tsx

@@ -28,7 +28,7 @@ export default function CrashFreeSessionsChartWidget(props: LoadableChartWidgetP
       interactiveTitle={() => (
         <ChartSelectionTitle title={CHART_TITLES.CrashFreeSessionsChartWidget} />
       )}
-      height={SESSION_HEALTH_CHART_HEIGHT}
+      height={props.height || SESSION_HEALTH_CHART_HEIGHT}
       description={tct(
         'The percent of sessions terminating without a crash. See [link:session status]. The 5 most adopted releases are shown.',
         {

static/app/views/insights/common/components/widgets/releaseSessionCountChartWidget.tsx

@@ -25,7 +25,7 @@ export default function ReleaseSessionCountChartwidget(props: LoadableChartWidge
       interactiveTitle={() => (
         <ChartSelectionTitle title={CHART_TITLES.ReleaseSessionCountChartWidget} />
       )}
-      height={SESSION_HEALTH_CHART_HEIGHT}
+      height={props.height || SESSION_HEALTH_CHART_HEIGHT}
       description={t(
         'The total number of sessions per release. The 5 most recent releases are shown.'
       )}