From ff5ab43f9cf29d82fd7dfa4a45a5c4f702d06978 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 15 Mar 2024 17:00:54 +0800
Subject: [PATCH] feat: check before run

---
 .../components/before-run-form/form-item.tsx  | 11 ++++++++
 .../components/before-run-form/index.tsx      | 27 ++++++++++++++++---
 .../nodes/_base/hooks/use-one-step-run.ts     | 27 +++++++++++--------
 .../workflow/nodes/code/use-config.ts         |  6 -----
 4 files changed, 51 insertions(+), 20 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 b64c9ce70d..d306f9eb02 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
@@ -90,6 +90,17 @@ const FormItem: FC<Props> = ({
           )
         }
 
+        {
+          type === InputVarType.json && (
+            <CodeEditor
+              value={value}
+              title={<span>JSON</span>}
+              language={CodeLanguage.json}
+              onChange={onChange}
+            />
+          )
+        }
+
         {
           type === InputVarType.files && (
             <TextGenerationImageUploader
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index f847e03597..b7efbc27aa 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import type { Props as FormProps } from './form'
@@ -9,8 +9,9 @@ import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { Loading02, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
-import { NodeRunningStatus } from '@/app/components/workflow/types'
+import { InputVarType, NodeRunningStatus } from '@/app/components/workflow/types'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
+import Toast from '@/app/components/base/toast'
 
 const i18nPrefix = 'workflow.singleRun'
 
@@ -36,6 +37,26 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
 
   const isFinished = runningStatus === NodeRunningStatus.Succeeded || runningStatus === NodeRunningStatus.Failed
   const isRunning = runningStatus === NodeRunningStatus.Running
+
+  const handleRun = useCallback(() => {
+    let errMsg = ''
+    forms.forEach((form) => {
+      form.inputs.forEach((input) => {
+        const value = form.values[input.variable]
+        if (!errMsg && input.required && (value === '' || value === undefined || value === null || (input.type === InputVarType.files && value.length === 0)))
+          errMsg = t('workflow.errorMsg.fieldRequired', { field: input.label })
+      })
+    })
+    if (errMsg) {
+      Toast.notify({
+        message: errMsg,
+        type: 'error',
+      })
+      return
+    }
+
+    onRun()
+  }, [forms, onRun, t])
   return (
     <div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{
       backgroundColor: 'rgba(16, 24, 40, 0.20)',
@@ -73,7 +94,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
                 <StopCircle className='w-4 h-4 text-gray-500' />
               </div>
             )}
-            <Button disabled={isRunning} type='primary' className='w-0 grow !h-8 flex items-center space-x-2' onClick={onRun}>
+            <Button disabled={isRunning} type='primary' className='w-0 grow !h-8 flex items-center space-x-2' onClick={handleRun}>
               {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
               <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
             </Button>
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 e0b6cab756..90fb7c0714 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,7 +7,7 @@ import {
 } from '@/app/components/workflow/hooks'
 import { toNodeOutputVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
-import type { CheckValidRes, CommonNodeType, InputVar, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
+import type { CommonNodeType, InputVar, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { BlockEnum, InputVarType, NodeRunningStatus, VarType } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { singleNodeRun } from '@/service/workflow'
@@ -25,7 +25,7 @@ type Params<T> = {
   id: string
   data: CommonNodeType<T>
   defaultRunInputData: Record<string, any>
-  beforeRunCheckValid?: () => CheckValidRes
+  // beforeRunCheckValid?: () => CheckValidRes // has checked before run button clicked
 }
 
 const varTypeToInputVarType = (type: VarType, {
@@ -53,7 +53,7 @@ const useOneStepRun = <T>({
   id,
   data,
   defaultRunInputData,
-  beforeRunCheckValid = () => ({ isValid: true }),
+  // beforeRunCheckValid = () => ({ isValid: true }),
 }: Params<T>) => {
   const { t } = useTranslation()
   const { getBeforeNodesInSameBranch } = useWorkflow()
@@ -91,6 +91,11 @@ const useOneStepRun = <T>({
   const [canShowSingleRun, setCanShowSingleRun] = useState(false)
   const isShowSingleRun = data._isSingleRun && canShowSingleRun
   useEffect(() => {
+    if (!checkValid) {
+      setCanShowSingleRun(true)
+      return
+    }
+
     if (data._isSingleRun) {
       const { isValid, errorMessage } = checkValid(data, t)
       setCanShowSingleRun(isValid)
@@ -122,14 +127,14 @@ const useOneStepRun = <T>({
   const runningStatus = data._singleRunningStatus || NodeRunningStatus.NotStart
   const isCompleted = runningStatus === NodeRunningStatus.Succeeded || runningStatus === NodeRunningStatus.Failed
   const handleRun = async () => {
-    const { isValid, errorMessage } = beforeRunCheckValid()
-    if (!isValid) {
-      Toast.notify({
-        type: 'error',
-        message: errorMessage!,
-      })
-      return false
-    }
+    // const { isValid, errorMessage } = beforeRunCheckValid()
+    // if (!isValid) {
+    //   Toast.notify({
+    //     type: 'error',
+    //     message: errorMessage!,
+    //   })
+    //   return false
+    // }
     handleNodeDataUpdate({
       id,
       data: {
diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts
index ad819043b9..1df9e5381f 100644
--- a/web/app/components/workflow/nodes/code/use-config.ts
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -48,12 +48,6 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     id,
     data: inputs,
     defaultRunInputData: {},
-    beforeRunCheckValid: () => {
-      return {
-        isValid: true,
-        // errorMessage: 'xxxx',
-      }
-    },
   })
 
   const varInputs = toVarInputs(inputs.variables)