dify/web/app/components/access-rules-editor/open-scope-confirm-dialog.tsx
Stephen Zhou a84c2d36a3
style: format with vp fmt (#38803)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-12 15:57:46 +00:00

58 lines
1.9 KiB
TypeScript

'use client'
import {
AlertDialog,
AlertDialogActions,
AlertDialogCancelButton,
AlertDialogConfirmButton,
AlertDialogContent,
AlertDialogDescription,
AlertDialogTitle,
} from '@langgenius/dify-ui/alert-dialog'
import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
type OpenScopeConfirmDialogProps = {
open: boolean
onCancel: () => void
onConfirm: () => void
}
function OpenScopeConfirmDialog({ open, onCancel, onConfirm }: OpenScopeConfirmDialogProps) {
const { t } = useTranslation()
const handleOpenChange = useCallback(
(nextOpen: boolean) => {
if (!nextOpen) onCancel()
},
[onCancel],
)
return (
<AlertDialog open={open} onOpenChange={handleOpenChange}>
<AlertDialogContent className="w-120 overflow-hidden! rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0! text-left align-middle shadow-lg">
<div className="flex flex-col items-start gap-2 self-stretch p-6 pb-4">
<AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
{t(($) => $['accessRule.changeOpenScopeTitle'], { ns: 'permission' })}
</AlertDialogTitle>
<AlertDialogDescription
render={<div />}
className="system-md-regular text-text-secondary"
>
{t(($) => $['accessRule.changeOpenScopeDescription'], { ns: 'permission' })}
</AlertDialogDescription>
</div>
<AlertDialogActions className="gap-2 p-6">
<AlertDialogCancelButton variant="secondary">
{t(($) => $['operation.cancel'], { ns: 'common' })}
</AlertDialogCancelButton>
<AlertDialogConfirmButton onClick={onConfirm}>
{t(($) => $['operation.change'], { ns: 'common' })}
</AlertDialogConfirmButton>
</AlertDialogActions>
</AlertDialogContent>
</AlertDialog>
)
}
export default memo(OpenScopeConfirmDialog)