add copy as markdown to user feedback

Author: mtopo27

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

@@ -1,5 +1,5 @@
 import type {CSSProperties} from 'react';
-import {Fragment} from 'react';
+import {Fragment, useCallback} from 'react';
 
 import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
@@ -8,11 +8,14 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackAssignedTo from 'sentry/components/feedback/feedbackItem/feedbackAssignedTo';
 import useFeedbackActions from 'sentry/components/feedback/feedbackItem/useFeedbackActions';
-import {IconEllipsis} from 'sentry/icons';
+import {IconCopy, IconEllipsis} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
+import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
+import useOrganization from 'sentry/utils/useOrganization';
 
 interface Props {
   eventData: Event | undefined;
@@ -29,6 +32,53 @@ export default function FeedbackActions({
   size,
   style,
 }: Props) {
+  const organization = useOrganization();
+  const {copy} = useCopyToClipboard();
+  const handleCopyToClipboard = useCallback(() => {
+    const summary =
+      feedbackItem.metadata.summary ??
+      feedbackItem.metadata.title ??
+      t('No summary provided');
+    const message =
+      feedbackItem.metadata.message ?? feedbackItem.metadata.value ?? t('No message');
+    const culprit = eventData?.culprit?.trim();
+    const viewNames = eventData?.contexts?.app?.view_names?.filter(Boolean);
+
+    const sourceLines = [];
+    if (culprit) {
+      sourceLines.push(`- ${culprit}`);
+    }
+    if (viewNames?.length) {
+      sourceLines.push(t('- View names: %s', viewNames.join(', ')));
+    }
+
+    const markdown = [
+      '# User Feedback',
+      '',
+      `**Summary:** ${summary}`,
+      '',
+      '## Feedback Message',
+      message,
+      ...(sourceLines.length
+        ? [
+            '',
+            '## Source (_where user was when feedback was sent_)',
+            sourceLines.join('\n'),
+          ]
+        : []),
+    ].join('\n');
+
+    trackAnalytics('feedback.copy-feedback-as-markdown', {
+      organization,
+      feedback_id: feedbackItem.id,
+      project_slug: feedbackItem.project?.slug,
+    });
+
+    copy(markdown, {
+      successMessage: t('Copied feedback summary'),
+      errorMessage: t('Failed to copy feedback'),
+    });
+  }, [copy, eventData, feedbackItem, organization]);
   if (!eventData) {
     return null;
   }
@@ -42,14 +92,35 @@ export default function FeedbackActions({
         />
       </ErrorBoundary>
 
-      {size === 'large' ? <LargeWidth feedbackItem={feedbackItem} /> : null}
-      {size === 'medium' ? <MediumWidth feedbackItem={feedbackItem} /> : null}
-      {size === 'small' ? <SmallWidth feedbackItem={feedbackItem} /> : null}
+      {size === 'large' ? (
+        <LargeWidth
+          feedbackItem={feedbackItem}
+          onCopyToClipboard={handleCopyToClipboard}
+        />
+      ) : null}
+      {size === 'medium' ? (
+        <MediumWidth
+          feedbackItem={feedbackItem}
+          onCopyToClipboard={handleCopyToClipboard}
+        />
+      ) : null}
+      {size === 'small' ? (
+        <SmallWidth
+          feedbackItem={feedbackItem}
+          onCopyToClipboard={handleCopyToClipboard}
+        />
+      ) : null}
     </Flex>
   );
 }
 
-function LargeWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
+function LargeWidth({
+  feedbackItem,
+  onCopyToClipboard,
+}: {
+  feedbackItem: FeedbackIssue;
+  onCopyToClipboard: () => void;
+}) {
   const {
     enableDelete,
     onDelete,
@@ -82,6 +153,15 @@ function LargeWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
           {hasSeen ? t('Mark Unread') : t('Mark Read')}
         </Button>
       </Tooltip>
+      <Tooltip title={t('Copy feedback summary as markdown')}>
+        <Button
+          size="xs"
+          priority="default"
+          icon={<IconCopy />}
+          onClick={onCopyToClipboard}
+          aria-label={t('Copy feedback summary as markdown')}
+        />
+      </Tooltip>
       <Tooltip
         disabled={enableDelete}
         title={t('You must be an admin to delete feedback')}
@@ -94,7 +174,13 @@ function LargeWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
   );
 }
 
-function MediumWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
+function MediumWidth({
+  feedbackItem,
+  onCopyToClipboard,
+}: {
+  feedbackItem: FeedbackIssue;
+  onCopyToClipboard: () => void;
+}) {
   const {
     enableDelete,
     onDelete,
@@ -140,6 +226,12 @@ function MediumWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
               ? undefined
               : t('You must be a member of the project'),
           },
+          {
+            key: 'copy',
+            label: t('Copy as markdown'),
+            onAction: onCopyToClipboard,
+            tooltip: t('Copy feedback summary as markdown'),
+          },
           {
             key: 'delete',
             priority: 'danger' as const,
@@ -156,7 +248,13 @@ function MediumWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
   );
 }
 
-function SmallWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
+function SmallWidth({
+  feedbackItem,
+  onCopyToClipboard,
+}: {
+  feedbackItem: FeedbackIssue;
+  onCopyToClipboard: () => void;
+}) {
   const {
     enableDelete,
     onDelete,
@@ -189,6 +287,12 @@ function SmallWidth({feedbackItem}: {feedbackItem: FeedbackIssue}) {
           label: isSpam ? t('Move to Inbox') : t('Mark as Spam'),
           onAction: onSpamClick,
         },
+        {
+          key: 'copy',
+          label: t('Copy as markdown'),
+          onAction: onCopyToClipboard,
+          tooltip: t('Copy feedback summary as markdown'),
+        },
         {
           key: 'read',
           label: hasSeen ? t('Mark Unread') : t('Mark Read'),