konnosDashboard
Logs.SavedQueriesItem.tsx125 lines · main
1import { useParams } from 'common'
2import { SqlEditor } from 'icons'
3import { Edit, Trash } from 'lucide-react'
4import { useRouter } from 'next/router'
5import { useState } from 'react'
6import { toast } from 'sonner'
7import { DropdownMenuItem, DropdownMenuSeparator } from 'ui'
8import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
9
10import { UpdateSavedQueryModal } from './Logs.UpdateSavedQueryModal'
11import { LogsSidebarItem } from './SidebarV2/SidebarItem'
12import { useContentDeleteMutation } from '@/data/content/content-delete-mutation'
13import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
14
15interface SavedQueriesItemProps {
16 item: {
17 id: string
18 name: string
19 description?: string
20 owner_id: number
21 content: {
22 sql: string
23 }
24 }
25}
26
27const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
28 const router = useRouter()
29 const { ref } = useParams()
30 const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false)
31 const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false)
32
33 const { mutate: deleteContent } = useContentDeleteMutation({
34 onSuccess: () => {
35 setShowConfirmModal(false)
36 toast.success('Successfully deleted query')
37 },
38 onError: (error) => {
39 toast.error(`Failed to delete saved query: ${error.message}`)
40 },
41 })
42 const { mutateAsync: updateContent } = useContentUpsertMutation({
43 onSuccess: () => {
44 setShowUpdateModal(false)
45 toast.success('Successfully updated query')
46 },
47 onError: (error) => {
48 toast.error(`Failed to update query: ${error.message}`)
49 },
50 })
51
52 const onConfirmDelete = async () => {
53 if (!ref || typeof ref !== 'string') return console.error('Invalid project reference')
54 deleteContent({ projectRef: ref, ids: [item.id] })
55 }
56
57 const onConfirmUpdate = async ({ name, description }: { name: string; description?: string }) => {
58 if (!ref || typeof ref !== 'string') return console.error('Invalid project reference')
59 await updateContent({
60 projectRef: ref,
61 payload: {
62 ...item,
63 name,
64 description: description || undefined,
65 type: 'log_sql',
66 visibility: 'user',
67 },
68 })
69 }
70
71 const isActive = router.query.queryId === item.id
72
73 return (
74 <>
75 <LogsSidebarItem
76 label={item.name}
77 icon={<SqlEditor size="15" />}
78 href={`/project/${ref}/logs/explorer?queryId=${encodeURIComponent(item.id)}&q=${encodeURIComponent(item.content.sql)}`}
79 isActive={isActive}
80 dropdownItems={
81 <>
82 <DropdownMenuItem onClick={() => setShowUpdateModal(true)}>
83 <Edit size={14} className="mr-2" />
84 Edit query
85 </DropdownMenuItem>
86 <DropdownMenuSeparator />
87 <DropdownMenuItem
88 onClick={() => {
89 setShowConfirmModal(true)
90 }}
91 >
92 <Trash size={14} className="mr-2" />
93 Delete query
94 </DropdownMenuItem>
95 </>
96 }
97 ></LogsSidebarItem>
98 <ConfirmationModal
99 variant="destructive"
100 visible={showConfirmModal}
101 confirmLabel="Delete query"
102 title="Confirm to delete saved query"
103 onCancel={() => {
104 setShowConfirmModal(false)
105 }}
106 onConfirm={onConfirmDelete}
107 >
108 <p className="text-sm text-foreground-light">
109 Are you sure you want to delete {item.name}?
110 </p>
111 </ConfirmationModal>
112 <UpdateSavedQueryModal
113 header="Update saved query"
114 visible={showUpdateModal}
115 initialValues={{ name: item.name, description: item.description }}
116 onCancel={() => {
117 setShowUpdateModal(false)
118 }}
119 onSubmit={onConfirmUpdate}
120 />
121 </>
122 )
123}
124
125export default SavedQueriesItem