dify/web/app/components/access-rules-editor/add-access-subject-popover.tsx

'use client'

import type { ResourceUserAccessSetting } from '@/models/access-control'
import type { Member } from '@/models/common'
import { Avatar } from '@langgenius/dify-ui/avatar'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { Input } from '@langgenius/dify-ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { memo, useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import { useMembers } from '@/service/use-common'
import { DEFAULT_ACCESS_POLICY_ID } from './constants'

type AddAccessSubjectPopoverProps = {
  userAccessSettings: ResourceUserAccessSetting[]
  updatingAccountId: string | null
  onAddAccessSubject: (accountId: string, accessPolicyIds: string[]) => void
}

function AddAccessSubjectPopover({
  userAccessSettings,
  updatingAccountId,
  onAddAccessSubject,
}: AddAccessSubjectPopoverProps) {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const [searchValue, setSearchValue] = useState('')
  const { data: membersData, isLoading } = useMembers()
  const existingAccountIds = useMemo(() => {
    return new Set(userAccessSettings.map((setting) => setting.account.account_id))
  }, [userAccessSettings])
  const availableMembers = useMemo(() => {
    const normalizedSearchValue = searchValue.trim().toLowerCase()

    return (membersData?.accounts ?? []).filter((member) => {
      if (!normalizedSearchValue) return true

      const name = member.name || ''
      const email = member.email || ''
      return (
        name.toLowerCase().includes(normalizedSearchValue) ||
        email.toLowerCase().includes(normalizedSearchValue)
      )
    })
  }, [membersData?.accounts, searchValue])

  const handleAddMember = useCallback(
    (member: Member) => {
      onAddAccessSubject(member.id, [DEFAULT_ACCESS_POLICY_ID])
    },
    [onAddAccessSubject],
  )

  const handleOpenChange = useCallback((nextOpen: boolean) => {
    if (!nextOpen) setSearchValue('')

    setOpen(nextOpen)
  }, [])

  const addLabel = t(($) => $['operation.add'], { ns: 'common' })
  const addedLabel = t(($) => $['operation.added'], { ns: 'common' })

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger
        render={
          <Button variant="primary" size="medium">
            <span className="i-ri-add-line size-3.5" aria-hidden />
            <span>{addLabel}</span>
          </Button>
        }
      />
      <PopoverContent
        placement="bottom-end"
        sideOffset={8}
        popupClassName="w-[344px] max-w-[calc(100vw-32px)] overflow-hidden bg-components-panel-bg-blur p-0 shadow-lg backdrop-blur-[5px]"
        popupProps={{
          role: 'dialog',
          'aria-label': t(($) => $['accessRule.addMembersTitle'], { ns: 'permission' }),
        }}
      >
        <div className="p-2 pb-1">
          <div className="relative">
            <span
              className="pointer-events-none absolute top-1/2 left-2 i-ri-search-line size-4 -translate-y-1/2 text-components-input-text-placeholder"
              aria-hidden="true"
            />
            <Input
              type="search"
              aria-label={t(($) => $['operation.search'], { ns: 'common' })}
              value={searchValue}
              placeholder={t(($) => $['placeholder.search'], { ns: 'common' })}
              className="h-8 ps-7 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
              onValueChange={setSearchValue}
              autoComplete="off"
              enterKeyHint="search"
            />
          </div>
        </div>
        {isLoading ? (
          <div className="flex h-20 items-center justify-center p-1">
            <Loading type="app" />
          </div>
        ) : availableMembers.length === 0 ? (
          <div className="px-3 py-6 text-center system-xs-regular text-text-tertiary">
            {t(($) => $['accessRule.noAvailableMembers'], { ns: 'permission' })}
          </div>
        ) : (
          <ul className="max-h-80 overflow-y-auto p-1">
            {availableMembers.map((member) => {
              const isAdded = existingAccountIds.has(member.id)
              const isUpdating = updatingAccountId === member.id
              const memberName = member.name || member.email

              return (
                <li
                  key={member.id}
                  className={cn(
                    'flex min-h-10 items-center gap-2 rounded-lg py-1 pr-3 pl-2',
                    !isAdded && 'hover:bg-state-base-hover',
                  )}
                >
                  <Avatar
                    avatar={member.avatar_url ?? member.avatar ?? null}
                    name={memberName}
                    size="sm"
                    className={cn('bg-components-icon-bg-blue-solid', isAdded && 'opacity-50')}
                  />
                  <div className={cn('min-w-0 flex-1', isAdded && 'opacity-50')}>
                    <div className="truncate system-sm-medium text-text-secondary">
                      {memberName}
                    </div>
                    <div className="truncate system-xs-regular text-text-tertiary">
                      {member.email}
                    </div>
                  </div>
                  {isAdded ? (
                    <button
                      type="button"
                      disabled
                      className="shrink-0 cursor-not-allowed border-0 bg-transparent p-0 system-xs-regular text-text-tertiary disabled:opacity-100"
                    >
                      {addedLabel}
                    </button>
                  ) : (
                    <button
                      type="button"
                      disabled={isUpdating}
                      aria-label={t(($) => $['accessRule.addMemberAria'], {
                        ns: 'permission',
                        name: memberName,
                      })}
                      className={cn(
                        'flex h-6 shrink-0 items-center rounded-md px-1 system-xs-medium text-text-accent outline-hidden',
                        'hover:bg-state-accent-hover focus-visible:bg-state-accent-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid',
                        'disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent',
                      )}
                      onClick={() => handleAddMember(member)}
                    >
                      {isUpdating ? (
                        <span className="i-ri-loader-2-line size-3.5 animate-spin" aria-hidden />
                      ) : (
                        `+ ${addLabel}`
                      )}
                    </button>
                  )}
                </li>
              )
            })}
          </ul>
        )}
      </PopoverContent>
    </Popover>
  )
}

export default memo(AddAccessSubjectPopover)