From 8be04b57f911ea04802d423acad67354703ddb17 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 2 Apr 2024 13:54:57 +0800
Subject: [PATCH] fix: http attr key rerender

---
 .../key-value/key-value-edit/index.tsx        |  2 +-
 .../nodes/http/hooks/use-key-value-list.ts    | 26 ++++++++++++++++---
 .../components/workflow/nodes/http/types.ts   |  1 +
 .../components/workflow/nodes/tool/panel.tsx  |  2 ++
 .../workflow/nodes/tool/use-config.ts         | 16 +++++++++---
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 14e02f6c96..5bdca99dae 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -69,7 +69,7 @@ const KeyValueList: FC<Props> = ({
       {
         list.map((item, index) => (
           <KeyValueItem
-            key={item.key + index}
+            key={item.id}
             nodeId={nodeId}
             payload={item}
             onChange={handleChange(index)}
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 75b5145cb9..db4757fb65 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,16 +1,30 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useBoolean } from 'ahooks'
+import { uniqueId } from 'lodash'
 import type { KeyValue } from '../types'
 
+const UNIQUE_ID_PREFIX = 'key-value-'
 const strToKeyValueList = (value: string) => {
   return value.split('\n').map((item) => {
     const [key, value] = item.split(':')
-    return { key: key.trim(), value: value?.trim() }
+    return {
+      id: uniqueId(UNIQUE_ID_PREFIX),
+      key: key.trim(),
+      value: value?.trim(),
+    }
   })
 }
 
 const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
-  const [list, setList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  const [list, doSetList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  const setList = (l: KeyValue[]) => {
+    doSetList(l.map((item) => {
+      return {
+        ...item,
+        id: item.id || uniqueId(UNIQUE_ID_PREFIX),
+      }
+    }))
+  }
   useEffect(() => {
     if (noFilter)
       return
@@ -21,8 +35,12 @@ const useKeyValueList = (value: string, onChange: (value: string) => void, noFil
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [list, noFilter])
   const addItem = useCallback(() => {
-    setList(prev => [...prev, { key: '', value: '' }])
-  }, [])
+    setList([...list, {
+      id: uniqueId(UNIQUE_ID_PREFIX),
+      key: '',
+      value: '',
+    }])
+  }, [list])
 
   const [isKeyValueEdit, {
     toggle: toggleIsKeyValueEdit,
diff --git a/web/app/components/workflow/nodes/http/types.ts b/web/app/components/workflow/nodes/http/types.ts
index ca3c98c6fc..e4b6f8d2f6 100644
--- a/web/app/components/workflow/nodes/http/types.ts
+++ b/web/app/components/workflow/nodes/http/types.ts
@@ -18,6 +18,7 @@ export enum BodyType {
 }
 
 export type KeyValue = {
+  id?: string
   key: string
   value: string
 }
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index aace9874af..78f59dfadc 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/web/app/components/workflow/nodes/tool/panel.tsx
@@ -28,6 +28,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     inputs,
     toolInputVarSchema,
     setInputVar,
+    handleOnVarOpen,
     filterVar,
     toolSettingSchema,
     toolSettingValue,
@@ -83,6 +84,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
                 onChange={setInputVar}
                 filterVar={filterVar}
                 isSupportConstantValue
+                onOpen={handleOnVarOpen}
               />
             </Field>
           )}
diff --git a/web/app/components/workflow/nodes/tool/use-config.ts b/web/app/components/workflow/nodes/tool/use-config.ts
index 610fb78fc8..d55dd6345a 100644
--- a/web/app/components/workflow/nodes/tool/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/use-config.ts
@@ -94,10 +94,19 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     })
   }, [inputs, setInputs])
 
-  const filterVar = useCallback((varPayload: Var) => {
-    return [VarVarType.string, VarVarType.number].includes(varPayload.type)
+  const [currVarIndex, setCurrVarIndex] = useState(-1)
+  const currVarType = toolInputVarSchema[currVarIndex]?._type
+  const handleOnVarOpen = useCallback((index: number) => {
+    setCurrVarIndex(index)
   }, [])
 
+  const filterVar = useCallback((varPayload: Var) => {
+    if (currVarType)
+      return varPayload.type === currVarType
+
+    return varPayload.type !== VarVarType.arrayFile
+  }, [currVarType])
+
   const isLoading = currTool && (isBuiltIn ? !currCollection : false)
 
   // single run
@@ -144,7 +153,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
 
   const varInputs = getInputVars(hadVarParams.map((p) => {
     if (p.type === VarType.variable)
-      return `#${[p.value as ValueSelector].join('.')}#`
+      return `{{#${[p.value as ValueSelector].join('.')}#}}`
 
     return p.value as string
   }))
@@ -176,6 +185,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     setToolSettingValue,
     toolInputVarSchema,
     setInputVar,
+    handleOnVarOpen,
     filterVar,
     currCollection,
     isShowAuthBtn,