fix(performance-trace-view): Fixed row divider bug and hid duration bar in ONLY error case. (#55775)

This PR hides the duration bar from the root trace in the ONLY errors
case and fixes row divider drag bug.

Can't drag the divider when on an error row:


https://github.com/getsentry/sentry/assets/60121741/b86df6de-7f6f-4c7c-b61b-25433bf153b9



Connected project: [Tracing w/o performance
](https://www.notion.so/sentry/Performance-views-for-tracing-without-performance-only-errors-bd68d3d84df34bd89c0ae8bc32827c98)

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

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

@@ -147,6 +147,7 @@ export default function TraceView({
     description: 'trace-view-content',
   });
   const hasOrphanErrors = orphanErrors && orphanErrors.length > 0;
+  const onlyOrphanErrors = hasOrphanErrors && (!traces || traces.length === 0);
 
   useEffect(() => {
     trackAnalytics('performance_views.trace_view.view', {
@@ -440,6 +441,7 @@ export default function TraceView({
                     hasGuideAnchor={false}
                     renderedChildren={transactionGroups}
                     barColor={pickBarColor('')}
+                    onlyOrphanErrors={onlyOrphanErrors}
                     numOfOrphanErrors={orphanErrors?.length}
                   />
                   <TraceHiddenMessage

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

@@ -1,4 +1,5 @@
 import {Component, createRef, Fragment} from 'react';
+import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
@@ -88,6 +89,7 @@ type Props = {
   isOrphanError?: boolean;
   measurements?: Map<number, VerticalMark>;
   numOfOrphanErrors?: number;
+  onlyOrphanErrors?: boolean;
 };
 
 type State = {
@@ -126,11 +128,11 @@ class TransactionBar extends Component<Props, State> {
   transactionTitleRef = createRef<HTMLDivElement>();
   spanContentRef: HTMLDivElement | null = null;
 
-  toggleDisplayDetail = () => {
-    const {transaction} = this.props;
+  handleRowCellClick = () => {
+    const {transaction, organization} = this.props;
 
     if (isTraceError(transaction)) {
-      return;
+      browserHistory.push(generateIssueEventTarget(transaction, organization));
     }
 
     if (isTraceTransaction<TraceFullDetailed>(transaction)) {
@@ -560,11 +562,12 @@ class TransactionBar extends Component<Props, State> {
     dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps;
     scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps;
   }) {
-    const {hasGuideAnchor, index, transaction, organization} = this.props;
+    const {hasGuideAnchor, index, transaction, onlyOrphanErrors = false} = this.props;
     const {showDetail} = this.state;
     const {dividerPosition} = dividerHandlerChildrenProps;
+    const hideDurationRectangle = isTraceRoot(transaction) && onlyOrphanErrors;
 
-    const rowcellContainer = (
+    return (
       <RowCellContainer showDetail={showDetail}>
         <RowCell
           data-test-id="transaction-row-title"
@@ -574,7 +577,7 @@ class TransactionBar extends Component<Props, State> {
             paddingTop: 0,
           }}
           showDetail={showDetail}
-          onClick={this.toggleDisplayDetail}
+          onClick={this.handleRowCellClick}
           ref={this.transactionTitleRef}
         >
           <GuideAnchor target="trace_view_guide_row" disabled={!hasGuideAnchor}>
@@ -594,25 +597,17 @@ class TransactionBar extends Component<Props, State> {
             overflow: 'visible',
           }}
           showDetail={showDetail}
-          onClick={this.toggleDisplayDetail}
+          onClick={this.handleRowCellClick}
         >
           <RowReplayTimeIndicators />
           <GuideAnchor target="trace_view_guide_row_details" disabled={!hasGuideAnchor}>
-            {this.renderRectangle()}
+            {!hideDurationRectangle && this.renderRectangle()}
             {this.renderMeasurements()}
           </GuideAnchor>
         </RowCell>
         {!showDetail && this.renderGhostDivider(dividerHandlerChildrenProps)}
       </RowCellContainer>
     );
-
-    return isTraceError(transaction) ? (
-      <Link to={generateIssueEventTarget(transaction, organization)}>
-        {rowcellContainer}
-      </Link>
-    ) : (
-      rowcellContainer
-    );
   }
 
   scrollIntoView = () => {

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

@@ -33,6 +33,7 @@ type Props = ScrollbarManagerChildrenProps & {
   isOrphanError?: boolean;
   measurements?: Map<number, VerticalMark>;
   numOfOrphanErrors?: number;
+  onlyOrphanErrors?: boolean;
 };
 
 type State = {
@@ -74,6 +75,7 @@ class TransactionGroup extends Component<Props, State> {
       measurements,
       generateBounds,
       numOfOrphanErrors,
+      onlyOrphanErrors,
       isOrphanError,
     } = this.props;
     const {isExpanded} = this.state;
@@ -99,6 +101,7 @@ class TransactionGroup extends Component<Props, State> {
           addContentSpanBarRef={addContentSpanBarRef}
           removeContentSpanBarRef={removeContentSpanBarRef}
           onWheel={onWheel}
+          onlyOrphanErrors={onlyOrphanErrors}
           numOfOrphanErrors={numOfOrphanErrors}
           isOrphanError={isOrphanError}
         />