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