feat(workflow): add drag-and-drop support for variable list items for start node (#22150)

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -13,8 +13,10 @@ import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 import { noop } from 'lodash-es'
+import cn from '@/utils/classnames'
 
 type Props = {
+  className?: string
   readonly: boolean
   payload: InputVar
   onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
@@ -25,6 +27,7 @@ type Props = {
 }
 
 const VarItem: FC<Props> = ({
+  className,
   readonly,
   payload,
   onChange = noop,
@@ -47,9 +50,9 @@ const VarItem: FC<Props> = ({
     hideEditVarModal()
   }, [onChange, hideEditVarModal])
   return (
-    <div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md'>
+    <div ref={ref} className={cn('flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md', className)}>
       <div className='flex w-0 grow items-center space-x-1'>
-        <Variable02 className='h-3.5 w-3.5 text-text-accent' />
+        <Variable02 className='h-3.5 w-3.5 text-text-accent group-hover:opacity-0' />
         <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div>
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div>
           <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div>

web/app/components/workflow/nodes/start/components/var-list.tsx

@@ -1,10 +1,15 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import produce from 'immer'
 import { useTranslation } from 'react-i18next'
 import VarItem from './var-item'
 import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
+import { v4 as uuid4 } from 'uuid'
+import { ReactSortable } from 'react-sortablejs'
+import { RiDraggable } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
 type Props = {
   readonly: boolean
   list: InputVar[]
@@ -44,6 +49,16 @@ const VarList: FC<Props> = ({
     }
   }, [list, onChange])
 
+  const listWithIds = useMemo(() => list.map((item) => {
+    const id = uuid4()
+    return {
+      id,
+      variable: { ...item },
+    }
+  }), [list])
+
+  const varCount = list.length
+
   if (list.length === 0) {
     return (
       <div className='flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary'>
@@ -53,18 +68,38 @@ const VarList: FC<Props> = ({
   }
 
   return (
-    <div className='space-y-1'>
+    <ReactSortable
-      {list.map((item, index) => (
+      className='space-y-1'
+      list={listWithIds}
+      setList={(list) => { onChange(list.map(item => item.variable)) }}
+      handle='.handle'
+      ghostClass='opacity-50'
+      animation={150}
+    >
+      {list.map((item, index) => {
+        const canDrag = (() => {
+          if (readonly)
+            return false
+          return varCount > 1
+        })()
+        return (
+          <div key={index} className='group relative'>
             <VarItem
-          key={index}
+              className={cn(canDrag && 'handle')}
               readonly={readonly}
               payload={item}
               onChange={handleVarChange(index)}
               onRemove={handleVarRemove(index)}
               varKeys={list.map(item => item.variable)}
             />
-      ))}
+            {canDrag && <RiDraggable className={cn(
+              'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+              'group-hover:block',
+            )} />}
           </div>
         )
+      })}
+    </ReactSortable>
+  )
 }
 export default React.memo(VarList)