feat(new-trace-issues): Updating designs for trace preview in issue details (#83430)

- Added 'View Full Trace' action
- Made full waterfall clickable, removed darkened bg effect 
- Updated title
<img width="881" alt="Screenshot 2025-01-14 at 3 20 20 PM"
src="https://github.com/user-attachments/assets/2690e9d7-f620-4304-8438-bde5a51c056a"
/>

---------

Co-authored-by: Abdullah Khan <[email protected]>

Author: 2 people

static/app/components/events/interfaces/performance/eventTraceView.spec.tsx

@@ -156,7 +156,7 @@ describe('EventTraceView', () => {
     render(
       <EventTraceView group={perfGroup} event={perfEvent} organization={organization} />
     );
-    expect(await screen.findByText('Trace')).toBeInTheDocument();
+    expect(await screen.findByText('Trace Preview')).toBeInTheDocument();
     expect(
       await screen.findByRole('link', {name: 'View Full Trace'})
     ).toBeInTheDocument();
@@ -192,6 +192,6 @@ describe('EventTraceView', () => {
 
     render(<EventTraceView group={group} event={event} organization={organization} />);
 
-    expect(await screen.findByText('Trace')).toBeInTheDocument();
+    expect(await screen.findByText('Trace Preview')).toBeInTheDocument();
   });
 });

static/app/components/events/interfaces/performance/eventTraceView.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
 
 import {LinkButton} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import {generateTraceTarget} from 'sentry/components/quickTrace/utils';
 import {IconOpen} from 'sentry/icons';
@@ -11,6 +12,7 @@ import type {Event} from 'sentry/types/event';
 import {type Group, IssueCategory} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -58,9 +60,15 @@ interface EventTraceViewInnerProps {
   event: Event;
   organization: Organization;
   traceId: string;
+  traceTarget: LocationDescriptor;
 }
 
-function EventTraceViewInner({event, organization, traceId}: EventTraceViewInnerProps) {
+function EventTraceViewInner({
+  event,
+  organization,
+  traceId,
+  traceTarget,
+}: EventTraceViewInnerProps) {
   const timestamp = new Date(event.dateReceived).getTime() / 1e3;
 
   const trace = useTrace({
@@ -108,7 +116,14 @@ function EventTraceViewInner({event, organization, traceId}: EventTraceViewInner
           replay={null}
           event={event}
         />
-        <IssuesTraceOverlay event={event} />
+        <IssuesTraceOverlayContainer
+          href={getHrefFromTraceTarget(traceTarget)}
+          onClick={() => {
+            trackAnalytics('issue_details.view_full_trace_waterfall_clicked', {
+              organization,
+            });
+          }}
+        />
       </IssuesTraceContainer>
     </TraceStateProvider>
   );
@@ -129,39 +144,6 @@ function getHrefFromTraceTarget(traceTarget: LocationDescriptor) {
   return `${traceTarget.pathname}?${searchParams.toString()}`;
 }
 
-function IssuesTraceOverlay({event}: {event: Event}) {
-  const location = useLocation();
-  const organization = useOrganization();
-
-  const traceTarget = generateTraceTarget(
-    event,
-    organization,
-    {
-      ...location,
-      query: {
-        ...location.query,
-        groupId: event.groupID,
-      },
-    },
-    TraceViewSources.ISSUE_DETAILS
-  );
-
-  return (
-    <IssuesTraceOverlayContainer>
-      <LinkButton
-        size="sm"
-        icon={<IconOpen />}
-        href={getHrefFromTraceTarget(traceTarget)}
-        external
-        analyticsEventName="Issue Details: View Full Trace"
-        analyticsEventKey="issue_details.view_full_trace"
-      >
-        {t('View Full Trace')}
-      </LinkButton>
-    </IssuesTraceOverlayContainer>
-  );
-}
-
 function OneOtherIssueEvent({event}: {event: Event}) {
   const location = useLocation();
   const organization = useOrganization();
@@ -200,52 +182,69 @@ const IssuesTraceContainer = styled('div')`
   position: relative;
 `;
 
-const IssuesTraceOverlayContainer = styled('div')`
+const IssuesTraceOverlayContainer = styled(ExternalLink)`
   position: absolute;
   inset: 0;
   z-index: 10;
-
-  a {
-    display: none;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &:hover {
-    background-color: rgba(128, 128, 128, 0.4);
-
-    a {
-      display: block;
-    }
-  }
 `;
 
-interface EventTraceViewProps extends Omit<EventTraceViewInnerProps, 'traceId'> {
+interface EventTraceViewProps {
+  event: Event;
   group: Group;
+  organization: Organization;
 }
 
 export function EventTraceView({group, event, organization}: EventTraceViewProps) {
   const traceId = event.contexts.trace?.trace_id;
+  const location = useLocation();
+
   if (!traceId) {
     return null;
   }
 
+  const traceTarget = generateTraceTarget(
+    event,
+    organization,
+    {
+      ...location,
+      query: {
+        ...location.query,
+        groupId: event.groupID,
+      },
+    },
+    TraceViewSources.ISSUE_DETAILS
+  );
+
   const hasProfilingFeature = organization.features.includes('profiling');
   const hasTracePreviewFeature =
     hasProfilingFeature &&
     // Only display this for error or default events since performance events are handled elsewhere
     group.issueCategory !== IssueCategory.PERFORMANCE;
 
   return (
-    <InterimSection type={SectionKey.TRACE} title={t('Trace')}>
+    <InterimSection
+      type={SectionKey.TRACE}
+      title={t('Trace Preview')}
+      actions={
+        <LinkButton
+          size="xs"
+          icon={<IconOpen />}
+          href={getHrefFromTraceTarget(traceTarget)}
+          external
+          analyticsEventName="Issue Details: View Full Trace Action Button Clicked"
+          analyticsEventKey="issue_details.view_full_trace_action_button_clicked"
+        >
+          {t('View Full Trace')}
+        </LinkButton>
+      }
+    >
       <OneOtherIssueEvent event={event} />
       {hasTracePreviewFeature && (
         <EventTraceViewInner
           event={event}
           organization={organization}
           traceId={traceId}
+          traceTarget={traceTarget}
         />
       )}
     </InterimSection>

static/app/utils/analytics/issueAnalyticsEvents.tsx

@@ -168,6 +168,7 @@ export type IssueEventParameters = {
   'issue_details.streamline_ui_toggle': {
     isEnabled: boolean;
   };
+  'issue_details.view_full_trace_waterfall_clicked': {};
   'issue_details.view_hierarchy.hover_rendering_system': {
     platform?: string;
     user_org_role?: string;
@@ -463,6 +464,8 @@ export const issueEventMap: Record<IssueEventKey, string | null> = {
     'Issue Group Details: Tags distribution value bar clicked',
   'integrations.integration_reinstall_clicked': 'Integration Reinstall Button Clicked',
   'one_other_related_trace_issue.clicked': 'One Other Related Trace Issue Clicked',
+  'issue_details.view_full_trace_waterfall_clicked':
+    ' Issue Details: View Full Trace Waterfall Clicked',
 
   // Performance Issue specific events here
   'issue_details.performance.autogrouped_siblings_toggle':