From 18909a70b3d62062fcbdfb55734cc30b2367c601 Mon Sep 17 00:00:00 2001 From: Scott Cooper Date: Mon, 30 Mar 2026 15:56:26 -0700 Subject: [PATCH 1/2] feat(supergroups): Add feedback component and experimental badge to supergroup drawer Add a feedback banner at the top of the supergroup drawer asking users if the grouping is accurate, with thumbs up/down buttons that fire a new analytics event. Also add an experimental badge to the breadcrumbs. Co-Authored-By: Claude Opus 4.6 --- .../analytics/workflowAnalyticsEvents.tsx | 6 ++ .../supergroups/supergroupDrawer.tsx | 53 ++++++++++-------- .../supergroups/supergroupFeedback.tsx | 55 +++++++++++++++++++ 3 files changed, 91 insertions(+), 23 deletions(-) create mode 100644 static/app/views/issueList/supergroups/supergroupFeedback.tsx diff --git a/static/app/utils/analytics/workflowAnalyticsEvents.tsx b/static/app/utils/analytics/workflowAnalyticsEvents.tsx index 6ae8631903d086..b8f327c5608375 100644 --- a/static/app/utils/analytics/workflowAnalyticsEvents.tsx +++ b/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 = { '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', }; diff --git a/static/app/views/issueList/supergroups/supergroupDrawer.tsx b/static/app/views/issueList/supergroups/supergroupDrawer.tsx index 885bdd9524464a..b6333f14e14959 100644 --- a/static/app/views/issueList/supergroups/supergroupDrawer.tsx +++ b/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,12 +15,11 @@ 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(',')}]`; @@ -28,29 +27,28 @@ export function SupergroupDetailDrawer({supergroup}: {supergroup: SupergroupDeta - - {`SG-${supergroup.id}`} - - ), - }, - ]} - /> - - {t('View All Issues')} ({supergroup.group_ids.length}) - + + + {`SG-${supergroup.id}`} + + ), + }, + ]} + /> + {t('Experimental')} + + + {t('Help us improve this feature. Is this grouping accurate?')} + + @@ -118,3 +116,12 @@ export function SupergroupDetailDrawer({supergroup}: {supergroup: SupergroupDeta const DrawerContentBody = styled(DrawerBody)` padding: 0; `; + +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}; +`; diff --git a/static/app/views/issueList/supergroups/supergroupFeedback.tsx b/static/app/views/issueList/supergroups/supergroupFeedback.tsx new file mode 100644 index 00000000000000..267af86f31b75f --- /dev/null +++ b/static/app/views/issueList/supergroups/supergroupFeedback.tsx @@ -0,0 +1,55 @@ +import {useCallback, useState} from 'react'; + +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] + ); + + if (feedbackSubmitted) { + return {t('Thanks!')}; + } + + return ( + +