refactor: Add useOnlineDrive hook and integrate it into CreateFormPipeline and TestRunPanel components

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

@@ -8,6 +8,7 @@ import type { CrawlResult, CrawlResultItem, DocumentItem, FileItem } from '@/mod
 import { CrawlStep } from '@/models/datasets'
 import produce from 'immer'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
+import { type OnlineDriveFile, OnlineDriveFileType } from '@/models/pipeline'
 
 export const useAddDocumentsSteps = () => {
   const { t } = useTranslation()
@@ -227,3 +228,30 @@ export const useWebsiteCrawl = () => {
     hideWebsitePreview,
   }
 }
+
+export const useOnlineDrive = () => {
+  const [prefix, setPrefix] = useState<string[]>([])
+  const [keywords, setKeywords] = useState('')
+  const [startAfter, setStartAfter] = useState('')
+  const [selectedFileList, setSelectedFileList] = useState<string[]>([])
+  const [fileList, setFileList] = useState<OnlineDriveFile[]>([
+    {
+      key: 'Bucket_1',
+      size: 1024, // unit bytes
+      type: OnlineDriveFileType.bucket,
+    },
+  ])
+
+  return {
+    prefix,
+    setPrefix,
+    keywords,
+    setKeywords,
+    startAfter,
+    setStartAfter,
+    selectedFileList,
+    setSelectedFileList,
+    fileList,
+    setFileList,
+  }
+}

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

@@ -26,7 +26,7 @@ import Processing from './processing'
 import type { InitialDocumentDetail, PublishedPipelineRunPreviewResponse, PublishedPipelineRunResponse } from '@/models/pipeline'
 import { DatasourceType } from '@/models/pipeline'
 import { TransferMethod } from '@/types/app'
