konnosDashboard
EditQueryButton.tsx129 lines · main
1// @ts-nocheck
2import { useParams } from 'common'
3import { Edit } from 'lucide-react'
4import { useRouter } from 'next/router'
5import { ComponentProps } from 'react'
6import {
7 cn,
8 DropdownMenu,
9 DropdownMenuContent,
10 DropdownMenuItem,
11 DropdownMenuTrigger,
12 TooltipContent,
13} from 'ui'
14
15import { ButtonTooltip } from '../ButtonTooltip'
16import { useIsInlineEditorEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
17import useNewQuery from '@/components/interfaces/SQLEditor/hooks'
18import { DiffType } from '@/components/interfaces/SQLEditor/SQLEditor.types'
19import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
20import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
21import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
22import { editorPanelState } from '@/state/editor-panel-state'
23import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
24import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
25
26interface EditQueryButtonProps {
27 id?: string
28 title: string
29 sql?: string
30 className?: string
31 type?: 'default' | 'text'
32}
33
34export const EditQueryButton = ({
35 id,
36 sql,
37 title,
38 className,
39 type = 'text',
40}: EditQueryButtonProps) => {
41 const router = useRouter()
42 const { ref } = useParams()
43 const { newQuery } = useNewQuery()
44
45 const sqlEditorSnap = useSqlEditorV2StateSnapshot()
46 const { closeSidebar, openSidebar } = useSidebarManagerSnapshot()
47
48 const isInSQLEditor = router.pathname.includes('/sql')
49 const isInNewSnippet = router.pathname.endsWith('/sql')
50 const isInlineEditorEnabled = useIsInlineEditorEnabled()
51 const tooltip: { content: ComponentProps<typeof TooltipContent> & { text: string } } = {
52 content: { side: 'bottom', text: 'Edit in SQL Editor' },
53 }
54
55 const { data: org } = useSelectedOrganizationQuery()
56 const { mutate: sendEvent } = useSendEventMutation()
57
58 if (id !== undefined) {
59 return (
60 <ButtonTooltip
61 type={type}
62 size="tiny"
63 className={cn('w-7 h-7', className)}
64 icon={<Edit size={14} strokeWidth={1.5} />}
65 tooltip={tooltip}
66 onClick={() => {
67 editorPanelState.setActiveSnippetId(id)
68 openSidebar(SIDEBAR_KEYS.EDITOR_PANEL)
69 }}
70 />
71 )
72 }
73
74 return !isInSQLEditor || isInNewSnippet ? (
75 <ButtonTooltip
76 type={type}
77 size="tiny"
78 className={cn('w-7 h-7', className)}
79 icon={<Edit size={14} strokeWidth={1.5} />}
80 onClick={() => {
81 if (isInlineEditorEnabled) {
82 // This component needs to be updated to work with local EditorPanel state
83 // For now, fall back to creating a new query
84 if (sql) newQuery(sql, title)
85 closeSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
86 } else {
87 if (sql) newQuery(sql, title)
88 }
89 sendEvent({
90 action: 'assistant_edit_in_sql_editor_clicked',
91 properties: {
92 isInSQLEditor,
93 isInNewSnippet,
94 },
95 groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
96 })
97 }}
98 tooltip={tooltip}
99 />
100 ) : (
101 <DropdownMenu>
102 <DropdownMenuTrigger asChild>
103 <ButtonTooltip
104 type={type}
105 size="tiny"
106 disabled={!sql}
107 className={cn('w-7 h-7', className)}
108 icon={<Edit size={14} strokeWidth={1.5} />}
109 tooltip={!!sql ? tooltip : { content: { side: 'bottom', text: undefined } }}
110 />
111 </DropdownMenuTrigger>
112 {!!sql && (
113 <DropdownMenuContent className="w-36">
114 <DropdownMenuItem onClick={() => sqlEditorSnap.setDiffContent(sql, DiffType.Addition)}>
115 Insert code
116 </DropdownMenuItem>
117 <DropdownMenuItem
118 onClick={() => sqlEditorSnap.setDiffContent(sql, DiffType.Modification)}
119 >
120 Replace code
121 </DropdownMenuItem>
122 <DropdownMenuItem onClick={() => newQuery(sql, title)}>
123 Create new snippet
124 </DropdownMenuItem>
125 </DropdownMenuContent>
126 )}
127 </DropdownMenu>
128 )
129}