feat: can run code node

web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx

@@ -2,45 +2,56 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
-import type { OutputVar } from '../../../code/types'
+import type { OutputVar, OutputVarType } from '../../../code/types'
 import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
 
 type Props = {
   readonly: boolean
-  list: OutputVar[]
-  onChange: (list: OutputVar[]) => void
+  outputs: OutputVar
+  onChange: (payload: OutputVar) => void
 }
 
 const OutputVarList: FC<Props> = ({
   readonly,
-  list,
+  outputs,
   onChange,
 }) => {
+  const list = (Object.keys(outputs)).map((key) => {
+    return {
+      variable: key,
+      variable_type: outputs[key].type,
+    }
+  })
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newList = produce(list, (draft) => {
-        draft[index].variable = e.target.value
+      const oldKey = list[index].variable
+      const newOutputs = produce(outputs, (draft) => {
+        const newKey = e.target.value
+        draft[newKey] = draft[oldKey]
+        delete draft[oldKey]
       })
-      onChange(newList)
+      onChange(newOutputs)
     }
   }, [list, onChange])
 
-  const handleVarChange = useCallback((index: number) => {
+  const handleVarTypeChange = useCallback((index: number) => {
     return (value: string) => {
-      const newList = produce(list, (draft) => {
-        draft[index].variable_type = value
+      const key = list[index].variable
+      const newOutputs = produce(outputs, (draft) => {
+        draft[key].type = value as OutputVarType
       })
-      onChange(newList)
+      onChange(newOutputs)
     }
   }, [list, onChange])
 
   const handleVarRemove = useCallback((index: number) => {
     return () => {
-      const newList = produce(list, (draft) => {
-        draft.splice(index, 1)
+      const key = list[index].variable
+      const newOutputs = produce(outputs, (draft) => {
+        delete draft[key]
       })
-      onChange(newList)
+      onChange(newOutputs)
     }
   }, [list, onChange])
 
@@ -57,7 +68,7 @@ const OutputVarList: FC<Props> = ({
           <VarTypePicker
             readonly={readonly}
             value={item.variable_type}
-            onChange={handleVarChange(index)}
+            onChange={handleVarTypeChange(index)}
           />
           <RemoveButton
             className='!p-2 !bg-gray-100 hover:!bg-gray-200'

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useWorkflow } from '@/app/components/workflow/hooks'
 import type { CommonNodeType, InputVar, Variable } from '@/app/components/workflow/types'
 import { InputVarType, NodeRunningStatus } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { singleNodeRun } from '@/service/workflow'
+import Toast from '@/app/components/base/toast'
 
 type Params<T> = {
   id: string
@@ -13,6 +15,8 @@ type Params<T> = {
 }
 
 const useOneStepRun = <T>({ id, data, defaultRunInputData, isInvalid = () => true }: Params<T>) => {
+  const { t } = useTranslation()
+
   const appId = useAppStore.getState().appDetail?.id
   const [runInputData, setRunInputData] = useState<Record<string, any>>(defaultRunInputData || {})
 
@@ -38,9 +42,30 @@ const useOneStepRun = <T>({ id, data, defaultRunInputData, isInvalid = () => tru
         _singleRunningStatus: NodeRunningStatus.Running,
       },
     })
-
+    try {
       const res = await singleNodeRun(appId!, id, { inputs: runInputData })
-    console.log(res)
+    }
+    catch (e) {
+      handleNodeDataUpdate({
+        id,
+        data: {
+          ...data,
+          _singleRunningStatus: NodeRunningStatus.Failed,
+        },
+      })
+      return false
+    }
+    handleNodeDataUpdate({
+      id,
+      data: {
+        ...data,
+        _singleRunningStatus: NodeRunningStatus.Succeeded,
+      },
+    })
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.success'),
+    })
   }
 
   const handleStop = () => {

web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts

 import { useCallback } from 'react'
 import produce from 'immer'
-import type { OutputVar } from '../../code/types'
+import { type OutputVar, OutputVarType } from '../../code/types'
 type Params<T> = {
   inputs: T
   setInputs: (newInputs: T) => void
@@ -11,25 +11,28 @@ function useOutputVarList<T>({
   setInputs,
   varKey = 'outputs',
 }: Params<T>) {
-  const handleVarListChange = useCallback((newList: OutputVar[]) => {
+  const handleVarsChange = useCallback((newVars: OutputVar) => {
     const newInputs = produce(inputs, (draft: any) => {
-      draft[varKey] = newList
+      draft[varKey] = newVars
     })
     setInputs(newInputs)
   }, [inputs, setInputs, varKey])
 
   const handleAddVariable = useCallback(() => {
     const newInputs = produce(inputs, (draft: any) => {
-      draft[varKey].push({
-        variable: '',
-        variable_type: 'string',
-      })
+      draft[varKey] = {
+        ...draft[varKey],
+        [`var-${Object.keys(draft[varKey]).length + 1}`]: {
+          type: OutputVarType.string,
+          children: null,
+        },
+      }
     })
     setInputs(newInputs)
   }, [inputs, setInputs, varKey])
 
   return {
-    handleVarListChange,
+    handleVarsChange,
     handleAddVariable,
   }
 }

web/app/components/workflow/nodes/code/panel.tsx

@@ -39,7 +39,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
     handleAddVariable,
     handleCodeChange,
     handleCodeLanguageChange,
-    handleOutputVarListChange,
+    handleVarsChange,
     handleAddOutputVariable,
     // single run
     isShowSingleRun,
@@ -91,8 +91,8 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         >
           <OutputVarList
             readonly={readOnly}
-            list={inputs.outputs}
-            onChange={handleOutputVarListChange}
+            outputs={inputs.outputs}
+            onChange={handleVarsChange}
           />
         </Field>
       </div>

web/app/components/workflow/nodes/code/types.ts

@@ -6,14 +6,21 @@ export enum CodeLanguage {
   json = 'json',
 }
 
-export type OutputVar = {
-  variable: string
-  variable_type: string
+export enum OutputVarType {
+  string = 'string',
+  number = 'number',
+  boolean = 'boolean',
+  object = 'object',
 }
 
+export type OutputVar = Record<string, {
+  type: OutputVarType
+  children: null // support nest in the future,
+}>
+
 export type CodeNodeType = CommonNodeType & {
   variables: Variable[]
   code_language: CodeLanguage
   code: string
-  outputs: OutputVar[]
+  outputs: OutputVar
 }

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

@@ -27,7 +27,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
-  const { handleVarListChange: handleOutputVarListChange, handleAddVariable: handleAddOutputVariable } = useOutputVarList<CodeNodeType>({
+  const { handleVarsChange, handleAddVariable: handleAddOutputVariable } = useOutputVarList<CodeNodeType>({
     inputs,
     setInputs,
   })
@@ -68,7 +68,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     handleAddVariable,
     handleCodeChange,
     handleCodeLanguageChange,
-    handleOutputVarListChange,
+    handleVarsChange,
     handleAddOutputVariable,
     // single run
     isShowSingleRun,