fix: Remove unnecessary onClick handler from ShortId component (#20713)

* fix(discover): Issue links in Discover table that should use react router links

* fix: Add stopPropagation to ShortId

* no more onClick for you mister

* stoppropagating clicks

src/sentry/static/sentry/app/components/eventOrGroupExtraDetails.jsx

@@ -57,6 +57,10 @@ class EventOrGroupExtraDetails extends React.Component {
             avatar={
               project && <ProjectBadge project={project} avatarSize={14} hideName />
             }
+            onClick={event => {
+              // prevent the clicks from propagating so that the short id can be selected
+              event.stopPropagation();
+            }}
           />
         )}
         <StyledTimes lastSeen={lastSeen} firstSeen={firstSeen} />

src/sentry/static/sentry/app/components/shortId.tsx

@@ -16,12 +16,6 @@ export default class ShortId extends React.Component<Props> {
     avatar: PropTypes.node,
   };
 
-  preventPropagation(e: React.MouseEvent) {
-    // this is a hack for the stream so the click handler doesn't
-    // affect this element
-    e.stopPropagation();
-  }
-
   render() {
     const {shortId, avatar} = this.props;
 
@@ -30,7 +24,7 @@ export default class ShortId extends React.Component<Props> {
     }
 
     return (
-      <StyledShortId onClick={this.preventPropagation} {...this.props}>
+      <StyledShortId {...this.props}>
         {avatar}
         <StyledAutoSelectText avatar={!!avatar}>{shortId}</StyledAutoSelectText>
       </StyledShortId>

src/sentry/static/sentry/app/utils/discover/fieldRenderers.tsx

@@ -187,7 +187,10 @@ const SPECIAL_FIELDS: SpecialFields = {
   'issue.id': {
     sortField: 'issue.id',
     renderFunc: (data, {organization}) => {
-      const target = `/organizations/${organization.slug}/issues/${data['issue.id']}/`;
+      const target = {
+        pathname: `/organizations/${organization.slug}/issues/${data['issue.id']}/`,
+      };
+
       return (
         <Container>
           <OverflowLink to={target} aria-label={data['issue.id']}>
@@ -210,7 +213,10 @@ const SPECIAL_FIELDS: SpecialFields = {
         );
       }
 
-      const target = `/organizations/${organization.slug}/issues/${issueID}/`;
+      const target = {
+        pathname: `/organizations/${organization.slug}/issues/${issueID}/`,
+      };
+
       return (
         <Container>
           <OverflowLink to={target} aria-label={issueID}>