Browse Source

feat(autofix): Add feedback button (#69554)

Malachi Willey 10 months ago
parent
commit
debb27a89c
1 changed files with 28 additions and 3 deletions
  1. 28 3
      static/app/components/events/autofix/autofixCard.tsx

+ 28 - 3
static/app/components/events/autofix/autofixCard.tsx

@@ -1,9 +1,13 @@
+import {useRef} from 'react';
 import styled from '@emotion/styled';
 import styled from '@emotion/styled';
 
 
 import {Button} from 'sentry/components/button';
 import {Button} from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
 import {AutofixSteps} from 'sentry/components/events/autofix/autofixSteps';
 import {AutofixSteps} from 'sentry/components/events/autofix/autofixSteps';
 import type {AutofixData} from 'sentry/components/events/autofix/types';
 import type {AutofixData} from 'sentry/components/events/autofix/types';
+import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
 import Panel from 'sentry/components/panels/panel';
 import Panel from 'sentry/components/panels/panel';
+import {IconMegaphone} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {space} from 'sentry/styles/space';
 
 
@@ -13,14 +17,35 @@ type AutofixCardProps = {
   onRetry: () => void;
   onRetry: () => void;
 };
 };
 
 
+function AutofixFeedback() {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const feedback = useFeedbackWidget({
+    buttonRef,
+    messagePlaceholder: t('How can we make Autofix better for you?'),
+  });
+
+  if (!feedback) {
+    return null;
+  }
+
+  return (
+    <Button ref={buttonRef} size="xs" icon={<IconMegaphone />}>
+      {t('Give Feedback')}
+    </Button>
+  );
+}
+
 export function AutofixCard({data, onRetry, groupId}: AutofixCardProps) {
 export function AutofixCard({data, onRetry, groupId}: AutofixCardProps) {
   return (
   return (
     <AutofixPanel>
     <AutofixPanel>
       <AutofixHeader>
       <AutofixHeader>
         <Title>{t('Autofix')}</Title>
         <Title>{t('Autofix')}</Title>
-        <Button size="xs" onClick={onRetry}>
-          Start Over
-        </Button>
+        <ButtonBar gap={1}>
+          <AutofixFeedback />
+          <Button size="xs" onClick={onRetry}>
+            {t('Start Over')}
+          </Button>
+        </ButtonBar>
       </AutofixHeader>
       </AutofixHeader>
       <AutofixSteps data={data} runId={data.run_id} groupId={groupId} onRetry={onRetry} />
       <AutofixSteps data={data} runId={data.run_id} groupId={groupId} onRetry={onRetry} />
     </AutofixPanel>
     </AutofixPanel>