feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

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

@@ -4,23 +4,33 @@ import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
 import BlockIcon from '../block-icon'
+import { BlockEnum } from '../types'
+import Split from '../nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { AlertCircle, AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { CheckCircle, Loading02 } from '@/app/components/base/icons/src/vender/line/general'
-import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { ArrowNarrowRight, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import type { NodeTracing } from '@/types/workflow'
 
 type Props = {
+  className?: string
   nodeInfo: NodeTracing
   hideInfo?: boolean
   hideProcessDetail?: boolean
+  onShowIterationDetail?: (detail: NodeTracing[][]) => void
+  notShowIterationNav?: boolean
+  justShowIterationNavArrow?: boolean
 }
 
 const NodePanel: FC<Props> = ({
+  className,
   nodeInfo,
   hideInfo = false,
   hideProcessDetail,
+  onShowIterationDetail,
+  notShowIterationNav,
+  justShowIterationNavArrow,
 }) => {
   const [collapseState, doSetCollapseState] = useState<boolean>(true)
   const setCollapseState = useCallback((state: boolean) => {
@@ -51,8 +61,14 @@ const NodePanel: FC<Props> = ({
     setCollapseState(!nodeInfo.expand)
   }, [nodeInfo.expand, setCollapseState])
 
+  const isIterationNode = nodeInfo.node_type === BlockEnum.Iteration
+  const handleOnShowIterationDetail = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+    onShowIterationDetail?.(nodeInfo.details || [])
+  }
   return (
-    <div className={cn('px-4 py-1', hideInfo && '!p-0')}>
+    <div className={cn('px-4 py-1', className, hideInfo && '!p-0')}>
       <div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md', hideInfo && '!rounded-lg')}>
         <div
           className={cn(
@@ -97,6 +113,27 @@ const NodePanel: FC<Props> = ({
         </div>
         {!collapseState && !hideProcessDetail && (
           <div className='pb-2'>
+            {/* The nav to the iteration detail */}
+            {isIterationNode && !notShowIterationNav && (
+              <div className='mt-2 mb-1 !px-2'>
+                <div
+                  className='flex items-center h-[34px] justify-between px-3 bg-gray-100 border-[0.5px] border-gray-200 rounded-lg cursor-pointer'
+                  onClick={handleOnShowIterationDetail}>
+                  <div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length || (nodeInfo.execution_metadata?.steps_boundary?.length - 1) })}</div>
+                  {justShowIterationNavArrow
+                    ? (
+                      <ArrowNarrowRight className='w-3.5 h-3.5 text-gray-500' />
+                    )
+                    : (
+                      <div className='flex items-center space-x-1 text-[#155EEF]'>
+                        <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
+                        <ArrowNarrowRight className='w-3.5 h-3.5' />
+                      </div>
+                    )}
+                </div>
+                <Split className='mt-2' />
+              </div>
+            )}
             <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
               {nodeInfo.status === 'stopped' && (
                 <div className='px-3 py-[10px] bg-[#fffaeb] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#dc6803] shadow-xs'>{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}</div>