feat(trace-view): Add an assistive guide to trace view (#25460)

This adds an assistive guide to trace view to show what it can do.

src/sentry/assistant/guides.py

@@ -28,6 +28,10 @@ GUIDES = {
     "release_adoption": {"id": 13, "required_targets": ["release_adoption"]},
     "user_misery": {"id": 14, "required_targets": ["user_misery"]},
     "stack_trace_preview": {"id": 15, "required_targets": ["issue_stream_title"]},
+    "trace_view": {
+        "id": 16,
+        "required_targets": ["trace_view_guide_row", "trace_view_guide_row_details"],
+    },
 }
 
 # demo mode has different guides

static/app/components/assistant/getGuidesContent.tsx

@@ -226,6 +226,33 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'trace_view',
+      requiredTargets: ['trace_view_guide_row', 'trace_view_guide_row_details'],
+      steps: [
+        {
+          title: t('Event Breakdown'),
+          target: 'trace_view_guide_breakdown',
+          description: t(
+            `The event breakdown shows you the breakdown of event types within a trace.`
+          ),
+        },
+        {
+          title: t('Transactions'),
+          target: 'trace_view_guide_row',
+          description: t(
+            `Get an overview of every transaction. You can quickly see the all the transactions in a trace alongside the project, transaction duration, and any related errors.`
+          ),
+        },
+        {
+          title: t('Transactions Details'),
+          target: 'trace_view_guide_row_details',
+          description: t(
+            `Click on any transaction to get see more details and even go to its transaction details.`
+          ),
+        },
+      ],
+    },
   ];
 }
 

static/app/views/performance/traceDetails/content.tsx

@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 import {Location} from 'history';
 
 import Alert from 'app/components/alert';
+import GuideAnchor from 'app/components/assistant/guideAnchor';
 import ButtonBar from 'app/components/buttonBar';
 import DiscoverFeature from 'app/components/discover/discoverFeature';
 import DiscoverButton from 'app/components/discoverButton';
@@ -197,25 +198,27 @@ class TraceDetailsContent extends React.Component<Props, State> {
     const {meta} = this.props;
     return (
       <TraceDetailHeader>
-        <MetaData
-          headingText={t('Event Breakdown')}
-          tooltipText={t(
-            'The number of transactions and errors there are in this trace.'
-          )}
-          bodyText={tct('[transactions]  |  [errors]', {
-            transactions: tn(
-              '%s Transaction',
-              '%s Transactions',
-              meta?.transactions ?? traceInfo.transactions.size
-            ),
-            errors: tn('%s Error', '%s Errors', meta?.errors ?? traceInfo.errors.size),
-          })}
-          subtext={tn(
-            'Across %s project',
-            'Across %s projects',
-            meta?.projects ?? traceInfo.projects.size
-          )}
-        />
+        <GuideAnchor target="trace_view_guide_breakdown">
+          <MetaData
+            headingText={t('Event Breakdown')}
+            tooltipText={t(
+              'The number of transactions and errors there are in this trace.'
+            )}
+            bodyText={tct('[transactions]  |  [errors]', {
+              transactions: tn(
+                '%s Transaction',
+                '%s Transactions',
+                meta?.transactions ?? traceInfo.transactions.size
+              ),
+              errors: tn('%s Error', '%s Errors', meta?.errors ?? traceInfo.errors.size),
+            })}
+            subtext={tn(
+              'Across %s project',
+              'Across %s projects',
+              meta?.projects ?? traceInfo.projects.size
+            )}
+          />
+        </GuideAnchor>
         <MetaData
           headingText={t('Total Duration')}
           tooltipText={t('The time elapsed between the start and end of this trace.')}
@@ -357,6 +360,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
       index,
       numberOfHiddenTransactionsAbove,
       traceInfo,
+      hasGuideAnchor,
     }: {
       continuingDepths: TreeDepth[];
       isOrphan: boolean;
@@ -364,6 +368,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
       index: number;
       numberOfHiddenTransactionsAbove: number;
       traceInfo: TraceInfo;
+      hasGuideAnchor: boolean;
     }
   ) {
     const {location, organization} = this.props;
@@ -388,6 +393,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
           index: acc.lastIndex + 1,
           numberOfHiddenTransactionsAbove: acc.numberOfHiddenTransactionsAbove,
           traceInfo,
+          hasGuideAnchor: false,
         });
 
         acc.lastIndex = result.lastIndex;
