dify/web/features/deployments/deploy-drawer/ui/form-sections.tsx

'use client'

import type { CredentialSlot, Environment } from '@dify/contracts/enterprise/types.gen'
import type { RuntimeCredentialBindingSelections } from '../../shared/components/runtime-credential-bindings-utils'
import { DrawerDescription, DrawerTitle } from '@langgenius/dify-ui/drawer'
import { useAtomValue, useSetAtom } from 'jotai'
import { useTranslation } from 'react-i18next'
import { SkeletonContainer, SkeletonRectangle } from '@/app/components/base/skeleton'
import { DeploymentStateMessage } from '../../shared/components/empty-state'
import { RuntimeCredentialBindingsPanel } from '../../shared/components/runtime-credential-bindings'
import { formatDate, releaseCommit } from '../../shared/domain/release'
import {
  deployDisplayedReleaseAtom,
  deployEnvironmentRowsAtom,
  deployIsExistingReleaseAtom,
  deployLockedEnvironmentAtom,
  deployLockedEnvironmentIdAtom,
  deployReleaseEmptyLabelAtom,
  deployReleaseRowsAtom,
  deploySelectedEnvironmentIdAtom,
  deploySelectedReleaseIdAtom,
  selectDeployEnvironmentAtom,
  selectDeployReleaseAtom,
} from '../state'
import {
  DeploymentSelect,
  EnvironmentRow,
  Field,
} from './select'

export const DEPLOY_DRAWER_BINDING_LIST_CLASS_NAME = 'max-h-none overflow-visible'

function environmentOptionLabel(env: Environment, t: ReturnType<typeof useTranslation<'deployments'>>['t']) {
  const description = env.description.trim()
  if (description)
    return `${env.displayName} · ${description}`

  return `${env.displayName} · ${t(`mode.${env.mode}`)} · ${t(`backend.${env.backend}`)}`
}

export function BindingOptionsPanel({
  slots,
  selections,
  isLoading,
  hasError,
  bindingCountLabel,
  showMissingRequired,
  onChange,
}: {
  slots: CredentialSlot[]
  selections: RuntimeCredentialBindingSelections
  isLoading: boolean
  hasError: boolean
  bindingCountLabel: string
  showMissingRequired: boolean
  onChange: (slot: string, value: string) => void
}) {
  const { t } = useTranslation('deployments')

  if (isLoading) {
    return (
      <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-4">
        <SkeletonContainer className="gap-2">
          <SkeletonRectangle className="h-3 w-32 animate-pulse" />
          <SkeletonRectangle className="h-3 w-2/3 animate-pulse" />
          <SkeletonRectangle className="my-0 h-8 w-full animate-pulse rounded-lg" />
        </SkeletonContainer>
      </div>
    )
  }

  if (hasError) {
    return (
      <div className="rounded-xl border border-divider-subtle bg-background-default-subtle px-3 py-4 system-sm-regular text-text-destructive">
        {t('deployDrawer.bindingOptionsFailed')}
      </div>
    )
  }

  return (
    <RuntimeCredentialBindingsPanel
      slots={slots}
      selections={selections}
      title={t('deployDrawer.runtimeCredentials')}
      hint={t('deployDrawer.bindingSelectionHint')}
      noBindingRequiredLabel={t('deployDrawer.noBindingRequired')}
      noCredentialCandidatesLabel={t('deployDrawer.noCredentialCandidates')}
      selectCredentialLabel={t('deployDrawer.selectCredential')}
      missingRequiredLabel={t('deployDrawer.missingRequiredBinding')}
      bindingCountLabel={bindingCountLabel}
      showMissingRequired={showMissingRequired}
      listClassName={DEPLOY_DRAWER_BINDING_LIST_CLASS_NAME}
      onChange={onChange}
    />
  )
}

