@oneuptime/common 12.0.5 → 12.0.6

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

@@ -0,0 +1,326 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent } from "@testing-library/react";
+import * as React from "react";
+
+/*
+ * Scheduled maintenance gets the Rules section that incidents and alerts got,
+ * and deliberately does not get an AI section: nothing here is investigated or
+ * auto-remediated, so there is no page to put under one. That absence is the
+ * thing worth pinning — an AI section added here by symmetry would be a
+ * heading with nothing behind it.
+ *
+ * Rendered against the real RouteMap rather than asserted on the source, so a
+ * menu entry pointing at a route that does not exist fails here. The
+ * "coverage" block pins the full set of settings pages reachable before the
+ * move: a page may be re-sectioned freely, never lost.
+ */
+/*
+ * ModelAPI.count backs the badge entries. Stubbed inline rather than through
+ * the shared harness because jest.mock is hoisted above the imports — a helper
+ * imported from another module is not initialised yet when it runs.
+ */
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      count: () => {
+        return Promise.resolve(0);
+      },
+    },
+  };
+});
+
+import ScheduledMaintenanceSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/ScheduledMaintenanceEvents/SideMenu";
+import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
+import {
+  DESKTOP_WIDTH,
+  MOBILE_WIDTH,
+  MenuLink,
+  PROJECT_ID,
+  goTo,
+  hrefsInMenu,
+  iconCountIn,
+  isExpanded,
+  linksIn,
+  mobileSummaryText,
+  renderMenu,
+  routeFor,
+  sectionBody,
+  sectionTitlesInOrder,
+  sectionToggle,
+  setViewportWidth,
+  titlesInMenu,
+} from "./SideMenuHarness";
+
+const ROOT: string = `/dashboard/${PROJECT_ID}/scheduled-maintenance-events`;
+
+async function renderScheduledMaintenanceMenu(): Promise<void> {
+  await renderMenu(<ScheduledMaintenanceSideMenu />);
+}
+
+describe("Scheduled maintenance side menu", () => {
+  beforeEach(() => {
+    setViewportWidth(DESKTOP_WIDTH);
+    goTo(ROOT);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("sections", () => {
+    test("renders Overview, Workspace, Rules and Settings in order", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(sectionTitlesInOrder()).toEqual([
+        "Overview",
+        "Workspace",
+        "Rules",
+        "Settings",
+      ]);
+    });
+
+    /*
+     * The deliberate asymmetry with incidents and alerts. If maintenance
+     * events ever gain an investigation or auto-remediation page this test
+     * fails, which is the moment to add the section — not before.
+     */
+    test("has no AI section, because there is no maintenance AI page", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(sectionTitlesInOrder()).not.toContain("AI");
+    });
+
+    test("the day-to-day sections are expanded and the configuration sections are collapsed", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(isExpanded("Overview")).toBe(true);
+      expect(isExpanded("Workspace")).toBe(true);
+      expect(isExpanded("Rules")).toBe(false);
+      expect(isExpanded("Settings")).toBe(false);
+    });
+
+    test("the overview and workspace sections are unchanged by the move", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(linksIn("Overview")).toEqual([
+        {
+          title: "All Events",
+          href: routeFor(PageMap.SCHEDULED_MAINTENANCE_EVENTS),
+        },
+        {
+          title: "Ongoing Events",
+          href: routeFor(PageMap.ONGOING_SCHEDULED_MAINTENANCE_EVENTS),
+        },
+      ]);
+
+      expect(linksIn("Workspace")).toEqual([
+        {
+          title: "Slack",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_SLACK,
+          ),
+        },
+        {
+          title: "Microsoft Teams",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS,
+          ),
+        },
+      ]);
+    });
+  });
+
+  describe("Rules section", () => {
+    test("holds every maintenance rule page", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(linksIn("Rules")).toEqual([
+        {
+          title: "Owner Rules",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_OWNER_RULES,
+          ),
+        },
+        {
+          title: "Runbook Rules",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_RUNBOOK_RULES,
+          ),
+        },
+        {
+          title: "Label Rules",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_LABEL_RULES,
+          ),
+        },
+        {
+          title: "Reminder Rules",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_REMINDER_RULES,
+          ),
+        },
+      ]);
+    });
+
+    test("starts collapsed", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(isExpanded("Rules")).toBe(false);
+      expect(sectionBody("Rules").className).toContain("max-h-0");
+      expect(sectionBody("Rules").className).toContain("opacity-0");
+    });
+
+    test("expands on click and collapses again", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      fireEvent.click(sectionToggle("Rules"));
+
+      expect(isExpanded("Rules")).toBe(true);
+      expect(sectionBody("Rules").className).not.toContain("max-h-0");
+      expect(sectionBody("Rules").className).toContain("opacity-100");
+
+      fireEvent.click(sectionToggle("Rules"));
+
+      expect(isExpanded("Rules")).toBe(false);
+      expect(sectionBody("Rules").className).toContain("max-h-0");
+    });
+
+    test("its links stay reachable while collapsed", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(isExpanded("Rules")).toBe(false);
+      expect(linksIn("Rules")).toHaveLength(4);
+      expect(iconCountIn("Rules")).toBe(4);
+    });
+  });
+
+  describe("Settings section", () => {
+    test("keeps only the settings pages that are not rules", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(linksIn("Settings")).toEqual([
+        {
+          title: "Event State",
+          href: routeFor(PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_STATE),
+        },
+        {
+          title: "Event Templates",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_TEMPLATES,
+          ),
+        },
+        {
+          title: "Note Templates",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_NOTE_TEMPLATES,
+          ),
+        },
+        {
+          title: "Custom Fields",
+          href: routeFor(
+            PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_CUSTOM_FIELDS,
+          ),
+        },
+        {
+          title: "More Settings",
+          href: routeFor(PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_MORE),
+        },
+      ]);
+    });
+
+    test("no longer holds any rule page", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      expect(
+        linksIn("Settings").filter((link: MenuLink): boolean => {
+          return link.title.endsWith("Rules");
+        }),
+      ).toEqual([]);
+    });
+  });
+
+  describe("coverage", () => {
+    /*
+     * The set of settings pages the menu reached before Rules was split out.
+     * Re-sectioning is fine; dropping one is not.
+     */
+    const SETTINGS_PAGES_BEFORE_THE_MOVE: Array<string> = [
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_STATE,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_TEMPLATES,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_NOTE_TEMPLATES,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_CUSTOM_FIELDS,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_OWNER_RULES,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_RUNBOOK_RULES,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_LABEL_RULES,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_REMINDER_RULES,
+      PageMap.SCHEDULED_MAINTENANCE_EVENTS_SETTINGS_MORE,
+    ];
+
+    test("every settings page reachable before the move is still reachable", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      const hrefs: Array<string> = hrefsInMenu();
+
+      SETTINGS_PAGES_BEFORE_THE_MOVE.forEach((pageMapKey: string) => {
+        expect(hrefs).toContain(routeFor(pageMapKey));
+      });
+    });
+
+    test("no page is listed in two places", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      const hrefs: Array<string> = hrefsInMenu();
+
+      expect(hrefs).toEqual(Array.from(new Set(hrefs)));
+    });
+
+    test("no title is used twice", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      const titles: Array<string> = titlesInMenu();
+
+      expect(titles).toEqual(Array.from(new Set(titles)));
+    });
+
+    test("every link resolves to a fully populated maintenance route", async () => {
+      await renderScheduledMaintenanceMenu();
+
+      linksIn("Rules")
+        .concat(linksIn("Settings"), linksIn("Overview"))
+        .forEach((link: MenuLink) => {
+          expect(link.href).toContain(ROOT);
+          expect(link.href).not.toContain(":");
+          expect(link.title).not.toBe("");
+        });
+    });
+  });
+
+  describe("mobile summary", () => {
+    beforeEach(() => {
+      setViewportWidth(MOBILE_WIDTH);
+    });
+
+    test("names the Rules section on a rule page", async () => {
+      goTo(`${ROOT}/settings/runbook-rules`);
+      await renderScheduledMaintenanceMenu();
+
+      expect(mobileSummaryText()).toContain("Rules / Runbook Rules");
+    });
+
+    test("still names the Settings section on a settings page", async () => {
+      goTo(`${ROOT}/settings/state`);
+      await renderScheduledMaintenanceMenu();
+
+      expect(mobileSummaryText()).toContain("Settings / Event State");
+    });
+  });
+});

