Skip to content

Commit 9ab40a9

Browse files
roagaroaga
authored
chore(autofix): better state when no consent (#97744)
Makes the sidebar content more enticing when there is no consent or quota. <img width="354" height="394" alt="Screenshot 2025-08-12 at 5 53 39 PM" src="https://github.com/user-attachments/assets/889071b8-cd14-4817-80c2-0899a6f67ad4" /> Also tacking on some color tweaks inside the drawer for slight readability <img width="611" height="308" alt="Screenshot 2025-08-12 at 4 48 50 PM" src="https://github.com/user-attachments/assets/b989069d-e9c3-45f4-a2e3-27b713354139" />
1 parent 3bfd9c7 commit 9ab40a9

File tree

8 files changed

+76
-24
lines changed

8 files changed

+76
-24
lines changed

‎static/app/components/events/autofix/autofixChanges.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export function AutofixChanges({
278278
<IconCode size="md" color="blue400" />
279279
</HeaderIconWrapper>
280280
{t('Code Changes')}
281-
<ChatButton
281+
<Button
282282
size="zero"
283283
borderless
284284
title={t('Chat with Seer')}
@@ -287,7 +287,7 @@ export function AutofixChanges({
287287
analyticsEventKey="autofix.changes.chat"
288288
>
289289
<IconChat />
290-
</ChatButton>
290+
</Button>
291291
</HeaderText>
292292
{!prsMade && (
293293
<ButtonBar>
@@ -482,10 +482,6 @@ const HeaderIconWrapper = styled('div')`
482482
justify-content: center;
483483
`;
484484

485-
const ChatButton = styled(Button)`
486-
color: ${p => p.theme.subText};
487-
`;
488-
489485
function CreatePRsButton({
490486
changes,
491487
groupId,

‎static/app/components/events/autofix/autofixInsightCards.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -711,7 +711,7 @@ const VerticalLine = styled('div')`
711711
transform: translateX(-50%);
712712
top: 0;
713713
bottom: 0;
714-
width: 2px;
714+
width: 1px;
715715
background-color: ${p => p.theme.subText};
716716
transition: background-color 0.2s ease;
717717
z-index: 0;
@@ -757,6 +757,10 @@ const MiniHeader = styled('p')<{expanded?: boolean}>`
757757
flex: 1;
758758
word-break: break-word;
759759
color: ${p => (p.expanded ? p.theme.textColor : p.theme.subText)};
760+
761+
code {
762+
color: ${p => (p.expanded ? p.theme.textColor : p.theme.subText)};
763+
}
760764
`;
761765

762766
const ContextBody = styled('div')`

‎static/app/components/events/autofix/autofixOutputStream.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -421,8 +421,8 @@ const ActiveLog = styled('div')`
421421
const VerticalLine = styled('div')`
422422
width: 0;
423423
height: ${space(4)};
424-
border-left: 2px dashed ${p => p.theme.subText};
425-
margin-left: 16px;
424+
border-left: 1px dashed ${p => p.theme.subText};
425+
margin-left: 16.5px;
426426
margin-bottom: -1px;
427427
`;
428428

‎static/app/components/events/autofix/autofixRootCause.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -170,13 +170,14 @@ function CopyRootCauseButton({
170170
}) {
171171
const text = formatRootCauseText(cause, customRootCause);
172172
return (
173-
<CopyToClipboardButton
173+
<StyledCopyToClipboardButton
174174
size="zero"
175175
text={text}
176176
borderless
177177
title="Copy root cause as Markdown"
178178
analyticsEventName="Autofix: Copy Root Cause as Markdown"
179179
analyticsEventKey="autofix.root_cause.copy"
180+
color="black"
180181
/>
181182
);
182183
}
@@ -245,7 +246,7 @@ function AutofixRootCauseDisplay({
245246
</IconWrapper>
246247
{t('Root Cause')}
247248
<ButtonBar gap={'0'}>
248-
<ChatButton
249+
<Button
249250
size="zero"
250251
borderless
251252
title={t('Chat with Seer')}
@@ -254,7 +255,7 @@ function AutofixRootCauseDisplay({
254255
analyticsEventKey="autofix.root_cause.chat"
255256
>
256257
<IconChat />
257-
</ChatButton>
258+
</Button>
258259
<CopyRootCauseButton cause={cause} />
259260
</ButtonBar>
260261
</HeaderText>
@@ -378,6 +379,6 @@ const AnimationWrapper = styled(motion.div)`
378379
transform-origin: top center;
379380
`;
380381

381-
const ChatButton = styled(Button)`
382-
color: ${p => p.theme.subText};
382+
const StyledCopyToClipboardButton = styled(CopyToClipboardButton)`
383+
color: ${p => p.theme.textColor};
383384
`;

‎static/app/components/events/autofix/autofixSolution.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ function CopySolutionButton({
310310
}
311311
const text = formatSolutionText(solution, customSolution);
312312
return (
313-
<CopyToClipboardButton
313+
<StyledCopyToClipboardButton
314314
size="zero"
315315
text={text}
316316
borderless
@@ -480,7 +480,7 @@ function AutofixSolutionDisplay({
480480
</HeaderIconWrapper>
481481
{t('Solution')}
482482
<ButtonBar gap={'0'}>
483-
<ChatButton
483+
<Button
484484
size="zero"
485485
borderless
486486
title={t('Chat with Seer')}
@@ -489,7 +489,7 @@ function AutofixSolutionDisplay({
489489
analyticsEventKey="autofix.solution.chat"
490490
>
491491
<IconChat />
492-
</ChatButton>
492+
</Button>
493493
<CopySolutionButton solution={solution} />
494494
</ButtonBar>
495495
</HeaderText>
@@ -710,6 +710,6 @@ const AddInstructionWrapper = styled('div')`
710710
padding: ${space(1)} ${space(1)} 0 ${space(3)};
711711
`;
712712

713-
const ChatButton = styled(Button)`
714-
color: ${p => p.theme.subText};
713+
const StyledCopyToClipboardButton = styled(CopyToClipboardButton)`
714+
color: ${p => p.theme.textColor};
715715
`;

‎static/app/views/issueDetails/streamline/sidebar/seerSection.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ describe('SeerSection', () => {
105105
});
106106

107107
describe('Seer button text', () => {
108-
it('shows "Find Root Cause" when Seer needs setup and no run already', async () => {
108+
it('shows "Fix it for me" when Seer needs setup and no run already', async () => {
109109
const customOrganization = OrganizationFixture({
110110
hideAiFeatures: false,
111111
features: ['gen-ai-features'],
@@ -128,9 +128,9 @@ describe('SeerSection', () => {
128128
});
129129

130130
expect(
131-
await screen.findByText('Explore potential root causes and solutions with Seer.')
131+
await screen.findByText('Meet Seer, the AI debugging agent.')
132132
).toBeInTheDocument();
133-
expect(screen.getByRole('button', {name: 'Find Root Cause'})).toBeInTheDocument();
133+
expect(screen.getByRole('button', {name: 'Fix it for me'})).toBeInTheDocument();
134134
});
135135

136136
it('shows "Find Root Cause" even when autofix needs setup', async () => {

‎static/app/views/issueDetails/streamline/sidebar/seerSection.tsx

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import {useState} from 'react';
22
import {css} from '@emotion/react';
33
import styled from '@emotion/styled';
44

5+
import autofixSetupImg from 'sentry-images/features/autofix-setup.svg';
6+
57
import {Button} from 'sentry/components/core/button';
8+
import {Text} from 'sentry/components/core/text';
69
import {GroupSummary} from 'sentry/components/group/groupSummary';
710
import {GroupSummaryWithAutofix} from 'sentry/components/group/groupSummaryWithAutofix';
811
import Placeholder from 'sentry/components/placeholder';
@@ -21,6 +24,26 @@ import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
2124

2225
import {SeerSectionCtaButton} from './seerSectionCtaButton';
2326

27+
function SeerWelcomeEntrypoint() {
28+
return (
29+
<WelcomeContainer>
30+
<WelcomeTextContainer>
31+
<Text>{t('Meet Seer, the AI debugging agent.')}</Text>
32+
</WelcomeTextContainer>
33+
<WelcomeImageContainer>
34+
<img src={autofixSetupImg} alt="Seer AI debugging agent" />
35+
</WelcomeImageContainer>
36+
<WelcomeTextContainer>
37+
<Text>
38+
{t(
39+
'Find the root cause of the issue, and even open a PR to fix it, in minutes.'
40+
)}
41+
</Text>
42+
</WelcomeTextContainer>
43+
</WelcomeContainer>
44+
);
45+
}
46+
2447
function SeerSectionContent({
2548
group,
2649
project,
@@ -117,8 +140,9 @@ export default function SeerSection({
117140
preventCollapse={!hasStreamlinedUI}
118141
>
119142
<SeerSectionContainer>
120-
{aiConfig.orgNeedsGenAiAcknowledgement && !aiConfig.isAutofixSetupLoading ? (
121-
<Summary>{t('Explore potential root causes and solutions with Seer.')}</Summary>
143+
{(aiConfig.orgNeedsGenAiAcknowledgement || !aiConfig.hasAutofixQuota) &&
144+
!aiConfig.isAutofixSetupLoading ? (
145+
<SeerWelcomeEntrypoint />
122146
) : aiConfig.hasAutofix || aiConfig.hasSummary ? (
123147
<SeerSectionContent group={group} project={project} event={event} />
124148
) : issueTypeConfig.resources ? (
@@ -211,3 +235,23 @@ const HeaderContainer = styled('div')`
211235
const StyledP = styled('p')`
212236
margin-bottom: ${p => p.theme.space.md};
213237
`;
238+
239+
const WelcomeContainer = styled('div')`
240+
margin-bottom: ${p => p.theme.space.lg};
241+
`;
242+
243+
const WelcomeImageContainer = styled('div')`
244+
margin-bottom: ${p => p.theme.space.lg};
245+
margin-top: ${p => p.theme.space.lg};
246+
247+
img {
248+
max-width: 100%;
249+
height: auto;
250+
}
251+
`;
252+
253+
const WelcomeTextContainer = styled('div')`
254+
display: flex;
255+
flex-direction: column;
256+
gap: ${p => p.theme.space.sm};
257+
`;

‎static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,13 @@ export function SeerSectionCtaButton({
147147
return t('Open Resources');
148148
}
149149

150+
if (
151+
(aiConfig.orgNeedsGenAiAcknowledgement || !aiConfig.hasAutofixQuota) &&
152+
!aiConfig.isAutofixSetupLoading
153+
) {
154+
return t('Fix it for me');
155+
}
156+
150157
if (!lastStep) {
151158
return t('Find Root Cause');
152159
}

0 commit comments

Comments
 (0)