From 49ce9d22008677683dc411c72c15868f9dcaa130 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 8 Mar 2024 10:59:49 +0800
Subject: [PATCH] feat: http support debug and remove mock init debug data

---
 .../components/before-run-form/form-item.tsx  |  2 +-
 .../nodes/_base/hooks/use-one-step-run.ts     |  8 +++-
 .../workflow/nodes/code/use-config.ts         |  5 +--
 .../components/workflow/nodes/http/panel.tsx  | 27 +++++++++++++
 .../workflow/nodes/http/use-config.ts         | 40 +++++++++++++++++++
 .../nodes/knowledge-retrieval/use-config.ts   |  2 +-
 .../workflow/nodes/llm/use-config.ts          |  2 -
 .../nodes/question-classifier/use-config.ts   |  2 +-
 .../nodes/template-transform/use-config.ts    |  5 +--
 9 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 5ade9dbe41..6b38ff4b12 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -42,7 +42,7 @@ const FormItem: FC<Props> = ({
   }, [value, onChange])
   return (
     <div className='flex justify-between items-start'>
-      {type !== InputVarType.contexts && <div className='shrink-0 w-[96px] pr-1 h-8 leading-8 text-[13px] font-medium text-gray-700 capitalize truncate'>{payload.label}</div>}
+      {type !== InputVarType.contexts && <div className='shrink-0 w-[96px] pr-1 h-8 leading-8 text-[13px] font-medium text-gray-700 truncate'>{payload.label}</div>}
       <div className='w-0 grow'>
         {
           type === InputVarType.textInput && (
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index 6c1ee036b4..9ac071a78a 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -7,10 +7,11 @@ type Params<T> = {
   id: string
   data: CommonNodeType<T>
   defaultRunInputData: Record<string, any>
+  isInvalid?: () => boolean
 }
 
-const useOneStepRun = <T>({ id, data, defaultRunInputData }: Params<T>) => {
-  const { handleNodeDataUpdate } = useWorkflow()
+const useOneStepRun = <T>({ id, data, defaultRunInputData, isInvalid = () => true }: Params<T>) => {
+  const { handleNodeDataUpdate }: { handleNodeDataUpdate: (data: any) => void } = useWorkflow()
   const isShowSingleRun = data._isSingleRun
   const hideSingleRun = () => {
     handleNodeDataUpdate({
@@ -24,6 +25,9 @@ const useOneStepRun = <T>({ id, data, defaultRunInputData }: Params<T>) => {
 
   const [runningStatus, setRunningStatus] = useState('un started')
   const handleRun = () => {
+    if (isInvalid())
+      return
+
     setRunningStatus('running')
   }
 
diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts
index 69f607f26b..b3ef5c999a 100644
--- a/web/app/components/workflow/nodes/code/use-config.ts
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -45,10 +45,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
   } = useOneStepRun<CodeNodeType>({
     id,
     data: inputs,
-    defaultRunInputData: {
-      name: 'Joel',
-      age: '18',
-    },
+    defaultRunInputData: {},
   })
   const varInputs = toVarInputs(inputs.variables)
 
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 5bd28d9e7d..4868892980 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -14,6 +14,8 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
+
 const i18nPrefix = 'workflow.nodes.http'
 
 const Panel: FC<NodePanelProps<HttpNodeType>> = ({
@@ -44,6 +46,15 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     showAuthorization,
     hideAuthorization,
     setAuthorization,
+    // single run
+    isShowSingleRun,
+    hideSingleRun,
+    runningStatus,
+    handleRun,
+    handleStop,
+    varInputs,
+    inputVarValues,
+    setInputVarValues,
   } = useConfig(id, data)
 
   return (
@@ -148,6 +159,22 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           </>
         </OutputVars>
       </div>
+      {isShowSingleRun && (
+        <BeforeRunForm
+          nodeName={inputs.title}
+          onHide={hideSingleRun}
+          forms={[
+            {
+              inputs: varInputs,
+              values: inputVarValues,
+              onChange: setInputVarValues,
+            },
+          ]}
+          runningStatus={runningStatus}
+          onRun={handleRun}
+          onStop={handleStop}
+        />
+      )}
     </div >
   )
 }
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index 7ea3e1b9e1..fa777e9a64 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -5,6 +5,7 @@ import useVarList from '../_base/hooks/use-var-list'
 import type { Authorization, Body, HttpNodeType, Method } from './types'
 import useKeyValueList from './hooks/use-key-value-list'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 
 const useConfig = (id: string, payload: HttpNodeType) => {
   const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)
@@ -64,6 +65,36 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  // single run
+  const {
+    isShowSingleRun,
+    hideSingleRun,
+    toVarInputs,
+    runningStatus,
+    handleRun,
+    handleStop,
+    runInputData,
+    setRunInputData,
+  } = useOneStepRun<HttpNodeType>({
+    id,
+    data: inputs,
+    defaultRunInputData: {},
+  })
+  const varInputs = toVarInputs(inputs.variables)
+
+  const inputVarValues = (() => {
+    const vars: Record<string, any> = {}
+    Object.keys(runInputData)
+      .forEach((key) => {
+        vars[key] = runInputData[key]
+      })
+    return vars
+  })()
+
+  const setInputVarValues = useCallback((newPayload: Record<string, any>) => {
+    setRunInputData(newPayload)
+  }, [runInputData, setRunInputData])
+
   return {
     inputs,
     handleVarListChange,
@@ -89,6 +120,15 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     showAuthorization,
     hideAuthorization,
     setAuthorization,
+    // single run
+    isShowSingleRun,
+    hideSingleRun,
+    runningStatus,
+    handleRun,
+    handleStop,
+    varInputs,
+    inputVarValues,
+    setInputVarValues,
   }
 }
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index 025eedb885..85abbebdea 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -68,7 +68,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
     id,
     data: inputs,
     defaultRunInputData: {
-      query: 'What is the capital of France?',
+      query: '',
     },
   })
 
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 0b4da65daa..f4f23ab520 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -103,8 +103,6 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     id,
     data: inputs,
     defaultRunInputData: {
-      'name': 'Joel',
-      'age': '18',
       '#context#': [RETRIEVAL_OUTPUT_STRUCT],
       '#vision#': [],
     },
diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts
index 0fb5d223ba..0d7343caa4 100644
--- a/web/app/components/workflow/nodes/question-classifier/use-config.ts
+++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts
@@ -66,7 +66,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
     id,
     data: inputs,
     defaultRunInputData: {
-      query: 'Negative or positive sentiment?',
+      query: '',
     },
   })
 
diff --git a/web/app/components/workflow/nodes/template-transform/use-config.ts b/web/app/components/workflow/nodes/template-transform/use-config.ts
index 6bb9fd1e17..2f0536a9af 100644
--- a/web/app/components/workflow/nodes/template-transform/use-config.ts
+++ b/web/app/components/workflow/nodes/template-transform/use-config.ts
@@ -32,10 +32,7 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
   } = useOneStepRun<TemplateTransformNodeType>({
     id,
     data: inputs,
-    defaultRunInputData: {
-      name: 'Joel',
-      age: '18',
-    },
+    defaultRunInputData: {},
   })
   const varInputs = toVarInputs(inputs.variables)