@oneuptime/common 13.0.3 → 13.0.5

package/Tests/UI/Rum/SessionReplayUsersTable.test.tsx

@@ -417,6 +417,31 @@ describe("SessionReplayUsersTable actions", () => {
 });
 
 describe("SessionReplayUsersTable paging, reload, empty and error", () => {
+  it("uses the shared ModelTable footer with the fixed users page size", async () => {
+    mockUsers(() => {
+      return usersResponse([wireRollup()]);
+    });
+
+    renderTable();
+
+    await waitForUserRows(1);
+
+    const pagination: HTMLElement = screen.getByTestId(
+      "session-users-pagination",
+    );
+
+    expect(pagination.parentElement).toHaveClass("bg-gray-50", "md:-mx-6");
+    expect(
+      Array.from(
+        screen
+          .getByTestId("pagination-items-on-page-select")
+          .querySelectorAll("option"),
+      ).map((option: Element): string | null => {
+        return option.getAttribute("value");
+      }),
+    ).toEqual([String(SESSION_REPLAY_USERS_PAGE_SIZE)]);
+  });
+
   it("Next pages with the server's cursor and Next is disabled on the last page", async () => {
     const cursor: JSONObject = {
       lastSeenUnixMs: NOW - 5 * 60_000,
@@ -544,7 +569,10 @@ describe("SessionReplayUsersTable paging, reload, empty and error", () => {
     expect(screen.getByTestId("session-users-empty")).toHaveTextContent(
       "Widen the time range",
     );
-    expect(screen.queryByTestId("session-users-pagination")).toBeNull();
+    expect(screen.getByTestId("session-users-pagination")).toBeInTheDocument();
+    expect(screen.getByTestId("pagination-summary")).toHaveTextContent(
+      "No users",
+    );
   });
 
   it("a failed request reads as its kind, with a Retry that refetches", async () => {

package/Tests/UI/Telemetry/TelemetryDetailPanel.test.tsx

@@ -0,0 +1,288 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "@jest/globals";
+import * as React from "react";
+import TelemetryDetailPanel, {
+  TelemetryDetailPanelProps,
+  TelemetryDetailPanelTab,
+} from "../../../UI/Components/TelemetryViewer/components/TelemetryDetailPanel";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+const tabs: Array<TelemetryDetailPanelTab> = [
+  { id: "session", label: "Session", content: <p>Session content</p> },
+  { id: "privacy", label: "Privacy", content: <p>Privacy content</p> },
+  {
+    id: "fidelity",
+    label: "Fidelity",
+    badge: 2,
+    content: <p>Fidelity content</p>,
+  },
+];
+
+function makeProps(
+  overrides?: Partial<TelemetryDetailPanelProps>,
+): TelemetryDetailPanelProps {
+  return {
+    isOpen: true,
+    title: "Session details",
+    subtitle: "Session abc123",
+    onClose: (): void => {
+      // asserted by individual tests
+    },
+    tabs,
+    activeTabId: "session",
+    onTabChange: (): void => {
+      // asserted by individual tests
+    },
+    ...overrides,
+  };
+}
+
+describe("TelemetryDetailPanel accessibility", () => {
+  it("renders a named modal dialog with its header content", () => {
+    render(
+      <TelemetryDetailPanel
+        {...makeProps({
+          headerActions: <button type="button">Copy ID</button>,
+        })}
+      />,
+    );
+
+    const dialog: HTMLElement = screen.getByRole("dialog", {
+      name: "Session details",
+    });
+
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(within(dialog).getByText("Session abc123")).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", { name: "Copy ID" }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", { name: "Close details panel" }),
+    ).toHaveAttribute("title", "Close (Esc)");
+  });
+
+  it("associates every tab with a panel while exposing only the active one", () => {
+    render(<TelemetryDetailPanel {...makeProps()} />);
+
+    const tabList: HTMLElement = screen.getByRole("tablist", {
+      name: "Detail sections",
+    });
+    const sessionTab: HTMLElement = within(tabList).getByRole("tab", {
+      name: "Session",
+    });
+    const fidelityTab: HTMLElement = within(tabList).getByRole("tab", {
+      name: /Fidelity/,
+    });
+    const panel: HTMLElement = screen.getByRole("tabpanel", {
+      name: "Session",
+    });
+
+    expect(sessionTab).toHaveAttribute("aria-selected", "true");
+    expect(sessionTab).toHaveAttribute("tabindex", "0");
+    expect(fidelityTab).toHaveAttribute("aria-selected", "false");
+    expect(fidelityTab).toHaveAttribute("tabindex", "-1");
+    expect(sessionTab).toHaveAttribute("aria-controls", panel.id);
+    expect(panel).toHaveAttribute("aria-labelledby", sessionTab.id);
+    expect(panel).toHaveTextContent("Session content");
+    expect(sessionTab).toHaveFocus();
+    expect(screen.getAllByRole("tabpanel", { hidden: true })).toHaveLength(3);
+
+    for (const tab of within(tabList).getAllByRole("tab")) {
+      const controlledPanelId: string | null =
+        tab.getAttribute("aria-controls");
+
+      expect(controlledPanelId).not.toBeNull();
+      expect(
+        document.getElementById(controlledPanelId as string),
+      ).not.toBeNull();
+    }
+
+    expect(screen.queryByText("Privacy content")).not.toBeInTheDocument();
+    expect(screen.queryByText("Fidelity content")).not.toBeInTheDocument();
+  });
+
+  it("keeps tab selection controlled by the host", () => {
+    const onTabChange: MockFunction = getJestMockFunction();
+
+    render(
+      <TelemetryDetailPanel
+        {...makeProps({ onTabChange: onTabChange as (id: string) => void })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("tab", { name: "Privacy" }));
+
+    expect(onTabChange).toHaveBeenCalledWith("privacy");
+    expect(screen.getByRole("tabpanel")).toHaveTextContent("Session content");
+    expect(screen.getByRole("tab", { name: "Session" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("supports arrow, Home and End navigation across tabs", () => {
+    const onTabChange: MockFunction = getJestMockFunction();
+
+    render(
+      <TelemetryDetailPanel
+        {...makeProps({ onTabChange: onTabChange as (id: string) => void })}
+      />,
+    );
+
+    const session: HTMLElement = screen.getByRole("tab", { name: "Session" });
+    const privacy: HTMLElement = screen.getByRole("tab", { name: "Privacy" });
+    const fidelity: HTMLElement = screen.getByRole("tab", {
+      name: /Fidelity/,
+    });
+
+    session.focus();
+    fireEvent.keyDown(session, { key: "ArrowRight" });
+    expect(onTabChange).toHaveBeenLastCalledWith("privacy");
+    expect(privacy).toHaveFocus();
+
+    fireEvent.keyDown(privacy, { key: "End" });
+    expect(onTabChange).toHaveBeenLastCalledWith("fidelity");
+    expect(fidelity).toHaveFocus();
+
+    fireEvent.keyDown(fidelity, { key: "ArrowRight" });
+    expect(onTabChange).toHaveBeenLastCalledWith("session");
+    expect(session).toHaveFocus();
+
+    fireEvent.keyDown(session, { key: "ArrowLeft" });
+    expect(onTabChange).toHaveBeenLastCalledWith("fidelity");
+    expect(fidelity).toHaveFocus();
+
+    fireEvent.keyDown(fidelity, { key: "Home" });
+    expect(onTabChange).toHaveBeenLastCalledWith("session");
+    expect(session).toHaveFocus();
+  });
+
+  it("keeps Tab and Shift+Tab focus inside a floating panel", () => {
+    render(<TelemetryDetailPanel {...makeProps()} />);
+
+    const closeButton: HTMLElement = screen.getByRole("button", {
+      name: "Close details panel",
+    });
+    const activePanel: HTMLElement = screen.getByRole("tabpanel", {
+      name: "Session",
+    });
+
+    activePanel.focus();
+    fireEvent.keyDown(activePanel, { key: "Tab" });
+    expect(closeButton).toHaveFocus();
+
+    closeButton.focus();
+    fireEvent.keyDown(closeButton, { key: "Tab", shiftKey: true });
+    expect(activePanel).toHaveFocus();
+  });
+
+  it("returns focus to the opener after the floating panel closes", () => {
+    const FocusHarness: React.FunctionComponent = () => {
+      const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+      return (
+        <React.Fragment>
+          <button
+            type="button"
+            onClick={(): void => {
+              setIsOpen(true);
+            }}
+          >
+            Open session details
+          </button>
+          <TelemetryDetailPanel
+            {...makeProps({
+              isOpen,
+              onClose: (): void => {
+                setIsOpen(false);
+              },
+            })}
+          />
+        </React.Fragment>
+      );
+    };
+
+    render(<FocusHarness />);
+
+    const opener: HTMLElement = screen.getByRole("button", {
+      name: "Open session details",
+    });
+
+    opener.focus();
+    fireEvent.click(opener);
+
+    expect(screen.getByRole("tab", { name: "Session" })).toHaveFocus();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Close details panel" }),
+    );
+
+    expect(opener).toHaveFocus();
+  });
+});
+
+describe("TelemetryDetailPanel dismissal and variants", () => {
+  it("calls onClose from both the close button and Escape", () => {
+    const onClose: MockFunction = getJestMockFunction();
+
+    render(
+      <TelemetryDetailPanel
+        {...makeProps({ onClose: onClose as () => void })}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Close details panel" }),
+    );
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it("closes from the floating backdrop", () => {
+    const onClose: MockFunction = getJestMockFunction();
+    const { container } = render(
+      <TelemetryDetailPanel
+        {...makeProps({ onClose: onClose as () => void })}
+      />,
+    );
+    const backdrop: Element | null = container.querySelector(
+      'div.fixed.inset-0[aria-hidden="true"]',
+    );
+
+    expect(backdrop).not.toBeNull();
+    fireEvent.click(backdrop as Element);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders an embedded region without modal or backdrop semantics", () => {
+    const { container } = render(
+      <TelemetryDetailPanel
+        {...makeProps({
+          variant: "embedded",
+          tabs: [tabs[0] as TelemetryDetailPanelTab],
+        })}
+      />,
+    );
+
+    const region: HTMLElement = screen.getByRole("region", {
+      name: "Session details",
+    });
+
+    expect(region).not.toHaveAttribute("aria-modal");
+    expect(screen.queryByRole("tablist")).not.toBeInTheDocument();
+    expect(screen.queryByRole("tabpanel")).not.toBeInTheDocument();
+    expect(screen.getByText("Session content")).toBeInTheDocument();
+    expect(
+      container.querySelector('div.fixed.inset-0[aria-hidden="true"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders nothing while closed", () => {
+    render(<TelemetryDetailPanel {...makeProps({ isOpen: false })} />);
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(screen.queryByText("Session details")).not.toBeInTheDocument();
+  });
+});

package/Tests/UI/Utils/Breadcrumb/fixtures/RealBreadcrumbTrails.ts

@@ -665,7 +665,37 @@ const realBreadcrumbTrails: Array<BreadcrumbTrailFixture> = [
   {
     getter: "getExceptionsBreadcrumbs",
     pagePattern: "/dashboard/:projectId/exceptions/:id",
-    titles: ["Project", "Exceptions", "Exception Details"],
+    titles: ["Project", "Exceptions", "Exception", "Overview"],
+  },
+  {
+    getter: "getExceptionsBreadcrumbs",
+    pagePattern: "/dashboard/:projectId/exceptions/:id/stack-trace",
+    titles: ["Project", "Exceptions", "Exception", "Stack Trace"],
+  },
+  {
+    getter: "getExceptionsBreadcrumbs",
+    pagePattern: "/dashboard/:projectId/exceptions/:id/occurrences",
+    titles: ["Project", "Exceptions", "Exception", "Occurrences"],
+  },
+  {
+    getter: "getExceptionsBreadcrumbs",
+    pagePattern: "/dashboard/:projectId/exceptions/:id/context",
+    titles: ["Project", "Exceptions", "Exception", "Context"],
+  },
+  {
+    getter: "getExceptionsBreadcrumbs",
+    pagePattern: "/dashboard/:projectId/exceptions/:id/logs",
+    titles: ["Project", "Exceptions", "Exception", "Logs"],
+  },
+  {
+    getter: "getExceptionsBreadcrumbs",
+    pagePattern: "/dashboard/:projectId/exceptions/:id/ai-assistance",
+    titles: ["Project", "Exceptions", "Exception", "AI Assistance"],
+  },
+  {
+    getter: "getExceptionsBreadcrumbs",
+    pagePattern: "/dashboard/:projectId/exceptions/:id/settings",
+    titles: ["Project", "Exceptions", "Exception", "Settings"],
   },
   {
     getter: "getExceptionsBreadcrumbs",

package/Tests/UI/Utils/Breadcrumb/fixtures/RealRoutePatterns.ts

@@ -793,6 +793,12 @@ const realRoutePatterns: Array<string> = [
   "/dashboard/:projectId/exceptions/archived",
   "/dashboard/:projectId/exceptions",
   "/dashboard/:projectId/exceptions/:id",
+  "/dashboard/:projectId/exceptions/:id/stack-trace",
+  "/dashboard/:projectId/exceptions/:id/occurrences",
+  "/dashboard/:projectId/exceptions/:id/context",
+  "/dashboard/:projectId/exceptions/:id/logs",
+  "/dashboard/:projectId/exceptions/:id/ai-assistance",
+  "/dashboard/:projectId/exceptions/:id/settings",
   "/dashboard/:projectId/exceptions/documentation",
 ];
 

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

@@ -0,0 +1,154 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import Clipboard from "../../../UI/Utils/Clipboard";
+
+/*
+ * Clipboard.copyToClipboard reports whether text reached the clipboard.
+ * The async API is missing on plain-http origins and inside some frames,
+ * and rejects when the document is not focused; the legacy execCommand path
+ * covers the first case and the boolean is what lets a button say "Copy
+ * failed" instead of a green "Copied!" over an empty clipboard.
+ */
+
+type WriteTextMock = ReturnType<
+  typeof jest.fn<(text: string) => Promise<void>>
+>;
+
+type ExecCommandMock = ReturnType<typeof jest.fn<(command: string) => boolean>>;
+
+const originalExecCommand: unknown = (
+  document as unknown as Record<string, unknown>
+)["execCommand"];
+
+function installClipboard(writeText: WriteTextMock | undefined): void {
+  Object.defineProperty(navigator, "clipboard", {
+    value: writeText ? { writeText } : undefined,
+    configurable: true,
+  });
+}
+
+function installExecCommand(execCommand: ExecCommandMock | undefined): void {
+  Object.defineProperty(document, "execCommand", {
+    value: execCommand,
+    configurable: true,
+    writable: true,
+  });
+}
+
+beforeEach(() => {
+  installClipboard(undefined);
+  installExecCommand(undefined);
+});
+
+afterEach(() => {
+  installClipboard(undefined);
+  Object.defineProperty(document, "execCommand", {
+    value: originalExecCommand,
+    configurable: true,
+    writable: true,
+  });
+});
+
+describe("Clipboard.copyToClipboard", () => {
+  test("uses the async clipboard when it is there and reports success", async () => {
+    const writeText: WriteTextMock = jest.fn<(text: string) => Promise<void>>(
+      async (): Promise<void> => {},
+    );
+    const execCommand: ExecCommandMock = jest.fn<(command: string) => boolean>(
+      (): boolean => {
+        return true;
+      },
+    );
+    installClipboard(writeText);
+    installExecCommand(execCommand);
+
+    await expect(Clipboard.copyToClipboard("@k:v")).resolves.toBe(true);
+
+    expect(writeText).toHaveBeenCalledWith("@k:v");
+    expect(execCommand).not.toHaveBeenCalled();
+  });
+
+  test("falls back to execCommand when the async clipboard is absent", async () => {
+    const execCommand: ExecCommandMock = jest.fn<(command: string) => boolean>(
+      (): boolean => {
+        return true;
+      },
+    );
+    installExecCommand(execCommand);
+
+    await expect(Clipboard.copyToClipboard("@k:v")).resolves.toBe(true);
+
+    expect(execCommand).toHaveBeenCalledWith("copy");
+    // The scratch textarea does not outlive the copy.
+    expect(document.querySelector("textarea")).toBeNull();
+  });
+
+  test("the scratch textarea holds the text while the command runs", async () => {
+    let seenValue: string = "";
+    const execCommand: ExecCommandMock = jest.fn<(command: string) => boolean>(
+      (): boolean => {
+        seenValue = document.querySelector("textarea")?.value || "";
+
+        return true;
+      },
+    );
+    installExecCommand(execCommand);
+
+    await Clipboard.copyToClipboard('@resource.host.name:"web 01"');
+
+    expect(seenValue).toBe('@resource.host.name:"web 01"');
+  });
+
+  test("falls back to execCommand when the async write rejects", async () => {
+    const writeText: WriteTextMock = jest.fn<(text: string) => Promise<void>>(
+      async (): Promise<void> => {
+        throw new Error("Document is not focused.");
+      },
+    );
+    const execCommand: ExecCommandMock = jest.fn<(command: string) => boolean>(
+      (): boolean => {
+        return true;
+      },
+    );
+    installClipboard(writeText);
+    installExecCommand(execCommand);
+
+    await expect(Clipboard.copyToClipboard("@k:v")).resolves.toBe(true);
+
+    expect(execCommand).toHaveBeenCalledWith("copy");
+  });
+
+  test("reports failure, without throwing, when neither path can copy", async () => {
+    await expect(Clipboard.copyToClipboard("@k:v")).resolves.toBe(false);
+  });
+
+  test("reports failure when execCommand itself refuses", async () => {
+    const execCommand: ExecCommandMock = jest.fn<(command: string) => boolean>(
+      (): boolean => {
+        return false;
+      },
+    );
+    installExecCommand(execCommand);
+
+    await expect(Clipboard.copyToClipboard("@k:v")).resolves.toBe(false);
+    expect(document.querySelector("textarea")).toBeNull();
+  });
+
+  test("reports failure when execCommand throws", async () => {
+    const execCommand: ExecCommandMock = jest.fn<(command: string) => boolean>(
+      (): boolean => {
+        throw new Error("not supported");
+      },
+    );
+    installExecCommand(execCommand);
+
+    await expect(Clipboard.copyToClipboard("@k:v")).resolves.toBe(false);
+    expect(document.querySelector("textarea")).toBeNull();
+  });
+});

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

@@ -212,6 +212,30 @@ describe("Navigation route matching", () => {
       "",
     );
   });
+
+  test.each([
+    [
+      "/dashboard/project/security-events/",
+      "/dashboard/project/security-events",
+    ],
+    [
+      "/dashboard/project/security-events",
+      "/dashboard/project/security-events/",
+    ],
+  ])(
+    "treats trailing slashes as the same route for %s",
+    (currentPath: string, routePath: string) => {
+      Navigation.setLocation({
+        pathname: currentPath,
+        search: "",
+        hash: "",
+        state: null,
+        key: "navigation-trailing-slash",
+      });
+
+      expect(Navigation.isOnThisPage(new Route(routePath))).toBe(true);
+    },
+  );
 });
 
 describe("Navigation internal route safety", () => {