feat(new-trace): Adding options dropdown menu (#81812)

<img width="1287" alt="Screenshot 2024-12-06 at 1 00 20 PM" src="https://github.com/user-attachments/assets/d3d6519e-12af-4adc-a2fe-134337104cd9"> ------------- <img width="1279" alt="Screenshot 2024-12-06 at 1 00 55 PM" src="https://github.com/user-attachments/assets/e36ac946-1f4f-4122-a284-b45cbd673d80"> --------- Co-authored-by: Abdullah Khan <[email protected]>
getsentry · Dec 8, 2024 · 54b76b4 · 54b76b4
1 parent b6b62df
commit 54b76b4
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 2 deletions.
diff --git a/static/app/views/performance/newTraceDetails/traceActionsMenu.tsx b/static/app/views/performance/newTraceDetails/traceActionsMenu.tsx
@@ -0,0 +1,100 @@
+import {openModal} from 'sentry/actionCreators/modal';
+import {Button} from 'sentry/components/button';
+import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {IconEllipsis} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import type {EventTransaction} from 'sentry/types/event';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import type EventView from 'sentry/utils/discover/eventView';
+import {SavedQueryDatasets} from 'sentry/utils/discover/types';
+import type {UseApiQueryResult} from 'sentry/utils/queryClient';
+import type RequestError from 'sentry/utils/requestError/requestError';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
+import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
+
+import {traceAnalytics} from './traceAnalytics';
+import {getCustomInstrumentationLink} from './traceConfigurations';
+import {TraceShortcutsModal} from './traceShortcutsModal';
+import {useHasTraceNewUi} from './useHasTraceNewUi';
+
+function TraceActionsMenu({
+  rootEventResults,
+  traceEventView,
+}: {
+  rootEventResults: UseApiQueryResult<EventTransaction, RequestError>;
+  traceEventView: EventView;
+}) {
+  const hasTraceNewUi = useHasTraceNewUi();
+  const organization = useOrganization();
+  const {projects} = useProjects();
+  const navigate = useNavigate();
+
+  if (!hasTraceNewUi) {
+    return null;
+  }
+
+  const traceProject = rootEventResults.data
+    ? projects.find(p => p.id === rootEventResults.data.projectID)
+    : undefined;
+
+  return (
+    <DropdownMenu
+      items={[
+        {
+          key: 'trace_events_in_discover_button',
+          label: t('Open Events in Discover'),
+          onAction: () => {
+            trackAnalytics('performance_views.trace_view.open_in_discover', {
+              organization: organization,
+            });
+            const target = traceEventView.getResultsViewUrlTarget(
+              organization.slug,
+              false,
+              hasDatasetSelector(organization)
+                ? SavedQueryDatasets.TRANSACTIONS
+                : undefined
+            );
+            navigate(target);
+          },
+        },
+        {
+          key: 'custom_instrumentation_button',
+          label: t('Add Instrumentation'),
+          onAction: () => {
+            const docsLink = getCustomInstrumentationLink(traceProject);
+            if (docsLink) {
+              window.location.href = docsLink;
+            }
+          },
+        },
+        {
+          key: 'shortcuts_button',
+          label: t('See Shortcuts'),
+          onAction: () => {
+            traceAnalytics.trackViewShortcuts(organization);
+            openModal(props => <TraceShortcutsModal {...props} />);
+          },
+        },
+      ]}
+      trigger={triggerProps => (
+        <Button
+          {...triggerProps}
+          aria-label={t('Discover Context Menu')}
+          size="xs"
+          onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+
+            triggerProps.onClick?.(e);
+          }}
+          icon={<IconEllipsis />}
+        />
+      )}
+      position="bottom-end"
+    />
+  );
+}
+
+export default TraceActionsMenu;
diff --git a/static/app/views/performance/newTraceDetails/traceHeader/index.tsx b/static/app/views/performance/newTraceDetails/traceHeader/index.tsx
@@ -134,7 +134,7 @@ function LegacyTraceMetadataHeader(props: TraceMetadataHeaderProps) {
               props.organization.slug,
               false,
               hasDatasetSelector(props.organization)
-                ? SavedQueryDatasets.ERRORS
+                ? SavedQueryDatasets.TRANSACTIONS
                 : undefined
             )}
             onClick={trackOpenInDiscover}

diff --git a/static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx b/static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx
@@ -10,14 +10,20 @@ import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
 
 import {traceAnalytics} from './traceAnalytics';
+import {useHasTraceNewUi} from './useHasTraceNewUi';
 
 export function TraceShortcuts() {
+  const hasTraceNewUi = useHasTraceNewUi();
   const organization = useOrganization();
   const onOpenShortcutsClick = useCallback(() => {
     traceAnalytics.trackViewShortcuts(organization);
     openModal(props => <TraceShortcutsModal {...props} />);
   }, [organization]);
 
+  if (hasTraceNewUi) {
+    return null;
+  }
+
   return (
     <Button size="xs" onClick={onOpenShortcutsClick} aria-label={t('Trace Shortcuts')}>
       Shortcuts
@@ -37,7 +43,7 @@ const TIMELINE_SHORTCUTS: [string, string][] = [
   [t('Double click'), t('Zoom to fill')],
 ];
 
-function TraceShortcutsModal({Header, Body}: ModalRenderProps) {
+export function TraceShortcutsModal({Header, Body}: ModalRenderProps) {
   return (
     <Fragment>
       <Header closeButton>

diff --git a/static/app/views/performance/newTraceDetails/traceWaterfall.tsx b/static/app/views/performance/newTraceDetails/traceWaterfall.tsx
@@ -64,6 +64,7 @@ import {
   useTraceStateEmitter,
 } from './traceState/traceStateProvider';
 import {Trace} from './trace';
+import TraceActionsMenu from './traceActionsMenu';
 import {traceAnalytics} from './traceAnalytics';
 import {
   isAutogroupedNode,
@@ -789,6 +790,10 @@ export function TraceWaterfall(props: TraceWaterfallProps) {
           organization={props.organization}
         />
         <TraceShortcuts />
+        <TraceActionsMenu
+          rootEventResults={props.rootEvent}
+          traceEventView={props.traceEventView}
+        />
         <TracePreferencesDropdown
           autogroup={
             traceState.preferences.autogroup.parent &&