chore: migrate workflow node title tooltip (#35418)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

eslint-suppressions.json

@@ -6068,9 +6068,6 @@
     }
   },
   "web/app/components/workflow/run/node.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 1
     }

web/app/components/workflow/run/node.tsx

@@ -8,6 +8,7 @@ import type {
   NodeTracing,
 } from '@/types/workflow'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import {
   RiAlertFill,
   RiArrowRightSLine,
@@ -16,9 +17,8 @@ import {
   RiLoader2Line,
   RiPauseCircleFill,
 } from '@remixicon/react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
@@ -68,6 +68,8 @@ const NodePanel: FC<Props> = ({
       return
     doSetCollapseState(state)
   }, [hideProcessDetail])
+  const titleRef = useRef<HTMLDivElement>(null)
+  const [isTitleTruncated, setIsTitleTruncated] = useState(false)
   const { t } = useTranslation()
   const docLink = useDocLink()
 
@@ -92,6 +94,27 @@ const NodePanel: FC<Props> = ({
     setCollapseState(!nodeInfo.expand)
   }, [nodeInfo.expand, setCollapseState])
 
+  useEffect(() => {
+    const titleElement = titleRef.current
+    if (!titleElement)
+      return
+
+    let frameId = 0
+    const updateIsTitleTruncated = () => {
+      setIsTitleTruncated(titleElement.scrollWidth > titleElement.clientWidth)
+    }
+
+    frameId = requestAnimationFrame(updateIsTitleTruncated)
+
+    const resizeObserver = new ResizeObserver(updateIsTitleTruncated)
+    resizeObserver.observe(titleElement)
+
+    return () => {
+      cancelAnimationFrame(frameId)
+      resizeObserver.disconnect()
+    }
+  }, [nodeInfo.title])
+
   const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration && !!nodeInfo.details?.length
   const isLoopNode = nodeInfo.node_type === BlockEnum.Loop && !!nodeInfo.details?.length
   const isRetryNode = hasRetryNode(nodeInfo.node_type) && !!nodeInfo.retryDetail?.length
@@ -132,18 +155,24 @@ const NodePanel: FC<Props> = ({
             />
           )}
           <BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('mr-2 shrink-0', inMessage && 'mr-1!')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
-          <Tooltip
-            popupContent={
-              <div className="max-w-xs">{nodeInfo.title}</div>
-            }
-          >
-            <div className={cn(
+          <Tooltip>
+            <TooltipTrigger
+              disabled={!isTitleTruncated}
+              render={(
+                <div
+                  ref={titleRef}
+                  className={cn(
                     'grow truncate system-xs-semibold-uppercase text-text-secondary',
                     hideInfo && 'text-xs!',
                   )}
                 >
                   {nodeInfo.title}
                 </div>
+              )}
+            />
+            <TooltipContent>
+              <div className="max-w-xs">{nodeInfo.title}</div>
+            </TooltipContent>
           </Tooltip>
           {!['running', 'paused'].includes(nodeInfo.status) && !hideInfo && (
             <div className="shrink-0 system-xs-regular text-text-tertiary">