HttpRequestSection.tsx81 lines · main

1	import { UseFormReturn } from 'react-hook-form'
2	import {
3	FormControl,
4	FormField,
5	FormItem,
6	FormLabel,
7	FormMessage,
8	Input,
9	InputGroup,
10	InputGroupAddon,
11	InputGroupInput,
12	InputGroupText,
13	Select,
14	SelectContent,
15	SelectItem,
16	SelectTrigger,
17	SelectValue,
18	SheetSection,
19	} from 'ui'
20	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
21
22	import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
23
24	interface HttpRequestSectionProps {
25	form: UseFormReturn<CreateCronJobForm>
26	}
27
28	export const HttpRequestSection = ({ form }: HttpRequestSectionProps) => {
29	return (
30	<SheetSection className="flex flex-col gap-3">
31	<FormField
32	control={form.control}
33	name="values.method"
34	render={({ field }) => (
35	<FormItem>
36	<FormLabel>Method</FormLabel>
37	<Select onValueChange={field.onChange} value={field.value}>
38	<FormControl>
39	<SelectTrigger>
40	<SelectValue placeholder="Select a method for the HTTP request" />
41	</SelectTrigger>
42	</FormControl>
43	<SelectContent>
44	<SelectItem value="GET">GET</SelectItem>
45	<SelectItem value="POST">POST</SelectItem>
46	</SelectContent>
47	</Select>
48	<FormMessage />
49	</FormItem>
50	)}
51	/>
52
53	<FormField
54	control={form.control}
55	name="values.endpoint"
56	render={({ field: { ref, ...rest } }) => (
57	<FormItemLayout label="Endpoint URL" className="gap-1">
58	<FormControl>
59	<Input {...rest} placeholder="https://api.example.com/endpoint" />
60	</FormControl>
61	</FormItemLayout>
62	)}
63	/>
64
65	<FormField
66	control={form.control}
67	name="values.timeoutMs"
68	render={({ field: { ref, ...rest } }) => (
69	<FormItemLayout label="Timeout" className="gap-1">
70	<InputGroup>
71	<InputGroupInput {...rest} type="number" placeholder="1000" />
72	<InputGroupAddon align="inline-end">
73	<InputGroupText> ms</InputGroupText>
74	</InputGroupAddon>
75	</InputGroup>
76	</FormItemLayout>
77	)}
78	/>
79	</SheetSection>
80	)
81	}