DeleteOAuthAppModal.tsx63 lines · main
| 1 | import type { OAuthClient } from '@supabase/supabase-js' |
| 2 | import { useParams } from 'common' |
| 3 | import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' |
| 4 | |
| 5 | import { useProjectApiUrl } from '@/data/config/project-endpoint-query' |
| 6 | import type { OAuthServerAppDeleteVariables } from '@/data/oauth-server-apps/oauth-server-app-delete-mutation' |
| 7 | |
| 8 | interface DeleteOAuthAppModalProps { |
| 9 | visible: boolean |
| 10 | selectedApp?: OAuthClient |
| 11 | setVisible: (value: string | null) => void |
| 12 | onDelete: (params: OAuthServerAppDeleteVariables) => void |
| 13 | isLoading: boolean |
| 14 | } |
| 15 | |
| 16 | export 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 | } |