export function DeployFormHeader() {
  const { t } = useTranslation('deployments')

  return (
    <div className="shrink-0 border-b border-divider-subtle px-6 py-5 pr-14">
      <DrawerTitle className="title-xl-semi-bold text-text-primary">
        {t('deployDrawer.title')}
      </DrawerTitle>
      <DrawerDescription className="mt-1 system-sm-regular text-text-tertiary">
        {t('deployDrawer.description')}
      </DrawerDescription>
    </div>
  )
}

export function ReleaseField() {
  const { t } = useTranslation('deployments')
  const displayedRelease = useAtomValue(deployDisplayedReleaseAtom)
  const emptyLabel = useAtomValue(deployReleaseEmptyLabelAtom)
  const isExistingRelease = useAtomValue(deployIsExistingReleaseAtom)
  const releases = useAtomValue(deployReleaseRowsAtom)
  const selectedReleaseId = useAtomValue(deploySelectedReleaseIdAtom)
  const selectRelease = useSetAtom(selectDeployReleaseAtom)

  return (
    <Field label={t('deployDrawer.releaseLabel')}>
      {isExistingRelease && displayedRelease
        ? (
            <div className="flex flex-col gap-1">
              <div className="flex items-center justify-between rounded-lg border border-components-panel-border bg-components-panel-bg-blur px-3 py-2">
                <div className="flex min-w-0 items-center gap-2">
                  <span className="shrink-0 font-mono system-sm-semibold text-text-primary">{displayedRelease.displayName}</span>
                  <span className="shrink-0 system-xs-regular text-text-tertiary">·</span>
                  <span className="shrink-0 font-mono system-xs-regular text-text-tertiary">{releaseCommit(displayedRelease)}</span>
                </div>
                <span className="shrink-0 system-xs-regular text-text-quaternary">{formatDate(displayedRelease.createdAt)}</span>
              </div>
              <span className="system-xs-regular text-text-tertiary">
                {t('deployDrawer.existingReleaseHint')}
              </span>
            </div>
          )
        : releases.length === 0
          ? (
              <DeploymentStateMessage variant="compact">
                {emptyLabel ?? t('deployDrawer.noReleaseAvailable')}
              </DeploymentStateMessage>
            )
          : (
              <DeploymentSelect
                value={selectedReleaseId}
                onChange={selectRelease}
                options={releases.map(release => ({
                  value: release.id,
                  label: `${release.displayName} · ${releaseCommit(release)}`,
                }))}
                ariaLabel={t('deployDrawer.releaseLabel')}
                placeholder={t('deployDrawer.selectRelease')}
              />
            )}
    </Field>
  )
}

export function EnvironmentField() {
  const { t } = useTranslation('deployments')
  const environments = useAtomValue(deployEnvironmentRowsAtom)
  const lockedEnv = useAtomValue(deployLockedEnvironmentAtom)
  const lockedEnvId = useAtomValue(deployLockedEnvironmentIdAtom)
  const selectedEnvironmentId = useAtomValue(deploySelectedEnvironmentIdAtom)
  const selectEnvironment = useSetAtom(selectDeployEnvironmentAtom)

  return (
    <Field
      label={t('deployDrawer.targetEnv')}
      hint={lockedEnvId ? t('deployDrawer.lockedHint') : undefined}
    >
      {lockedEnv
        ? <EnvironmentRow env={lockedEnv} />
        : environments.length === 0
          ? (
              <DeploymentStateMessage variant="compact">
                {t('deployDrawer.noNewEnvironmentAvailable')}
              </DeploymentStateMessage>
            )
          : (
              <DeploymentSelect
                value={selectedEnvironmentId}
                onChange={selectEnvironment}
                options={environments.map(env => ({
                  value: env.id,
                  label: environmentOptionLabel(env, t),
                }))}
                ariaLabel={t('deployDrawer.targetEnv')}
                placeholder={t('deployDrawer.selectEnv')}
              />
            )}
    </Field>
  )
}