fix: use navigator.locale to evaluate time format

coder · mtojek · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025 · a722ead915d31f5c80ddb95fc9c6faef1ae443bd
commit a722ead915d31f5c80ddb95fc9c6faef1ae443bd
diff --git a/site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx b/site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx
@@ -79,6 +79,7 @@ export const ScheduleForm: FC<ScheduleFormProps> = ({
 			},
 		});
 	const getFieldHelpers = getFormHelpers<ScheduleFormValues>(form, submitError);
+	const browserLocale = navigator.language || "en-US";
 
 	return (
 		<Form onSubmit={form.handleSubmit}>
@@ -127,7 +128,12 @@ export const ScheduleForm: FC<ScheduleFormProps> = ({
 					disabled
 					fullWidth
 					label="Next occurrence"
-					value={quietHoursDisplay(form.values.time, form.values.timezone, now)}
+					value={quietHoursDisplay(
+						browserLocale,
+						form.values.time,
+						form.values.timezone,
+						now,
+					)}
 				/>
 
 				<div>

diff --git a/site/src/utils/schedule.test.ts b/site/src/utils/schedule.test.ts
@@ -78,8 +78,9 @@ describe("util/schedule", () => {
 	});
 
 	describe("quietHoursDisplay", () => {
-		it("midnight", () => {
+		it("midnight in Poland", () => {
 			const quietHoursStart = quietHoursDisplay(
+				"pl",
 				"00:00",
 				"Australia/Sydney",
 				new Date("2023-09-06T15:00:00.000+10:00"),
@@ -89,8 +90,9 @@ describe("util/schedule", () => {
 				"00:00 tomorrow (in 9 hours) in Australia/Sydney",
 			);
 		});
-		it("five o'clock today", () => {
+		it("five o'clock today in Sweden", () => {
 			const quietHoursStart = quietHoursDisplay(
+				"sv",
 				"17:00",
 				"Europe/London",
 				new Date("2023-09-06T15:00:00.000+10:00"),
@@ -100,15 +102,28 @@ describe("util/schedule", () => {
 				"17:00 today (in 11 hours) in Europe/London",
 			);
 		});
-		it("lunch tomorrow", () => {
+		it("five o'clock today in Finland", () => {
 			const quietHoursStart = quietHoursDisplay(
+				"fl",
+				"17:00",
+				"Europe/London",
+				new Date("2023-09-06T15:00:00.000+10:00"),
+			);
+
+			expect(quietHoursStart).toBe(
+				"5:00 PM today (in 11 hours) in Europe/London",
+			);
+		});
+		it("lunch tomorrow in England", () => {
+			const quietHoursStart = quietHoursDisplay(
+				"en",
 				"13:00",
 				"US/Central",
 				new Date("2023-09-06T08:00:00.000+10:00"),
 			);
 
 			expect(quietHoursStart).toBe(
-				"13:00 tomorrow (in 20 hours) in US/Central",
+				"1:00 PM tomorrow (in 20 hours) in US/Central",
 			);
 		});
 	});

diff --git a/site/src/utils/schedule.tsx b/site/src/utils/schedule.tsx
@@ -256,6 +256,7 @@ export const timeToCron = (time: string, tz?: string) => {
 };
 
 export const quietHoursDisplay = (
+	browserLocale: string,
 	time: string,
 	tz: string,
 	now: Date | undefined,
@@ -276,7 +277,14 @@ export const quietHoursDisplay = (
 
 	const today = dayjs(now).tz(tz);
 	const day = dayjs(parsed.next().toDate()).tz(tz);
-	let display = day.format("HH:mm");
+
+	const formattedTime = new Intl.DateTimeFormat(browserLocale, {
+		hour: "numeric",
+		minute: "numeric",
+		timeZone: tz,
+	}).format(day.toDate());
+
+	let display = formattedTime;
 
 	if (day.isSame(today, "day")) {
 		display += " today";