dify/web/features/deployments/detail/access/channels/section.tsx

'use client'

import type { AccessChannels, AccessEndpoint } from '@dify/contracts/enterprise/types.gen'
import type { ReactNode } from 'react'
import { Switch, SwitchSkeleton } from '@langgenius/dify-ui/switch'
import { useMutation } from '@tanstack/react-query'
import { useAtomValue } from 'jotai'
import { useTranslation } from 'react-i18next'
import { SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
import { consoleQuery } from '@/service/client'
import { deploymentRouteAppInstanceIdAtom } from '../../../route-state'
import { DeploymentEmptyState, DeploymentNoticeState, DeploymentStateMessage } from '../../../shared/components/empty-state'
import { CopyPill, EndpointRow } from '../../../shared/components/endpoint'
import { Section } from '../../../shared/components/section'
import {
  accessSettingsAtom,
  accessSettingsIsErrorAtom,
  accessSettingsIsLoadingAtom,
} from '../state'
import { getUrlOrigin } from './url'

const ACCESS_CHANNEL_SKELETON_SECTIONS = [
  { key: 'webapp' },
  { key: 'cli' },
]

function AccessChannelsSwitch({ checked, accessChannels, disabled }: {
  checked: boolean
  accessChannels?: AccessChannels
  disabled?: boolean
}) {
  const { t } = useTranslation('deployments')
  const appInstanceId = useAtomValue(deploymentRouteAppInstanceIdAtom)
  const toggleAccessChannel = useMutation(consoleQuery.enterprise.accessService.updateAccessChannels.mutationOptions())

  return (
    <Switch
      aria-label={t('access.channels.title')}
      checked={checked}
      disabled={disabled || !appInstanceId}
      loading={toggleAccessChannel.isPending}
      onCheckedChange={(enabled) => {
        if (!appInstanceId)
          return

        toggleAccessChannel.mutate({
          params: { appInstanceId },
          body: {
            appInstanceId,
            webAppEnabled: enabled,
            developerApiEnabled: accessChannels?.developerApiEnabled ?? false,
          },
        })
      }}
    />
  )
}

function AccessChannelsSkeleton() {
  return (
    <div className="overflow-hidden rounded-lg border border-divider-subtle bg-components-panel-bg">
      {ACCESS_CHANNEL_SKELETON_SECTIONS.map(section => (
        <SkeletonRow
          key={section.key}
          className="flex flex-col gap-3 border-t border-divider-subtle px-4 py-4 first:border-t-0 lg:flex-row lg:items-start"
        >
          <div className="flex min-w-0 gap-2.5 lg:w-70">
            <SkeletonRectangle className="my-0 size-7 shrink-0 animate-pulse rounded-lg" />
            <div className="flex min-w-0 flex-col gap-1.5">
              <SkeletonRectangle className="h-3.5 w-24 animate-pulse" />
              <SkeletonRectangle className="h-3 w-40 animate-pulse" />
            </div>
          </div>
          <SkeletonRectangle className="my-0 h-8 min-w-0 flex-1 animate-pulse rounded-lg" />
        </SkeletonRow>
      ))}
    </div>
  )
}

function ChannelInfo({ icon, title, description }: {
  icon: ReactNode
  title: string
  description?: string
}) {
  return (
    <div className="flex min-w-0 items-start gap-2.5">
      <span className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg bg-background-section-burn text-text-tertiary">
        {icon}
      </span>
      <div className="min-w-0">
        <div className="flex min-w-0 flex-wrap items-center gap-2">
          <span className="system-sm-medium text-text-primary">{title}</span>
        </div>
        {description && (
          <div className="system-xs-regular text-text-tertiary">{description}</div>
        )}
      </div>
    </div>
  )
}

function ChannelRow({ info, children }: {
  info: ReactNode
  children: ReactNode
}) {
  return (
    <div className="flex flex-col gap-3 border-t border-divider-subtle px-4 py-4 first:border-t-0 lg:flex-row lg:items-start">
      <div className="min-w-0 lg:w-70">
        {info}
      </div>
      <div className="min-w-0 flex-1">
        {children}
      </div>
    </div>
  )
}

export function AccessChannelsSection() {
  const { t } = useTranslation('deployments')
  const appInstanceId = useAtomValue(deploymentRouteAppInstanceIdAtom)
  const accessSettings = useAtomValue(accessSettingsAtom)
  const isLoading = useAtomValue(accessSettingsIsLoadingAtom)
  const isError = useAtomValue(accessSettingsIsErrorAtom)
  const accessChannels = accessSettings?.accessChannels
  const webAppEndpoints: AccessEndpoint[] | undefined = accessSettings?.webAppEndpoints
  const cliEndpoint: AccessEndpoint | undefined = accessSettings?.cliEndpoint
  const runEnabled = accessChannels?.webAppEnabled ?? false
  const webappRows = webAppEndpoints?.flatMap((endpoint) => {
    const endpointUrl = endpoint.endpointUrl
    if (!endpointUrl)
      return []

    return [{
      endpoint,
      endpointUrl,
    }]
  }) ?? []
  const cliDomain = getUrlOrigin(cliEndpoint?.endpointUrl)
  const cliDocsUrl = cliDomain ? `${cliDomain}/cli` : undefined

  return (
    <Section
      title={t('access.channels.title')}
      action={(
        isLoading
          ? <SwitchSkeleton />
          : (
              <div className="flex items-center gap-2">
                <span className="system-xs-medium text-text-tertiary">
                  {runEnabled ? t('overview.enabled') : t('overview.disabled')}
                </span>
                <AccessChannelsSwitch
                  checked={runEnabled}
                  accessChannels={accessChannels}
                  disabled={isError}
                />
              </div>
            )
      )}
    >
      {isLoading
        ? <AccessChannelsSkeleton />
        : isError || !appInstanceId
          ? <DeploymentStateMessage variant="section">{t('common.loadFailed')}</DeploymentStateMessage>
          : runEnabled
            ? (
                <div className="overflow-hidden rounded-lg border border-divider-subtle bg-components-panel-bg">
                  <ChannelRow
                    info={(
                      <ChannelInfo
                        icon={<span className="i-ri-global-line size-3.5" aria-hidden="true" />}
                        title={t('access.runAccess.webapp')}
                        description={t('access.runAccess.webappDesc')}
                      />
                    )}
                  >
                    {webappRows.length > 0
                      ? (
                          <div className="flex flex-col gap-1.5">
                            {webappRows.map(({ endpoint, endpointUrl }) => (
                              <EndpointRow
                                key={`webapp-${endpoint.environment?.id ?? endpointUrl}`}
                                envName={endpoint.environment?.displayName ?? '—'}
                                label={t('access.runAccess.urlLabel')}
                                value={endpointUrl}
                                openLabel={t('access.runAccess.openWebapp')}
                              />
                            ))}
                          </div>
                        )
                      : (
                          <DeploymentNoticeState>
                            {t('access.runAccess.webappEmpty')}
                          </DeploymentNoticeState>
                        )}
                  </ChannelRow>
                  <ChannelRow
                    info={(
                      <ChannelInfo
                        icon={<span className="i-ri-terminal-box-line size-3.5" aria-hidden="true" />}
                        title={t('access.cli.title')}
                        description={t('access.cli.description')}
                      />
                    )}
                  >
                    {cliDomain
                      ? (
                          <div className="flex flex-wrap items-center gap-2">
                            <CopyPill
                              label={t('access.cli.domain')}
                              value={cliDomain}
                              className="min-w-0 flex-1"
                            />
                            <a
                              href={cliDocsUrl}
                              target="_blank"
                              rel="noreferrer"
                              className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 system-sm-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover"
                            >
                              <span className="i-ri-download-cloud-2-line size-3.5" />
                              {t('access.cli.install')}
                            </a>
                            <a
                              href={cliDocsUrl}
                              target="_blank"
                              rel="noreferrer"
                              className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 system-sm-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover"
                            >
                              <span className="i-ri-book-open-line size-3.5" />
                              {t('access.cli.docs')}
                            </a>
                          </div>
                        )
                      : (
                          <DeploymentNoticeState>
                            {t('access.cli.empty')}
                          </DeploymentNoticeState>
                        )}
                  </ChannelRow>
                </div>
              )
            : (
                <DeploymentEmptyState
                  variant="section"
                  icon="i-ri-toggle-line"
                  title={t('access.channels.disabled')}
                  description={t('access.channels.disabledHint')}
                />
              )}
    </Section>
  )
}