chore: replace remove btn

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

@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
 import type { OutputVar } from '../../../code/types'
+import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 type Props = {
   readonly: boolean
@@ -59,12 +59,10 @@ const OutputVarList: FC<Props> = ({
             value={item.variable_type}
             onChange={handleVarChange(index)}
           />
-          <div
-            className='p-2 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'
+          <RemoveButton
+            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
             onClick={handleVarRemove(index)}
-          >
-            <Trash03 className='w-4 h-4 text-gray-500' />
-          </div>
+          />
         </div>
       ))}
     </div>

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

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
+import RemoveButton from '../remove-button'
 import VarReferencePicker from './var-reference-picker'
 import type { ValueSelector, Variable } from '@/app/components/workflow/types'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 type Props = {
   readonly: boolean
@@ -63,12 +63,10 @@ const VarList: FC<Props> = ({
             value={item.value_selector}
             onChange={handleVarReferenceChange(index)}
           />
-          <div
-            className='p-2 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'
+          <RemoveButton
+            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
             onClick={handleVarRemove(index)}
-          >
-            <Trash03 className='w-4 h-4 text-gray-500' />
-          </div>
+          />
         </div>
       ))}
     </div>

web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts

 import { useCallback, useState } from 'react'
+import { useBoolean } from 'ahooks'
 import type { KeyValue } from '../types'
 
 const strToKeyValueList = (value: string) => {
@@ -13,10 +14,15 @@ const useKeyValueList = (value: string) => {
   const addItem = useCallback(() => {
     setList(prev => [...prev, { key: '', value: '' }])
   }, [])
+  const [isKeyValueEdit, {
+    toggle: toggleIsKeyValueEdit,
+  }] = useBoolean(true)
   return {
-    list,
+    list: list.length === 0 ? [{ key: '', value: '' }] : list, // no item can not add new item
     setList,
     addItem,
+    isKeyValueEdit,
+    toggleIsKeyValueEdit,
   }
 }
 

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

@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import React, { useCallback } from 'react'
 import produce from 'immer'
+import RemoveButton from '../../../_base/components/remove-button'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import type { ValueSelector } from '@/app/components/workflow/types'
-import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 type Props = {
   readonly: boolean
@@ -56,12 +56,10 @@ const VarList: FC<Props> = ({
             value={item}
             onChange={handleVarReferenceChange(index)}
           />
-          <div
-            className='p-2 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'
+          <RemoveButton
+            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
             onClick={handleVarRemove(index)}
-          >
-            <Trash03 className='w-4 h-4 text-gray-500' />
-          </div>
+          />
         </div>
       ))}
     </div>