Browse Source

feat(feedback): Make the url on the Feedback Details page be clickable (#71795)

**Before:**

![before](https://github.com/getsentry/sentry/assets/187460/76cf46e9-30a5-488a-a522-4f8934eececb)

**After:**

![after](https://github.com/getsentry/sentry/assets/187460/da527150-bb98-40d6-8802-0de7df70cfc7)


Fixes https://github.com/getsentry/sentry/issues/71664
Ryan Albrecht 9 months ago
parent
commit
12c3c95641
1 changed files with 27 additions and 4 deletions
  1. 27 4
      static/app/components/feedback/feedbackItem/feedbackItem.tsx

+ 27 - 4
static/app/components/feedback/feedbackItem/feedbackItem.tsx

@@ -1,6 +1,7 @@
 import {Fragment, useEffect, useRef} from 'react';
 import styled from '@emotion/styled';
 
+import {openNavigateToExternalLinkModal} from 'sentry/actionCreators/modal';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import CrashReportSection from 'sentry/components/feedback/feedbackItem/crashReportSection';
 import FeedbackActivitySection from 'sentry/components/feedback/feedbackItem/feedbackActivitySection';
@@ -9,9 +10,9 @@ import Section 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 ExternalLink from 'sentry/components/links/externalLink';
 import PanelItem from 'sentry/components/panels/panelItem';
 import QuestionTooltip from 'sentry/components/questionTooltip';
-import TextCopyInput from 'sentry/components/textCopyInput';
 import {IconChat, IconFire, IconLink, IconTag} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -50,9 +51,24 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
 
         {!crashReportId || (crashReportId && url) ? (
           <Section icon={<IconLink size="xs" />} title={t('URL')}>
-            <TextCopyInput size="sm">
-              {eventData?.tags ? (url ? url.value : t('URL not found')) : ''}
-            </TextCopyInput>
+            <UrlWrapper>
+              {eventData?.tags ? (
+                url ? (
+                  <ExternalLink
+                    onClick={e => {
+                      e.preventDefault();
+                      openNavigateToExternalLinkModal({linkText: url.value});
+                    }}
+                  >
+                    {url.value}
+                  </ExternalLink>
+                ) : (
+                  t('URL not found')
+                )
+              ) : (
+                ''
+              )}
+            </UrlWrapper>
           </Section>
         ) : null}
 
@@ -108,3 +124,10 @@ const OverflowPanelItem = styled(PanelItem)`
   gap: ${space(2)};
   padding: ${space(2)} ${space(2)} 0 ${space(2)};
 `;
+
+const UrlWrapper = styled('div')`
+  border-radius: ${p => p.theme.borderRadius};
+  border: 1px solid ${p => p.theme.border};
+  padding: ${space(0.75)} ${space(1.5)};
+  line-height: 1.3em;
+`;