Skip to content

Commit

Permalink
Add clean error handling, keyboard support in message box
Browse files Browse the repository at this point in the history
  • Loading branch information
roaga committed Sep 20, 2024
1 parent 27efb20 commit fb14f93
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 36 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,6 @@ function AutofixInsightCards({
)
) : !hasStepAbove && !hasStepBelow ? (
<NoInsightsYet>
<p>Nothing yet...</p>
<p>
Autofix will share important conclusions here as it discovers them, building a
line of reasoning up to the root cause.
Expand Down
73 changes: 38 additions & 35 deletions static/app/components/events/autofix/autofixMessageBox.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Fragment, useState} from 'react';
import {type FormEvent, Fragment, useState} from 'react';
import styled from '@emotion/styled';

import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
Expand Down Expand Up @@ -112,7 +112,8 @@ function AutofixMessageBox({
const [message, setMessage] = useState('');
const {mutate: send} = useSendMessage({groupId, runId});

const handleSend = () => {
const handleSend = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (message.trim() !== '' || allowEmptyMessage) {
if (onSend != null) {
onSend(message);
Expand Down Expand Up @@ -157,39 +158,41 @@ function AutofixMessageBox({
<p>{message.length > 0 ? notEmptyInfoText : emptyInfoText}</p>
</ActionBar>
</DisplayArea>
<InputArea>
{!responseRequired ? (
<Fragment>
<NormalInput
type="text"
value={message}
onChange={e => setMessage(e.target.value)}
placeholder={inputPlaceholder}
disabled={isDisabled}
/>
<Button
onClick={handleSend}
disabled={isDisabled}
priority={primaryAction ? 'primary' : 'default'}
>
{actionText}
</Button>
</Fragment>
) : (
<Fragment>
<RequiredInput
type="text"
value={message}
onChange={e => setMessage(e.target.value)}
placeholder={'Please answer to continue...'}
disabled={isDisabled}
/>
<Button onClick={handleSend} disabled={isDisabled} priority={'primary'}>
{actionText}
</Button>
</Fragment>
)}
</InputArea>
<form onSubmit={handleSend}>
<InputArea>
{!responseRequired ? (
<Fragment>
<NormalInput
type="text"
value={message}
onChange={e => setMessage(e.target.value)}
placeholder={inputPlaceholder}
disabled={isDisabled}
/>
<Button
type="submit"
priority={primaryAction ? 'primary' : 'default'}
disabled={isDisabled}
>
{actionText}
</Button>
</Fragment>
) : (
<Fragment>
<RequiredInput
type="text"
value={message}
disabled={isDisabled}
onChange={e => setMessage(e.target.value)}
placeholder={'Please answer to continue...'}
/>
<Button type="submit" priority={'primary'} disabled={isDisabled}>
{actionText}
</Button>
</Fragment>
)}
</InputArea>
</form>
</Container>
);
}
Expand Down
25 changes: 25 additions & 0 deletions static/app/components/events/autofix/autofixSteps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
type AutofixStep,
AutofixStepType,
} from 'sentry/components/events/autofix/types';
import {space} from 'sentry/styles/space';
import testableTransition from 'sentry/utils/testableTransition';

const animationProps: AnimationProps = {
Expand All @@ -26,6 +27,7 @@ const animationProps: AnimationProps = {
};
interface StepProps {
groupId: string;
hasErroredStepBefore: boolean;
hasStepAbove: boolean;
hasStepBelow: boolean;
onRetry: () => void;
Expand Down Expand Up @@ -64,6 +66,7 @@ export function Step({
repos,
hasStepBelow,
hasStepAbove,
hasErroredStepBefore,
}: StepProps) {
const isActive = step.status !== 'PENDING' && step.status !== 'CANCELLED';

Expand Down Expand Up @@ -93,6 +96,13 @@ export function Step({
{step.type === AutofixStepType.CHANGES && (
<AutofixChanges step={step} groupId={groupId} onRetry={onRetry} />
)}
{hasErroredStepBefore && hasStepBelow && (
<StepMessage>
Autofix encountered an error.
<br />
Restarting step from scratch...
</StepMessage>
)}
</Fragment>
</AnimationWrapper>
</AnimatePresence>
Expand Down Expand Up @@ -162,6 +172,12 @@ export function AutofixSteps({data, groupId, runId, onRetry}: AutofixStepsProps)
lastStep.type === AutofixStepType.CHANGES && lastStep.status === 'COMPLETED';
const disabled = areCodeChangesShowing ? true : false;

const previousStep = steps.length > 2 ? steps[steps.length - 2] : null;
const previousStepErrored =
previousStep !== null &&
previousStep?.type === lastStep.type &&
previousStep.status === 'ERROR';

const scrollToMatchingStep = () => {
const matchingStepIndex = steps.findIndex(step => step.type === lastStep.type);
if (matchingStepIndex !== -1 && stepsRef.current[matchingStepIndex]) {
Expand All @@ -182,6 +198,7 @@ export function AutofixSteps({data, groupId, runId, onRetry}: AutofixStepsProps)
runId={runId}
onRetry={onRetry}
repos={repos}
hasErroredStepBefore={previousStepErrored}
/>
</div>
))}
Expand Down Expand Up @@ -221,6 +238,14 @@ export function AutofixSteps({data, groupId, runId, onRetry}: AutofixStepsProps)
);
}

const StepMessage = styled('div')`
overflow: hidden;
padding: ${space(2)};
color: ${p => p.theme.subText};
justify-content: center;
text-align: center;
`;

const StepsContainer = styled('div')`
margin-bottom: 13em;
`;
Expand Down

0 comments on commit fb14f93

Please sign in to comment.