@oneuptime/common 12.0.31 → 12.0.32

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

@@ -1,10 +1,12 @@
 /*
  * The dashboard's command palette owns Cmd/Ctrl+K, so the NavBar grew a
- * `disableCommandKShortcut` prop that stops it registering its own document
- * keydown for the products menu. These tests pin the contract in BOTH
- * directions: with the prop the menu must NOT open on Cmd+K (or the palette
- * and the menu would double-fire on one keystroke), and without the prop the
- * legacy shortcut must keep working for every other NavBar consumer.
+ * `disableCommandKShortcut` prop that surrenders the chord to the dashboard
+ * command palette. These tests pin the contract in BOTH directions: with the
+ * prop the menu must NOT open or advertise Cmd+K (or the two surfaces would
+ * claim the same shortcut), and without the prop the legacy shortcut must
+ * keep working for every other NavBar consumer. An already-open products menu
+ * still listens just long enough to close without consuming the palette's
+ * keydown, preventing two modal dialogs from being stacked.
  */
 
 /*
@@ -98,6 +100,10 @@ function pressCommandK(): void {
   fireEvent.keyDown(document, { key: "k", metaKey: true });
 }
 
+function commandKHint(): HTMLElement | null {
+  return screen.queryByText(/^(Command|Control) \+ K$/);
+}
+
 describe("NavBar Cmd/Ctrl+K gating", () => {
   afterEach(() => {
     cleanup();
@@ -110,6 +116,7 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
 
     pressCommandK();
     expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(commandKHint()).toBeInTheDocument();
 
     // And the same chord closes it again — it is a toggle, not just an opener.
     pressCommandK();
@@ -138,7 +145,7 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
-  test("with disableCommandKShortcut, the menu still opens from its trigger button", () => {
+  test("with disableCommandKShortcut, the menu still opens from its trigger button without advertising Cmd/Ctrl+K", () => {
     /*
      * Disabling the shortcut must not disable the menu: the button path is the
      * remaining way in, so it has to keep working.
@@ -153,6 +160,94 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
 
     fireEvent.click(screen.getByText("Products"));
     expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(commandKHint()).not.toBeInTheDocument();
+  });
+
+  test("with disableCommandKShortcut, Cmd+K closes an already-open products menu without consuming the palette's event", () => {
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Products"));
+    expect(screen.getByRole("dialog", { name: "Products menu" })).toBeVisible();
+
+    const defaultAllowed: boolean = fireEvent.keyDown(document, {
+      key: "k",
+      metaKey: true,
+    });
+
+    expect(defaultAllowed).toBe(true);
+    expect(
+      screen.queryByRole("dialog", { name: "Products menu" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("the enabled products shortcut ignores extra modifiers and a chord claimed by an earlier handler", () => {
+    render(<Navbar items={[homeItem]} moreMenuItems={moreMenuItems} />);
+
+    fireEvent.keyDown(document, { key: "k", metaKey: true, shiftKey: true });
+    fireEvent.keyDown(document, { key: "k", ctrlKey: true, altKey: true });
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    const claimChord: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", claimChord, { capture: true });
+
+    try {
+      pressCommandK();
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    } finally {
+      window.removeEventListener("keydown", claimChord, { capture: true });
+    }
+
+    pressCommandK();
+    expect(screen.getByRole("dialog", { name: "Products menu" })).toBeVisible();
+  });
+
+  test("a NavBar without a products menu leaves Cmd+K untouched", () => {
+    render(<Navbar items={[homeItem]} />);
+
+    const defaultAllowed: boolean = fireEvent.keyDown(document, {
+      key: "k",
+      metaKey: true,
+    });
+
+    expect(defaultAllowed).toBe(true);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  test("the close-only listener dismisses Products even when the shortcut owner ran first", () => {
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+    fireEvent.click(screen.getByText("Products"));
+
+    const claimChord: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", claimChord, { capture: true });
+
+    try {
+      pressCommandK();
+      expect(
+        screen.queryByRole("dialog", { name: "Products menu" }),
+      ).not.toBeInTheDocument();
+    } finally {
+      window.removeEventListener("keydown", claimChord, { capture: true });
+    }
   });
 
   test("with disableCommandKShortcut, Cmd+K's default is not prevented (the palette may claim it)", () => {
@@ -166,8 +261,8 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
 
     /*
      * fireEvent returns false when some handler called preventDefault. With
-     * the NavBar listener unregistered, nothing here may swallow the chord —
-     * the whole point is leaving it free for the command palette's handler.
+     * Products closed, no close-only listener is needed and nothing here may
+     * swallow the chord — the palette is free to claim it.
      */
     const defaultAllowed: boolean = fireEvent.keyDown(document, {
       key: "k",

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

@@ -135,6 +135,36 @@ describe("Side Menu Item", () => {
     expect(mainLink).toHaveClass(highlightClassList);
   });
 
+  it("Should use activeRoute for highlighting without changing the link target", () => {
+    const linkTarget: Route = new Route("/network/map?site=");
+    const activeRoute: Route = new Route("/network/map");
+
+    Navigation.default.isOnThisPage = getJestMockFunction().mockImplementation(
+      (route: Route): boolean => {
+        return route === activeRoute;
+      },
+    );
+
+    render(
+      <SideMenuItem
+        link={{ title: "Network Map", to: linkTarget }}
+        activeRoute={activeRoute}
+      />,
+    );
+
+    const mainLink: HTMLAnchorElement = screen
+      .getByText("Network Map")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(Navigation.default.isOnThisPage).toHaveBeenCalledWith(activeRoute);
+    expect(mainLink).toHaveClass(highlightClassList);
+    expect(mainLink).toHaveAttribute("href", linkTarget.toString());
+
+    fireEvent.click(mainLink);
+
+    expect(Navigation.default.navigate).toHaveBeenCalledWith(linkTarget);
+  });
+
   it("Should highlights sub item link when on the same page", () => {
     const subLink: {
       title: string;

package/Tests/UI/Utils/TableColumnsToCsv.test.ts

@@ -25,6 +25,7 @@ interface Row {
   hosts?: Array<{ name: string }> | undefined;
   services?: Array<{ name: string }> | undefined;
   monitors?: Array<{ name: string }> | undefined;
+  monitorTemplate?: { templateName?: string } | undefined;
 }
 
 /*
@@ -446,6 +447,35 @@ describe("TableColumnsToCsv", () => {
 
       expect(result).toEqual([]);
     });
+
+    test("keeps a column that is only hidden on mobile", () => {
+      /*
+       * hideOnMobile is a render-time decision taken by TableHeader / TableRow,
+       * and this utility never sees a viewport. The monitors list Template
+       * column sits at the intersection of the two different kinds of "hidden"
+       * a column can now have: a phone viewer who switched it on in Customize
+       * Columns gets it in their file, while a desktop viewer on the defaults
+       * does not - because the "which columns am I seeing" question is answered
+       * upstream in BaseModelTable, never here. Teaching the exporter about
+       * hideOnMobile would silently strip columns from the export of anyone on
+       * a narrow screen, and nobody would notice until a support ticket.
+       */
+      const result: Columns<Row> = TableColumnsToCsv.getExportableColumns([
+        { title: "Name", type: FieldType.Text, key: "name" },
+        {
+          title: "Template",
+          type: FieldType.Entity,
+          key: "monitorTemplate",
+          hideOnMobile: true,
+        },
+      ]);
+
+      expect(
+        result.map((c: Column<Row>) => {
+          return c.title;
+        }),
+      ).toEqual(["Name", "Template"]);
+    });
   });
 
   describe("getExportKeys", () => {

package/Tests/UI/Utils/UseDashboardTimeRangeZoom.test.tsx

@@ -0,0 +1,187 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import React, { FunctionComponent, ReactElement } from "react";
+import useDashboardTimeRangeZoom, {
+  DashboardTimeRangeZoom,
+} from "../../../UI/Utils/UseDashboardTimeRangeZoom";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+
+/*
+ * The dashboard shells hand this hook's three callbacks straight into a
+ * canvas full of React.memo'd widgets whose comparators deliberately do NOT
+ * compare function identity. So identity stability is not a nicety here —
+ * a callback that changes reference every render would be blocked from
+ * reaching the widget, leaving it holding a closure over a stale range, and
+ * the SECOND zoom of a session would silently do nothing.
+ *
+ * These tests read the hook through a real component lifecycle, and pin the
+ * identity contract explicitly.
+ */
+
+const ROLLING_HOUR: RangeStartAndEndDateTime = {
+  range: TimeRange.PAST_ONE_HOUR,
+};
+
+const PINNED_DAY: RangeStartAndEndDateTime = {
+  range: TimeRange.CUSTOM,
+  startAndEndDate: new InBetween<Date>(
+    new Date("2026-08-20T00:00:00.000Z"),
+    new Date("2026-08-21T00:00:00.000Z"),
+  ),
+};
+
+const DRAG_START: Date = new Date("2026-08-20T09:20:00.000Z");
+const DRAG_END: Date = new Date("2026-08-20T09:35:00.000Z");
+
+let latest: DashboardTimeRangeZoom | null = null;
+let renderCount: number = 0;
+const seenCallbacks: {
+  set: Array<unknown>;
+  zoom: Array<unknown>;
+  reset: Array<unknown>;
+} = { set: [], zoom: [], reset: [] };
+
+const ZoomProbe: FunctionComponent = (): ReactElement => {
+  const zoom: DashboardTimeRangeZoom = useDashboardTimeRangeZoom(ROLLING_HOUR);
+
+  latest = zoom;
+  renderCount++;
+  seenCallbacks.set.push(zoom.setStartAndEndDate);
+  seenCallbacks.zoom.push(zoom.zoomToTimeRange);
+  seenCallbacks.reset.push(zoom.resetZoom);
+
+  return (
+    <div>
+      <span data-testid="range">{zoom.startAndEndDate.range}</span>
+      <span data-testid="start">
+        {zoom.startAndEndDate.startAndEndDate?.startValue?.toISOString() || ""}
+      </span>
+      <span data-testid="end">
+        {zoom.startAndEndDate.startAndEndDate?.endValue?.toISOString() || ""}
+      </span>
+      <span data-testid="is-zoomed">{String(zoom.isZoomed)}</span>
+    </div>
+  );
+};
+
+function read(testId: string): string {
+  return screen.getByTestId(testId).textContent || "";
+}
+
+function zoomApi(): DashboardTimeRangeZoom {
+  if (!latest) {
+    throw new Error("probe has not rendered");
+  }
+  return latest;
+}
+
+function renderProbe(): void {
+  latest = null;
+  renderCount = 0;
+  seenCallbacks.set = [];
+  seenCallbacks.zoom = [];
+  seenCallbacks.reset = [];
+  render(<ZoomProbe />);
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("useDashboardTimeRangeZoom", () => {
+  test("starts on the initial range with nothing to reset", () => {
+    renderProbe();
+
+    expect(read("range")).toBe(TimeRange.PAST_ONE_HOUR);
+    expect(read("is-zoomed")).toBe("false");
+  });
+
+  test("a panel drag pins the board to the selected window", () => {
+    renderProbe();
+
+    act(() => {
+      zoomApi().zoomToTimeRange(DRAG_START, DRAG_END);
+    });
+
+    expect(read("range")).toBe(TimeRange.CUSTOM);
+    expect(read("start")).toBe(DRAG_START.toISOString());
+    expect(read("end")).toBe(DRAG_END.toISOString());
+    expect(read("is-zoomed")).toBe("true");
+  });
+
+  test("a double-click reset puts the board back on the pre-zoom range", () => {
+    renderProbe();
+
+    act(() => {
+      zoomApi().zoomToTimeRange(DRAG_START, DRAG_END);
+    });
+    act(() => {
+      zoomApi().resetZoom();
+    });
+
+    expect(read("range")).toBe(TimeRange.PAST_ONE_HOUR);
+    expect(read("is-zoomed")).toBe("false");
+  });
+
+  test("resetting an unzoomed board does not even re-render", () => {
+    renderProbe();
+    const rendersBefore: number = renderCount;
+
+    act(() => {
+      zoomApi().resetZoom();
+    });
+
+    /*
+     * The util returns the same state object, so React bails out of the
+     * update — a stray double-click on an unzoomed dashboard costs nothing
+     * and cannot make every widget refetch.
+     */
+    expect(renderCount).toBe(rendersBefore);
+    expect(read("range")).toBe(TimeRange.PAST_ONE_HOUR);
+  });
+
+  test("an explicit picker change replaces the range and retires the reset", () => {
+    renderProbe();
+
+    act(() => {
+      zoomApi().zoomToTimeRange(DRAG_START, DRAG_END);
+    });
+    expect(read("is-zoomed")).toBe("true");
+
+    act(() => {
+      zoomApi().setStartAndEndDate(PINNED_DAY);
+    });
+
+    expect(read("start")).toBe("2026-08-20T00:00:00.000Z");
+    expect(read("is-zoomed")).toBe("false");
+  });
+
+  test("the three callbacks keep their identity across every re-render", () => {
+    renderProbe();
+
+    act(() => {
+      zoomApi().zoomToTimeRange(DRAG_START, DRAG_END);
+    });
+    act(() => {
+      zoomApi().setStartAndEndDate(PINNED_DAY);
+    });
+    act(() => {
+      zoomApi().zoomToTimeRange(DRAG_START, DRAG_END);
+    });
+    act(() => {
+      zoomApi().resetZoom();
+    });
+
+    expect(renderCount).toBeGreaterThan(1);
+    for (const captured of [
+      seenCallbacks.set,
+      seenCallbacks.zoom,
+      seenCallbacks.reset,
+    ]) {
+      expect(new Set(captured).size).toBe(1);
+    }
+  });
+});