feat(feedback): add release hover to tags (#90684)

closes #90631

<img width="792" alt="SCR-20250430-kirm"
src="https://github.com/user-attachments/assets/9da7ab9d-519a-4865-9000-85bf890b94f6"
/>


adds a release hovercard to the release tag, but clicking still links to
old release details (default behavior of the hovercard anywhere it
exists right now).

Author: michellewzhang

static/app/components/feedback/feedbackItem/feedbackItem.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import {Fragment, useEffect, useRef} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -27,7 +28,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 interface Props {
   eventData: Event | undefined;
   feedbackItem: FeedbackIssue;
-  tags: Record<string, string>;
+  tags: Record<string, string | ReactNode>;
 }
 
 export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {

static/app/components/feedback/feedbackItem/tagsSection.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import styled from '@emotion/styled';
 
 import Collapsible from 'sentry/components/collapsible';
@@ -9,7 +10,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
 interface Props {
-  tags: Record<string, string>;
+  tags: Record<string, string | ReactNode>;
 }
 
 export default function TagsSection({tags}: Props) {

static/app/components/feedback/hydrateFeedbackTags.tsx

@@ -1,18 +1,47 @@
+import type {ReactNode} from 'react';
+
+import Version from 'sentry/components/version';
 import type {Event} from 'sentry/types/event';
+import type {Organization} from 'sentry/types/organization';
+import {VersionContainer} from 'sentry/utils/discover/styles';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
+import {QuickContextHoverWrapper} from 'sentry/views/discover/table/quickContext/quickContextWrapper';
+import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
+
+const getReleaseTagValue = (release: string, organization: Organization) => {
+  return (
+    <VersionContainer>
+      <QuickContextHoverWrapper
+        dataRow={{release}}
+        contextType={ContextType.RELEASE}
+        organization={organization}
+      >
+        <Version version={release} truncate />
+      </QuickContextHoverWrapper>
+    </VersionContainer>
+  );
+};
 
 export default function hydrateFeedbackTags(
   eventData: Event | undefined,
-  issueData: FeedbackIssue | undefined
-): Record<string, string> {
+  issueData: FeedbackIssue | undefined,
+  organization: Organization
+): Record<string, string | ReactNode> {
   if (!eventData?.contexts) {
     return {};
   }
   const context = eventData.contexts;
   const eventTags = eventData.tags;
 
   const unorderedTags = {
-    ...eventTags.reduce((combined, tag) => ({...combined, [tag.key]: tag.value}), {}),
+    ...eventTags.reduce(
+      (combined, tag) => ({
+        ...combined,
+        [tag.key]:
+          tag.key === 'release' ? getReleaseTagValue(tag.value, organization) : tag.value,
+      }),
+      {}
+    ),
     ...(context.browser?.name ? {'browser.name': context.browser.name} : {}),
     ...(context.browser?.version ? {'browser.version': context.browser.version} : {}),
     ...(context.device?.brand ? {'device.brand': context.device?.brand} : {}),
@@ -38,7 +67,7 @@ export default function hydrateFeedbackTags(
   };
 
   // Sort the tags by key
-  const tags: Record<string, string> = Object.keys(unorderedTags)
+  const tags: Record<string, string | ReactNode> = Object.keys(unorderedTags)
     .sort()
     .reduce((acc, key) => {
       // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message

static/app/components/feedback/useFetchFeedbackData.tsx

@@ -33,8 +33,8 @@ export default function useFetchFeedbackData({feedbackId}: Props) {
   );
 
   const tags = useMemo(
-    () => hydrateFeedbackTags(eventData, issueData),
-    [eventData, issueData]
+    () => hydrateFeedbackTags(eventData, issueData, organization),
+    [eventData, issueData, organization]
   );
 
   const {markAsRead} = useMutateFeedback({