Browse Source

ref(profiling): make panel item handle disclosure handler (#45523)

## Summary
Simple change to make the Slowest Transactions Panel items handle the
`onOpen` action. Navigating is reserved to explicitly clicking on the
link.


https://user-images.githubusercontent.com/7349258/223767223-2d5a8fbe-09d5-415e-a708-b010364681f7.mov
Elias Hussary 2 years ago
parent
commit
2296d63613

+ 28 - 16
static/app/views/profiling/landing/profilingSlowestTransactionsPanel.tsx

@@ -148,24 +148,36 @@ function SlowestTransactionPanelItem({
     <PanelItem key={transaction.transaction}>
       <Flex justify="space-between" gap={space(1)}>
         <PlatformIcon platform={transactionProject?.platform ?? 'default'} />
-        <Flex.Item grow={1}>
-          <Link
-            to={generateProfileSummaryRouteWithQuery({
-              orgSlug: organization.slug,
-              projectSlug: transactionProject?.slug!,
-              transaction: transaction.transaction as string,
-            })}
-            onClick={() => {
-              trackAdvancedAnalyticsEvent('profiling_views.go_to_transaction', {
-                source: 'slowest_transaction_panel',
-                organization,
-              });
+        <Flex.Item
+          grow={1}
+          onClick={onOpen}
+          css={{
+            cursor: 'pointer',
+          }}
+        >
+          <div
+            css={{
+              maxWidth: 'fit-content',
             }}
           >
-            <TextTruncateOverflow>
-              {transaction.transaction as string}
-            </TextTruncateOverflow>
-          </Link>
+            <Link
+              to={generateProfileSummaryRouteWithQuery({
+                orgSlug: organization.slug,
+                projectSlug: transactionProject?.slug!,
+                transaction: transaction.transaction as string,
+              })}
+              onClick={() => {
+                trackAdvancedAnalyticsEvent('profiling_views.go_to_transaction', {
+                  source: 'slowest_transaction_panel',
+                  organization,
+                });
+              }}
+            >
+              <TextTruncateOverflow>
+                {transaction.transaction as string}
+              </TextTruncateOverflow>
+            </Link>
+          </div>
         </Flex.Item>
 
         <PerformanceDuration