feat: Add credential handling to Notion page selector and related components

web/app/components/base/notion-page-selector/base.tsx

@@ -19,6 +19,7 @@ type NotionPageSelectorProps = {
   onPreview?: (selectedPage: NotionPage) => void
   datasetId?: string
   credentialList: DataSourceCredential[]
+  onSelectCredential?: (credentialId: string) => void
 }
 
 const NotionPageSelector = ({
@@ -29,10 +30,13 @@ const NotionPageSelector = ({
   onPreview,
   datasetId = '',
   credentialList,
+  onSelectCredential,
 }: NotionPageSelectorProps) => {
   const [searchValue, setSearchValue] = useState('')
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
 
+  const invalidPreImportNotionPages = useInvalidPreImportNotionPages()
+
   const notionCredentials = useMemo((): NotionCredential[] => {
     return credentialList.map((item) => {
       return {
@@ -47,8 +51,16 @@ const NotionPageSelector = ({
 
   useEffect(() => {
     const credential = notionCredentials.find(item => item.credentialId === currentCredential?.credentialId)
-    if (!credential)
+    if (!credential) {
+      const firstCredential = notionCredentials[0]
+      invalidPreImportNotionPages({ datasetId, credentialId: firstCredential.credentialId })
       setCurrentCredential(notionCredentials[0])
+      onSelect([]) // Clear selected pages when changing credential
+      onSelectCredential?.(firstCredential.credentialId)
+    }
+    else {
+      onSelectCredential?.(credential?.credentialId || '')
+    }
   }, [notionCredentials])
 
   const {
@@ -91,14 +103,13 @@ const NotionPageSelector = ({
     setSearchValue(value)
   }, [])
 
-  const invalidPreImportNotionPages = useInvalidPreImportNotionPages()
-
   const handleSelectCredential = useCallback((credentialId: string) => {
     const credential = notionCredentials.find(item => item.credentialId === credentialId)!
     invalidPreImportNotionPages({ datasetId, credentialId: credential.credentialId })
     setCurrentCredential(credential)
     onSelect([]) // Clear selected pages when changing credential
-  }, [onSelect])
+    onSelectCredential?.(credential.credentialId)
+  }, [invalidPreImportNotionPages, onSelect, onSelectCredential])
 
   const handleSelectPages = useCallback((newSelectedPagesId: Set<string>) => {
     const selectedPages = Array.from(newSelectedPagesId).map(pageId => pagesMapAndSelectedPagesId[0][pageId])

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

@@ -44,15 +44,26 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
   const [fileList, setFiles] = useState<FileItem[]>([])
   const [result, setResult] = useState<createDocumentResponse | undefined>()
   const [notionPages, setNotionPages] = useState<NotionPage[]>([])
+  const [notionCredentialId, setNotionCredentialId] = useState<string>('')
   const [websitePages, setWebsitePages] = useState<CrawlResultItem[]>([])
   const [crawlOptions, setCrawlOptions] = useState<CrawlOptions>(DEFAULT_CRAWL_OPTIONS)
   const [websiteCrawlProvider, setWebsiteCrawlProvider] = useState<DataSourceProvider>(DataSourceProvider.fireCrawl)
   const [websiteCrawlJobId, setWebsiteCrawlJobId] = useState('')
 
+  const {
+    data: dataSourceList,
+    isLoading: isLoadingAuthedDataSourceList,
+    isError: fetchingAuthedDataSourceListError,
+  } = useGetDefaultDataSourceListAuth()
+
   const updateNotionPages = useCallback((value: NotionPage[]) => {
     setNotionPages(value)
   }, [])
 
+  const updateNotionCredentialId = useCallback((credentialId: string) => {
+    setNotionCredentialId(credentialId)
+  }, [])
+
   const updateFileList = useCallback((preparedFiles: FileItem[]) => {
     setFiles(preparedFiles)
   }, [])
@@ -88,12 +99,6 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     setStep(step + delta)
   }, [step, setStep])
 
-  const {
-    data: dataSourceList,
-    isLoading: isLoadingAuthedDataSourceList,
-    isError: fetchingAuthedDataSourceListError,
-  } = useGetDefaultDataSourceListAuth()
-
   if (fetchingAuthedDataSourceListError)
     return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
 
@@ -121,7 +126,9 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
                   updateFile={updateFile}
                   updateFileList={updateFileList}
                   notionPages={notionPages}
+                  notionCredentialId={notionCredentialId}
                   updateNotionPages={updateNotionPages}
+                  updateNotionCredentialId={updateNotionCredentialId}
                   onStepChange={nextStep}
                   websitePages={websitePages}
                   updateWebsitePages={setWebsitePages}
@@ -140,6 +147,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
                   dataSourceType={dataSourceType}
                   files={fileList.map(file => file.file)}
                   notionPages={notionPages}
+                  notionCredentialId={notionCredentialId}
                   websitePages={websitePages}
                   websiteCrawlProvider={websiteCrawlProvider}
                   websiteCrawlJobId={websiteCrawlJobId}

web/app/components/datasets/create/notion-page-preview/index.tsx

@@ -11,11 +11,13 @@ import { fetchNotionPagePreview } from '@/service/datasets'
 
 type IProps = {
   currentPage?: NotionPage
+  notionCredentialId: string
   hidePreview: () => void
 }
 
 const NotionPagePreview = ({
   currentPage,
+  notionCredentialId,
   hidePreview,
 }: IProps) => {
   const { t } = useTranslation()
@@ -29,7 +31,7 @@ const NotionPagePreview = ({
       const res = await fetchNotionPagePreview({
         workspaceID: currentPage.workspace_id,
         pageID: currentPage.page_id,
-        pageType: currentPage.type,
+        credentialID: notionCredentialId,
       })
       setPreviewContent(res.content)
       setLoading(false)

web/app/components/datasets/create/step-one/index.tsx

@@ -32,7 +32,9 @@ type IStepOneProps = {
   updateFileList: (files: FileItem[]) => void
   updateFile: (fileItem: FileItem, progress: number, list: FileItem[]) => void
   notionPages?: NotionPage[]
+  notionCredentialId: string
   updateNotionPages: (value: NotionPage[]) => void
+  updateNotionCredentialId: (credentialId: string) => void
   onStepChange: () => void
   changeType: (type: DataSourceType) => void
   websitePages?: CrawlResultItem[]
@@ -55,7 +57,9 @@ const StepOne = ({
   updateFileList,
   updateFile,
   notionPages = [],
+  notionCredentialId,
   updateNotionPages,
+  updateNotionCredentialId,
   websitePages = [],
   updateWebsitePages,
   onWebsiteCrawlProviderChange,
@@ -253,6 +257,7 @@ const StepOne = ({
                           onSelect={updateNotionPages}
                           onPreview={updateCurrentPage}
                           credentialList={notionCredentialList}
+                          onSelectCredential={updateNotionCredentialId}
                           datasetId={datasetId}
                         />
                       </div>
@@ -317,7 +322,13 @@ const StepOne = ({
         </div>
         <div className='h-full w-1/2 overflow-y-auto'>
           {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
-          {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
+          {currentNotionPage && (
+            <NotionPagePreview
+              currentPage={currentNotionPage}
+              hidePreview={hideNotionPagePreview}
+              notionCredentialId={notionCredentialId}
+            />
+          )}
           {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
         </div>
       </div>

web/app/components/datasets/create/step-two/index.tsx

@@ -79,6 +79,7 @@ type StepTwoProps = {
   dataSourceType: DataSourceType
   files: CustomFile[]
   notionPages?: NotionPage[]
+  notionCredentialId: string
   websitePages?: CrawlResultItem[]
   crawlOptions?: CrawlOptions
   websiteCrawlProvider?: DataSourceProvider
@@ -134,6 +135,7 @@ const StepTwo = ({
   dataSourceType: inCreatePageDataSourceType,
   files,
   notionPages = [],
+  notionCredentialId,
   websitePages = [],
   crawlOptions,
   websiteCrawlProvider = DataSourceProvider.fireCrawl,
@@ -282,6 +284,7 @@ const StepTwo = ({
     indexingTechnique: getIndexing_technique() as any,
     processRule: getProcessRule(),
     dataset_id: datasetId || '',
+    credential_id: notionCredentialId,
   })
 
   const websiteIndexingEstimateQuery = useFetchFileIndexingEstimateForWeb({

web/service/datasets.ts

@@ -183,8 +183,12 @@ export const fetchFileIndexingEstimate: Fetcher<FileIndexingEstimateResponse, In
   return post<FileIndexingEstimateResponse>('/datasets/indexing-estimate', { body })
 }
 
-export const fetchNotionPagePreview: Fetcher<{ content: string }, { workspaceID: string; pageID: string; pageType: string }> = ({ workspaceID, pageID, pageType }) => {
-  return get<{ content: string }>(`notion/workspaces/${workspaceID}/pages/${pageID}/${pageType}/preview`)
+export const fetchNotionPagePreview: Fetcher<{ content: string }, { workspaceID: string; pageID: string; credentialID: string; }> = ({ workspaceID, pageID, credentialID }) => {
+  return get<{ content: string }>(`notion/workspaces/${workspaceID}/pages/${pageID}/preview`, {
+    params: {
+      credential_id: credentialID,
+    },
+  })
 }
 
 export const fetchApiKeysList: Fetcher<ApiKeysListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {

web/service/knowledge/use-create-dataset.ts

@@ -119,6 +119,7 @@ export const useFetchFileIndexingEstimateForFile = (
 type GetFileIndexingEstimateParamsOptionNotion = GetFileIndexingEstimateParamsOptionBase & {
   dataSourceType: DataSourceType.NOTION
   notionPages: NotionPage[]
+  credential_id: string
 }
 
 const getFileIndexingEstimateParamsForNotion = ({