fix(autofix): Graceful error state for no root causes (#73390)

Renders a graceful display when there are no root causes but it didn't
have an unexpected error.


<img width="1070" alt="Screenshot 2024-06-27 at 1 34 39 AM"
src="https://github.com/getsentry/sentry/assets/30991498/907a2256-9ae0-44fb-8b0b-eb76e9f670d6">

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

@@ -76,4 +76,20 @@ describe('AutofixRootCause', function () {
       })
     );
   });
+
+  it('shows graceful error state when there are no causes', function () {
+    render(
+      <AutofixRootCause
+        {...{
+          ...defaultProps,
+          causes: [],
+        }}
+      />
+    );
+
+    // Displays all root cause and suggested fix info
+    expect(
+      screen.getByText('Autofix was not able to find a root cause. Maybe try again?')
+    ).toBeInTheDocument();
+  });
 });

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

@@ -311,7 +311,7 @@ function ProvideYourOwn({
   );
 }
 
-export function AutofixRootCause({
+function AutofixRootCauseDisplay({
   causes,
   groupId,
   runId,
@@ -404,6 +404,24 @@ export function AutofixRootCause({
   );
 }
 
+export function AutofixRootCause(props: AutofixRootCauseProps) {
+  if (props.causes.length === 0) {
+    return (
+      <NoCausesPadding>
+        <Alert type="warning">
+          {t('Autofix was not able to find a root cause. Maybe try again?')}
+        </Alert>
+      </NoCausesPadding>
+    );
+  }
+
+  return <AutofixRootCauseDisplay {...props} />;
+}
+
+const NoCausesPadding = styled('div')`
+  padding: 0 ${space(2)};
+`;
+
 const CausesContainer = styled('div')``;
 
 const CausesHeader = styled('div')`

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

@@ -20,6 +20,7 @@ import {
   IconCode,
   IconFatal,
   IconQuestion,
+  IconSad,
 } from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -31,6 +32,9 @@ function StepIcon({step}: {step: AutofixStep}) {
   }
 
   if (step.type === AutofixStepType.ROOT_CAUSE_ANALYSIS) {
+    if (step.causes?.length === 0) {
+      return <IconSad size="sm" color="gray300" />;
+    }
     return step.selection ? (
       <IconCheckmark size="sm" color="green300" isCircled />
     ) : (