fix(issue-stream): Disable stack trace tooltip for performance issues [UP-146] (#38601)

Added a check for `issueCategory` before rendering `<StackTraceDetails
/>`

However, this introduced some styling issues that I had to resolve. The
stack trace applied `fontSizeLarge`, so skipping that component caused
performance issues to have a smaller title. I chose to move that font
size to the top-level div and override the font-size from any consumers
that need a different font-size. These were:

- `<IssueLink />` (used in the activity feed tooltips)
- `<EventDetailsContent />` (used in the discover event page header)
- `<GroupHeader />` (used in the issue details page)

static/app/components/eventOrGroupTitle.spec.jsx

@@ -1,6 +1,7 @@
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle';
+import {IssueCategory} from 'sentry/types';
 
 describe('EventOrGroupTitle', function () {
   const data = {
@@ -80,4 +81,18 @@ describe('EventOrGroupTitle', function () {
 
     expect(screen.getByText('metadata title')).toBeInTheDocument();
   });
+
+  it('does not render stack trace when issueCategory is performance', () => {
+    render(
+      <EventOrGroupTitle
+        data={{
+          ...data,
+          issueCategory: IssueCategory.PERFORMANCE,
+        }}
+        withStackTracePreview
+      />
+    );
+
+    expect(screen.queryByTestId('stacktrace-preview')).not.toBeInTheDocument();
+  });
 });

static/app/components/eventOrGroupTitle.tsx

@@ -3,7 +3,7 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
-import {BaseGroup, GroupTombstone, Organization} from 'sentry/types';
+import {BaseGroup, GroupTombstone, IssueCategory, Organization} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import {getTitle} from 'sentry/utils/events';
 import withOrganization from 'sentry/utils/withOrganization';
@@ -30,6 +30,7 @@ function EventOrGroupTitle({
 }: Props) {
   const event = data as Event;
   const groupingCurrentLevel = (data as BaseGroup).metadata?.current_level;
+  const groupingIssueCategory = (data as BaseGroup)?.issueCategory;
 
   const hasGroupingTreeUI = !!organization?.features.includes('grouping-tree-ui');
   const hasGroupingStacktraceUI = !!organization?.features.includes(
@@ -41,7 +42,7 @@ function EventOrGroupTitle({
 
   return (
     <Wrapper className={className} hasGroupingTreeUI={hasGroupingTreeUI}>
-      {withStackTracePreview ? (
+      {withStackTracePreview && groupingIssueCategory === IssueCategory.ERROR ? (
         <StyledStacktracePreview
           organization={organization}
           issueId={groupID ? groupID : id}
@@ -87,7 +88,6 @@ const Subtitle = styled('em')`
 const StyledStacktracePreview = styled(StackTracePreview)<{
   hasGroupingStacktraceUI: boolean;
 }>`
-  font-size: ${p => p.theme.fontSizeLarge};
   ${p =>
     p.hasGroupingStacktraceUI &&
     css`
@@ -101,6 +101,7 @@ const StyledStacktracePreview = styled(StackTracePreview)<{
 `;
 
 const Wrapper = styled('span')<{hasGroupingTreeUI: boolean}>`
+  font-size: ${p => p.theme.fontSizeLarge};
   ${p =>
     p.hasGroupingTreeUI &&
     css`

static/app/components/issueLink.tsx

@@ -41,7 +41,7 @@ const IssueLink = ({children, orgId, issue, to, card = true}: Props) => {
     <div className={className}>
       <Section>
         <Title>
-          <EventOrGroupTitle data={issue} />
+          <StyledEventOrGroupTitle data={issue} />
         </Title>
 
         <HovercardEventMessage
@@ -100,16 +100,19 @@ const IssueLink = ({children, orgId, issue, to, card = true}: Props) => {
 
 export default IssueLink;
 
-const Title = styled('h3')`
-  font-size: ${p => p.theme.fontSizeMedium};
-  margin: 0 0 ${space(0.5)};
+const Title = styled('div')`
   ${p => p.theme.overflowEllipsis};
+  margin: 0 0 ${space(0.5)};
+`;
+
+const StyledEventOrGroupTitle = styled(EventOrGroupTitle)`
+  font-weight: 600;
+  font-size: ${p => p.theme.fontSizeMedium};
 
   em {
     font-style: normal;
     font-weight: 400;
-    color: ${p => p.theme.gray300};
-    font-size: 90%;
+    font-size: ${p => p.theme.fontSizeSmall};
   }
 `;
 

static/app/components/stacktracePreview.tsx

@@ -192,6 +192,7 @@ function StackTracePreview(props: StackTracePreviewProps): React.ReactElement {
       className={props.className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      data-testid="stacktrace-preview"
     >
       <StacktraceHovercard
         body={

static/app/views/eventsV2/eventDetails/content.tsx

@@ -360,7 +360,7 @@ const EventHeader = ({event}: {event: Event}) => {
   return (
     <EventHeaderContainer data-test-id="event-header">
       <TitleWrapper>
-        <EventOrGroupTitle data={event} />
+        <StyledEventOrGroupTitle data={event} />
       </TitleWrapper>
       {message && (
         <MessageWrapper>
@@ -376,10 +376,13 @@ const EventHeaderContainer = styled('div')`
 `;
 
 const TitleWrapper = styled('div')`
-  font-size: ${p => p.theme.headerFontSize};
   margin-top: 20px;
 `;
 
+const StyledEventOrGroupTitle = styled(EventOrGroupTitle)`
+  font-size: ${p => p.theme.headerFontSize};
+`;
+
 const MessageWrapper = styled('div')`
   margin-top: ${space(1)};
 `;

static/app/views/organizationGroupDetails/header.tsx

@@ -355,7 +355,7 @@ class GroupHeader extends Component<Props, State> {
             <div className="col-sm-7">
               <TitleWrapper>
                 <h3>
-                  <EventOrGroupTitle hasGuideAnchor data={group} />
+                  <StyledEventOrGroupTitle hasGuideAnchor data={group} />
                 </h3>
                 {group.inbox && (
                   <InboxReasonWrapper>
@@ -453,6 +453,10 @@ const TitleWrapper = styled('div')`
   line-height: 24px;
 `;
 
+const StyledEventOrGroupTitle = styled(EventOrGroupTitle)`
+  font-size: inherit;
+`;
+
 const StyledBreadcrumbs = styled(Breadcrumbs)`
   margin-bottom: ${space(2)};
 `;