refactor(NotionPageSelector): Remove NotionPageSelectorModal component and associated styles

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

@@ -1,2 +1 @@
-export { default as NotionPageSelectorModal } from './notion-page-selector-modal'
 export { default as NotionPageSelector } from './base'

web/app/components/base/notion-page-selector/notion-page-selector-modal/index.module.css

@@ -1,28 +0,0 @@
-.modal {
-  width: 600px !important;
-  max-width: 600px !important;
-  padding: 24px 32px !important;
-}
-
-.operate {
-  padding: 0 8px;
-  min-width: 96px;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  background-color: #ffffff;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 8px;
-  border: 0.5px solid #eaecf0;
-  font-size: 14px;
-  font-weight: 500;
-  color: #667085;
-  cursor: pointer;
-}
-
-.operate-save {
-  margin-left: 8px;
-  border-color: #155eef;
-  background-color: #155eef;
-  color: #ffffff;
-}

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

@@ -1,92 +0,0 @@
-import { useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { XMarkIcon } from '@heroicons/react/24/outline'
-import NotionPageSelector from '../base'
-import s from './index.module.css'
-import type { NotionPage } from '@/models/common'
-import cn from '@/utils/classnames'
-import Modal from '@/app/components/base/modal'
-import { noop } from 'lodash-es'
-import { useGetDefaultDataSourceListAuth } from '@/service/use-datasource'
-import NotionConnector from '../../notion-connector'
-import { useModalContextSelector } from '@/context/modal-context'
-
-type NotionPageSelectorModalProps = {
-  isShow: boolean
-  onClose: () => void
-  onSave: (selectedPages: NotionPage[]) => void
-  datasetId: string
-}
-const NotionPageSelectorModal = ({
-  isShow,
-  onClose,
-  onSave,
-  datasetId,
-}: NotionPageSelectorModalProps) => {
-  const { t } = useTranslation()
-  const setShowAccountSettingModal = useModalContextSelector(state => state.setShowAccountSettingModal)
-  const [selectedPages, setSelectedPages] = useState<NotionPage[]>([])
-
-  const { data: dataSourceList } = useGetDefaultDataSourceListAuth()
-
-  const handleClose = useCallback(() => {
-    onClose()
-  }, [onClose])
-
-  const handleSelectPage = useCallback((newSelectedPages: NotionPage[]) => {
-    setSelectedPages(newSelectedPages)
-  }, [])
-
-  const handleSave = useCallback(() => {
-    onSave(selectedPages)
-  }, [onSave])
-
-  const handleOpenSetting = useCallback(() => {
-    setShowAccountSettingModal({ payload: 'data-source' })
-  }, [setShowAccountSettingModal])
-
-  const authedDataSourceList = dataSourceList?.result || []
-
-  const isNotionAuthed = useMemo(() => {
-    if (!authedDataSourceList) return false
-    const notionSource = authedDataSourceList.find(item => item.provider === 'notion_datasource')
-    if (!notionSource) return false
-    return notionSource.credentials_list.length > 0
-  }, [authedDataSourceList])
-
-  const notionCredentialList = useMemo(() => {
-    return authedDataSourceList.find(item => item.provider === 'notion_datasource')?.credentials_list || []
-  }, [authedDataSourceList])
-
-  return (
-    <Modal
-      className={s.modal}
-      isShow={isShow}
-      onClose={noop}
-    >
-      <div className='mb-6 flex h-8 items-center justify-between'>
-        <div className='text-xl font-semibold text-text-primary'>{t('common.dataSource.notion.selector.addPages')}</div>
-        <div
-          className='-mr-2 flex h-8 w-8 cursor-pointer items-center justify-center'
-          onClick={handleClose}>
-          <XMarkIcon className='h-4 w-4' />
-        </div>
-      </div>
-      {!isNotionAuthed && <NotionConnector onSetting={handleOpenSetting} />}
-      {isNotionAuthed && (
-        <NotionPageSelector
-          credentialList={notionCredentialList}
-          onSelect={handleSelectPage}
-          canPreview={false}
-          datasetId={datasetId}
-        />
-      )}
-      <div className='mt-8 flex justify-end'>
-        <div className={s.operate} onClick={handleClose}>{t('common.operation.cancel')}</div>
-        <div className={cn(s.operate, s['operate-save'])} onClick={handleSave}>{t('common.operation.save')}</div>
-      </div>
-    </Modal>
-  )
-}
-
-export default NotionPageSelectorModal

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

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { useDebounce, useDebounceFn } from 'ahooks'
-import { groupBy } from 'lodash-es'
 import { PlusIcon } from '@heroicons/react/24/solid'
 import { RiDraftLine, RiExternalLinkLine } from '@remixicon/react'
 import AutoDisabledDocument from '../common/document-status-with-action/auto-disabled-document'
@@ -13,13 +12,8 @@ import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import { get } from '@/service/base'
-import { createDocument } from '@/service/datasets'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
-import { NotionPageSelectorModal } from '@/app/components/base/notion-page-selector'
+import { DataSourceType } from '@/models/datasets'
-import type { NotionPage } from '@/models/common'
-import type { CreateDocumentReq } from '@/models/datasets'
-import { DataSourceType, ProcessMode } from '@/models/datasets'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import { useProviderContext } from '@/context/provider-context'
 import cn from '@/utils/classnames'
@@ -31,7 +25,6 @@ import useEditDocumentMetadata from '../metadata/hooks/use-edit-dataset-metadata
 import DatasetMetadataDrawer from '../metadata/metadata-dataset/dataset-metadata-drawer'
 import StatusWithAction from '../common/document-status-with-action/status-with-action'
 import { useDocLink } from '@/context/i18n'
-import { useFetchDefaultProcessRule } from '@/service/knowledge/use-create-dataset'
 import { SimpleSelect } from '../../base/select'
 import StatusItem from './detail/completed/status-item'
 import type { Item } from '@/app/components/base/select'
@@ -86,8 +79,6 @@ type IDocumentsProps = {
   datasetId: string
 }
 
-export const fetcher = (url: string) => get(url, {}, {})
-
 const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
@@ -105,7 +96,6 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
 
   const router = useRouter()
   const dataset = useDatasetDetailContextWithSelector(s => s.dataset)
-  const [notionPageSelectorModalVisible, setNotionPageSelectorModalVisible] = useState(false)
   const [timerCanRun, setTimerCanRun] = useState(true)
   const isDataSourceNotion = dataset?.data_source_type === DataSourceType.NOTION
   const isDataSourceWeb = dataset?.data_source_type === DataSourceType.WEB
@@ -231,66 +221,14 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   const total = documentsRes?.total || 0
 
   const routeToDocCreate = () => {
-    // if dataset is create from pipeline, redirect to create from pipeline page
+    // if dataset is create from pipeline, go to create from pipeline page
     if (dataset?.runtime_mode === 'rag_pipeline') {
       router.push(`/datasets/${datasetId}/documents/create-from-pipeline`)
       return
     }
-    if (isDataSourceNotion) {
-      setNotionPageSelectorModalVisible(true)
-      return
-    }
     router.push(`/datasets/${datasetId}/documents/create`)
   }
 
-  const fetchDefaultProcessRuleMutation = useFetchDefaultProcessRule()
-
-  const handleSaveNotionPageSelected = async (selectedPages: NotionPage[]) => {
-    const workspacesMap = groupBy(selectedPages, 'workspace_id')
-    const workspaces = Object.keys(workspacesMap).map((workspaceId) => {
-      return {
-        workspaceId,
-        pages: workspacesMap[workspaceId],
-      }
-    })
-    const { rules } = await fetchDefaultProcessRuleMutation.mutateAsync('/datasets/process-rule')
-    const params = {
-      data_source: {
-        type: dataset?.data_source_type,
-        info_list: {
-          data_source_type: dataset?.data_source_type,
-          notion_info_list: workspaces.map((workspace) => {
-            return {
-              workspace_id: workspace.workspaceId,
-              pages: workspace.pages.map((page) => {
-                const { page_id, page_name, page_icon, type } = page
-                return {
-                  page_id,
-                  page_name,
-                  page_icon,
-                  type,
-                }
-              }),
-            }
-          }),
-        },
-      },
-      indexing_technique: dataset?.indexing_technique,
-      process_rule: {
-        rules,
-        mode: ProcessMode.general,
-      },
-    } as CreateDocumentReq
-
-    await createDocument({
-      datasetId,
-      body: params,
-    })
-    invalidDocumentList()
-    setTimerCanRun(true)
-    setNotionPageSelectorModalVisible(false)
-  }
-
   const documentsList = isDataSourceNotion ? documentsWithProgress?.data : documentsRes?.data
   const [selectedIds, setSelectedIds] = useState<string[]>([])
 
@@ -402,32 +340,33 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
           ? <Loading type='app' />
           // eslint-disable-next-line sonarjs/no-nested-conditional
           : total > 0
-            ? <List
+            ? (
-              embeddingAvailable={embeddingAvailable}
+              <List
-              documents={documentsList || []}
+                embeddingAvailable={embeddingAvailable}
-              datasetId={datasetId}
+                documents={documentsList || []}
-              onUpdate={handleUpdate}
+                datasetId={datasetId}
-              selectedIds={selectedIds}
+                onUpdate={handleUpdate}
-              onSelectedIdChange={setSelectedIds}
+                selectedIds={selectedIds}
-              statusFilter={statusFilter}
+                onSelectedIdChange={setSelectedIds}
-              onStatusFilterChange={setStatusFilter}
+                statusFilter={statusFilter}
-              pagination={{
+                pagination={{
-                total,
+                  total,
-                limit,
+                  limit,
-                onLimitChange: handleLimitChange,
+                  onLimitChange: handleLimitChange,
-                current: currPage,
+                  current: currPage,
-                onChange: handlePageChange,
+                  onChange: handlePageChange,
-              }}
+                }}
-              onManageMetadata={showEditMetadataModal}
+                onManageMetadata={showEditMetadataModal}
-            />
+              />
-            : <EmptyElement canAdd={embeddingAvailable} onClick={routeToDocCreate} type={isDataSourceNotion ? 'sync' : 'upload'} />
+            )
+            : (
+              <EmptyElement
+                canAdd={embeddingAvailable}
+                onClick={routeToDocCreate}
+                type={isDataSourceNotion ? 'sync' : 'upload'}
+              />
+            )
         }
