feat(related_issues): Include link to trace used for relating issues (#69804)

It adds the following link for trace-connected errors in Related Issues.
This helps a lot with trusting the data.
<img width="520" alt="image"
src="https://github.com/getsentry/sentry/assets/44410/b513207b-d467-4048-bb08-c7b1b1136889">

[The trace
view](https://sentry.sentry.io/performance/trace/a63db993be574bb5882182ecd7262223/)
we link to:

<img width="1137" alt="image"
src="https://github.com/getsentry/sentry/assets/44410/fc1cf479-1a4d-43a3-a8ad-435a407f395a">

static/app/views/issueDetails/groupRelatedIssues/index.spec.tsx

@@ -53,6 +53,10 @@ describe('Related Issues View', function () {
       {
         type: 'trace_connected',
         data: [group1, group2],
+        meta: {
+          event_id: 'abcd',
+          trace_id: '1234',
+        },
       },
     ],
   };
@@ -181,5 +185,10 @@ describe('Related Issues View', function () {
     expect(
       await screen.findByText('No same-root-cause related issues were found.')
     ).toBeInTheDocument();
+    const linkElement = screen.getByRole('link', {name: /this trace/i});
+    expect(linkElement).toHaveAttribute(
+      'href',
+      '/performance/trace/1234/?node=error-abcd'
+    );
   });
 });

static/app/views/issueDetails/groupRelatedIssues/index.tsx

@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 import Feature from 'sentry/components/acl/feature';
 import GroupList from 'sentry/components/issues/groupList';
 import * as Layout from 'sentry/components/layouts/thirds';
+import Link from 'sentry/components/links/link';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
@@ -23,6 +24,10 @@ type RelatedIssuesResponse = {
   data: [
     {
       data: number[];
+      meta: {
+        event_id: string;
+        trace_id: string;
+      };
       type: string;
     },
   ];
@@ -44,11 +49,18 @@ function GroupRelatedIssues({params}: Props) {
     staleTime: 0,
   });
 
+  let traceMeta = {
+    trace_id: '',
+    event_id: '',
+  };
   const {
     same_root_cause: sameRootCauseIssues = [],
     trace_connected: traceConnectedIssues = [],
   } = (relatedIssues?.data ?? []).reduce(
     (mapping, item) => {
+      if (item.type === 'trace_connected') {
+        traceMeta = {...item.meta};
+      }
       // If the group we're looking related issues for shows up in the table,
       // it will trigger a bug in getGroupReprocessingStatus because activites would be empty,
       // thus, we excude it from the list of related issues
@@ -100,9 +112,12 @@ function GroupRelatedIssues({params}: Props) {
                 {traceConnectedIssues.length > 0 ? (
                   <div>
                     <small>
-                      {t(
-                        'These are the issues belonging to the same trace (TODO: add link to trace).'
-                      )}
+                      {t('These are the issues belonging to ')}
+                      <Link
+                        to={`/performance/trace/${traceMeta.trace_id}/?node=error-${traceMeta.event_id}`}
+                      >
+                        {t('this trace')}
+                      </Link>
                     </small>
                     <GroupList
                       endpointPath={`/organizations/${orgSlug}/issues/`}