chore(issue-details): Route feedback to our team (#75492)

Routes the feedback on some recent issue team changes to us with tags.

static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx

@@ -20,7 +20,6 @@ import {
   BREADCRUMB_SORT_LOCALSTORAGE_KEY,
   BreadcrumbSort,
 } from 'sentry/components/events/interfaces/breadcrumbs';
-import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
 import useDrawer from 'sentry/components/globalDrawer';
 import {
   IconClock,
@@ -35,6 +34,7 @@ import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection';
@@ -52,6 +52,7 @@ export default function BreadcrumbsDataSection({
   project,
 }: BreadcrumbsDataSectionProps) {
   const viewAllButtonRef = useRef<HTMLButtonElement>(null);
+  const openForm = useFeedbackForm();
   const {closeDrawer, isDrawerOpen, openDrawer} = useDrawer();
   const organization = useOrganization();
   const [timeDisplay, setTimeDisplay] = useLocalStorageState<BreadcrumbTimeDisplay>(
@@ -121,7 +122,24 @@ export default function BreadcrumbsDataSection({
 
   const actions = (
     <ButtonBar gap={1}>
-      <BreadcrumbsFeedback />
+      {openForm && (
+        <Button
+          aria-label={t('Give Feedback')}
+          icon={<IconMegaphone />}
+          size={'xs'}
+          onClick={() =>
+            openForm({
+              messagePlaceholder: t('How can we make breadcrumbs more useful to you?'),
+              tags: {
+                ['feedback.source']: 'issue_details_breadcrumbs',
+                ['feedback.owner']: 'issues',
+              },
+            })
+          }
+        >
+          {t('Give Feedback')}
+        </Button>
+      )}
       <Button
         aria-label={t('Open Breadcrumb Search')}
         icon={<IconSearch size="xs" />}
@@ -192,29 +210,6 @@ export default function BreadcrumbsDataSection({
   );
 }
 
-function BreadcrumbsFeedback() {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const feedback = useFeedbackWidget({
-    buttonRef,
-    messagePlaceholder: t('How can we make breadcrumbs more useful to you?'),
-  });
-
-  if (!feedback) {
-    return null;
-  }
-
-  return (
-    <Button
-      ref={buttonRef}
-      aria-label={t('Give Feedback')}
-      icon={<IconMegaphone />}
-      size={'xs'}
-    >
-      {t('Give Feedback')}
-    </Button>
-  );
-}
-
 const ViewAllContainer = styled('div')`
   position: relative;
   display: grid;

static/app/components/events/highlights/highlightsDataSection.tsx

@@ -22,7 +22,6 @@ import {
   getHighlightTagData,
   HIGHLIGHT_DOCS_LINK,
 } from 'sentry/components/events/highlights/util';
-import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {IconEdit, IconMegaphone} from 'sentry/icons';
@@ -33,6 +32,7 @@ import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import theme from 'sentry/utils/theme';
 import {useDetailedProject} from 'sentry/utils/useDetailedProject';
+import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {FoldSectionKey} from 'sentry/views/issueDetails/streamline/foldSection';
@@ -217,37 +217,13 @@ function HighlightsData({
   );
 }
 
-function HighlightsFeedback() {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const feedback = useFeedbackWidget({
-    buttonRef,
-    messagePlaceholder: t(
-      'How can we make tags, context or highlights more useful to you?'
-    ),
-  });
-
-  if (!feedback) {
-    return null;
-  }
-
-  return (
-    <Button
-      ref={buttonRef}
-      aria-label={t('Give Feedback')}
-      icon={<IconMegaphone />}
-      size={'xs'}
-    >
-      {t('Feedback')}
-    </Button>
-  );
-}
-
 export default function HighlightsDataSection({
   viewAllRef,
   event,
   project,
 }: HighlightsDataSectionProps) {
   const organization = useOrganization();
+  const openForm = useFeedbackForm();
 
   const viewAllButton = viewAllRef ? (
     <Button
@@ -277,7 +253,26 @@ export default function HighlightsDataSection({
       actions={
         <ErrorBoundary mini>
           <ButtonBar gap={1}>
-            <HighlightsFeedback />
+            {openForm && (
+              <Button
+                aria-label={t('Give Feedback')}
+                icon={<IconMegaphone />}
+                size={'xs'}
+                onClick={() =>
+                  openForm({
+                    messagePlaceholder: t(
+                      'How can we make tags, context or highlights more useful to you?'
+                    ),
+                    tags: {
+                      ['feedback.source']: 'issue_details_highlights',
+                      ['feedback.owner']: 'issues',
+                    },
+                  })
+                }
+              >
+                {t('Feedback')}
+              </Button>
+            )}
             {viewAllButton}
             <EditHighlightsButton project={project} event={event} />
           </ButtonBar>

static/app/components/searchQueryBuilder/tokens/combobox.tsx

@@ -321,8 +321,9 @@ function FeedbackFooter() {
           openForm({
             messagePlaceholder: t('How can we make search better for you?'),
             tags: {
-              feedback_source: 'search_query_builder',
               search_source: searchSource,
+              ['feedback.source']: 'search_query_builder',
+              ['feedback.owner']: 'issues',
             },
           })
         }