dify/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx

'use client'

import type {
  AgentIconType,
  AgentReferencingWorkflowResponse,
} from '@dify/contracts/api/console/agent/types.gen'
import type { ReactNode } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import useTimestamp from '@/hooks/use-timestamp'
import Link from '@/next/link'
import { consoleQuery } from '@/service/client'

type WorkflowReferencesTableProps = {
  agentId: string
  enabled?: boolean
}

const workflowTableColSpan = 5

const getWorkflowReferenceHref = (reference: AgentReferencingWorkflowResponse) =>
  `/app/${reference.app_id}/workflow`

export function WorkflowReferencesTable({ agentId, enabled = true }: WorkflowReferencesTableProps) {
  const { t } = useTranslation('agentV2')
  const { t: tCommon } = useTranslation('common')
  const workflowReferencesQuery = useQuery(
    consoleQuery.agent.byAgentId.referencingWorkflows.get.queryOptions({
      input: {
        params: {
          agent_id: agentId,
        },
      },
      enabled,
    }),
  )
  const workflowReferences = workflowReferencesQuery.data?.data ?? []

  return (
    <div className="min-w-0 overflow-x-auto">
      <table className="w-full min-w-[1212px] table-fixed border-collapse">
        <colgroup>
          <col className="w-[572px]" />
          <col className="w-40" />
          <col className="w-32" />
          <col className="w-[204px]" />
          <col className="w-36" />
        </colgroup>
        <thead>
          <tr className="h-7 rounded-lg bg-background-section-burn text-left system-xs-semibold-uppercase text-text-tertiary">
            <th scope="col" className="rounded-l-lg px-3 font-semibold">
              {t(($) => $['agentDetail.access.workflow.table.name'])}
            </th>
            <th scope="col" className="px-3 font-semibold">
              {t(($) => $['agentDetail.access.workflow.table.version'])}
            </th>
            <th scope="col" className="px-3 font-semibold">
              {t(($) => $['agentDetail.access.workflow.table.nodes'])}
            </th>
            <th scope="col" className="px-3 font-semibold">
              {t(($) => $['agentDetail.access.workflow.table.lastUpdated'])}
            </th>
            <th scope="col" className="rounded-r-lg px-3 font-semibold">
              {t(($) => $['agentDetail.access.workflow.table.actions'])}
            </th>
          </tr>
        </thead>
        <tbody className="system-sm-regular text-text-secondary">
          {enabled && workflowReferencesQuery.isPending && (
            <WorkflowAccessStateRow>
              {t(($) => $['agentDetail.access.workflow.loading'])}
            </WorkflowAccessStateRow>
          )}
          {enabled && workflowReferencesQuery.isError && (
            <WorkflowAccessStateRow>
              <div className="flex items-center justify-center gap-2">
                <span>{t(($) => $['agentDetail.access.workflow.loadFailed'])}</span>
                <Button
                  variant="secondary"
                  size="small"
                  onClick={() => {
                    void workflowReferencesQuery.refetch()
                  }}
                >
                  {tCommon(($) => $['operation.retry'])}
                </Button>
              </div>
            </WorkflowAccessStateRow>
          )}
          {enabled && workflowReferencesQuery.isSuccess && workflowReferences.length === 0 && (
            <WorkflowAccessStateRow>
              {t(($) => $['agentDetail.access.workflow.empty'])}
            </WorkflowAccessStateRow>
          )}
          {enabled &&
            workflowReferencesQuery.isSuccess &&
            workflowReferences.map((reference) => (
              <WorkflowAccessRow
                key={`${reference.app_id}:${reference.workflow_id}`}
                reference={reference}
              />
            ))}
        </tbody>
      </table>
    </div>
  )
}

function WorkflowAccessRow({ reference }: { reference: AgentReferencingWorkflowResponse }) {
  const { t } = useTranslation('agentV2')
  const { formatTime } = useTimestamp()
  const imageUrl =
    reference.app_icon_type === 'image' || reference.app_icon_type === 'link'
      ? reference.app_icon
      : undefined
  const iconType = (imageUrl ? 'image' : reference.app_icon_type) as
    | AgentIconType
    | null
    | undefined
  const updatedAt =
    reference.app_updated_at != null
      ? formatTime(
          reference.app_updated_at,
          t(($) => $['roster.dateTimeFormat']),
        )
      : t(($) => $['agentDetail.access.workflow.notAvailable'])
  const nodeCount = reference.node_ids?.length ?? 0

  return (
    <tr className="h-10 border-b border-divider-subtle hover:bg-background-default-hover">
      <td className="px-3">
        <div className="flex min-w-0 items-center gap-2.5">
          <span aria-hidden className="shrink-0">
            <AppIcon
              size="small"
              rounded
              iconType={iconType}
              icon={reference.app_icon ?? undefined}
              background={reference.app_icon_background}
              imageUrl={imageUrl}
            />
          </span>
          <span className="truncate">{reference.app_name}</span>
        </div>
      </td>
      <td className="truncate px-3" translate="no">
        {reference.workflow_version}
      </td>
      <td className="px-3 tabular-nums">
        {t(($) => $['agentDetail.access.workflow.nodeCount'], { count: nodeCount })}
      </td>
      <td className="px-3 tabular-nums" translate="no">
        {updatedAt}
      </td>
      <td className="px-3">
        <Link
          href={getWorkflowReferenceHref(reference)}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={t(($) => $['agentDetail.access.workflow.openInStudioFor'], {
            name: reference.app_name,
          })}
          className="inline-flex items-center gap-0.5 rounded-sm text-text-secondary hover:text-text-accent hover:underline focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
        >
          {t(($) => $['agentDetail.access.workflow.openInStudio'])}
          <span aria-hidden className="i-ri-external-link-line size-4" />
        </Link>
      </td>
    </tr>
  )
}

function WorkflowAccessStateRow({ children }: { children: ReactNode }) {
  return (
    <tr className="h-20 border-b border-divider-subtle">
      <td
        colSpan={workflowTableColSpan}
        aria-live="polite"
        className="px-3 text-center text-text-tertiary"
      >
        {children}
      </td>
    </tr>
  )
}