ref(ui): Extract STACKTRACE_PREVIEW_TOOLTIP_DELAY to a global constant (#39426)

static/app/components/events/interfaces/frame/defaultTitle/index.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 
 import {AnnotatedText} from 'sentry/components/events/meta/annotatedText';
 import ExternalLink from 'sentry/components/links/externalLink';
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
 import Tooltip from 'sentry/components/tooltip';
 import Truncate from 'sentry/components/truncate';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconOpen, IconQuestion} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -40,7 +40,7 @@ const DefaultTitle = ({
 }: Props) => {
   const title: Array<React.ReactElement> = [];
   const framePlatform = getPlatform(frame.platform, platform);
-  const tooltipDelay = isHoverPreviewed ? STACKTRACE_PREVIEW_TOOLTIP_DELAY : undefined;
+  const tooltipDelay = isHoverPreviewed ? SLOW_TOOLTIP_DELAY : undefined;
 
   const handleExternalLink = (event: React.MouseEvent<HTMLAnchorElement>) => {
     event.stopPropagation();

static/app/components/events/interfaces/frame/line.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import scrollToElement from 'scroll-to-element';
 
 import Button from 'sentry/components/button';
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
 import StrictClick from 'sentry/components/strictClick';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconChevron, IconRefresh} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import DebugMetaStore from 'sentry/stores/debugMetaStore';
@@ -190,9 +190,7 @@ export class Line extends Component<Props, State> {
           css={isDotnet(this.getPlatform()) && {display: 'block !important'}} // remove important once we get rid of css files
           size="zero"
           title={t('Toggle Context')}
-          tooltipProps={
-            isHoverPreviewed ? {delay: STACKTRACE_PREVIEW_TOOLTIP_DELAY} : undefined
-          }
+          tooltipProps={isHoverPreviewed ? {delay: SLOW_TOOLTIP_DELAY} : undefined}
           onClick={this.toggleContext}
         >
           <IconChevron direction={isExpanded ? 'up' : 'down'} size="8px" />

static/app/components/events/interfaces/frame/lineV2/expander.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconChevron} from 'sentry/icons/iconChevron';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -34,9 +34,7 @@ function Expander({
       css={isDotnet(platform) && {display: 'block !important'}} // remove important once we get rid of css files
       size="zero"
       title={t('Toggle Context')}
-      tooltipProps={
-        isHoverPreviewed ? {delay: STACKTRACE_PREVIEW_TOOLTIP_DELAY} : undefined
-      }
+      tooltipProps={isHoverPreviewed ? {delay: SLOW_TOOLTIP_DELAY} : undefined}
       onClick={onToggleContext}
     >
       <IconChevron direction={isExpanded ? 'up' : 'down'} size="8px" />

static/app/components/events/interfaces/frame/packageLink.tsx

@@ -2,8 +2,8 @@ import {Component} from 'react';
 import styled from '@emotion/styled';
 
 import {trimPackage} from 'sentry/components/events/interfaces/frame/utils';
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
 import Tooltip from 'sentry/components/tooltip';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import space from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 
@@ -48,7 +48,7 @@ class PackageLink extends Component<Props> {
         {defined(packagePath) ? (
           <Tooltip
             title={packagePath}
-            delay={isHoverPreviewed ? STACKTRACE_PREVIEW_TOOLTIP_DELAY : undefined}
+            delay={isHoverPreviewed ? SLOW_TOOLTIP_DELAY : undefined}
           >
             <PackageName
               isClickable={isClickable}

static/app/components/events/interfaces/frame/symbol.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
 import Tooltip from 'sentry/components/tooltip';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconFilter} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -56,7 +56,7 @@ const Symbol = ({
   const [hint, hintIcon] = getFrameHint(frame);
   const enablePathTooltip = defined(frame.absPath) && frame.absPath !== frame.filename;
   const functionNameTooltipTitle = getFunctionNameTooltipTitle();
-  const tooltipDelay = isHoverPreviewed ? STACKTRACE_PREVIEW_TOOLTIP_DELAY : undefined;
+  const tooltipDelay = isHoverPreviewed ? SLOW_TOOLTIP_DELAY : undefined;
 
   return (
     <Wrapper className={className}>

static/app/components/events/interfaces/frame/togglableAddress.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
 import Tooltip from 'sentry/components/tooltip';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconFilter} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -69,7 +69,7 @@ function TogglableAddress({
 
   const formattedAddress = !relativeAddress || isAbsolute ? address : relativeAddress;
   const tooltipTitle = getAddressTooltip();
-  const tooltipDelay = isHoverPreviewed ? STACKTRACE_PREVIEW_TOOLTIP_DELAY : undefined;
+  const tooltipDelay = isHoverPreviewed ? SLOW_TOOLTIP_DELAY : undefined;
 
   return (
     <Wrapper className={className}>

static/app/components/events/interfaces/nativeFrame.tsx

@@ -16,9 +16,9 @@ import {
 import {formatAddress, parseAddress} from 'sentry/components/events/interfaces/utils';
 import {AnnotatedText} from 'sentry/components/events/meta/annotatedText';
 import {TraceEventDataSectionContext} from 'sentry/components/events/traceEventDataSection';
-import {STACKTRACE_PREVIEW_TOOLTIP_DELAY} from 'sentry/components/stacktracePreview';
 import StrictClick from 'sentry/components/strictClick';
 import Tooltip from 'sentry/components/tooltip';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconChevron} from 'sentry/icons/iconChevron';
 import {IconInfo} from 'sentry/icons/iconInfo';
 import {IconQuestion} from 'sentry/icons/iconQuestion';
@@ -92,7 +92,7 @@ function NativeFrame({
   const absoluteFilePaths =
     traceEventDataSectionContext?.display.includes('absolute-file-paths');
 
-  const tooltipDelay = isHoverPreviewed ? STACKTRACE_PREVIEW_TOOLTIP_DELAY : undefined;
+  const tooltipDelay = isHoverPreviewed ? SLOW_TOOLTIP_DELAY : undefined;
   const foundByStackScanning = frame.trust === 'scan' || frame.trust === 'cfi-scan';
   const startingAddress = image ? image.image_addr : null;
   const packageClickable =
@@ -329,9 +329,7 @@ function NativeFrame({
                 css={isDotnet(platform) && {display: 'block !important'}} // remove important once we get rid of css files
                 title={t('Toggle Context')}
                 aria-label={t('Toggle Context')}
-                tooltipProps={
-                  isHoverPreviewed ? {delay: STACKTRACE_PREVIEW_TOOLTIP_DELAY} : undefined
-                }
+                tooltipProps={isHoverPreviewed ? {delay: SLOW_TOOLTIP_DELAY} : undefined}
                 icon={<IconChevron size="8px" direction={expanded ? 'up' : 'down'} />}
               />
             )}

static/app/components/stacktracePreview.tsx

@@ -22,8 +22,6 @@ import getThreadStacktrace from './events/interfaces/threads/threadSelector/getT
 const REQUEST_DELAY = 100;
 const HOVERCARD_CONTENT_DELAY = 400;
 
-export const STACKTRACE_PREVIEW_TOOLTIP_DELAY = 1000;
-
 function getStacktrace(event: Event): StacktraceType | null {
   const exceptionsWithStacktrace =
     event.entries

static/app/constants/index.tsx

@@ -185,6 +185,8 @@ export const AVATAR_URL_MAP = {
 
 export const MENU_CLOSE_DELAY = 200;
 
+export const SLOW_TOOLTIP_DELAY = 1000;
+
 export const MAX_PICKABLE_DAYS = 90;
 
 export const DEFAULT_STATS_PERIOD = '14d';

static/app/views/issueList/header.tsx

@@ -8,6 +8,7 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import Link from 'sentry/components/links/link';
 import QueryCount from 'sentry/components/queryCount';
 import Tooltip from 'sentry/components/tooltip';
+import {SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {IconPause, IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -109,7 +110,7 @@ function IssueListHeader({
                     title={tooltipTitle}
                     position="bottom"
                     isHoverable={tooltipHoverable}
-                    delay={1000}
+                    delay={SLOW_TOOLTIP_DELAY}
                   >
                     {queryName}{' '}
                     {queryCounts[tabQuery]?.count > 0 && (