feat: add api-based extension & external data tool & moderation (#1459)

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

@@ -8,11 +8,10 @@ import WorkspaceSelector from './workspace-selector'
 import SearchInput from './search-input'
 import PageSelector from './page-selector'
 import { preImportNotionPages } from '@/service/datasets'
-import AccountSetting from '@/app/components/header/account-setting'
 import { NotionConnector } from '@/app/components/datasets/create/step-one'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
 import { ToastContext } from '@/app/components/base/toast'
-
+import { useModalContext } from '@/context/modal-context'
 
 type NotionPageSelectorProps = {
   value?: string[]
@@ -40,8 +39,8 @@ const NotionPageSelector = ({
   const { data, mutate } = useSWR({ url: '/notion/pre-import/pages', datasetId }, preImportNotionPages)
   const [prevData, setPrevData] = useState(data)
   const [searchValue, setSearchValue] = useState('')
-  const [showDataSourceSetting, setShowDataSourceSetting] = useState(false)
   const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
+  const { setShowAccountSettingModal } = useModalContext()
 
   const notionWorkspaces = useMemo(() => {
     return data?.notion_info || []
@@ -112,7 +111,7 @@ const NotionPageSelector = ({
                 <div className='mx-1 w-[1px] h-3 bg-gray-200' />
                 <div
                   className={cn(s['setting-icon'], 'w-6 h-6 cursor-pointer')}
-                  onClick={() => setShowDataSourceSetting(true)}
+                  onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
                 />
                 <div className='grow' />
                 <SearchInput
@@ -135,17 +134,9 @@ const NotionPageSelector = ({
             </>
           )
           : (
-            <NotionConnector onSetting={() => setShowDataSourceSetting(true)} />
+            <NotionConnector onSetting={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })} />
           )
       }
-      {
-        showDataSourceSetting && (
-          <AccountSetting activeTab='data-source' onCancel={() => {
-            setShowDataSourceSetting(false)
-            mutate()
-          }} />
-        )
-      }
     </div>
   )
 }