ref(feedback): add classification: spam tag if spam feedback (#78958)

for spam feedbacks (those automatically marked as spam), show this
classification tag at the top of feedback details:

<img width="330" alt="SCR-20241010-ksxm"
src="https://github.com/user-attachments/assets/edf973a9-c0a4-4b34-8f4f-04adc4509698">
<img width="741" alt="SCR-20241010-ksvj"
src="https://github.com/user-attachments/assets/ae295d53-11d7-4ebb-a661-5426a1d391a3">


links to
https://docs.sentry.io/product/user-feedback/#spam-detection-for-user-feedback


closes #70830

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

@@ -2,13 +2,16 @@ import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {useRole} from 'sentry/components/acl/useRole';
+import Tag from 'sentry/components/badge/tag';
 import {Flex} from 'sentry/components/container/flex';
 import FeedbackItemUsername from 'sentry/components/feedback/feedbackItem/feedbackItemUsername';
 import FeedbackTimestampsTooltip from 'sentry/components/feedback/feedbackItem/feedbackTimestampsTooltip';
 import FeedbackViewers from 'sentry/components/feedback/feedbackItem/feedbackViewers';
 import {ScreenshotSection} from 'sentry/components/feedback/feedbackItem/screenshotSection';
+import ExternalLink from 'sentry/components/links/externalLink';
 import TimeSince from 'sentry/components/timeSince';
-import {t} from 'sentry/locale';
+import {Tooltip} from 'sentry/components/tooltip';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
@@ -23,20 +26,41 @@ export default function MessageSection({eventData, feedbackItem}: Props) {
   const organization = useOrganization();
   const {hasRole} = useRole({role: 'attachmentsRole'});
   const project = feedbackItem.project;
+  const isSpam = eventData?.occurrence?.evidenceData.isSpam;
+
   return (
     <Fragment>
       <Flex wrap="wrap" flex="1 1 auto" gap={space(1)} justify="space-between">
         <FeedbackItemUsername feedbackIssue={feedbackItem} />
-
-        <StyledTimeSince
-          date={feedbackItem.firstSeen}
-          tooltipProps={{
-            title: eventData ? (
-              <FeedbackTimestampsTooltip feedbackItem={feedbackItem} />
-            ) : undefined,
-            overlayStyle: {maxWidth: 300},
-          }}
-        />
+        <Flex gap={space(1)}>
+          {isSpam ? (
+            <Tag key="spam" type="error">
+              <Tooltip
+                isHoverable
+                position="left"
+                title={tct(
+                  'This feedback was automatically marked as spam. Learn more by [link:reading our docs.]',
+                  {
+                    link: (
+                      <ExternalLink href="https://docs.sentry.io/product/user-feedback/#spam-detection-for-user-feedback" />
+                    ),
+                  }
+                )}
+              >
+                {t('spam')}
+              </Tooltip>
+            </Tag>
+          ) : null}
+          <StyledTimeSince
+            date={feedbackItem.firstSeen}
+            tooltipProps={{
+              title: eventData ? (
+                <FeedbackTimestampsTooltip feedbackItem={feedbackItem} />
+              ) : undefined,
+              overlayStyle: {maxWidth: 300},
+            }}
+          />
+        </Flex>
       </Flex>
       <Blockquote>
         <pre>{feedbackItem.metadata.message}</pre>