konnosDashboard
SqlFunctionSection.tsx56 lines · main
1import { UseFormReturn } from 'react-hook-form'
2import { FormField, SheetSection } from 'ui'
3import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
4
5import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
6import FunctionSelector from '@/components/ui/FunctionSelector'
7import SchemaSelector from '@/components/ui/SchemaSelector'
8
9interface SqlFunctionSectionProps {
10 form: UseFormReturn<CreateCronJobForm>
11}
12
13export const SqlFunctionSection = ({ form }: SqlFunctionSectionProps) => {
14 const schema = form.watch('values.schema')
15
16 return (
17 <SheetSection className="flex flex-col gap-3 2xl:flex-row 2xl:[&>div]:w-full">
18 <FormField
19 control={form.control}
20 name="values.schema"
21 render={({ field }) => (
22 <FormItemLayout label="Schema" className="gap-1">
23 <SchemaSelector
24 size="small"
25 className="w-56 2xl:w-full"
26 selectedSchemaName={field.value}
27 stopScrollPropagation
28 onSelectSchema={(name) => {
29 field.onChange(name)
30 // deselect the selected function when the schema is changed
31 form.resetField('values.functionName')
32 }}
33 />
34 </FormItemLayout>
35 )}
36 />
37
38 <FormField
39 control={form.control}
40 name="values.functionName"
41 render={({ field }) => (
42 <FormItemLayout label="Function name" className="gap-1">
43 <FunctionSelector
44 size="small"
45 className="w-56 2xl:w-full"
46 schema={schema}
47 value={field.value}
48 stopScrollPropagation
49 onChange={(name) => field.onChange(name)}
50 />
51 </FormItemLayout>
52 )}
53 />
54 </SheetSection>
55 )
56}