feat(issues): Replace issue details guide anchors (#80510)

getsentry · Nov 11, 2024 · 3249e72 · 3249e72
1 parent 83a4753
commit 3249e72
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 139 deletions.
diff --git a/static/app/components/assistant/getGuidesContent.tsx b/static/app/components/assistant/getGuidesContent.tsx
@@ -41,6 +41,7 @@ export default function getGuidesContent(
           ),
         },
         {
+          // TODO(streamline-ui): Remove from guides on GA, tag sidebar is gone
           title: t('Pinpoint hotspots'),
           target: 'issue_sidebar_tags',
           description: t(
@@ -324,7 +325,7 @@ function getDemoModeGuides(): GuidesContent {
         },
         {
           title: t('Find your broken code'),
-          target: 'stack_trace',
+          target: 'stacktrace',
           description: t(
             `View the stack trace to see the exact sequence of function calls leading to the error in question.`
           ),

diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx
@@ -1,5 +1,4 @@
 import {useCallback, useMemo, useRef, useState} from 'react';
-import {ClassNames} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
@@ -152,48 +151,47 @@ export default function BreadcrumbsDataSection({
   const hasViewAll = summaryCrumbs.length !== enhancedCrumbs.length;
 
   return (
-    <FullWidthGuideAnchor target="breadcrumbs" position="top">
-      <InterimSection
-        key="breadcrumbs"
-        type={SectionKey.BREADCRUMBS}
-        title={t('Breadcrumbs')}
-        data-test-id="breadcrumbs-data-section"
-        actions={actions}
-      >
-        <ErrorBoundary
-          mini
-          message={t('There was an error loading the event breadcrumbs')}
-        >
-          <div ref={setContainer}>
-            <BreadcrumbsTimeline
-              breadcrumbs={summaryCrumbs}
-              startTimeString={startTimeString}
-              // We want the timeline to appear connected to the 'View All' button
-              showLastLine={hasViewAll}
-              fullyExpanded={false}
-              containerElement={container}
-            />
-          </div>
-          {hasViewAll && (
-            <ViewAllContainer>
-              <VerticalEllipsis />
-              <div>
-                <ViewAllButton
-                  size="sm"
-                  // Since we've disabled the button as an 'outside click' for the drawer we can change
-                  // the operation based on the drawer state.
-                  onClick={() => (isDrawerOpen ? closeDrawer() : onViewAllBreadcrumbs())}
-                  aria-label={t('View All Breadcrumbs')}
-                  ref={viewAllButtonRef}
-                >
-                  {t('View All')}
-                </ViewAllButton>
-              </div>
-            </ViewAllContainer>
-          )}
-        </ErrorBoundary>
-      </InterimSection>
-    </FullWidthGuideAnchor>
+    <InterimSection
+      key="breadcrumbs"
+      type={SectionKey.BREADCRUMBS}
+      title={
+        <GuideAnchor target="breadcrumbs" position="top">
+          {t('Breadcrumbs')}
+        </GuideAnchor>
+      }
+      data-test-id="breadcrumbs-data-section"
+      actions={actions}
+    >
+      <ErrorBoundary mini message={t('There was an error loading the event breadcrumbs')}>
+        <div ref={setContainer}>
+          <BreadcrumbsTimeline
+            breadcrumbs={summaryCrumbs}
+            startTimeString={startTimeString}
+            // We want the timeline to appear connected to the 'View All' button
+            showLastLine={hasViewAll}
+            fullyExpanded={false}
+            containerElement={container}
+          />
+        </div>
+        {hasViewAll && (
+          <ViewAllContainer>
+            <VerticalEllipsis />
+            <div>
+              <ViewAllButton
+                size="sm"
+                // Since we've disabled the button as an 'outside click' for the drawer we can change
+                // the operation based on the drawer state.
+                onClick={() => (isDrawerOpen ? closeDrawer() : onViewAllBreadcrumbs())}
+                aria-label={t('View All Breadcrumbs')}
+                ref={viewAllButtonRef}
+              >
+                {t('View All')}
+              </ViewAllButton>
+            </div>
+          </ViewAllContainer>
+        )}
+      </ErrorBoundary>
+    </InterimSection>
   );
 }
 
@@ -223,18 +221,3 @@ const VerticalEllipsis = styled(IconEllipsis)`
 const ViewAllButton = styled(Button)`
   padding: ${space(0.75)} ${space(1)};
 `;
-
-function FullWidthGuideAnchor(props: React.ComponentProps<typeof GuideAnchor>) {
-  return (
-    <ClassNames>
-      {({css: classNamesCss}) => (
-        <GuideAnchor
-          {...props}
-          containerClassName={classNamesCss`
-            width: 100%;
-          `}
-        />
-      )}
-    </ClassNames>
-  );
-}
diff --git a/static/app/components/events/eventDataSection.tsx b/static/app/components/events/eventDataSection.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {DataSection} from 'sentry/components/events/styles';
 import Anchor from 'sentry/components/links/anchor';
 import QuestionTooltip from 'sentry/components/questionTooltip';
@@ -22,11 +21,6 @@ export interface EventDataSectionProps {
    */
   actions?: React.ReactNode;
   className?: string;
-  /**
-   * If the section has a guide associated to it, you may specify the guide
-   * target and it will wrap the title with a GuideAnchor
-   */
-  guideTarget?: string;
   /**
    * A description shown in a QuestionTooltip
    */
@@ -75,21 +69,12 @@ export function EventDataSection({
   title,
   help,
   actions,
-  guideTarget,
   wrapTitle = true,
   showPermalink = true,
   isHelpHoverable = false,
   ...props
 }: EventDataSectionProps) {
-  let titleNode = wrapTitle ? <h3>{title}</h3> : title;
-
-  titleNode = guideTarget ? (
-    <GuideAnchor target={guideTarget} position="bottom">
-      {titleNode}
-    </GuideAnchor>
-  ) : (
-    titleNode
-  );
+  const titleNode = wrapTitle ? <h3>{title}</h3> : title;
 
   return (
     <DataSection ref={scrollToSection} className={className || ''} {...props}>

diff --git a/static/app/components/events/eventTagsAndScreenshot/tags.tsx b/static/app/components/events/eventTagsAndScreenshot/tags.tsx
@@ -1,6 +1,7 @@
 import {forwardRef, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {
@@ -84,14 +85,17 @@ export const EventTagsDataSection = forwardRef<HTMLElement, Props>(
 
     return (
       <StyledEventDataSection
-        title={t('Tags')}
+        title={
+          <GuideAnchor target="tags" position="top">
+            {t('Tags')}
+          </GuideAnchor>
+        }
         help={tct('The searchable tags associated with this event. [link:Learn more]', {
           link: <ExternalLink openInNewTab href={TAGS_DOCS_LINK} />,
         })}
         isHelpHoverable
         actions={actions}
         data-test-id="event-tags"
-        guideTarget="tags"
         type={SectionKey.TAGS}
         ref={ref}
       >

diff --git a/static/app/components/events/interfaces/breadcrumbs/index.tsx b/static/app/components/events/interfaces/breadcrumbs/index.tsx
@@ -318,7 +318,6 @@ function BreadcrumbsContainer({data, event, organization, hideTitle = false}: Pr
       showPermalink={!hideTitle}
       type={SectionKey.BREADCRUMBS}
       title={hideTitle ? '' : t('Breadcrumbs')}
-      guideTarget="breadcrumbs"
       actions={actions}
     >
       <ErrorBoundary>

diff --git a/static/app/components/events/interfaces/crashContent/stackTrace/content.tsx b/static/app/components/events/interfaces/crashContent/stackTrace/content.tsx
@@ -2,7 +2,6 @@ import {cloneElement, Fragment, useState} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import type {FrameSourceMapDebuggerData} from 'sentry/components/events/interfaces/sourceMapsDebuggerModal';
 import Panel from 'sentry/components/panels/panel';
 import {t} from 'sentry/locale';
@@ -308,11 +307,9 @@ function Content({
         data-test-id="stack-trace-content"
         hideIcon={hideIcon}
       >
-        <GuideAnchor target="stack_trace">
-          <StyledList data-test-id="frames">
-            {!newestFirst ? convertedFrames : [...convertedFrames].reverse()}
-          </StyledList>
-        </GuideAnchor>
+        <StyledList data-test-id="frames">
+          {!newestFirst ? convertedFrames : [...convertedFrames].reverse()}
+        </StyledList>
       </StackTraceContentPanel>
     </Wrapper>
   );

diff --git a/static/app/components/events/interfaces/debugMeta/index.tsx b/static/app/components/events/interfaces/debugMeta/index.tsx
@@ -373,7 +373,6 @@ export function DebugMeta({data, projectSlug, groupId, event}: DebugMetaProps) {
   return (
     <InterimSection
       type={SectionKey.DEBUGMETA}
-      guideTarget="images-loaded"
       title={t('Images Loaded')}
       help={t(
         'A list of dynamic libraries or shared objects loaded into process memory at the time of the crash. Images contribute application code that is referenced in stack traces.'

diff --git a/static/app/components/events/traceEventDataSection.tsx b/static/app/components/events/traceEventDataSection.tsx
@@ -362,7 +362,6 @@ export function TraceEventDataSection({
       type={type}
       showPermalink={!hasStreamlinedUI}
       title={title}
-      guideTarget={type}
       actions={
         !stackTraceNotFound && (
           <ButtonBar gap={1}>

diff --git a/static/app/components/group/assignedTo.tsx b/static/app/components/group/assignedTo.tsx
@@ -256,7 +256,7 @@ function AssignedTo({
       <StyledSidebarTitle>
         {t('Assigned To')}
         <Access access={['project:read']}>
-          <GuideAnchor target="issue_sidebar_owners" position="bottom">
+          <GuideAnchor target="issue_sidebar_owners">
             <Button
               onClick={() => {
                 openIssueOwnershipRuleModal({

diff --git a/static/app/views/issueDetails/actions/index.tsx b/static/app/views/issueDetails/actions/index.tsx
@@ -393,21 +393,19 @@ export function Actions(props: Props) {
           </ResolvedActionWapper>
         ) : (
           <Fragment>
-            <GuideAnchor target="resolve" position="bottom" offset={20}>
-              <ResolveActions
-                disableResolveInRelease={!resolveInReleaseCap.enabled}
-                disabled={disabled}
-                disableDropdown={disabled}
-                hasRelease={hasRelease}
-                latestRelease={project.latestRelease}
-                onUpdate={onUpdate}
-                projectSlug={project.slug}
-                isResolved={isResolved}
-                isAutoResolved={isAutoResolved}
-                size="sm"
-                priority="primary"
-              />
-            </GuideAnchor>
+            <ResolveActions
+              disableResolveInRelease={!resolveInReleaseCap.enabled}
+              disabled={disabled}
+              disableDropdown={disabled}
+              hasRelease={hasRelease}
+              latestRelease={project.latestRelease}
+              onUpdate={onUpdate}
+              projectSlug={project.slug}
+              isResolved={isResolved}
+              isAutoResolved={isAutoResolved}
+              size="sm"
+              priority="primary"
+            />
             <ArchiveActions
               className={hasStreamlinedUI ? undefined : 'hidden-xs'}
               size="sm"
@@ -543,9 +541,7 @@ export function Actions(props: Props) {
                 onClick={() => trackIssueAction('open_in_discover')}
                 size="sm"
               >
-                <GuideAnchor target="open_in_discover">
-                  {t('Open in Discover')}
-                </GuideAnchor>
+                {t('Open in Discover')}
               </LinkButton>
             </Feature>
           )}

diff --git a/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx b/static/app/views/issueDetails/groupEventDetails/groupEventDetailsContent.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {usePrompt} from 'sentry/actionCreators/prompts';
 import Feature from 'sentry/components/acl/feature';
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Button} from 'sentry/components/button';
 import {CommitRow} from 'sentry/components/commitRow';
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -248,39 +249,52 @@ export function EventDetailsContent({
           <Message event={event} data={eventEntries[EntryType.MESSAGE].data} />
         </EntryErrorBoundary>
       )}
-      {defined(eventEntries[EntryType.EXCEPTION]) && (
-        <EntryErrorBoundary type={EntryType.EXCEPTION}>
-          <Exception
-            event={event}
-            data={eventEntries[EntryType.EXCEPTION].data}
-            projectSlug={project.slug}
-            group={group}
-            groupingCurrentLevel={groupingCurrentLevel}
-          />
-        </EntryErrorBoundary>
-      )}
-      {issueTypeConfig.stacktrace.enabled &&
-        defined(eventEntries[EntryType.STACKTRACE]) && (
-          <EntryErrorBoundary type={EntryType.STACKTRACE}>
-            <StackTrace
+      {/* Wrapping all stacktrace components since multiple could appear */}
+      <GuideAnchor
+        target="stacktrace"
+        position="top"
+        disabled={
+          !(
+            defined(eventEntries[EntryType.EXCEPTION]) ||
+            defined(eventEntries[EntryType.STACKTRACE]) ||
+            defined(eventEntries[EntryType.THREADS])
+          )
+        }
+      >
+        {defined(eventEntries[EntryType.EXCEPTION]) && (
+          <EntryErrorBoundary type={EntryType.EXCEPTION}>
+            <Exception
               event={event}
-              data={eventEntries[EntryType.STACKTRACE].data}
-              projectSlug={projectSlug}
+              data={eventEntries[EntryType.EXCEPTION].data}
+              projectSlug={project.slug}
+              group={group}
               groupingCurrentLevel={groupingCurrentLevel}
             />
           </EntryErrorBoundary>
         )}
-      {defined(eventEntries[EntryType.THREADS]) && (
-        <EntryErrorBoundary type={EntryType.THREADS}>
-          <Threads
-            event={event}
-            data={eventEntries[EntryType.THREADS].data}
-            projectSlug={project.slug}
-            groupingCurrentLevel={groupingCurrentLevel}
-            group={group}
-          />
-        </EntryErrorBoundary>
-      )}
+        {issueTypeConfig.stacktrace.enabled &&
+          defined(eventEntries[EntryType.STACKTRACE]) && (
+            <EntryErrorBoundary type={EntryType.STACKTRACE}>
+              <StackTrace
+                event={event}
+                data={eventEntries[EntryType.STACKTRACE].data}
+                projectSlug={projectSlug}
+                groupingCurrentLevel={groupingCurrentLevel}
+              />
+            </EntryErrorBoundary>
+          )}
+        {defined(eventEntries[EntryType.THREADS]) && (
+          <EntryErrorBoundary type={EntryType.THREADS}>
+            <Threads
+              event={event}
+              data={eventEntries[EntryType.THREADS].data}
+              projectSlug={project.slug}
+              groupingCurrentLevel={groupingCurrentLevel}
+              group={group}
+            />
+          </EntryErrorBoundary>
+        )}
+      </GuideAnchor>
       {defined(eventEntries[EntryType.DEBUGMETA]) && (
         <EntryErrorBoundary type={EntryType.DEBUGMETA}>
           <DebugMeta