dify/web/app/components/header/account-setting/data-source-page-new/configure.tsx

import type { DataSourceAuth } from './types'
import type {
  AddApiKeyButtonProps,
  AddOAuthButtonProps,
  PluginPayload,
} from '@/app/components/plugins/plugin-auth/types'
import { Button } from '@langgenius/dify-ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { RiAddLine } from '@remixicon/react'
import { memo, useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { AddApiKeyButton, AddOAuthButton } from '@/app/components/plugins/plugin-auth'

type ConfigureProps = {
  item: DataSourceAuth
  pluginPayload: PluginPayload
  onUpdate?: () => void
  disabled?: boolean
}
const Configure = ({ item, pluginPayload, onUpdate, disabled }: ConfigureProps) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const canApiKey = item.credential_schema?.length
  const oAuthData = item.oauth_schema || {}
  const canOAuth = oAuthData.client_schema?.length
  const oAuthButtonProps: AddOAuthButtonProps = useMemo(() => {
    return {
      buttonText: t(($) => $['auth.addOAuth'], { ns: 'plugin' }),
      pluginPayload,
    }
  }, [pluginPayload, t])

  const apiKeyButtonProps: AddApiKeyButtonProps = useMemo(() => {
    return {
      pluginPayload,
      buttonText: t(($) => $['auth.addApi'], { ns: 'plugin' }),
    }
  }, [pluginPayload, t])

  const handleUpdate = useCallback(() => {
    setOpen(false)
    onUpdate?.()
  }, [onUpdate])

  return (
    <>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger
          render={
            <Button className="h-8" variant="secondary-accent">
              <RiAddLine className="size-4" />
              {t(($) => $['dataSource.configure'], { ns: 'common' })}
            </Button>
          }
        />
        <PopoverContent
          placement="bottom-end"
          sideOffset={4}
          alignOffset={-4}
          popupClassName="border-none bg-transparent shadow-none"
        >
          <div className="w-[240px] space-y-1.5 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg">
            {!!canOAuth && (
              <AddOAuthButton
                {...oAuthButtonProps}
                onUpdate={handleUpdate}
                oAuthData={{
                  schema: oAuthData.client_schema || [],
                  is_oauth_custom_client_enabled: oAuthData.is_oauth_custom_client_enabled,
                  is_system_oauth_params_exists: oAuthData.is_system_oauth_params_exists,
                  client_params: oAuthData.oauth_custom_client_params,
                  redirect_uri: oAuthData.redirect_uri,
                }}
                disabled={disabled}
              />
            )}
            {!!canApiKey && !!canOAuth && (
              <div className="flex h-4 items-center p-2 system-2xs-medium-uppercase text-text-quaternary">
                <div className="mr-2 h-px grow bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
                OR
                <div className="ml-2 h-px grow bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
              </div>
            )}
            {!!canApiKey && (
              <AddApiKeyButton
                {...apiKeyButtonProps}
                formSchemas={item.credential_schema}
                onUpdate={handleUpdate}
                disabled={disabled}
              />
            )}
          </div>
        </PopoverContent>
      </Popover>
    </>
  )
}

export default memo(Configure)