attempting to get tab switching working

static/app/views/performance/newTraceDetails/traceDrawer/tabs/traceTreeNodeDetails.tsx

@@ -1,5 +1,4 @@
 import type {Organization} from 'sentry/types/organization';
-import {TraceIntroductionView} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/traceIntroductionView';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
 import {
@@ -28,8 +27,6 @@ export interface TraceTreeNodeDetailsProps<T> {
 }
 
 export function TraceTreeNodeDetails(props: TraceTreeNodeDetailsProps<any>) {
-  return <TraceIntroductionView />;
-
   if (isTransactionNode(props.node)) {
     return <TransactionNodeDetails {...props} />;
   }

static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx

@@ -20,6 +20,7 @@ import {useInfiniteApiQuery} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import {TraceIntroductionView} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/traceIntroductionView';
 import type {ReplayRecord} from 'sentry/views/replays/types';
 
 import {traceAnalytics} from '../traceAnalytics';
@@ -443,6 +444,8 @@ export function TraceDrawer(props: TraceDrawerProps) {
                     tree={props.trace}
                     onScrollToNode={props.onScrollToNode}
                   />
+                ) : traceState.tabs.current_tab.node === 'help' ? (
+                  <TraceIntroductionView />
                 ) : (
                   <TraceTreeNodeDetails
                     replay={props.replay}

static/app/views/performance/newTraceDetails/traceGuards.tsx

@@ -72,6 +72,12 @@ export function isTraceNode(
   );
 }
 
+export function isHelpNode(
+  node: TraceTreeNode<TraceTree.NodeValue>
+): node is TraceTreeNode<TraceTree.Help> {
+  return !!(node.value && 'type' in node.value && node.value.type === 'help');
+}
+
 export function shouldAddMissingInstrumentationSpan(sdk: string | undefined): boolean {
   if (!sdk) {
     return true;

static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx

@@ -137,6 +137,10 @@ export declare namespace TraceTree {
   };
   type Root = null;
 
+  interface Help {
+    type: 'help';
+  }
+
   // All possible node value types
   type NodeValue =
     | Trace
@@ -147,8 +151,8 @@ export declare namespace TraceTree {
     | SiblingAutogroup
     | ChildrenAutogroup
     | CollapsedNode
-    | Root;
-
+    | Root
+    | Help;
   interface CollapsedNode {
     type: 'collapsed';
   }

static/app/views/performance/newTraceDetails/traceState/traceTabs.tsx

@@ -4,6 +4,7 @@ import {t} from 'sentry/locale';
 
 import {
   isAutogroupedNode,
+  isHelpNode,
   isMissingInstrumentationNode,
   isSpanNode,
   isTraceErrorNode,
@@ -42,12 +43,16 @@ export function getTraceTabTitle(node: TraceTreeNode<TraceTree.NodeValue>) {
     return t('Trace');
   }
 
+  if (isHelpNode(node)) {
+    return t('Help');
+  }
+
   Sentry.captureMessage('Unknown node type in trace drawer');
   return 'Unknown';
 }
 
 type Tab = {
-  node: TraceTreeNode<TraceTree.NodeValue> | 'trace' | 'profiles' | 'vitals';
+  node: TraceTreeNode<TraceTree.NodeValue> | 'trace' | 'profiles' | 'vitals' | 'help';
   label?: string;
 };
 

static/app/views/performance/newTraceDetails/traceWaterfall.tsx

@@ -97,6 +97,11 @@ const VITALS_TAB: TraceReducerState['tabs']['tabs'][0] = {
   label: t('Vitals'),
 };
 
+const HELP_TAB: TraceReducerState['tabs']['tabs'][0] = {
+  node: 'help',
+  label: t('Help'),
+};
+
 export interface TraceWaterfallProps {
   meta: TraceMetaQueryResults;
   organization: Organization;
@@ -204,9 +209,11 @@ export function TraceWaterfall(props: TraceWaterfallProps) {
       return;
     }
 
-    // New trace UI has the trace info and web vitalsin the bottom drawer
+    // New trace UI has the trace info and web vitals in the bottom drawer
     const newTabs = hasTraceNewUi ? [] : [TRACE_TAB];
 
+    newTabs.push(HELP_TAB);
+
     if (props.tree.vitals.size > 0 && !hasTraceNewUi) {
       const types = Array.from(props.tree.vital_types.values());
       const label = types.length > 1 ? t('Vitals') : capitalize(types[0]) + ' Vitals';