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

This reverts commit ff72324.

Co-authored-by: roaga <47861399+roaga@users.noreply.github.com>

Author: getsentry-bot

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

@@ -76,30 +76,11 @@ const makeErrorAutofixData = (errorMessage: string): AutofixResponse => {
 };
 
 /** Will not poll when the autofix is in an error state or has completed */
-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
-    )
+const isPolling = (autofixData?: AutofixData | null) =>
+  !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,12 +336,6 @@ 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,13 +61,6 @@ 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,13 +43,6 @@ describe('SolutionsSection', () => {
       },
     });
 
-    MockApiClient.addMockResponse({
-      url: `/issues/${mockGroup.id}/autofix/`,
-      body: {
-        steps: [],
-      },
-    });
-
     jest.mocked(getConfigForIssueType).mockReturnValue({
       issueSummary: {
         enabled: true,
@@ -197,7 +190,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,
@@ -228,10 +221,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: {
@@ -259,10 +252,52 @@ describe('SolutionsSection', () => {
         expect(screen.queryByTestId('loading-placeholder')).not.toBeInTheDocument();
       });
 
-      expect(screen.getByRole('button', {name: 'Set Up Autofix'})).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();
+      });
     });
 
-    it('shows "Find Root Cause" when autofix is available', async () => {
+    it('shows "Open Autofix" when only autofix is available', async () => {
       // Mock successful autofix setup but disable resources
       MockApiClient.addMockResponse({
         url: `/issues/${mockGroup.id}/autofix/setup/`,
@@ -294,7 +329,7 @@ describe('SolutionsSection', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByRole('button', {name: 'Find Root Cause'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Open Autofix'})).toBeInTheDocument();
       });
     });
 

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

@@ -1,9 +1,12 @@
-import {useState} from 'react';
+import {useRef, 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';
@@ -16,10 +19,9 @@ 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) {
@@ -55,10 +57,60 @@ 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 (
@@ -124,15 +176,24 @@ export default function SolutionsSection({
     >
       <SolutionsSectionContainer>
         {renderContent()}
-        {event && (
-          <SolutionsSectionCtaButton
-            aiConfig={aiConfig}
-            event={event}
-            group={group}
-            project={project}
-            hasStreamlinedUI={hasStreamlinedUI}
-          />
-        )}
+        {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}
       </SolutionsSectionContainer>
     </SidebarFoldSection>
   );
@@ -193,9 +254,30 @@ 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)};
+`;