From 443dbc9a26680c03aaf7184bc6ba978a5b1c878d Mon Sep 17 00:00:00 2001
From: Malachi Willey <malwilley@gmail.com>
Date: Wed, 16 Oct 2024 10:48:08 -0700
Subject: [PATCH] fix(autofix): Fix issues with feedback button in autofix
 drawer (#79169)

Fixes a couple issues:

- The feedback dialog would close whenever useAutofix polled for new
data
- Interacting with the feedback dialog would close the drawer
---
 .../events/autofix/autofixBanner.tsx          |  5 +++-
 .../events/autofix/autofixFeedback.tsx        | 30 +++++++++++--------
 static/app/views/app/index.tsx                |  8 ++---
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/static/app/components/events/autofix/autofixBanner.tsx b/static/app/components/events/autofix/autofixBanner.tsx
index efb45193fbc74..3d1199e0b80de 100644
--- a/static/app/components/events/autofix/autofixBanner.tsx
+++ b/static/app/components/events/autofix/autofixBanner.tsx
@@ -41,7 +41,10 @@ function SuccessfulSetup({
         // we don't reopen it immediately, and instead let the button handle this itself.
         shouldCloseOnInteractOutside: element => {
           const viewAllButton = openButtonRef.current;
-          if (viewAllButton?.contains(element)) {
+          if (
+            viewAllButton?.contains(element) ||
+            document.getElementById('sentry-feedback')?.contains(element)
+          ) {
             return false;
           }
           return true;
diff --git a/static/app/components/events/autofix/autofixFeedback.tsx b/static/app/components/events/autofix/autofixFeedback.tsx
index fc6ceda7c048b..1d6010fed3b06 100644
--- a/static/app/components/events/autofix/autofixFeedback.tsx
+++ b/static/app/components/events/autofix/autofixFeedback.tsx
@@ -1,29 +1,33 @@
 import {useRef} from 'react';
 
 import {Button} from 'sentry/components/button';
-import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
 import {IconMegaphone} from 'sentry/icons/iconMegaphone';
 import {t} from 'sentry/locale';
+import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 
 function AutofixFeedback() {
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const feedback = useFeedbackWidget({
-    buttonRef,
-    messagePlaceholder: t('How can we make Autofix better for you?'),
-    optionOverrides: {
-      tags: {
-        ['feedback.source']: 'issue_details_ai_autofix',
-        ['feedback.owner']: 'ml-ai',
-      },
-    },
-  });
+  const openForm = useFeedbackForm();
 
-  if (!feedback) {
+  if (!openForm) {
     return null;
   }
 
   return (
-    <Button ref={buttonRef} size="xs" icon={<IconMegaphone />}>
+    <Button
+      ref={buttonRef}
+      size="xs"
+      icon={<IconMegaphone />}
+      onClick={() =>
+        openForm({
+          messagePlaceholder: t('How can we make Autofix better for you?'),
+          tags: {
+            ['feedback.source']: 'issue_details_ai_autofix',
+            ['feedback.owner']: 'ml-ai',
+          },
+        })
+      }
+    >
       {t('Give Feedback')}
     </Button>
   );
diff --git a/static/app/views/app/index.tsx b/static/app/views/app/index.tsx
index f616a08b965de..bc96d394af963 100644
--- a/static/app/views/app/index.tsx
+++ b/static/app/views/app/index.tsx
@@ -246,16 +246,16 @@ function App({children, params}: Props) {
         <RouteAnalyticsContextProvider>
           <OrganizationContextProvider>
             <AsyncSDKIntegrationContextProvider>
-              <GlobalDrawer>
-                <GlobalFeedbackForm>
+              <GlobalFeedbackForm>
+                <GlobalDrawer>
                   <MainContainer tabIndex={-1} ref={mainContainerRef}>
                     <GlobalModal onClose={handleModalClose} />
                     <SystemAlerts className="messages-container" />
                     <Indicators className="indicators-container" />
                     <ErrorBoundary>{renderBody()}</ErrorBoundary>
                   </MainContainer>
-                </GlobalFeedbackForm>
-              </GlobalDrawer>
+                </GlobalDrawer>
+              </GlobalFeedbackForm>
             </AsyncSDKIntegrationContextProvider>
           </OrganizationContextProvider>
         </RouteAnalyticsContextProvider>