feat(feedback): Split feedback tags into tags+context with collapsable sections (#93397)

**1. Overall changes**
I moved around the "Seen By" stuff to save a little vertical space; it
used to be directly below the message, now it's in the header
All Sections are collapseable now, saved into local storage

<img width="892" alt="SCR-20250611-ozjr"
src="https://github.com/user-attachments/assets/340bd0c5-a55c-4483-886b-fa3dd36b6f51"
/>

**2. Tags & Context changes**
I split up Tags & Context, and re-used the components from Issue
Details. There's no way to split up Custom tags, but everything will be
shown.
Fixes REPLAY-67
<img width="875" alt="SCR-20250611-ozqr"
src="https://github.com/user-attachments/assets/e41ed5ad-e445-44dc-9aa2-7a00ad6ce429"
/>

Author: ryan953

static/app/components/events/eventTags/eventTagsTreeRow.tsx

@@ -161,24 +161,22 @@ function EventTagsTreeRowDropdown({
     project,
   });
   const isIssueDetailsRoute = location.pathname.includes(`issues/${event.groupID}/`);
+  const isFeedback = Boolean(event.contexts.feedback);
 
   const items: MenuItemProps[] = [
-    ...(isIssueDetailsRoute
-      ? [
-          {
-            key: 'tag-details',
-            label: t('Tag breakdown'),
-            to: {
-              pathname: `/organizations/${organization.slug}/issues/${event.groupID}/${TabPaths[Tab.DISTRIBUTIONS]}${encodeURIComponent(originalTag.key)}/`,
-              query: location.query,
-            },
-          },
-        ]
-      : []),
+    {
+      key: 'tag-details',
+      label: t('Tag breakdown'),
+      hidden: !isIssueDetailsRoute,
+      to: {
+        pathname: `/organizations/${organization.slug}/issues/${event.groupID}/${TabPaths[Tab.DISTRIBUTIONS]}${encodeURIComponent(originalTag.key)}/`,
+        query: location.query,
+      },
+    },
     {
       key: 'view-events',
       label: t('View other events with this tag value'),
-      hidden: !event.groupID,
+      hidden: !event.groupID || isFeedback,
       to: {
         pathname: `/organizations/${organization.slug}/issues/${event.groupID}/events/`,
         query,
@@ -187,17 +185,25 @@ function EventTagsTreeRowDropdown({
     {
       key: 'view-issues',
       label: t('Search issues with this tag value'),
+      hidden: isFeedback,
       to: {
         pathname: `/organizations/${organization.slug}/issues/`,
         query,
       },
     },
-  ];
-
-  if (hasExploreEnabled) {
-    items.push({
+    {
+      key: 'view-feedback',
+      label: t('Search feedbacks with this tag value'),
+      hidden: !isFeedback,
+      to: {
+        pathname: `/organizations/${organization.slug}/feedback/`,
+        query,
+      },
+    },
+    {
       key: 'view-traces',
       label: t('Find more samples with this value'),
+      hidden: !hasExploreEnabled || isFeedback,
       to: getSearchInExploreTarget(
         organization,
         location,
@@ -215,10 +221,7 @@ function EventTagsTreeRowDropdown({
           'drawer'
         );
       },
-    });
-  }
-
-  items.push(
+    },
     {
       key: 'copy-value',
       label: t('Copy tag value to clipboard'),
@@ -227,7 +230,7 @@ function EventTagsTreeRowDropdown({
     {
       key: 'add-to-highlights',
       label: t('Add to event highlights'),
-      hidden: hideAddHighlightsOption || !isProjectAdmin,
+      hidden: hideAddHighlightsOption || !isProjectAdmin || isFeedback,
       onAction: () => {
         saveTag({
           highlightTags: [...(project?.highlightTags ?? []), originalTag.key],
@@ -284,8 +287,8 @@ function EventTagsTreeRowDropdown({
       onAction: () => {
         openNavigateToExternalLinkModal({linkText: content.value});
       },
-    }
-  );
+    },
+  ];
 
   return (
     <TreeValueDropdown

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

@@ -1,19 +1,21 @@
-import type {ReactNode} from 'react';
 import {Fragment, useEffect, useRef} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {openNavigateToExternalLinkModal} from 'sentry/actionCreators/modal';
 import AnalyticsArea from 'sentry/components/analyticsArea';
 import ErrorBoundary from 'sentry/components/errorBoundary';
+import {getOrderedContextItems} from 'sentry/components/events/contexts';
+import ContextCard from 'sentry/components/events/contexts/contextCard';
+import EventTagsTree from 'sentry/components/events/eventTags/eventTagsTree';
 import CrashReportSection from 'sentry/components/feedback/feedbackItem/crashReportSection';
 import FeedbackActivitySection from 'sentry/components/feedback/feedbackItem/feedbackActivitySection';
 import FeedbackItemHeader from 'sentry/components/feedback/feedbackItem/feedbackItemHeader';
-import Section from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
+import FeedbackItemSection from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
 import FeedbackReplay from 'sentry/components/feedback/feedbackItem/feedbackReplay';
 import MessageSection from 'sentry/components/feedback/feedbackItem/messageSection';
-import TagsSection from 'sentry/components/feedback/feedbackItem/tagsSection';
 import TraceDataSection from 'sentry/components/feedback/feedbackItem/traceDataSection';
+import {KeyValueData} from 'sentry/components/keyValueData';
 import PanelItem from 'sentry/components/panels/panelItem';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import TextCopyInput from 'sentry/components/textCopyInput';
@@ -22,16 +24,16 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
+import type {Project} from 'sentry/types/project';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
 import useOrganization from 'sentry/utils/useOrganization';
 
 interface Props {
   eventData: Event | undefined;
   feedbackItem: FeedbackIssue;
-  tags: Record<string, string | ReactNode>;
 }
 
-export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
+export default function FeedbackItem({feedbackItem, eventData}: Props) {
   const organization = useOrganization();
   const url =
     eventData?.contexts?.feedback?.url ??
@@ -59,12 +61,17 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
       <AnalyticsArea name="details">
         <FeedbackItemHeader eventData={eventData} feedbackItem={feedbackItem} />
         <OverflowPanelItem ref={overflowRef}>
-          <Section>
+          <FeedbackItemSection sectionKey="message">
             <MessageSection eventData={eventData} feedbackItem={feedbackItem} />
-          </Section>
+          </FeedbackItemSection>
 
           {!crashReportId || (crashReportId && url) ? (
-            <Section icon={<IconLink size="xs" />} title={t('URL')}>
+            <FeedbackItemSection
+              collapsible
+              icon={<IconLink size="xs" />}
+              sectionKey="url"
+              title={t('URL')}
+            >
               <TextCopyInput
                 style={urlIsLink ? {color: theme.blue400} : undefined}
                 onClick={
@@ -78,19 +85,24 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
               >
                 {displayUrl}
               </TextCopyInput>
-            </Section>
+            </FeedbackItemSection>
           ) : null}
 
           {crashReportId && feedbackItem.project ? (
-            <Section icon={<IconFire size="xs" />} title={t('Linked Error')}>
+            <FeedbackItemSection
+              collapsible
+              icon={<IconFire size="xs" />}
+              sectionKey="crash-report"
+              title={t('Linked Error')}
+            >
               <ErrorBoundary mini>
                 <CrashReportSection
                   organization={organization}
                   crashReportId={crashReportId}
                   projectSlug={feedbackItem.project.slug}
                 />
               </ErrorBoundary>
-            </Section>
+            </FeedbackItemSection>
           ) : null}
 
           <FeedbackReplay
@@ -105,13 +117,41 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
             </ErrorBoundary>
           ) : null}
 
-          <Section icon={<IconTag size="xs" />} title={t('Tags')}>
-            <TagsSection tags={tags} />
-          </Section>
+          {eventData && feedbackItem.project ? (
+            <FeedbackItemSection
+              collapsible
+              icon={<IconTag size="xs" />}
+              sectionKey="tags"
+              title={t('Tags')}
+            >
+              <EventTagsTree
+                event={eventData}
+                projectSlug={feedbackItem.project.slug}
+                tags={eventData.tags}
+              />
+            </FeedbackItemSection>
+          ) : null}
+
+          {eventData ? (
+            <FeedbackItemSection
+              collapsible
+              icon={<IconTag size="xs" />}
+              sectionKey="context"
+              title={t('Context')}
+            >
+              <FeedbackItemContexts
+                feedbackItem={feedbackItem}
+                eventData={eventData}
+                project={feedbackItem.project}
+              />
+            </FeedbackItemSection>
+          ) : null}
 
           {feedbackItem.project ? (
-            <Section
+            <FeedbackItemSection
+              collapsible
               icon={<IconChat size="xs" />}
+              sectionKey="activity"
               title={
                 <Fragment>
                   {t('Internal Activity')}
@@ -125,14 +165,48 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
               }
             >
               <FeedbackActivitySection feedbackItem={feedbackItem as unknown as Group} />
-            </Section>
+            </FeedbackItemSection>
           ) : null}
         </OverflowPanelItem>
       </AnalyticsArea>
     </Fragment>
   );
 }
 
+function FeedbackItemContexts({
+  eventData,
+  feedbackItem,
+  project,
+}: {
+  eventData: Event;
+  feedbackItem: FeedbackIssue;
+  project: undefined | Project;
+}) {
+  const cards = getOrderedContextItems(eventData).map(
+    ({alias, type, value: contextValue}) => (
+      <ContextCard
+        key={alias}
+        type={type}
+        alias={alias}
+        value={contextValue}
+        event={eventData}
+        group={feedbackItem as unknown as Group}
+        project={project}
+      />
+    )
+  );
+
+  if (!cards.length) {
+    return null;
+  }
+
+  return (
+    <ErrorBoundary mini message={t('There was a problem loading event context.')}>
+      <KeyValueData.Container>{cards}</KeyValueData.Container>
+    </ErrorBoundary>
+  );
+}
+
 // 0 padding-bottom because <ActivitySection> has space(2) built-in.
 const OverflowPanelItem = styled(PanelItem)`
   overflow: auto;

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

@@ -5,7 +5,9 @@ import {Flex} from 'sentry/components/core/layout';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackActions from 'sentry/components/feedback/feedbackItem/feedbackActions';
 import FeedbackShortId from 'sentry/components/feedback/feedbackItem/feedbackShortId';
+import FeedbackViewers from 'sentry/components/feedback/feedbackItem/feedbackViewers';
 import {StreamlinedExternalIssueList} from 'sentry/components/group/externalIssuesList/streamlinedExternalIssueList';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
@@ -46,12 +48,20 @@ export default function FeedbackItemHeader({eventData, feedbackItem}: Props) {
 
       {eventData && feedbackItem.project ? (
         <ErrorBoundary mini>
-          <Flex wrap="wrap" justify="flex-start" align="center" gap={space(1)}>
+          <Flex wrap="wrap" justify="space-between" align="center" gap={space(1)}>
             <StreamlinedExternalIssueList
               group={feedbackItem as unknown as Group}
               project={feedbackItem.project}
               event={eventData}
             />
+            {feedbackItem.seenBy.length ? (
+              <Flex justify="flex-end">
+                <Flex gap={space(1)} align="center">
+                  <SeenBy>{t('Seen by')}</SeenBy>
+                  <FeedbackViewers feedbackItem={feedbackItem} />
+                </Flex>
+              </Flex>
+            ) : null}
           </Flex>
         </ErrorBoundary>
       ) : null}
@@ -66,3 +76,8 @@ const VerticalSpacing = styled('div')`
   padding: ${space(1)} ${space(2)};
   border-bottom: 1px solid ${p => p.theme.innerBorder};
 `;
+
+const SeenBy = styled('span')`
+  color: ${p => p.theme.subText};
+  font-size: ${p => p.theme.fontSizeRelativeSmall};
+`;

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

@@ -16,7 +16,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 export default function FeedbackItemLoader() {
   const organization = useOrganization();
   const feedbackId = useCurrentFeedbackId();
-  const {issueResult, issueData, tags, eventData} = useFetchFeedbackData({feedbackId});
+  const {issueResult, issueData, eventData} = useFetchFeedbackData({feedbackId});
 
   const projectSlug = useCurrentFeedbackProject();
   useSentryAppComponentsData({projectId: projectSlug});
@@ -50,7 +50,7 @@ export default function FeedbackItemLoader() {
         <FeedbackErrorDetails error={t('Unable to load feedback')} />
       )}
     >
-      <FeedbackItem eventData={eventData} feedbackItem={issueData} tags={tags} />
+      <FeedbackItem eventData={eventData} feedbackItem={issueData} />
     </ErrorBoundary>
   ) : (
     <FeedbackEmptyDetails />