feat: enhance processing components by adding runDisabled state and fetching indicators

web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx

@@ -5,11 +5,13 @@ import { RiArrowLeftLine } from '@remixicon/react'
 
 type ActionsProps = {
   onBack: () => void
+  runDisabled?: boolean
   onProcess: () => void
 }
 
 const Actions = ({
   onBack,
+  runDisabled,
   onProcess,
 }: ActionsProps) => {
   const { t } = useTranslation()
@@ -26,6 +28,7 @@ const Actions = ({
       </Button>
       <Button
         variant='primary'
+        disabled={runDisabled}
         onClick={onProcess}
       >
         {t('datasetPipeline.operations.saveAndProcess')}

web/app/components/datasets/documents/create-from-pipeline/process-documents/hooks.ts

@@ -16,7 +16,7 @@ const VAR_TYPE_MAP: Record<PipelineInputVarType, BaseFieldType> = {
 
 export const useConfigurations = (datasourceNodeId: string) => {
   const pipelineId = useDatasetDetailContextWithSelector(state => state.dataset?.pipeline_id)
-  const { data: paramsConfig } = usePublishedPipelineProcessingParams({
+  const { data: paramsConfig, isFetching: isFetchingParams } = usePublishedPipelineProcessingParams({
     pipeline_id: pipelineId!,
     node_id: datasourceNodeId,
   })
@@ -61,6 +61,7 @@ export const useConfigurations = (datasourceNodeId: string) => {
   }, [paramsConfig])
 
   return {
+    isFetchingParams,
     initialData,
     configurations,
   }

web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
 import { useConfigurations } from './hooks'
 import Form from './form'
@@ -20,7 +21,7 @@ const ProcessDocuments = ({
   onBack,
   ref,
 }: ProcessDocumentsProps) => {
-  const { initialData, configurations } = useConfigurations(dataSourceNodeId)
+  const { isFetchingParams, initialData, configurations } = useConfigurations(dataSourceNodeId)
   const schema = generateZodSchema(configurations)
 
   return (
@@ -33,9 +34,9 @@ const ProcessDocuments = ({
         onSubmit={onSubmit}
         onPreview={onPreview}
       />
-      <Actions onBack={onBack} onProcess={onProcess} />
+      <Actions runDisabled={isFetchingParams} onBack={onBack} onProcess={onProcess} />
     </div>
   )
 }
 
-export default ProcessDocuments
+export default React.memo(ProcessDocuments)

web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawler.tsx

@@ -54,7 +54,7 @@ const Crawler = ({
   const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
 
   const usePreProcessingParams = useRef(!isInPipeline ? usePublishedPipelinePreProcessingParams : useDraftPipelinePreProcessingParams)
-  const { data: paramsConfig } = usePreProcessingParams.current({
+  const { data: paramsConfig, isFetching: isFetchingParams } = usePreProcessingParams.current({
     pipeline_id: pipelineId!,
     node_id: nodeId,
   }, !!pipelineId && !!nodeId)
@@ -129,6 +129,10 @@ const Crawler = ({
     setCrawlErrorMessage('')
   }, [runDatasourceNode, nodeId, pipelineId, onCheckedCrawlResultChange, checkCrawlStatus, t])
 
+  const handleSubmit = useCallback((value: Record<string, any>) => {
+    handleRun(value)
+  }, [handleRun])
+
   return (
     <div className='flex flex-col'>
       <Header
@@ -139,10 +143,9 @@ const Crawler = ({
         <Options
           variables={paramsConfig?.variables || []}
           isRunning={isRunning}
+          runDisabled={isFetchingParams}
           controlFoldOptions={controlFoldOptions}
-          onSubmit={(value) => {
+          onSubmit={handleSubmit}
-            handleRun(value)
-          }}
         />
       </div>
       {!isInit && (

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

@@ -17,6 +17,7 @@ const I18N_PREFIX = 'datasetCreation.stepOne.website'
 type OptionsProps = {
   variables: RAGPipelineVariables
   isRunning: boolean
+  runDisabled?: boolean
   controlFoldOptions?: number
   onSubmit: (data: Record<string, any>) => void
 }
@@ -24,6 +25,7 @@ type OptionsProps = {
 const Options = ({
   variables,
   isRunning,
+  runDisabled,
   controlFoldOptions,
   onSubmit,
 }: OptionsProps) => {
@@ -90,7 +92,7 @@ const Options = ({
         <Button
           variant='primary'
           onClick={form.handleSubmit}
-          disabled={isRunning}
+          disabled={runDisabled || isRunning}
           loading={isRunning}
           className='shrink-0 gap-x-0.5'
           spinnerClassName='!ml-0'

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

@@ -7,11 +7,13 @@ import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
 type ActionsProps = {
   formParams: CustomActionsProps
+  runDisabled?: boolean
   onBack: () => void
 }
 
 const Actions = ({
   formParams,
+  runDisabled,
   onBack,
 }: ActionsProps) => {
   const { t } = useTranslation()
@@ -32,7 +34,7 @@ const Actions = ({
         onClick={() => {
           form.handleSubmit()
         }}
-        disabled={isSubmitting || !canSubmit || isRunning}
+        disabled={runDisabled || isSubmitting || !canSubmit || isRunning}
         loading={isSubmitting || isRunning}
       >
         {t('datasetPipeline.operations.process')}

web/app/components/rag-pipeline/components/panel/test-run/document-processing/hooks.ts

@@ -17,7 +17,7 @@ const VAR_TYPE_MAP: Record<PipelineInputVarType, BaseFieldType> = {
 
 export const useConfigurations = (datasourceNodeId: string) => {
   const pipelineId = useStore(state => state.pipelineId)
-  const { data: paramsConfig } = useDraftPipelineProcessingParams({
+  const { data: paramsConfig, isFetching: isFetchingParams } = useDraftPipelineProcessingParams({
     pipeline_id: pipelineId!,
     node_id: datasourceNodeId,
   })
@@ -62,6 +62,7 @@ export const useConfigurations = (datasourceNodeId: string) => {
   }, [paramsConfig])
 
   return {
+    isFetchingParams,
     initialData,
     configurations,
   }

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

@@ -1,8 +1,8 @@
+import React, { useCallback } from 'react'
 import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
 import { useConfigurations } from './hooks'
 import Options from './options'
 import Actions from './actions'
-import { useCallback } from 'react'
 import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 
 type DocumentProcessingProps = {
@@ -16,12 +16,12 @@ const DocumentProcessing = ({
   onProcess,
   onBack,
 }: DocumentProcessingProps) => {
-  const { initialData, configurations } = useConfigurations(dataSourceNodeId)
+  const { isFetchingParams, initialData, configurations } = useConfigurations(dataSourceNodeId)
   const schema = generateZodSchema(configurations)
 
   const renderCustomActions = useCallback((props: CustomActionsProps) => (
-    <Actions formParams={props} onBack={onBack} />
+    <Actions runDisabled={isFetchingParams} formParams={props} onBack={onBack} />
-  ), [onBack])
+  ), [isFetchingParams, onBack])
 
   return (
     <Options
@@ -34,4 +34,4 @@ const DocumentProcessing = ({
   )
 }
 
-export default DocumentProcessing
+export default React.memo(DocumentProcessing)