fix: http not pass headers and so on

web/app/components/workflow/nodes/http/components/edit-body/index.tsx

@@ -56,7 +56,12 @@ const EditBody: FC<Props> = ({
     addItem: addBody,
     isKeyValueEdit: isBodyKeyValueEdit,
     toggleIsKeyValueEdit: toggleIsBodyKeyValueEdit,
-  } = useKeyValueList(payload.data)
+  } = useKeyValueList(payload.data, (value) => {
+    const newBody = produce(payload, (draft: Body) => {
+      draft.data = value
+    })
+    onChange(newBody)
+  })
 
   const isCurrentKeyValue = type === BodyType.formData || type === BodyType.xWwwFormUrlencoded
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import type { KeyValue } from '../types'
 
@@ -9,9 +9,15 @@ const strToKeyValueList = (value: string) => {
   })
 }
 
-const useKeyValueList = (value: string) => {
+const useKeyValueList = (value: string, onChange: (value: string) => void) => {
   const [list, setList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  useEffect(() => {
+    const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}: ${item.value}`).join('\n')
+    if (newValue !== value)
+      onChange(newValue)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list])
   const addItem = useCallback(() => {
     setList(prev => [...prev, { key: '', value: '' }])
   }, [])

web/app/components/workflow/nodes/http/use-config.ts

@@ -12,7 +12,7 @@ import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-s
 const useConfig = (id: string, payload: HttpNodeType) => {
   const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)
 
-  // console.log(inputs)
+  console.log(inputs)
   const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
     inputs,
     setInputs,
@@ -32,13 +32,22 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleFieldChange = useCallback((field: string) => {
+    return (value: string) => {
+      const newInputs = produce(inputs, (draft: HttpNodeType) => {
+        (draft as any)[field] = value
+      })
+      setInputs(newInputs)
+    }
+  }, [inputs, setInputs])
+
   const {
     list: headers,
     setList: setHeaders,
     addItem: addHeader,
     isKeyValueEdit: isHeaderKeyValueEdit,
     toggleIsKeyValueEdit: toggleIsHeaderKeyValueEdit,
-  } = useKeyValueList(inputs.headers)
+  } = useKeyValueList(inputs.headers, handleFieldChange('headers'))
 
   const {
     list: params,
@@ -46,7 +55,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     addItem: addParam,
     isKeyValueEdit: isParamKeyValueEdit,
     toggleIsKeyValueEdit: toggleIsParamKeyValueEdit,
-  } = useKeyValueList(inputs.params)
+  } = useKeyValueList(inputs.params, handleFieldChange('params'))
 
   const setBody = useCallback((data: Body) => {
     const newInputs = produce(inputs, (draft: HttpNodeType) => {