@oneuptime/common 14.0.10 → 14.0.11

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

@@ -85,6 +85,8 @@ jest.mock(
 import InvestigationEvidenceList, {
   ComponentProps as EvidenceListProps,
   EVIDENCE_HIGHLIGHT_DURATION_MS,
+  EVIDENCE_ROW_CLASS_NAME,
+  EVIDENCE_ROW_HIGHLIGHT_CLASS_NAME,
   EvidenceFocusRequest,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/AI/InvestigationReport/InvestigationEvidenceList";
 import {
@@ -777,7 +779,9 @@ describe("InvestigationEvidenceList loading rows", () => {
       const emptyState: HTMLElement =
         await screen.findByText("No rows returned.");
       expect(emptyState.tagName).toBe("P");
-      expect(emptyState).toHaveClass("text-center");
+      // Plain text under the Rows heading, no longer centred in a box.
+      expect(emptyState).toHaveClass("text-sm", "text-gray-500");
+      expect(emptyState.className).not.toMatch(/ring|rounded|bg-|text-center/);
       expect(emptyState.textContent).toBe("No rows returned.");
 
       const rows: HTMLElement = screen.getByRole("group", { name: "Rows" });
@@ -797,9 +801,10 @@ describe("InvestigationEvidenceList loading rows", () => {
 
     fireEvent.click(rowToggle(/Active incidents/));
 
-    expect(await screen.findByText("No rows returned.")).toHaveClass(
-      "text-center",
-    );
+    const emptyState: HTMLElement =
+      await screen.findByText("No rows returned.");
+    expect(emptyState).toHaveClass("text-sm", "text-gray-500");
+    expect(emptyState.className).not.toMatch(/ring|rounded|bg-|text-center/);
     expect(
       screen.getByRole("group", { name: "Rows" }).querySelectorAll("p"),
     ).toHaveLength(1);
@@ -1123,7 +1128,7 @@ describe("InvestigationEvidenceList focus requests", () => {
     const row: HTMLElement = toggle.closest("li")!;
     expect(toggle).toHaveAttribute("aria-expanded", "true");
     expect(row).toHaveAttribute("data-highlighted", "true");
-    expect(row).toHaveClass("ring-2", "ring-indigo-400");
+    expect(row).toHaveClass("before:ring-2", "before:ring-indigo-500");
     expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
     expect(scrollIntoViewMock).toHaveBeenCalledWith({
       block: "nearest",
@@ -1357,6 +1362,166 @@ describe("InvestigationEvidenceList focus requests", () => {
   });
 });
 
+/*
+ * The list sits inside the card with no frame of its own. Its dividers stay at
+ * the width of the text, like every other rule on the card, while a row's
+ * hover and a chip's highlight reach 12px past the text through the row's
+ * pseudo-element, so neither the row nor its divider moves. An expanded row
+ * indents its details under the row instead of opening a gray panel with a
+ * white box inside it.
+ */
+describe("InvestigationEvidenceList layout", () => {
+  const BOX_CLASS: RegExp =
+    /^(border|border-[a-z]+-\d+|ring-\d|ring-[a-z]+-\d+|shadow(-[a-z]+)?|rounded(-[a-z0-9]+)?|bg-[a-z0-9/-]+)$/;
+
+  function boxClasses(element: Element): Array<string> {
+    return (element.getAttribute("class") || "")
+      .split(/\s+/)
+      .filter((className: string): boolean => {
+        return BOX_CLASS.test(className);
+      });
+  }
+
+  test("keeps every row at the text width and gives it a wash that reaches past it", () => {
+    renderList();
+
+    const rows: Array<HTMLElement> =
+      within(evidenceList()).getAllByRole("listitem");
+    expect(rows).toHaveLength(3);
+
+    for (const row of rows) {
+      expect(row).toHaveClass(...EVIDENCE_ROW_CLASS_NAME.split(" "));
+      // The row itself never moves, so its divider stays at the text width.
+      expect(row.className).not.toMatch(/(^|\s)-mx-/);
+      expect(boxClasses(row)).toEqual([]);
+    }
+
+    expect(EVIDENCE_ROW_CLASS_NAME).toContain("before:-inset-x-3");
+    expect(evidenceList()).toHaveClass("divide-y", "divide-gray-100");
+  });
+
+  test("lets a row's toggle reach past the text so its hover has room around the badge", () => {
+    renderList();
+
+    const toggle: HTMLElement = rowToggle(/Active incidents/);
+    expect(toggle).toHaveClass(
+      "-mx-3",
+      "w-[calc(100%+1.5rem)]",
+      "px-3",
+      "rounded-lg",
+      "hover:bg-gray-50",
+    );
+  });
+
+  test("indents an expanded row's details instead of boxing them", async () => {
+    postMock.mockResolvedValue(rowsResponse() as never);
+    renderList();
+
+    fireEvent.click(rowToggle(/Active incidents/));
+
+    const details: HTMLElement = screen.getByRole("region", {
+      name: "Active incidents (7 total) details",
+    });
+    expect(details).toHaveClass("sm:pl-12");
+    expect(boxClasses(details)).toEqual([]);
+
+    // What was queried is a plain list of labels and values, not a box.
+    const queried: HTMLElement = details.querySelector("dl")!;
+    expect(queried).not.toBeNull();
+    expect(boxClasses(queried)).toEqual([]);
+    for (const pair of Array.from(queried.children)) {
+      expect(boxClasses(pair)).toEqual([]);
+    }
+
+    await flush();
+    const rows: HTMLElement = within(details).getByRole("group", {
+      name: "Rows",
+    });
+    expect(boxClasses(rows)).toEqual([]);
+  });
+
+  test("draws the loading placeholder without a box", async () => {
+    postMock.mockReturnValue(new Promise(() => {}) as never);
+    renderList();
+
+    fireEvent.click(rowToggle(/Active incidents/));
+
+    const status: HTMLElement = within(
+      screen.getByRole("region", {
+        name: "Active incidents (7 total) details",
+      }),
+    ).getByRole("status");
+    expect(boxClasses(status)).toEqual([]);
+  });
+
+  test("highlights a chip's row through its wash, and takes it away again", async () => {
+    jest.useFakeTimers();
+    postMock.mockReturnValue(new Promise(() => {}) as never);
+    const view: ReturnType<typeof render> = renderList();
+
+    view.rerender(
+      <InvestigationEvidenceList
+        {...listProps({ focusRequest: { citationId: "C1", requestId: 1 } })}
+      />,
+    );
+    await flush();
+
+    const row: HTMLElement = rowToggle(/Active incidents/).closest("li")!;
+    expect(row).toHaveClass(...EVIDENCE_ROW_HIGHLIGHT_CLASS_NAME.split(" "));
+    // Only the pseudo-element is painted: the row itself stays unframed.
+    expect(boxClasses(row)).toEqual([]);
+    for (const className of EVIDENCE_ROW_HIGHLIGHT_CLASS_NAME.split(" ")) {
+      expect(className).toMatch(/^(dark:)?before:/);
+    }
+    // The other rows are not highlighted.
+    expect(logsToggle().closest("li")).not.toHaveClass("before:ring-2");
+
+    await act(async (): Promise<void> => {
+      jest.advanceTimersByTime(EVIDENCE_HIGHLIGHT_DURATION_MS);
+    });
+
+    expect(row).not.toHaveClass("before:ring-2");
+    expect(row).toHaveClass(...EVIDENCE_ROW_CLASS_NAME.split(" "));
+  });
+
+  test("gives a legacy row the same unframed row and wash", async () => {
+    const view: ReturnType<typeof render> = renderList({
+      items: [],
+      legacyEntries,
+    });
+
+    const rows: Array<HTMLElement> =
+      within(evidenceList()).getAllByRole("listitem");
+    for (const row of rows) {
+      expect(row).toHaveClass(...EVIDENCE_ROW_CLASS_NAME.split(" "));
+      expect(boxClasses(row)).toEqual([]);
+    }
+
+    view.rerender(
+      <InvestigationEvidenceList
+        {...listProps({
+          items: [],
+          legacyEntries,
+          focusRequest: { citationId: "C2", requestId: 1 },
+        })}
+      />,
+    );
+    await flush();
+
+    const highlighted: HTMLElement = screen
+      .getByText("Monitors (2 found)")
+      .closest("li")!;
+    expect(highlighted).toHaveClass(
+      ...EVIDENCE_ROW_HIGHLIGHT_CLASS_NAME.split(" "),
+    );
+    // Keyboard focus lands on the row; its ring is drawn on the wash too.
+    expect(highlighted).toHaveClass("focus-visible:before:ring-2");
+    expect(highlighted.className).not.toMatch(
+      /(^|\s)focus-visible:ring-2(\s|$)/,
+    );
+  });
+});
+
 describe("InvestigationEvidenceList legacy reports", () => {
   test("lists the report's own evidence entries without expanding rows", () => {
     renderList({ items: [], legacyEntries });

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

@@ -13,6 +13,7 @@ import {
   fireEvent,
   render,
   screen,
+  within,
 } from "@testing-library/react";
 import fs from "fs";
 import path from "path";
@@ -289,7 +290,7 @@ describe.each<[InvestigationSubjectType]>([["alert"], ["incident"]])(
           "datetime",
           EVALUATED_AT,
         );
-        expect(screen.queryByText("Investigation complete")).toBeNull();
+        expect(screen.queryByText("Completed")).toBeNull();
 
         const request: {
           url: { toString: () => string };
@@ -339,7 +340,7 @@ describe.each<[InvestigationSubjectType]>([["alert"], ["incident"]])(
 
       await advance();
 
-      expect(screen.getByText("Queued — waiting for a worker…")).toBeVisible();
+      expect(screen.getByText("Queued")).toBeVisible();
       expect(screen.queryByText("Not investigated")).toBeNull();
       expect(
         screen.queryByText("No investigation decision was recorded"),
@@ -1095,3 +1096,207 @@ describe("the card knows every reason the server can send", () => {
     ).toEqual([...codes].sort());
   });
 });
+
+/*
+ * The not-started state used to be built differently from a run's panel: its
+ * own icon tile and header, a tinted body, a second "What you can do" column
+ * behind a rule and an amber retry box. It now uses the same card, header
+ * and status pill as a run, with plain sections inside.
+ */
+describe("the not-started card's layout", () => {
+  const PANEL_CLASS: RegExp =
+    /^(rounded-xl|rounded-2xl|shadow|shadow-(sm|md|lg)|bg-gradient-to-[a-z]+|bg-(indigo|amber|emerald|red|green|rose|violet)-50(\/\d+)?|bg-gray-50(\/\d+)?|lg:border-l|border-l)$/;
+
+  function panelsInsideTheCard(): Array<string> {
+    const region: HTMLElement = screen.getByRole("region", {
+      name: "AI Investigation",
+    });
+
+    return Array.from(region.querySelectorAll("*"))
+      .filter((element: Element): boolean => {
+        if (element.closest("button") || element.closest("a")) {
+          return false;
+        }
+
+        const tokens: Array<string> = (element.getAttribute("class") || "")
+          .split(/\s+/)
+          .filter(Boolean);
+        const isFramedBox: boolean =
+          tokens.includes("border") &&
+          tokens.some((token: string): boolean => {
+            return token.startsWith("rounded");
+          });
+
+        return (
+          isFramedBox ||
+          tokens.some((token: string): boolean => {
+            return PANEL_CLASS.test(token);
+          })
+        );
+      })
+      .map((element: Element): string => {
+        return `<${element.tagName.toLowerCase()} class="${element.getAttribute("class")}">`;
+      });
+  }
+
+  test("sits in the same card as a run, under the same title", async () => {
+    postMock.mockResolvedValue(noRunResponse());
+    renderPanel();
+    await flush();
+
+    const cards: Array<HTMLElement> = screen.getAllByTestId("card");
+    expect(cards).toHaveLength(1);
+    expect(
+      within(cards[0]!).getByRole("heading", {
+        level: 2,
+        name: "AI Investigation",
+      }),
+    ).toBeVisible();
+    expect(cards[0]).toContainElement(
+      screen.getByRole("region", { name: "AI Investigation" }),
+    );
+    expect(screen.getByTestId("card-description")).toHaveTextContent(
+      "OneUptime AI's root-cause investigation for this alert.",
+    );
+  });
+
+  test.each([
+    [
+      "while it checks",
+      "Checking",
+      "checking",
+      (): void => {
+        postMock.mockReturnValue(new Promise<never>(() => {}));
+      },
+    ],
+    [
+      "when nothing ran",
+      "Not investigated",
+      "idle",
+      (): void => {
+        postMock.mockResolvedValue(noRunResponse());
+      },
+    ],
+    [
+      "when the status cannot be loaded",
+      "Unable to check",
+      "attention",
+      (): void => {
+        postMock.mockRejectedValue(new Error("Offline"));
+      },
+    ],
+  ])(
+    "shows the run panel's neutral pill %s",
+    async (
+      _when: string,
+      text: string,
+      indicator: string,
+      arrange: () => void,
+    ) => {
+      arrange();
+      renderPanel();
+      await flush();
+
+      const badge: HTMLElement = screen.getByLabelText("Investigation status");
+      expect(badge).toHaveTextContent(text);
+      expect(badge).toHaveAttribute("data-indicator", indicator);
+      expect(badge).toHaveClass("bg-gray-50", "text-gray-700", "ring-gray-200");
+      expect(badge.className).not.toMatch(/amber|indigo/);
+    },
+  );
+
+  test("its pill is exactly the one a run's panel shows", async () => {
+    postMock.mockResolvedValue(noRunResponse());
+    const view: ReturnType<typeof render> = renderPanel();
+    await flush();
+    const notStartedClass: string = screen.getByLabelText(
+      "Investigation status",
+    ).className;
+    view.unmount();
+
+    postMock.mockReset();
+    postMock.mockResolvedValue(runResponse(AIRunStatus.Running));
+    renderPanel();
+    await flush();
+
+    expect(screen.getByLabelText("Investigation status").className).toBe(
+      notStartedClass,
+    );
+  });
+
+  test("lays the reason and what to do out as plain sections, one after the other", async () => {
+    postMock.mockResolvedValue(
+      noRunResponse(reasonFor("daily_budget_exhausted")),
+    );
+    renderPanel();
+    await flush();
+
+    const example: ReasonExample = REASONS.find(
+      (item: ReasonExample): boolean => {
+        return item.code === "daily_budget_exhausted";
+      },
+    )!;
+    const reasonHeading: HTMLElement = screen.getByRole("heading", {
+      level: 3,
+      name: example.title,
+    });
+    const nextStepHeading: HTMLElement = screen.getByRole("heading", {
+      level: 3,
+      name: "What you can do",
+    });
+    expect(reasonHeading.className).toBe(nextStepHeading.className);
+    expect(
+      reasonHeading.compareDocumentPosition(nextStepHeading) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(panelsInsideTheCard()).toEqual([]);
+  });
+
+  test("offers Retry on a hairline row, not in an amber box", async () => {
+    postMock.mockRejectedValue(new Error("Offline"));
+    renderPanel();
+    await flush();
+
+    const retry: HTMLElement = screen.getByRole("button", {
+      name: "Retry investigation status",
+    });
+    const row: HTMLElement = retry.parentElement!;
+    expect(row).toHaveClass("border-t", "border-gray-200");
+    expect(row.className).not.toMatch(/amber|rounded|(^|\s)border(\s|$)/);
+    expect(row).toHaveTextContent("Try again to check this investigation.");
+    expect(panelsInsideTheCard()).toEqual([]);
+  });
+
+  test("keeps a failed refresh's warning free of invalid nesting", async () => {
+    const consoleError: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      console,
+      "error",
+    );
+    postMock
+      .mockResolvedValueOnce(noRunResponse())
+      .mockRejectedValueOnce(new Error("Offline"));
+    renderPanel();
+    await flush();
+    await advance();
+
+    expect(
+      screen.getByText(
+        "Could not refresh this status. Showing the last successful check.",
+      ),
+    ).toBeVisible();
+    expect(
+      screen
+        .getByRole("region", { name: "AI Investigation" })
+        .querySelectorAll("p div"),
+    ).toHaveLength(0);
+    expect(
+      consoleError.mock.calls.some((args: Array<unknown>): boolean => {
+        return args.some((value: unknown): boolean => {
+          return (
+            typeof value === "string" && value.includes("validateDOMNesting")
+          );
+        });
+      }),
+    ).toBe(false);
+  });
+});