@@ -425,6 +431,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
             isLast={isLast}
             index={index}
             isVisible={isVisible}
+            hasGuideAnchor={hasGuideAnchor}
             renderedChildren={accumulated.renderedChildren}
             barColour={pickBarColour(transaction['transaction.op'])}
           />
@@ -476,6 +483,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
             !isLastTransaction && hasChildren
               ? [{depth: 0, isOrphanDepth: isNextChildOrphaned}]
               : [],
+          hasGuideAnchor: true,
         });
 
         acc.index = result.lastIndex + 1;
@@ -539,6 +547,7 @@ class TraceDetailsContent extends React.Component<Props, State> {
                       isLast={false}
                       index={0}
                       isVisible
+                      hasGuideAnchor={false}
                       renderedChildren={transactionGroups}
                       barColour={pickBarColour('')}
                     />

static/app/views/performance/traceDetails/transactionBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Location} from 'history';
 
+import GuideAnchor from 'app/components/assistant/guideAnchor';
 import Count from 'app/components/count';
 import * as DividerHandlerManager from 'app/components/events/interfaces/spans/dividerHandlerManager';
 import * as ScrollbarManager from 'app/components/events/interfaces/spans/scrollbarManager';
@@ -53,6 +54,7 @@ type Props = {
   continuingDepths: TreeDepth[];
   isExpanded: boolean;
   isVisible: boolean;
+  hasGuideAnchor: boolean;
   toggleExpandedState: () => void;
   barColour?: string;
 };
@@ -370,7 +372,7 @@ class TransactionBar extends React.Component<Props, State> {
     dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps;
     scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps;
   }) {
-    const {index} = this.props;
+    const {hasGuideAnchor, index} = this.props;
     const {showDetail} = this.state;
     const {dividerPosition} = dividerHandlerChildrenProps;
 
@@ -386,7 +388,9 @@ class TransactionBar extends React.Component<Props, State> {
           showDetail={showDetail}
           onClick={this.toggleDisplayDetail}
         >
-          {this.renderTitle(scrollbarManagerChildrenProps)}
+          <GuideAnchor target="trace_view_guide_row" disabled={!hasGuideAnchor}>
+            {this.renderTitle(scrollbarManagerChildrenProps)}
+          </GuideAnchor>
         </RowCell>
         <DividerContainer>
           {this.renderDivider(dividerHandlerChildrenProps)}
@@ -403,7 +407,9 @@ class TransactionBar extends React.Component<Props, State> {
           showDetail={showDetail}
           onClick={this.toggleDisplayDetail}
         >
-          {this.renderRectangle()}
+          <GuideAnchor target="trace_view_guide_row_details" disabled={!hasGuideAnchor}>
+            {this.renderRectangle()}
+          </GuideAnchor>
         </RowCell>
         {!showDetail && this.renderGhostDivider(dividerHandlerChildrenProps)}
       </RowCellContainer>

static/app/views/performance/traceDetails/transactionGroup.tsx

@@ -17,6 +17,7 @@ type Props = {
   isLast: boolean;
   index: number;
   isVisible: boolean;
+  hasGuideAnchor: boolean;
   renderedChildren: React.ReactNode[];
   barColour?: string;
 };
@@ -45,6 +46,7 @@ class TransactionGroup extends React.Component<Props, State> {
       isLast,
       index,
       isVisible,
+      hasGuideAnchor,
       renderedChildren,
       barColour,
     } = this.props;
@@ -64,6 +66,7 @@ class TransactionGroup extends React.Component<Props, State> {
           isExpanded={isExpanded}
           toggleExpandedState={this.toggleExpandedState}
           isVisible={isVisible}
+          hasGuideAnchor={hasGuideAnchor}
           barColour={barColour}
         />
         {isExpanded && renderedChildren}