Openstatus
www.openstatus.dev
feat: tooltip on monitor type (#1643)
authored by
Maximilian Kaske
and committed by
GitHub
c8457728
c754f99b
+36
-25
+36
-25
apps/dashboard/src/components/forms/monitor/form-general.tsx
+36
-25
apps/dashboard/src/components/forms/monitor/form-general.tsx
···
42
42
} from "@/components/ui/select";
43
43
import { Switch } from "@/components/ui/switch";
44
44
import { Textarea } from "@/components/ui/textarea";
45
+
import {
46
+
Tooltip,
47
+
TooltipContent,
48
+
TooltipTrigger,
49
+
} from "@/components/ui/tooltip";
45
50
import { cn } from "@/lib/utils";
46
51
import { zodResolver } from "@hookform/resolvers/zod";
47
52
import {
···
272
277
{ value: "dns", icon: Server, label: "DNS" },
273
278
].map((type) => {
274
279
return (
275
-
<FormItem
276
-
key={type.value}
277
-
className={cn(
278
-
"relative flex cursor-pointer flex-row items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-aria-[invalid=true]:border-destructive has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50",
279
-
defaultValues &&
280
-
defaultValues.type !== type.value &&
281
-
"pointer-events-none opacity-50",
282
-
)}
283
-
>
284
-
<FormControl>
285
-
<RadioGroupItem
286
-
value={type.value}
287
-
className="sr-only"
288
-
disabled={!!defaultValues?.type}
289
-
/>
290
-
</FormControl>
291
-
<type.icon
292
-
className="shrink-0 text-muted-foreground"
293
-
size={16}
294
-
aria-hidden="true"
295
-
/>
296
-
<FormLabel className="cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0">
297
-
{type.label}
298
-
</FormLabel>
299
-
</FormItem>
280
+
<Tooltip key={type.value}>
281
+
<TooltipTrigger asChild>
282
+
<FormItem
283
+
className={cn(
284
+
"relative flex cursor-pointer flex-row items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-aria-[invalid=true]:border-destructive has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50",
285
+
defaultValues &&
286
+
defaultValues.type !== type.value &&
287
+
"pointer-events-none opacity-50",
288
+
)}
289
+
>
290
+
<FormControl>
291
+
<RadioGroupItem
292
+
value={type.value}
293
+
className="sr-only"
294
+
disabled={!!defaultValues?.type}
295
+
/>
296
+
</FormControl>
297
+
<type.icon
298
+
className="shrink-0 text-muted-foreground"
299
+
size={16}
300
+
aria-hidden="true"
301
+
/>
302
+
<FormLabel className="cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0">
303
+
{type.label}
304
+
</FormLabel>
305
+
</FormItem>
306
+
</TooltipTrigger>
307
+
<TooltipContent>
308
+
Monitor type cannot be changed after creation.
309
+
</TooltipContent>
310
+
</Tooltip>
300
311
);
301
312
})}
302
313
<div