dify/web/app/components/access-rules-editor/index.tsx

'use client'

import type {
  AccessPolicyWithBindings,
  ResourceOpenScope,
  ResourceUserAccessSetting,
} from '@/models/access-control'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import AddAccessSubjectPopover from './add-access-subject-popover'
import { ACCESS_RULE_TABLE_GRID } from './constants'
import ResourceOpenScopeSection from './open-scope-section'
import TitleInfotip from './title-infotip'
import UserAccessPolicyRow from './user-access-policy-row'

export type AccessRulesEditorProps = {
  rules: AccessPolicyWithBindings[]
  userAccessSettings: ResourceUserAccessSetting[]
  isLoadingRules: boolean
  isLoadingUserAccessSettings: boolean
  openScope?: ResourceOpenScope
  isUpdatingOpenScope: boolean
  updatingAccountId: string | null
  maintainerId?: string | null
  className?: string
  onOpenScopeChange?: (openScope: ResourceOpenScope) => void
  onUserAccessPoliciesChange?: (accountId: string, accessPolicyIds: string[]) => void
  onRemoveAccessPolicyMemberBinding?: (accountId: string, accessPolicyId: string) => void
  onAddAccessSubject?: (accountId: string, accessPolicyIds: string[]) => void
}

export default function AccessRulesEditor({
  rules,
  userAccessSettings,
  isLoadingRules,
  isLoadingUserAccessSettings,
  openScope,
  isUpdatingOpenScope,
  updatingAccountId,
  maintainerId,
  className,
  onOpenScopeChange,
  onUserAccessPoliciesChange,
  onRemoveAccessPolicyMemberBinding,
  onAddAccessSubject,
}: AccessRulesEditorProps) {
  const { t } = useTranslation()
  const isLoading = isLoadingRules || isLoadingUserAccessSettings
  const individualPermissionSettingsTip = t('accessRule.individualPermissionSettingsTip', { ns: 'permission' })
  const policyOptions = useMemo(() => {
    return rules.map(rule => ({
      id: rule.policy.id,
      name: rule.policy.name,
    }))
  }, [rules])

  return (
    <div className={cn('flex flex-col gap-4', className)}>
      <ResourceOpenScopeSection
        value={openScope}
        disabled={isUpdatingOpenScope || !openScope}
        onChange={onOpenScopeChange}
      />
      <div className="flex min-h-8 items-center gap-2">
        <div className="flex min-w-0 flex-1 items-center gap-1">
          <h2 className="system-sm-semibold text-text-secondary">
            {t('accessRule.individualPermissionSettings', { ns: 'permission' })}
          </h2>
          <TitleInfotip content={individualPermissionSettingsTip} />
        </div>
        {onAddAccessSubject
          ? (
              <AddAccessSubjectPopover
                userAccessSettings={userAccessSettings}
                updatingAccountId={updatingAccountId}
                onAddAccessSubject={onAddAccessSubject}
              />
            )
          : (
              <Button
                variant="primary"
                size="medium"
                disabled
              >
                <span className="i-ri-add-line size-3.5" aria-hidden />
                <span>{t('operation.add', { ns: 'common' })}</span>
              </Button>
            )}
      </div>
      <section className="overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg">
        <div className={cn('grid items-center gap-4 border-b border-divider-deep px-10 py-4 system-sm-semibold text-text-tertiary', ACCESS_RULE_TABLE_GRID)}>
          <div>{t('accessRule.member', { ns: 'permission' })}</div>
          <div>{t('accessRule.permission', { ns: 'permission' })}</div>
          <div>{t('accessRule.actions', { ns: 'permission' })}</div>
        </div>
        {isLoading
          ? (
              <div className="px-4 py-8 text-center">
                <Loading type="app" />
              </div>
            )
          : userAccessSettings.length === 0
            ? (
                <div className="px-4 py-8 text-center system-sm-regular text-text-tertiary">
                  {t('accessRule.noUserAccessSettings', { ns: 'permission' })}
                </div>
              )
            : (
                <div className="px-4">
                  {userAccessSettings.map((setting, index) => (
                    <UserAccessPolicyRow
                      key={setting.account.account_id}
                      setting={setting}
                      policyOptions={policyOptions}
                      disabled={updatingAccountId === setting.account.account_id}
                      isMaintainer={maintainerId === setting.account.account_id}
                      className={cn(index > 0 && 'border-t border-divider-subtle')}
                      onChange={onUserAccessPoliciesChange}
                      onRemove={onRemoveAccessPolicyMemberBinding}
                    />
                  ))}
                </div>
              )}
      </section>
    </div>
  )
}