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
getsentry · Oct 16, 2024 · 443dbc9 · 443dbc9
1 parent 54c3a42
commit 443dbc9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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>