From df173764d238acb0c63fef26ad1d2892cf41b968 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 28 Feb 2024 13:54:11 +0800
Subject: [PATCH] chore: replace remove btn

---
 .../_base/components/variable/output-var-list.tsx      | 10 ++++------
 .../nodes/_base/components/variable/var-list.tsx       | 10 ++++------
 .../workflow/nodes/http/hooks/use-key-value-list.ts    |  8 +++++++-
 .../variable-assigner/components/var-list/index.tsx    | 10 ++++------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
index f071daf78a..dfd6952ceb 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx
+++ b/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>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index e448db3a53..41701b1017 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/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>
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
index 52585ae5be..334b1040b8 100644
--- a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -1,4 +1,5 @@
 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,
   }
 }
 
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
index 5688b52097..02d157b1fd 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/var-list/index.tsx
+++ b/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>