dify/web/app/components/access-rules-editor/open-scope-section.tsx

'use client'

import type { ResourceOpenScope } from '@/models/access-control'
import { memo, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import OpenScopeConfirmDialog from './open-scope-confirm-dialog'
import OpenScopeOption from './open-scope-option'
import TitleInfotip from './title-infotip'

type ResourceOpenScopeSectionProps = {
  value?: ResourceOpenScope
  disabled: boolean
  onChange?: (openScope: ResourceOpenScope) => void
}

function ResourceOpenScopeSection({ value, disabled, onChange }: ResourceOpenScopeSectionProps) {
  const { t } = useTranslation()
  const [pendingOpenScope, setPendingOpenScope] = useState<ResourceOpenScope | null>(null)
  const resourceOpenScopeDescription = t(($) => $['accessRule.resourceOpenScopeDescription'], {
    ns: 'permission',
  })

  const handleRequestChange = useCallback(
    (nextOpenScope: ResourceOpenScope) => {
      if (nextOpenScope === value) return

      setPendingOpenScope(nextOpenScope)
    },
    [value],
  )

  const handleCancelChange = useCallback(() => {
    setPendingOpenScope(null)
  }, [])

  const handleConfirmChange = useCallback(() => {
    if (!pendingOpenScope) return

    onChange?.(pendingOpenScope)
    setPendingOpenScope(null)
  }, [onChange, pendingOpenScope])

  return (
    <section className="flex flex-col gap-2">
      <div className="flex min-w-0 items-center gap-1">
        <h2 className="system-sm-semibold text-text-secondary">
          {t(($) => $['accessRule.resourceOpenScope'], { ns: 'permission' })}
        </h2>
        <TitleInfotip content={resourceOpenScopeDescription} />
      </div>
      <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
        <OpenScopeOption
          value="all"
          selected={value === 'all'}
          disabled={disabled || !onChange}
          title={t(($) => $['accessRule.allPermittedMembers'], { ns: 'permission' })}
          description={t(($) => $['accessRule.allPermittedMembersDescription'], {
            ns: 'permission',
          })}
          onChange={onChange ? handleRequestChange : undefined}
        />
        <OpenScopeOption
          value="only_me"
          selected={value === 'only_me'}
          disabled={disabled || !onChange}
          title={t(($) => $['accessRule.onlyMe'], { ns: 'permission' })}
          description={t(($) => $['accessRule.onlyMeDescription'], { ns: 'permission' })}
          onChange={onChange ? handleRequestChange : undefined}
        />
        <OpenScopeOption
          value="specific"
          selected={value === 'specific'}
          disabled={disabled || !onChange}
          title={t(($) => $['accessRule.specificMembersOnly'], { ns: 'permission' })}
          description={t(($) => $['accessRule.specificMembersOnlyDescription'], {
            ns: 'permission',
          })}
          onChange={onChange ? handleRequestChange : undefined}
        />
      </div>
      <OpenScopeConfirmDialog
        open={!!pendingOpenScope}
        onCancel={handleCancelChange}
        onConfirm={handleConfirmChange}
      />
    </section>
  )
}

export default memo(ResourceOpenScopeSection)