fix(issues): allow rendering of annotations in both formats (#74645)

Author: oioki

static/app/components/eventOrGroupExtraDetails.tsx

@@ -7,6 +7,7 @@ import TimesTag from 'sentry/components/group/inboxBadges/timesTag';
 import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
 import IssueReplayCount from 'sentry/components/group/issueReplayCount';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
+import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import Placeholder from 'sentry/components/placeholder';
 import {IconChat} from 'sentry/icons';
@@ -94,14 +95,20 @@ function EventOrGroupExtraDetails({data, showAssignee, organization}: Props) {
           </GlobalSelectionLink>
         </LoggerAnnotation>
       )}
-      {annotations?.map((annotation, key) => (
-        <AnnotationNoMargin
-          dangerouslySetInnerHTML={{
-            __html: annotation,
-          }}
-          key={key}
-        />
-      ))}
+      {annotations?.map((annotation, key) =>
+        typeof annotation === 'string' ? (
+          <AnnotationNoMargin
+            dangerouslySetInnerHTML={{
+              __html: annotation,
+            }}
+            key={key}
+          />
+        ) : (
+          <AnnotationNoMargin key={key}>
+            <ExternalLink href={annotation.url}>{annotation.displayName}</ExternalLink>
+          </AnnotationNoMargin>
+        )
+      )}
 
       {showAssignee && assignedTo && (
         <div>{tct('Assigned to [name]', {name: assignedTo.name})}</div>

static/app/types/group.tsx

@@ -299,6 +299,11 @@ export type TagWithTopValues = {
 /**
  * Inbox, issue owners and Activity
  */
+export type Annotation = {
+  displayName: string;
+  url: string;
+};
+
 export type InboxReasonDetails = {
   count?: number | null;
   until?: string | null;
@@ -777,7 +782,7 @@ export const enum PriorityLevel {
 // TODO(ts): incomplete
 export interface BaseGroup {
   activity: GroupActivity[];
-  annotations: string[];
+  annotations: string[] | Annotation[];
   assignedTo: Actor | null;
   culprit: string;
   firstSeen: string;

static/app/utils/dashboards/issueFieldRenderers.spec.tsx

@@ -52,7 +52,7 @@ describe('getIssueFieldRenderer', function () {
       filteredEvents: 3000,
       events: 6000,
       period: '7d',
-      links: ['<a href="sentry.io">ANNO-123</a>'],
+      links: '<a href="sentry.io">ANNO-123</a>',
     };
 
     MockApiClient.addMockResponse({
@@ -152,10 +152,7 @@ describe('getIssueFieldRenderer', function () {
         {
           data,
           ...{
-            links: [
-              '<a href="sentry.io">ANNO-123</a>',
-              '<a href="sentry.io">ANNO-456</a>',
-            ],
+            links: '<a href="sentry.io">ANNO-123</a>, <a href="sentry.io">ANNO-456</a>',
           },
         },
         {

static/app/utils/dashboards/issueFieldRenderers.tsx

@@ -5,13 +5,15 @@ import type {Location} from 'history';
 
 import Count from 'sentry/components/count';
 import DeprecatedAssigneeSelector from 'sentry/components/deprecatedAssigneeSelector';
+import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import {getRelativeSummary} from 'sentry/components/timeRangeSelector/utils';
 import {Tooltip} from 'sentry/components/tooltip';
 import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import MemberListStore from 'sentry/stores/memberListStore';
 import {space} from 'sentry/styles/space';
+import type {Annotation} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
 import type {EventData} from 'sentry/utils/discover/eventView';
 import EventView from 'sentry/utils/discover/eventView';
@@ -141,7 +143,23 @@ const SPECIAL_FIELDS: SpecialFields = {
   },
   links: {
     sortField: null,
-    renderFunc: ({links}) => <LinksContainer dangerouslySetInnerHTML={{__html: links}} />,
+    renderFunc: ({links}) => {
+      if (typeof links === 'string') {
+        return <LinksContainer dangerouslySetInnerHTML={{__html: links}} />;
+      }
+      if (isLinkAnnotation(links)) {
+        return (
+          <LinksContainer>
+            {links.map((link, index) => (
+              <ExternalLink key={index} href={link.url}>
+                {link.displayName}
+              </ExternalLink>
+            ))}
+          </LinksContainer>
+        );
+      }
+      return <LinksContainer />;
+    },
   },
 };
 
@@ -241,6 +259,10 @@ export function getSortField(field: string): string | null {
   }
 }
 
+function isLinkAnnotation(value: unknown): value is Annotation[] {
+  return Array.isArray(value) && value.every(v => typeof v === 'object');
+}
+
 const contentStyle = css`
   width: 100%;
   justify-content: space-between;

static/app/views/dashboards/datasetConfig/issues.tsx

@@ -122,7 +122,9 @@ export function transformIssuesResponseToTable(
         issue: shortId,
         title,
         project: project.slug,
-        links: annotations?.join(', '),
+        links: annotations?.every(a => typeof a === 'string')
+          ? annotations.join(', ')
+          : ((annotations ?? []) as any),
       };
 
       // Get lifetime stats