feat(supergroups): Add feedback component and experimental badge to drawer

static/app/utils/analytics/workflowAnalyticsEvents.tsx

@@ -181,6 +181,11 @@ export type TeamInsightsEventParameters = {
   'releases_list.click_add_release_health': {
     project_id: number;
   };
+  'supergroup.feedback_submitted': {
+    choice_selected: boolean;
+    supergroup_id: number;
+    user_id: string;
+  };
   'suspect_commit.feedback_submitted': {
     choice_selected: boolean;
     group_owner_id: number;
@@ -259,5 +264,6 @@ export const workflowEventMap: Record<TeamInsightsEventKey, string | null> = {
   'releases_list.click_add_release_health': 'Releases List: Click Add Release Health',
   trace_timeline_clicked: 'Trace Timeline Clicked',
   trace_timeline_more_events_clicked: 'Trace Timeline More Events Clicked',
+  'supergroup.feedback_submitted': 'Supergroup Feedback Submitted',
   'suspect_commit.feedback_submitted': 'Suspect Commit Feedback Submitted',
 };

static/app/views/issueList/supergroups/supergroupDrawer.tsx

@@ -1,8 +1,8 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import {Badge} from '@sentry/scraps/badge';
 import {Container, Flex, Stack} from '@sentry/scraps/layout';
-import {Link} from '@sentry/scraps/link';
 import {Heading, Text} from '@sentry/scraps/text';
 
 import {
@@ -15,42 +15,37 @@ import {GroupList} from 'sentry/components/issues/groupList';
 import {ALL_ACCESS_PROJECTS} from 'sentry/components/pageFilters/constants';
 import {IconFocus} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {useOrganization} from 'sentry/utils/useOrganization';
 import {StyledMarkedText} from 'sentry/views/issueList/pages/supergroups';
+import {SupergroupFeedback} from 'sentry/views/issueList/supergroups/supergroupFeedback';
 import type {SupergroupDetail} from 'sentry/views/issueList/supergroups/types';
 
 export function SupergroupDetailDrawer({supergroup}: {supergroup: SupergroupDetail}) {
-  const organization = useOrganization();
   const placeholderRows = Math.min(supergroup.group_ids.length, 10);
   const issueIdQuery = `issue.id:[${supergroup.group_ids.join(',')}]`;
 
   return (
     <Fragment>
       <DrawerHeader hideBar>
         <Flex justify="between" align="center" gap="md" flexGrow={1}>
-          <NavigationCrumbs
-            crumbs={[
-              {label: t('Supergroups')},
-              {
-                label: (
-                  <CrumbContainer>
-                    <ShortId>{`SG-${supergroup.id}`}</ShortId>
-                  </CrumbContainer>
-                ),
-              },
-            ]}
-          />
-          <Link
-            to={{
-              pathname: `/organizations/${organization.slug}/issues/`,
-              query: {query: issueIdQuery, project: ALL_ACCESS_PROJECTS},
-            }}
-          >
-            {t('View All Issues')} ({supergroup.group_ids.length})
-          </Link>
+          <Flex align="center" gap="sm">
+            <NavigationCrumbs
+              crumbs={[
+                {label: t('Supergroups')},
+                {
+                  label: (
+                    <CrumbContainer>
+                      <ShortId>{`SG-${supergroup.id}`}</ShortId>
+                    </CrumbContainer>
+                  ),
+                },
+              ]}
+            />
+            <Badge variant="experimental">{t('Experimental')}</Badge>
+          </Flex>
         </Flex>
       </DrawerHeader>
       <DrawerContentBody>
+        <SupergroupFeedback supergroupId={supergroup.id} />
         <Container padding="2xl" borderBottom="muted">
           <Stack gap="lg">
             <Heading as="h2" size="lg">

static/app/views/issueList/supergroups/supergroupFeedback.tsx

@@ -0,0 +1,70 @@
+import {useCallback, useState} from 'react';
+import styled from '@emotion/styled';
+
+import {Button} from '@sentry/scraps/button';
+import {Flex} from '@sentry/scraps/layout';
+
+import {IconThumb} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import {useUser} from 'sentry/utils/useUser';
+
+interface SupergroupFeedbackProps {
+  supergroupId: number;
+}
+
+export function SupergroupFeedback({supergroupId}: SupergroupFeedbackProps) {
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+  const organization = useOrganization();
+  const user = useUser();
+
+  const handleFeedback = useCallback(
+    (isAccurate: boolean) => {
+      trackAnalytics('supergroup.feedback_submitted', {
+        choice_selected: isAccurate,
+        supergroup_id: supergroupId,
+        user_id: user.id,
+        organization,
+      });
+
+      setFeedbackSubmitted(true);
+    },
+    [supergroupId, organization, user]
+  );
+
+  return (
+    <FeedbackContainer>
+      {feedbackSubmitted ? (
+        t('Thanks!')
+      ) : (
+        <Flex align="center" gap="md">
+          {t('Help us improve this feature. Is this grouping accurate?')}
+          <Flex gap="sm">
+            <Button
+              size="zero"
+              icon={<IconThumb direction="up" size="xs" />}
+              onClick={() => handleFeedback(true)}
+              aria-label={t('Yes, this grouping is accurate')}
+            />
+            <Button
+              size="zero"
+              icon={<IconThumb direction="down" size="xs" />}
+              onClick={() => handleFeedback(false)}
+              aria-label={t('No, this grouping is not accurate')}
+            />
+          </Flex>
+        </Flex>
+      )}
+    </FeedbackContainer>
+  );
+}
+
+const FeedbackContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${p => p.theme.space.md};
+  padding: ${p => p.theme.space.md} ${p => p.theme.space['2xl']};
+  border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
+  background: ${p => p.theme.tokens.background.transparent.promotion.muted};
+`;