konnosDashboard
RevokeAppModal.tsx66 lines · main
1import { useParams } from 'common'
2import { Lock } from 'lucide-react'
3import { toast } from 'sonner'
4import { Modal } from 'ui'
5import { Admonition } from 'ui-patterns'
6
7import { useAuthorizedAppRevokeMutation } from '@/data/oauth/authorized-app-revoke-mutation'
8import type { AuthorizedApp } from '@/data/oauth/authorized-apps-query'
9
10export interface RevokeAppModalProps {
11 selectedApp?: AuthorizedApp
12 onClose: () => void
13}
14
15export const RevokeAppModal = ({ selectedApp, onClose }: RevokeAppModalProps) => {
16 const { slug } = useParams()
17 const { mutate: revokeAuthorizedApp, isPending: isDeleting } = useAuthorizedAppRevokeMutation({
18 onSuccess: () => {
19 toast.success(`Successfully revoked the app "${selectedApp?.name}"`)
20 onClose()
21 },
22 })
23
24 const onConfirmDelete = async () => {
25 if (!slug) return console.error('Slug is required')
26 if (!selectedApp?.id) return console.error('App ID is required')
27 revokeAuthorizedApp({ slug, id: selectedApp?.id })
28 }
29
30 return (
31 <Modal
32 size="medium"
33 alignFooter="right"
34 header={`Confirm to revoke ${selectedApp?.name}`}
35 visible={selectedApp !== undefined}
36 loading={isDeleting}
37 onCancel={onClose}
38 onConfirm={onConfirmDelete}
39 >
40 <Modal.Content>
41 <Admonition
42 type="warning"
43 title="This action cannot be undone"
44 description={`${selectedApp?.name} application will no longer have access to your organization's settings
45 and projects.`}
46 />
47 </Modal.Content>
48 <Modal.Content>
49 <ul className="space-y-5">
50 <li className="flex gap-3 text-sm">
51 <Lock size={14} className="shrink-0" />
52 <div>
53 <strong>Before you remove this app, consider:</strong>
54 <ul className="space-y-2 mt-2">
55 <li className="list-disc ml-4">
56 No users are currently using this application. The application will no longer have
57 access to your organization after being revoked.
58 </li>
59 </ul>
60 </div>
61 </li>
62 </ul>
63 </Modal.Content>
64 </Modal>
65 )
66}