feat(issue-details): New solutions hub (#80642)

Consolidates Autofix, Issue Summary, and Resources in one drawer, with a new Solutions Hub entry point. When AI features are available for an issue, we see a summary preview and a button to open the consolidated flyout. If we only have resources, we show the content directly in the sidebar. I will follow up with another PR to bring these changes to the old UI and delete the old AI entry points. <img width="386" alt="Screenshot 2024-11-13 at 7 15 12 AM" src="https://github.com/user-attachments/assets/2634f1d6-6b99-4e78-b813-aa2f4d4f89e3"> <img width="396" alt="Screenshot 2024-11-13 at 7 17 25 AM" src="https://github.com/user-attachments/assets/a9a87908-28c6-4d2b-b888-8bb177270526"> <img width="396" alt="Screenshot 2024-11-13 at 7 17 27 AM" src="https://github.com/user-attachments/assets/440512ea-2578-49ec-a8fd-9a758aa69bf3"> --------- Co-authored-by: Jenn Mueng <30991498+jennmueng@users.noreply.github.com>
getsentry · Nov 13, 2024 · d215146 · d215146
1 parent 2125bf2
commit d215146
Show file tree

Hide file tree

Showing 11 changed files with 535 additions and 406 deletions.
diff --git a/static/app/components/events/autofix/autofixBanner.tsx b/static/app/components/events/autofix/autofixBanner.tsx
@@ -6,7 +6,6 @@ import bannerImage from 'sentry-images/spot/ai-suggestion-banner.svg';
 import {openModal} from 'sentry/actionCreators/modal';
 import FeatureBadge from 'sentry/components/badge/featureBadge';
 import {Button} from 'sentry/components/button';
-import {AutofixDrawer} from 'sentry/components/events/autofix/autofixDrawer';
 import {AutofixSetupModal} from 'sentry/components/events/autofix/autofixSetupModal';
 import useDrawer from 'sentry/components/globalDrawer';
 import Panel from 'sentry/components/panels/panel';
@@ -17,6 +16,7 @@ import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import type {Project} from 'sentry/types/project';
 import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
+import {SolutionsHubDrawer} from 'sentry/views/issueDetails/streamline/solutionsHubDrawer';
 
 type Props = {
   event: Event;
@@ -35,22 +35,25 @@ function SuccessfulSetup({
 
   const openAutofix = () => {
     if (!isDrawerOpen) {
-      openDrawer(() => <AutofixDrawer group={group} project={project} event={event} />, {
-        ariaLabel: t('Autofix 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)
-          ) {
-            return false;
-          }
-          return true;
-        },
-        transitionProps: {stiffness: 1000},
-      });
+      openDrawer(
+        () => <SolutionsHubDrawer group={group} project={project} event={event} />,
+        {
+          ariaLabel: t('Autofix 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)
+            ) {
+              return false;
+            }
+            return true;
+          },
+          transitionProps: {stiffness: 1000},
+        }
+      );
     } else {
       closeDrawer();
     }

diff --git a/static/app/components/events/autofix/autofixInsightCards.tsx b/static/app/components/events/autofix/autofixInsightCards.tsx
@@ -342,6 +342,13 @@ function AutofixInsightCards({
             results.
           </p>
         </NoInsightsYet>
+      ) : hasStepBelow ? (
+        <ChainLink
+          insightCardAboveIndex={null}
+          stepIndex={stepIndex}
+          groupId={groupId}
+          runId={runId}
+        />
       ) : null}
     </InsightsContainer>
   );

diff --git a/static/app/views/issueDetails/resourcesAndPossibleSolutions.tsx b/static/app/views/issueDetails/resourcesAndPossibleSolutions.tsx
@@ -88,17 +88,13 @@ export function ResourcesAndPossibleSolutions({event, project, group}: Props) {
     !displayAiAutofix &&
     !isSampleError;
 
-  if (
-    isSelfHostedErrorsOnly ||
-    (!config.resources && !(displayAiSuggestedSolution || displayAiAutofix)) ||
-    (hasStreamlinedUI && !config.autofix)
-  ) {
+  if (isSelfHostedErrorsOnly || hasStreamlinedUI) {
     return null;
   }
 
   return (
     <Wrapper
-      title={hasStreamlinedUI ? t('Autofix') : t('Resources and Possible Solutions')}
+      title={t('Resources and Possible Solutions')}
       configResources={!!config.resources}
       type={SectionKey.RESOURCES}
     >

diff --git a/static/app/views/issueDetails/streamline/resources.tsx b/static/app/views/issueDetails/streamline/resources.tsx
@@ -38,6 +38,7 @@ export default function Resources({configResources, eventPlatform, group}: Props
             key={link}
             href={link}
             external
+            priority="link"
           >
             {text}
           </LinkButton>
@@ -49,6 +50,10 @@ export default function Resources({configResources, eventPlatform, group}: Props
 
 const LinkSection = styled('div')`
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-decoration: underline;
+  text-decoration-color: ${p => p.theme.linkUnderline};
   gap: ${space(1)};
   margin-top: ${space(1)};
 `;
diff --git a/static/app/views/issueDetails/streamline/sidebar.spec.tsx b/static/app/views/issueDetails/streamline/sidebar.spec.tsx
@@ -95,8 +95,7 @@ describe('StreamlinedSidebar', function () {
       organization,
     });
 
-    expect(await screen.findByText('Solutions & Resources')).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'See More'})).toBeInTheDocument();
+    expect(await screen.findByText('Solutions Hub')).toBeInTheDocument();
 
     expect(await screen.findByText('First seen')).toBeInTheDocument();
     expect(screen.getByText('Last seen')).toBeInTheDocument();

diff --git a/static/app/views/issueDetails/streamline/sidebar.tsx b/static/app/views/issueDetails/streamline/sidebar.tsx
@@ -47,6 +47,10 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
 
   return (
     <Side>
+      <GuideAnchor target="issue_sidebar_releases" position="left">
+        <FirstLastSeenSection group={group} />
+      </GuideAnchor>
+      <StyledBreak />
       {((organization.features.includes('ai-summary') &&
         issueTypeConfig.issueSummary.enabled) ||
         issueTypeConfig.resources) && (
@@ -55,10 +59,6 @@ export default function StreamlinedSidebar({group, event, project}: Props) {
           <StyledBreak />
         </Fragment>
       )}
-      <GuideAnchor target="issue_sidebar_releases" position="left">
-        <FirstLastSeenSection group={group} />
-      </GuideAnchor>
-      <StyledBreak />
       {event && (
         <ErrorBoundary mini>
           <StreamlinedExternalIssueList group={group} event={event} project={project} />