style(feedback): allow url to scroll rather than wrap (#72985)

same logic, just using the `TextCopyInput` component now, which allows
us to scroll, copy, & still click and go to an external link.



before:


https://github.com/getsentry/sentry/assets/56095982/f79de679-0c14-4aa3-9df0-cb8464107cab


![SCR-20240618-ogpc](https://github.com/getsentry/sentry/assets/56095982/bb51ed65-468b-47a1-acea-bf07b046b59d)

after: 


https://github.com/getsentry/sentry/assets/56095982/24abf4f4-3b09-49bc-948d-790d68f18113

url not found - no modal:


https://github.com/getsentry/sentry/assets/56095982/4457b1d5-73fa-48b8-ad13-9e92c987a05a

no url - no modal:


https://github.com/getsentry/sentry/assets/56095982/2bf2d20c-fe20-439f-b5ce-e54b778fb89d

---------

Co-authored-by: Ryan Albrecht <[email protected]>

Author: michellewzhang

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

@@ -1,4 +1,5 @@
 import {Fragment, useEffect, useRef} from 'react';
+import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {openNavigateToExternalLinkModal} from 'sentry/actionCreators/modal';
@@ -10,9 +11,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';
@@ -32,6 +33,7 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
     eventData?.contexts.feedback?.url ??
     eventData?.tags.find(tag => tag.key === 'url')?.value;
   const crashReportId = eventData?.contexts?.feedback?.associated_event_id;
+  const theme = useTheme();
 
   const overflowRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -43,6 +45,11 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
     }, 100);
   }, [feedbackItem.id, overflowRef]);
 
+  const URL_NOT_FOUND = t('URL not found');
+  const displayUrl =
+    eventData?.contexts.feedback || eventData?.tags ? url ?? URL_NOT_FOUND : '';
+  const urlIsLink = displayUrl.length && displayUrl !== URL_NOT_FOUND;
+
   return (
     <Fragment>
       <FeedbackItemHeader eventData={eventData} feedbackItem={feedbackItem} />
@@ -53,24 +60,19 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
 
         {!crashReportId || (crashReportId && url) ? (
           <Section icon={<IconLink size="xs" />} title={t('URL')}>
-            <UrlWrapper>
-              {eventData?.contexts.feedback || eventData?.tags ? (
-                url ? (
-                  <ExternalLink
-                    onClick={e => {
+            <TextCopyInput
+              style={urlIsLink ? {color: theme.blue400} : undefined}
+              onClick={
+                urlIsLink
+                  ? e => {
                       e.preventDefault();
-                      openNavigateToExternalLinkModal({linkText: url});
-                    }}
-                  >
-                    {url}
-                  </ExternalLink>
-                ) : (
-                  t('URL not found')
-                )
-              ) : (
-                ''
-              )}
-            </UrlWrapper>
+                      openNavigateToExternalLinkModal({linkText: displayUrl});
+                    }
+                  : () => {}
+              }
+            >
+              {displayUrl}
+            </TextCopyInput>
           </Section>
         ) : null}
 
@@ -126,10 +128,3 @@ 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;
-`;