dify/web/app/components/tools/mcp/provider-card.tsx

'use client'
import type { ComponentProps, KeyboardEvent, MouseEvent } from 'react'
import type { ToolWithProvider } from '../../workflow/types'
import {
  AlertDialog,
  AlertDialogActions,
  AlertDialogCancelButton,
  AlertDialogConfirmButton,
  AlertDialogContent,
  AlertDialogTitle,
} from '@langgenius/dify-ui/alert-dialog'
import { cn } from '@langgenius/dify-ui/cn'
import { StatusDot } from '@langgenius/dify-ui/status-dot'
import { useBoolean } from 'ahooks'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Icon from '@/app/components/plugins/card/base/card-icon'
import { useCanManageMCP } from '@/app/components/tools/hooks/use-tool-permissions'
import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
import OperationDropdown from './detail/operation-dropdown'
import MCPModal from './modal'

type Props = Readonly<{
  currentProvider?: ToolWithProvider
  data: ToolWithProvider
  handleSelect: (providerID: string) => void
  onUpdate: (providerID: string) => void
  onDeleted: () => void
}>

type MCPModalConfirmPayload = Parameters<ComponentProps<typeof MCPModal>['onConfirm']>[0]
type MutationResult = {
  result?: string
}

const isMCPCardActionTarget = (target: EventTarget | null) => {
  return target instanceof HTMLElement && Boolean(target.closest('[data-mcp-card-action]'))
}

const MCPCard = ({ currentProvider, data, onUpdate, handleSelect, onDeleted }: Props) => {
  const { t } = useTranslation()
  const { formatTimeFromNow } = useFormatTimeFromNow()
  const canManageMCP = useCanManageMCP()
  const isConfigured = data.is_team_authorization && data.tools.length > 0
  const updatedAtText = data.updated_at
    ? `${t(($) => $['mcp.updateTime'], { ns: 'tools' })} ${formatTimeFromNow(data.updated_at * 1000)}`
    : undefined

  const { mutateAsync: updateMCP } = useUpdateMCP({})
  const { mutateAsync: deleteMCP } = useDeleteMCP({})

  const [isOperationShow, setIsOperationShow] = useState(false)

  const [isShowUpdateModal, { setTrue: showUpdateModal, setFalse: hideUpdateModal }] =
    useBoolean(false)

  const [isShowDeleteConfirm, { setTrue: showDeleteConfirm, setFalse: hideDeleteConfirm }] =
    useBoolean(false)

  const [deleting, { setTrue: showDeleting, setFalse: hideDeleting }] = useBoolean(false)

  const handleUpdate = useCallback(
    async (form: MCPModalConfirmPayload) => {
      if (!canManageMCP) return

      const res = (await updateMCP({
        ...form,
        provider_id: data.id,
      })) as MutationResult
      if (res.result === 'success') {
        hideUpdateModal()
        onUpdate(data.id)
      }
    },
    [canManageMCP, data, updateMCP, hideUpdateModal, onUpdate],
  )

  const handleDelete = useCallback(async () => {
    if (!canManageMCP) return

    showDeleting()
    const res = (await deleteMCP(data.id)) as MutationResult
    hideDeleting()
    if (res.result === 'success') {
      hideDeleteConfirm()
      onDeleted()
    }
  }, [canManageMCP, showDeleting, deleteMCP, data.id, hideDeleting, hideDeleteConfirm, onDeleted])

  const handleSelectProvider = useCallback(() => {
    handleSelect(data.id)
  }, [data.id, handleSelect])

  const handleCardClick = useCallback(
    (event: MouseEvent<HTMLDivElement>) => {
      if (isMCPCardActionTarget(event.target)) return

      handleSelectProvider()
    },
    [handleSelectProvider],
  )

  const handleCardKeyDown = useCallback(
    (event: KeyboardEvent<HTMLDivElement>) => {
      if (isMCPCardActionTarget(event.target)) return
      if (event.key !== 'Enter' && event.key !== ' ') return

      event.preventDefault()
      handleSelectProvider()
    },
    [handleSelectProvider],
  )

  return (
    <div
      role="button"
      tabIndex={0}
      onClick={handleCardClick}
      onKeyDown={handleCardKeyDown}
      className={cn(
        'group relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
        currentProvider?.id === data.id &&
          'border-components-option-card-option-selected-border bg-components-panel-on-panel-item-bg-hover',
      )}
    >
      <div className="flex shrink-0 items-center gap-3 rounded-t-xl p-4">
        <div className="shrink-0 overflow-hidden rounded-lg border-[0.5px] border-effects-icon-border">
          <Icon src={data.icon} />
        </div>
        <div className="min-w-0 grow">
          <div className="mb-1 truncate system-md-semibold text-text-secondary" title={data.name}>
            {data.name}
          </div>
          <div
            className="truncate system-xs-regular text-text-tertiary"
            title={data.server_identifier}
          >
            {data.server_identifier}
          </div>
        </div>
      </div>
      <div className="flex items-center gap-1 rounded-b-xl pt-1.5 pr-2.5 pb-2.5 pl-4">
        <div className="flex w-0 grow items-center gap-2">
          {data.tools.length > 0 && (
            <div className="shrink-0 system-xs-regular text-text-tertiary">
              {t(($) => $['mcp.toolsCount'], { ns: 'tools', count: data.tools.length })}
            </div>
          )}
          {!data.tools.length && (
            <div className="shrink-0 system-xs-regular text-text-tertiary">
              {t(($) => $['mcp.noTools'], { ns: 'tools' })}
            </div>
          )}
          {updatedAtText && (
            <>
              <div className="system-xs-regular text-divider-deep">·</div>
              <div className="truncate system-xs-regular text-text-tertiary" title={updatedAtText}>
                {updatedAtText}
              </div>
            </>
          )}
        </div>
        {isConfigured && <StatusDot status="success" size="small" className="shrink-0" />}
        {!isConfigured && (
          <div className="flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 system-xs-medium text-util-colors-red-red-500">
            {t(($) => $['mcp.noConfigured'], { ns: 'tools' })}
            <StatusDot status="error" size="small" />
          </div>
        )}
      </div>
      {canManageMCP && (
        <div
          data-mcp-card-action
          className={cn(
            'absolute top-2.5 right-2.5 hidden group-hover:block',
            isOperationShow && 'block',
          )}
        >
          <OperationDropdown
            inCard
            onOpenChange={setIsOperationShow}
            onEdit={showUpdateModal}
            onRemove={showDeleteConfirm}
          />
        </div>
      )}
      {canManageMCP && isShowUpdateModal && (
        <MCPModal
          data={data}
          show={isShowUpdateModal}
          onConfirm={handleUpdate}
          onHide={hideUpdateModal}
        />
      )}
      <AlertDialog
        open={canManageMCP && isShowDeleteConfirm}
        onOpenChange={(open) => !open && hideDeleteConfirm()}
      >
        <AlertDialogContent>
          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
              {t(($) => $['mcp.delete'], { ns: 'tools' })}
            </AlertDialogTitle>
            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
              {t(($) => $['mcp.deleteConfirmTitle'], { ns: 'tools', mcp: data.name })}
            </div>
          </div>
          <AlertDialogActions>
            <AlertDialogCancelButton>
              {t(($) => $['operation.cancel'], { ns: 'common' })}
            </AlertDialogCancelButton>
            <AlertDialogConfirmButton loading={deleting} disabled={deleting} onClick={handleDelete}>
              {t(($) => $['operation.confirm'], { ns: 'common' })}
            </AlertDialogConfirmButton>
          </AlertDialogActions>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
export default MCPCard