package/Tests/App/Dashboard/SideMenuHarness.tsx

@@ -0,0 +1,187 @@
+import { act, render } from "@testing-library/react";
+import { ReactElement } from "react";
+import { Location } from "react-router-dom";
+import Route from "../../../Types/API/Route";
+import Navigation from "../../../UI/Utils/Navigation";
+import RouteMap, {
+  RouteUtil,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
+
+/*
+ * Shared scaffolding for the product side-menu suites (alerts, incidents,
+ * scheduled maintenance). All three menus are the same component fed different
+ * sections, so the interesting assertions are about which pages sit in which
+ * section — not about how to dig a link out of the DOM. That digging lives
+ * here.
+ *
+ * Note what is deliberately *not* here: the expected sections themselves. Each
+ * suite spells out its own menu in full, because a helper that generated the
+ * expectation from the component would pass no matter what the component said.
+ */
+
+/*
+ * Project ids are UUIDs; ProjectUtil rejects anything else, leaving the menu's
+ * hrefs stuck on the literal ":projectId" placeholder.
+ */
+export const PROJECT_ID: string = "8f2a1b3c-4d5e-4f60-9a7b-1c2d3e4f5a6b";
+
+export const DESKTOP_WIDTH: number = 1280;
+export const MOBILE_WIDTH: number = 375;
+
+export interface MenuLink {
+  title: string;
+  href: string;
+}
+
+// The href the menu must produce for a page, from the app's own route table.
+export function routeFor(pageMapKey: string): string {
+  return RouteUtil.populateRouteParams(
+    RouteMap[pageMapKey] as Route,
+  ).toString();
+}
+
+/*
+ * Two sources of truth to keep in step: the menu items read window.location
+ * (through RouteUtil/ProjectUtil) while active-item detection reads the
+ * react-router Location that the app normally pushes into Navigation.
+ */
+export function goTo(path: string): void {
+  window.history.pushState({}, "", path);
+  Navigation.setLocation({
+    pathname: path,
+    search: "",
+    hash: "",
+    state: null,
+    key: "test",
+  } as Location);
+}
+
+export function setViewportWidth(width: number): void {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+}
+
+function headings(): Array<HTMLElement> {
+  return Array.from(document.querySelectorAll("h6"));
+}
+
+export function sectionTitlesInOrder(): Array<string> {
+  return headings().map((heading: HTMLElement): string => {
+    return heading.textContent?.trim() ?? "";
+  });
+}
+
+export function sectionRoot(title: string): HTMLElement {
+  const heading: HTMLElement | undefined = headings().find(
+    (candidate: HTMLElement): boolean => {
+      return candidate.textContent?.trim() === title;
+    },
+  );
+
+  if (!heading) {
+    throw new Error(
+      `No side-menu section titled "${title}". Sections rendered: ${sectionTitlesInOrder().join(", ")}`,
+    );
+  }
+
+  const root: HTMLElement | null = heading.closest("div.mb-2");
+
+  if (!root) {
+    throw new Error(`Section "${title}" is not wrapped in a section element.`);
+  }
+
+  return root;
+}
+
+export function sectionToggle(title: string): HTMLElement {
+  const toggle: HTMLElement | null = sectionRoot(title).querySelector("button");
+
+  if (!toggle) {
+    throw new Error(`Section "${title}" has no collapse toggle.`);
+  }
+
+  return toggle;
+}
+
+// The element SideMenuSection collapses — it stays mounted, so "hidden" is a class.
+export function sectionBody(title: string): HTMLElement {
+  const body: Element | null = sectionToggle(title).nextElementSibling;
+
+  if (!body) {
+    throw new Error(`Section "${title}" has no content element.`);
+  }
+
+  return body as HTMLElement;
+}
+
+export function isExpanded(title: string): boolean {
+  return sectionToggle(title).getAttribute("aria-expanded") === "true";
+}
+
+export function linksIn(title: string): Array<MenuLink> {
+  return Array.from(sectionRoot(title).querySelectorAll("a")).map(
+    (anchor: HTMLAnchorElement): MenuLink => {
+      return {
+        title: (
+          anchor.querySelector("span.truncate")?.textContent ??
+          anchor.textContent ??
+          ""
+        ).trim(),
+        href: anchor.getAttribute("href") ?? "",
+      };
+    },
+  );
+}
+
+export function allLinks(): Array<MenuLink> {
+  return sectionTitlesInOrder().flatMap((title: string): Array<MenuLink> => {
+    return linksIn(title);
+  });
+}
+
+export function hrefsInMenu(): Array<string> {
+  return allLinks().map((link: MenuLink): string => {
+    return link.href;
+  });
+}
+
+export function titlesInMenu(): Array<string> {
+  return allLinks().map((link: MenuLink): string => {
+    return link.title;
+  });
+}
+
+// Every anchor in a section carries an icon, rendered as an inline <svg>.
+export function iconCountIn(title: string): number {
+  return Array.from(sectionRoot(title).querySelectorAll("a")).filter(
+    (anchor: HTMLAnchorElement): boolean => {
+      return anchor.querySelector("svg") !== null;
+    },
+  ).length;
+}
+
+/*
+ * On a phone the whole menu collapses to one button naming where you are as
+ * "<section> / <page>" — the one place the section names are spelled out to
+ * the user in prose.
+ */
+export function mobileSummaryText(): string {
+  return (
+    document.querySelector('[data-testid="mobile-sidemenu-toggle"]')
+      ?.textContent ?? ""
+  );
+}
+
+/*
+ * Awaited so the badge counts settle inside act() — CountModelSideMenuItem
+ * sets state when its (stubbed) count resolves, and an unawaited render
+ * leaves that update outside the test.
+ */
+export async function renderMenu(menu: ReactElement): Promise<void> {
+  await act(async () => {
+    render(menu);
+  });
+}

package/Tests/App/Dashboard/WidgetCatalog.test.ts

@@ -383,12 +383,17 @@ describe("WidgetCatalog", () => {
     test("drops categories that have no matching widgets", () => {
       const result: Array<WidgetCatalogCategory> = searchWidgetCatalog("gauge");
 
+      /*
+       * Both gauge widgets match — the metrics one and the external Data
+       * Source one — and every other category drops out entirely.
+       */
       expect(
         result.map((category: WidgetCatalogCategory) => {
           return category.name;
         }),
-      ).toEqual(["Metrics"]);
+      ).toEqual(["Metrics", "External Data Sources"]);
       expect(result[0]?.items).toHaveLength(1);
+      expect(result[1]?.items).toHaveLength(1);
     });
 
     test("does not mutate the source catalog", () => {