@oneuptime/common 14.0.1 → 14.0.2

package/Tests/App/Dashboard/OnCallSchedulePreviewOverrides.test.tsx

@@ -7,7 +7,14 @@ import {
   jest,
   test,
 } from "@jest/globals";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import React from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 
@@ -111,6 +118,7 @@ import IsNull from "../../../Types/BaseDatabase/IsNull";
 import EqualToOrNull from "../../../Types/BaseDatabase/EqualToOrNull";
 import Dictionary from "../../../Types/Dictionary";
 import OneUptimeDate from "../../../Types/Date";
+import Timezone from "../../../Types/Timezone";
 import EventInterval from "../../../Types/Events/EventInterval";
 import Recurring from "../../../Types/Events/Recurring";
 import ObjectID from "../../../Types/ObjectID";
@@ -486,3 +494,199 @@ describe("Schedule preview reflects the overrides that alert routing applies (is
     expect(await getOnCallNowText()).not.toContain(USER_C_NAME);
   });
 });
+
+/*
+ * The "View as" note under the preview's timezone bubble. A schedule's zone
+ * is stored as it was saved, so an old schedule can still hold a legacy name
+ * ("US/Pacific"), while the bubble and the picker speak only current names
+ * ("America/Los_Angeles"). The note must speak the same names as the bubble,
+ * and must compare zones by what they are, not how they are spelled: a
+ * "US/Pacific" schedule viewed as America/Los_Angeles is being viewed in its
+ * own zone, not in some other zone "for reference only".
+ */
+describe("The preview's 'View as' note names zones in their current names", () => {
+  const VIEW_NOTE_PATTERN: RegExp = /^(Times below are shown|Viewing in)/;
+
+  function renderPreviewIn(timezone: string | undefined): void {
+    render(
+      <LayersPreview
+        layers={[makeLayer()]}
+        allLayerUsers={makeLayerUsers()}
+        timezone={timezone}
+        onCallDutyPolicyScheduleId={objectId(SCHEDULE_ID)}
+      />,
+    );
+  }
+
+  // Lets the preview's fetches land, so no state update outlives the test.
+  async function waitForPreviewToSettle(): Promise<void> {
+    await waitFor(
+      async () => {
+        expect(await getOnCallNowText()).toContain(USER_A_NAME);
+      },
+      { timeout: 10000 },
+    );
+  }
+
+  function getViewNote(): string {
+    const note: HTMLElement | undefined = Array.from(
+      document.querySelectorAll<HTMLElement>("p"),
+    ).find((paragraph: HTMLElement): boolean => {
+      return VIEW_NOTE_PATTERN.test(paragraph.textContent || "");
+    });
+
+    if (!note) {
+      throw new Error("Could not find the 'View as' note");
+    }
+
+    return note.textContent || "";
+  }
+
+  function getViewAsBubbleText(): string {
+    return screen.getByTestId("view-as-timezone-button").textContent || "";
+  }
+
+  function ownZoneNote(zone: string): string {
+    return `Times below are shown in the schedule's timezone (${zone}) — the zone people are actually paged in.`;
+  }
+
+  function otherZoneNote(viewZone: string, scheduleZone: string): string {
+    return `Viewing in ${viewZone}. This schedule is configured and paged in ${scheduleZone}, so the times below are for your reference only.`;
+  }
+
+  // Opens "View as", finds a zone by search, checks it is the one picked, and applies it.
+  function viewAs(searchText: string, expectedZone: string): void {
+    fireEvent.click(screen.getByTestId("view-as-timezone-button"));
+
+    const modal: HTMLElement = screen.getByTestId("modal");
+    const input: HTMLElement = within(modal).getByRole("combobox");
+
+    fireEvent.change(input, { target: { value: searchText } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+
+    expect(
+      modal.querySelector<HTMLElement>(".ou-select__single-value")?.textContent,
+    ).toBe(
+      OneUptimeDate.getGmtOffsetFriendlyStringByTimezone(
+        expectedZone as Timezone,
+      ),
+    );
+
+    fireEvent.click(screen.getByTestId("modal-footer-submit-button"));
+  }
+
+  function applyViewAsUnchanged(): void {
+    fireEvent.click(screen.getByTestId("view-as-timezone-button"));
+    fireEvent.click(screen.getByTestId("modal-footer-submit-button"));
+  }
+
+  beforeEach(() => {
+    getListMock.mockReset();
+    setupApi({ overrides: [], attachedPolicyIds: [POLICY_ID] });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("a schedule stored under a current name is described as before", async () => {
+    renderPreviewIn("UTC");
+    await waitForPreviewToSettle();
+
+    expect(getViewNote()).toBe(ownZoneNote("UTC"));
+
+    viewAs("tokyo", "Asia/Tokyo");
+
+    expect(getViewNote()).toBe(otherZoneNote("Asia/Tokyo", "UTC"));
+  });
+
+  test("a schedule stored as US/Pacific is named America/Los_Angeles, and viewed in its own zone", async () => {
+    renderPreviewIn("US/Pacific");
+    await waitForPreviewToSettle();
+
+    expect(getViewAsBubbleText()).toBe("America/Los_Angeles");
+    expect(getViewNote()).toBe(ownZoneNote("America/Los_Angeles"));
+    expect(getViewNote()).not.toContain("US/Pacific");
+
+    // Applying "View as" without choosing another zone changes nothing.
+    applyViewAsUnchanged();
+
+    expect(getViewAsBubbleText()).toBe("America/Los_Angeles");
+    expect(getViewNote()).toBe(ownZoneNote("America/Los_Angeles"));
+  });
+
+  test("viewed in another zone, both zones are named in their current names", async () => {
+    renderPreviewIn("US/Pacific");
+    await waitForPreviewToSettle();
+
+    viewAs("tokyo", "Asia/Tokyo");
+
+    expect(getViewAsBubbleText()).toBe("Asia/Tokyo");
+    expect(getViewNote()).toBe(
+      otherZoneNote("Asia/Tokyo", "America/Los_Angeles"),
+    );
+    expect(getViewNote()).not.toContain("US/Pacific");
+  });
+
+  test("switching back to the schedule's clock under its current name is its own zone again", async () => {
+    /*
+     * The picker hands back "America/Los_Angeles" here — it is a change from
+     * Asia/Tokyo — while the schedule still holds "US/Pacific". Compared as
+     * spelled, the note would claim the viewer is in a different zone from
+     * the one the schedule pages in.
+     */
+    renderPreviewIn("US/Pacific");
+    await waitForPreviewToSettle();
+
+    viewAs("tokyo", "Asia/Tokyo");
+    viewAs("los_angeles", "America/Los_Angeles");
+
+    expect(getViewNote()).toBe(ownZoneNote("America/Los_Angeles"));
+
+    // Found by the legacy spelling it was stored under, it is the same zone.
+    viewAs("tokyo", "Asia/Tokyo");
+    viewAs("US/Pacific", "America/Los_Angeles");
+
+    expect(getViewNote()).toBe(ownZoneNote("America/Los_Angeles"));
+  });
+
+  test("a mis-cased legacy name is named and compared as its current name", async () => {
+    renderPreviewIn("asia/calcutta");
+    await waitForPreviewToSettle();
+
+    expect(getViewAsBubbleText()).toBe("Asia/Kolkata");
+    expect(getViewNote()).toBe(ownZoneNote("Asia/Kolkata"));
+
+    viewAs("Japan", "Asia/Tokyo");
+    expect(getViewNote()).toBe(otherZoneNote("Asia/Tokyo", "Asia/Kolkata"));
+
+    viewAs("Calcutta", "Asia/Kolkata");
+    expect(getViewNote()).toBe(ownZoneNote("Asia/Kolkata"));
+  });
+
+  test("a schedule without a timezone names the viewer's zone in its current name", async () => {
+    /*
+     * The viewer's own zone seeds "View as". A profile saved as
+     * "Asia/Calcutta" is read as Asia/Kolkata, and the note says so.
+     */
+    OneUptimeDate.setUserTimezone("Asia/Calcutta" as Timezone);
+
+    try {
+      renderPreviewIn(undefined);
+      await waitForPreviewToSettle();
+
+      expect(getViewAsBubbleText()).toBe("Asia/Kolkata");
+      expect(getViewNote()).toBe(
+        "Viewing in Asia/Kolkata. This schedule has no timezone set, so it is paged in the server's local time.",
+      );
+
+      viewAs("US/Eastern", "America/New_York");
+
+      expect(getViewNote()).toBe(
+        "Viewing in America/New_York. This schedule has no timezone set, so it is paged in the server's local time.",
+      );
+    } finally {
+      OneUptimeDate.setUserTimezone(null);
+    }
+  });
+});

package/Tests/App/Dashboard/OnCallScheduleTimeInputsSettingsZone.test.tsx

@@ -0,0 +1,198 @@
+/** @timezone Asia/Kolkata */
+
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import LayerDateTimeFieldElement from "../../../../App/FeatureSet/Dashboard/src/Components/OnCallPolicy/OnCallScheduleLayer/LayerDateTimeFieldElement";
+import RestrictionTimesFieldElement from "../../../../App/FeatureSet/Dashboard/src/Components/OnCallPolicy/OnCallScheduleLayer/RestrictionTimesFieldElement";
+import OneUptimeDate, { Moment } from "../../../Types/Date";
+import RestrictionTimes, {
+  RestrictionType,
+} from "../../../Types/OnCallDutyPolicy/RestrictionTimes";
+import Timezone from "../../../Types/Timezone";
+
+/*
+ * The schedule's time inputs, for a user whose User Settings zone (New York)
+ * is not the browser's (India, see the docblock).
+ *
+ * The schedule preview grid shifts its Dates with the BROWSER-local wall-clock
+ * helpers, because react-big-calendar draws in the browser's zone. These
+ * inputs must not follow it. The datetime-local Input and the TimePicker read
+ * and write their wall clocks in OneUptimeDate's current timezone, which is
+ * the settings zone. So the rotation-start / hand-off field and the
+ * restriction times stay on the current-timezone helpers
+ * (getLocalDateFromWallClockInTimezone and its inverse). These tests lock that
+ * in: either way round, the admin sees and enters the schedule zone's wall
+ * clock. The browser-local helpers would put both fields off by nine and a
+ * half hours.
+ */
+
+const SETTINGS_ZONE: Timezone = Timezone.AmericaNew_York;
+const SCHEDULE_TIMEZONE: string = "Asia/Singapore";
+
+// An instant given as a wall clock in the schedule's zone, e.g. "2026-09-23 09:00".
+function inSchedule(wallClock: string): Date {
+  return Moment.tz(wallClock, "YYYY-MM-DD HH:mm", SCHEDULE_TIMEZONE).toDate();
+}
+
+function wallClockInSchedule(date: Date): string {
+  return Moment.tz(date, SCHEDULE_TIMEZONE).format("YYYY-MM-DD HH:mm");
+}
+
+function dailyRestriction(from: string, to: string): RestrictionTimes {
+  const restrictionTimes: RestrictionTimes = new RestrictionTimes();
+  restrictionTimes.restictionType = RestrictionType.Daily;
+  restrictionTimes.dayRestrictionTimes = {
+    startTime: inSchedule(`2026-09-23 ${from}`),
+    endTime: inSchedule(`2026-09-23 ${to}`),
+  };
+  restrictionTimes.weeklyRestrictionTimes = [];
+  return restrictionTimes;
+}
+
+function getInputValue(element: HTMLElement): string {
+  return (element as HTMLInputElement).value;
+}
+
+beforeEach(() => {
+  OneUptimeDate.setUserTimezone(SETTINGS_ZONE);
+  // A 24-hour picker whatever the machine's locale, so hours read back as typed.
+  jest
+    .spyOn(OneUptimeDate, "getUserPrefers12HourFormat")
+    .mockReturnValue(false);
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+  OneUptimeDate.setUserTimezone(null);
+});
+
+describe("The schedule's time inputs keep to the settings zone the pickers render in", () => {
+  test("the test really does run with a settings zone that is neither the browser's nor the schedule's", () => {
+    expect(OneUptimeDate.getCurrentTimezone()).toBe(SETTINGS_ZONE);
+    expect(new Date(2026, 8, 23, 9, 0, 0).getTimezoneOffset()).toBe(-330);
+  });
+
+  test("the rotation-start / hand-off field shows a stored time at the schedule zone's clock", () => {
+    render(
+      <LayerDateTimeFieldElement
+        dataTestId="hand-off"
+        value={inSchedule("2026-09-23 09:00")}
+        timezone={SCHEDULE_TIMEZONE}
+      />,
+    );
+
+    /*
+     * The browser-local helper would have shown 23:30 the evening before:
+     * a Date reading 09:00 in India, which the Input reads in New York.
+     */
+    expect(getInputValue(screen.getByTestId("hand-off"))).toBe(
+      "2026-09-23T09:00",
+    );
+  });
+
+  test("the rotation-start / hand-off field stores a typed time as that wall clock in the schedule zone", () => {
+    const onChange: MockFunction = getJestMockFunction();
+
+    render(
+      <LayerDateTimeFieldElement
+        dataTestId="hand-off"
+        value={inSchedule("2026-09-23 09:00")}
+        timezone={SCHEDULE_TIMEZONE}
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.change(screen.getByTestId("hand-off"), {
+      target: { value: "2026-09-23T10:30" },
+    });
+
+    /*
+     * The Input resolves the typed wall clock in New York. The browser-local
+     * helper would then have read it at India's clock and stored 20:00.
+     */
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const stored: Date = onChange.mock.calls[0]![0] as Date;
+    expect(wallClockInSchedule(stored)).toBe("2026-09-23 10:30");
+  });
+
+  test("the restriction time pickers show stored times at the schedule zone's clock", () => {
+    render(
+      <RestrictionTimesFieldElement
+        value={dailyRestriction("09:00", "11:30")}
+        timezone={SCHEDULE_TIMEZONE}
+      />,
+    );
+
+    const hours: Array<string> = screen
+      .getAllByLabelText("Hours")
+      .map(getInputValue);
+    const minutes: Array<string> = screen
+      .getAllByLabelText("Minutes")
+      .map(getInputValue);
+
+    expect(hours).toEqual(["09", "11"]);
+    expect(minutes).toEqual(["00", "30"]);
+  });
+
+  test("a restriction time typed into the picker is stored as that wall clock in the schedule zone", async () => {
+    const user: ReturnType<typeof userEvent.setup> = userEvent.setup();
+    const onChange: MockFunction = getJestMockFunction();
+
+    render(
+      <RestrictionTimesFieldElement
+        value={dailyRestriction("09:00", "11:30")}
+        timezone={SCHEDULE_TIMEZONE}
+        onChange={onChange}
+      />,
+    );
+
+    /*
+     * Type an absolute time rather than nudging the one shown. A nudge
+     * round-trips through whichever pair of helpers the field uses, since each
+     * pair's display and store steps undo each other, so it could not tell
+     * the two pairs apart.
+     */
+    await user.click(screen.getAllByLabelText("Hours")[0]!);
+    const dialog: HTMLElement = screen.getByRole("dialog", {
+      name: "Select time",
+    });
+    fireEvent.change(within(dialog).getByLabelText("Hours"), {
+      target: { value: "14" },
+    });
+    fireEvent.change(within(dialog).getByLabelText("Minutes"), {
+      target: { value: "15" },
+    });
+    await user.click(within(dialog).getByRole("button", { name: "Apply" }));
+
+    /*
+     * The picker builds 14:15 on New York's clock. The browser-local helper
+     * would have read that Date on India's clock instead, which is nine and a
+     * half or ten and a half hours later, and stored that.
+     */
+    expect(onChange).toHaveBeenCalled();
+    const restrictionTimes: RestrictionTimes = onChange.mock.calls[
+      onChange.mock.calls.length - 1
+    ]![0] as RestrictionTimes;
+    expect(
+      wallClockInSchedule(restrictionTimes.dayRestrictionTimes!.startTime),
+    ).toMatch(/ 14:15$/);
+  });
+});