feat(feedback): allow giving feedback about the feedback summary (#95347)

Author: vishnupsatish

static/app/components/feedback/feedbackSummary.tsx

@@ -1,26 +1,63 @@
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
 import useFeedbackSummary from 'sentry/components/feedback/list/useFeedbackSummary';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {IconThumb} from 'sentry/icons';
 import {IconSeer} from 'sentry/icons/iconSeer';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 import useOrganization from 'sentry/utils/useOrganization';
 
 export default function FeedbackSummary() {
   const {isError, isPending, summary, tooFewFeedbacks} = useFeedbackSummary();
 
   const organization = useOrganization();
 
+  const openForm = useFeedbackForm();
+
   if (!organization.features.includes('user-feedback-ai-summaries')) {
     return null;
   }
 
+  const feedbackButton = ({type}: {type: 'positive' | 'negative'}) => {
+    return openForm ? (
+      <Button
+        aria-label={t('Give feedback on the AI-powered summary')}
+        icon={<IconThumb direction={type === 'positive' ? 'up' : 'down'} />}
+        title={type === 'positive' ? t('I like this') : t(`I don't like this`)}
+        size={'xs'}
+        onClick={() =>
+          openForm({
+            messagePlaceholder:
+              type === 'positive'
+                ? t('What did you like about the AI-powered summary?')
+                : t('How can we make the summary work better for you?'),
+            tags: {
+              ['feedback.source']: 'feedback_ai_summary',
+              ['feedback.owner']: 'replay',
+              ['feedback.type']: type,
+            },
+          })
+        }
+      />
+    ) : null;
+  };
+
   return (
     <SummaryIconContainer>
       <IconSeer size="xs" />
       <SummaryContainer>
-        <SummaryHeader>{t('Feedback Summary')}</SummaryHeader>
+        <Flex justify="space-between" align="center">
+          <SummaryHeader>{t('Summary')}</SummaryHeader>
+          <Flex gap={space(0.5)}>
+            {feedbackButton({type: 'positive'})}
+            {feedbackButton({type: 'negative'})}
+          </Flex>
+        </Flex>
+
         {isPending ? (
           <LoadingContainer>
             <StyledLoadingIndicator size={24} />