Feat/dataset notion import (#392)

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

web/app/components/datasets/create/step-one/index.module.css

@@ -107,3 +107,53 @@
   background: center no-repeat url(../assets/folder-plus.svg);
   background-size: contain;
 }
+
+.notionConnectionTip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 24px;
+  max-width: 640px;
+  background: #F9FAFB;
+  border-radius: 16px;
+}
+
+.notionIcon {
+  display: flex;
+  padding: 12px;
+  width: 48px;
+  height: 48px;
+  background: #fff center no-repeat url(../assets/notion.svg);
+  background-size: 24px;
+  border: 0.5px solid #EAECF5;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  border-radius: 12px;
+}
+
+.notionConnectionTip .title {
+  position: relative;
+  margin: 24px 0 4px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  color: #374151;
+}
+.notionConnectionTip .title::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  right: -12px;
+  width: 16px;
+  height: 16px;
+  background: center no-repeat url(../assets/Icon-3-dots.svg);
+  background-size: contain;
+}
+.notionConnectionTip .tip {
+  margin-bottom: 20px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+  color: #6B7280;
+}

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

@@ -1,36 +1,82 @@
 'use client'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { File } from '@/models/datasets'
+import cn from 'classnames'
 import FilePreview from '../file-preview'
 import FileUploader from '../file-uploader'
+import NotionPagePreview from '../notion-page-preview'
 import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
-import Button from '@/app/components/base/button'
-
-import cn from 'classnames'
 import s from './index.module.css'
+import type { File } from '@/models/datasets'
+import type { DataSourceNotionPage } from '@/models/common'
+import { DataSourceType } from '@/models/datasets'
+import Button from '@/app/components/base/button'
+import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
 
 type IStepOneProps = {
-  datasetId?: string,
-  file?: File,
-  updateFile: (file?: File) => void,
-  onStepChange: () => void,
+  datasetId?: string
+  dataSourceType: DataSourceType
+  dataSourceTypeDisable: Boolean
+  hasConnection: boolean
+  onSetting: () => void
+  file?: File
+  updateFile: (file?: File) => void
+  notionPages?: any[]
+  updateNotionPages: (value: any[]) => void
+  onStepChange: () => void
+  changeType: (type: DataSourceType) => void
+}
+
+type Page = DataSourceNotionPage & { workspace_id: string }
+
+type NotionConnectorProps = {
+  onSetting: () => void
+}
+export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={s.notionConnectionTip}>
+      <span className={s.notionIcon}/>
+      <div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
+      <div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
+      <Button className='h-8' type='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
+    </div>
+  )
 }
 
 const StepOne = ({
   datasetId,
+  dataSourceType,
+  dataSourceTypeDisable,
+  changeType,
+  hasConnection,
+  onSetting,
   onStepChange,
   file,
   updateFile,
+  notionPages = [],
+  updateNotionPages,
 }: IStepOneProps) => {
-  const [dataSourceType, setDataSourceType] = useState('FILE')
   const [showModal, setShowModal] = useState(false)
+  const [showFilePreview, setShowFilePreview] = useState(true)
+  const [currentNotionPage, setCurrentNotionPage] = useState<Page | undefined>()
   const { t } = useTranslation()
 
+  const hidePreview = () => setShowFilePreview(false)
+
   const modalShowHandle = () => setShowModal(true)
 
   const modalCloseHandle = () => setShowModal(false)
 
+  const updateCurrentPage = (page: Page) => {
+    setCurrentNotionPage(page)
+  }
+
+  const hideNotionPagePreview = () => {
+    setCurrentNotionPage(undefined)
+  }
+
   return (
     <div className='flex w-full h-full'>
       <div className='grow overflow-y-auto relative'>
@@ -38,41 +84,76 @@ const StepOne = ({
         <div className={s.form}>
           <div className={s.dataSourceTypeList}>
             <div
-              className={cn(s.dataSourceItem, dataSourceType === 'FILE' && s.active)}
-              onClick={() => setDataSourceType('FILE')}
+              className={cn(
+                s.dataSourceItem,
+                dataSourceType === DataSourceType.FILE && s.active,
+                dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
+              )}
+              onClick={() => {
+                if (dataSourceTypeDisable)
+                  return
+                changeType(DataSourceType.FILE)
+                hidePreview()
+              }}
             >
-              <span className={cn(s.datasetIcon)}/>
+              <span className={cn(s.datasetIcon)} />
               {t('datasetCreation.stepOne.dataSourceType.file')}
             </div>
             <div
-              className={cn(s.dataSourceItem, s.disabled, dataSourceType === 'notion' && s.active)}
-              // onClick={() => setDataSourceType('notion')}
+              className={cn(
+                s.dataSourceItem,
+                dataSourceType === DataSourceType.NOTION && s.active,
+                dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
+              )}
+              onClick={() => {
+                if (dataSourceTypeDisable)
+                  return
+                changeType(DataSourceType.NOTION)
+                hidePreview()
+              }}
             >
-              <span className={s.comingTag}>Coming soon</span>
-              <span className={cn(s.datasetIcon, s.notion)}/>
+              <span className={cn(s.datasetIcon, s.notion)} />
               {t('datasetCreation.stepOne.dataSourceType.notion')}
             </div>
             <div
-              className={cn(s.dataSourceItem, s.disabled, dataSourceType === 'web' && s.active)}
-              // onClick={() => setDataSourceType('web')}
+              className={cn(s.dataSourceItem, s.disabled, dataSourceType === DataSourceType.WEB && s.active)}
+            // onClick={() => changeType(DataSourceType.WEB)}
             >
               <span className={s.comingTag}>Coming soon</span>
-              <span className={cn(s.datasetIcon, s.web)}/>  
+              <span className={cn(s.datasetIcon, s.web)} />
               {t('datasetCreation.stepOne.dataSourceType.web')}
             </div>
           </div>
-          <FileUploader onFileUpdate={updateFile} file={file} />
-          <Button disabled={!file} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+          {dataSourceType === DataSourceType.FILE && (
+            <>
+              <FileUploader onFileUpdate={updateFile} file={file} />
+              <Button disabled={!file} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+            </>
+          )}
+          {dataSourceType === DataSourceType.NOTION && (
+            <>
+              {!hasConnection && <NotionConnector onSetting={onSetting} />}
+              {hasConnection && (
+                <>
+                  <div className='mb-8 w-[640px]'>
+                    <NotionPageSelector value={notionPages.map(page => page.page_id)} onSelect={updateNotionPages} onPreview={updateCurrentPage} />
+                  </div>
+                  <Button disabled={!notionPages.length} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+                </>
+              )}
+            </>
+          )}
           {!datasetId && (
             <>
-              <div className={s.dividerLine}/>
+              <div className={s.dividerLine} />
               <div onClick={modalShowHandle} className={s.OtherCreationOption}>{t('datasetCreation.stepOne.emptyDatasetCreation')}</div>
             </>
           )}
         </div>
-        <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle}/>
+        <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
       </div>
-      {file && <FilePreview file={file} />}
+      {file && showFilePreview && <FilePreview file={file} hidePreview={hidePreview} />}
+      {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
     </div>
   )
 }