feat(variable-list): add drag-and-drop functionality for variables in code node (#22127)

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import RemoveButton from '../remove-button'
@@ -10,6 +10,10 @@ import type { ValueSelector, Var, Variable } from '@/app/components/workflow/typ
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { checkKeys, replaceSpaceWithUnderscreInVarNameInput } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
+import { ReactSortable } from 'react-sortablejs'
+import { v4 as uuid4 } from 'uuid'
+import { RiDraggable } from '@remixicon/react'
+import cn from '@/utils/classnames'
 
 type Props = {
   nodeId: string
@@ -36,6 +40,14 @@ const VarList: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
+  const listWithIds = useMemo(() => list.map((item) => {
+    const id = uuid4()
+    return {
+      id,
+      variable: { ...item },
+    }
+  }), [list])
+
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
       replaceSpaceWithUnderscreInVarNameInput(e.target)
@@ -105,14 +117,29 @@ const VarList: FC<Props> = ({
     }
   }, [list, onChange])
 
+  const varCount = list.length
+
   return (
-    <div className='space-y-2'>
-      {list.map((item, index) => (
-        <div className='flex items-center space-x-1' key={index}>
+    <ReactSortable
+      className='space-y-2'
+      list={listWithIds}
+      setList={(list) => { onChange(list.map(item => item.variable)) }}
+      handle='.handle'
+      ghostClass='opacity-50'
+      animation={150}
+    >
+      {list.map((variable, index) => {
+        const canDrag = (() => {
+          if (readonly)
+            return false
+          return varCount > 1
+        })()
+        return (
+          <div className={cn('flex items-center space-x-1', 'group relative')} key={index}>
             <Input
               wrapperClassName='w-[120px]'
               disabled={readonly}
-            value={list[index].variable}
+              value={variable.variable}
               onChange={handleVarNameChange(index)}
               placeholder={t('workflow.common.variableNamePlaceholder')!}
             />
@@ -121,10 +148,10 @@ const VarList: FC<Props> = ({
               readonly={readonly}
               isShowNodeName
               className='grow'
-            value={item.variable_type === VarKindType.constant ? (item.value || '') : (item.value_selector || [])}
+              value={variable.variable_type === VarKindType.constant ? (variable.value || '') : (variable.value_selector || [])}
               isSupportConstantValue={isSupportConstantValue}
               onChange={handleVarReferenceChange(index)}
-            defaultVarKindType={item.variable_type}
+              defaultVarKindType={variable.variable_type}
               onlyLeafNodeVar={onlyLeafNodeVar}
               filterVar={filterVar}
               isSupportFileVar={isSupportFileVar}
@@ -132,9 +159,14 @@ const VarList: FC<Props> = ({
             {!readonly && (
               <RemoveButton onClick={handleVarRemove(index)}/>
             )}
+            {canDrag && <RiDraggable className={cn(
+              'handle absolute -left-4 top-2.5 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+              'group-hover:block',
+            )} />}
           </div>
-      ))}
-    </div>
+        )
+      })}
+    </ReactSortable>
   )
 }
 export default React.memo(VarList)