From 8a906e2959a1085d6ed7ca7d073e19a43157d0f7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 6 Mar 2024 11:34:07 +0800
Subject: [PATCH] fix: http nodes update error and support json

---
 .../nodes/_base/components/editor/code-editor/index.tsx  | 9 ++++++++-
 web/app/components/workflow/nodes/code/panel.tsx         | 1 -
 web/app/components/workflow/nodes/code/types.ts          | 1 +
 .../workflow/nodes/http/components/edit-body/index.tsx   | 4 ++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 6af5317e54..0342902b1b 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -15,6 +15,12 @@ type Props = {
   readOnly?: boolean
 }
 
+const languageMap = {
+  [CodeLanguage.javascript]: 'javascript',
+  [CodeLanguage.python3]: 'python',
+  [CodeLanguage.json]: 'json',
+}
+
 const CodeEditor: FC<Props> = ({
   value,
   onChange,
@@ -70,7 +76,8 @@ const CodeEditor: FC<Props> = ({
         {/* https://www.npmjs.com/package/@monaco-editor/react */}
         <Editor
           className='h-full'
-          defaultLanguage={language === CodeLanguage.javascript ? 'javascript' : 'python'}
+          // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
+          language={languageMap[language] || 'javascript'}
           theme={isFocus ? 'focus-theme' : 'blur-theme'}
           value={value}
           onChange={handleEditorChange}
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index a87e106b5d..132b20ab8c 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -57,7 +57,6 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
           />
         </Field>
         <Split />
-        {inputs.code_language}
         <CodeEditor
           readOnly={readOnly}
           title={
diff --git a/web/app/components/workflow/nodes/code/types.ts b/web/app/components/workflow/nodes/code/types.ts
index 78a8448a78..9039325071 100644
--- a/web/app/components/workflow/nodes/code/types.ts
+++ b/web/app/components/workflow/nodes/code/types.ts
@@ -3,6 +3,7 @@ import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
 export enum CodeLanguage {
   python3 = 'python3',
   javascript = 'javascript',
+  json = 'json',
 }
 
 export type OutputVar = {
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 9c93d93b06..6cf7eb69b3 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
@@ -73,7 +73,7 @@ const EditBody: FC<Props> = ({
     })
     onChange(newBody)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [body, isCurrentKeyValue])
+  }, [isCurrentKeyValue])
 
   const handleBodyValueChange = useCallback((value: string) => {
     const newBody = produce(payload, (draft: Body) => {
@@ -127,7 +127,7 @@ const EditBody: FC<Props> = ({
             readOnly={readonly}
             title={<div className='uppercase'>JSON</div>}
             value={payload.data} onChange={handleBodyValueChange}
-            language={CodeLanguage.javascript}
+            language={CodeLanguage.json}
           />
         )}
       </div>