Browse Source

fix(issues): Timeline count w/ zero items, menu padding (#65049)

Scott Cooper 1 year ago
parent
commit
28f8391936

+ 8 - 3
static/app/views/issueDetails/traceTimeline/traceLink.tsx

@@ -1,3 +1,4 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import Link from 'sentry/components/links/link';
@@ -48,9 +49,13 @@ export function TraceLink({event}: TraceLinkProps) {
     >
       <span>
         {t('View Full Trace')}
-        {data.length >= 100
-          ? t(' (100+ issues)')
-          : tn(' (%s issue)', ' (%s issues)', data.length)}
+        {data.length > 0 && (
+          <Fragment>
+            {data.length >= 100
+              ? t(' (100+ issues)')
+              : tn(' (%s issue)', ' (%s issues)', data.length)}
+          </Fragment>
+        )}
       </span>
       <IconChevron direction="right" size="xs" />
     </StyledLink>

+ 5 - 6
static/app/views/issueDetails/traceTimeline/traceTimelineTooltip.tsx

@@ -36,13 +36,12 @@ export function TraceTimelineTooltip({event, timelineEvents}: TraceTimelineToolt
     timelineEvent => timelineEvent.id !== event.id
   );
   const displayYouAreHere = filteredTimelineEvents.length !== timelineEvents.length;
+  const hasTitle = filteredTimelineEvents.length > 1 || displayYouAreHere;
   return (
     <UnstyledUnorderedList>
       {displayYouAreHere && <YouAreHereItem>{t('You are here')}</YouAreHereItem>}
-      <EventItemsWrapper>
-        {(filteredTimelineEvents.length > 1 || displayYouAreHere) && (
-          <EventItemsTitle>{t('Around the same time')}</EventItemsTitle>
-        )}
+      <EventItemsWrapper hasTitle={hasTitle}>
+        {hasTitle && <EventItemsTitle>{t('Around the same time')}</EventItemsTitle>}
         {filteredTimelineEvents.slice(0, 3).map(timelineEvent => {
           const project = projects.find(p => p.slug === timelineEvent.project);
           return (
@@ -115,10 +114,10 @@ const UnstyledUnorderedList = styled('div')`
   width: 220px;
 `;
 
-const EventItemsWrapper = styled('div')`
+const EventItemsWrapper = styled('div')<{hasTitle: boolean}>`
   display: flex;
   flex-direction: column;
-  padding: ${space(1)} ${space(0.5)} ${space(0.5)} ${space(0.5)};
+  padding: ${p => space(p.hasTitle ? 1 : 0.5)} ${space(0.5)} ${space(0.5)} ${space(0.5)};
 `;
 
 const EventItemsTitle = styled('div')`