konnosDashboard
Logs.UpdateSavedQueryModal.tsx90 lines · main
1import { zodResolver } from '@hookform/resolvers/zod'
2import { useEffect } from 'react'
3import { SubmitHandler, useForm } from 'react-hook-form'
4import { Button, Form, FormControl, FormField, Input, Modal, Textarea } from 'ui'
5import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
6import * as z from 'zod'
7
8const formSchema = z.object({
9 name: z.string().min(1, 'Required'),
10 description: z.string().optional(),
11})
12
13type SavedQuery = z.infer<typeof formSchema>
14
15export interface UpdateSavedQueryProps {
16 header: string
17 visible: boolean
18 onCancel: () => void
19 onSubmit: SubmitHandler<SavedQuery>
20 initialValues: SavedQuery
21}
22
23export const UpdateSavedQueryModal = ({
24 header,
25 visible,
26 onCancel,
27 onSubmit,
28 initialValues,
29}: UpdateSavedQueryProps) => {
30 const form = useForm<SavedQuery>({
31 resolver: zodResolver(formSchema as any),
32 defaultValues: { ...initialValues, description: initialValues.description ?? '' },
33 })
34 const { reset, formState } = form
35 const { isDirty, isSubmitting } = formState
36
37 useEffect(() => {
38 if (isDirty) return
39 reset({ ...initialValues, description: initialValues.description ?? '' })
40 }, [isDirty, initialValues, reset])
41
42 const handleCancel = () => {
43 form.reset()
44 onCancel()
45 }
46
47 return (
48 <Modal visible={visible} onCancel={handleCancel} hideFooter header={header} size="medium">
49 <Form {...form}>
50 <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
51 <Modal.Content>
52 <FormField
53 control={form.control}
54 name="name"
55 render={({ field }) => (
56 <FormItemLayout layout="vertical" label="Name">
57 <FormControl>
58 <Input {...field} placeholder="Enter text" />
59 </FormControl>
60 </FormItemLayout>
61 )}
62 />
63 </Modal.Content>
64 <Modal.Content>
65 <FormField
66 control={form.control}
67 name="description"
68 render={({ field }) => (
69 <FormItemLayout layout="vertical" label="Description">
70 <FormControl>
71 <Textarea {...field} placeholder="Describe query" className="resize-none" />
72 </FormControl>
73 </FormItemLayout>
74 )}
75 />
76 </Modal.Content>
77 <Modal.Separator />
78 <Modal.Content className="flex items-center justify-end gap-2">
79 <Button htmlType="reset" type="default" onClick={handleCancel} disabled={isSubmitting}>
80 Cancel
81 </Button>
82 <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
83 Save query
84 </Button>
85 </Modal.Content>
86 </form>
87 </Form>
88 </Modal>
89 )
90}