fix(starfish): make analytics optional on detailPanel (#53733)

Add `onOpen` parameter to `detailPanel -> slideOverPanel` so starfish
analytics are triggered when passed in via `onOpen`.

static/app/views/starfish/components/detailPanel.tsx

@@ -13,13 +13,14 @@ type DetailProps = {
   children: React.ReactNode;
   detailKey?: string;
   onClose?: () => void;
+  onOpen?: () => void;
 };
 
 type DetailState = {
   collapsed: boolean;
 };
 
-export default function Detail({children, detailKey, onClose}: DetailProps) {
+export default function Detail({children, detailKey, onClose, onOpen}: DetailProps) {
   const [state, setState] = useState<DetailState>({collapsed: true});
   const escapeKeyPressed = useKeyPress('Escape');
 
@@ -51,7 +52,7 @@ export default function Detail({children, detailKey, onClose}: DetailProps) {
   }, [escapeKeyPressed]);
 
   return (
-    <SlideOverPanel collapsed={state.collapsed} ref={panelRef}>
+    <SlideOverPanel collapsed={state.collapsed} ref={panelRef} onOpen={onOpen}>
       <CloseButtonWrapper>
         <CloseButton
           priority="link"

static/app/views/starfish/components/slideOverPanel.tsx

@@ -3,30 +3,25 @@ import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
 
-import {trackAnalytics} from 'sentry/utils/analytics';
-import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
-
 const PANEL_WIDTH = '50vw';
 
 type SlideOverPanelProps = {
   children: React.ReactNode;
   collapsed: boolean;
+  onOpen?: () => void;
 };
 
 export default forwardRef(SlideOverPanel);
 
 function SlideOverPanel(
-  {collapsed, children}: SlideOverPanelProps,
+  {collapsed, children, onOpen}: SlideOverPanelProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
-  const {query} = useLocation();
-  const organization = useOrganization();
   useEffect(() => {
-    if (!collapsed) {
-      trackAnalytics('starfish.panel.open', {organization});
+    if (!collapsed && onOpen) {
+      onOpen();
     }
-  }, [query, collapsed, organization]);
+  }, [collapsed, onOpen]);
   return (
     <_SlideOverPanel
       ref={ref}

static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx

@@ -2,10 +2,13 @@ import {useCallback, useState} from 'react';
 import debounce from 'lodash/debounce';
 import omit from 'lodash/omit';
 
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {
   PageErrorAlert,
   PageErrorProvider,
 } from 'sentry/utils/performance/contexts/pageError';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
 import DurationChart from 'sentry/views/starfish/views/spanSummaryPage/sampleList/durationChart';
@@ -36,6 +39,9 @@ export function SampleList({groupId, transactionName, transactionMethod}: Props)
     []
   );
 
+  const organization = useOrganization();
+  const {query} = useLocation();
+
   return (
     <PageErrorProvider>
       <DetailPanel
@@ -46,6 +52,11 @@ export function SampleList({groupId, transactionName, transactionMethod}: Props)
             query: omit(router.location.query, 'transaction', 'transactionMethod'),
           });
         }}
+        onOpen={useCallback(() => {
+          if (query.transaction) {
+            trackAnalytics('starfish.panel.open', {organization});
+          }
+        }, [organization, query.transaction])}
       >
         <h3>{`${transactionMethod} ${transactionName}`}</h3>
         <PageErrorAlert />