refactor(web): migrate notion page selectors to tanstack virtual (#34508)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-04-05 16:59:21 +08:00 · 2026-04-03 15:03:12 +08:00
parent a9cf8f6c5d
commit c94951b2f8
25 changed files with 639 additions and 900 deletions
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx
@@ -106,7 +106,7 @@ const OnlineDocuments = ({
    if (!currentCredentialId)
      return
    getOnlineDocuments()
-  }, [currentCredentialId])
+  }, [currentCredentialId, getOnlineDocuments])

  const handleSearchValueChange = useCallback((value: string) => {
    const { setSearchValue } = dataSourceStore.getState()
@@ -156,6 +156,7 @@ const OnlineDocuments = ({
          {documentsData?.length
            ? (
                <PageSelector
+                  key={`${currentCredentialId}:${supportBatchUpload ? 'multiple' : 'single'}`}
                  checkedIds={selectedPagesId}
                  disabledValue={new Set()}
                  searchValue={searchValue}
@@ -165,7 +166,6 @@ const OnlineDocuments = ({
                  canPreview={!isInPipeline}
                  onPreview={handlePreviewPage}
                  isMultipleChoice={supportBatchUpload}
-                  currentCredentialId={currentCredentialId}
                />
              )
            : (
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/tests/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/tests/index.spec.tsx
@@ -1,26 +1,11 @@
-import type { NotionPageTreeItem, NotionPageTreeMap } from '../index'
+import type { NotionPageTreeItem, NotionPageTreeMap } from '@/app/components/base/notion-page-selector/page-selector/types'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
+import { recursivePushInParentDescendants } from '@/app/components/base/notion-page-selector/page-selector/utils'
 import PageSelector from '../index'
-import { recursivePushInParentDescendants } from '../utils'

-// Mock react-window FixedSizeList - renders items directly for testing
-vi.mock('react-window', () => ({
-  FixedSizeList: ({ children: ItemComponent, itemCount, itemData, itemKey }: { children: React.ComponentType<{ index: number, style: React.CSSProperties, data: unknown }>, itemCount: number, itemData: unknown, itemKey?: (index: number, data: unknown) => string | number }) => (
-    <div data-testid="virtual-list">
-      {Array.from({ length: itemCount }).map((_, index) => (
-        <ItemComponent
-          key={itemKey?.(index, itemData) || index}
-          index={index}
-          style={{ top: index * 28, left: 0, right: 0, width: '100%', position: 'absolute' as const }}
-          data={itemData}
-        />
-      ))}
-    </div>
-  ),
-  areEqual: (prevProps: Record<string, unknown>, nextProps: Record<string, unknown>) => prevProps === nextProps,
-}))
+vi.mock('@tanstack/react-virtual')

 // Note: NotionIcon from @/app/components/base/ is NOT mocked - using real component per testing guidelines

@@ -70,7 +55,6 @@ const createDefaultProps = (overrides?: Partial<PageSelectorProps>): PageSelecto
    canPreview: true,
    onPreview: vi.fn(),
    isMultipleChoice: true,
-    currentCredentialId: 'cred-1',
    ...overrides,
  }
 }
@@ -114,7 +98,7 @@ describe('PageSelector', () => {
      expect(screen.queryByTestId('virtual-list')).not.toBeInTheDocument()
    })

-    it('should render items using FixedSizeList', () => {
+    it('should render items using VirtualList', () => {
      const pages = [
        createMockPage({ page_id: 'page-1', page_name: 'Page 1' }),
        createMockPage({ page_id: 'page-2', page_name: 'Page 2' }),
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/tests/utils.spec.ts
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/tests/utils.spec.ts
@@ -1,7 +1,7 @@
-import type { NotionPageTreeItem, NotionPageTreeMap } from '../index'
+import type { NotionPageTreeItem, NotionPageTreeMap } from '@/app/components/base/notion-page-selector/page-selector/types'
 import type { DataSourceNotionPageMap } from '@/models/common'
 import { describe, expect, it } from 'vitest'
-import { recursivePushInParentDescendants } from '../utils'
+import { recursivePushInParentDescendants } from '@/app/components/base/notion-page-selector/page-selector/utils'

 const makePageEntry = (overrides: Partial<NotionPageTreeItem>): NotionPageTreeItem => ({
  page_icon: null,
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx
@@ -1,9 +1,7 @@
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
-import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FixedSizeList as List } from 'react-window'
-import Item from './item'
-import { recursivePushInParentDescendants } from './utils'
+import { usePageSelectorModel } from '@/app/components/base/notion-page-selector/page-selector/use-page-selector-model'
+import VirtualPageList from '@/app/components/base/notion-page-selector/page-selector/virtual-page-list'

 type PageSelectorProps = {
  checkedIds: Set<string>
@@ -15,23 +13,9 @@ type PageSelectorProps = {
  canPreview?: boolean
  onPreview?: (selectedPageId: string) => void
  isMultipleChoice?: boolean
-  currentCredentialId: string
+  currentCredentialId?: string
 }

-export type NotionPageTreeItem = {
-  children: Set<string>
-  descendants: Set<string>
-  depth: number
-  ancestors: string[]
-} & DataSourceNotionPage
-
-export type NotionPageTreeMap = Record<string, NotionPageTreeItem>
-
-type NotionPageItem = {
-  expand: boolean
-  depth: number
-} & DataSourceNotionPage
-
 const PageSelector = ({
  checkedIds,
  disabledValue,
@@ -42,116 +26,28 @@ const PageSelector = ({
  canPreview = true,
  onPreview,
  isMultipleChoice = true,
-  currentCredentialId,
+  currentCredentialId: _currentCredentialId,
 }: PageSelectorProps) => {
  const { t } = useTranslation()
-  const [dataList, setDataList] = useState<NotionPageItem[]>([])
-  const [currentPreviewPageId, setCurrentPreviewPageId] = useState('')
-
-  useEffect(() => {
-    setDataList(list.filter(item => item.parent_id === 'root' || !pagesMap[item.parent_id]).map((item) => {
-      return {
-        ...item,
-        expand: false,
-        depth: 0,
-      }
-    }))
-  }, [currentCredentialId])
-
-  const searchDataList = list.filter((item) => {
-    return item.page_name.includes(searchValue)
-  }).map((item) => {
-    return {
-      ...item,
-      expand: false,
-      depth: 0,
-    }
+  const selectionMode = isMultipleChoice ? 'multiple' : 'single'
+  const {
+    currentPreviewPageId,
+    effectiveSearchValue,
+    rows,
+    handlePreview,
+    handleSelect,
+    handleToggle,
+  } = usePageSelectorModel({
+    checkedIds,
+    list,
+    onPreview,
+    onSelect,
+    pagesMap,
+    searchValue,
+    selectionMode,
  })
-  const currentDataList = searchValue ? searchDataList : dataList

-  const listMapWithChildrenAndDescendants = useMemo(() => {
-    return list.reduce((prev: NotionPageTreeMap, next: DataSourceNotionPage) => {
-      const pageId = next.page_id
-      if (!prev[pageId])
-        prev[pageId] = { ...next, children: new Set(), descendants: new Set(), depth: 0, ancestors: [] }
-
-      recursivePushInParentDescendants(pagesMap, prev, prev[pageId], prev[pageId])
-      return prev
-    }, {})
-  }, [list, pagesMap])
-
-  const handleToggle = useCallback((index: number) => {
-    const current = dataList[index]
-    const pageId = current.page_id
-    const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId]
-    const descendantsIds = Array.from(currentWithChildrenAndDescendants.descendants)
-    const childrenIds = Array.from(currentWithChildrenAndDescendants.children)
-    let newDataList = []
-
-    if (current.expand) {
-      current.expand = false
-
-      newDataList = dataList.filter(item => !descendantsIds.includes(item.page_id))
-    }
-    else {
-      current.expand = true
-
-      newDataList = [
-        ...dataList.slice(0, index + 1),
-        ...childrenIds.map(item => ({
-          ...pagesMap[item],
-          expand: false,
-          depth: listMapWithChildrenAndDescendants[item].depth,
-        })),
-        ...dataList.slice(index + 1),
-      ]
-    }
-    setDataList(newDataList)
-  }, [dataList, listMapWithChildrenAndDescendants, pagesMap])
-
-  const handleCheck = useCallback((index: number) => {
-    const copyValue = new Set(checkedIds)
-    const current = currentDataList[index]
-    const pageId = current.page_id
-    const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId]
-
-    if (copyValue.has(pageId)) {
-      if (!searchValue && isMultipleChoice) {
-        for (const item of currentWithChildrenAndDescendants.descendants)
-          copyValue.delete(item)
-      }
-
-      copyValue.delete(pageId)
-    }
-    else {
-      if (!searchValue && isMultipleChoice) {
-        for (const item of currentWithChildrenAndDescendants.descendants)
-          copyValue.add(item)
-      }
-      // Single choice mode, clear previous selection
-      if (!isMultipleChoice && copyValue.size > 0) {
-        copyValue.clear()
-        copyValue.add(pageId)
-      }
-      else {
-        copyValue.add(pageId)
-      }
-    }
-
-    onSelect(new Set(copyValue))
-  }, [currentDataList, isMultipleChoice, listMapWithChildrenAndDescendants, onSelect, searchValue, checkedIds])
-
-  const handlePreview = useCallback((index: number) => {
-    const current = currentDataList[index]
-    const pageId = current.page_id
-
-    setCurrentPreviewPageId(pageId)
-
-    if (onPreview)
-      onPreview(pageId)
-  }, [currentDataList, onPreview])
-
-  if (!currentDataList.length) {
+  if (!rows.length) {
    return (
      <div className="flex h-[296px] items-center justify-center text-[13px] text-text-tertiary">
        {t('dataSource.notion.selector.noSearchResult', { ns: 'common' })}
@@ -160,30 +56,18 @@ const PageSelector = ({
  }

  return (
-    <List
-      className="py-2"
-      height={296}
-      itemCount={currentDataList.length}
-      itemSize={28}
-      width="100%"
-      itemKey={(index, data) => data.dataList[index].page_id}
-      itemData={{
-        dataList: currentDataList,
-        handleToggle,
-        checkedIds,
-        disabledCheckedIds: disabledValue,
-        handleCheck,
-        canPreview,
-        handlePreview,
-        listMapWithChildrenAndDescendants,
-        searchValue,
-        previewPageId: currentPreviewPageId,
-        pagesMap,
-        isMultipleChoice,
-      }}
-    >
-      {Item}
-    </List>
+    <VirtualPageList
+      checkedIds={checkedIds}
+      disabledValue={disabledValue}
+      onPreview={handlePreview}
+      onSelect={handleSelect}
+      onToggle={handleToggle}
+      previewPageId={currentPreviewPageId}
+      rows={rows}
+      searchValue={effectiveSearchValue}
+      selectionMode={selectionMode}
+      showPreview={canPreview}
+    />
  )
 }

--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
@@ -1,152 +0,0 @@
-import type { ListChildComponentProps } from 'react-window'
-import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
-import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
-import { areEqual } from 'react-window'
-import Checkbox from '@/app/components/base/checkbox'
-import NotionIcon from '@/app/components/base/notion-icon'
-import Radio from '@/app/components/base/radio/ui'
-import { cn } from '@/utils/classnames'
-
-type NotionPageTreeItem = {
-  children: Set<string>
-  descendants: Set<string>
-  depth: number
-  ancestors: string[]
-} & DataSourceNotionPage
-
-type NotionPageTreeMap = Record<string, NotionPageTreeItem>
-
-type NotionPageItem = {
-  expand: boolean
-  depth: number
-} & DataSourceNotionPage
-
-const Item = ({ index, style, data }: ListChildComponentProps<{
-  dataList: NotionPageItem[]
-  handleToggle: (index: number) => void
-  checkedIds: Set<string>
-  disabledCheckedIds: Set<string>
-  handleCheck: (index: number) => void
-  canPreview?: boolean
-  handlePreview: (index: number) => void
-  listMapWithChildrenAndDescendants: NotionPageTreeMap
-  searchValue: string
-  previewPageId: string
-  pagesMap: DataSourceNotionPageMap
-  isMultipleChoice?: boolean
-}>) => {
-  const { t } = useTranslation()
-  const {
-    dataList,
-    handleToggle,
-    checkedIds,
-    disabledCheckedIds,
-    handleCheck,
-    canPreview,
-    handlePreview,
-    listMapWithChildrenAndDescendants,
-    searchValue,
-    previewPageId,
-    pagesMap,
-    isMultipleChoice,
-  } = data
-  const current = dataList[index]
-  const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[current.page_id]
-  const hasChild = currentWithChildrenAndDescendants.descendants.size > 0
-  const ancestors = currentWithChildrenAndDescendants.ancestors
-  const breadCrumbs = ancestors.length ? [...ancestors, current.page_name] : [current.page_name]
-  const disabled = disabledCheckedIds.has(current.page_id)
-
-  const renderArrow = () => {
-    if (hasChild) {
-      return (
-        <div
-          className="mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover"
-          style={{ marginLeft: current.depth * 8 }}
-          onClick={() => handleToggle(index)}
-        >
-          {
-            current.expand
-              ? <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
-              : <RiArrowRightSLine className="h-4 w-4 text-text-tertiary" />
-          }
-        </div>
-      )
-    }
-    if (current.parent_id === 'root' || !pagesMap[current.parent_id]) {
-      return (
-        <div></div>
-      )
-    }
-    return (
-      <div className="mr-1 h-5 w-5 shrink-0" style={{ marginLeft: current.depth * 8 }} />
-    )
-  }
-
-  return (
-    <div
-      className={cn('group flex cursor-pointer items-center rounded-md pl-2 pr-[2px] hover:bg-state-base-hover', previewPageId === current.page_id && 'bg-state-base-hover')}
-      style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
-    >
-      {isMultipleChoice
-        ? (
-            <Checkbox
-              className="mr-2 shrink-0"
-              checked={checkedIds.has(current.page_id)}
-              disabled={disabled}
-              onCheck={() => {
-                handleCheck(index)
-              }}
-            />
-          )
-        : (
-            <Radio
-              className="mr-2 shrink-0"
-              isChecked={checkedIds.has(current.page_id)}
-              disabled={disabled}
-              onCheck={() => {
-                handleCheck(index)
-              }}
-            />
-          )}
-      {!searchValue && renderArrow()}
-      <NotionIcon
-        className="mr-1 shrink-0"
-        type="page"
-        src={current.page_icon}
-      />
-      <div
-        className="grow truncate text-[13px] font-medium leading-4 text-text-secondary"
-        title={current.page_name}
-      >
-        {current.page_name}
-      </div>
-      {
-        canPreview && (
-          <div
-            className="ml-1 hidden h-6 shrink-0 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-xs
-            font-medium leading-4 text-components-button-secondary-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]
-            hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover group-hover:flex"
-            onClick={() => handlePreview(index)}
-          >
-            {t('dataSource.notion.selector.preview', { ns: 'common' })}
-          </div>
-        )
-      }
-      {
-        searchValue && (
-          <div
-            className="ml-1 max-w-[120px] shrink-0 truncate text-xs text-text-quaternary"
-            title={breadCrumbs.join(' / ')}
-          >
-            {breadCrumbs.join(' / ')}
-          </div>
-        )
-      }
-    </div>
-  )
-}
-
-export default React.memo(Item, areEqual)
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/utils.ts
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/utils.ts
@@ -1,39 +0,0 @@
-import type { NotionPageTreeItem, NotionPageTreeMap } from './index'
-import type { DataSourceNotionPageMap } from '@/models/common'
-
-export const recursivePushInParentDescendants = (
-  pagesMap: DataSourceNotionPageMap,
-  listTreeMap: NotionPageTreeMap,
-  current: NotionPageTreeItem,
-  leafItem: NotionPageTreeItem,
-) => {
-  const parentId = current.parent_id
-  const pageId = current.page_id
-
-  if (!parentId || !pageId)
-    return
-
-  if (parentId !== 'root' && pagesMap[parentId]) {
-    if (!listTreeMap[parentId]) {
-      const children = new Set([pageId])
-      const descendants = new Set([pageId, leafItem.page_id])
-      listTreeMap[parentId] = {
-        ...pagesMap[parentId],
-        children,
-        descendants,
-        depth: 0,
-        ancestors: [],
-      }
-    }
-    else {
-      listTreeMap[parentId].children.add(pageId)
-      listTreeMap[parentId].descendants.add(pageId)
-      listTreeMap[parentId].descendants.add(leafItem.page_id)
-    }
-    leafItem.depth++
-    leafItem.ancestors.unshift(listTreeMap[parentId].page_name)
-
-    if (listTreeMap[parentId].parent_id !== 'root')
-      recursivePushInParentDescendants(pagesMap, listTreeMap, listTreeMap[parentId], leafItem)
-  }
-}