feat(autofix): Add Autofix status to sidebar button (#85287)

Change the copy of the "Open Autofix" button to indicate the current
status of the Autofix run.
Also catches an edge case in the polling logic when the root cause step
is complete but the solution step hasn't been triggered yet.

Examples:
<img width="352" alt="Screenshot 2025-02-14 at 1 40 23 PM"
src="https://github.com/user-attachments/assets/a3de0930-78ba-4526-9e00-3da57c7ea984"
/>
<img width="336" alt="Screenshot 2025-02-14 at 1 42 11 PM"
src="https://github.com/user-attachments/assets/2b1b5cf1-8661-4973-a6e9-a8e15575cdd8"
/>
<img width="360" alt="Screenshot 2025-02-14 at 1 42 36 PM"
src="https://github.com/user-attachments/assets/68dba0e1-a6ee-4c19-b81c-a5c8330262d3"
/>
<img width="358" alt="Screenshot 2025-02-14 at 1 45 32 PM"
src="https://github.com/user-attachments/assets/619126d5-2008-4ca4-bc1f-51fd8bd9cb1e"
/>
<img width="341" alt="Screenshot 2025-02-14 at 1 46 18 PM"
src="https://github.com/user-attachments/assets/f6e8dafb-2623-4ef2-8c80-aae8d775431b"
/>

Author: roaga

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

@@ -76,11 +76,30 @@ const makeErrorAutofixData = (errorMessage: string): AutofixResponse => {
 };
 
 /** Will not poll when the autofix is in an error state or has completed */
-const isPolling = (autofixData?: AutofixData | null) =>
-  !autofixData ||
-  ![AutofixStatus.ERROR, AutofixStatus.COMPLETED, AutofixStatus.CANCELLED].includes(
-    autofixData.status
+const isPolling = (autofixData?: AutofixData | null) => {
+  if (!autofixData?.steps) {
+    return true;
+  }
+
+  const hasSolutionStep = autofixData.steps.some(
+    step => step.type === AutofixStepType.SOLUTION
+  );
+
+  if (
+    !hasSolutionStep &&
+    ![AutofixStatus.ERROR, AutofixStatus.CANCELLED].includes(autofixData.status)
+  ) {
+    // we want to keep polling until we have a solution step because that's a stopping point
+    // we need this explicit check in case we get a state for a fraction of a second where the root cause is complete and there is no step after it started
+    return true;
+  }
+  return (
+    !autofixData ||
+    ![AutofixStatus.ERROR, AutofixStatus.COMPLETED, AutofixStatus.CANCELLED].includes(
+      autofixData.status
+    )
   );
+};
 
 export const useAutofixData = ({groupId}: {groupId: string}) => {
   const {data} = useApiQuery<AutofixResponse>(makeAutofixQueryKey(groupId), {

static/app/views/issueDetails/groupEventDetails/groupEventDetails.spec.tsx

@@ -336,6 +336,12 @@ const mockGroupApis = (
       },
     },
   });
+  MockApiClient.addMockResponse({
+    url: `/issues/${group.id}/autofix/`,
+    body: {
+      steps: [],
+    },
+  });
 };
 
 describe('groupEventDetails', () => {

static/app/views/issueDetails/streamline/hooks/useAiConfig.tsx

@@ -48,7 +48,7 @@ export const useAiConfig = (
 
   const isSummaryEnabled = issueTypeConfig.issueSummary.enabled;
   const isAutofixEnabled = issueTypeConfig.autofix;
-  const hasResources = issueTypeConfig.resources;
+  const hasResources = !!issueTypeConfig.resources;
 
   const hasGenAIConsent = autofixSetupData?.genAIConsent.ok ?? organization.genAIConsent;
 

static/app/views/issueDetails/streamline/sidebar/sidebar.spec.tsx

@@ -61,6 +61,13 @@ describe('StreamlinedSidebar', function () {
       },
     });
 
+    MockApiClient.addMockResponse({
+      url: `/issues/${group.id}/autofix/`,
+      body: {
+        steps: [],
+      },
+    });
+
     mockFirstLastRelease = MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/issues/${group.id}/first-last-release/`,
       method: 'GET',

static/app/views/issueDetails/streamline/sidebar/solutionsSection.spec.tsx

@@ -43,6 +43,13 @@ describe('SolutionsSection', () => {
       },
     });
 
+    MockApiClient.addMockResponse({
+      url: `/issues/${mockGroup.id}/autofix/`,
+      body: {
+        steps: [],
+      },
+    });
+
     jest.mocked(getConfigForIssueType).mockReturnValue({
       issueSummary: {
         enabled: true,
@@ -190,7 +197,7 @@ describe('SolutionsSection', () => {
   });
 
   describe('Solutions Hub button text', () => {
-    it('shows "Set up Sentry AI" when AI needs setup', async () => {
+    it('shows "Set Up Sentry AI" when AI needs setup', async () => {
       const customOrganization = OrganizationFixture({
         genAIConsent: false,
         hideAiFeatures: false,
@@ -221,10 +228,10 @@ describe('SolutionsSection', () => {
         screen.getByText('Explore potential root causes and solutions with Sentry AI.')
       ).toBeInTheDocument();
 
-      expect(screen.getByRole('button', {name: 'Set up Sentry AI'})).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Set Up Sentry AI'})).toBeInTheDocument();
     });
 
-    it('shows "Set up Autofix" when autofix needs setup', async () => {
+    it('shows "Set Up Autofix" when autofix needs setup', async () => {
       MockApiClient.addMockResponse({
         url: `/issues/${mockGroup.id}/autofix/setup/`,
         body: {
@@ -252,52 +259,10 @@ describe('SolutionsSection', () => {
         expect(screen.queryByTestId('loading-placeholder')).not.toBeInTheDocument();
       });
 
-      expect(screen.getByRole('button', {name: 'Set up Autofix'})).toBeInTheDocument();
-    });
-
-    it('shows "Open Resources & Autofix" when both are available', async () => {
-      // Mock successful summary response
-      MockApiClient.addMockResponse({
-        url: `/organizations/${mockProject.organization.slug}/issues/${mockGroup.id}/summarize/`,
-        method: 'POST',
-        body: {
-          whatsWrong: 'Test summary',
-        },
-      });
-
-      // Mock successful autofix setup
-      MockApiClient.addMockResponse({
-        url: `/issues/${mockGroup.id}/autofix/setup/`,
-        body: {
-          genAIConsent: {ok: true},
-          integration: {ok: true},
-          githubWriteIntegration: {ok: true},
-        },
-      });
-
-      MockApiClient.addMockResponse({
-        url: `/organizations/${mockProject.organization.slug}/issues/${mockGroup.id}/summarize/`,
-        method: 'POST',
-        body: {
-          whatsWrong: 'Test summary',
-        },
-      });
-
-      render(
-        <SolutionsSection event={mockEvent} group={mockGroup} project={mockProject} />,
-        {
-          organization,
-        }
-      );
-
-      await waitFor(() => {
-        expect(
-          screen.getByRole('button', {name: 'Open Resources & Autofix'})
-        ).toBeInTheDocument();
-      });
+      expect(screen.getByRole('button', {name: 'Set Up Autofix'})).toBeInTheDocument();
     });
 
-    it('shows "Open Autofix" when only autofix is available', async () => {
+    it('shows "Find Root Cause" when autofix is available', async () => {
       // Mock successful autofix setup but disable resources
       MockApiClient.addMockResponse({
         url: `/issues/${mockGroup.id}/autofix/setup/`,
@@ -329,7 +294,7 @@ describe('SolutionsSection', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByRole('button', {name: 'Open Autofix'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Find Root Cause'})).toBeInTheDocument();
       });
     });
 

static/app/views/issueDetails/streamline/sidebar/solutionsSection.tsx

@@ -1,12 +1,9 @@
-import {useRef, useState} from 'react';
+import {useState} from 'react';
 import styled from '@emotion/styled';
 
 import FeatureBadge from 'sentry/components/badge/featureBadge';
 import {Button} from 'sentry/components/button';
-import {Chevron} from 'sentry/components/chevron';
-import useDrawer from 'sentry/components/globalDrawer';
 import {GroupSummary} from 'sentry/components/group/groupSummary';
-import Placeholder from 'sentry/components/placeholder';
 import {IconMegaphone} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -19,9 +16,10 @@ import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
 import {useAiConfig} from 'sentry/views/issueDetails/streamline/hooks/useAiConfig';
 import Resources from 'sentry/views/issueDetails/streamline/sidebar/resources';
-import {SolutionsHubDrawer} from 'sentry/views/issueDetails/streamline/sidebar/solutionsHubDrawer';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 
+import {SolutionsSectionCtaButton} from './solutionsSectionCtaButton';
+
 function SolutionsHubFeedbackButton({hidden}: {hidden: boolean}) {
   const openFeedbackForm = useFeedbackForm();
   if (hidden) {
@@ -57,60 +55,10 @@ export default function SolutionsSection({
   const hasStreamlinedUI = useHasStreamlinedUI();
   // We don't use this on the streamlined UI, since the section folds.
   const [isExpanded, setIsExpanded] = useState(false);
-  const openButtonRef = useRef<HTMLButtonElement>(null);
-  const {openDrawer} = useDrawer();
-
-  const openSolutionsDrawer = () => {
-    if (!event) {
-      return;
-    }
-    openDrawer(
-      () => <SolutionsHubDrawer group={group} project={project} event={event} />,
-      {
-        ariaLabel: t('Solutions drawer'),
-        // We prevent a click on the Open/Close Autofix button from closing the drawer so that
-        // we don't reopen it immediately, and instead let the button handle this itself.
-        shouldCloseOnInteractOutside: element => {
-          const viewAllButton = openButtonRef.current;
-          if (
-            viewAllButton?.contains(element) ||
-            document.getElementById('sentry-feedback')?.contains(element) ||
-            document.getElementById('autofix-rethink-input')?.contains(element) ||
-            document.getElementById('autofix-output-stream')?.contains(element) ||
-            document.getElementById('autofix-write-access-modal')?.contains(element) ||
-            element.closest('[data-overlay="true"]')
-          ) {
-            return false;
-          }
-          return true;
-        },
-        transitionProps: {stiffness: 1000},
-      }
-    );
-  };
 
   const aiConfig = useAiConfig(group, event, project);
   const issueTypeConfig = getConfigForIssueType(group, project);
 
-  const showCtaButton =
-    aiConfig.needsGenAIConsent ||
-    aiConfig.hasAutofix ||
-    (aiConfig.hasSummary && aiConfig.hasResources);
-  const isButtonLoading = aiConfig.isAutofixSetupLoading;
-
-  const getButtonText = () => {
-    if (aiConfig.needsGenAIConsent) {
-      return t('Set up Sentry AI');
-    }
-    if (!aiConfig.hasAutofix) {
-      return t('Open Resources');
-    }
-    if (aiConfig.needsAutofixSetup) {
-      return t('Set up Autofix');
-    }
-    return aiConfig.hasResources ? t('Open Resources & Autofix') : t('Open Autofix');
-  };
-
   const renderContent = () => {
     if (aiConfig.needsGenAIConsent) {
       return (
@@ -176,24 +124,15 @@ export default function SolutionsSection({
     >
       <SolutionsSectionContainer>
         {renderContent()}
-        {isButtonLoading ? (
-          <ButtonPlaceholder />
-        ) : showCtaButton ? (
-          <StyledButton
-            ref={openButtonRef}
-            onClick={() => openSolutionsDrawer()}
-            analyticsEventKey="issue_details.solutions_hub_opened"
-            analyticsEventName="Issue Details: Solutions Hub Opened"
-            analyticsParams={{
-              has_streamlined_ui: hasStreamlinedUI,
-            }}
-          >
-            {getButtonText()}
-            <ChevronContainer>
-              <Chevron direction="right" size="large" />
-            </ChevronContainer>
-          </StyledButton>
-        ) : null}
+        {event && (
+          <SolutionsSectionCtaButton
+            aiConfig={aiConfig}
+            event={event}
+            group={group}
+            project={project}
+            hasStreamlinedUI={hasStreamlinedUI}
+          />
+        )}
       </SolutionsSectionContainer>
     </SidebarFoldSection>
   );
@@ -254,30 +193,9 @@ const ExpandButton = styled(Button)`
   }
 `;
 
-const StyledButton = styled(Button)`
-  margin-top: ${space(1)};
-  width: 100%;
-  background: ${p => p.theme.background}
-    linear-gradient(to right, ${p => p.theme.background}, ${p => p.theme.pink400}20);
-  color: ${p => p.theme.pink400};
-`;
-
-const ChevronContainer = styled('div')`
-  margin-left: ${space(0.5)};
-  height: 16px;
-  width: 16px;
-`;
-
 const HeaderContainer = styled('div')`
   font-size: ${p => p.theme.fontSizeMedium};
   display: flex;
   align-items: center;
   gap: ${space(0.25)};
 `;
-
-const ButtonPlaceholder = styled(Placeholder)`
-  width: 100%;
-  height: 38px;
-  border-radius: ${p => p.theme.borderRadius};
-  margin-top: ${space(1)};
-`;