konnosDashboard
UnshareSnippetModal.tsx97 lines · main
1import { useParams } from 'common'
2import { EyeOffIcon } from 'lucide-react'
3import { toast } from 'sonner'
4import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
5
6import { getContentById } from '@/data/content/content-id-query'
7import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
8import { Snippet } from '@/data/content/sql-folders-query'
9import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
10import type { SqlSnippets } from '@/types'
11
12export const UnshareSnippetModal = ({
13 snippet,
14 onClose,
15 onSuccess,
16}: {
17 snippet?: Snippet
18 onClose: () => void
19 onSuccess?: () => void
20}) => {
21 const { ref: projectRef } = useParams()
22 const snapV2 = useSqlEditorV2StateSnapshot()
23
24 const { mutate: upsertContent } = useContentUpsertMutation({
25 onError: (error) => {
26 toast.error(`Failed to update query: ${error.message}`)
27 },
28 })
29
30 const onUnshareSnippet = async () => {
31 if (!projectRef) return console.error('Project ref is required')
32 if (!snippet) return console.error('Snippet ID is required')
33
34 const storeSnippet = snapV2.snippets[snippet.id]
35 let snippetContent = storeSnippet?.snippet?.content
36
37 if (snippetContent === undefined) {
38 const { content } = await getContentById({ projectRef, id: snippet.id })
39 snippetContent = content as unknown as SqlSnippets.Content
40 }
41
42 // [Joshen] Just as a final check - to ensure that the content is minimally there (empty string is fine)
43 if (snippetContent === undefined) {
44 return toast.error('Unable to update snippet visibility: Content is missing')
45 }
46
47 upsertContent(
48 {
49 projectRef,
50 payload: {
51 ...snippet,
52 visibility: 'user',
53 folder_id: null,
54 content: snippetContent,
55 },
56 },
57 {
58 onSuccess: () => {
59 snapV2.updateSnippet({
60 id: snippet.id,
61 snippet: { visibility: 'user', folder_id: null },
62 skipSave: true,
63 })
64 toast.success('Snippet is now unshared from the project')
65 onSuccess?.()
66 onClose()
67 },
68 }
69 )
70 }
71
72 return (
73 <ConfirmationModal
74 size="medium"
75 title={`Confirm to unshare query: ${snippet?.name}`}
76 confirmLabel="Unshare query"
77 confirmLabelLoading="Unsharing query"
78 visible={snippet !== undefined}
79 onCancel={() => onClose()}
80 onConfirm={() => onUnshareSnippet()}
81 alert={{
82 title: 'This SQL query will no longer be public to all team members',
83 description: 'Only you will have access to this query',
84 }}
85 >
86 <ul
87 data-testid="confirm-unshare-snippet-modal"
88 className="text-sm text-foreground-light space-y-5"
89 >
90 <li className="flex gap-3">
91 <EyeOffIcon />
92 <span>Project members will no longer be able to view this query.</span>
93 </li>
94 </ul>
95 </ConfirmationModal>
96 )
97}