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

'use client'

import type { EnvironmentAccessPolicy } from '@dify/contracts/enterprise/types.gen'
import { useAtomValue } from 'jotai'
import { useTranslation } from 'react-i18next'
import { SkeletonRectangle } from '@/app/components/base/skeleton'
import { deploymentRouteAppInstanceIdAtom } from '../../../route-state'
import {
  DeploymentEmptyState,
  DeploymentStateMessage,
} from '../../../shared/components/empty-state'
import { Section } from '../../../shared/components/section'
import {
  accessSettingsAtom,
  accessSettingsIsErrorAtom,
  accessSettingsIsLoadingAtom,
} from '../state'
import { EnvironmentPermissionRow } from './environment-permission-row'

const ACCESS_PERMISSIONS_SKELETON_KEYS = ['production', 'staging', 'development']

function AccessPermissionsSkeleton() {
  return (
    <div className="flex min-w-0 flex-col">
      {ACCESS_PERMISSIONS_SKELETON_KEYS.map((key) => (
        <div
          key={key}
          className="flex min-w-0 flex-col gap-2 border-b border-divider-subtle py-4 first:pt-0 last:border-b-0 last:pb-0"
        >
          <SkeletonRectangle className="h-4 w-32 animate-pulse" />
          <SkeletonRectangle className="my-0 h-8 w-full animate-pulse rounded-lg" />
        </div>
      ))}
    </div>
  )
}

export function AccessPermissionsSection() {
  const { t } = useTranslation('deployments')
  const appInstanceId = useAtomValue(deploymentRouteAppInstanceIdAtom)
  const accessSettings = useAtomValue(accessSettingsAtom)
  const isLoading = useAtomValue(accessSettingsIsLoadingAtom)
  const isError = useAtomValue(accessSettingsIsErrorAtom)
  const environmentPolicies: EnvironmentAccessPolicy[] | undefined =
    accessSettings?.environmentPolicies
  const policyRows = environmentPolicies ?? []

  return (
    <Section title={t(($) => $['access.permissions.title'])} showDivider={false}>
      {isLoading ? (
        <AccessPermissionsSkeleton />
      ) : isError || !appInstanceId ? (
        <DeploymentStateMessage variant="section">
          {t(($) => $['common.loadFailed'])}
        </DeploymentStateMessage>
      ) : policyRows.length === 0 ? (
        <DeploymentEmptyState
          variant="section"
          icon="i-ri-rocket-line"
          title={t(($) => $['access.runAccess.noEnvsTitle'])}
          description={t(($) => $['access.runAccess.noEnvs'])}
        />
      ) : (
        <div className="flex min-w-0 flex-col">
          {policyRows.map((environmentPolicy) => {
            const environment = environmentPolicy.environment
            return (
              <EnvironmentPermissionRow
                key={environment.id}
                environment={environment}
                summaryPolicy={environmentPolicy.policy}
                resolvedSubjects={environmentPolicy.resolvedSubjects}
              />
            )
          })}
        </div>
      )}
    </Section>
  )
}