-import { useAddDocumentsSteps, useLocalFile, useOnlineDocuments, useWebsiteCrawl } from './hooks'
+import { useAddDocumentsSteps, useLocalFile, useOnlineDocuments, useOnlineDrive, useWebsiteCrawl } from './hooks'
 import OnlineDrive from '@/app/components/rag-pipeline/components/panel/test-run/data-source/online-drive'
 
 const CreateFormPipeline = () => {
@@ -90,6 +90,18 @@ const CreateFormPipeline = () => {
     previewIndex,
     hideWebsitePreview,
   } = useWebsiteCrawl()
+  const {
+    prefix,
+    setPrefix,
+    keywords,
+    setKeywords,
+    startAfter,
+    setStartAfter,
+    selectedFileList,
+    setSelectedFileList,
+    fileList: onlineDriveFileList,
+    setFileList,
+  } = useOnlineDrive()
 
   const isVectorSpaceFull = plan.usage.vectorSpace >= plan.total.vectorSpace
   const isShowVectorSpaceFull = allFileLoaded && isVectorSpaceFull && enableBilling
@@ -302,6 +314,16 @@ const CreateFormPipeline = () => {
                   {datasourceType === DatasourceType.onlineDrive && (
                     <OnlineDrive
                       nodeData={datasource!.nodeData}
+                      prefix={prefix}
+                      setPrefix={setPrefix}
+                      keywords={keywords}
+                      setKeywords={setKeywords}
+                      startAfter={startAfter}
+                      setStartAfter={setStartAfter}
+                      selectedFileList={selectedFileList}
+                      setSelectedFileList={setSelectedFileList}
+                      fileList={onlineDriveFileList}
+                      setFileList={setFileList}
                     />
                   )}
                   {isShowVectorSpaceFull && (

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

@@ -1,38 +1,43 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import Header from './header'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback } from 'react'
 import FileList from './file-list'
-import { OnlineDriveFileType } from '@/models/pipeline'
+import type { OnlineDriveFile } from '@/models/pipeline'
 
 type OnlineDriveProps = {
   nodeData: DataSourceNodeType
+  prefix: string[]
+  setPrefix: (prefix: string[]) => void
+  keywords: string
+  setKeywords: (keywords: string) => void
+  startAfter: string
+  setStartAfter: (startAfter: string) => void
+  selectedFileList: string[]
+  setSelectedFileList: (selectedFileList: string[]) => void
+  fileList: OnlineDriveFile[]
+  setFileList: (fileList: OnlineDriveFile[]) => void
 }
 
 const OnlineDrive = ({
   nodeData,
+  prefix,
+  setPrefix,
+  keywords,
+  setKeywords,
+  startAfter,
+  setStartAfter,
+  selectedFileList,
+  setSelectedFileList,
+  fileList,
+  setFileList,
 }: OnlineDriveProps) => {
-  const [prefix, setPrefix] = useState<string[]>([])
-  const [keywords, setKeywords] = useState('')
-  const [startAfter, setStartAfter] = useState('')
-  const [selectedFileList, setSelectedFileList] = useState<string[]>([])
-
   const updateKeywords = useCallback((keywords: string) => {
     setKeywords(keywords)
-  }, [])
+  }, [setKeywords])
 
   const resetPrefix = useCallback(() => {
     setKeywords('')
-  }, [])
+  }, [setKeywords])
-
-  const fileList = useMemo(() => {
-    return [
-      {
-        key: 'Bucket_1',
-        size: 1024, // unit bytes
-        type: OnlineDriveFileType.bucket,
-      },
-    ]
-  }, [])
 
   return (
     <div className='flex flex-col gap-y-2'>

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

@@ -9,6 +9,8 @@ import type { CrawlResult } from '@/models/datasets'
 import { type CrawlResultItem, CrawlStep, type FileItem } from '@/models/datasets'
 import produce from 'immer'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import { OnlineDriveFileType } from '@/models/pipeline'
 
 export const useTestRunSteps = () => {
   const { t } = useTranslation()
@@ -167,3 +169,30 @@ export const useWebsiteCrawl = () => {
     setStep,
   }
 }
+
+export const useOnlineDrive = () => {
+  const [prefix, setPrefix] = useState<string[]>([])
+  const [keywords, setKeywords] = useState('')
+  const [startAfter, setStartAfter] = useState('')
+  const [selectedFileList, setSelectedFileList] = useState<string[]>([])
+  const [fileList, setFileList] = useState<OnlineDriveFile[]>([
+    {
+      key: 'Bucket_1',
+      size: 1024, // unit bytes
+      type: OnlineDriveFileType.bucket,
+    },
+  ])
+
+  return {
+    prefix,
+    setPrefix,
+    keywords,
+    setKeywords,
+    startAfter,
+    setStartAfter,
+    selectedFileList,
+    setSelectedFileList,
+    fileList,
+    setFileList,
+  }
+}

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

@@ -1,6 +1,6 @@
 import { useStore as useWorkflowStoreWithSelector } from '@/app/components/workflow/store'
 import { useCallback, useMemo, useState } from 'react'
-import { useLocalFile, useOnlineDocuments, useTestRunSteps, useWebsiteCrawl } from './hooks'
+import { useLocalFile, useOnlineDocuments, useOnlineDrive, useTestRunSteps, useWebsiteCrawl } from './hooks'
 import DataSourceOptions from './data-source-options'
 import LocalFile from './data-source/local-file'
 import OnlineDocuments from './data-source/online-documents'
@@ -52,6 +52,18 @@ const TestRunPanel = () => {
     step,
     setStep,
   } = useWebsiteCrawl()
+  const {
+    prefix,
+    setPrefix,
+    keywords,
+    setKeywords,
+    startAfter,
+    setStartAfter,
+    selectedFileList,
+    setSelectedFileList,
+    fileList: onlineDriveFileList,
+    setFileList,
+  } = useOnlineDrive()
   const { handleRun } = useWorkflowRun()
 
   const datasourceType = datasource?.nodeData.provider_type
@@ -165,6 +177,16 @@ const TestRunPanel = () => {
                 {datasourceType === DatasourceType.onlineDrive && (
                   <OnlineDrive
                     nodeData={datasource!.nodeData}
+                    prefix={prefix}
+                    setPrefix={setPrefix}
+                    keywords={keywords}
+                    setKeywords={setKeywords}
+                    startAfter={startAfter}
+                    setStartAfter={setStartAfter}
+                    selectedFileList={selectedFileList}
+                    setSelectedFileList={setSelectedFileList}
+                    fileList={onlineDriveFileList}
+                    setFileList={setFileList}
                   />
                 )}
               </div>