feat(autofix): Add clean error handling, keyboard support in message …

…box (#77873)

- You can use the return key in the message box to send the message now
- Cleanly displays errors and step retries
- Small copy change
<img width="621" alt="Screenshot 2024-09-20 at 1 47 37 PM"
src="https://github.com/user-attachments/assets/1d523394-c721-4756-8241-76f061bcd635">

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

@@ -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.

static/app/components/events/autofix/autofixMessageBox.tsx

@@ -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';
@@ -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);
@@ -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>
  );
 }

static/app/components/events/autofix/autofixSteps.tsx

@@ -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 = {
@@ -26,6 +27,7 @@ const animationProps: AnimationProps = {
 };
 interface StepProps {
  groupId: string;
+ hasErroredStepBefore: boolean;
  hasStepAbove: boolean;
  hasStepBelow: boolean;
  onRetry: () => void;
@@ -64,6 +66,7 @@ export function Step({
  repos,
  hasStepBelow,
  hasStepAbove,
+ hasErroredStepBefore,
 }: StepProps) {
  const isActive = step.status !== 'PENDING' && step.status !== 'CANCELLED';
 
@@ -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>
@@ -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]) {
@@ -182,6 +198,7 @@ export function AutofixSteps({data, groupId, runId, onRetry}: AutofixStepsProps)
  runId={runId}
  onRetry={onRetry}
  repos={repos}
+ hasErroredStepBefore={previousStepErrored}
  />
  </div>
  ))}
@@ -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;
 `;