feat(trace): Don't open txn on open (#63460)

- This updates the trace view so we dont open the linked transaction on
pageload
- Whether the panel is open or not is encoded into the URL that way if a
link is shared the panel state is preserved

static/app/components/events/interfaces/spans/newTraceDetailsSpanBar.tsx

@@ -61,6 +61,7 @@ import {
 } from 'sentry/utils/performance/quickTrace/types';
 import {isTraceTransaction} from 'sentry/utils/performance/quickTrace/utils';
 import {PerformanceInteraction} from 'sentry/utils/performanceForSentry';
+import {decodeScalar} from 'sentry/utils/queryString';
 import {StyledZoomIcon} from 'sentry/views/performance/traceDetails/newTraceDetailsTransactionBar';
 import {ProfileContext} from 'sentry/views/profiling/profilesProvider';
 
@@ -783,8 +784,17 @@ export class NewTraceDetailsSpanBar extends Component<
   }
 
   getSpanDetailsProps() {
-    const {span, organization, event, isRoot, trace, resetCellMeasureCache, quickTrace} =
-      this.props;
+    const {
+      span,
+      organization,
+      event,
+      isRoot,
+      trace,
+      resetCellMeasureCache,
+      quickTrace,
+      location,
+    } = this.props;
+    const openPanel = decodeScalar(location.query.openPanel);
     const errors = this.getRelatedErrors(quickTrace);
     const transactions = this.getChildTransactions(quickTrace);
 
@@ -793,6 +803,7 @@ export class NewTraceDetailsSpanBar extends Component<
       organization,
       event: event as EventTransaction,
       isRoot: !!isRoot,
+      openPanel,
       trace,
       childTransactions: transactions,
       relatedErrors: errors,
@@ -805,15 +816,20 @@ export class NewTraceDetailsSpanBar extends Component<
     const {span, event, location, markAnchoredSpanIsMounted} = this.props;
     const spanDetailProps = this.getSpanDetailsProps();
     if (this.props.onRowClick && !isGapSpan(span)) {
-      this.props.onRowClick(spanDetailProps);
       markAnchoredSpanIsMounted?.();
       const isTransactionEvent = event.type === EventOrGroupType.TRANSACTION;
       if (isTransactionEvent) {
         browserHistory.push({
           ...location,
           hash: `${transactionTargetHash(event.eventID)}${spanTargetHash(span.span_id)}`,
+          query: {
+            ...location.query,
+            openPanel: 'open',
+          },
         });
+        spanDetailProps.openPanel = 'open';
       }
+      this.props.onRowClick(spanDetailProps);
     }
   }
   renderHeader({

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -87,6 +87,7 @@ export type SpanDetailProps = {
   childTransactions: QuickTraceEvent[] | null;
   event: Readonly<EventTransaction>;
   isRoot: boolean;
+  openPanel: string | undefined;
   organization: Organization;
   relatedErrors: TraceErrorOrIssue[] | null;
   resetCellMeasureCache: () => void;

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

@@ -1,6 +1,7 @@
 import {Fragment, useMemo, useState} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
+import omit from 'lodash/omit';
 
 import {Alert} from 'sentry/components/alert';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
@@ -70,6 +71,7 @@ export enum TraceType {
 
 export type EventDetail = {
   event: EventTransaction | undefined;
+  openPanel: string | undefined;
   traceFullDetailedEvent: TraceFullDetailed;
 };
 
@@ -409,6 +411,9 @@ function NewTraceDetailsContent(props: Props) {
             router.replace({
               ...location,
               hash: undefined,
+              query: {
+                ...omit(location.query, 'openPanel'),
+              },
             });
             setDetail(undefined);
           }}

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

@@ -72,6 +72,7 @@ import {
 } from 'sentry/utils/performance/quickTrace/utils';
 import Projects from 'sentry/utils/projects';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import {decodeScalar} from 'sentry/utils/queryString';
 import useRouter from 'sentry/utils/useRouter';
 import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
 import {ProfileContext, ProfilesProvider} from 'sentry/views/profiling/profilesProvider';
@@ -114,6 +115,7 @@ type Props = {
 
 function NewTraceDetailsTransactionBar(props: Props) {
   const hashValues = parseTraceDetailsURLHash(props.location.hash);
+  const openPanel = decodeScalar(props.location.query.openPanel);
   const eventIDInQueryParam = !!(
     isTraceTransaction(props.transaction) &&
     hashValues?.eventId &&
@@ -251,10 +253,11 @@ function NewTraceDetailsTransactionBar(props: Props) {
         props.onRowClick({
           traceFullDetailedEvent: props.transaction,
           event: embeddedChildren,
+          openPanel,
         });
       }
     }
-  }, [isHighlighted, embeddedChildren, props, props.transaction]);
+  }, [isHighlighted, embeddedChildren, props, props.transaction, openPanel]);
 
   const renderEmbeddedChildrenState = () => {
     if (showEmbeddedChildren) {
@@ -290,6 +293,10 @@ function NewTraceDetailsTransactionBar(props: Props) {
       router.replace({
         ...location,
         hash: transactionTargetHash(transaction.event_id),
+        query: {
+          ...location.query,
+          openPanel: 'open',
+        },
       });
     }
   };

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

@@ -535,7 +535,10 @@ function TraceViewDetailPanel({detail, onClose}: DetailPanelProps) {
   const location = useLocation();
   return (
     <PageErrorProvider>
-      <DetailPanel detailKey={detail ? 'open' : undefined} onClose={onClose}>
+      <DetailPanel
+        detailKey={detail && detail.openPanel === 'open' ? 'open' : undefined}
+        onClose={onClose}
+      >
         {detail &&
           (isEventDetail(detail) ? (
             <EventDetails