{currentFile &&
}
{currentNotionPage && (
diff --git a/web/app/components/datasets/create/step-one/sources/file-source.spec.tsx b/web/app/components/datasets/create/step-one/sources/file-source.spec.tsx
new file mode 100644
index 0000000000..830f92d203
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/file-source.spec.tsx
@@ -0,0 +1,447 @@
+import type { FileSourceProps } from '../types'
+import type { FileItem } from '@/models/datasets'
+import { fireEvent, render, screen } from '@testing-library/react'
+import FileSource from './file-source'
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+// Mock child components
+vi.mock('../../file-uploader', () => ({
+ __esModule: true,
+ default: ({ fileList, onPreview, prepareFileList, titleClassName }: {
+ fileList: unknown[]
+ onPreview: (file: File) => void
+ prepareFileList: (files: unknown[]) => void
+ titleClassName?: string
+ }) => (
+
+ {fileList.length}
+
+
+
+ ),
+}))
+
+vi.mock('../common/next-step-button', () => ({
+ __esModule: true,
+ default: ({ disabled, onClick }: { disabled: boolean, onClick: () => void }) => (
+
+ ),
+}))
+
+vi.mock('../common/vector-space-alert', () => ({
+ __esModule: true,
+ default: ({ show }: { show: boolean }) => (
+ show ?
Vector Space Full
: null
+ ),
+}))
+
+vi.mock('../upgrade-card', () => ({
+ __esModule: true,
+ default: () =>
Upgrade Card
,
+}))
+
+// Helper to create mock FileItem
+// CustomFile extends File and has optional id field
+// Use { noId: true } to create a file without id (simulating uploading state)
+const createMockFileItem = (options?: { id?: string, noId?: boolean }): FileItem => {
+ const { id = 'file-123', noId = false } = options || {}
+
+ // Create a base file-like object with the required properties
+ // We need to cast to unknown first then to the target type since File is a browser API
+ const baseFile = {
+ name: 'test.txt',
+ size: 1024,
+ type: 'text/plain',
+ lastModified: Date.now(),
+ webkitRelativePath: '',
+ arrayBuffer: vi.fn(),
+ bytes: vi.fn(),
+ slice: vi.fn(),
+ stream: vi.fn(),
+ text: vi.fn(),
+ ...(noId ? {} : { id }), // Only add id if not noId
+ }
+
+ return {
+ fileID: 'test-file-id',
+ file: baseFile,
+ progress: 100,
+ } as unknown as FileItem
+}
+
+const createDefaultProps = (): FileSourceProps => ({
+ files: [],
+ updateFileList: vi.fn(),
+ updateFile: vi.fn(),
+ onPreview: vi.fn(),
+ isShowVectorSpaceFull: false,
+ onStepChange: vi.fn(),
+ shouldShowDataSourceTypeList: true,
+ supportBatchUpload: true,
+ enableBilling: false,
+ isSandboxPlan: false,
+})
+
+describe('FileSource', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // ==========================================
+ // Rendering Tests
+ // ==========================================
+ describe('Rendering', () => {
+ it('should render FileUploader component', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('file-uploader')).toBeInTheDocument()
+ })
+
+ it('should render NextStepButton component', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeInTheDocument()
+ })
+
+ it('should pass files to FileUploader', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem(), createMockFileItem()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('file-count')).toHaveTextContent('2')
+ })
+
+ it('should pass custom titleClassName when shouldShowDataSourceTypeList is false', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ shouldShowDataSourceTypeList: false,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ const fileUploader = screen.getByTestId('file-uploader')
+ expect(fileUploader).toHaveAttribute('data-title-classname', 'mt-[30px] !mb-[44px] !text-lg')
+ })
+
+ it('should pass undefined titleClassName when shouldShowDataSourceTypeList is true', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ shouldShowDataSourceTypeList: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ const fileUploader = screen.getByTestId('file-uploader')
+ expect(fileUploader).toHaveAttribute('data-title-classname', '')
+ })
+ })
+
+ // ==========================================
+ // Next Button Disabled State Tests
+ // ==========================================
+ describe('Next Button Disabled State', () => {
+ it('should disable next button when no files', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should disable next button when file has no id (still uploading)', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem({ noId: true })],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should disable next button when vector space is full', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem()],
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should enable next button when files are uploaded and space available', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should enable next button with multiple uploaded files', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem({ id: 'id1' }), createMockFileItem({ id: 'id2' })],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should disable next button when any file is still uploading', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem({ id: 'id1' }), createMockFileItem({ noId: true })],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+ })
+
+ // ==========================================
+ // Vector Space Alert Tests
+ // ==========================================
+ describe('Vector Space Alert', () => {
+ it('should not show vector space alert by default', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('vector-space-alert')).not.toBeInTheDocument()
+ })
+
+ it('should show vector space alert when isShowVectorSpaceFull is true', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('vector-space-alert')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // Upgrade Card Tests
+ // ==========================================
+ describe('Upgrade Card', () => {
+ it('should not show upgrade card by default', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('upgrade-card')).not.toBeInTheDocument()
+ })
+
+ it('should not show upgrade card when enableBilling is false', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ enableBilling: false,
+ isSandboxPlan: true,
+ files: [createMockFileItem()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('upgrade-card')).not.toBeInTheDocument()
+ })
+
+ it('should not show upgrade card when not sandbox plan', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ enableBilling: true,
+ isSandboxPlan: false,
+ files: [createMockFileItem()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('upgrade-card')).not.toBeInTheDocument()
+ })
+
+ it('should not show upgrade card when no files', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ enableBilling: true,
+ isSandboxPlan: true,
+ files: [],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('upgrade-card')).not.toBeInTheDocument()
+ })
+
+ it('should show upgrade card when all conditions are met', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ enableBilling: true,
+ isSandboxPlan: true,
+ files: [createMockFileItem()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('upgrade-card')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // Callback Tests
+ // ==========================================
+ describe('Callbacks', () => {
+ it('should call onStepChange when next button is clicked', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem()],
+ }
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('next-step-button'))
+
+ // Assert
+ expect(props.onStepChange).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call onPreview when file preview is triggered', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-preview'))
+
+ // Assert
+ expect(props.onPreview).toHaveBeenCalledWith({ name: 'test.txt' })
+ })
+
+ it('should call updateFileList when prepareFileList is triggered', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-prepare'))
+
+ // Assert
+ expect(props.updateFileList).toHaveBeenCalledWith([])
+ })
+ })
+
+ // ==========================================
+ // Memoization Tests
+ // ==========================================
+ describe('Memoization', () => {
+ it('should update nextDisabled when files change', () => {
+ // Arrange
+ const props = createDefaultProps()
+ const { rerender } = render(
)
+
+ // Assert initial state
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+
+ // Act - update with uploaded files
+ rerender(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should update nextDisabled when isShowVectorSpaceFull changes', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ files: [createMockFileItem()],
+ }
+ const { rerender } = render(
)
+
+ // Assert initial state
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+
+ // Act - set vector space full
+ rerender(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+ })
+})
diff --git a/web/app/components/datasets/create/step-one/sources/file-source.tsx b/web/app/components/datasets/create/step-one/sources/file-source.tsx
new file mode 100644
index 0000000000..cc995c2c71
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/file-source.tsx
@@ -0,0 +1,58 @@
+'use client'
+import type { FileSourceProps } from '../types'
+import { useMemo } from 'react'
+import FileUploader from '../../file-uploader'
+import NextStepButton from '../common/next-step-button'
+import VectorSpaceAlert from '../common/vector-space-alert'
+import UpgradeCard from '../upgrade-card'
+
+/**
+ * File data source component
+ * Handles file upload functionality for dataset creation
+ */
+const FileSource = ({
+ files,
+ updateFileList,
+ updateFile,
+ onPreview,
+ isShowVectorSpaceFull,
+ onStepChange,
+ shouldShowDataSourceTypeList,
+ supportBatchUpload,
+ enableBilling,
+ isSandboxPlan,
+}: FileSourceProps) => {
+ const nextDisabled = useMemo(() => {
+ if (!files.length)
+ return true
+ if (files.some(file => !file.file.id))
+ return true
+ return isShowVectorSpaceFull
+ }, [files, isShowVectorSpaceFull])
+
+ const showUpgradeCard = enableBilling && isSandboxPlan && files.length > 0
+
+ return (
+ <>
+
+
+
+ {showUpgradeCard && (
+
+ )}
+
+ )
+}
+
+export default FileSource
diff --git a/web/app/components/datasets/create/step-one/sources/index.ts b/web/app/components/datasets/create/step-one/sources/index.ts
new file mode 100644
index 0000000000..a34ab8b2ca
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/index.ts
@@ -0,0 +1,3 @@
+export { default as FileSource } from './file-source'
+export { default as NotionSource } from './notion-source'
+export { default as WebSource } from './web-source'
diff --git a/web/app/components/datasets/create/step-one/sources/notion-source.spec.tsx b/web/app/components/datasets/create/step-one/sources/notion-source.spec.tsx
new file mode 100644
index 0000000000..39267bef75
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/notion-source.spec.tsx
@@ -0,0 +1,409 @@
+import type { NotionSourceProps } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
+import NotionSource from './notion-source'
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+// Mock child components
+vi.mock('@/app/components/base/notion-connector', () => ({
+ __esModule: true,
+ default: ({ onSetting }: { onSetting: () => void }) => (
+
+
+
+ ),
+}))
+
+vi.mock('@/app/components/base/notion-page-selector', () => ({
+ NotionPageSelector: ({
+ value,
+ onSelect,
+ onPreview,
+ }: {
+ value: string[]
+ onSelect: (pages: unknown[]) => void
+ onPreview: (page: unknown) => void
+ }) => (
+
+ {value.length}
+
+
+
+ ),
+}))
+
+vi.mock('../common/next-step-button', () => ({
+ __esModule: true,
+ default: ({ disabled, onClick }: { disabled: boolean, onClick: () => void }) => (
+
+ ),
+}))
+
+vi.mock('../common/vector-space-alert', () => ({
+ __esModule: true,
+ default: ({ show }: { show: boolean }) => (
+ show ?
Vector Space Full
: null
+ ),
+}))
+
+// Helper to create mock NotionPage
+const createMockNotionPage = (pageId: string = 'page-123') => ({
+ page_id: pageId,
+ page_name: 'Test Page',
+ page_icon: null,
+ parent_id: 'parent-1',
+ type: 'page',
+ is_bound: true,
+ workspace_id: 'workspace-1',
+})
+
+// Helper to create mock credential list
+const createMockCredentialList = () => ([
+ {
+ credential: {},
+ type: CredentialTypeEnum.API_KEY,
+ name: 'Test Credential',
+ id: 'cred-1',
+ is_default: true,
+ avatar_url: '',
+ },
+])
+
+const createDefaultProps = (): NotionSourceProps => ({
+ datasetId: undefined,
+ notionPages: [],
+ notionCredentialId: 'credential-1',
+ updateNotionPages: vi.fn(),
+ updateNotionCredentialId: vi.fn(),
+ onPreview: vi.fn(),
+ onSetting: vi.fn(),
+ isShowVectorSpaceFull: false,
+ onStepChange: vi.fn(),
+ isNotionAuthed: true,
+ notionCredentialList: createMockCredentialList(),
+})
+
+describe('NotionSource', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // ==========================================
+ // Rendering Tests - Not Authed
+ // ==========================================
+ describe('Rendering - Not Authed', () => {
+ it('should render NotionConnector when not authenticated', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ isNotionAuthed: false,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('notion-connector')).toBeInTheDocument()
+ expect(screen.queryByTestId('notion-page-selector')).not.toBeInTheDocument()
+ })
+
+ it('should call onSetting when NotionConnector setting is clicked', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ isNotionAuthed: false,
+ }
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('notion-setting'))
+
+ // Assert
+ expect(props.onSetting).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ // ==========================================
+ // Rendering Tests - Authed
+ // ==========================================
+ describe('Rendering - Authed', () => {
+ it('should render NotionPageSelector when authenticated', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
+ expect(screen.queryByTestId('notion-connector')).not.toBeInTheDocument()
+ })
+
+ it('should render NextStepButton when authenticated', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeInTheDocument()
+ })
+
+ it('should pass selected page ids to NotionPageSelector', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionPages: [createMockNotionPage('page-1'), createMockNotionPage('page-2')],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('selected-count')).toHaveTextContent('2')
+ })
+ })
+
+ // ==========================================
+ // Next Button Disabled State Tests
+ // ==========================================
+ describe('Next Button Disabled State', () => {
+ it('should disable next button when no pages selected', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should disable next button when vector space is full', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionPages: [createMockNotionPage()],
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should enable next button when pages are selected and space available', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionPages: [createMockNotionPage()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should enable next button with multiple selected pages', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionPages: [createMockNotionPage('p1'), createMockNotionPage('p2')],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should disable next button when both no pages and vector space full', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionPages: [],
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+ })
+
+ // ==========================================
+ // Vector Space Alert Tests
+ // ==========================================
+ describe('Vector Space Alert', () => {
+ it('should not show vector space alert by default', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('vector-space-alert')).not.toBeInTheDocument()
+ })
+
+ it('should show vector space alert when isShowVectorSpaceFull is true', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('vector-space-alert')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // Callback Tests
+ // ==========================================
+ describe('Callbacks', () => {
+ it('should call onStepChange when next button is clicked', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionPages: [createMockNotionPage()],
+ }
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('next-step-button'))
+
+ // Assert
+ expect(props.onStepChange).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call updateNotionPages when pages are selected', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-select'))
+
+ // Assert
+ expect(props.updateNotionPages).toHaveBeenCalledWith([{ page_id: 'page-1' }])
+ })
+
+ it('should call onPreview when page preview is triggered', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-preview'))
+
+ // Assert
+ expect(props.onPreview).toHaveBeenCalledWith({ page_id: 'preview-page' })
+ })
+ })
+
+ // ==========================================
+ // Edge Cases
+ // ==========================================
+ describe('Edge Cases', () => {
+ it('should handle empty credential list', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ notionCredentialList: [],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
+ })
+
+ it('should handle undefined datasetId', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ datasetId: undefined,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
+ })
+
+ it('should handle with datasetId provided', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ datasetId: 'dataset-123',
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // State Update Tests
+ // ==========================================
+ describe('State Updates', () => {
+ it('should update button state when notionPages changes', () => {
+ // Arrange
+ const props = createDefaultProps()
+ const { rerender } = render(
)
+
+ // Assert initial state
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+
+ // Act - add pages
+ rerender(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should switch from connector to selector when auth changes', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ isNotionAuthed: false,
+ }
+ const { rerender } = render(
)
+
+ // Assert initial state
+ expect(screen.getByTestId('notion-connector')).toBeInTheDocument()
+
+ // Act - authenticate
+ rerender(
)
+
+ // Assert
+ expect(screen.queryByTestId('notion-connector')).not.toBeInTheDocument()
+ expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/create/step-one/sources/notion-source.tsx b/web/app/components/datasets/create/step-one/sources/notion-source.tsx
new file mode 100644
index 0000000000..2dee77c6b8
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/notion-source.tsx
@@ -0,0 +1,49 @@
+'use client'
+import type { NotionSourceProps } from '../types'
+import NotionConnector from '@/app/components/base/notion-connector'
+import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
+import NextStepButton from '../common/next-step-button'
+import VectorSpaceAlert from '../common/vector-space-alert'
+
+/**
+ * Notion data source component
+ * Handles Notion page selection for dataset creation
+ */
+const NotionSource = ({
+ datasetId,
+ notionPages,
+ notionCredentialId,
+ updateNotionPages,
+ updateNotionCredentialId,
+ onPreview,
+ onSetting,
+ isShowVectorSpaceFull,
+ onStepChange,
+ isNotionAuthed,
+ notionCredentialList,
+}: NotionSourceProps) => {
+ const nextDisabled = isShowVectorSpaceFull || !notionPages.length
+
+ if (!isNotionAuthed) {
+ return
+ }
+
+ return (
+ <>
+
+ page.page_id)}
+ onSelect={updateNotionPages}
+ onPreview={onPreview}
+ credentialList={notionCredentialList}
+ onSelectCredential={updateNotionCredentialId}
+ datasetId={datasetId}
+ />
+
+
+
+
+ )
+}
+
+export default NotionSource
diff --git a/web/app/components/datasets/create/step-one/sources/web-source.spec.tsx b/web/app/components/datasets/create/step-one/sources/web-source.spec.tsx
new file mode 100644
index 0000000000..9598dbe1b1
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/web-source.spec.tsx
@@ -0,0 +1,536 @@
+import type { WebSourceProps } from '../types'
+import type { CrawlResultItem } from '@/models/datasets'
+import { fireEvent, render, screen } from '@testing-library/react'
+import WebSource from './web-source'
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+// Mock child components
+vi.mock('../../website', () => ({
+ __esModule: true,
+ default: ({
+ checkedCrawlResult,
+ onPreview,
+ onCheckedCrawlResultChange,
+ onCrawlProviderChange,
+ onJobIdChange,
+ onCrawlOptionsChange,
+ }: {
+ checkedCrawlResult: CrawlResultItem[]
+ onPreview: (item: CrawlResultItem) => void
+ onCheckedCrawlResultChange: (items: CrawlResultItem[]) => void
+ onCrawlProviderChange: (provider: unknown) => void
+ onJobIdChange: (jobId: string) => void
+ onCrawlOptionsChange: (options: unknown) => void
+ }) => (
+
+ {checkedCrawlResult.length}
+
+
+
+
+
+
+ ),
+}))
+
+vi.mock('../common/next-step-button', () => ({
+ __esModule: true,
+ default: ({ disabled, onClick }: { disabled: boolean, onClick: () => void }) => (
+
+ ),
+}))
+
+vi.mock('../common/vector-space-alert', () => ({
+ __esModule: true,
+ default: ({ show }: { show: boolean }) => (
+ show ?
Vector Space Full
: null
+ ),
+}))
+
+// Helper to create mock CrawlResultItem
+const createMockWebsitePage = (url: string = 'https://example.com'): CrawlResultItem => ({
+ source_url: url,
+ markdown: '# Test Page\nContent here',
+ title: 'Test Page',
+ description: 'A test page',
+})
+
+// Helper to create mock DataSourceAuth
+const createMockDataSourceAuth = () => ({
+ author: 'test-author',
+ provider: 'firecrawl',
+ plugin_id: 'plugin-1',
+ plugin_unique_identifier: 'firecrawl-plugin',
+ icon: 'icon-url',
+ name: 'Firecrawl',
+ label: { en_US: 'Firecrawl', zh_Hans: 'Firecrawl' },
+ description: { en_US: 'Web crawler', zh_Hans: 'Web crawler' },
+ credentials_list: [],
+})
+
+// Helper to create default crawl options
+const createDefaultCrawlOptions = () => ({
+ crawl_sub_pages: true,
+ only_main_content: true,
+ includes: '',
+ excludes: '',
+ limit: 10,
+ max_depth: 2,
+ use_sitemap: false,
+})
+
+const createDefaultProps = (): WebSourceProps => ({
+ shouldShowDataSourceTypeList: true,
+ websitePages: [],
+ updateWebsitePages: vi.fn(),
+ onPreview: vi.fn(),
+ onWebsiteCrawlProviderChange: vi.fn(),
+ onWebsiteCrawlJobIdChange: vi.fn(),
+ crawlOptions: createDefaultCrawlOptions(),
+ onCrawlOptionsChange: vi.fn(),
+ authedDataSourceList: [],
+ isShowVectorSpaceFull: false,
+ onStepChange: vi.fn(),
+})
+
+describe('WebSource', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // ==========================================
+ // Rendering Tests
+ // ==========================================
+ describe('Rendering', () => {
+ it('should render Website component', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('website-component')).toBeInTheDocument()
+ })
+
+ it('should render NextStepButton component', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeInTheDocument()
+ })
+
+ it('should pass websitePages count to Website component', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [createMockWebsitePage(), createMockWebsitePage('https://page2.com')],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('checked-count')).toHaveTextContent('2')
+ })
+
+ it('should apply margin top when shouldShowDataSourceTypeList is false', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ shouldShowDataSourceTypeList: false,
+ }
+
+ // Act
+ const { container } = render(
)
+
+ // Assert
+ const wrapper = container.querySelector('.mt-12')
+ expect(wrapper).toBeInTheDocument()
+ })
+
+ it('should not apply margin top when shouldShowDataSourceTypeList is true', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ const { container } = render(
)
+
+ // Assert
+ const wrapper = container.querySelector('.mt-12')
+ expect(wrapper).not.toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // Next Button Disabled State Tests
+ // ==========================================
+ describe('Next Button Disabled State', () => {
+ it('should disable next button when no pages', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should disable next button when vector space is full', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [createMockWebsitePage()],
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should enable next button when pages are selected and space available', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [createMockWebsitePage()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should enable next button with multiple selected pages', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [createMockWebsitePage('https://a.com'), createMockWebsitePage('https://b.com')],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should disable next button when both no pages and vector space full', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [],
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+ })
+
+ // ==========================================
+ // Vector Space Alert Tests
+ // ==========================================
+ describe('Vector Space Alert', () => {
+ it('should not show vector space alert by default', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.queryByTestId('vector-space-alert')).not.toBeInTheDocument()
+ })
+
+ it('should show vector space alert when isShowVectorSpaceFull is true', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ isShowVectorSpaceFull: true,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('vector-space-alert')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // Callback Tests
+ // ==========================================
+ describe('Callbacks', () => {
+ it('should call onStepChange when next button is clicked', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [createMockWebsitePage()],
+ }
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('next-step-button'))
+
+ // Assert
+ expect(props.onStepChange).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call onPreview when page preview is triggered', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-preview'))
+
+ // Assert
+ expect(props.onPreview).toHaveBeenCalledWith({ source_url: 'https://test.com', markdown: 'test', title: 'Test', description: 'Test description' })
+ })
+
+ it('should call updateWebsitePages when checked result changes', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-check-change'))
+
+ // Assert
+ expect(props.updateWebsitePages).toHaveBeenCalledWith([{ source_url: 'https://new.com', markdown: 'new', title: 'New', description: 'New description' }])
+ })
+
+ it('should call onWebsiteCrawlProviderChange when provider changes', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-provider-change'))
+
+ // Assert
+ expect(props.onWebsiteCrawlProviderChange).toHaveBeenCalledWith('firecrawl')
+ })
+
+ it('should call onWebsiteCrawlJobIdChange when job id changes', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-job-change'))
+
+ // Assert
+ expect(props.onWebsiteCrawlJobIdChange).toHaveBeenCalledWith('job-123')
+ })
+
+ it('should call onCrawlOptionsChange when options change', () => {
+ // Arrange
+ const props = createDefaultProps()
+ render(
)
+
+ // Act
+ fireEvent.click(screen.getByTestId('trigger-options-change'))
+
+ // Assert
+ expect(props.onCrawlOptionsChange).toHaveBeenCalledWith({ max_depth: 2 })
+ })
+ })
+
+ // ==========================================
+ // Props Passing Tests
+ // ==========================================
+ describe('Props Passing', () => {
+ it('should handle empty authedDataSourceList', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ authedDataSourceList: [],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('website-component')).toBeInTheDocument()
+ })
+
+ it('should handle authedDataSourceList with items', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ authedDataSourceList: [createMockDataSourceAuth()],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('website-component')).toBeInTheDocument()
+ })
+
+ it('should handle custom crawl options', () => {
+ // Arrange
+ const customOptions = {
+ crawl_sub_pages: false,
+ only_main_content: false,
+ includes: '*.html',
+ excludes: '*.pdf',
+ limit: 50,
+ max_depth: 5,
+ use_sitemap: true,
+ }
+ const props = {
+ ...createDefaultProps(),
+ crawlOptions: customOptions,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('website-component')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // State Update Tests
+ // ==========================================
+ describe('State Updates', () => {
+ it('should update button state when websitePages changes', () => {
+ // Arrange
+ const props = createDefaultProps()
+ const { rerender } = render(
)
+
+ // Assert initial state
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+
+ // Act - add pages
+ rerender(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should update button state when isShowVectorSpaceFull changes', () => {
+ // Arrange
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [createMockWebsitePage()],
+ }
+ const { rerender } = render(
)
+
+ // Assert initial state
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+
+ // Act - set vector space full
+ rerender(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).toBeDisabled()
+ })
+
+ it('should update layout when shouldShowDataSourceTypeList changes', () => {
+ // Arrange
+ const props = createDefaultProps()
+ const { container, rerender } = render(
)
+
+ // Assert initial state - no mt-12
+ expect(container.querySelector('.mt-12')).not.toBeInTheDocument()
+
+ // Act - change to false
+ rerender(
)
+
+ // Assert - has mt-12
+ expect(container.querySelector('.mt-12')).toBeInTheDocument()
+ })
+ })
+
+ // ==========================================
+ // Edge Cases
+ // ==========================================
+ describe('Edge Cases', () => {
+ it('should handle page with minimal data', () => {
+ // Arrange
+ const minimalPage: CrawlResultItem = {
+ source_url: 'https://minimal.com',
+ markdown: '',
+ title: '',
+ description: '',
+ }
+ const props = {
+ ...createDefaultProps(),
+ websitePages: [minimalPage],
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+
+ it('should handle many pages', () => {
+ // Arrange
+ const manyPages = Array.from({ length: 100 }, (_, i) =>
+ createMockWebsitePage(`https://page${i}.com`))
+ const props = {
+ ...createDefaultProps(),
+ websitePages: manyPages,
+ }
+
+ // Act
+ render(
)
+
+ // Assert
+ expect(screen.getByTestId('checked-count')).toHaveTextContent('100')
+ expect(screen.getByTestId('next-step-button')).not.toBeDisabled()
+ })
+ })
+})
diff --git a/web/app/components/datasets/create/step-one/sources/web-source.tsx b/web/app/components/datasets/create/step-one/sources/web-source.tsx
new file mode 100644
index 0000000000..a5890fa2d8
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/sources/web-source.tsx
@@ -0,0 +1,47 @@
+'use client'
+import type { WebSourceProps } from '../types'
+import { cn } from '@/utils/classnames'
+import Website from '../../website'
+import NextStepButton from '../common/next-step-button'
+import VectorSpaceAlert from '../common/vector-space-alert'
+
+/**
+ * Web data source component
+ * Handles website crawling for dataset creation
+ */
+const WebSource = ({
+ shouldShowDataSourceTypeList,
+ websitePages,
+ updateWebsitePages,
+ onPreview,
+ onWebsiteCrawlProviderChange,
+ onWebsiteCrawlJobIdChange,
+ crawlOptions,
+ onCrawlOptionsChange,
+ authedDataSourceList,
+ isShowVectorSpaceFull,
+ onStepChange,
+}: WebSourceProps) => {
+ const nextDisabled = isShowVectorSpaceFull || !websitePages.length
+
+ return (
+ <>
+
+
+
+
+
+
+ )
+}
+
+export default WebSource
diff --git a/web/app/components/datasets/create/step-one/types.ts b/web/app/components/datasets/create/step-one/types.ts
new file mode 100644
index 0000000000..033677ae21
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/types.ts
@@ -0,0 +1,74 @@
+import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
+import type { DataSourceProvider, NotionPage } from '@/models/common'
+import type { CrawlOptions, CrawlResultItem, DataSourceType, FileItem } from '@/models/datasets'
+
+// Base props shared by all data source components
+export type DataSourceBaseProps = {
+ isShowVectorSpaceFull: boolean
+ onStepChange: () => void
+}
+
+// File source specific props
+export type FileSourceProps = DataSourceBaseProps & {
+ files: FileItem[]
+ updateFileList: (files: FileItem[]) => void
+ updateFile: (fileItem: FileItem, progress: number, list: FileItem[]) => void
+ onPreview: (file: File) => void
+ shouldShowDataSourceTypeList: boolean
+ supportBatchUpload: boolean
+ enableBilling: boolean
+ isSandboxPlan: boolean
+}
+
+// Notion source specific props
+export type NotionSourceProps = DataSourceBaseProps & {
+ datasetId?: string
+ notionPages: NotionPage[]
+ notionCredentialId: string
+ updateNotionPages: (value: NotionPage[]) => void
+ updateNotionCredentialId: (credentialId: string) => void
+ onPreview: (page: NotionPage) => void
+ onSetting: () => void
+ isNotionAuthed: boolean
+ notionCredentialList: DataSourceAuth['credentials_list']
+}
+
+// Web source specific props
+export type WebSourceProps = DataSourceBaseProps & {
+ shouldShowDataSourceTypeList: boolean
+ websitePages: CrawlResultItem[]
+ updateWebsitePages: (value: CrawlResultItem[]) => void
+ onPreview: (website: CrawlResultItem) => void
+ onWebsiteCrawlProviderChange: (provider: DataSourceProvider) => void
+ onWebsiteCrawlJobIdChange: (jobId: string) => void
+ crawlOptions: CrawlOptions
+ onCrawlOptionsChange: (payload: CrawlOptions) => void
+ authedDataSourceList: DataSourceAuth[]
+}
+
+// Data source selector props
+export type DataSourceSelectorProps = {
+ dataSourceType: DataSourceType
+ dataSourceTypeDisable: boolean
+ changeType: (type: DataSourceType) => void
+ onHideFilePreview: () => void
+ onHideNotionPreview: () => void
+ onHideWebsitePreview: () => void
+}
+
+// Preview state type
+export type PreviewState = {
+ currentFile: File | undefined
+ currentNotionPage: NotionPage | undefined
+ currentWebsite: CrawlResultItem | undefined
+}
+
+// Preview actions type
+export type PreviewActions = {
+ updateCurrentFile: (file: File) => void
+ hideFilePreview: () => void
+ updateCurrentPage: (page: NotionPage) => void
+ hideNotionPagePreview: () => void
+ updateWebsite: (website: CrawlResultItem) => void
+ hideWebsitePreview: () => void
+}