-        <NotionPageSelectorModal
-          isShow={notionPageSelectorModalVisible}
-          onClose={() => setNotionPageSelectorModalVisible(false)}
-          onSave={handleSaveNotionPageSelected}
-          datasetId={dataset?.id || ''}
-        />
       </div>
     </div>
   )

web/app/components/datasets/documents/list.tsx

@@ -68,7 +68,6 @@ type IDocumentListProps = {
   onUpdate: () => void
   onManageMetadata: () => void
   statusFilter: Item
-  onStatusFilterChange: (filter: string) => void
 }
 
 /**
@@ -261,9 +260,9 @@ const DocumentList: FC<IDocumentListProps> = ({
     return parts[parts.length - 1].toLowerCase()
   }, [])
 
-  const isCreateFromRAGPipeline = useMemo(() => {
+  const isCreateFromRAGPipeline = useCallback((createdFrom: string) => {
-    return datasetConfig?.runtime_mode === 'rag_pipeline'
+    return createdFrom === 'rag_pipeline'
-  }, [datasetConfig?.runtime_mode])
+  }, [])
 
   /**
    * Calculate the data source type
@@ -271,25 +270,17 @@ const DocumentList: FC<IDocumentListProps> = ({
    * DatasourceType: localFile, onlineDocument, websiteCrawl, onlineDrive (new)
    */
   const isLocalFile = useCallback((dataSourceType: DataSourceType | DatasourceType) => {
-    if (isCreateFromRAGPipeline)
+    return dataSourceType === DatasourceType.localFile || dataSourceType === DataSourceType.FILE
-      return dataSourceType === DatasourceType.localFile
+  }, [])
-    return dataSourceType === DataSourceType.FILE
-  }, [isCreateFromRAGPipeline])
   const isOnlineDocument = useCallback((dataSourceType: DataSourceType | DatasourceType) => {
-    if (isCreateFromRAGPipeline)
+    return dataSourceType === DatasourceType.onlineDocument || dataSourceType === DataSourceType.NOTION
-      return dataSourceType === DatasourceType.onlineDocument
+  }, [])
-    return dataSourceType === DataSourceType.NOTION
-  }, [isCreateFromRAGPipeline])
   const isWebsiteCrawl = useCallback((dataSourceType: DataSourceType | DatasourceType) => {
-    if (isCreateFromRAGPipeline)
+    return dataSourceType === DatasourceType.websiteCrawl || dataSourceType === DataSourceType.WEB
-      return dataSourceType === DatasourceType.websiteCrawl
+  }, [])
-    return dataSourceType === DataSourceType.WEB
-  }, [isCreateFromRAGPipeline])
   const isOnlineDrive = useCallback((dataSourceType: DataSourceType | DatasourceType) => {
-    if (isCreateFromRAGPipeline)
+    return dataSourceType === DatasourceType.onlineDrive
-      return dataSourceType === DatasourceType.onlineDrive
+  }, [])
-    return false
-  }, [isCreateFromRAGPipeline])
 
   return (
     <div className='relative flex h-full w-full flex-col'>
@@ -361,7 +352,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                           className='mr-1.5'
                           type='page'
                           src={
-                            isCreateFromRAGPipeline
+                            isCreateFromRAGPipeline(doc.created_from)
                               ? (doc.data_source_info as OnlineDocumentInfo).page.page_icon
                               : (doc.data_source_info as LegacyDataSourceInfo).notion_page_icon
                           }
@@ -371,7 +362,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                         <FileTypeIcon
                           type={
                             extensionToFileType(
-                              isCreateFromRAGPipeline
+                              isCreateFromRAGPipeline(doc.created_from)
                                 ? (doc?.data_source_info as LocalFileInfo)?.extension
                                 : ((doc?.data_source_info as LegacyDataSourceInfo)?.upload_file?.extension ?? fileType),
                             )