feat: Parallel Execution of Nodes in Workflows (#8192)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Yi <yxiaoisme@gmail.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/workflow/run/iteration-result-panel.tsx

@@ -1,10 +1,14 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
+import {
+  RiArrowRightSLine,
+  RiCloseLine,
+} from '@remixicon/react'
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
-import NodePanel from './node'
+import TracingPanel from './tracing-panel'
+import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
 import cn from '@/utils/classnames'
 import type { NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
@@ -23,43 +27,67 @@ const IterationResultPanel: FC<Props> = ({
   noWrap,
 }) => {
   const { t } = useTranslation()
+  const [expandedIterations, setExpandedIterations] = useState<Record<number, boolean>>([])
+
+  const toggleIteration = useCallback((index: number) => {
+    setExpandedIterations(prev => ({
+      ...prev,
+      [index]: !prev[index],
+    }))
+  }, [])
 
   const main = (
     <>
-      <div className={cn(!noWrap && 'shrink-0 ', 'pl-4 pr-3 pt-3')}>
+      <div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
         <div className='shrink-0 flex justify-between items-center h-8'>
-          <div className='text-base font-semibold text-gray-900 truncate'>
+          <div className='system-xl-semibold text-text-primary truncate'>
             {t(`${i18nPrefix}.testRunIteration`)}
           </div>
           <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
           </div>
         </div>
-        <div className='flex items-center py-2 space-x-1 text-primary-600 cursor-pointer' onClick={onBack}>
+        <div className='flex items-center py-2 space-x-1 text-text-accent-secondary cursor-pointer' onClick={onBack}>
           <ArrowNarrowLeft className='w-4 h-4' />
-          <div className='leading-[18px] text-[13px] font-medium'>{t(`${i18nPrefix}.back`)}</div>
+          <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
         </div>
       </div>
       {/* List */}
-      <div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-gray-50')}>
+      <div className={cn(!noWrap ? 'flex-grow overflow-auto' : 'max-h-full', 'p-2 bg-components-panel-bg')}>
         {list.map((iteration, index) => (
-          <div key={index} className={cn('my-4', index === 0 && 'mt-2')}>
-            <div className='flex items-center'>
-              <div className='shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
-              <div
-                className='ml-3 grow w-0 h-px'
-                style={{ background: 'linear-gradient(to right, #F3F4F6, rgba(243, 244, 246, 0))' }}
-              ></div>
+          <div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
+            <div
+              className={cn(
+                'flex items-center justify-between w-full px-3 cursor-pointer',
+                expandedIterations[index] ? 'pt-3 pb-2' : 'py-3',
+                'rounded-xl text-left',
+              )}
+              onClick={() => toggleIteration(index)}
+            >
+              <div className={cn('flex items-center gap-2 flex-grow')}>
+                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 flex-shrink-0'>
+                  <Iteration className='w-3 h-3 text-text-primary-on-surface' />
+                </div>
+                <span className='system-sm-semibold-uppercase text-text-primary flex-grow'>
+                  {t(`${i18nPrefix}.iteration`)} {index + 1}
+                </span>
+                <RiArrowRightSLine className={cn(
+                  'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
+                  expandedIterations[index] && 'transform rotate-90',
+                )} />
+              </div>
             </div>
-            <div className='mt-0.5 space-y-1'>
-              {iteration.map(node => (
-                <NodePanel
-                  key={node.id}
-                  className='!px-0 !py-0'
-                  nodeInfo={node}
-                  notShowIterationNav
-                />
-              ))}
+            {expandedIterations[index] && <div
+              className="flex-grow h-px bg-divider-subtle"
+            ></div>}
+            <div className={cn(
+              'overflow-hidden transition-all duration-200',
+              expandedIterations[index] ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
+            )}>
+              <TracingPanel
+                list={iteration}
+                className='bg-background-section-burn'
+              />
             </div>
           </div>
         ))}