@oneuptime/common 12.0.31 → 12.0.33

package/Tests/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.test.ts

@@ -234,6 +234,21 @@ const PER_TYPE_EXPECTATIONS: Array<PerTypeExpectation> = [
       "failureCause",
     ],
   },
+  {
+    monitorType: MonitorType.Database,
+    title: "Database Health",
+    keys: [
+      "isOnline",
+      "responseTimeInMs",
+      "failureCause",
+      "connectionError",
+      "engineVersion",
+      "collectedGroups",
+      "unavailableGroups",
+      "collectionIssueSummary",
+      "metrics",
+    ],
+  },
   {
     monitorType: MonitorType.ExternalStatusPage,
     title: "External Status Page",

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/ProgressBar.test.tsx

@@ -27,10 +27,46 @@ describe("ProgressBar Component", () => {
     expect(countText.innerHTML).toEqual("30 of 99 items");
   });
 
-  test("should handle zero total count without crashing", () => {
+  /*
+   * A zero total reads as an empty track, not a full one.
+   *
+   * JavaScript does not throw on a divide by zero, so before the component
+   * guarded the total this arithmetic produced Infinity (capped to a
+   * misleading 100%) or, for a zero count, NaN — which reached the DOM three
+   * times over: `width: NaN%`, which the browser discards, aria-valuenow, and
+   * a visible "NaN%" beside the count. Nothing to do is nothing done, so 0 is
+   * the honest reading and it is what every branch below asserts.
+   */
+  test("shows an empty bar when the total is zero", () => {
     render(<ProgressBar count={30} totalCount={0} suffix="items" />);
     const progressBar: HTMLElement = getProgressBar();
-    expect(progressBar).toHaveStyle({ width: "100%" });
+    expect(progressBar).toHaveStyle({ width: "0%" });
+  });
+
+  test("shows an empty bar when both the count and the total are zero", () => {
+    render(<ProgressBar count={0} totalCount={0} suffix="items" />);
+    const progressBar: HTMLElement = getProgressBar();
+    expect(progressBar).toHaveStyle({ width: "0%" });
+  });
+
+  test("never renders NaN to the user when the total is zero", () => {
+    const { container } = render(
+      <ProgressBar count={0} totalCount={0} suffix="items" />,
+    );
+
+    // The readout, the aria value and the width - the three NaN reached.
+    expect(container.textContent).not.toContain("NaN");
+    expect(screen.getByRole("progressbar")).toHaveAttribute(
+      "aria-valuenow",
+      "0",
+    );
+    expect(getProgressBar()).toHaveStyle({ width: "0%" });
+  });
+
+  test("a negative total is treated as nothing to do, not as progress", () => {
+    render(<ProgressBar count={5} totalCount={-10} suffix="items" />);
+    const progressBar: HTMLElement = getProgressBar();
+    expect(progressBar).toHaveStyle({ width: "0%" });
   });
 
   test("should round up the percentage to the nearest integer", () => {

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

@@ -5,19 +5,26 @@ import SideMenuItem, {
   ComponentProps,
 } from "../../../UI/Components/SideMenu/SideMenuItem";
 import * as Navigation from "../../../UI/Utils/Navigation";
-import { describe, expect, afterEach, jest } from "@jest/globals";
+import { describe, expect, it, afterEach, jest } from "@jest/globals";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 // Types
 import Route from "../../../Types/API/Route";
+import URL from "../../../Types/API/URL";
 import IconProp from "../../../Types/Icon/IconProp";
 import React from "react";
 import getJestMockFunction from "../../../Tests/MockType";
 
-const highlightClassList: string =
-  "bg-gradient-to-r from-indigo-50 to-indigo-50/50 text-indigo-700 shadow-sm";
+/*
+ * The active-row treatment, pinned here because it is the only thing that
+ * tells a user which page they are on. A flat indigo ground plus semibold
+ * text replaced the earlier gradient-and-shadow: the shadow read as a raised
+ * card inside a card, and the gradient's second stop was invisible at the
+ * width the menu actually renders at.
+ */
+const highlightClassList: string = "bg-indigo-50 text-indigo-700 font-semibold";
 
-const subItemHighlightClassList: string = "bg-indigo-50/70 text-indigo-700";
+const subItemHighlightClassList: string = "bg-indigo-50 text-indigo-700";
 
 jest.mock("../../../UI/Utils/Navigation.ts", () => {
   return {
@@ -135,6 +142,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;
@@ -162,4 +199,219 @@ describe("Side Menu Item", () => {
       .closest("a");
     expect(subLinkElement).toHaveClass(subItemHighlightClassList);
   });
+
+  /*
+   * The redesigned row: a bare icon, a truncating title span, and indicators
+   * that carry no text. Each of the three is depended on somewhere outside
+   * this component, so a well-meaning restyle breaks a suite that says nothing
+   * about side menus.
+   */
+  describe("Redesigned row layout", () => {
+    type SetActivePageFunction = (activeRoute: Route | URL | null) => void;
+
+    /*
+     * Every test below states the active page for itself instead of inheriting
+     * whatever mock the previous test left on the module -- jest.clearAllMocks
+     * clears calls, not implementations, so an inherited mockReturnValue(true)
+     * would quietly turn a "this row is not highlighted" assertion into a test
+     * of nothing.
+     */
+    const setActivePage: SetActivePageFunction = (
+      activeRoute: Route | URL | null,
+    ): void => {
+      Navigation.default.isOnThisPage =
+        getJestMockFunction().mockImplementation((to: Route | URL): boolean => {
+          return activeRoute !== null && to === activeRoute;
+        });
+    };
+
+    const longLink: {
+      title: string;
+      to: Route;
+    } = {
+      title: "Scheduled Maintenance",
+      to: new Route("/scheduled-maintenance"),
+    };
+
+    /*
+     * `span.truncate` is a read interface, not just an ellipsis.
+     * SideMenuHarness.linksIn() takes a row's title from `span.truncate` and
+     * falls back to the anchor's whole textContent when it is missing -- so
+     * dropping the class does not fail here, it makes five product menu suites
+     * expect "Scheduled Maintenance" and read "Scheduled Maintenance12".
+     */
+    it("Should keep the title in span.truncate with the badge digits outside it", () => {
+      setActivePage(null);
+
+      const badgeCount: number = 12;
+      render(
+        <SideMenuItem
+          link={longLink}
+          icon={IconProp.Home}
+          badge={badgeCount}
+          badgeType={BadgeType.DANGER}
+        />,
+      );
+
+      const mainLink: HTMLAnchorElement = screen
+        .getByText(longLink.title)
+        .closest("a") as HTMLAnchorElement;
+
+      const titleSpan: HTMLSpanElement | null =
+        mainLink.querySelector("span.truncate");
+
+      expect(titleSpan).not.toBeNull();
+      expect(titleSpan?.textContent).toBe(longLink.title);
+      expect(titleSpan?.textContent).not.toContain(String(badgeCount));
+
+      // The badge is inside the same anchor, which is why the span is needed.
+      expect(mainLink.textContent).toContain(String(badgeCount));
+      expect(mainLink.textContent).not.toBe(longLink.title);
+    });
+
+    /*
+     * The icon is drawn bare. A filled chip around it cost ~28px of a 208px
+     * menu, and that is the width the long titles above were losing to the
+     * ellipsis -- so a chip coming back is a layout regression, not a taste
+     * question.
+     */
+    it("Should render the icon without a filled chip behind it", () => {
+      setActivePage(null);
+
+      const { container } = render(
+        <SideMenuItem {...defaultProps} icon={IconProp.Home} />,
+      );
+
+      const mainLink: HTMLAnchorElement = container.querySelector(
+        "a",
+      ) as HTMLAnchorElement;
+
+      expect(mainLink.querySelector("svg")).not.toBeNull();
+      expect(mainLink.querySelector(".bg-gray-100")).toBeNull();
+      expect(mainLink.querySelector(".bg-indigo-100")).toBeNull();
+    });
+
+    // The active row is where a tinted chip is most tempting, and costs the same width.
+    it("Should render the active row's icon without a filled chip either", () => {
+      setActivePage(defaultProps.link.to);
+
+      const { container } = render(
+        <SideMenuItem {...defaultProps} icon={IconProp.Home} />,
+      );
+
+      const mainLink: HTMLAnchorElement = container.querySelector(
+        "a",
+      ) as HTMLAnchorElement;
+
+      expect(mainLink).toHaveClass(highlightClassList);
+      expect(mainLink.querySelector(".bg-indigo-100")).toBeNull();
+      expect(mainLink.querySelector(".bg-gray-100")).toBeNull();
+    });
+
+    /*
+     * The other half of the highlight assertion above. Without this, a row that
+     * painted itself active unconditionally would still pass the positive test
+     * -- and the menu would tell the user they are on every page at once.
+     */
+    it("Should not highlight the main link when on a different page", () => {
+      setActivePage(null);
+
+      render(<SideMenuItem {...defaultProps} />);
+
+      const mainLink: HTMLAnchorElement | null = screen
+        .getByText(defaultProps.link.title)
+        .closest("a");
+
+      expect(mainLink).not.toHaveClass("bg-indigo-50");
+      expect(mainLink).not.toHaveClass("text-indigo-700");
+      expect(mainLink).not.toHaveClass("font-semibold");
+      expect(mainLink).toHaveClass("text-gray-600");
+    });
+
+    /*
+     * A sub-item is a different page from its parent. Highlighting both would
+     * leave two rows claiming to be the current page, which is precisely the
+     * question the highlight exists to answer.
+     */
+    it("Should leave the main link unhighlighted when only the sub item is active", () => {
+      const subLink: {
+        title: string;
+        to: Route;
+      } = {
+        title: "Sub Page",
+        to: new Route("/sub-page"),
+      };
+
+      setActivePage(subLink.to);
+
+      render(<SideMenuItem {...defaultProps} subItemLink={subLink} />);
+
+      const mainLink: HTMLAnchorElement | null = screen
+        .getByText(defaultProps.link.title)
+        .closest("a");
+      const subLinkElement: HTMLAnchorElement | null = screen
+        .getByText(subLink.title)
+        .closest("a");
+
+      expect(subLinkElement).toHaveClass(subItemHighlightClassList);
+      expect(mainLink).not.toBe(subLinkElement);
+      expect(mainLink).not.toHaveClass("bg-indigo-50");
+      expect(mainLink).not.toHaveClass("text-indigo-700");
+    });
+
+    /*
+     * "Something is wrong here" and "something needs attention here" are
+     * different messages, and colour alone is not enough to tell them apart --
+     * the two indicators have to be different glyphs as well.
+     */
+    it("Should render alert and warning as distinguishable indicators", () => {
+      setActivePage(null);
+
+      const withAlert: HTMLElement = render(
+        <SideMenuItem {...defaultProps} showAlert={true} />,
+      ).container;
+      const withWarning: HTMLElement = render(
+        <SideMenuItem {...defaultProps} showWarning={true} />,
+      ).container;
+
+      const alertIcon: SVGElement | null =
+        withAlert.querySelector("svg.text-red-500");
+      const warningIcon: SVGElement | null =
+        withWarning.querySelector("svg.text-amber-500");
+
+      expect(alertIcon).not.toBeNull();
+      expect(warningIcon).not.toBeNull();
+      expect(withAlert.querySelector("svg.text-amber-500")).toBeNull();
+      expect(withWarning.querySelector("svg.text-red-500")).toBeNull();
+      expect(alertIcon?.innerHTML).not.toBe(warningIcon?.innerHTML);
+    });
+
+    /*
+     * Neither indicator may put TEXT inside the anchor.
+     * Common/Tests/App/Dashboard/AdminUserOnCallPages.test.tsx reads
+     * anchor.textContent as the row's title, so a screen-reader label rendered
+     * as visible text here ("Alert", "!") fails that unrelated suite instead of
+     * this one.
+     */
+    it("Should add no text to the anchor for the alert and warning indicators", () => {
+      setActivePage(null);
+
+      const { container } = render(
+        <SideMenuItem
+          {...defaultProps}
+          icon={IconProp.Home}
+          showAlert={true}
+          showWarning={true}
+        />,
+      );
+
+      const mainLink: HTMLAnchorElement = container.querySelector(
+        "a",
+      ) as HTMLAnchorElement;
+
+      expect(mainLink.textContent?.trim()).toBe(defaultProps.link.title);
+      // Row icon plus both indicators, all drawn as inline <svg>.
+      expect(mainLink.querySelectorAll("svg")).toHaveLength(3);
+    });
+  });
 });