Feat/dataset notion import (#392)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/datasets/create/index.tsx

@@ -1,32 +1,44 @@
 'use client'
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import type { DataSet, File, createDocumentResponse } from '@/models/datasets'
-import { fetchTenantInfo } from '@/service/common'
-import { fetchDataDetail } from '@/service/datasets'
-
+import AppUnavailable from '../../base/app-unavailable'
 import StepsNavBar from './steps-nav-bar'
 import StepOne from './step-one'
 import StepTwo from './step-two'
 import StepThree from './step-three'
+import { DataSourceType } from '@/models/datasets'
+import type { DataSet, File, createDocumentResponse } from '@/models/datasets'
+import { fetchDataSource, fetchTenantInfo } from '@/service/common'
+import { fetchDataDetail } from '@/service/datasets'
+import type { DataSourceNotionPage } from '@/models/common'
+
 import AccountSetting from '@/app/components/header/account-setting'
-import AppUnavailable from '../../base/app-unavailable'
+
+type Page = DataSourceNotionPage & { workspace_id: string }
 
 type DatasetUpdateFormProps = {
-  datasetId?: string;
+  datasetId?: string
 }
 
 const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
   const { t } = useTranslation()
   const [hasSetAPIKEY, setHasSetAPIKEY] = useState(true)
   const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
+  const [hasConnection, setHasConnection] = useState(true)
+  const [isShowDataSourceSetting, { setTrue: showDataSourceSetting, setFalse: hideDataSourceSetting }] = useBoolean()
+  const [dataSourceType, setDataSourceType] = useState<DataSourceType>(DataSourceType.FILE)
   const [step, setStep] = useState(1)
   const [indexingTypeCache, setIndexTypeCache] = useState('')
   const [file, setFile] = useState<File | undefined>()
   const [result, setResult] = useState<createDocumentResponse | undefined>()
   const [hasError, setHasError] = useState(false)
 
+  const [notionPages, setNotionPages] = useState<Page[]>([])
+  const updateNotionPages = (value: Page[]) => {
+    setNotionPages(value)
+  }
+
   const updateFile = (file?: File) => {
     setFile(file)
   }
@@ -50,9 +62,15 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     const hasSetKey = data.providers.some(({ is_valid }) => is_valid)
     setHasSetAPIKEY(hasSetKey)
   }
+  const checkNotionConnection = async () => {
+    const { data } = await fetchDataSource({ url: '/data-source/integrates' })
+    const hasConnection = data.filter(item => item.provider === 'notion') || []
+    setHasConnection(hasConnection.length > 0)
+  }
 
   useEffect(() => {
     checkAPIKey()
+    checkNotionConnection()
   }, [])
 
   const [detail, setDetail] = useState<DataSet | null>(null)
@@ -62,16 +80,16 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
         try {
           const detail = await fetchDataDetail(datasetId)
           setDetail(detail)
-        } catch (e) {
+        }
+        catch (e) {
           setHasError(true)
         }
       }
     })()
   }, [datasetId])
 
-  if (hasError) {
+  if (hasError)
     return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
-  }
 
   return (
     <div className='flex' style={{ height: 'calc(100vh - 56px)' }}>
@@ -80,9 +98,16 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
       </div>
       <div className="grow bg-white">
         {step === 1 && <StepOne
+          hasConnection={hasConnection}
+          onSetting={showDataSourceSetting}
           datasetId={datasetId}
+          dataSourceType={dataSourceType}
+          dataSourceTypeDisable={!!detail?.data_source_type}
+          changeType={setDataSourceType}
           file={file}
           updateFile={updateFile}
+          notionPages={notionPages}
+          updateNotionPages={updateNotionPages}
           onStepChange={nextStep}
         />}
         {(step === 2 && (!datasetId || (datasetId && !!detail))) && <StepTwo
@@ -90,7 +115,9 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
           onSetting={showSetAPIKey}
           indexingType={detail?.indexing_technique || ''}
           datasetId={datasetId}
+          dataSourceType={dataSourceType}
           file={file}
+          notionPages={notionPages}
           onStepChange={changeStep}
           updateIndexingTypeCache={updateIndexingTypeCache}
           updateResultCache={updateResultCache}
@@ -106,6 +133,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
         await checkAPIKey()
         hideSetAPIkey()
       }} />}
+      {isShowDataSourceSetting && <AccountSetting activeTab="data-source" onCancel={hideDataSourceSetting}/>}
     </div>
   )
 }