feat: Refactor OnlineDocuments and PageSelector components to enhance state management and integrate new Actions component

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

@@ -8,6 +8,7 @@ import Link from 'next/link'
 type ActionsProps = {
   disabled?: boolean
   handleNextStep: () => void
+  showSelect?: boolean
 }
 
 const Actions = ({

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

@@ -7,7 +7,7 @@ import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-so
 import type { CrawlResult, CrawlResultItem, DocumentItem, FileItem } from '@/models/datasets'
 import { CrawlStep } from '@/models/datasets'
 import produce from 'immer'
-import type { NotionPage } from '@/models/common'
+import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
 
 export const useAddDocumentsSteps = () => {
   const { t } = useTranslation()
@@ -128,9 +128,34 @@ export const useLocalFile = () => {
 }
 
 export const useOnlineDocuments = () => {
+  const [documentsData, setDocumentsData] = useState<DataSourceNotionWorkspace[]>([])
+  const [searchValue, setSearchValue] = useState('')
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
   const [onlineDocuments, setOnlineDocuments] = useState<NotionPage[]>([])
   const [currentDocument, setCurrentDocument] = useState<NotionPage | undefined>()
 
+  const PagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
+    const selectedPagesId = new Set<string>()
+    const boundPagesId = new Set<string>()
+    const pagesMap = (documentsData || []).reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
+      next.pages.forEach((page) => {
+        if (page.is_bound) {
+          selectedPagesId.add(page.page_id)
+          boundPagesId.add(page.page_id)
+        }
+        prev[page.page_id] = {
+          ...page,
+          workspace_id: next.workspace_id,
+        }
+      })
+
+      return prev
+    }, {})
+    return [pagesMap, selectedPagesId, boundPagesId]
+  }, [documentsData])
+  const defaultSelectedPagesId = [...Array.from(PagesMapAndSelectedPagesId[1]), ...(onlineDocuments.map(doc => doc.page_id) || [])]
+  const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
+
   const previewOnlineDocument = useRef<NotionPage>(onlineDocuments[0])
 
   const updateOnlineDocuments = (value: NotionPage[]) => {
@@ -146,6 +171,15 @@ export const useOnlineDocuments = () => {
   }, [])
 
   return {
+    documentsData,
+    setDocumentsData,
+    searchValue,
+    setSearchValue,
+    currentWorkspaceId,
+    setCurrentWorkspaceId,
+    PagesMapAndSelectedPagesId,
+    selectedPagesId,
+    setSelectedPagesId,
     onlineDocuments,
     previewOnlineDocument,
     updateOnlineDocuments,

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

@@ -8,7 +8,7 @@ import type { NotionPage } from '@/models/common'
 import OnlineDocuments from '@/app/components/rag-pipeline/components/panel/test-run/data-source/online-documents'
 import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 import WebsiteCrawl from '@/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl'
-import Actions from './data-source/actions'
+import Actions from './actions'
 import { useTranslation } from 'react-i18next'
 import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
 import LeftHeader from './left-header'
@@ -61,6 +61,15 @@ const CreateFormPipeline = () => {
     hideFilePreview,
   } = useLocalFile()
   const {
+    documentsData,
+    setDocumentsData,
+    searchValue,
+    setSearchValue,
+    currentWorkspaceId,
+    setCurrentWorkspaceId,
+    PagesMapAndSelectedPagesId,
+    selectedPagesId,
+    setSelectedPagesId,
     onlineDocuments,
     previewOnlineDocument,
     updateOnlineDocuments,
@@ -261,9 +270,17 @@ const CreateFormPipeline = () => {
                   )}
                   {datasourceType === DatasourceType.onlineDocument && (
                     <OnlineDocuments
+                      documentsData={documentsData}
+                      setDocumentsData={setDocumentsData}
+                      searchValue={searchValue}
+                      setSearchValue={setSearchValue}
+                      currentWorkspaceId={currentWorkspaceId}
+                      setCurrentWorkspaceId={setCurrentWorkspaceId}
+                      PagesMapAndSelectedPagesId={PagesMapAndSelectedPagesId}
+                      selectedPagesId={selectedPagesId}
+                      setSelectedPagesId={setSelectedPagesId}
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
-                      pageIdList={onlineDocuments.map(doc => doc.page_id)}
                       onSelect={updateOnlineDocuments}
                       onPreview={updateCurrentPage}
                     />