feat(query-builder): Add feedback button (#74116)

- Modifies `useFeedback` to accept `tags` so we can pass that info into
the form
- Adds a footer with a feedback button to the empty state key explorer

static/app/components/feedback/widget/useFeedback.tsx

@@ -8,12 +8,13 @@ import useAsyncSDKIntegrationStore from 'sentry/views/app/asyncSDKIntegrationPro
 
 export type FeedbackIntegration = NonNullable<ReturnType<typeof Sentry.getFeedback>>;
 
-export type UseFeedbackOptions = {
-  formTitle?: string;
-  messagePlaceholder?: string;
-};
+export type UseFeedbackOptions = Parameters<FeedbackIntegration['createForm']>[0];
 
-export function useFeedback({formTitle, messagePlaceholder}: UseFeedbackOptions) {
+export function useFeedback({
+  formTitle,
+  messagePlaceholder,
+  tags,
+}: NonNullable<UseFeedbackOptions>) {
   const config = useLegacyStore(ConfigStore);
   const {state} = useAsyncSDKIntegrationStore();
 
@@ -26,8 +27,9 @@ export function useFeedback({formTitle, messagePlaceholder}: UseFeedbackOptions)
       submitButtonLabel: t('Send Feedback'),
       messagePlaceholder: messagePlaceholder ?? t('What did you expect?'),
       formTitle: formTitle ?? t('Give Feedback'),
+      tags,
     };
-  }, [config.theme, formTitle, messagePlaceholder]);
+  }, [config.theme, formTitle, messagePlaceholder, tags]);
 
   return {feedback, options};
 }

static/app/components/searchQueryBuilder/combobox.tsx

@@ -34,11 +34,14 @@ import {
 import {GrowingInput} from 'sentry/components/growingInput';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Overlay} from 'sentry/components/overlay';
+import {useSearchQueryBuilder} from 'sentry/components/searchQueryBuilder/context';
 import type {Token, TokenResult} from 'sentry/components/searchSyntax/parser';
+import {IconMegaphone} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import mergeRefs from 'sentry/utils/mergeRefs';
+import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import useOverlay from 'sentry/utils/useOverlay';
 import usePrevious from 'sentry/utils/usePrevious';
 
@@ -273,6 +276,35 @@ function ListBoxSectionButton({
   );
 }
 
+function FeedbackFooter() {
+  const {searchSource} = useSearchQueryBuilder();
+  const openForm = useFeedbackForm();
+
+  if (!openForm) {
+    return null;
+  }
+
+  return (
+    <SectionedOverlayFooter>
+      <Button
+        size="xs"
+        icon={<IconMegaphone />}
+        onClick={() =>
+          openForm({
+            messagePlaceholder: t('How can we make search better for you?'),
+            tags: {
+              feedback_source: 'search_query_builder',
+              search_source: searchSource,
+            },
+          })
+        }
+      >
+        {t('Give Feedback')}
+      </Button>
+    </SectionedOverlayFooter>
+  );
+}
+
 function SectionedListBox<T extends SelectOptionOrSectionWithKey<string>>({
   popoverRef,
   listBoxRef,
@@ -344,6 +376,7 @@ function SectionedListBox<T extends SelectOptionOrSectionWithKey<string>>({
               size="sm"
             />
           </SectionedListBoxPane>
+          <FeedbackFooter />
         </Fragment>
       ) : null}
     </SectionedOverlay>
@@ -705,10 +738,23 @@ const SectionedOverlay = styled(Overlay)`
   overflow: hidden;
   display: grid;
   grid-template-columns: 120px 240px;
+  grid-template-rows: 1fr auto;
+  grid-template-areas:
+    'left right'
+    'footer footer';
   height: 400px;
   width: 360px;
 `;
 
+const SectionedOverlayFooter = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  grid-area: footer;
+  padding: ${space(1)};
+  border-top: 1px solid ${p => p.theme.innerBorder};
+`;
+
 const SectionedListBoxPane = styled('div')`
   overflow-y: auto;
 `;

static/app/utils/useFeedbackForm.spec.tsx

@@ -20,6 +20,7 @@ const defaultOptions = {
   submitButtonLabel: '',
   messagePlaceholder: '',
   formTitle: '',
+  tags: {},
 };
 
 describe('useFeedbackForm', function () {