konnosDashboard
DeleteWrapperModal.tsx94 lines · main
1import { useParams } from 'common'
2import { parseAsString, useQueryState } from 'nuqs'
3import { useEffect, useMemo } from 'react'
4import { toast } from 'sonner'
5import { Modal } from 'ui'
6
7import { INTEGRATIONS } from '../Landing/Integrations.constants'
8import { getWrapperMetaForWrapper, wrapperMetaComparator } from './Wrappers.utils'
9import { useFDWDeleteMutation } from '@/data/fdw/fdw-delete-mutation'
10import { useFDWsQuery } from '@/data/fdw/fdws-query'
11import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
12
13export const DeleteWrapperModal = () => {
14 const { id, ref } = useParams()
15 const { data: project } = useSelectedProjectQuery()
16 const integration = INTEGRATIONS.find((i) => i.id === id)
17
18 const { data, isSuccess } = useFDWsQuery({
19 projectRef: ref,
20 connectionString: project?.connectionString,
21 })
22
23 const wrappers = useMemo(
24 () =>
25 integration && integration.type === 'wrapper' && data
26 ? data.filter((wrapper) => wrapperMetaComparator(integration.meta, wrapper))
27 : [],
28 [data, integration]
29 )
30
31 const [selectedWrapperIdToDelete, setSelectedWrapperToDelete] = useQueryState(
32 'delete',
33 parseAsString
34 )
35 const selectedWrapper = wrappers.find((x) => x.id.toString() === selectedWrapperIdToDelete)
36
37 const {
38 mutate: deleteFDW,
39 isPending: isDeleting,
40 isSuccess: isSuccessDelete,
41 } = useFDWDeleteMutation({
42 onSuccess: () => {
43 toast.success(`Successfully disabled ${selectedWrapper?.name} foreign data wrapper`)
44 setSelectedWrapperToDelete(null)
45 },
46 })
47 const wrapperMeta = getWrapperMetaForWrapper(selectedWrapper)
48
49 const onConfirmDelete = async () => {
50 if (!project?.ref) return console.error('Project ref is required')
51 if (!selectedWrapper) return console.error('Wrapper is required')
52 if (!wrapperMeta) return console.error('Wrapper meta is required')
53
54 deleteFDW({
55 projectRef: project?.ref,
56 connectionString: project?.connectionString,
57 wrapper: selectedWrapper,
58 wrapperMeta: wrapperMeta,
59 })
60 }
61
62 useEffect(() => {
63 if (isSuccess && !!selectedWrapperIdToDelete && !selectedWrapper && !isSuccessDelete) {
64 toast('Wrapper not found')
65 setSelectedWrapperToDelete(null)
66 }
67 }, [
68 isSuccess,
69 isSuccessDelete,
70 selectedWrapper,
71 selectedWrapperIdToDelete,
72 setSelectedWrapperToDelete,
73 ])
74
75 return (
76 <Modal
77 size="medium"
78 variant="danger"
79 alignFooter="right"
80 loading={isDeleting}
81 visible={selectedWrapper !== undefined}
82 onCancel={() => setSelectedWrapperToDelete(null)}
83 onConfirm={() => onConfirmDelete()}
84 header={`Confirm to disable ${selectedWrapper?.name}`}
85 >
86 <Modal.Content>
87 <p className="text-sm">
88 Are you sure you want to disable {selectedWrapper?.name}? This will also remove all tables
89 created with this wrapper.
90 </p>
91 </Modal.Content>
92 </Modal>
93 )
94}