Skip to content

chore(autofix): Make feedback mechanisms clearer #92444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 28, 2025
Merged

chore(autofix): Make feedback mechanisms clearer #92444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da614ab
Make feedback mechanisms clearer
roaga May 28, 2025
c4ea7f7
Fix test
roaga May 28, 2025
3a5705d
Fix tests
roaga May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions static/app/components/events/autofix/autofixHighlightWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,12 @@ export function AutofixHighlightWrapper({

return (
<React.Fragment>
<Wrapper ref={containerRef} className={className} isSelected={!!selection}>
<Wrapper
ref={containerRef}
className={className}
isSelected={!!selection}
title={selection ? undefined : 'Click to chat about this with Seer'}
>
{children}
</Wrapper>

Expand Down Expand Up @@ -76,10 +81,6 @@ const Wrapper = styled('div')<{isSelected: boolean}>`
!p.isSelected &&
css`
cursor: pointer;

* {
${p.theme.tooltipUnderline('gray200')};
}
`};
}
`;
6 changes: 3 additions & 3 deletions static/app/components/events/autofix/autofixInsightCards.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ describe('AutofixInsightCards', () => {
const input = screen.getByPlaceholderText('Share your own insight here...');
await userEvent.type(input, 'Here is my insight.');

const submitButton = screen.getByLabelText('Rethink the answer');
const submitButton = screen.getByLabelText('Redo work from here');
await userEvent.click(submitButton);

expect(mockApi).toHaveBeenCalledWith(
Expand Down Expand Up @@ -154,7 +154,7 @@ describe('AutofixInsightCards', () => {
const input = screen.getByPlaceholderText('Share your own insight here...');
await userEvent.type(input, 'Here is my insight.');

const submitButton = screen.getByLabelText('Rethink the answer');
const submitButton = screen.getByLabelText('Redo work from here');
await userEvent.click(submitButton);

await waitFor(() => {
Expand All @@ -176,7 +176,7 @@ describe('AutofixInsightCards', () => {
const input = screen.getByPlaceholderText('Share your own insight here...');
await userEvent.type(input, 'Here is my insight.');

const submitButton = screen.getByLabelText('Rethink the answer');
const submitButton = screen.getByLabelText('Redo work from here');
await userEvent.click(submitButton);

await waitFor(() => {
Expand Down
43 changes: 33 additions & 10 deletions static/app/components/events/autofix/autofixInsightCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {replaceHeadersWithBold} from 'sentry/components/events/autofix/autofixRo
import type {AutofixInsight} from 'sentry/components/events/autofix/types';
import {makeAutofixQueryKey} from 'sentry/components/events/autofix/useAutofix';
import {useTypingAnimation} from 'sentry/components/events/autofix/useTypingAnimation';
import {IconChevron, IconClose, IconRefresh} from 'sentry/icons';
import {IconChevron, IconClose} from 'sentry/icons';
import {t, tn} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {singleLineRenderer} from 'sentry/utils/marked/marked';
Expand Down Expand Up @@ -145,6 +145,8 @@ function AutofixInsightCard({
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit(e);
} else if (e.key === 'Escape') {
handleCancel();
}
}}
/>
Expand All @@ -162,10 +164,10 @@ function AutofixInsightCard({
type="submit"
priority="primary"
size="sm"
title={t('Rethink the answer')}
aria-label={t('Rethink the answer')}
title={t('Redo work from here')}
aria-label={t('Redo work from here')}
>
<IconRefresh size="sm" />
{'\u23CE'}
</Button>
</ButtonBar>
</EditFormRow>
Expand Down Expand Up @@ -208,7 +210,7 @@ function AutofixInsightCard({
size="zero"
borderless
onClick={handleEdit}
icon={<IconRefresh size="xs" />}
icon={<FlippedReturnIcon />}
aria-label={t('Edit insight')}
title={t('Rethink the answer from here')}
/>
Expand Down Expand Up @@ -372,6 +374,8 @@ function CollapsibleChainLink({
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit(e);
} else if (e.key === 'Escape') {
handleCancel();
}
}}
/>
Expand All @@ -388,10 +392,10 @@ function CollapsibleChainLink({
type="submit"
priority="primary"
size="sm"
title={t('Rethink the answer')}
aria-label={t('Rethink the answer')}
title={t('Redo work from here')}
aria-label={t('Redo work from here')}
>
<IconRefresh size="sm" />
{'\u23CE'}
</Button>
</ButtonBar>
</EditFormRow>
Expand All @@ -402,10 +406,12 @@ function CollapsibleChainLink({
size="zero"
borderless
onClick={() => setIsAdding(true)}
icon={<IconRefresh size="sm" />}
title={t('Give feedback and rethink the answer')}
aria-label={t('Give feedback and rethink the answer')}
/>
>
<RethinkLabel>{t('Rethink this answer')}</RethinkLabel>
<FlippedReturnIcon />
</AddButton>
))}
</RethinkButtonContainer>
</VerticalLineContainer>
Expand Down Expand Up @@ -819,4 +825,21 @@ const AddButton = styled(Button)`
}
`;

function FlippedReturnIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
return <CheckpointIcon {...props}>{'\u21A9'}</CheckpointIcon>;
}

export default AutofixInsightCards;

const CheckpointIcon = styled('span')`
transform: scaleY(-1);
margin-bottom: ${space(0.5)};
`;

const RethinkLabel = styled('span')`
display: flex;
align-items: center;
font-size: ${p => p.theme.fontSizeSmall};
color: ${p => p.theme.subText};
margin-right: ${space(0.5)};
`;
Loading