fix: setting page data source sync and remove notion connection

web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx

@@ -2,11 +2,14 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import Link from 'next/link'
+import { useSWRConfig } from 'swr'
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
 import { Menu, Transition } from '@headlessui/react'
 import cn from 'classnames'
 import s from './index.module.css'
 import { apiPrefix } from '@/config'
+import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
+import Toast from '@/app/components/base/toast'
 import type { DataSourceNotion } from '@/models/common'
 
 type OperateProps = {
@@ -23,6 +26,23 @@ export default function Operate({
   mr-2 mt-[2px] w-4 h-4
   `
   const { t } = useTranslation()
+  const { mutate } = useSWRConfig()
+
+  const updateIntegrates = () => {
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.success'),
+    })
+    mutate({ url: 'data-source/integrates' })
+  }
+  const handleSync = async () => {
+    await syncDataSourceNotion({ url: `/oauth/data-source/notion/${workspace.id}/sync` })
+    updateIntegrates()
+  }
+  const handleRemove = async () => {
+    await updateDataSourceNotionAction({ url: `/data-source/integrates/${workspace.id}/disable` })
+    updateIntegrates()
+  }
 
   return (
     <Menu as="div" className="relative inline-block text-left">
@@ -63,7 +83,7 @@ export default function Operate({
                     </Link>
                   </Menu.Item>
                   <Menu.Item>
-                    <div className={itemClassName}>
+                    <div className={itemClassName} onClick={handleSync}>
                       <div className={cn(s['sync-icon'], itemIconClassName)} />
                       <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
                     </div>
@@ -71,7 +91,7 @@ export default function Operate({
                 </div>
                 <Menu.Item>
                   <div className='p-1'>
-                    <div className={itemClassName}>
+                    <div className={itemClassName} onClick={handleRemove}>
                       <div className={cn(s['trash-icon'], itemIconClassName)} />
                       <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
                     </div>

web/i18n/lang/common.en.ts

@@ -187,6 +187,12 @@ const translation = {
       pagesAuthorized: 'Pages authorized',
       sync: 'Sync',
       remove: 'Remove',
+      selector: {
+        pageSelected: 'Pages Selected',
+        searchPages: 'Search pages...',
+        noSerachResult: 'No search resluts',
+        addPages: 'Add pages',
+      },
     },
   },
   about: {

web/service/common.ts

 import type { Fetcher } from 'swr'
-import { del, get, post, put } from './base'
+import { del, get, patch, post, put } from './base'
 import type {
   AccountIntegrate, CommonResponse, DataSourceNotion,
   IWorkspace, LangGeniusVersionResponse, Member,
@@ -93,3 +93,11 @@ export const switchWorkspace: Fetcher<CommonResponse & { new_tenant: IWorkspace
 export const fetchDataSource: Fetcher<{ data: DataSourceNotion[] }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
   return get(url, { params }) as Promise<{ data: DataSourceNotion[] }>
 }
+
+export const syncDataSourceNotion: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
+  return get(url) as Promise<CommonResponse>
+}
+
+export const updateDataSourceNotionAction: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
+  return patch(url) as Promise<CommonResponse>
+}