Skip to content

Commit 2048098

Browse files
authored
chore(issue summary): More obvious re-summarize button on summary in drawer (#91841)
Removes the ellipsis menu and puts a more obvious button to re-generate the summary when in the drawer and the event id doesn't match. <img width="726" alt="Screenshot 2025-05-16 at 2 52 17 PM" src="https://github.com/user-attachments/assets/33a0655d-6928-4922-8801-41bfdfa4c25b" />
1 parent 99f233e commit 2048098

File tree

1 file changed

+19
-85
lines changed

1 file changed

+19
-85
lines changed

static/app/components/group/groupSummary.tsx

Lines changed: 19 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {isValidElement, useEffect, useState} from 'react';
22
import styled from '@emotion/styled';
33

4-
import {DropdownMenu} from 'sentry/components/dropdownMenu';
4+
import {Button} from 'sentry/components/core/button';
55
import {makeAutofixQueryKey} from 'sentry/components/events/autofix/useAutofix';
66
import Placeholder from 'sentry/components/placeholder';
7-
import {IconDocs, IconEllipsis, IconFatal, IconFocus, IconSpan} from 'sentry/icons';
7+
import {IconDocs, IconFatal, IconFocus, IconRefresh, IconSpan} from 'sentry/icons';
88
import {t} from 'sentry/locale';
99
import {space} from 'sentry/styles/space';
1010
import type {Event} from 'sentry/types/event';
@@ -13,8 +13,6 @@ import type {Project} from 'sentry/types/project';
1313
import {getConfigForIssueType} from 'sentry/utils/issueTypeConfig';
1414
import {MarkedText} from 'sentry/utils/marked/markedText';
1515
import {type ApiQueryKey, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
16-
import normalizeUrl from 'sentry/utils/url/normalizeUrl';
17-
import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
1816
import useOrganization from 'sentry/utils/useOrganization';
1917
import {useAiConfig} from 'sentry/views/issueDetails/streamline/hooks/useAiConfig';
2018

@@ -119,7 +117,6 @@ export function GroupSummary({
119117
const queryClient = useQueryClient();
120118
const organization = useOrganization();
121119
const [forceEvent, setForceEvent] = useState(false);
122-
const openFeedbackForm = useFeedbackForm();
123120
const aiConfig = useAiConfig(group, project);
124121
const {data, isPending, isError, refresh} = useGroupSummary(
125122
group,
@@ -153,53 +150,6 @@ export function GroupSummary({
153150
organization.slug,
154151
]);
155152

156-
const eventDetailsItems = [
157-
{
158-
key: 'event-info',
159-
label:
160-
event?.id === data?.eventId ? (
161-
t('Based on this event')
162-
) : (
163-
<span>{t('See original event (%s)', data?.eventId?.substring(0, 8))}</span>
164-
),
165-
to:
166-
event?.id === data?.eventId
167-
? undefined
168-
: window.location.origin +
169-
normalizeUrl(
170-
`/organizations/${organization.slug}/issues/${data?.groupId}/events/${data?.eventId}/`
171-
),
172-
disabled: event?.id === data?.eventId,
173-
},
174-
...(event?.id === data?.eventId
175-
? []
176-
: [
177-
{
178-
key: 'refresh',
179-
label: t('Summarize this event instead'),
180-
onAction: () => setForceEvent(true),
181-
disabled: isPending,
182-
},
183-
]),
184-
...(openFeedbackForm
185-
? [
186-
{
187-
key: 'feedback',
188-
label: t('Give feedback'),
189-
onAction: () => {
190-
openFeedbackForm({
191-
messagePlaceholder: t('How can we make Issue Summary better for you?'),
192-
tags: {
193-
['feedback.source']: 'issue_details_ai_autofix',
194-
['feedback.owner']: 'ml-ai',
195-
},
196-
});
197-
},
198-
},
199-
]
200-
: []),
201-
];
202-
203153
const shouldShowPossibleCause =
204154
!data?.scores ||
205155
(data.scores.possibleCauseConfidence &&
@@ -254,26 +204,6 @@ export function GroupSummary({
254204
<div data-testid="group-summary">
255205
{isError ? <div>{t('Error loading summary')}</div> : null}
256206
<Content>
257-
{data?.eventId && !isPending && !preview && (
258-
<TooltipWrapper id="group-summary-tooltip-wrapper">
259-
<DropdownMenu
260-
items={eventDetailsItems}
261-
triggerProps={{
262-
icon: <StyledIconEllipsis size="xs" />,
263-
'aria-label': t('Event details'),
264-
size: 'xs',
265-
borderless: true,
266-
showChevron: false,
267-
style: {
268-
zIndex: 0,
269-
},
270-
}}
271-
isDisabled={isPending}
272-
position="bottom-end"
273-
offset={4}
274-
/>
275-
</TooltipWrapper>
276-
)}
277207
<InsightGrid>
278208
{insightCards.map(card => {
279209
if ((!isPending && !card.insight) || (isPending && !card.showWhenLoading)) {
@@ -309,6 +239,18 @@ export function GroupSummary({
309239
);
310240
})}
311241
</InsightGrid>
242+
{data?.eventId && !isPending && !preview && event?.id !== data?.eventId && (
243+
<ResummarizeWrapper>
244+
<Button
245+
onClick={() => setForceEvent(true)}
246+
disabled={isPending}
247+
size="xs"
248+
icon={<IconRefresh />}
249+
>
250+
{t('Summarize current event')}
251+
</Button>
252+
</ResummarizeWrapper>
253+
)}
312254
</Content>
313255
</div>
314256
);
@@ -395,17 +337,9 @@ const CardContent = styled('div')`
395337
flex: 1;
396338
`;
397339

398-
const TooltipWrapper = styled('div')`
399-
position: absolute;
400-
top: -${space(1)};
401-
right: 0;
402-
403-
ul {
404-
max-height: none !important;
405-
overflow: visible !important;
406-
}
407-
`;
408-
409-
const StyledIconEllipsis = styled(IconEllipsis)`
410-
color: ${p => p.theme.subText};
340+
const ResummarizeWrapper = styled('div')`
341+
display: flex;
342+
align-items: center;
343+
margin-top: ${space(1)};
344+
flex-shrink: 0;
411345
`;

0 commit comments

Comments
 (0)