konnosDashboard
DeleteAppModal.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 { useOAuthAppDeleteMutation } from '@/data/oauth/oauth-app-delete-mutation'
8import type { OAuthApp } from '@/data/oauth/oauth-apps-query'
9
10export interface DeleteAppModalProps {
11 selectedApp?: OAuthApp
12 onClose: () => void
13}
14
15export const DeleteAppModal = ({ selectedApp, onClose }: DeleteAppModalProps) => {
16 const { slug } = useParams()
17 const { mutate: deleteOAuthApp, isPending: isDeleting } = useOAuthAppDeleteMutation({
18 onSuccess: () => {
19 toast.success(`Successfully deleted 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 deleteOAuthApp({ slug, id: selectedApp?.id })
28 }
29
30 return (
31 <Modal
32 size="medium"
33 alignFooter="right"
34 header={`Confirm to delete ${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={`Deleting ${selectedApp?.name} will invalidate any access tokens from this application that
45 were authorized by users.`}
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 application, 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. It will no longer be available for
57 use after deletion.
58 </li>
59 </ul>
60 </div>
61 </li>
62 </ul>
63 </Modal.Content>
64 </Modal>
65 )
66}