refactor: update CustomActions type to use structured props across form components

web/app/components/base/form/components/form/actions.tsx

@@ -4,8 +4,14 @@ import { useFormContext } from '../..'
 import Button from '../../../button'
 import { useTranslation } from 'react-i18next'
 
+export type CustomActionsProps = {
+  form: FormType
+  isSubmitting: boolean
+  canSubmit: boolean
+}
+
 type ActionsProps = {
-  CustomActions?: (form: FormType) => React.ReactNode | React.JSX.Element
+  CustomActions?: (props: CustomActionsProps) => React.ReactNode | React.JSX.Element
 }
 
 const Actions = ({
@@ -20,7 +26,7 @@ const Actions = ({
   ])
 
   if (CustomActions)
-    return CustomActions(form)
+    return CustomActions({ form, isSubmitting, canSubmit })
 
   return (
     <Button

web/app/components/base/form/form-scenarios/base/types.ts

@@ -1,6 +1,6 @@
 import type { TransferMethod } from '@/types/app'
-import type { FormType } from '../..'
 import type { Option } from '../../../select/pure'
+import type { CustomActionsProps } from '../../components/form/actions'
 
 export enum BaseFieldType {
   textInput = 'textInput',
@@ -55,6 +55,6 @@ export type BaseConfiguration = {
 export type BaseFormProps = {
   initialData?: Record<string, any>
   configurations: BaseConfiguration[]
-  CustomActions?: (form: FormType) => React.ReactNode
+  CustomActions?: (props: CustomActionsProps) => React.ReactNode
   onSubmit: (value: Record<string, any>) => void
 }

web/app/components/rag-pipeline/components/panel/test-run/data-source-options/index.tsx

@@ -13,6 +13,7 @@ type DataSourceOptionsProps = {
   onSelect: (option: Datasource) => void
 }
 
+// TODO: replace all icons with tool icon_url
 const DATA_SOURCE_ICONS = {
   [DataSourceType.FILE]: File as React.FC<React.SVGProps<SVGSVGElement>>,
   [DataSourceType.NOTION]: Notion as React.FC<React.SVGProps<SVGSVGElement>>,
@@ -21,6 +22,8 @@ const DATA_SOURCE_ICONS = {
   [DataSourceProvider.waterCrawl]: Watercrawl as React.FC<React.SVGProps<SVGSVGElement>>,
 }
 
+type KeyType = keyof typeof DATA_SOURCE_ICONS
+
 const DataSourceOptions = ({
   datasourceNodeId,
   onSelect,
@@ -47,7 +50,7 @@ const DataSourceOptions = ({
           key={option.value}
           label={option.label}
           selected={datasourceNodeId === option.value}
-          Icon={DATA_SOURCE_ICONS[option.type as keyof typeof DATA_SOURCE_ICONS]}
+          Icon={DATA_SOURCE_ICONS[option.type as KeyType]}
           onClick={handelSelect.bind(null, option.value)}
         />
       ))}

web/app/components/rag-pipeline/components/panel/test-run/data-source/local-file/file-uploader.tsx

@@ -45,7 +45,7 @@ const FileUploader = ({
   const hideUpload = notSupportBatchUpload && fileList.length > 0
 
   const { data: fileUploadConfigResponse } = useFileUploadConfig()
-  const { data: supportFileTypesResponse } = useFileSupportTypes()
+  const { data: supportFileTypesResponse } = useFileSupportTypes() // Todo: replace with extensions configured in node
   const supportTypes = supportFileTypesResponse?.allowed_extensions || []
   const supportTypesShowNames = (() => {
     const extensionMap: { [key: string]: string } = {

web/app/components/rag-pipeline/components/panel/test-run/document-processing/actions.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import Button from '@/app/components/base/button'
-import type { FormType } from '@/app/components/base/form'
 import { useTranslation } from 'react-i18next'
+import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 
 type ActionsProps = {
-  form: FormType
+  formParams: CustomActionsProps
   onBack: () => void
 }
 
 const Actions = ({
-  form,
+  formParams,
   onBack,
 }: ActionsProps) => {
   const { t } = useTranslation()
+  const { form, isSubmitting, canSubmit } = formParams
 
   return (
     <div className='flex items-center justify-end gap-x-2 p-4 pt-2'>
@@ -27,6 +28,8 @@ const Actions = ({
         onClick={() => {
           form.handleSubmit()
         }}
+        disabled={isSubmitting || !canSubmit}
+        loading={isSubmitting}
       >
         {t('datasetPipeline.operations.process')}
       </Button>

web/app/components/rag-pipeline/components/panel/test-run/document-processing/index.tsx

@@ -2,8 +2,8 @@ import { generateZodSchema } from '@/app/components/base/form/form-scenarios/bas
 import { useConfigurations } from './hooks'
 import Options from './options'
 import Actions from './actions'
-import type { FormType } from '@/app/components/base/form'
 import { useCallback } from 'react'
+import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 
 type DocumentProcessingProps = {
   dataSourceNodeId: string
@@ -19,8 +19,8 @@ const DocumentProcessing = ({
   const { initialData, configurations } = useConfigurations(dataSourceNodeId)
   const schema = generateZodSchema(configurations)
 
-  const renderCustomActions = useCallback((form: FormType) => (
+  const renderCustomActions = useCallback((props: CustomActionsProps) => (
-    <Actions form={form} onBack={onBack} />
+    <Actions formParams={props} onBack={onBack} />
   ), [onBack])
 
   return (

web/app/components/rag-pipeline/components/panel/test-run/document-processing/options.tsx

@@ -1,5 +1,5 @@
-import type { FormType } from '@/app/components/base/form'
 import { useAppForm } from '@/app/components/base/form'
+import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import type { BaseConfiguration } from '@/app/components/base/form/form-scenarios/base/types'
 import Toast from '@/app/components/base/toast'
@@ -9,7 +9,7 @@ type OptionsProps = {
   initialData: Record<string, any>
   configurations: BaseConfiguration[]
   schema: ZodSchema
-  CustomActions: (form: FormType) => React.JSX.Element
+  CustomActions: (props: CustomActionsProps) => React.JSX.Element
   onSubmit: (data: Record<string, any>) => void
 }