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

import type { DataSourceCredential } from './types'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@langgenius/dify-ui/dropdown-menu'
import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'

type OperatorProps = {
  credentialItem: DataSourceCredential
  onAction: (action: string, credentialItem: DataSourceCredential) => void
  onRename?: () => void
  canUseCredential?: boolean
  canManageCredential?: boolean
}
const Operator = ({
  credentialItem,
  onAction,
  onRename,
  canUseCredential = false,
  canManageCredential = false,
}: OperatorProps) => {
  const { t } = useTranslation()
  const { type } = credentialItem
  const handleAction = useCallback(
    (action: string, allowed: boolean) => {
      if (!allowed) return

      queueMicrotask(() => {
        if (action === 'rename') {
          onRename?.()
          return
        }
        onAction(action, credentialItem)
      })
    },
    [credentialItem, onAction, onRename],
  )

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <ActionButton
            size="l"
            className="focus-visible:ring-2 focus-visible:ring-state-accent-solid data-popup-open:bg-state-base-hover"
            aria-label={t(($) => $['operation.more'], { ns: 'common' })}
          >
            <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
          </ActionButton>
        }
      />
      <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[200px]">
        <DropdownMenuItem
          disabled={!canUseCredential}
          className="h-auto gap-2 py-2"
          onClick={() => handleAction('setDefault', canUseCredential)}
        >
          <span aria-hidden className="i-ri-home-9-line size-4 text-text-tertiary" />
          <div className="system-sm-semibold text-text-secondary">
            {t(($) => $['auth.setDefault'], { ns: 'plugin' })}
          </div>
        </DropdownMenuItem>
        {type === CredentialTypeEnum.OAUTH2 && (
          <DropdownMenuItem
            disabled={!canManageCredential}
            className="h-auto gap-2 py-2"
            onClick={() => handleAction('rename', canManageCredential)}
          >
            <span aria-hidden className="i-ri-edit-line size-4 text-text-tertiary" />
            <div className="system-sm-semibold text-text-secondary">
              {t(($) => $['operation.rename'], { ns: 'common' })}
            </div>
          </DropdownMenuItem>
        )}
        {type === CredentialTypeEnum.API_KEY && (
          <DropdownMenuItem
            disabled={!canManageCredential}
            className="h-auto gap-2 py-2"
            onClick={() => handleAction('edit', canManageCredential)}
          >
            <span aria-hidden className="i-ri-equalizer-2-line size-4 text-text-tertiary" />
            <div className="system-sm-semibold text-text-secondary">
              {t(($) => $['operation.edit'], { ns: 'common' })}
            </div>
          </DropdownMenuItem>
        )}
        {type === CredentialTypeEnum.OAUTH2 && (
          <DropdownMenuItem
            disabled={!canManageCredential}
            className="h-auto gap-2 py-2"
            onClick={() => handleAction('change', canManageCredential)}
          >
            <span aria-hidden className="i-ri-sticky-note-add-line size-4 text-text-tertiary" />
            <div className="mb-1 system-sm-semibold text-text-secondary">
              {t(($) => $['dataSource.notion.changeAuthorizedPages'], { ns: 'common' })}
            </div>
          </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem
          disabled={!canManageCredential}
          variant="destructive"
          className="h-auto gap-2 py-2"
          onClick={() => handleAction('delete', canManageCredential)}
        >
          <span aria-hidden className="i-ri-delete-bin-line size-4" />
          <div className="system-sm-semibold">
            {t(($) => $['operation.remove'], { ns: 'common' })}
          </div>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default memo(Operator)