Openstatus
www.openstatus.dev
fix: select (#731)
authored by
Maximilian Kaske
and committed by
GitHub
2aa276da
d8e096f4
+59
-40
+59
-40
apps/web/src/components/forms/monitor/section-assertions.tsx
+59
-40
apps/web/src/components/forms/monitor/section-assertions.tsx
···
11
11
import type { InsertMonitor } from "@openstatus/db/src/schema";
12
12
import {
13
13
Button,
14
+
FormControl,
15
+
FormField,
16
+
FormItem,
14
17
Input,
15
18
Select,
16
19
SelectContent,
···
22
25
import { Icons } from "@/components/icons";
23
26
import { SectionHeader } from "../shared/section-header";
24
27
25
-
// IMPROVEMENT: use FormFields incl. error message
28
+
// IMPROVEMENT: use FormFields incl. error message (fixes the Select component)
26
29
27
30
export const setEmptyOrStr = (v: unknown) => {
28
31
if (typeof v === "string" && v.trim() === "") return undefined;
···
67
70
Status Code
68
71
</p>
69
72
<div className="col-span-3" />
70
-
<Select
71
-
{...form.register(`statusAssertions.${i}.compare`, {
72
-
required: true,
73
-
})}
74
-
>
75
-
<SelectTrigger className="col-span-3 w-full">
76
-
<SelectValue defaultValue="eq" placeholder="Equal" />
77
-
</SelectTrigger>
78
-
<SelectContent>
79
-
{Object.entries(numberCompareDictionary).map(([key, value]) => (
80
-
<SelectItem key={key} value={key}>
81
-
{value}
82
-
</SelectItem>
83
-
))}
84
-
</SelectContent>
85
-
</Select>
73
+
<FormField
74
+
control={form.control}
75
+
name={`statusAssertions.${i}.compare`}
76
+
render={({ field }) => (
77
+
<FormItem className="col-span-3 w-full">
78
+
<Select
79
+
onValueChange={field.onChange}
80
+
defaultValue={field.value}
81
+
>
82
+
<FormControl>
83
+
<SelectTrigger>
84
+
<SelectValue defaultValue="eq" placeholder="Equal" />
85
+
</SelectTrigger>
86
+
</FormControl>
87
+
<SelectContent>
88
+
{Object.entries(numberCompareDictionary).map(
89
+
([key, value]) => (
90
+
<SelectItem key={key} value={key}>
91
+
{value}
92
+
</SelectItem>
93
+
),
94
+
)}
95
+
</SelectContent>
96
+
</Select>
97
+
</FormItem>
98
+
)}
99
+
/>
86
100
<Input
87
101
{...form.register(`statusAssertions.${i}.target`, {
88
102
required: true,
···
117
131
className="col-span-3"
118
132
placeholder="X-Header"
119
133
/>
120
-
121
-
<Select
122
-
{...form.register(`headerAssertions.${i}.compare`, {
123
-
required: true,
124
-
})}
125
-
>
126
-
<SelectTrigger className="col-span-3 w-full">
127
-
<SelectValue defaultValue="eq" placeholder="Equal" />
128
-
</SelectTrigger>
129
-
<SelectContent>
130
-
{Object.entries(stringCompareDictionary).map(([key, value]) => (
131
-
<SelectItem key={key} value={key}>
132
-
{value}
133
-
</SelectItem>
134
-
))}
135
-
</SelectContent>
136
-
</Select>
137
-
134
+
<FormField
135
+
control={form.control}
136
+
name={`headerAssertions.${i}.compare`}
137
+
render={({ field }) => (
138
+
<FormItem className="col-span-3 w-full">
139
+
<Select
140
+
onValueChange={field.onChange}
141
+
defaultValue={field.value}
142
+
>
143
+
<FormControl>
144
+
<SelectTrigger>
145
+
<SelectValue defaultValue="eq" placeholder="Equal" />
146
+
</SelectTrigger>
147
+
</FormControl>
148
+
<SelectContent>
149
+
{Object.entries(stringCompareDictionary).map(
150
+
([key, value]) => (
151
+
<SelectItem key={key} value={key}>
152
+
{value}
153
+
</SelectItem>
154
+
),
155
+
)}
156
+
</SelectContent>
157
+
</Select>
158
+
</FormItem>
159
+
)}
160
+
/>
138
161
<Input
139
-
{...form.register(`headerAssertions.${i}.target`, {
140
-
required: true,
141
-
setValueAs: setEmptyOrStr,
142
-
})}
162
+
{...form.register(`headerAssertions.${i}.target`)}
143
163
className="col-span-3"
144
164
placeholder="x-value"
145
165
/>
146
-
147
166
<div className="col-span-1">
148
167
<Button
149
168
size="icon"