feat(issues): Add description to trace timeline (#65050)

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

@@ -3,6 +3,8 @@ import styled from '@emotion/styled';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Placeholder from 'sentry/components/placeholder';
+import QuestionTooltip from 'sentry/components/questionTooltip';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
@@ -51,24 +53,47 @@ export function TraceTimeline({event}: TraceTimelineProps) {
 
   return (
     <ErrorBoundary mini>
-      <Stacked ref={timelineRef}>
-        {isLoading ? (
-          <LoadingSkeleton>
-            <Placeholder height="14px" />
-            <Placeholder height="8px" />
-          </LoadingSkeleton>
-        ) : (
-          <TimelineEventsContainer>
-            <TimelineOutline />
-            {/* Sets a min width of 200 for testing */}
-            <TraceTimelineEvents event={event} width={Math.max(width, 200)} />
-          </TimelineEventsContainer>
-        )}
-      </Stacked>
+      <TimelineWrapper>
+        <div ref={timelineRef}>
+          {isLoading ? (
+            <LoadingSkeleton>
+              <Placeholder height="14px" />
+              <Placeholder height="8px" />
+            </LoadingSkeleton>
+          ) : (
+            <TimelineEventsContainer>
+              <TimelineOutline />
+              {/* Sets a min width of 200 for testing */}
+              <TraceTimelineEvents event={event} width={Math.max(width, 200)} />
+            </TimelineEventsContainer>
+          )}
+        </div>
+        <QuestionTooltipWrapper>
+          <QuestionTooltip
+            size="sm"
+            title={t(
+              'This is a trace timeline showing all related events happening upstream and downstream of this event'
+            )}
+            position="bottom"
+          />
+        </QuestionTooltipWrapper>
+      </TimelineWrapper>
     </ErrorBoundary>
   );
 }
 
+const TimelineWrapper = styled('div')`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  gap: ${space(2)};
+  margin-top: ${space(0.5)};
+`;
+
+const QuestionTooltipWrapper = styled('div')`
+  margin-top: ${space(0.25)};
+`;
+
 /**
  * Displays the container the dots appear inside of
  */
@@ -83,24 +108,6 @@ const TimelineOutline = styled('div')`
   background-color: ${p => p.theme.backgroundSecondary};
 `;
 
-/**
- * Render all child elements directly on top of each other.
- *
- * This implementation does not remove the stack of elements from the document
- * flow, so width/height is reserved.
- *
- * An alternative would be to use `position:absolute;` in which case the size
- * would not be part of document flow and other elements could render behind.
- */
-const Stacked = styled('div')`
-  display: grid;
-  grid-template: 1fr / 1fr;
-  > * {
-    grid-area: 1 / 1;
-  }
-  margin-top: ${space(0.5)};
-`;
-
 const TimelineEventsContainer = styled('div')`
   position: relative;
   height: 34px;
@@ -111,6 +118,6 @@ const LoadingSkeleton = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${space(0.25)};
-  padding: ${space(0.75)} 0 ${space(1)};
+  padding: ${space(0.5)} 0 ${space(1)};
   height: 34px;
 `;