feat(issues): GA trace timeline (#66012)

static/app/views/issueDetails/groupEventCarousel.tsx

@@ -43,11 +43,8 @@ import {useParams} from 'sentry/utils/useParams';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import EventCreatedTooltip from 'sentry/views/issueDetails/eventCreatedTooltip';
 import {TraceLink} from 'sentry/views/issueDetails/traceTimeline/traceLink';
-import {hasTraceTimelineFeature} from 'sentry/views/issueDetails/traceTimeline/utils';
 import {useDefaultIssueEvent} from 'sentry/views/issueDetails/utils';
 
-import QuickTrace from './quickTrace';
-
 type GroupEventCarouselProps = {
   event: Event;
   group: Group;
@@ -361,9 +358,6 @@ export function GroupEventActions({event, group, projectSlug}: GroupEventActions
 }
 
 export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarouselProps) {
-  const organization = useOrganization();
-  const location = useLocation();
-
   const latencyThreshold = 30 * 60 * 1000; // 30 minutes
   const isOverLatencyThreshold =
     event.dateReceived &&
@@ -378,7 +372,6 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
     text: event.id,
   });
 
-  const hasTraceTimeline = hasTraceTimelineFeature(organization);
   const issueTypeConfig = getConfigForIssueType(group, group.project);
 
   return (
@@ -429,13 +422,7 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
             )}
           </EventIdAndTimeContainer>
         </EventHeading>
-        {hasTraceTimeline ? (
-          issueTypeConfig.traceTimeline ? (
-            <TraceLink event={event} />
-          ) : null
-        ) : (
-          <QuickTrace event={event} organization={organization} location={location} />
-        )}
+        {issueTypeConfig.traceTimeline ? <TraceLink event={event} /> : null}
       </div>
       <ActionsWrapper>
         <GroupEventActions event={event} group={group} projectSlug={projectSlug} />

static/app/views/issueDetails/groupEventDetails/groupEventDetails.spec.tsx

@@ -294,6 +294,13 @@ const mockGroupApis = (
     url: `/organizations/${organization.slug}/issues/${group.id}/first-last-release/`,
     method: 'GET',
   });
+  MockApiClient.addMockResponse({
+    url: `/organizations/${organization.slug}/events/`,
+    body: {
+      data: [],
+      meta: {fields: {}, units: {}},
+    },
+  });
 };
 
 describe('groupEventDetails', () => {

static/app/views/issueDetails/traceTimeline/traceLink.spec.tsx

@@ -10,7 +10,7 @@ import {TraceLink} from './traceLink';
 import type {TraceEventResponse} from './useTraceTimelineEvents';
 
 describe('TraceLink', () => {
-  const organization = OrganizationFixture({features: ['issues-trace-timeline']});
+  const organization = OrganizationFixture();
   const event = EventFixture({
     contexts: {
       trace: {

static/app/views/issueDetails/traceTimeline/traceTimeline.spec.tsx

@@ -13,7 +13,7 @@ import type {TraceEventResponse} from './useTraceTimelineEvents';
 jest.mock('sentry/utils/routeAnalytics/useRouteAnalyticsParams');
 
 describe('TraceTimeline', () => {
-  const organization = OrganizationFixture({features: ['issues-trace-timeline']});
+  const organization = OrganizationFixture();
   const event = EventFixture({
     dateCreated: '2024-01-24T09:09:03+00:00',
     contexts: {

static/app/views/issueDetails/traceTimeline/traceTimeline.tsx

@@ -9,8 +9,6 @@ import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useDimensions} from 'sentry/utils/useDimensions';
-import useOrganization from 'sentry/utils/useOrganization';
-import {hasTraceTimelineFeature} from 'sentry/views/issueDetails/traceTimeline/utils';
 
 import {TraceTimelineEvents} from './traceTimelineEvents';
 import {useTraceTimelineEvents} from './useTraceTimelineEvents';
@@ -20,25 +18,22 @@ interface TraceTimelineProps {
 }
 
 export function TraceTimeline({event}: TraceTimelineProps) {
-  const organization = useOrganization({allowNull: true});
   const timelineRef = useRef<HTMLDivElement>(null);
   const {width} = useDimensions({elementRef: timelineRef});
-  const hasFeature = hasTraceTimelineFeature(organization);
-  const {isError, isLoading, traceEvents} = useTraceTimelineEvents({event}, hasFeature);
+  const {isError, isLoading, traceEvents} = useTraceTimelineEvents({event});
 
   const hasTraceId = !!event.contexts?.trace?.trace_id;
 
   let timelineStatus: string | undefined;
-  if (hasFeature) {
-    if (hasTraceId && !isLoading) {
-      timelineStatus = traceEvents.length > 1 ? 'shown' : 'empty';
-    } else if (!hasTraceId) {
-      timelineStatus = 'no_trace_id';
-    }
+  if (hasTraceId && !isLoading) {
+    timelineStatus = traceEvents.length > 1 ? 'shown' : 'empty';
+  } else if (!hasTraceId) {
+    timelineStatus = 'no_trace_id';
   }
+
   useRouteAnalyticsParams(timelineStatus ? {trace_timeline_status: timelineStatus} : {});
 
-  if (!hasFeature || !hasTraceId) {
+  if (!hasTraceId) {
     return null;
   }
 

static/app/views/issueDetails/traceTimeline/useTraceTimelineEvents.tsx

@@ -33,10 +33,7 @@ interface UseTraceTimelineEventsOptions {
   event: Event;
 }
 
-export function useTraceTimelineEvents(
-  {event}: UseTraceTimelineEventsOptions,
-  isEnabled: boolean = true
-): {
+export function useTraceTimelineEvents({event}: UseTraceTimelineEventsOptions): {
   endTimestamp: number;
   isError: boolean;
   isLoading: boolean;
@@ -47,7 +44,7 @@ export function useTraceTimelineEvents(
   const {start, end} = getTraceTimeRangeFromEvent(event);
 
   const traceId = event.contexts?.trace?.trace_id ?? '';
-  const enabled = !!traceId && isEnabled;
+  const enabled = !!traceId;
   const {
     data: issuePlatformData,
     isLoading: isLoadingIssuePlatform,

static/app/views/issueDetails/traceTimeline/utils.tsx

@@ -1,5 +1,3 @@
-import type {Organization} from 'sentry/types';
-
 import type {TimelineEvent} from './useTraceTimelineEvents';
 
 function getEventTimestamp(start: number, event: TimelineEvent) {
@@ -47,7 +45,3 @@ export function getChunkTimeRange(
   // Round up and down to the nearest second
   return [Math.floor(chunkStartTimestamp), Math.floor(chunkEndTimestamp) + 1];
 }
-
-export function hasTraceTimelineFeature(organization: Organization | null) {
-  return organization?.features?.includes('issues-trace-timeline');
-}