DeleteOAuthAppModal.tsx63 lines · main
1import type { OAuthClient } from '@supabase/supabase-js'
2import { useParams } from 'common'
3import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
4
5import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
6import type { OAuthServerAppDeleteVariables } from '@/data/oauth-server-apps/oauth-server-app-delete-mutation'
7
8interface DeleteOAuthAppModalProps {
9 visible: boolean
10 selectedApp?: OAuthClient
11 setVisible: (value: string | null) => void
12 onDelete: (params: OAuthServerAppDeleteVariables) => void
13 isLoading: boolean
14}
15
16export const DeleteOAuthAppModal = ({
17 visible,
18 selectedApp,
19 setVisible,
20 onDelete,
21 isLoading,
22}: DeleteOAuthAppModalProps) => {
23 const { ref: projectRef } = useParams()
24
25 const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
26
27 const onConfirmDeleteApp = () => {
28 onDelete({
29 projectRef,
30 clientEndpoint,
31 clientId: selectedApp?.client_id,
32 })
33 }
34
35 return (
36 <ConfirmationModal
37 variant={'destructive'}
38 size="medium"
39 loading={isLoading}
40 visible={visible}
41 title={
42 <>
43 Confirm to delete OAuth app{' '}
44 <code className="text-code-inline">{selectedApp?.client_name}</code>
45 </>
46 }
47 confirmLabel="Confirm delete"
48 confirmLabelLoading="Deleting..."
49 onCancel={() => setVisible(null)}
50 onConfirm={() => onConfirmDeleteApp()}
51 alert={{
52 title: 'This action cannot be undone',
53 description: 'You will need to re-create the OAuth app if you want to revert the deletion.',
54 }}
55 >
56 <p className="text-sm">Before deleting this OAuth app, consider:</p>
57 <ul className="space-y-2 mt-2 text-sm text-foreground-light">
58 <li className="list-disc ml-6">Any applications using this OAuth app will lose access</li>
59 <li className="list-disc ml-6">This OAuth app is no longer in use by any applications</li>
60 </ul>
61 </ConfirmationModal>
62 )
63}