konnosDashboard
DashboardSettingsToggles.tsx85 lines · main
1// @ts-nocheck
2import { zodResolver } from '@hookform/resolvers/zod'
3import { useForm } from 'react-hook-form'
4import { toast } from 'sonner'
5import { Card, Form } from 'ui'
6import * as z from 'zod'
7
8import { DashboardToggle } from './DashboardToggle'
9import { useIsInlineEditorSetting, useIsQueueOperationsSetting } from './useDashboardSettings'
10import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
11import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
12
13const DashboardSettingsSchema = z.object({
14 inlineEditorEnabled: z.boolean(),
15 queueOperationsEnabled: z.boolean(),
16})
17
18export const DashboardSettingsToggles = () => {
19 const { inlineEditorEnabled, setInlineEditorEnabled } = useIsInlineEditorSetting()
20 const { isQueueOperationsEnabled, setIsQueueOperationsEnabled } = useIsQueueOperationsSetting()
21
22 const { data: org } = useSelectedOrganizationQuery()
23
24 const { mutate: sendEvent } = useSendEventMutation()
25
26 const form = useForm<z.infer<typeof DashboardSettingsSchema>>({
27 resolver: zodResolver(DashboardSettingsSchema as any),
28 values: {
29 inlineEditorEnabled: inlineEditorEnabled ?? false,
30 queueOperationsEnabled: isQueueOperationsEnabled ?? false,
31 },
32 })
33
34 const handleInlineEditorToggle = (value: boolean) => {
35 setInlineEditorEnabled(value)
36 form.setValue('inlineEditorEnabled', value)
37
38 sendEvent({
39 action: 'inline_editor_setting_clicked',
40 properties: { enabled: value },
41 groups: { organization: org?.slug },
42 })
43
44 toast(
45 `${value ? 'Editing entities will now be via the SQL Editor' : 'Editing entities will now be via a guided UI panel'}`
46 )
47 }
48
49 const handleQueueOperationsToggle = (value: boolean) => {
50 setIsQueueOperationsEnabled(value)
51 form.setValue('queueOperationsEnabled', value)
52
53 sendEvent({
54 action: 'queue_operations_setting_clicked',
55 properties: { enabled: value },
56 groups: { organization: org?.slug },
57 })
58
59 toast(
60 `${value ? 'Table edits in the Table Editor will now be queued' : 'Table edits in the Table Editor will now be saved immediately'}`
61 )
62 }
63
64 return (
65 <Form {...form}>
66 <Card>
67 <DashboardToggle
68 form={form}
69 name="inlineEditorEnabled"
70 label="Edit entities in SQL"
71 description="Edit policies, triggers, and functions in the SQL editor instead of the guided UI."
72 onToggle={handleInlineEditorToggle}
73 />
74 <DashboardToggle
75 form={form}
76 name="queueOperationsEnabled"
77 label="Queue table operations"
78 description="Review and batch table edits in Table Editor before saving them to your database."
79 onToggle={handleQueueOperationsToggle}
80 isLast
81 />
82 </Card>
83 </Form>
84 )
85}