@oneuptime/common 12.0.4 → 12.0.6

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

@@ -0,0 +1,251 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import AIInvestigationHeaderStatus, {
+  AIInvestigationStatusLiveRegion,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/AI/AIInvestigationHeaderStatus";
+import {
+  AI_INVESTIGATION_PANEL_ID,
+  isActiveAIInvestigationStatus,
+  scrollToAIInvestigationPanel,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/AI/AIInvestigationStatus";
+import AIRunStatus from "../../../Types/AI/AIRunStatus";
+
+const ACTIVE_STATUSES: Array<AIRunStatus> = [
+  AIRunStatus.Queued,
+  AIRunStatus.Running,
+];
+
+const INACTIVE_STATUSES: Array<AIRunStatus> = Object.values(AIRunStatus).filter(
+  (status: AIRunStatus) => {
+    return !ACTIVE_STATUSES.includes(status);
+  },
+);
+
+type SetReducedMotionFunction = (matches: boolean) => void;
+
+const setReducedMotion: SetReducedMotionFunction = (matches: boolean): void => {
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: jest.fn().mockReturnValue({ matches: matches }),
+  });
+};
+
+afterEach(() => {
+  cleanup();
+  document.getElementById(AI_INVESTIGATION_PANEL_ID)?.remove();
+});
+
+beforeEach(() => {
+  setReducedMotion(false);
+});
+
+describe("AIInvestigationHeaderStatus", () => {
+  test.each(Object.values(AIRunStatus))(
+    "classifies %s without leaving a new status unaccounted for",
+    (status: AIRunStatus) => {
+      expect(isActiveAIInvestigationStatus(status)).toBe(
+        ACTIVE_STATUSES.includes(status),
+      );
+    },
+  );
+
+  test("treats a missing status as inactive", () => {
+    expect(isActiveAIInvestigationStatus(null)).toBe(false);
+    expect(isActiveAIInvestigationStatus(undefined)).toBe(false);
+  });
+
+  test("makes a running investigation obvious", () => {
+    render(
+      <AIInvestigationHeaderStatus
+        status={AIRunStatus.Running}
+        onViewProgress={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("AI is investigating")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Reviewing telemetry and tracing the likely root cause.",
+      ),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  test("uses honest queued copy before investigation work has begun", () => {
+    render(
+      <AIInvestigationHeaderStatus
+        status={AIRunStatus.Queued}
+        onViewProgress={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("AI investigation queued")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Waiting for an AI worker. Telemetry review will begin automatically.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("AI is investigating")).not.toBeInTheDocument();
+  });
+
+  test("only animates when AI is actively investigating", () => {
+    const { container, rerender } = render(
+      <AIInvestigationHeaderStatus
+        status={AIRunStatus.Running}
+        onViewProgress={() => {}}
+      />,
+    );
+
+    expect(container.innerHTML).toContain("motion-safe:animate-ping");
+    expect(container.innerHTML).not.toContain(" animate-ping ");
+
+    rerender(
+      <AIInvestigationHeaderStatus
+        status={AIRunStatus.Queued}
+        onViewProgress={() => {}}
+      />,
+    );
+
+    expect(container.innerHTML).not.toContain("motion-safe:animate-ping");
+  });
+
+  test.each(INACTIVE_STATUSES)(
+    "renders no stale header notice for %s",
+    (status: AIRunStatus) => {
+      const { container } = render(
+        <AIInvestigationHeaderStatus
+          status={status}
+          onViewProgress={() => {}}
+        />,
+      );
+
+      expect(container).toBeEmptyDOMElement();
+    },
+  );
+
+  test("exposes a native progress button tied to the full investigation panel", async () => {
+    const onViewProgress: MockFunction = getJestMockFunction();
+    render(
+      <AIInvestigationHeaderStatus
+        status={AIRunStatus.Running}
+        onViewProgress={onViewProgress}
+      />,
+    );
+
+    const button: HTMLButtonElement = screen.getByRole("button", {
+      name: "View live AI investigation progress",
+    });
+
+    expect(button).toHaveAttribute("type", "button");
+    expect(button).toHaveAttribute("aria-controls", AI_INVESTIGATION_PANEL_ID);
+
+    await userEvent.click(button);
+    button.focus();
+    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard(" ");
+
+    expect(onViewProgress).toHaveBeenCalledTimes(3);
+  });
+});
+
+describe("AIInvestigationStatusLiveRegion", () => {
+  test("stays mounted and announces active status transitions without the CTA", () => {
+    const { rerender } = render(
+      <AIInvestigationStatusLiveRegion status={null} />,
+    );
+    const liveStatus: HTMLElement = screen.getByRole("status");
+
+    expect(liveStatus).toHaveAttribute("aria-live", "polite");
+    expect(liveStatus).toHaveAttribute("aria-atomic", "true");
+    expect(liveStatus).toHaveClass("sr-only");
+    expect(liveStatus).toBeEmptyDOMElement();
+
+    rerender(<AIInvestigationStatusLiveRegion status={AIRunStatus.Queued} />);
+    expect(liveStatus).toHaveTextContent(
+      "AI investigation queued. Waiting for an AI worker. Telemetry review will begin automatically.",
+    );
+    expect(liveStatus).not.toHaveTextContent("View live progress");
+
+    rerender(<AIInvestigationStatusLiveRegion status={AIRunStatus.Running} />);
+    expect(liveStatus).toHaveTextContent(
+      "AI is investigating. Reviewing telemetry and tracing the likely root cause.",
+    );
+
+    rerender(
+      <AIInvestigationStatusLiveRegion status={AIRunStatus.Completed} />,
+    );
+    expect(liveStatus).toBeEmptyDOMElement();
+  });
+});
+
+describe("scrollToAIInvestigationPanel", () => {
+  type AddTargetFunction = () => {
+    target: HTMLElement;
+    scrollIntoView: MockFunction;
+    focus: MockFunction;
+  };
+
+  const addTarget: AddTargetFunction = () => {
+    const target: HTMLElement = document.createElement("section");
+    target.id = AI_INVESTIGATION_PANEL_ID;
+    target.tabIndex = -1;
+
+    const scrollIntoView: MockFunction = getJestMockFunction();
+    const focus: MockFunction = getJestMockFunction();
+    Object.defineProperty(target, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+    Object.defineProperty(target, "focus", {
+      configurable: true,
+      value: focus,
+    });
+    document.body.appendChild(target);
+
+    return { target, scrollIntoView, focus };
+  };
+
+  test("smoothly scrolls to and focuses the detailed investigation", () => {
+    const { scrollIntoView, focus } = addTarget();
+
+    scrollToAIInvestigationPanel();
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "smooth",
+      block: "start",
+    });
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+  });
+
+  test("honors reduced-motion preferences", () => {
+    setReducedMotion(true);
+    const { scrollIntoView, focus } = addTarget();
+
+    scrollToAIInvestigationPanel();
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      behavior: "auto",
+      block: "start",
+    });
+    expect(focus).toHaveBeenCalledTimes(1);
+  });
+
+  test("is a safe no-op before a panel exists", () => {
+    expect(() => {
+      scrollToAIInvestigationPanel();
+    }).not.toThrow();
+  });
+});

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

@@ -321,7 +321,11 @@ describe("AddWidgetModal", () => {
 
       typeSearch("gauge");
 
-      expect(getVisibleWidgetTypes()).toEqual([DashboardComponentType.Gauge]);
+      // Both gauge widgets: the metrics one and the external Data Source one.
+      expect(getVisibleWidgetTypes()).toEqual([
+        DashboardComponentType.Gauge,
+        DashboardComponentType.DataSourceGauge,
+      ]);
     });
 
     test("announces how many widgets matched", () => {
@@ -330,7 +334,7 @@ describe("AddWidgetModal", () => {
       typeSearch("gauge");
 
       expect(screen.getByTestId("add-widget-result-count")).toHaveTextContent(
-        "1 widget matches",
+        "2 widgets match",
       );
 
       typeSearch("docker");
@@ -347,7 +351,10 @@ describe("AddWidgetModal", () => {
 
       typeSearch("GAUGE");
 
-      expect(getVisibleWidgetTypes()).toEqual([DashboardComponentType.Gauge]);
+      expect(getVisibleWidgetTypes()).toEqual([
+        DashboardComponentType.Gauge,
+        DashboardComponentType.DataSourceGauge,
+      ]);
     });
 
     test("finds widgets by keywords that are not shown on the card", () => {

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

@@ -0,0 +1,387 @@
+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";
+
+/*
+ * The alerts side menu is the only map users have of the alerts product, and
+ * the reorganisation that split AI and Rules out of Settings is exactly the
+ * kind of change that silently drops a page: an entry moved into a new section
+ * but never added, or added twice, or pointed at the wrong route. Nothing about
+ * any of those looks wrong in a diff.
+ *
+ * So these render the real component against the real RouteMap rather than
+ * asserting on its source, and every href is compared to the route the page is
+ * actually registered under. The last test in "coverage" is the important one:
+ * it pins the full set of settings pages that were reachable before the move,
+ * so a page can be re-sectioned freely but 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 AlertsSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Alerts/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";
+
+async function renderAlertsMenu(): Promise<void> {
+  await renderMenu(<AlertsSideMenu />);
+}
+
+describe("Alerts side menu", () => {
+  beforeEach(() => {
+    setViewportWidth(DESKTOP_WIDTH);
+    goTo(`/dashboard/${PROJECT_ID}/alerts`);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("sections", () => {
+    test("renders the six product sections in order", async () => {
+      await renderAlertsMenu();
+
+      expect(sectionTitlesInOrder()).toEqual([
+        "Alerts",
+        "Episodes",
+        "AI",
+        "Workspace",
+        "Rules",
+        "Settings",
+      ]);
+    });
+
+    test("the day-to-day sections are expanded and the configuration sections are collapsed", async () => {
+      await renderAlertsMenu();
+
+      expect(isExpanded("Alerts")).toBe(true);
+      expect(isExpanded("Episodes")).toBe(true);
+      expect(isExpanded("AI")).toBe(true);
+      expect(isExpanded("Workspace")).toBe(true);
+      expect(isExpanded("Rules")).toBe(false);
+      expect(isExpanded("Settings")).toBe(false);
+    });
+
+    test("the alert, episode and workspace sections are unchanged by the move", async () => {
+      await renderAlertsMenu();
+
+      expect(linksIn("Alerts")).toEqual([
+        { title: "All Alerts", href: routeFor(PageMap.ALERTS) },
+        { title: "Active Alerts", href: routeFor(PageMap.UNRESOLVED_ALERTS) },
+      ]);
+
+      expect(linksIn("Episodes")).toEqual([
+        { title: "All Episodes", href: routeFor(PageMap.ALERT_EPISODES) },
+        {
+          title: "Active Episodes",
+          href: routeFor(PageMap.UNRESOLVED_ALERT_EPISODES),
+        },
+        { title: "Documentation", href: routeFor(PageMap.ALERT_EPISODE_DOCS) },
+      ]);
+
+      expect(linksIn("Workspace")).toEqual([
+        {
+          title: "Slack",
+          href: routeFor(PageMap.ALERTS_WORKSPACE_CONNECTION_SLACK),
+        },
+        {
+          title: "Microsoft Teams",
+          href: routeFor(PageMap.ALERTS_WORKSPACE_CONNECTION_MICROSOFT_TEAMS),
+        },
+      ]);
+    });
+  });
+
+  describe("AI section", () => {
+    test("holds exactly Investigation and Remediation, pointing at the AI and auto-remediation pages", async () => {
+      await renderAlertsMenu();
+
+      expect(linksIn("AI")).toEqual([
+        { title: "Investigation", href: routeFor(PageMap.ALERTS_SETTINGS_AI) },
+        {
+          title: "Remediation",
+          href: routeFor(PageMap.ALERTS_SETTINGS_AUTO_REMEDIATION_RULES),
+        },
+      ]);
+    });
+
+    test("is visible without expanding anything", async () => {
+      await renderAlertsMenu();
+
+      expect(isExpanded("AI")).toBe(true);
+      expect(sectionBody("AI").className).toContain("opacity-100");
+      expect(sectionBody("AI").className).not.toContain("max-h-0");
+    });
+
+    test("both entries carry an icon", async () => {
+      await renderAlertsMenu();
+
+      expect(iconCountIn("AI")).toBe(2);
+    });
+  });
+
+  describe("Rules section", () => {
+    test("holds every alert rule page", async () => {
+      await renderAlertsMenu();
+
+      expect(linksIn("Rules")).toEqual([
+        {
+          title: "Grouping Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_GROUPING_RULES),
+        },
+        {
+          title: "On-Call Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_ON_CALL_RULES),
+        },
+        {
+          title: "Owner Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_OWNER_RULES),
+        },
+        {
+          title: "Runbook Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_RUNBOOK_RULES),
+        },
+        {
+          title: "Privacy Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_PRIVACY_RULES),
+        },
+        {
+          title: "Label Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_LABEL_RULES),
+        },
+        {
+          title: "Reminder Rules",
+          href: routeFor(PageMap.ALERTS_SETTINGS_REMINDER_RULES),
+        },
+      ]);
+    });
+
+    test("starts collapsed", async () => {
+      await renderAlertsMenu();
+
+      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 renderAlertsMenu();
+
+      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");
+    });
+
+    /*
+     * Collapsed is a style, not an unmount — the links stay in the DOM and
+     * stay clickable through keyboard navigation. Worth pinning: a future
+     * change to conditional rendering would make the collapsed section
+     * unreachable for anything that is not a mouse.
+     */
+    test("its links stay reachable while collapsed", async () => {
+      await renderAlertsMenu();
+
+      expect(isExpanded("Rules")).toBe(false);
+      expect(linksIn("Rules")).toHaveLength(7);
+    });
+  });
+
+  describe("Settings section", () => {
+    test("keeps only the settings pages that are neither AI nor rules", async () => {
+      await renderAlertsMenu();
+
+      expect(linksIn("Settings")).toEqual([
+        {
+          title: "Alert State",
+          href: routeFor(PageMap.ALERTS_SETTINGS_STATE),
+        },
+        {
+          title: "Alert Severity",
+          href: routeFor(PageMap.ALERTS_SETTINGS_SEVERITY),
+        },
+        {
+          title: "Note Templates",
+          href: routeFor(PageMap.ALERTS_SETTINGS_NOTE_TEMPLATES),
+        },
+        {
+          title: "Custom Fields",
+          href: routeFor(PageMap.ALERTS_SETTINGS_CUSTOM_FIELDS),
+        },
+        {
+          title: "More Settings",
+          href: routeFor(PageMap.ALERTS_SETTINGS_MORE),
+        },
+      ]);
+    });
+
+    test("no longer links to the AI or auto-remediation pages", async () => {
+      await renderAlertsMenu();
+
+      const settingsHrefs: Array<string> = linksIn("Settings").map(
+        (link: MenuLink): string => {
+          return link.href;
+        },
+      );
+
+      expect(settingsHrefs).not.toContain(routeFor(PageMap.ALERTS_SETTINGS_AI));
+      expect(settingsHrefs).not.toContain(
+        routeFor(PageMap.ALERTS_SETTINGS_AUTO_REMEDIATION_RULES),
+      );
+    });
+
+    test("no longer holds any rule page", async () => {
+      await renderAlertsMenu();
+
+      expect(
+        linksIn("Settings").filter((link: MenuLink): boolean => {
+          return link.title.endsWith("Rules");
+        }),
+      ).toEqual([]);
+    });
+  });
+
+  describe("coverage", () => {
+    /*
+     * The set of settings pages the menu reached before AI and Rules were
+     * split out. Re-sectioning is fine; dropping one is not.
+     */
+    const SETTINGS_PAGES_BEFORE_THE_MOVE: Array<string> = [
+      PageMap.ALERTS_SETTINGS_AI,
+      PageMap.ALERTS_SETTINGS_STATE,
+      PageMap.ALERTS_SETTINGS_SEVERITY,
+      PageMap.ALERTS_SETTINGS_NOTE_TEMPLATES,
+      PageMap.ALERTS_SETTINGS_CUSTOM_FIELDS,
+      PageMap.ALERTS_SETTINGS_GROUPING_RULES,
+      PageMap.ALERTS_SETTINGS_ON_CALL_RULES,
+      PageMap.ALERTS_SETTINGS_OWNER_RULES,
+      PageMap.ALERTS_SETTINGS_RUNBOOK_RULES,
+      PageMap.ALERTS_SETTINGS_AUTO_REMEDIATION_RULES,
+      PageMap.ALERTS_SETTINGS_PRIVACY_RULES,
+      PageMap.ALERTS_SETTINGS_LABEL_RULES,
+      PageMap.ALERTS_SETTINGS_REMINDER_RULES,
+      PageMap.ALERTS_SETTINGS_MORE,
+    ];
+
+    test("every settings page reachable before the move is still reachable", async () => {
+      await renderAlertsMenu();
+
+      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 renderAlertsMenu();
+
+      const hrefs: Array<string> = hrefsInMenu();
+
+      expect(hrefs).toEqual(Array.from(new Set(hrefs)));
+    });
+
+    test("no title is used twice", async () => {
+      await renderAlertsMenu();
+
+      const titles: Array<string> = titlesInMenu();
+
+      expect(titles).toEqual(Array.from(new Set(titles)));
+    });
+
+    test("every link resolves to a fully populated route", async () => {
+      await renderAlertsMenu();
+
+      linksIn("Rules")
+        .concat(linksIn("AI"), linksIn("Settings"), linksIn("Alerts"))
+        .forEach((link: MenuLink) => {
+          expect(link.href).toContain(`/dashboard/${PROJECT_ID}/alerts`);
+          expect(link.href).not.toContain(":");
+          expect(link.title).not.toBe("");
+        });
+    });
+  });
+
+  /*
+   * On a phone the menu collapses to a single button that names where you
+   * are as "<section> / <page>". That string is the one place the section
+   * rename is spelled out to the user, so it is worth pinning directly.
+   */
+  describe("mobile summary", () => {
+    beforeEach(() => {
+      setViewportWidth(MOBILE_WIDTH);
+    });
+
+    test("names the AI section on the investigation page", async () => {
+      goTo(`/dashboard/${PROJECT_ID}/alerts/settings/ai`);
+      await renderAlertsMenu();
+
+      expect(mobileSummaryText()).toContain("AI / Investigation");
+    });
+
+    test("names the AI section on the remediation page", async () => {
+      goTo(`/dashboard/${PROJECT_ID}/alerts/settings/auto-remediation-rules`);
+      await renderAlertsMenu();
+
+      expect(mobileSummaryText()).toContain("AI / Remediation");
+    });
+
+    test("names the Rules section on a rule page", async () => {
+      goTo(`/dashboard/${PROJECT_ID}/alerts/settings/grouping-rules`);
+      await renderAlertsMenu();
+
+      expect(mobileSummaryText()).toContain("Rules / Grouping Rules");
+    });
+
+    test("still names the Settings section on a settings page", async () => {
+      goTo(`/dashboard/${PROJECT_ID}/alerts/settings/state`);
+      await renderAlertsMenu();
+
+      expect(mobileSummaryText()).toContain("Settings / Alert State");
+    });
+  });
+});