dify/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx

import type { ReactNode } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { RiAddLine } from '@remixicon/react'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'

type PluginAuthInDataSourceNodeProps = {
  children?: ReactNode
  isAuthorized?: boolean
  onJumpToDataSourcePage: () => void
}
const PluginAuthInDataSourceNode = ({
  children,
  isAuthorized,
  onJumpToDataSourcePage,
}: PluginAuthInDataSourceNodeProps) => {
  const { t } = useTranslation()
  return (
    <>
      {!isAuthorized && (
        <div className="px-4 pb-2">
          <Button className="w-full" variant="primary" onClick={onJumpToDataSourcePage}>
            <RiAddLine className="mr-1 size-4" />
            {t(($) => $['integrations.connect'], { ns: 'common' })}
          </Button>
        </div>
      )}
      {isAuthorized && children}
    </>
  )
}

export default memo(PluginAuthInDataSourceNode)