@oneuptime/common 13.0.6 → 13.0.8

package/Tests/UI/Rum/ReplayEngine.test.ts

@@ -614,6 +614,44 @@ async function loadAndFlush(
   await flush();
 }
 
+/*
+ * A loader for a second tab of the same session, with its own three
+ * chunks. The tab-switch scenarios all want one and differ only in what
+ * they do with it.
+ */
+function makeSecondTabLoader(tabId: string = "tab-2"): ChunkLoader {
+  return new ChunkLoader({
+    sessionId: "sess-1",
+    tabId: tabId,
+    entries: [
+      { ...makeEntry(0, { hasFullSnapshot: true }), tabId: tabId },
+      { ...makeEntry(1), tabId: tabId },
+      { ...makeEntry(2), tabId: tabId },
+    ],
+    fetcher: (
+      request: SessionReplayChunkFetchRequest,
+    ): Promise<ArrayBuffer> => {
+      return Promise.resolve(
+        encodeFrames(
+          request.chunkIndexes.map(
+            (
+              chunkIndex: number,
+            ): {
+              chunkIndex: number;
+              events: Array<SessionReplayRecordedEvent>;
+            } => {
+              return {
+                chunkIndex: chunkIndex,
+                events: eventsFor(chunkIndex, 2),
+              };
+            },
+          ),
+        ),
+      );
+    },
+  });
+}
+
 function dataOf(events: Array<SessionReplayRecordedEvent>): Array<unknown> {
   return events.map((event: SessionReplayRecordedEvent): unknown => {
     return event.data;
@@ -2398,6 +2436,147 @@ describe("ReplayEngine tabs and live sessions", () => {
     expect(harness.snapshot().currentTimeMs).toBe(20000);
   });
 
+  /*
+   * The engine half of continuous playback across tabs
+   * (github.com/OneUptime/oneuptime/issues/3865).
+   *
+   * onFinish parks the engine with intent "paused", so a switch made to
+   * KEEP WATCHING - the shell's auto-continue, or the "Continue in Tab 2"
+   * chip - used to land the next tab on a still picture that needed a
+   * Play click of its own. `resume` carries the intent into the switch;
+   * omitting it keeps the behaviour a tab pill wants.
+   */
+  it("resumes playback in the target tab when the switch says to", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+
+    /* Play the tab out: a Finish with nothing left to feed is its end. */
+    harness.live().emit("finish");
+    await flush();
+    harness.live().emit("finish");
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("ended");
+    expect(harness.snapshot().intent).toBe("paused");
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-2",
+      loader: makeSecondTabLoader(),
+      resume: true,
+    });
+    await flush();
+
+    expect(harness.snapshot().activeTabId).toBe("tab-2");
+    expect(harness.snapshot().intent).toBe("playing");
+    expect(harness.snapshot().phase).toBe("playing");
+    /*
+     * The landing PLAYED rather than paused - the whole point. Without
+     * the flag the new Replayer was handed a pause() and the viewer saw
+     * the next page of the visit frozen on its first frame.
+     */
+    expect(harness.replayers[1]!.playOffsets.length).toBeGreaterThan(0);
+    expect(harness.replayers[1]!.pauseOffsets).toEqual([]);
+    expect(harness.replayers[1]!.isPlaying).toBe(true);
+  });
+
+  it("a switch that does not ask to resume stays paused", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    harness.live().emit("finish");
+    await flush();
+    harness.live().emit("finish");
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("ended");
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-2",
+      loader: makeSecondTabLoader(),
+    });
+    await flush();
+
+    expect(harness.snapshot().activeTabId).toBe("tab-2");
+    expect(harness.snapshot().intent).toBe("paused");
+    expect(harness.replayers[1]!.playOffsets).toEqual([]);
+    expect(harness.replayers[1]!.isPlaying).toBe(false);
+  });
+
+  /*
+   * A viewer watching tab 1 who clicks tab 3 in the strip is mid-playback,
+   * and `resume` is absent there. The intent in force must carry over
+   * anyway, so the flag only ever ADDS play intent and never removes it.
+   */
+  it("keeps playing across a switch made while playing, with no flag", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    await flush();
+
+    expect(harness.snapshot().intent).toBe("playing");
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-2",
+      loader: makeSecondTabLoader(),
+    });
+    await flush();
+
+    expect(harness.snapshot().intent).toBe("playing");
+    expect(harness.replayers[1]!.isPlaying).toBe(true);
+  });
+
+  /*
+   * A resuming switch into a tab with nothing stored must halt rather
+   * than run a "playing" phase over a stage that will never move. The
+   * shell will not aim at such a tab (the pure decision refuses a tab
+   * without footage), but the engine is the last line.
+   */
+  it("halts rather than plays when the target tab has no footage", async () => {
+    const harness: Harness = makeHarness({
+      entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],
+    });
+
+    await loadAndFlush(harness, 0, 0);
+    harness.engine.dispatch({ type: "PLAY" });
+    harness.live().emit("finish");
+    await flush();
+    harness.live().emit("finish");
+    await flush();
+
+    const empty: ChunkLoader = new ChunkLoader({
+      sessionId: "sess-1",
+      tabId: "tab-empty",
+      entries: [{ ...makeEntry(0, { eventCount: 0 }), tabId: "tab-empty" }],
+      fetcher: (): Promise<ArrayBuffer> => {
+        return Promise.resolve(new ArrayBuffer(0));
+      },
+    });
+
+    harness.engine.dispatch({
+      type: "TAB_SWITCH",
+      tabId: "tab-empty",
+      loader: empty,
+      resume: true,
+    });
+    await flush();
+
+    expect(harness.snapshot().phase).toBe("error");
+    expect(harness.snapshot().error?.retryable).toBe(false);
+  });
+
   it("turns an ended tab back into a stall when new manifest rows arrive", async () => {
     const harness: Harness = makeHarness({
       entries: [makeEntry(0, { hasFullSnapshot: true }), makeEntry(1)],

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

@@ -872,6 +872,29 @@ describe("ReplayHeader", () => {
       expect(props.onSwitchTab).toHaveBeenCalledWith("tab-2");
     });
 
+    /*
+     * The header owns no behaviour here; it passes the chip's handler down
+     * to the switcher. Pinned because the prop being absent is silent -
+     * the chip falls back to the plain switch and the next tab lands
+     * paused, which is exactly the click-per-tab of issue 3865 coming
+     * back rather than an error anyone would see.
+     */
+    it("hands the continue handler down to the tab switcher", () => {
+      const onContinueInTab: MockFunction = getJestMockFunction();
+      const props: ReplayHeaderProps = makeProps({
+        tabs: tabs,
+        continueInTab: tabs[1] as ReplayHeaderTab,
+        onContinueInTab: onContinueInTab,
+      });
+
+      render(<ReplayHeader {...props} />);
+
+      fireEvent.click(screen.getByTestId("replay-continue-in-tab"));
+
+      expect(onContinueInTab).toHaveBeenCalledWith("tab-2");
+      expect(props.onSwitchTab).not.toHaveBeenCalled();
+    });
+
     /*
      * One tab and a continuation is a real state (the tab played out and
      * the session goes on in a tab the strip would not draw): the row

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

@@ -1061,4 +1061,92 @@ describe("ReplayScrubber timeline lanes", () => {
 
     expect(values).toEqual([false, true]);
   });
+
+  /*
+   * Continuous playback across the browser tabs of a session
+   * (github.com/OneUptime/oneuptime/issues/3865). It is on by default, so
+   * the item a viewer first sees is the one that turns it OFF - the
+   * overflow menu labels every item by what pressing it does, not by the
+   * state it reports.
+   */
+  it("offers the auto-continue toggle, labelled by what the press does", () => {
+    const values: Array<boolean> = [];
+    const onAutoContinueChange: (isEnabled: boolean) => void = (
+      isEnabled: boolean,
+    ): void => {
+      values.push(isEnabled);
+    };
+
+    const { rerender } = render(
+      <ReplayScrubber
+        {...makeProps({ onAutoContinueChange: onAutoContinueChange })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+
+    expect(
+      screen.queryByRole("menuitem", { name: "Play continuously across tabs" }),
+    ).toBeNull();
+
+    fireEvent.click(
+      screen.getByRole("menuitem", { name: "Stop at the end of each tab" }),
+    );
+
+    expect(values).toEqual([false]);
+
+    rerender(
+      <ReplayScrubber
+        {...makeProps({
+          isAutoContinueEnabled: false,
+          onAutoContinueChange: onAutoContinueChange,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+    fireEvent.click(
+      screen.getByRole("menuitem", { name: "Play continuously across tabs" }),
+    );
+
+    expect(values).toEqual([false, true]);
+  });
+
+  /*
+   * An undefined preference reads as ON, the same rule the lanes follow,
+   * so a caller that predates the preference still describes the
+   * behaviour the player actually has.
+   */
+  it("treats an absent auto-continue preference as on", () => {
+    render(
+      <ReplayScrubber
+        {...makeProps({
+          onAutoContinueChange: (): void => {
+            // presence is what this asserts
+          },
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+
+    expect(
+      screen.getByRole("menuitem", { name: "Stop at the end of each tab" }),
+    ).toBeInTheDocument();
+  });
+
+  /* The toggle alone is enough to earn the overflow menu. */
+  it("shows the overflow menu for the auto-continue handler alone", () => {
+    render(
+      <ReplayScrubber
+        {...makeProps({
+          onAutoContinueChange: (): void => {
+            // presence is what this asserts
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("replay-more-menu")).toBeInTheDocument();
+  });
 });

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

@@ -867,6 +867,89 @@ describe("ReplayStageOverlays", () => {
       expect(props.onSwitchTab).toHaveBeenCalledWith("tab-2");
     });
 
+    /*
+     * Continuing is "keep watching", which is a different request to the
+     * engine from "take me to that tab": the shell resumes playback with
+     * the switch rather than landing the next page of the visit paused
+     * (github.com/OneUptime/oneuptime/issues/3865). So the chip prefers
+     * its own handler when it is given one.
+     */
+    it("prefers the continue handler over the plain tab switch", () => {
+      const props: ReplayStageOverlaysProps = makeProps({
+        snapshot: makeSnapshot({ buffer: "ended", currentTimeMs: DURATION_MS }),
+        continueInTab: {
+          tabId: "tab-2",
+          label: "Tab 2",
+          durationMs: 30000,
+          openedAtMs: 134000,
+          hasFootage: true,
+          isActive: false,
+        },
+        onSwitchTab: jest.fn(),
+        onContinueInTab: jest.fn(),
+      });
+
+      render(<ReplayStageOverlays {...props} />);
+
+      fireEvent.click(screen.getByTestId("replay-ended-continue-in-tab"));
+
+      expect(props.onContinueInTab).toHaveBeenCalledWith("tab-2");
+      expect(props.onSwitchTab).not.toHaveBeenCalled();
+    });
+
+    /* A caller that only knows about the continue handler still gets the chip. */
+    it("shows the chip when only the continue handler is given", () => {
+      const props: ReplayStageOverlaysProps = makeProps({
+        snapshot: makeSnapshot({ buffer: "ended", currentTimeMs: DURATION_MS }),
+        continueInTab: {
+          tabId: "tab-3",
+          label: "Tab 3",
+          durationMs: 30000,
+          openedAtMs: 200000,
+          hasFootage: true,
+          isActive: false,
+        },
+        onContinueInTab: jest.fn(),
+      });
+
+      render(<ReplayStageOverlays {...props} />);
+
+      const chip: HTMLElement = screen.getByTestId(
+        "replay-ended-continue-in-tab",
+      );
+
+      expect(chip).toHaveTextContent("Continue in Tab 3");
+
+      fireEvent.click(chip);
+      expect(props.onContinueInTab).toHaveBeenCalledWith("tab-3");
+    });
+
+    /* No handler at all: no chip, rather than a dead button. */
+    it("draws no chip without a handler for it", () => {
+      render(
+        <ReplayStageOverlays
+          {...makeProps({
+            snapshot: makeSnapshot({
+              buffer: "ended",
+              currentTimeMs: DURATION_MS,
+            }),
+            continueInTab: {
+              tabId: "tab-2",
+              label: "Tab 2",
+              durationMs: 30000,
+              openedAtMs: 134000,
+              hasFootage: true,
+              isActive: false,
+            },
+          })}
+        />,
+      );
+
+      expect(
+        screen.queryByTestId("replay-ended-continue-in-tab"),
+      ).not.toBeInTheDocument();
+    });
+
     it("offers the user's next session from the ended card", () => {
       const props: ReplayStageOverlaysProps = makeProps({
         snapshot: makeSnapshot({ buffer: "ended", currentTimeMs: DURATION_MS }),

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

@@ -215,6 +215,39 @@ describe("ReplayTabSwitcher summary", () => {
     expect(props.onSwitchTab).toHaveBeenCalledWith("tab-2");
   });
 
+  /*
+   * Continuing means "keep watching", which the shell turns into a tab
+   * switch that RESUMES playback; picking a tab from the strip keeps the
+   * intent in force. They are two different requests, so the chip takes
+   * its own handler when there is one - otherwise clicking Continue left
+   * the next page of the visit paused and needed a Play as well
+   * (github.com/OneUptime/oneuptime/issues/3865).
+   */
+  it("prefers the continue handler over the plain tab switch", () => {
+    const props: ReplayTabSwitcherProps = renderSwitcher({
+      tabs: [makeTab({ isActive: true })],
+      continueInTab: makeTab({ tabId: "tab-2", label: "Tab 2" }),
+      onContinueInTab: jest.fn(),
+    });
+
+    fireEvent.click(screen.getByTestId("replay-continue-in-tab"));
+
+    expect(props.onContinueInTab).toHaveBeenCalledWith("tab-2");
+    expect(props.onSwitchTab).not.toHaveBeenCalled();
+  });
+
+  /* The pills are a deliberate jump and keep going through onSwitchTab. */
+  it("leaves the tab pills on the plain switch", () => {
+    const props: ReplayTabSwitcherProps = renderSwitcher({
+      onContinueInTab: jest.fn(),
+    });
+
+    fireEvent.click(screen.getAllByTestId("replay-tab-pill")[1] as HTMLElement);
+
+    expect(props.onSwitchTab).toHaveBeenCalledTimes(1);
+    expect(props.onContinueInTab).not.toHaveBeenCalled();
+  });
+
   it("counts open, closed and footage-less tabs", () => {
     renderSwitcher();