dify/web/features/deployments/list/ui/instance-card-sections.tsx

'use client'

import type {
  AccessChannels,
  EnvironmentDeployment,
  Release,
} from '@dify/contracts/enterprise/types.gen'
import type { ReactElement } from 'react'
import { ReleaseSource } from '@dify/contracts/enterprise/types.gen'
import { cn } from '@langgenius/dify-ui/cn'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { PreviewCard, PreviewCardContent, PreviewCardTrigger } from '@langgenius/dify-ui/preview-card'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { useTranslation } from 'react-i18next'
import { SkeletonRectangle } from '@/app/components/base/skeleton'
import Link from '@/next/link'
import { formatDate } from '../../shared/domain/release'
import { EnvironmentDeploymentBadge } from '../../shared/ui/deployment-status-badge'
import { deploymentStatusLabelKey } from '../../shared/ui/deployment-status-style'
import { getInstanceTabHref } from './instance-card-utils'

const VISIBLE_ENVIRONMENT_COUNT = 3

function releaseSourceLabel(release: Release | undefined, t: ReturnType<typeof useTranslation<'deployments'>>['t']) {
  if (release?.source === ReleaseSource.RELEASE_SOURCE_SOURCE_APP || release?.sourceAppId)
    return t('versions.sourceAppOption')
  if (release?.source === ReleaseSource.RELEASE_SOURCE_UPLOAD)
    return t('versions.manualDslOption')
  return '—'
}

export function ReleaseMetaTooltip({ release, deployed, children }: {
  release?: Release
  deployed: boolean
  children: ReactElement
}) {
  const { t } = useTranslation('deployments')

  if (!release)
    return children

  const rows = [
    { label: t('card.tooltip.releaseName'), value: release.displayName },
    { label: t('card.tooltip.deploymentStatus'), value: deployed ? t('card.tooltip.deployed') : t('card.tooltip.notDeployedShort') },
    { label: t('card.tooltip.source'), value: releaseSourceLabel(release, t) },
    { label: t('card.tooltip.createdAt'), value: formatDate(release.createdAt) },
  ]

  return (
    <PreviewCard>
      <PreviewCardTrigger render={children} />
      <PreviewCardContent popupClassName="px-3 py-2">
        <div className="flex min-w-48 flex-col gap-1">
          {rows.map(row => (
            <div key={row.label} className="flex justify-between gap-4">
              <span className="shrink-0 text-text-tertiary">{row.label}</span>
              <span className="min-w-0 truncate text-right text-text-secondary">{row.value}</span>
            </div>
          ))}
        </div>
      </PreviewCardContent>
    </PreviewCard>
  )
}

function EnvironmentChip({ row }: {
  row: EnvironmentDeployment
}) {
  const { t } = useTranslation('deployments')
  const name = row.environment.displayName
  const status = row.status
  const statusLabel = t(deploymentStatusLabelKey(status))
  const tooltipSummary = [
    name,
    row.currentRelease ? row.currentRelease.displayName : undefined,
    statusLabel,
  ].filter(Boolean).join(' · ')

  return (
    <Tooltip>
      <TooltipTrigger
        render={(
          <EnvironmentDeploymentBadge
            row={row}
            showStatus={false}
            summaryLabel={tooltipSummary}
            className="max-w-44"
          />
        )}
      />
      <TooltipContent>
        <span className="whitespace-nowrap text-text-secondary">{tooltipSummary}</span>
      </TooltipContent>
    </Tooltip>
  )
}

function EnvironmentOverflow({ rows }: {
  rows: EnvironmentDeployment[]
}) {
  const { t } = useTranslation('deployments')

  return (
    <Popover>
      <PopoverTrigger
        render={(
          <button
            type="button"
            className="inline-flex h-5 cursor-pointer items-center rounded-md bg-background-section-burn px-1.5 system-xs-medium text-text-tertiary hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
          >
            {t('card.envOverflow', { count: rows.length })}
          </button>
        )}
      />
      <PopoverContent popupClassName="px-3 py-2">
        <div className="flex min-w-40 flex-col gap-1">
          {rows.map((row) => {
            const status = row.status
            const summary = [
              row.environment.displayName,
              row.currentRelease ? row.currentRelease.displayName : undefined,
              t(deploymentStatusLabelKey(status)),
            ].filter(Boolean).join(' · ')

            return (
              <span key={row.environment.id} className="whitespace-nowrap text-text-secondary">{summary}</span>
            )
          })}
        </div>
      </PopoverContent>
    </Popover>
  )
}

export function DeploymentStatusContent({
  rows,
  emptyAction,
}: {
  rows: EnvironmentDeployment[]
  emptyAction?: ReactElement
}) {
  const visibleRows = rows.slice(0, VISIBLE_ENVIRONMENT_COUNT)
  const overflowRows = rows.slice(VISIBLE_ENVIRONMENT_COUNT)

  if (rows.length > 0) {
    return (
      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
        {visibleRows.map(row => (
          <EnvironmentChip key={row.environment.id} row={row} />
        ))}
        {overflowRows.length > 0 && <EnvironmentOverflow rows={overflowRows} />}
      </div>
    )
  }

  if (emptyAction)
    return <div className="flex min-w-0 items-center">{emptyAction}</div>

  return null
}

export function DeploymentAccessLinks({ appInstanceId, access, isLoading }: {
  appInstanceId: string
  access?: AccessChannels
  isLoading?: boolean
}) {
  const { t } = useTranslation('deployments')

  if (isLoading) {
    return (
      <div role="group" aria-label={t('overview.accessStatus')} className="flex min-w-0 grow items-center gap-2">
        <SkeletonRectangle className="my-0 size-4 animate-pulse rounded-sm" />
        <SkeletonRectangle className="my-0 size-4 animate-pulse rounded-sm" />
      </div>
    )
  }

  const links = [
    ...(access?.webAppEnabled
      ? [{
          key: 'webapp',
          href: getInstanceTabHref(appInstanceId, 'access'),
          label: t('card.access.webApp'),
          icon: 'i-ri-global-line',
        }]
      : []),
    ...(access?.webAppEnabled
      ? [{
          key: 'cli',
          href: getInstanceTabHref(appInstanceId, 'access'),
          label: t('card.access.cli'),
          icon: 'i-ri-terminal-box-line',
        }]
      : []),
    ...(access?.developerApiEnabled
      ? [{
          key: 'api-tokens',
          href: getInstanceTabHref(appInstanceId, 'api-tokens'),
          label: t('card.access.api'),
          icon: 'i-ri-code-s-slash-line',
        }]
      : []),
  ]

  if (links.length === 0) {
    return (
      <div role="group" aria-label={t('overview.accessStatus')} className="flex min-w-0 grow items-center gap-1.5 text-text-quaternary">
        <span aria-hidden className="i-ri-link-unlink size-3.5 shrink-0" />
        <span className="truncate system-xs-regular">{t('card.access.none')}</span>
      </div>
    )
  }

  return (
    <div role="group" aria-label={t('overview.accessStatus')} className="flex min-w-0 grow items-center gap-2">
      {links.map(link => (
        <Tooltip key={link.key}>
          <TooltipTrigger
            render={(
              <Link
                href={link.href}
                aria-label={link.label}
                className={cn(
                  'inline-flex h-5 min-w-5 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                )}
              >
                <span aria-hidden className={cn('size-3.5', link.icon)} />
              </Link>
            )}
          />
          <TooltipContent>{link.label}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}