fix: improve test run menu and checklist ui (#25300)

web/app/components/workflow/header/checklist.tsx

@@ -119,8 +119,8 @@ const WorkflowChecklist = ({
                             <span className='grow truncate'>
                               {node.title}
                             </span>
-                            <div className='flex h-4 w-[50px] items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
-                              <span className='text-xs font-medium leading-4 text-primary-600'>
+                            <div className='flex h-4 w-[60px] shrink-0 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
+                              <span className='whitespace-nowrap text-xs font-medium leading-4 text-primary-600'>
                                 {t('workflow.panel.goTo')}
                               </span>
                               <IconR className='h-3.5 w-3.5 text-primary-600' />

web/app/components/workflow/header/run-and-history.tsx

@@ -16,8 +16,8 @@ import {
 import { WorkflowRunningStatus } from '../types'
 import ViewHistory from './view-history'
 import Checklist from './checklist'
-import TestRunDropdown, { type TestRunDropdownRef } from './test-run-dropdown'
-import type { TriggerOption } from './test-run-dropdown'
+import TestRunMenu, { type TestRunMenuRef } from './test-run-menu'
+import type { TriggerOption } from './test-run-menu'
 import { useDynamicTestRunOptions } from '../hooks/use-dynamic-test-run-options'
 import cn from '@/utils/classnames'
 import {
@@ -36,12 +36,12 @@ const RunMode = memo(() => {
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
   const dynamicOptions = useDynamicTestRunOptions()
-  const testRunDropdownRef = useRef<TestRunDropdownRef>(null)
+  const testRunMenuRef = useRef<TestRunMenuRef>(null)
 
   useEffect(() => {
     // @ts-expect-error - Dynamic property for backward compatibility with keyboard shortcuts
     window._toggleTestRunDropdown = () => {
-      testRunDropdownRef.current?.toggle()
+      testRunMenuRef.current?.toggle()
     }
     return () => {
       // @ts-expect-error - Dynamic property cleanup
@@ -89,8 +89,8 @@ const RunMode = memo(() => {
             </div>
           )
           : (
-            <TestRunDropdown
-              ref={testRunDropdownRef}
+            <TestRunMenu
+              ref={testRunMenuRef}
               options={dynamicOptions}
               onSelect={handleTriggerSelect}
             >
@@ -105,7 +105,7 @@ const RunMode = memo(() => {
                 {t('workflow.common.run')}
                 <ShortcutsName keys={['alt', 'r']} className="ml-1" textColor="secondary" />
               </div>
-            </TestRunDropdown>
+            </TestRunMenu>
           )
       }
       {

web/app/components/workflow/header/test-run-menu.tsx

@@ -22,17 +22,17 @@ export type TestRunOptions = {
   runAll?: TriggerOption
 }
 
-type TestRunDropdownProps = {
+type TestRunMenuProps = {
   options: TestRunOptions
   onSelect: (option: TriggerOption) => void
   children: React.ReactNode
 }
 
-export type TestRunDropdownRef = {
+export type TestRunMenuRef = {
   toggle: () => void
 }
 
-const TestRunDropdown = forwardRef<TestRunDropdownRef, TestRunDropdownProps>(({
+const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(({
   options,
   onSelect,
   children,
@@ -107,6 +107,6 @@ const TestRunDropdown = forwardRef<TestRunDropdownRef, TestRunDropdownProps>(({
   )
 })
 
-TestRunDropdown.displayName = 'TestRunDropdown'
+TestRunMenu.displayName = 'TestRunMenu'
 
-export default TestRunDropdown
+export default TestRunMenu

web/app/components/workflow/hooks/use-dynamic-test-run-options.tsx

@@ -3,14 +3,12 @@ import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import { BlockEnum, type CommonNodeType } from '../types'
 import { getWorkflowEntryNode } from '../utils/workflow-entry'
-import type { TestRunOptions, TriggerOption } from '../header/test-run-dropdown'
-import Home from '@/app/components/base/icons/src/vender/workflow/Home'
-import { Schedule, TriggerAll, WebhookLine } from '@/app/components/base/icons/src/vender/workflow'
-import AppIcon from '@/app/components/base/app-icon'
+import type { TestRunOptions, TriggerOption } from '../header/test-run-menu'
+import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
+import BlockIcon from '../block-icon'
 import { useStore } from '../store'
 import { canFindTool } from '@/utils'
-import { CollectionType } from '@/app/components/tools/types'
-import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+import { useAllTriggerPlugins } from '@/service/use-triggers'
 
 export const useDynamicTestRunOptions = (): TestRunOptions => {
   const { t } = useTranslation()
@@ -19,7 +17,7 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
   const customTools = useStore(s => s.customTools)
   const workflowTools = useStore(s => s.workflowTools)
   const mcpTools = useStore(s => s.mcpTools)
-  const { getIconUrl } = useGetIcon()
+  const { data: triggerPlugins } = useAllTriggerPlugins()
 
   return useMemo(() => {
     const allTriggers: TriggerOption[] = []
@@ -36,9 +34,10 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
           type: 'user_input',
           name: nodeData.title || t('workflow.blocks.start'),
           icon: (
-            <div className="flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 bg-util-colors-blue-brand-blue-brand-500 text-white shadow-md">
-              <Home className="h-3.5 w-3.5" />
-            </div>
+            <BlockIcon
+              type={BlockEnum.Start}
+              size='md'
+            />
           ),
           nodeId: node.id,
           enabled: true,
@@ -50,9 +49,10 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
           type: 'schedule',
           name: nodeData.title || t('workflow.blocks.trigger-schedule'),
           icon: (
-            <div className="flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 bg-util-colors-violet-violet-500 text-white shadow-md">
-              <Schedule className="h-4.5 w-4.5" />
-            </div>
+            <BlockIcon
+              type={BlockEnum.TriggerSchedule}
+              size='md'
+            />
           ),
           nodeId: node.id,
           enabled: true,
@@ -64,61 +64,30 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
           type: 'webhook',
           name: nodeData.title || t('workflow.blocks.trigger-webhook'),
           icon: (
-            <div className="flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 bg-util-colors-blue-blue-500 text-white shadow-md">
-              <WebhookLine className="h-4.5 w-4.5" />
-            </div>
+            <BlockIcon
+              type={BlockEnum.TriggerWebhook}
+              size='md'
+            />
           ),
           nodeId: node.id,
           enabled: true,
         })
       }
       else if (nodeData.type === BlockEnum.TriggerPlugin) {
-        let icon
         let toolIcon: string | any
 
-        // 按照 use-workflow-search.tsx 的模式获取工具图标
         if (nodeData.provider_id) {
-          let targetTools = workflowTools
-          if (nodeData.provider_type === CollectionType.builtIn)
-            targetTools = buildInTools
-          else if (nodeData.provider_type === CollectionType.custom)
-            targetTools = customTools
-          else if (nodeData.provider_type === CollectionType.mcp)
-            targetTools = mcpTools
-
+          const targetTools = triggerPlugins || []
           toolIcon = targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, nodeData.provider_id!))?.icon
         }
 
-        if (typeof toolIcon === 'string') {
-          const iconUrl = toolIcon.startsWith('http') ? toolIcon : getIconUrl(toolIcon)
-          icon = (
-            <div
-              className="bg-util-colors-white-white-500 flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 text-white shadow-md"
-              style={{
-                backgroundImage: `url(${iconUrl})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-              }}
-            />
-          )
-        }
-        else if (toolIcon && typeof toolIcon === 'object' && 'content' in toolIcon) {
-          icon = (
-            <AppIcon
-              className="!h-6 !w-6 rounded-lg border-[0.5px] border-white/2 shadow-md"
-              size="tiny"
-              icon={toolIcon.content}
-              background={toolIcon.background}
-            />
-          )
-        }
-        else {
-          icon = (
-            <div className="bg-util-colors-white-white-500 flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 text-white shadow-md">
-              <span className="text-xs font-medium text-text-tertiary">P</span>
-            </div>
-          )
-        }
+        const icon = (
+          <BlockIcon
+            type={BlockEnum.TriggerPlugin}
+            size='md'
+            toolIcon={toolIcon}
+          />
+        )
 
         allTriggers.push({
           id: node.id,
@@ -139,9 +108,10 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
           type: 'user_input',
           name: (startNode.data as CommonNodeType)?.title || t('workflow.blocks.start'),
           icon: (
-            <div className="flex h-6 w-6 items-center justify-center rounded-lg border-[0.5px] border-white/2 bg-util-colors-blue-brand-blue-brand-500 text-white shadow-md">
-              <Home className="h-3.5 w-3.5" />
-            </div>
+            <BlockIcon
+              type={BlockEnum.Start}
+              size='md'
+            />
           ),
           nodeId: startNode.id,
           enabled: true,
@@ -166,5 +136,5 @@ export const useDynamicTestRunOptions = (): TestRunOptions => {
       triggers: allTriggers,
       runAll,
     }
-  }, [nodes, buildInTools, customTools, workflowTools, mcpTools, getIconUrl, t])
+  }, [nodes, buildInTools, customTools, workflowTools, mcpTools, triggerPlugins, t])
 }