feat: support custom before run form

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -48,7 +48,6 @@ import {
   isSupportCustomRunForm,
 } from '@/app/components/workflow/utils'
 import Tooltip from '@/app/components/base/tooltip'
-import type { CommonNodeType } from '@/app/components/workflow/types'
 import { BlockEnum, type Node, NodeRunningStatus } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
@@ -71,15 +70,16 @@ import {
 } from '@/app/components/plugins/plugin-auth'
 import { AuthCategory } from '@/app/components/plugins/plugin-auth'
 import { canFindTool } from '@/utils'
-import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import type { CustomRunFormProps } from '@/app/components/workflow/nodes/data-source/types'
 import { DataSourceClassification } from '@/app/components/workflow/nodes/data-source/types'
 import { useModalContext } from '@/context/modal-context'
 import DataSourceBeforeRunForm from '@/app/components/workflow/nodes/data-source/before-run-form'
 
-const getCustomRunForm = (nodeType: BlockEnum, payload: CommonNodeType): React.JSX.Element => {
+const getCustomRunForm = (params: CustomRunFormProps): React.JSX.Element => {
+  const nodeType = params.payload.type
   switch (nodeType) {
     case BlockEnum.DataSource:
-      return <DataSourceBeforeRunForm payload={payload as DataSourceNodeType} />
+      return <DataSourceBeforeRunForm {...params} />
     default:
       return <div>Custom Run Form: {nodeType} not found</div>
   }
@@ -227,6 +227,7 @@ const BasePanel: FC<BasePanelProps> = ({
     tabType,
     isRunAfterSingleRun,
     setTabType,
+    handleAfterCustomSingleRun,
     singleRunParams,
     nodeInfo,
     setRunInputData,
@@ -306,7 +307,11 @@ const BasePanel: FC<BasePanelProps> = ({
   }
 
   if (isShowSingleRun) {
-    const form = getCustomRunForm(data.type, data)
+    const form = getCustomRunForm({
+      payload: data,
+      onSuccess: handleAfterCustomSingleRun,
+      onCancel: hideSingleRun,
+    })
 
     return (
       <div className={cn(

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts

@@ -32,6 +32,7 @@ import {
 import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
 import { useInvalidLastRun } from '@/service/use-workflow'
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import { isSupportCustomRunForm } from '@/app/components/workflow/utils'
 
 const singleRunFormParamsHooks: Record<BlockEnum, any> = {
   [BlockEnum.LLM]: useLLMSingleRunFormParams,
@@ -117,6 +118,7 @@ const useLastRun = <T>({
   const isIterationNode = blockType === BlockEnum.Iteration
   const isLoopNode = blockType === BlockEnum.Loop
   const isAggregatorNode = blockType === BlockEnum.VariableAggregator
+  const isCustomRunNode = isSupportCustomRunForm(blockType)
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const {
     getData: getDataForCheckMore,
@@ -299,10 +301,20 @@ const useLastRun = <T>({
     })
   }
 
+  const handleAfterCustomSingleRun = () => {
+    invalidLastRun()
+    setTabType(TabType.lastRun)
+    hideSingleRun()
+  }
+
   const handleSingleRun = () => {
     const { isValid } = checkValid()
     if(!isValid)
       return
+    if(isCustomRunNode) {
+      showSingleRun()
+      return
+    }
     const vars = singleRunParams?.getDependentVars?.()
     // no need to input params
     if (isAggregatorNode ? checkAggregatorVarsSet(vars) : isAllVarsHasValue(vars)) {
@@ -323,6 +335,7 @@ const useLastRun = <T>({
     tabType,
     isRunAfterSingleRun,
     setTabType: handleTabClicked,
+    handleAfterCustomSingleRun,
     singleRunParams,
     nodeInfo,
     setRunInputData,

web/app/components/workflow/nodes/data-source/before-run-form.tsx

@@ -1,18 +1,21 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import type { DataSourceNodeType } from './types'
+import type { CustomRunFormProps, DataSourceNodeType } from './types'
+import Button from '@/app/components/base/button'
 
-type Props = {
-  payload: DataSourceNodeType
-}
-
-const BeforeRunForm: FC<Props> = ({
+const BeforeRunForm: FC<CustomRunFormProps> = ({
   payload,
+  onSuccess,
+  onCancel,
 }) => {
   return (
     <div>
-      DataSource: {payload.datasource_name}
+      DataSource: {(payload as DataSourceNodeType).datasource_name}
+      <div className='mt-3 flex justify-center space-x-2'>
+        <Button onClick={onSuccess} variant='primary'>Have runned</Button>
+        <Button onClick={onCancel}>Cancel</Button>
+      </div>
     </div>
   )
 }

web/app/components/workflow/nodes/data-source/types.ts

@@ -28,3 +28,9 @@ export type DataSourceNodeType = CommonNodeType & {
   datasource_parameters: ToolVarInputs
   datasource_configurations: Record<string, any>
 }
+
+export type CustomRunFormProps = {
+  payload: CommonNodeType
+  onSuccess: () => void
+  onCancel: () => void
+}