Browse Source

feat(feedback): add copy link button to feedback details (#60693)

closes https://github.com/getsentry/sentry/issues/60690


https://github.com/getsentry/sentry/assets/56095982/3e9588c0-b2a1-4a7b-b568-f3956f79e021

---------

Co-authored-by: Ryan Albrecht <ryan.albrecht@sentry.io>
Michelle Zhang 1 year ago
parent
commit
dc512c8e67
1 changed files with 18 additions and 0 deletions
  1. 18 0
      static/app/components/feedback/feedbackItem/feedbackItem.tsx

+ 18 - 0
static/app/components/feedback/feedbackItem/feedbackItem.tsx

@@ -28,7 +28,9 @@ import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types';
 import {GroupStatus} from 'sentry/types';
 import type {FeedbackIssue} from 'sentry/utils/feedback/types';
+import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import useOrganization from 'sentry/utils/useOrganization';
+import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
 interface Props {
   eventData: Event | undefined;
@@ -58,6 +60,15 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
 
   const crashReportId = eventData?.contexts?.feedback?.associated_event_id;
 
+  const {onClick: copyLink} = useCopyToClipboard({
+    successMessage: t('Feedback URL copied to clipboard'),
+    text:
+      window.location.origin +
+      normalizeUrl(
+        `/organizations/${organization.slug}/feedback/?feedbackSlug=${feedbackItem.project.slug}:${feedbackItem.id}&project=${feedbackItem.project.id}`
+      ),
+  });
+
   return (
     <Fragment>
       <HeaderPanelItem>
@@ -76,6 +87,13 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
             </Flex>
           </Flex>
           <Flex gap={space(1)} align="center" wrap="wrap">
+            <Button
+              title={t('Copy link to this feedback')}
+              size="xs"
+              onClick={copyLink}
+              aria-label={t('Copy Link')}
+              icon={<IconLink />}
+            />
             <ErrorBoundary mini>
               <FeedbackAssignedTo
                 feedbackIssue={feedbackItem}