@oneuptime/common 12.0.30 → 12.0.32

package/Tests/UI/Components/TableSortAndMobileColumns.test.tsx

@@ -0,0 +1,195 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import Table from "../../../UI/Components/Table/Table";
+import Columns from "../../../UI/Components/Table/Types/Columns";
+import FieldType from "../../../UI/Components/Types/FieldType";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+
+/*
+ * Two things a table owes anyone not driving it with a mouse on a wide screen.
+ *
+ * Sorting was mouse-only: the handler sat on the <th>, which is not focusable
+ * and does not answer Enter or Space, even though aria-sort was already
+ * telling assistive technology the column WAS sortable. It sits on a button
+ * inside the header cell now.
+ *
+ * And `hideOnMobile` - about 200 column declarations across the product say
+ * it - was honoured by the header, the skeleton rows, and the desktop row, but
+ * not by the mobile card, which is the one layout it exists for.
+ */
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, opts?: { defaultValue?: string }): string => {
+          return opts?.defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+interface Row {
+  _id?: string | undefined;
+  name?: string | undefined;
+  status?: string | undefined;
+}
+
+const columns: Columns<Row> = [
+  { title: "Name", type: FieldType.Text, key: "name" },
+  { title: "Status", type: FieldType.Text, key: "status", hideOnMobile: true },
+  // No key, so this one is not sortable and must stay a plain cell.
+  { title: "Notes", type: FieldType.Text },
+];
+
+const data: Array<Row> = [
+  { _id: "1", name: "Alpha", status: "Up" },
+  { _id: "2", name: "Beta", status: "Down" },
+];
+
+interface RenderTableOptions {
+  sortBy?: keyof Row | null | undefined;
+  sortOrder?: SortOrder | undefined;
+  onSortChanged?:
+    | ((sortBy: keyof Row | null, sortOrder: SortOrder) => void)
+    | undefined;
+}
+
+type RenderTableFunction = (options?: RenderTableOptions | undefined) => void;
+
+const renderTable: RenderTableFunction = (
+  options?: RenderTableOptions | undefined,
+): void => {
+  render(
+    <Table<Row>
+      id="test-table"
+      data={data}
+      columns={columns}
+      currentPageNumber={1}
+      totalItemsCount={data.length}
+      itemsOnPage={10}
+      error=""
+      isLoading={false}
+      singularLabel="Monitor"
+      pluralLabel="Monitors"
+      sortOrder={options?.sortOrder ?? SortOrder.Ascending}
+      sortBy={options?.sortBy ?? null}
+      onSortChanged={options?.onSortChanged ?? (() => {})}
+      onNavigateToPage={() => {}}
+    />,
+  );
+};
+
+/*
+ * The table decides mobile vs desktop from window.innerWidth at mount
+ * (< 768 = mobile). jsdom defaults to 1024, so desktop is the baseline and
+ * mobile tests must set the width BEFORE rendering.
+ */
+const setViewportWidth: (width: number) => void = (width: number): void => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+};
+
+afterEach(() => {
+  cleanup();
+  setViewportWidth(1024);
+});
+
+describe("sortable column headers", () => {
+  test("a sortable header is a real button, so it is focusable", () => {
+    renderTable();
+
+    const sortButton: HTMLElement = screen.getByRole("button", {
+      name: "Name",
+    });
+
+    expect(sortButton.tagName).toBe("BUTTON");
+    expect(sortButton).toHaveAttribute("type", "button");
+
+    sortButton.focus();
+    expect(sortButton).toHaveFocus();
+  });
+
+  test("activating the header button sorts the column", () => {
+    const sortCalls: Array<[keyof Row | null, SortOrder]> = [];
+
+    renderTable({
+      onSortChanged: (sortBy: keyof Row | null, sortOrder: SortOrder) => {
+        sortCalls.push([sortBy, sortOrder]);
+      },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Name" }));
+
+    expect(sortCalls).toEqual([["name", SortOrder.Descending]]);
+  });
+
+  test("the sort direction still round-trips", () => {
+    const sortCalls: Array<[keyof Row | null, SortOrder]> = [];
+
+    renderTable({
+      sortBy: "name",
+      sortOrder: SortOrder.Descending,
+      onSortChanged: (sortBy: keyof Row | null, sortOrder: SortOrder) => {
+        sortCalls.push([sortBy, sortOrder]);
+      },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /Name/ }));
+
+    expect(sortCalls).toEqual([["name", SortOrder.Ascending]]);
+  });
+
+  test("a column that cannot be sorted gets no button", () => {
+    renderTable();
+
+    expect(
+      screen.queryByRole("button", { name: "Notes" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Notes")).toBeInTheDocument();
+  });
+
+  test("the header still announces sort state to assistive technology", () => {
+    renderTable({ sortBy: "name", sortOrder: SortOrder.Ascending });
+
+    const headers: Array<HTMLElement> = screen.getAllByRole("columnheader");
+    const nameHeader: HTMLElement | undefined = headers.find(
+      (header: HTMLElement) => {
+        return header.textContent?.includes("Name");
+      },
+    );
+
+    expect(nameHeader).toHaveAttribute("aria-sort", "ascending");
+  });
+});
+
+describe("hideOnMobile columns", () => {
+  test("the mobile card leaves out columns marked hideOnMobile", () => {
+    setViewportWidth(375);
+    renderTable();
+
+    // "Name" is shown on every breakpoint.
+    expect(screen.getAllByText("Alpha").length).toBeGreaterThan(0);
+
+    /*
+     * "Status" is hideOnMobile. Its header is already filtered out on mobile;
+     * the row used to render it anyway, which is the regression this pins.
+     */
+    expect(screen.queryByText("Up")).not.toBeInTheDocument();
+    expect(screen.queryByText("Down")).not.toBeInTheDocument();
+  });
+
+  test("the desktop row is untouched", () => {
+    setViewportWidth(1280);
+    renderTable();
+
+    expect(screen.getByText("Up")).toBeInTheDocument();
+    expect(screen.getByText("Down")).toBeInTheDocument();
+  });
+});

package/Tests/UI/Components/XAxis.test.ts

@@ -1,18 +1,262 @@
-/** @timezone Europe/London */
+/** @timezone UTC */
 
+import { afterEach, describe, expect, test } from "@jest/globals";
+import OneUptimeDate from "../../../Types/Date";
+import Timezone from "../../../Types/Timezone";
+import XAxisMaxMin from "../../../UI/Components/Charts/Types/XAxis/XAxisMaxMin";
+import XAxisPrecision from "../../../UI/Components/Charts/Types/XAxis/XAxisPrecision";
 import XAxisUtil from "../../../UI/Components/Charts/Utils/XAxis";
 
-describe("XAxisUtil", () => {
-  test("formats past-day chart labels in local BST time instead of UTC", () => {
+/*
+ * A chart's x-axis label is the IDENTITY of its bucket, not decoration:
+ * DataPointUtil places a series row by finding the first row whose label
+ * matches, TimeAnnotationUtil resolves an event marker the same way, and
+ * recharts' categorical scale resolves no category at all once its domain
+ * holds a duplicate.
+ *
+ * These tests hold the property that makes all three safe — inside any one
+ * window, no two ticks may share a label — and the corollary that a window
+ * short enough not to need help keeps its short labels.
+ */
+
+const HOUR_IN_MS: number = 60 * 60 * 1000;
+
+const WINDOW_START: Date = new Date("2026-03-02T00:00:00.000Z");
+
+function windowOf(
+  hours: number,
+  start: Date = WINDOW_START,
+): {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+} {
+  return {
+    xAxisMin: start,
+    xAxisMax: new Date(start.getTime() + hours * HOUR_IN_MS),
+  };
+}
+
+function labelsFor(bounds: {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+}): Array<string> {
+  const formatter: (value: Date) => string = XAxisUtil.getFormatter(bounds);
+  return XAxisUtil.getPrecisionIntervals(bounds).map((interval: Date) => {
+    return formatter(interval);
+  });
+}
+
+afterEach((): void => {
+  OneUptimeDate.setUserTimezone(null);
+});
+
+describe("XAxisUtil label uniqueness", () => {
+  test("a 24 hour window labels every one of its 97 ticks distinctly", () => {
+    /*
+     * The reported bug. A 24h window sits on the fifteen-minute tier and
+     * spans 97 interval starts, but a bare "HH:mm" only has 96 readings in
+     * a day — the first and last tick both read "00:00", so the last
+     * bucket's data and annotations were folded onto the first.
+     */
+    const bounds: ReturnType<typeof windowOf> = windowOf(24);
+
+    expect(XAxisUtil.getPrecision(bounds)).toBe(
+      XAxisPrecision.EVERY_FIFTEEN_MINUTES,
+    );
+
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(labels).toHaveLength(97);
+    expect(new Set(labels).size).toBe(97);
+  });
+
+  test("a 48 hour window labels every one of its 97 ticks distinctly", () => {
+    /*
+     * The severe case. A 48h window sits on the thirty-minute tier: 97
+     * interval starts over a bare "HH:mm" that has only 48 readings, so
+     * every label appeared exactly twice and the whole of day two merged
+     * onto day one.
+     */
+    const bounds: ReturnType<typeof windowOf> = windowOf(48);
+
+    expect(XAxisUtil.getPrecision(bounds)).toBe(
+      XAxisPrecision.EVERY_THIRTY_MINUTES,
+    );
+
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(labels).toHaveLength(97);
+    expect(new Set(labels).size).toBe(97);
+  });
+
+  test.each([
+    ["6 hours", 6, 73],
+    ["12 hours", 12, 145],
+    ["13 hours", 13, 53],
+    ["23 hours", 23, 93],
+    ["24 hours", 24, 97],
+    ["36 hours", 36, 73],
+    ["48 hours", 48, 97],
+    ["72 hours", 72, 145],
+    ["5 days", 120, 121],
+  ])(
+    "%s: no two ticks share a label",
+    (_name: string, hours: number, expectedTicks: number): void => {
+      const labels: Array<string> = labelsFor(windowOf(hours));
+
+      expect(labels).toHaveLength(expectedTicks);
+      expect(new Set(labels).size).toBe(labels.length);
+    },
+  );
+
+  test("no window across three days repeats a label, at any tier", () => {
+    /*
+     * The property itself, swept rather than sampled — including windows
+     * that start off a clean boundary, which is what a live "last N hours"
+     * range always does.
+     */
+    const start: Date = new Date("2026-03-02T07:23:00.000Z");
+    const repeating: Array<string> = [];
+
+    for (let minutes: number = 15; minutes <= 3 * 24 * 60; minutes += 97) {
+      const bounds: { xAxisMin: XAxisMaxMin; xAxisMax: XAxisMaxMin } = {
+        xAxisMin: start,
+        xAxisMax: new Date(start.getTime() + minutes * 60 * 1000),
+      };
+      const labels: Array<string> = labelsFor(bounds);
+      if (new Set(labels).size !== labels.length) {
+        repeating.push(
+          `${minutes}min: ${labels.length} ticks, ${new Set(labels).size} distinct`,
+        );
+      }
+    }
+
+    expect(repeating).toEqual([]);
+  });
+});
+
+describe("XAxisUtil label verbosity", () => {
+  test("a window that cannot wrap the clock keeps its bare time labels", () => {
+    /*
+     * The date is bought at the cost of nearly tripling the label width,
+     * so it is only spent where a bare reading would be ambiguous. 23h is
+     * the last window that cannot repeat one.
+     */
+    const labels: Array<string> = labelsFor(windowOf(23));
+
+    expect(labels[0]).toBe("00:00");
+    expect(labels[labels.length - 1]).toBe("23:00");
+  });
+
+  test("a window that can wrap the clock says which day each tick is", () => {
+    const labels: Array<string> = labelsFor(windowOf(48));
+
+    expect(labels[0]).toBe("02 Mar, 00:00");
+    expect(labels[labels.length - 1]).toBe("04 Mar, 00:00");
+    // The same clock reading on the two days is now two different labels.
+    expect(labels).toContain("03 Mar, 00:00");
+  });
+
+  test("the day-qualified form matches the shape the hourly tier already uses", () => {
+    /*
+     * EVERY_HOUR and every coarser tier have carried "DD MMM, HH:00" for
+     * this same reason all along, so the finer tiers borrow its shape
+     * rather than inventing one.
+     */
+    const hourly: Array<string> = labelsFor(windowOf(5 * 24));
+    const subHourly: Array<string> = labelsFor(windowOf(48));
+
+    expect(hourly[0]).toBe("02 Mar, 00:00");
+    expect(subHourly[0]).toBe("02 Mar, 00:00");
+  });
+});
+
+describe("XAxisUtil labels across a daylight saving transition", () => {
+  /*
+   * The browser reports UTC here (see the docblock) while the user has
+   * configured London — the normal case for anyone who has set a timezone,
+   * and the one where a transition in the configured zone is invisible to
+   * the interval walker.
+   */
+
+  test("clocks going back do not give two ticks the same label", () => {
+    /*
+     * On 2026-10-25 London runs 01:00-01:59 BST and then 01:00-01:59 GMT.
+     * A four hour window is nowhere near long enough to wrap the clock,
+     * but the replayed hour repeated twelve five-minute labels — and the
+     * date does not settle it either, since both readings are on the 25th.
+     */
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const bounds: ReturnType<typeof windowOf> = windowOf(
+      4,
+      new Date("2026-10-25T00:00:00.000Z"),
+    );
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(new Set(labels).size).toBe(labels.length);
+    expect(labels).toContain("25 Oct, 01:00 BST");
+    expect(labels).toContain("25 Oct, 01:00 GMT");
+  });
+
+  test("clocks going forward stay on the plain form", () => {
+    /*
+     * A spring-forward skips an hour rather than replaying one, so it
+     * cannot produce a duplicate and must not cost the axis any width.
+     */
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const bounds: ReturnType<typeof windowOf> = windowOf(
+      4,
+      new Date("2026-03-29T00:00:00.000Z"),
+    );
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(new Set(labels).size).toBe(labels.length);
+    for (const label of labels) {
+      expect(label).toMatch(/^\d{2}:\d{2}$/);
+    }
+  });
+
+  test("an ordinary window in the same zone is untouched", () => {
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const labels: Array<string> = labelsFor(
+      windowOf(6, new Date("2026-06-01T00:00:00.000Z")),
+    );
+
+    expect(new Set(labels).size).toBe(labels.length);
+    expect(labels[0]).toBe("01:00");
+  });
+});
+
+describe("XAxisUtil formats in the configured timezone", () => {
+  test("past-day labels read in local BST time instead of UTC", () => {
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMin: new Date("2026-04-06T14:00:00.000Z"),
       xAxisMax: new Date("2026-04-07T14:00:00.000Z"),
     });
 
     /*
-     * A 24h window now uses the fifteen-minute precision tier, whose labels
-     * are local wall-clock times: 07:30 UTC is 08:30 in BST.
+     * A 24h window uses the fifteen-minute tier, and is exactly long
+     * enough to wrap the clock — so the label carries its day. 07:30 UTC
+     * is 08:30 BST on the 7th.
      */
+    expect(formatter(new Date("2026-04-07T07:30:00.000Z"))).toBe(
+      "07 Apr, 08:30",
+    );
+  });
+
+  test("a window too short to wrap still reads in local BST time", () => {
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMin: new Date("2026-04-07T02:00:00.000Z"),
+      xAxisMax: new Date("2026-04-07T14:00:00.000Z"),
+    });
+
     expect(formatter(new Date("2026-04-07T07:30:00.000Z"))).toBe("08:30");
   });
 
@@ -28,4 +272,25 @@ describe("XAxisUtil", () => {
 
     expect(originalDate.toISOString()).toBe("2026-04-07T07:30:45.000Z");
   });
+
+  test("the weekly tier reads its day and its month in the same zone", () => {
+    /*
+     * These used to be mixed inside one label — the day came from the
+     * browser's clock and the month from the configured one — so a tick
+     * near midnight could report a day from one date and a month from
+     * another.
+     */
+    OneUptimeDate.setUserTimezone("Pacific/Auckland" as Timezone);
+
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMin: new Date("2026-01-01T00:00:00.000Z"),
+      xAxisMax: new Date("2026-03-01T00:00:00.000Z"),
+    });
+
+    /*
+     * 31 Jan 23:00 UTC is already 1 Feb in Auckland (UTC+13). Both halves
+     * of the label have to agree on that.
+     */
+    expect(formatter(new Date("2026-01-31T23:00:00.000Z"))).toBe("01 Feb");
+  });
 });

package/Tests/UI/Components/XAxisDaylightSaving.test.ts

@@ -0,0 +1,113 @@
+/** @timezone Europe/London */
+
+import { describe, expect, test } from "@jest/globals";
+import XAxisMaxMin from "../../../UI/Components/Charts/Types/XAxis/XAxisMaxMin";
+import XAxisUtil from "../../../UI/Components/Charts/Utils/XAxis";
+
+/*
+ * The daylight-saving half of the label-uniqueness property, in the OTHER
+ * of the two configurations it has to hold in.
+ *
+ * OneUptimeDate.getCurrentTimezone() is `userTimezone || moment.tz.guess()`,
+ * so a user who has never opened User Settings reads dates in the zone the
+ * browser reports — the configured and browser zones are the SAME. That is
+ * this file (the docblock sets both to London). XAxis.test.ts covers the
+ * other configuration, where a user has picked a zone the browser does not
+ * report.
+ *
+ * The two behave differently and both need holding: the interval walker
+ * steps in browser wall-clock time, so when the zones agree it walks
+ * straight over the repeated hour and never emits it twice, while when
+ * they differ the transition is invisible to it and the hour is emitted
+ * twice over.
+ */
+
+const WINDOW_START: Date = new Date("2026-10-25T00:00:00.000Z");
+
+/*
+ * London's 2026 fall-back: 02:00 BST becomes 01:00 GMT, so 01:00-01:59
+ * is a wall-clock reading that names two different instants that day.
+ */
+const FOUR_HOURS_ACROSS_THE_FALL_BACK: {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+} = {
+  xAxisMin: WINDOW_START,
+  xAxisMax: new Date(WINDOW_START.getTime() + 4 * 60 * 60 * 1000),
+};
+
+function labelsFor(bounds: {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+}): Array<string> {
+  const formatter: (value: Date) => string = XAxisUtil.getFormatter(bounds);
+  return XAxisUtil.getPrecisionIntervals(bounds).map((interval: Date) => {
+    return formatter(interval);
+  });
+}
+
+/** The zone London is really in at `date`, straight from the platform. */
+function actualZoneAbbr(date: Date): string {
+  return (
+    new Intl.DateTimeFormat("en-GB", {
+      timeZone: "Europe/London",
+      timeZoneName: "short",
+    })
+      .formatToParts(date)
+      .find((part: Intl.DateTimeFormatPart): boolean => {
+        return part.type === "timeZoneName";
+      })?.value || ""
+  );
+}
+
+describe("a fall-back window when the browser and configured zones agree", () => {
+  test("no two ticks share a label", () => {
+    const labels: Array<string> = labelsFor(FOUR_HOURS_ACROSS_THE_FALL_BACK);
+
+    expect(new Set(labels).size).toBe(labels.length);
+  });
+
+  test("every tick names the zone it is really in", () => {
+    /*
+     * The labels carry a zone abbreviation here, and an abbreviation that
+     * lied would be worse than none — a reader would take an instant for
+     * one an hour away. Checked against the platform's own answer rather
+     * than against our formatter.
+     */
+    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals(
+      FOUR_HOURS_ACROSS_THE_FALL_BACK,
+    );
+    const labels: Array<string> = labelsFor(FOUR_HOURS_ACROSS_THE_FALL_BACK);
+
+    for (let index: number = 0; index < intervals.length; index++) {
+      expect(labels[index]).toContain(actualZoneAbbr(intervals[index]!));
+    }
+  });
+
+  test("the transition reads straight through, BST into GMT", () => {
+    const labels: Array<string> = labelsFor(FOUR_HOURS_ACROSS_THE_FALL_BACK);
+
+    /*
+     * Stepping wall-clock minutes in the browser's own zone walks over the
+     * repeated hour rather than through it, so the axis never holds both
+     * 01:30s. It still says which side of the change each tick is on.
+     */
+    expect(labels).toContain("25 Oct, 01:55 BST");
+    expect(labels).toContain("25 Oct, 02:00 GMT");
+    expect(labels).not.toContain("25 Oct, 01:00 GMT");
+  });
+
+  test("an ordinary window in the same zone keeps its bare labels", () => {
+    // No transition, well under a day: nothing to disambiguate, nothing spent.
+    const summer: Date = new Date("2026-06-01T00:00:00.000Z");
+    const labels: Array<string> = labelsFor({
+      xAxisMin: summer,
+      xAxisMax: new Date(summer.getTime() + 6 * 60 * 60 * 1000),
+    });
+
+    expect(new Set(labels).size).toBe(labels.length);
+    for (const label of labels) {
+      expect(label).toMatch(/^\d{2}:\d{2}$/);
+    }
+  });
+});