feat(issue-details): Remove placeholder for trace missing (#52590)

this pr removes the placeholder if the trace of an event cannot be
found. instead of showing the placeholder, we won't show anything, but
will continue to track the analytics event.

Closes https://github.com/getsentry/sentry/issues/52533

static/app/views/issueDetails/quickTrace/index.spec.tsx

@@ -1,6 +1,5 @@
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render} from 'sentry-test/reactTestingLibrary';
 
-import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import QuickTrace from 'sentry/views/issueDetails/quickTrace';
 
 describe('IssueQuickTrace', () => {
@@ -26,16 +25,4 @@ describe('IssueQuickTrace', () => {
 
     expect(container).toBeEmptyDOMElement();
   });
-
-  it('renders a placeholder if event has a trace context but finds nothing', () => {
-    MockApiClient.addMockResponse({});
-
-    render(
-      <QuickTraceContext.Provider value={undefined}>
-        <QuickTrace {...defaultProps} />
-      </QuickTraceContext.Provider>
-    );
-
-    expect(screen.getByTestId('missing-trace-placeholder')).toBeInTheDocument();
-  });
 });

static/app/views/issueDetails/quickTrace/issueQuickTrace.tsx

@@ -2,16 +2,7 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import ExternalLink from 'sentry/components/links/externalLink';
 import QuickTrace from 'sentry/components/quickTrace';
-import {
-  ErrorNodeContent,
-  EventNode,
-  QuickTraceContainer,
-  TraceConnector,
-} from 'sentry/components/quickTrace/styles';
-import {IconFire} from 'sentry/icons';
-import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types';
 import {Event} from 'sentry/types/event';
@@ -27,60 +18,27 @@ type Props = {
   quickTrace: undefined | QuickTraceQueryChildrenProps;
 };
 
-function TransactionMissingPlaceholder({
-  type,
-  event,
-}: {
-  event: Event;
-  type?: QuickTraceQueryChildrenProps['type'];
-}) {
-  useRouteAnalyticsParams({
-    trace_status: type === 'missing' ? 'transaction missing' : 'trace missing',
-  });
-
-  return (
-    <QuickTraceWrapper>
-      <QuickTraceContainer data-test-id="missing-trace-placeholder">
-        <EventNode
-          type="white"
-          icon={null}
-          tooltipProps={{isHoverable: true, position: 'bottom'}}
-          tooltipText={tct(
-            'The [type] for this event cannot be found. [link:Read the  docs] to understand why.',
-            {
-              type: type === 'missing' ? t('transaction') : t('trace'),
-              link: (
-                <ExternalLink href="https://docs.sentry.io/product/sentry-basics/tracing/trace-view/#troubleshooting" />
-              ),
-            }
-          )}
-        >
-          ???
-        </EventNode>
-        <TraceConnector />
-        <EventNode type="error" data-test-id="event-node">
-          <ErrorNodeContent>
-            <IconFire size="xs" />
-            {t('This Event')}
-          </ErrorNodeContent>
-        </EventNode>
-        <TraceLink event={event} />
-      </QuickTraceContainer>
-    </QuickTraceWrapper>
-  );
-}
-
 function IssueQuickTrace({event, location, organization, quickTrace}: Props) {
-  const shouldShowPlaceholder =
+  const isTraceMissing =
     !quickTrace ||
     quickTrace.error ||
     !defined(quickTrace.trace) ||
     quickTrace.trace.length === 0;
 
-  useRouteAnalyticsParams(shouldShowPlaceholder ? {} : {trace_status: 'success'});
+  useRouteAnalyticsParams({
+    trace_status: isTraceMissing
+      ? quickTrace?.type === 'missing'
+        ? 'transaction missing'
+        : 'trace missing'
+      : 'success',
+  });
 
-  if (shouldShowPlaceholder) {
-    return <TransactionMissingPlaceholder event={event} type={quickTrace?.type} />;
+  if (isTraceMissing) {
+    return (
+      <QuickTraceWrapper>
+        <TraceLink event={event} noTrace />
+      </QuickTraceWrapper>
+    );
   }
 
   return (
@@ -95,7 +53,7 @@ function IssueQuickTrace({event, location, organization, quickTrace}: Props) {
           errorDest="issue"
           transactionDest="performance"
         />
-        <TraceLink event={event} />
+        <TraceLink noTrace={false} event={event} />
       </QuickTraceWrapper>
     </ErrorBoundary>
   );
@@ -106,6 +64,7 @@ const QuickTraceWrapper = styled('div')`
   align-items: center;
   flex-wrap: wrap;
   margin-top: ${space(0.75)};
+  height: 20px;
 `;
 
 export default IssueQuickTrace;

static/app/views/issueDetails/quickTrace/traceLink.tsx

@@ -12,9 +12,10 @@ import useOrganization from 'sentry/utils/useOrganization';
 
 type TraceLinkProps = {
   event: Event;
+  noTrace: boolean;
 };
 
-export function TraceLink({event}: TraceLinkProps) {
+export function TraceLink({event, noTrace}: TraceLinkProps) {
   const organization = useOrganization();
   const quickTrace = useContext(QuickTraceContext);
   const handleTraceLink = useCallback(() => {
@@ -33,13 +34,17 @@ export function TraceLink({event}: TraceLinkProps) {
     return null;
   }
   return (
-    <StyledLink to={generateTraceTarget(event, organization)} onClick={handleTraceLink}>
+    <StyledLink
+      to={generateTraceTarget(event, organization)}
+      onClick={handleTraceLink}
+      noTrace={noTrace}
+    >
       {t('View Full Trace')}
     </StyledLink>
   );
 }
 
-const StyledLink = styled(Link)`
-  margin-left: ${space(1)};
+const StyledLink = styled(Link)<{noTrace: boolean}>`
+  margin-left: ${p => (p.noTrace ? 0 : space(1))};
   font-size: ${p => p.theme.fontSizeSmall};
 `;