Feat: Add "Open Workflow" link in workflow side panel (#28898)

web/app/components/tools/types.ts

@@ -77,6 +77,8 @@ export type Collection = {
     timeout?: number
     sse_read_timeout?: number
   }
+  // Workflow
+  workflow_app_id?: string
 }
 
 export type ToolParameter = {

web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx

@@ -1,5 +1,6 @@
 import {
   memo,
+  useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
@@ -16,6 +17,10 @@ import {
 } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import type { Node } from '@/app/components/workflow/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { CollectionType } from '@/app/components/tools/types'
+import { useAllWorkflowTools } from '@/service/use-tools'
+import { canFindTool } from '@/utils'
 
 type PanelOperatorPopupProps = {
   id: string
@@ -45,6 +50,14 @@ const PanelOperatorPopup = ({
   const showChangeBlock = !nodeMetaData.isTypeFixed && !nodesReadOnly
   const isChildNode = !!(data.isInIteration || data.isInLoop)
 
+  const { data: workflowTools } = useAllWorkflowTools()
+  const isWorkflowTool = data.type === BlockEnum.Tool && data.provider_type === CollectionType.workflow
+  const workflowAppId = useMemo(() => {
+    if (!isWorkflowTool || !workflowTools || !data.provider_id) return undefined
+    const workflowTool = workflowTools.find(item => canFindTool(item.id, data.provider_id))
+    return workflowTool?.workflow_app_id
+  }, [isWorkflowTool, workflowTools, data.provider_id])
+
   return (
     <div className='w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
       {
@@ -137,6 +150,22 @@ const PanelOperatorPopup = ({
           </>
         )
       }
+      {
+        isWorkflowTool && workflowAppId && (
+          <>
+            <div className='p-1'>
+              <a
+                href={`/app/${workflowAppId}/workflow`}
+                target='_blank'
+                className='flex h-8 cursor-pointer items-center rounded-lg px-3 text-sm text-text-secondary hover:bg-state-base-hover'
+              >
+                {t('workflow.panel.openWorkflow')}
+              </a>
+            </div>
+            <div className='h-px bg-divider-regular'></div>
+          </>
+        )
+      }
       {
         showHelpLink && nodeMetaData.helpLinkUri && (
           <>

web/i18n/en-US/workflow.ts

@@ -383,6 +383,7 @@ const translation = {
     userInputField: 'User Input Field',
     changeBlock: 'Change Node',
     helpLink: 'View Docs',
+    openWorkflow: 'Open Workflow',
     about: 'About',
     createdBy: 'Created By ',
     nextStep: 'Next Step',

web/i18n/zh-Hans/workflow.ts

@@ -383,6 +383,7 @@ const translation = {
     userInputField: '用户输入字段',
     changeBlock: '更改节点',
     helpLink: '查看帮助文档',
+    openWorkflow: '打开工作流',
     about: '关于',
     createdBy: '作者',
     nextStep: '下一步',