feat: last run frontend (#21369)

The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699).

Co-authored-by: jZonG <jzongcode@gmail.com>

web/app/components/workflow/nodes/document-extractor/panel.tsx

@@ -11,11 +11,9 @@ import useConfig from './use-config'
 import type { DocExtractorNodeType } from './types'
 import { fetchSupportFileTypes } from '@/service/datasets'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-import { BlockEnum, InputVarType, type NodePanelProps } from '@/app/components/workflow/types'
+import { BlockEnum, type NodePanelProps } from '@/app/components/workflow/types'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n/language'
-import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
-import ResultPanel from '@/app/components/workflow/run/result-panel'
 
 const i18nPrefix = 'workflow.nodes.docExtractor'
 
@@ -48,15 +46,6 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
     inputs,
     handleVarChanges,
     filterVar,
-    // single run
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    handleRun,
-    handleStop,
-    runResult,
-    files,
-    setFiles,
   } = useConfig(id, data)
 
   return (
@@ -93,30 +82,6 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
           />
         </OutputVars>
       </div>
-      {
-        isShowSingleRun && (
-          <BeforeRunForm
-            nodeName={inputs.title}
-            onHide={hideSingleRun}
-            forms={[
-              {
-                inputs: [{
-                  label: t(`${i18nPrefix}.inputVar`)!,
-                  variable: 'files',
-                  type: InputVarType.multiFiles,
-                  required: true,
-                }],
-                values: { files },
-                onChange: keyValue => setFiles(keyValue.files),
-              },
-            ]}
-            runningStatus={runningStatus}
-            onRun={handleRun}
-            onStop={handleStop}
-            result={<ResultPanel {...runResult} showSteps={false} />}
-          />
-        )
-      }
     </div>
   )
 }

web/app/components/workflow/nodes/document-extractor/use-config.ts

@@ -1,12 +1,10 @@
 import { useCallback, useMemo } from 'react'
 import produce from 'immer'
 import { useStoreApi } from 'reactflow'
-
 import type { ValueSelector, Var } from '../../types'
-import { InputVarType, VarType } from '../../types'
+import { VarType } from '../../types'
 import type { DocExtractorNodeType } from './types'
 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'
 import {
   useIsChatMode,
   useNodesReadOnly,
@@ -58,53 +56,11 @@ const useConfig = (id: string, payload: DocExtractorNodeType) => {
     setInputs(newInputs)
   }, [getType, inputs, setInputs])
 
-  // single run
-  const {
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    isCompleted,
-    handleRun,
-    handleStop,
-    runInputData,
-    setRunInputData,
-    runResult,
-  } = useOneStepRun<DocExtractorNodeType>({
-    id,
-    data: inputs,
-    defaultRunInputData: { files: [] },
-  })
-  const varInputs = [{
-    label: inputs.title,
-    variable: 'files',
-    type: InputVarType.multiFiles,
-    required: true,
-  }]
-
-  const files = runInputData.files
-  const setFiles = useCallback((newFiles: []) => {
-    setRunInputData({
-      ...runInputData,
-      files: newFiles,
-    })
-  }, [runInputData, setRunInputData])
-
   return {
     readOnly,
     inputs,
     filterVar,
     handleVarChanges,
-    // single run
-    isShowSingleRun,
-    hideSingleRun,
-    runningStatus,
-    isCompleted,
-    handleRun,
-    handleStop,
-    varInputs,
-    files,
-    setFiles,
-    runResult,
   }
 }
 

web/app/components/workflow/nodes/document-extractor/use-single-run-form-params.ts

@@ -0,0 +1,64 @@
+import type { MutableRefObject } from 'react'
+import type { InputVar, Variable } from '@/app/components/workflow/types'
+import { useCallback, useMemo } from 'react'
+import type { DocExtractorNodeType } from './types'
+import { useTranslation } from 'react-i18next'
+import { InputVarType } from '@/app/components/workflow/types'
+
+const i18nPrefix = 'workflow.nodes.docExtractor'
+
+type Params = {
+  id: string,
+  payload: DocExtractorNodeType,
+  runInputData: Record<string, any>
+  runInputDataRef: MutableRefObject<Record<string, any>>
+  getInputVars: (textList: string[]) => InputVar[]
+  setRunInputData: (data: Record<string, any>) => void
+  toVarInputs: (variables: Variable[]) => InputVar[]
+}
+const useSingleRunFormParams = ({
+  payload,
+  runInputData,
+  setRunInputData,
+}: Params) => {
+  const { t } = useTranslation()
+  const files = runInputData.files
+  const setFiles = useCallback((newFiles: []) => {
+    setRunInputData({
+      ...runInputData,
+      files: newFiles,
+    })
+  }, [runInputData, setRunInputData])
+
+  const forms = useMemo(() => {
+    return [
+      {
+        inputs: [{
+          label: t(`${i18nPrefix}.inputVar`)!,
+          variable: 'files',
+          type: InputVarType.multiFiles,
+          required: true,
+        }],
+        values: { files },
+        onChange: (keyValue: Record<string, any>) => setFiles(keyValue.files),
+      },
+    ]
+  }, [files, setFiles, t])
+
+  const getDependentVars = () => {
+    return [payload.variable_selector]
+  }
+
+  const getDependentVar = (variable: string) => {
+    if(variable === 'files')
+      return payload.variable_selector
+  }
+
+  return {
+    forms,
+    getDependentVars,
+    getDependentVar,
+  }
+}
+
+export default useSingleRunFormParams