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

'use client'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import useSWR from 'swr'
import Panel from '../panel'
import { DataSourceType } from '../panel/types'
import type { DataSourceNotion as TDataSourceNotion } from '@/models/common'
import { useAppContext } from '@/context/app-context'
import { fetchNotionConnection } from '@/service/common'
import NotionIcon from '@/app/components/base/notion-icon'
import { noop } from 'lodash-es'
import { useTranslation } from 'react-i18next'
import Toast from '@/app/components/base/toast'

const Icon: FC<{
  src: string
  name: string
  className: string
}> = ({ src, name, className }) => {
  return (
    <NotionIcon
      src={src}
      name={name}
      className={className}
    />
  )
}
type Props = {
  workspaces: TDataSourceNotion[]
}

const DataSourceNotion: FC<Props> = ({
  workspaces,
}) => {
  const { isCurrentWorkspaceManager } = useAppContext()
  const [canConnectNotion, setCanConnectNotion] = useState(false)
  const { data } = useSWR(canConnectNotion ? '/oauth/data-source/notion' : null, fetchNotionConnection)
  const { t } = useTranslation()

  const connected = !!workspaces.length

  const handleConnectNotion = () => {
    if (!isCurrentWorkspaceManager)
      return

    setCanConnectNotion(true)
  }

  const handleAuthAgain = () => {
    if (data?.data)
      window.location.href = data.data
    else
      setCanConnectNotion(true)
  }

  useEffect(() => {
    if (data && 'data' in data) {
      if (data.data && typeof data.data === 'string' && data.data.startsWith('http')) {
        window.location.href = data.data
      }
      else if (data.data === 'internal') {
        Toast.notify({
          type: 'info',
          message: t('common.dataSource.notion.integratedAlert'),
        })
      }
    }
  }, [data, t])

  return (
    <Panel
      type={DataSourceType.notion}
      isConfigured={connected}
      onConfigure={handleConnectNotion}
      readOnly={!isCurrentWorkspaceManager}
      isSupportList
      configuredList={workspaces.map(workspace => ({
        id: workspace.id,
        logo: ({ className }: { className: string }) => (
          <Icon
            src={workspace.source_info.workspace_icon!}
            name={workspace.source_info.workspace_name}
            className={className}
          />),
        name: workspace.source_info.workspace_name,
        isActive: workspace.is_bound,
        notionConfig: {
          total: workspace.source_info.total || 0,
        },
      }))}
      onRemove={noop} // handled in operation/index.tsx
      notionActions={{
        onChangeAuthorizedPage: handleAuthAgain,
      }}
    />
  )
}
export default React.memo(DataSourceNotion)