Add clean error handling, keyboard support in message box

getsentry · Sep 20, 2024 · fb14f93 · fb14f93
1 parent 27efb20
commit fb14f93
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 36 deletions.
diff --git a/static/app/components/events/autofix/autofixInsightCards.tsx b/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.

diff --git a/static/app/components/events/autofix/autofixMessageBox.tsx b/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>
   );
 }

diff --git a/static/app/components/events/autofix/autofixSteps.tsx b/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;
 `;