dify/web/app/components/header/account-setting/permission-group-list.tsx

'use client'

import type { PermissionGroup } from '@/models/access-control'
import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { cn } from '@langgenius/dify-ui/cn'
import { ScrollArea } from '@langgenius/dify-ui/scroll-area'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'

type PermissionGroupListProps = {
  groups: PermissionGroup[]
  value: string[]
  onChange: (next: string[]) => void
  className?: string
  readonly?: boolean
}

const PermissionGroupList = ({
  groups,
  value,
  onChange,
  className,
  readonly = false,
}: PermissionGroupListProps) => {
  const { t } = useTranslation()
  const [expandedGroupKeys, setExpandedGroupKeys] = useState<Set<string> | null>(null)

  const selectedSet = useMemo(() => new Set(value), [value])

  const defaultExpandedGroupKeys = useMemo(() => {
    if (groups.length === 0)
      return new Set<string>()
    const firstSelectedGroup = groups.find(group =>
      group.permissions.some(permission => selectedSet.has(permission.key)),
    )
    return new Set([(firstSelectedGroup ?? groups[0]!).group_key])
  }, [groups, selectedSet])

  const expandedGroupKeysMerged = expandedGroupKeys ?? defaultExpandedGroupKeys

  const toggleGroupExpanded = (groupKey: string) => {
    setExpandedGroupKeys((prev) => {
      const next = new Set(prev ?? expandedGroupKeysMerged)
      if (next.has(groupKey))
        next.delete(groupKey)
      else
        next.add(groupKey)
      return next
    })
  }

  const togglePermission = (permissionKey: string) => {
    if (readonly)
      return

    if (selectedSet.has(permissionKey))
      onChange(value.filter(key => key !== permissionKey))
    else
      onChange([...value, permissionKey])
  }

  const toggleGroupSelection = (group: PermissionGroup, selectedCount: number) => {
    if (readonly)
      return

    const permissionKeys = group.permissions.map(permission => permission.key)
    if (selectedCount === permissionKeys.length) {
      const groupPermissionKeySet = new Set(permissionKeys)
      onChange(value.filter(key => !groupPermissionKeySet.has(key)))
      return
    }

    const next = new Set(value)
    permissionKeys.forEach(key => next.add(key))
    onChange(Array.from(next))
  }

  return (
    <div className={cn('min-h-0 flex-1 rounded-xl border border-components-panel-border bg-components-panel-bg shadow-xs', className)}>
      <ScrollArea
        className="h-full overflow-hidden rounded-xl"
        slotClassNames={{
          viewport: 'overscroll-contain',
          content: groups.length === 0 ? 'h-full' : undefined,
        }}
      >
        {groups.length === 0
          ? (
              <div className="flex h-full items-center justify-center px-3 py-6 text-center system-sm-regular text-text-tertiary">
                {t('permissionList.noPermissionsFound', { ns: 'permission' })}
              </div>
            )
          : (
              <div className="flex flex-col">
                {groups.map((group) => {
                  const expanded = expandedGroupKeysMerged.has(group.group_key)
                  const selectedCount = group.permissions.reduce(
                    (count, permission) => count + (selectedSet.has(permission.key) ? 1 : 0),
                    0,
                  )
                  const totalCount = group.permissions.length
                  const allSelected = totalCount > 0 && selectedCount === totalCount

                  return (
                    <div key={group.group_key} className="border-b border-b-divider-subtle">
                      <div className="group/permission-category flex h-12 w-full items-center gap-3 px-3 hover:bg-state-base-hover">
                        <button
                          type="button"
                          className="min-w-0 flex-1 truncate text-left system-md-medium text-text-secondary focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-components-input-border-active"
                          aria-expanded={expanded}
                          onClick={() => toggleGroupExpanded(group.group_key)}
                        >
                          {group.group_name}
                        </button>
                        {!readonly && totalCount > 0 && (
                          <button
                            type="button"
                            className="shrink-0 rounded-md px-1.5 py-0.5 system-sm-medium text-text-accent opacity-0 group-hover/permission-category:opacity-100 hover:bg-state-accent-hover focus-visible:opacity-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-components-input-border-active"
                            onClick={() => toggleGroupSelection(group, selectedCount)}
                          >
                            {allSelected
                              ? t('permissionList.clearAll', { ns: 'permission' })
                              : t('permissionList.selectAll', { ns: 'permission' })}
                          </button>
                        )}
                        {selectedCount > 0 && (
                          <span className="shrink-0 rounded-md bg-util-colors-blue-blue-100 px-2 py-0.5 system-sm-medium text-text-accent">
                            {selectedCount}
                            /
                            {totalCount}
                          </span>
                        )}
                        <button
                          type="button"
                          className="flex h-6 w-6 shrink-0 items-center justify-center focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-components-input-border-active"
                          aria-label={expanded ? t('permissionList.collapseGroup', { ns: 'permission' }) : t('permissionList.expandGroup', { ns: 'permission' })}
                          onClick={() => toggleGroupExpanded(group.group_key)}
                        >
                          <span
                            aria-hidden
                            className={cn(
                              'i-ri-arrow-right-s-fill h-4 w-4 text-text-tertiary transition-transform',
                              expanded && 'rotate-90',
                            )}
                          />
                        </button>
                      </div>
                      {expanded && (
                        <div className="flex flex-col">
                          {group.permissions.map((permission) => {
                            const checked = selectedSet.has(permission.key)

                            return (
                              <div
                                key={permission.key}
                                className={cn(
                                  'flex min-h-9 items-center gap-3 px-3 py-1.5',
                                  readonly ? 'cursor-default' : 'cursor-pointer hover:bg-state-base-hover',
                                  checked && 'bg-state-accent-hover',
                                  checked && !readonly && 'hover:bg-state-accent-hover',
                                )}
                                onClick={() => togglePermission(permission.key)}
                              >
                                <Checkbox
                                  checked={checked}
                                  disabled={readonly}
                                  className="shrink-0"
                                  onCheckedChange={() => {
                                    togglePermission(permission.key)
                                  }}
                                />
                                <span className="min-w-0 flex-1 truncate system-md-regular text-text-secondary">
                                  {permission.name}
                                </span>
                              </div>
                            )
                          })}
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            )}
      </ScrollArea>
    </div>
  )
}

export default PermissionGroupList