feat(perf): Add tooltips to quick trace (#23863)

Add tooltips to the quick trace pills explaining what they link to. The tooltip
component broke the css for the dashes and that was adjusted.

src/sentry/static/sentry/app/views/performance/transactionDetails/quickTrace.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import {Location, LocationDescriptor} from 'history';
 
 import {getTraceDateTimeRange} from 'app/components/events/interfaces/spans/utils';
 import Link from 'app/components/links/link';
 import Placeholder from 'app/components/placeholder';
+import Tooltip from 'app/components/tooltip';
 import {ALL_ACCESS_PROJECTS} from 'app/constants/globalSelectionHeader';
 import {t, tn} from 'app/locale';
 import {OrganizationSummary, Project} from 'app/types';
@@ -18,7 +18,7 @@ import withProjects from 'app/utils/withProjects';
 import {getTransactionDetailsUrl} from '../utils';
 
 import QuickTraceQuery, {EventLite, TraceLite} from './quickTraceQuery';
-import {EventNode, MetaData, NodesContainer} from './styles';
+import {Dash, EventNode, MetaData} from './styles';
 import {isTransaction, parseTraceLite} from './utils';
 
 type Props = {
@@ -94,20 +94,32 @@ const QuickTraceLite = withProjects(
     if (root) {
       const target = generateSingleEventTarget(root, organization, projects, location);
       nodes.push(
-        <EventNode key="root" type="white" icon={null} to={target}>
-          {t('Root')}
-        </EventNode>
+        <Tooltip position="top" title={t('View the root transaction in this trace.')}>
+          <EventNode key="root" type="white" pad="right" icon={null} to={target}>
+            {t('Root')}
+          </EventNode>
+        </Tooltip>
       );
+      nodes.push(<Dash />);
     }
 
     const traceTarget = generateTraceTarget(event, organization);
 
     if (root && current && root.event_id !== current.parent_event_id) {
       nodes.push(
-        <EventNode key="ancestors" type="white" icon={null} to={traceTarget}>
-          {t('Ancestors')}
-        </EventNode>
+        <Tooltip position="top" title={t('View all transactions in this trace.')}>
+          <EventNode
+            key="ancestors"
+            type="white"
+            pad="right"
+            icon={null}
+            to={traceTarget}
+          >
+            {t('Ancestors')}
+          </EventNode>
+        </Tooltip>
       );
+      nodes.push(<Dash />);
     }
 
     nodes.push(
@@ -124,24 +136,45 @@ const QuickTraceLite = withProjects(
         projects,
         location
       );
+      nodes.push(<Dash />);
       nodes.push(
-        <EventNode key="children" type="white" icon={null} to={childrenTarget}>
-          {tn('%s Child', '%s Children', children.length)}
-        </EventNode>
+        <Tooltip
+          position="top"
+          title={tn(
+            'View the child transaction of this event.',
+            'View all child transactions of this event.',
+            children.length
+          )}
+        >
+          <EventNode
+            key="children"
+            type="white"
+            pad="left"
+            icon={null}
+            to={childrenTarget}
+          >
+            {tn('%s Child', '%s Children', children.length)}
+          </EventNode>
+        </Tooltip>
       );
 
+      nodes.push(<Dash />);
       nodes.push(
-        <EventNode key="descendents" type="white" icon={null} to={traceTarget}>
-          &nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;
-        </EventNode>
+        <Tooltip position="top" title={t('View all transactions in this trace.')}>
+          <EventNode
+            key="descendents"
+            type="white"
+            pad="left"
+            icon={null}
+            to={traceTarget}
+          >
+            &nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;
+          </EventNode>
+        </Tooltip>
       );
     }
 
-    return (
-      <Container>
-        <NodesContainer>{nodes}</NodesContainer>
-      </Container>
-    );
+    return <div>{nodes}</div>;
   }
 );
 
@@ -229,8 +262,3 @@ function generateTraceTarget(
   });
   return eventView.getResultsViewUrlTarget(organization.slug);
 }
-
-const Container = styled('div')`
-  position: relative;
-  height: 33px;
-`;

src/sentry/static/sentry/app/views/performance/transactionDetails/styles.tsx

@@ -5,7 +5,6 @@ import {SectionHeading} from 'app/components/charts/styles';
 import QuestionTooltip from 'app/components/questionTooltip';
 import Tag, {Background} from 'app/components/tag';
 import space from 'app/styles/space';
-import {Theme} from 'app/utils/theme';
 
 type MetaDataProps = {
   headingText: string;
@@ -50,31 +49,18 @@ const SectionSubtext = styled('div')`
   color: ${p => p.theme.subText};
 `;
 
-export const NodesContainer = styled('div')`
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 33px;
-  gap: ${space(1)};
-
-  &:before {
-    content: '';
-    border-bottom: 1px solid ${p => p.theme.gray500};
-    height: 33px;
-    position: absolute;
-    width: 100%;
-    transform: translateY(-50%);
-    z-index: ${p => p.theme.zIndex.initial};
-  }
-`;
-
-export const EventNode = styled(Tag)<{type: keyof Theme['tag']}>`
-  z-index: ${p => p.theme.zIndex.initial};
-
+export const EventNode = styled(Tag)<{pad?: 'left' | 'right'}>`
   & ${/* sc-selector */ Background} {
     border: 1px solid ${p => p.theme.gray500};
     height: 24px;
     border-radius: 24px;
   }
 `;
+
+export const Dash = styled('div')`
+  display: inline-block;
+  height: 24px;
+  width: ${space(1)};
+  border-bottom: 1px solid ${p => p.theme.gray500};
+  transform: translateY(-${space(0.5)});
+`;