From add7bdc8776b05c75f4274fc0e14e64ce31b0678 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 3 Apr 2024 16:46:24 +0800
Subject: [PATCH] fix: add input instance id

---
 .../components/workflow/nodes/http/components/api-input.tsx   | 1 +
 .../workflow/nodes/http/components/edit-body/index.tsx        | 2 ++
 .../nodes/http/components/key-value/key-value-edit/index.tsx  | 1 +
 .../http/components/key-value/key-value-edit/input-item.tsx   | 4 ++++
 .../nodes/http/components/key-value/key-value-edit/item.tsx   | 4 ++++
 5 files changed, 12 insertions(+)

diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index d274f194a4..e75bce58fc 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -64,6 +64,7 @@ const ApiInput: FC<Props> = ({
       />
 
       <Input
+        instanceId='http-api-url'
         className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
         value={url}
         onChange={onUrlChange}
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 2b41a64ddf..da83382f93 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -127,6 +127,7 @@ const EditBody: FC<Props> = ({
 
         {type === BodyType.rawText && (
           <InputWithVar
+            instanceId={'http-body-raw'}
             title={<div className='uppercase'>Raw text</div>}
             onChange={handleBodyValueChange}
             value={payload.data}
@@ -138,6 +139,7 @@ const EditBody: FC<Props> = ({
 
         {type === BodyType.json && (
           <InputWithVar
+            instanceId={'http-body-json'}
             title='JSON'
             value={payload.data}
             onChange={handleBodyValueChange}
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 5bdca99dae..c95e020bbb 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
@@ -70,6 +70,7 @@ const KeyValueList: FC<Props> = ({
         list.map((item, index) => (
           <KeyValueItem
             key={item.id}
+            instanceId={item.id!}
             nodeId={nodeId}
             payload={item}
             onChange={handleChange(index)}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 32af06778d..a898e5d29b 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -10,6 +10,7 @@ import type { Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
 type Props = {
   className?: string
+  instanceId?: string
   nodeId: string
   value: string
   onChange: (newValue: string) => void
@@ -21,6 +22,7 @@ type Props = {
 
 const InputItem: FC<Props> = ({
   className,
+  instanceId,
   nodeId,
   value,
   onChange,
@@ -51,6 +53,7 @@ const InputItem: FC<Props> = ({
       {(!readOnly)
         ? (
           <Input
+            instanceId={instanceId}
             className={cn(isFocus ? 'bg-gray-100' : 'bg-width', 'w-0 grow px-3 py-1')}
             value={value}
             onChange={onChange}
@@ -67,6 +70,7 @@ const InputItem: FC<Props> = ({
           {!hasValue && <div className='text-gray-300 text-xs font-normal'>{placeholder}</div>}
           {hasValue && (
             <Input
+              instanceId={instanceId}
               className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
               value={value}
               onChange={onChange}
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index 27abed7f33..6afce88bbb 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -10,6 +10,7 @@ import InputItem from './input-item'
 const i18nPrefix = 'workflow.nodes.http'
 
 type Props = {
+  instanceId: string
   className?: string
   nodeId: string
   readonly: boolean
@@ -22,6 +23,7 @@ type Props = {
 }
 
 const KeyValueItem: FC<Props> = ({
+  instanceId,
   className,
   nodeId,
   readonly,
@@ -50,6 +52,7 @@ const KeyValueItem: FC<Props> = ({
     <div className={cn(className, 'group flex items-start h-min-7 border-t border-gray-200')}>
       <div className='w-1/2 h-full border-r border-gray-200'>
         <InputItem
+          instanceId={`http-key-${instanceId}`}
           nodeId={nodeId}
           value={payload.key}
           onChange={handleChange('key')}
@@ -60,6 +63,7 @@ const KeyValueItem: FC<Props> = ({
       </div>
       <div className='w-1/2  h-full'>
         <InputItem
+          instanceId={`http-value-${instanceId}`}
           nodeId={nodeId}
           value={payload.value}
           onChange={handleChange('value')}