Feat/dataset notion import (#392)

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

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

@@ -0,0 +1,28 @@
+.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

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import NotionPageSelector from '../base'
+import type { NotionPageSelectorValue } from '../base'
+import s from './index.module.css'
+import Modal from '@/app/components/base/modal'
+
+type NotionPageSelectorModalProps = {
+  isShow: boolean
+  onClose: () => void
+  onSave: (selectedPages: NotionPageSelectorValue[]) => void
+  datasetId: string
+}
+const NotionPageSelectorModal = ({
+  isShow,
+  onClose,
+  onSave,
+  datasetId,
+}: NotionPageSelectorModalProps) => {
+  const { t } = useTranslation()
+  const [selectedPages, setSelectedPages] = useState<NotionPageSelectorValue[]>([])
+
+  const handleClose = () => {
+    onClose()
+  }
+  const handleSelectPage = (newSelectedPages: NotionPageSelectorValue[]) => {
+    setSelectedPages(newSelectedPages)
+  }
+  const handleSave = () => {
+    onSave(selectedPages)
+  }
+
+  return (
+    <Modal
+      className={s.modal}
+      isShow={isShow}
+      onClose={() => {}}
+    >
+      <div className='flex items-center justify-between mb-6 h-8'>
+        <div className='text-xl font-semibold text-gray-900'>{t('common.dataSource.notion.selector.addPages')}</div>
+        <div
+          className='flex items-center justify-center -mr-2 w-8 h-8 cursor-pointer'
+          onClick={handleClose}>
+          <XMarkIcon className='w-4 h-4' />
+        </div>
+      </div>
+      <NotionPageSelector
+        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