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
+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
+
}