@oneuptime/common 13.0.3 → 13.0.5

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

@@ -126,6 +126,9 @@ function makeProps(
     scale: 0.62,
     fit: "contain",
     onFitChange: jest.fn(),
+    canSelectText: true,
+    isTextSelectionEnabled: false,
+    onTextSelectionChange: jest.fn(),
     onPlayPause: jest.fn(),
     onWatchAgain: jest.fn(),
     onRetry: jest.fn(),
@@ -300,6 +303,58 @@ describe("ReplayStageOverlays", () => {
       expect(screen.getByTestId("fake-stage")).toBeInTheDocument();
     });
 
+    it("offers an accessible text-selection toggle and reports both states", () => {
+      const props: ReplayStageOverlaysProps = makeProps();
+      const { rerender } = render(
+        <ReplayStageOverlays {...props}>
+          <div data-testid="fake-stage">stage</div>
+        </ReplayStageOverlays>,
+      );
+
+      const toggle: HTMLElement = screen.getByTestId("replay-select-text");
+
+      expect(toggle).toHaveTextContent("Select text");
+      expect(toggle).toHaveAttribute("aria-pressed", "false");
+      expect(toggle).toHaveAttribute(
+        "title",
+        "Pause the replay and select text to copy",
+      );
+
+      fireEvent.click(toggle);
+      expect(props.onTextSelectionChange).toHaveBeenCalledWith(true);
+
+      rerender(
+        <ReplayStageOverlays {...props} isTextSelectionEnabled={true}>
+          <div data-testid="fake-stage">stage</div>
+        </ReplayStageOverlays>,
+      );
+
+      expect(toggle).toHaveAttribute("aria-pressed", "true");
+      expect(toggle).toHaveAttribute("title", "Exit text selection mode");
+
+      fireEvent.click(toggle);
+      expect(props.onTextSelectionChange).toHaveBeenLastCalledWith(false);
+    });
+
+    it("keeps the error and retry UI available when there is no replay document", () => {
+      renderOverlays({
+        canSelectText: false,
+        isTextSelectionEnabled: true,
+        snapshot: makeSnapshot({
+          buffer: "halted",
+          error: { message: "Playback stopped", retryable: true },
+        }),
+      });
+
+      expect(screen.getByTestId("replay-select-text")).toBeDisabled();
+      expect(screen.getByTestId("replay-select-text")).toHaveAttribute(
+        "aria-pressed",
+        "false",
+      );
+      expect(screen.getByTestId("replay-overlay-error")).toBeInTheDocument();
+      expect(screen.getByTestId("replay-overlay-retry")).toBeInTheDocument();
+    });
+
     it("says the URL is not recorded yet rather than showing a blank", () => {
       renderOverlays({ entryUrl: "", chunks: [] });
 
@@ -722,6 +777,69 @@ describe("ReplayStageOverlays", () => {
       );
     });
 
+    it("leaves the paused picture unobstructed while text selection is enabled", () => {
+      renderOverlays({
+        snapshot: makeSnapshot({ buffer: "ok", intent: "paused" }),
+        isTextSelectionEnabled: true,
+      });
+
+      expect(
+        screen.queryByTestId("replay-overlay-paused"),
+      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("replay-select-text")).toHaveAttribute(
+        "aria-pressed",
+        "true",
+      );
+    });
+
+    it("leaves terminal replay pictures unobstructed while text selection is enabled", () => {
+      const { rerender } = renderOverlays({
+        snapshot: makeSnapshot({
+          buffer: "ended",
+          currentTimeMs: DURATION_MS,
+        }),
+        isLive: false,
+        isTextSelectionEnabled: true,
+      });
+
+      expect(
+        screen.queryByTestId("replay-overlay-ended"),
+      ).not.toBeInTheDocument();
+
+      rerender(
+        <ReplayStageOverlays
+          {...makeProps({
+            snapshot: makeSnapshot({ buffer: "ended" }),
+            isLive: true,
+            isTextSelectionEnabled: true,
+          })}
+        >
+          <div data-testid="fake-stage">stage</div>
+        </ReplayStageOverlays>,
+      );
+      expect(
+        screen.queryByTestId("replay-overlay-live-caught-up"),
+      ).not.toBeInTheDocument();
+
+      rerender(
+        <ReplayStageOverlays
+          {...makeProps({
+            snapshot: makeSnapshot({
+              buffer: "halted",
+              error: { message: "Playback stopped", retryable: true },
+            }),
+            isTextSelectionEnabled: true,
+          })}
+        >
+          <div data-testid="fake-stage">stage</div>
+        </ReplayStageOverlays>,
+      );
+      expect(
+        screen.queryByTestId("replay-overlay-error"),
+      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("fake-stage")).toBeInTheDocument();
+    });
+
     it("shows the loading pill before the first frame", () => {
       renderOverlays({ snapshot: makeSnapshot({ buffer: "empty" }) });
 
@@ -825,6 +943,38 @@ describe("ReplayStageOverlays", () => {
         screen.getByTestId("replay-overlay-shell-notice"),
       ).toHaveTextContent("Opened at the moment of the linked log line");
     });
+
+    it("removes every top-strip obstruction while selecting replay text", () => {
+      renderOverlays({
+        snapshot: makeSnapshot({
+          intent: "paused",
+          idleBands: [
+            {
+              startMs: 40000,
+              endMs: 82000,
+              kind: "idle",
+              fidelity: "exact",
+            },
+          ],
+          notice: {
+            kind: "seek-clamped",
+            message: "The seek landed on the first available snapshot",
+            requestedMs: 1000,
+            landedAtMs: 40000,
+          },
+        }),
+        shellNotice: "Opened at the linked event",
+        isTextSelectionEnabled: true,
+      });
+
+      expect(screen.queryByTestId("replay-idle-chip")).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId("replay-overlay-notice"),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId("replay-overlay-shell-notice"),
+      ).not.toBeInTheDocument();
+    });
   });
 
   describe("no-footage mode", () => {
@@ -909,6 +1059,29 @@ describe("ReplayStageOverlays", () => {
       ).toHaveTextContent("Recording ended after inactivity");
     });
 
+    /*
+     * github.com/OneUptime/oneuptime/issues/3642: "none stored" is also
+     * what a session whose every tab closed with nothing playable reads,
+     * before the finalizer has run - so its fallback copy may not claim
+     * the session was finalized.
+     */
+    it("a session that ended with nothing stored is not described as finalized", () => {
+      render(
+        <ReplayStageOverlays
+          {...makeProps({ absence: { kind: "none-stored" } })}
+        />,
+      );
+
+      const absent: HTMLElement = screen.getByTestId("replay-footage-absent");
+
+      expect(absent).toHaveTextContent("No footage was stored");
+      expect(absent).toHaveTextContent(
+        "The session ended without a single chunk of footage.",
+      );
+      expect(absent).not.toHaveTextContent("finalized");
+      expect(absent).not.toHaveTextContent("Waiting for the first chunk");
+    });
+
     it("does not render its own phase word while a stage is mounted", () => {
       renderOverlays();
 

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

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import * as React from "react";
-import { describe, expect, it } from "@jest/globals";
+import { describe, expect, it, jest } from "@jest/globals";
 import IconProp from "../../../Types/Icon/IconProp";
 import {
   REPLAY_CONTROL_HEIGHT_CLASS,
@@ -14,6 +14,29 @@ import {
   getReplaySegmentClassName,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayUi";
 
+jest.mock("Common/UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: (): {
+      translateString: (value: string | undefined) => string | undefined;
+    } => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          if (value === "Localized action") {
+            return "Translated action";
+          }
+
+          if (value === "Localized explanation") {
+            return "Translated explanation";
+          }
+
+          return value;
+        },
+      };
+    },
+  };
+});
+
 /*
  * The player's shared chrome.
  *
@@ -89,6 +112,29 @@ describe("ReplayToolButton accessible name", () => {
 
     expect(button).toHaveTextContent("10s");
   });
+
+  it("translates its visible label and focus-triggered explanation", async () => {
+    render(
+      <ReplayToolButton
+        label="Localized action"
+        tooltip="Localized explanation"
+        onClick={noop}
+      />,
+    );
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "Translated action",
+    });
+
+    fireEvent.focus(button);
+
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "Translated explanation",
+    );
+    await waitFor((): void => {
+      expect(button).toHaveAttribute("aria-describedby");
+    });
+  });
 });
 
 describe("ReplayToolButton toggle semantics", () => {
@@ -172,6 +218,109 @@ describe("ReplayToolButton disabled state", () => {
     expect(screen.getByRole("button").className).toContain("text-gray-300");
     expect(screen.getByRole("button").className).not.toContain("shadow-sm");
   });
+
+  it("keeps a loading action labelled, busy and inside the shared geometry", () => {
+    let clicks: number = 0;
+
+    render(
+      <ReplayToolButton
+        label="Pin recording"
+        icon={IconProp.Flag}
+        variant="segment"
+        isLoading={true}
+        onClick={(): void => {
+          clicks += 1;
+        }}
+      />,
+    );
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "Pin recording",
+    });
+    const spinner: Element | null = button.querySelector(".animate-spin");
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("aria-busy", "true");
+    expect(button.className).toContain(REPLAY_CONTROL_HEIGHT_CLASS);
+    expect(button.className).toContain("rounded-lg");
+    expect(spinner).not.toBeNull();
+
+    fireEvent.click(button);
+    expect(clicks).toBe(0);
+  });
+
+  it("overlays the spinner so an iconless action does not grow while loading", () => {
+    const { rerender } = render(
+      <ReplayToolButton label="Unpin" variant="segment" onClick={noop} />,
+    );
+
+    const button: HTMLElement = screen.getByRole("button", { name: "Unpin" });
+    expect(button.className).toContain("px-2.5");
+    expect(button.querySelector(".animate-spin")).toBeNull();
+
+    rerender(
+      <ReplayToolButton
+        label="Unpin"
+        variant="segment"
+        isLoading={true}
+        onClick={noop}
+      />,
+    );
+
+    const loadingButton: HTMLElement = screen.getByRole("button", {
+      name: "Unpin",
+    });
+    const spinner: Element | null =
+      loadingButton.querySelector(".animate-spin");
+    const originalContent: Element | null = loadingButton.querySelector(
+      ":scope > span:not([aria-hidden])",
+    );
+    const loadingOverlay: Element | null = loadingButton.querySelector(
+      ":scope > span[aria-hidden='true']",
+    );
+
+    expect(loadingButton.className).toContain("px-2.5");
+    expect(originalContent?.className).toContain("invisible");
+    expect(spinner).not.toBeNull();
+    expect(loadingOverlay?.className).toContain("absolute");
+  });
+
+  it("gives a disabled tooltip trigger mouse hit-testing, a name and visible keyboard focus", async () => {
+    render(
+      <ReplayToolButton
+        label="Pin recording"
+        tooltip="Keep this recording"
+        isLoading={true}
+        dataTestId="pin"
+        onClick={noop}
+      />,
+    );
+
+    const trigger: HTMLElement = screen.getByTestId("pin-disabled-wrapper");
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "Pin recording",
+    });
+
+    expect(trigger).toBe(screen.getByRole("group", { name: "Pin recording" }));
+    expect(trigger).toHaveAttribute("tabindex", "0");
+    expect(trigger.className).toContain("focus-visible:ring-2");
+    expect(button).toHaveClass("pointer-events-none");
+
+    fireEvent.mouseEnter(trigger);
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "Keep this recording",
+    );
+
+    fireEvent.mouseLeave(trigger);
+    await waitFor((): void => {
+      expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    });
+
+    fireEvent.focus(trigger);
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "Keep this recording",
+    );
+  });
 });
 
 describe("ReplayToolButton geometry", () => {
@@ -205,6 +354,27 @@ describe("ReplayToolButton geometry", () => {
     expect(screen.getByRole("button").className).toContain("px-2.5");
   });
 
+  it("collapses an icon-and-label action to a named square on small screens", () => {
+    render(
+      <ReplayToolButton
+        label="Details"
+        icon={IconProp.Info}
+        collapseLabelOnSmallScreens={true}
+        onClick={noop}
+      />,
+    );
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "Details",
+    });
+    const label: HTMLElement = screen.getByText("Details");
+
+    expect(button.className).toContain("w-8");
+    expect(button.className).toContain("sm:w-auto");
+    expect(label.className).toContain("sr-only");
+    expect(label.className).toContain("sm:not-sr-only");
+  });
+
   /*
    * The single rule the whole chrome rests on: one height. Twenty
    * controls at four different heights is what made the old row look
@@ -336,6 +506,23 @@ describe("ReplayButtonGroup", () => {
       screen.getByRole("tablist", { name: "Browser tabs" }),
     ).toBeInTheDocument();
   });
+
+  it("can wrap dense actions without forcing the enclosing card wider", () => {
+    render(
+      <ReplayButtonGroup ariaLabel="Recording actions" canWrap={true}>
+        <ReplayToolButton label="Pin recording" onClick={noop} />
+        <ReplayToolButton label="Copy link" onClick={noop} />
+      </ReplayButtonGroup>,
+    );
+
+    const group: HTMLElement = screen.getByRole("group", {
+      name: "Recording actions",
+    });
+
+    expect(group.className).toContain("max-w-full");
+    expect(group.className).toContain("flex-wrap");
+    expect(group.className).not.toContain("shrink-0");
+  });
 });
 
 describe("ReplayToolbarDivider", () => {

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

@@ -210,6 +210,97 @@ describe("ReplayUserSessionsMenu", () => {
     ).not.toBeInTheDocument();
   });
 
+  /*
+   * github.com/OneUptime/oneuptime/issues/3642: an unfinalized sibling
+   * whose every tab has closed is not recording. The red pulsing dot and
+   * its "Recording now" label are for sessions that may still receive
+   * footage; an ended one gets a still gray dot named "Recording ended".
+   */
+  describe("recording state", () => {
+    function renderOne(overrides: Partial<ReplayUserSessionItem>): HTMLElement {
+      render(
+        <ReplayUserSessionsMenu
+          {...makeProps({
+            sessions: [
+              makeItem("sibling", NOW - 5 * 60 * 1000, overrides),
+              makeItem(CURRENT_ID, NOW - 3 * HOUR_MS),
+            ],
+          })}
+        />,
+      );
+
+      return within(openMenu()).getAllByTestId(
+        "replay-user-session-item",
+      )[0] as HTMLElement;
+    }
+
+    it("a live sibling pulses red as 'Recording now' and is not marked ended", () => {
+      const row: HTMLElement = renderOne({
+        isFinalized: false,
+        hasRecordingEnded: false,
+      });
+
+      const live: HTMLElement = within(row).getByTestId(
+        "replay-user-session-live",
+      );
+
+      expect(live).toHaveAttribute("aria-label", "Recording now");
+      expect(live.className).toContain("animate-pulse");
+      expect(live.className).toContain("bg-red-500");
+      expect(
+        within(row).queryByTestId("replay-user-session-ended"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("an ended sibling that is still being finalized is quietly 'Recording ended', never 'Recording now'", () => {
+      const row: HTMLElement = renderOne({
+        isFinalized: false,
+        hasRecordingEnded: true,
+      });
+
+      expect(
+        within(row).queryByTestId("replay-user-session-live"),
+      ).not.toBeInTheDocument();
+      expect(
+        within(row).queryByLabelText("Recording now"),
+      ).not.toBeInTheDocument();
+
+      const ended: HTMLElement = within(row).getByTestId(
+        "replay-user-session-ended",
+      );
+
+      expect(ended).toHaveAttribute("aria-label", "Recording ended");
+      expect(ended).toHaveAttribute("role", "img");
+      expect(ended.className).not.toContain("animate-pulse");
+      expect(ended.className).not.toContain("bg-red-500");
+    });
+
+    it("an older server's row without the flag keeps the live dot", () => {
+      const row: HTMLElement = renderOne({ isFinalized: false });
+
+      expect(
+        within(row).getByTestId("replay-user-session-live"),
+      ).toBeInTheDocument();
+      expect(
+        within(row).queryByTestId("replay-user-session-ended"),
+      ).not.toBeInTheDocument();
+    });
+
+    it("a finalized sibling carries neither dot, whatever the flag says", () => {
+      const row: HTMLElement = renderOne({
+        isFinalized: true,
+        hasRecordingEnded: true,
+      });
+
+      expect(
+        within(row).queryByTestId("replay-user-session-live"),
+      ).not.toBeInTheDocument();
+      expect(
+        within(row).queryByTestId("replay-user-session-ended"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it("names the visitor rather than the user when the link is the browser's id", () => {
     render(<ReplayUserSessionsMenu {...makeProps({ kind: "visitor" })} />);
 

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

@@ -293,7 +293,7 @@ describe("SessionReplayEmptyStateView variants", () => {
       screen.getByTestId("list-empty-action").closest("a"),
     ).toHaveAttribute(
       "href",
-      expect.stringContaining(`/rum/${APP_ID}/documentation`),
+      expect.stringContaining(`/rum/${APP_ID}/session-replay-documentation`),
     );
     expect(screen.queryByTestId("setup-guide")).not.toBeInTheDocument();
     expect(postMock).not.toHaveBeenCalled();