feat(releases): Use routing for Releases Drawer

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/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';
@@ -63,12 +64,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
    */
@@ -119,6 +114,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';
@@ -136,22 +132,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
@@ -166,7 +147,14 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
           theme,
           props.releases,
           function onReleaseClick(release: Release) {
-            if (props.disableReleaseNavigation) {
+            if (organization.features.includes('release-bubbles-ui')) {
+              navigate({
+                query: {
+                  ...location.query,
+                  rd: 'show',
+                  rdRelease: release.version,
+                },
+              });
               return;
             }
             navigate(
@@ -683,8 +671,4 @@ const LoadingMask = styled(TransparentLoadingMask)`
   background: ${p => p.theme.background};
 `;
 
-const DrawerWidgetWrapper = styled('div')`
-  height: 220px;
-`;
-
 TimeSeriesWidgetVisualization.LoadingPlaceholder = LoadingPanel;

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/issueDetails/streamline/eventGraph.tsx

@@ -46,6 +46,7 @@ import {
 import {useReleaseMarkLineSeries} from 'sentry/views/issueDetails/streamline/hooks/useReleaseMarkLineSeries';
 import {Tab} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
+import {useReleasesDrawer} from 'sentry/views/releases/drawer/useReleasesDrawer';
 import {useReleaseBubbles} from 'sentry/views/releases/releaseBubbles/useReleaseBubbles';
 
 const enum EventGraphSeries {
@@ -277,19 +278,6 @@ export function EventGraph({
     releaseBubbleXAxis,
     releaseBubbleGrid,
   } = useReleaseBubbles({
-    chartRenderer: ({ref: chartRef}) => {
-      return (
-        <EventGraph
-          ref={chartRef}
-          group={group}
-          event={event}
-          showSummary={false}
-          showReleasesAs="line"
-          disableZoomNavigation
-          {...styleProps}
-        />
-      );
-    },
     alignInMiddle: true,
     legendSelected: legendSelected.Releases,
     desiredBuckets: eventSeries.length,
@@ -308,6 +296,8 @@ export function EventGraph({
     },
   });
 
+  useReleasesDrawer();
+
   const handleConnectRef = useCallback(
     (e: ReactEchartsRef | null) => {
       connectReleaseBubbleChartRef(e);

static/app/views/nav/secondary/sections/insights/insightsSecondaryNav.tsx

@@ -36,6 +36,7 @@ import {SecondaryNav} from 'sentry/views/nav/secondary/secondary';
 import {PrimaryNavGroup} from 'sentry/views/nav/types';
 import {isLinkActive} from 'sentry/views/nav/utils';
 import {makeProjectsPathname} from 'sentry/views/projects/pathname';
+import {useReleasesDrawer} from 'sentry/views/releases/drawer/useReleasesDrawer';
 
 const platformsUsingOverviewAsProjectDetails: PlatformKey[] = ['php-laravel'];
 
@@ -44,9 +45,10 @@ export function InsightsSecondaryNav() {
   const location = useLocation();
   const baseUrl = `/organizations/${organization.slug}/${DOMAIN_VIEW_BASE_URL}`;
   const isLaravelInsightsAvailable = useIsLaravelInsightsAvailable();
-
   const {projects} = useProjects();
 
+  useReleasesDrawer();
+
   const [starredProjects, nonStarredProjects] = useMemo(() => {
     return partition(projects, project => project.isBookmarked);
   }, [projects]);

static/app/views/releases/drawer/commitsList.tsx

@@ -44,7 +44,7 @@ export function CommitsList({release, releaseRepos, projectSlug}: CommitsProps)
     release,
     projectSlug,
     activeRepository: activeReleaseRepo,
-    cursor: location.query.commitsCursor,
+    cursor: location.query.rdCiCursor,
   });
 
   const commitsByRepository = getCommitsByRepository(commitList);
@@ -81,7 +81,7 @@ export function CommitsList({release, releaseRepos, projectSlug}: CommitsProps)
             onCursor={(cursor, path, searchQuery) => {
               navigate({
                 pathname: path,
-                query: {...searchQuery, commitsCursor: cursor},
+                query: {...searchQuery, rdCiCursor: cursor},
               });
             }}
           />