Openstatus www.openstatus.dev

chore: few regions banner

authored by

Maximilian Kaske and committed by
Maximilian Kaske
404a4537 d77fbcf3

+39 -5
+39 -5
apps/web/src/components/forms/monitor/section-scheduling.tsx
··· 1 1 "use client"; 2 2 3 + import { Info } from "lucide-react"; 3 4 import type { UseFormReturn } from "react-hook-form"; 4 5 5 6 import type { InsertMonitor, WorkspacePlan } from "@openstatus/db/src/schema"; 6 7 import { monitorPeriodicitySchema } from "@openstatus/db/src/schema/constants"; 8 + import type { Limits } from "@openstatus/db/src/schema/plan/schema"; 7 9 import { getLimit } from "@openstatus/db/src/schema/plan/utils"; 8 10 11 + import { cn } from "@/lib/utils"; 9 12 import { 10 13 FormControl, 11 14 FormDescription, ··· 21 24 } from "@openstatus/ui"; 22 25 import { groupByContinent } from "@openstatus/utils"; 23 26 24 - import type { Limits } from "@openstatus/db/src/schema/plan/schema"; 25 27 import { CheckboxLabel } from "../shared/checkbox-label"; 26 28 import { SectionHeader } from "../shared/section-header"; 27 29 import { SelectRegion } from "./select-region"; ··· 108 110 <FormDescription> 109 111 Select the regions you want to monitor your endpoint from.{" "} 110 112 <br /> 111 - {plan === "free" 112 - ? "Only a few regions are available in the free plan. Upgrade to access all regions." 113 - : ""} 113 + <span className="text-xs"> 114 + {plan === "free" 115 + ? "Only a few regions are available in the free plan. Upgrade to access all regions." 116 + : ""} 117 + </span> 114 118 </FormDescription> 119 + <FewRegionsBanner form={form} className="max-w-md" /> 115 120 <div> 116 121 {Object.entries(groupByContinent) 117 122 .sort((a, b) => a[0].localeCompare(b[0])) ··· 183 188 ); 184 189 })} 185 190 </div> 186 - 187 191 <FormMessage /> 188 192 </FormItem> 189 193 ); ··· 192 196 </div> 193 197 ); 194 198 } 199 + 200 + // REMINDER: only watch the regions in a new component to avoid re-renders 201 + function FewRegionsBanner({ 202 + form, 203 + className, 204 + }: Pick<Props, "form"> & { className?: string }) { 205 + const watchRegions = form.watch("regions"); 206 + 207 + if (watchRegions?.length && watchRegions.length > 2) return null; 208 + 209 + return ( 210 + <div 211 + className={cn( 212 + "flex items-center gap-3 rounded-lg border border-border px-3 py-2", 213 + className, 214 + )} 215 + > 216 + <Info 217 + className="-mt-0.5 shrink-0 text-status-monitoring" 218 + size={16} 219 + strokeWidth={2} 220 + aria-hidden="true" 221 + /> 222 + <p className="text-sm"> 223 + To minimize false positives, we recommend monitoring your endpoint in at 224 + least 3 regions. 225 + </p> 226 + </div> 227 + ); 228 + }