konnosDashboard
RevokeCredentialModal.tsx68 lines · main
1import { useParams } from 'common'
2import { toast } from 'sonner'
3import {
4 Button,
5 Dialog,
6 DialogContent,
7 DialogDescription,
8 DialogFooter,
9 DialogHeader,
10 DialogSection,
11 DialogSectionSeparator,
12 DialogTitle,
13} from 'ui'
14
15import { useS3AccessKeyDeleteMutation } from '@/data/storage/s3-access-key-delete-mutation'
16
17interface RevokeCredentialModalProps {
18 visible: boolean
19 selectedCredential?: { id: string; description: string }
20 onClose: () => void
21}
22
23export const RevokeCredentialModal = ({
24 visible,
25 selectedCredential,
26 onClose,
27}: RevokeCredentialModalProps) => {
28 const { ref: projectRef } = useParams()
29 const { mutate: deleteS3AccessKey, isPending: isDeleting } = useS3AccessKeyDeleteMutation({
30 onSuccess: () => {
31 toast.success('Successfully revoked S3 access key')
32 onClose()
33 },
34 })
35
36 return (
37 <Dialog open={visible} onOpenChange={onClose}>
38 <DialogContent size="small">
39 <DialogHeader>
40 <DialogTitle>
41 Revoke credential <code className="text-sm">{selectedCredential?.description}</code>
42 </DialogTitle>
43 </DialogHeader>
44 <DialogSectionSeparator />
45 <DialogSection>
46 <DialogDescription>
47 This action is irreversible and requests made with these access keys will stop working.
48 </DialogDescription>
49 </DialogSection>
50 <DialogFooter className="flex justify-end gap-x-1">
51 <Button type="outline" onClick={() => onClose()}>
52 Cancel
53 </Button>
54 <Button
55 type="danger"
56 loading={isDeleting}
57 onClick={async () => {
58 if (!selectedCredential) return
59 deleteS3AccessKey({ id: selectedCredential.id, projectRef })
60 }}
61 >
62 Yes, revoke access keys
63 </Button>
64 </DialogFooter>
65 </DialogContent>
66 </Dialog>
67 )
68}