@oneuptime/common 13.0.5 → 13.0.7

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

@@ -204,6 +204,27 @@ describe("player stacking order", () => {
     expect(scrubber.className).not.toContain("shadow");
     expect(scrubber.className).not.toContain("rounded");
   });
+
+  /*
+   * Every pixel this strip spends is a pixel the recording does not get:
+   * the stage is whatever is left of the card once the chrome has taken
+   * its share. So the scrubber's own padding is tight and the transport
+   * sits ONE step under the track rather than a paragraph below it.
+   */
+  it("keeps its own padding tight so the stage gets the height", () => {
+    render(<ReplayScrubber {...makeScrubberProps()} />);
+
+    const scrubber: HTMLElement = screen.getByTestId("replay-scrubber");
+
+    expect(scrubber.className).toContain("pt-2");
+    expect(scrubber.className).toContain("pb-2");
+    expect(scrubber.className).not.toContain("pt-2.5");
+    expect(scrubber.className).not.toContain("pb-3");
+
+    expect(screen.getByTestId("replay-controls").parentElement?.className).toBe(
+      "mt-2",
+    );
+  });
 });
 
 describe("transport row", () => {
@@ -323,6 +344,121 @@ describe("transport row", () => {
       "bottom-full",
     );
   });
+
+  /*
+   * And so does the overflow menu beside it, for a harder reason than
+   * looks. The transport is the LAST row of the player card, and in
+   * theater the player root is a fullscreen element with
+   * `overflow-hidden`: a menu opening downwards from here is drawn
+   * outside that element, where the browser will not scroll to it and a
+   * viewer cannot click it. "Hide mouse trail", "Follow the playhead" and
+   * "Hide signal lanes" were simply unreachable in fullscreen.
+   */
+  it("opens the overflow menu above its trigger", () => {
+    render(
+      <ReplayScrubber
+        {...makeScrubberProps({
+          onFollowChange: noop,
+          onMouseTrailChange: noop,
+          onTimelineLanesChange: noop,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("replay-more-menu"));
+
+    const menu: HTMLElement = screen.getByRole("menu");
+
+    expect(menu.className).toContain("bottom-full");
+    expect(menu.className).toContain("origin-bottom-right");
+    /* The downward anchoring must be gone, not merely overridden. */
+    expect(menu.className).not.toContain("mt-2");
+    expect(menu.className).not.toContain("origin-top-right");
+
+    /* The items a fullscreen viewer could not reach are in that menu. */
+    expect(
+      screen.getByRole("menuitem", { name: "Hide signal lanes" }),
+    ).toBeInTheDocument();
+  });
+
+  /*
+   * ONE row, not two. The signal jumps used to sit on a second line fenced
+   * off with a border-t, which cost about 50px of a card whose leftover
+   * height IS the recording. The clusters still read in the same order -
+   * they are siblings on one wrapping row now, not rows of their own.
+   */
+  it("lays every cluster out on one wrapping row", () => {
+    render(<ReplayScrubber {...makeScrubberProps()} />);
+
+    const controls: HTMLElement = screen.getByTestId("replay-controls");
+
+    expect(controls.className).toContain("flex-wrap");
+    expect(controls.className).not.toContain("space-y-");
+
+    const navigation: HTMLElement = screen.getByRole("group", {
+      name: "Jump between signals",
+    });
+
+    /* A direct child of the row, not the content of a second line. */
+    expect(navigation.parentElement).toBe(controls);
+
+    Array.from(controls.children).forEach((child: Element): void => {
+      expect(child.className).not.toContain("border-t");
+    });
+  });
+
+  /*
+   * The hairline says "a different kind of control starts here". Once the
+   * row wraps, the clusters are already on separate lines and the rule
+   * would dangle at the end of the first one, so it is hidden there.
+   */
+  it("hides the cluster hairline at the widths where the row wraps", () => {
+    render(<ReplayScrubber {...makeScrubberProps()} />);
+
+    const controls: HTMLElement = screen.getByTestId("replay-controls");
+    const dividers: Array<HTMLElement> = Array.from(
+      controls.querySelectorAll<HTMLElement>(
+        '[data-testid="replay-toolbar-divider"]',
+      ),
+    );
+
+    expect(dividers.length).toBeGreaterThan(1);
+
+    const responsive: Array<HTMLElement> = dividers.filter(
+      (divider: HTMLElement): boolean => {
+        return Boolean(divider.parentElement?.className.includes("hidden"));
+      },
+    );
+
+    expect(responsive).toHaveLength(1);
+    expect(responsive[0]?.parentElement?.className).toContain("md:inline-flex");
+  });
+
+  /*
+   * Status and the two "everything else" affordances belong at the far end
+   * of the row: everything a viewer presses stays on the left, and a
+   * buffering pill appearing mid-playback moves nothing they were aiming at.
+   */
+  it("pushes status, shortcuts and the overflow menu to the end of the row", () => {
+    render(<ReplayScrubber {...makeScrubberProps({ onFollowChange: noop })} />);
+
+    const controls: HTMLElement = screen.getByTestId("replay-controls");
+    const shortcuts: HTMLElement = screen.getByTestId(
+      "replay-shortcuts-button",
+    );
+    const endCluster: HTMLElement | null =
+      shortcuts.closest<HTMLElement>(".ml-auto");
+
+    expect(endCluster).not.toBeNull();
+    expect(controls).toContainElement(endCluster);
+    expect(endCluster).toContainElement(screen.getByTestId("replay-more-menu"));
+    expect(
+      comesBefore(
+        screen.getByRole("group", { name: "Jump between signals" }),
+        shortcuts,
+      ),
+    ).toBe(true);
+  });
 });
 
 describe("header hierarchy", () => {
@@ -443,6 +579,70 @@ describe("header hierarchy", () => {
       "Anonymous",
     );
   });
+
+  /*
+   * The header is the player's own bar, not the shared detail Card. The
+   * card's 24px of padding, its text-lg title and its three-column
+   * definition list were ~240px of viewport spent on chrome above a
+   * picture that then had to be drawn at a third of its recorded size.
+   * Nothing it said was dropped - the labels are sr-only - and the rule
+   * this pins is that the header never grows back into a card.
+   */
+  it("draws the header as a compact bar rather than the shared detail card", () => {
+    render(<ReplayHeader {...makeHeaderProps()} />);
+
+    const header: HTMLElement = screen.getByTestId("replay-header");
+
+    expect(screen.queryByTestId("card")).not.toBeInTheDocument();
+    expect(header.className).toContain("py-2");
+    expect(header.className).not.toContain("py-6");
+    expect(header.querySelector("dl")).toBeNull();
+    expect(
+      within(header).getByRole("heading", { name: "Session recording" })
+        .className,
+    ).toContain("sr-only");
+  });
+
+  /*
+   * The tab strip is a third row, and only when the recording has tabs to
+   * choose between: a one-tab session is the common case and must not pay
+   * a row for a control with one option.
+   */
+  it("gives the browser tabs a row only once there are several", () => {
+    const { rerender } = render(<ReplayHeader {...makeHeaderProps()} />);
+
+    expect(screen.queryByTestId("replay-tab-switcher")).not.toBeInTheDocument();
+
+    rerender(
+      <ReplayHeader
+        {...makeHeaderProps({
+          tabs: [
+            {
+              tabId: "tab-1",
+              label: "Tab 1",
+              durationMs: 252000,
+              openedAtMs: 0,
+              hasFootage: true,
+              isActive: true,
+            },
+            {
+              tabId: "tab-2",
+              label: "Tab 2",
+              durationMs: 30000,
+              openedAtMs: 134000,
+              hasFootage: true,
+              isActive: false,
+            },
+          ],
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("replay-tab-switcher")).toBeInTheDocument();
+    expect(
+      within(screen.getByRole("tablist")).getAllByTestId("replay-tab-pill"),
+    ).toHaveLength(2);
+  });
 });
 
 describe("rail row typography", () => {
@@ -558,4 +758,49 @@ describe("timeline lanes", () => {
     expect(track).toHaveAttribute("aria-valuenow", "12000");
     expect(track).toHaveAttribute("aria-valuetext", "0:12 of 10:00");
   });
+
+  /*
+   * The lanes and their legend are the tallest part of the timeline. A
+   * viewer who is watching rather than investigating can put that height
+   * back into the picture - but the seek track, which is the thing the
+   * lanes hang off, never goes anywhere.
+   */
+  it("drops the lanes and the legend when the shell hides them, keeping the track", () => {
+    render(
+      <ReplayScrubber {...makeScrubberProps({ showTimelineLanes: false })} />,
+    );
+
+    expect(screen.queryByTestId("timeline-legend")).toBeNull();
+    expect(screen.queryByTestId("timeline-lane-errors")).toBeNull();
+    expect(screen.queryByTestId("timeline-lane-network")).toBeNull();
+    expect(screen.queryByTestId("timeline-lane-navigation")).toBeNull();
+    expect(screen.getByTestId("timeline-track")).toBeInTheDocument();
+  });
+
+  /*
+   * The gutter the lane labels sit in and the indent the legend starts at
+   * are ONE measurement: 4rem of gutter plus the 0.5rem gap between gutter
+   * and track is the 4.5rem the legend is pushed in by, so the legend's
+   * first swatch lines up with the track's left edge.
+   */
+  it("keeps the label gutter and the legend indent in step", () => {
+    render(<ReplayScrubber {...makeScrubberProps()} />);
+
+    expect(screen.getByText("Recording").className).toContain("w-16");
+    expect(screen.getByTestId("timeline-legend").className).toContain(
+      "pl-[4.5rem]",
+    );
+  });
+
+  it("draws the track and the lanes at the heights the card budgets for", () => {
+    render(<ReplayScrubber {...makeScrubberProps()} />);
+
+    expect(screen.getByTestId("timeline-track").className).toContain("h-7");
+
+    ["errors", "network", "navigation"].forEach((lane: string): void => {
+      expect(screen.getByTestId(`timeline-lane-${lane}`).className).toContain(
+        "h-4",
+      );
+    });
+  });
 });

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

@@ -1417,6 +1417,300 @@ describe("ReplayRail pure helpers", () => {
   });
 });
 
+/*
+ * Player redesign: the rail's fixed chrome (header, tabs, search, scope) used
+ * to take ~250px above the list. It is compacted so the list gets more rows,
+ * without losing a test id, a role, an accessible name or the subtitle copy.
+ * Class names are pinned here deliberately: they ARE the compaction.
+ */
+describe("ReplayRail compact chrome", () => {
+  function header(): HTMLElement {
+    return screen.getByTestId("replay-rail-header");
+  }
+
+  function searchRow(): HTMLElement {
+    return screen.getByTestId("replay-rail-search-row");
+  }
+
+  it("renders the header as one centred row with slim padding", () => {
+    renderRail();
+
+    const element: HTMLElement = header();
+
+    expect(element).toHaveClass(
+      "flex",
+      "items-center",
+      "justify-between",
+      "gap-2",
+      "border-b",
+      "border-gray-200",
+      "px-3",
+      "py-2",
+    );
+    expect(element).not.toHaveClass("items-start");
+    expect(element).not.toHaveClass("px-4");
+    expect(element).not.toHaveClass("py-4");
+    expect(screen.getByTestId("replay-rail").firstElementChild).toBe(element);
+  });
+
+  it("keeps the Events heading's accessible name while shrinking it to text-sm", () => {
+    renderRail();
+
+    const heading: HTMLElement = screen.getByRole("heading", {
+      name: "Events",
+    });
+
+    expect(heading.tagName).toBe("H3");
+    expect(heading).toHaveTextContent(/^Events$/);
+    expect(heading).toHaveClass("text-sm", "font-semibold");
+    expect(heading).not.toHaveClass("text-base");
+    expect(header()).toContainElement(heading);
+  });
+
+  it("moves the subtitle to the heading's title and a screen-reader-only line", () => {
+    renderRail();
+
+    const heading: HTMLElement = screen.getByRole("heading", {
+      name: "Events",
+    });
+    const subtitle: HTMLElement = screen.getByText(
+      "Explore activity at each moment.",
+    );
+
+    expect(heading).toHaveAttribute(
+      "title",
+      "Explore activity at each moment.",
+    );
+    expect(subtitle).toHaveClass("sr-only");
+    expect(header()).toContainElement(subtitle);
+    /* The sr-only copy is a sibling, so it does not leak into the heading's name. */
+    expect(heading).not.toContainElement(subtitle);
+    expect(
+      screen.getAllByText("Explore activity at each moment."),
+    ).toHaveLength(1);
+  });
+
+  it("keeps the follow state and the collapse button on the header row", () => {
+    const collapse: MockFunction = getJestMockFunction();
+
+    renderRail({ onCollapse: collapse });
+
+    expect(within(header()).getByText("Following")).toBeInTheDocument();
+    expect(header()).toContainElement(
+      screen.getByTestId("replay-rail-collapse"),
+    );
+    expect(screen.getByTestId("replay-rail-collapse")).toHaveAttribute(
+      "aria-label",
+      "Collapse the events rail",
+    );
+
+    fireEvent.click(screen.getByTestId("replay-rail-collapse"));
+
+    expect(collapse).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps Resume following and Jump to now on the header row once following stops", () => {
+    renderRail({ follow: false, currentTimeMs: 3000 });
+
+    const list: HTMLElement = screen.getByTestId("rail-list");
+
+    Object.defineProperty(list, "clientHeight", {
+      configurable: true,
+      value: 100,
+    });
+    Object.defineProperty(list, "scrollTop", {
+      configurable: true,
+      value: 900,
+      writable: true,
+    });
+    Object.defineProperty(screen.getByTestId("rail-now-divider"), "offsetTop", {
+      configurable: true,
+      value: 50,
+    });
+
+    fireEvent.scroll(list);
+
+    expect(header()).toContainElement(screen.getByTestId("rail-resume-follow"));
+    expect(header()).toContainElement(screen.getByTestId("rail-jump-to-now"));
+    expect(within(header()).queryByText("Following")).not.toBeInTheDocument();
+  });
+
+  it("truncates the clock alignment note beside the heading with the full copy in its title", async () => {
+    const { store } = makeStore({
+      logs: [makeLog("bbbbbbbbbbbbbbbbbbbbbbbb", 5000, "charge failed")],
+    });
+
+    renderRail({ backendStore: store, activeTab: "logs" });
+
+    await waitFor((): void => {
+      expect(screen.getByTestId("rail-alignment-note")).toBeInTheDocument();
+    });
+
+    const note: HTMLElement = screen.getByTestId("rail-alignment-note");
+
+    expect(header()).toContainElement(note);
+    expect(note).toHaveClass("min-w-0", "truncate");
+    expect(note).not.toHaveClass("block");
+    expect(note).toHaveTextContent(/unanchored/);
+    expect(note.getAttribute("title")).toBe(note.textContent);
+  });
+
+  it("renders no alignment note before any telemetry arrives", () => {
+    renderRail();
+
+    expect(screen.queryByTestId("rail-alignment-note")).not.toBeInTheDocument();
+  });
+
+  it("tightens the tab strip's margins while it keeps wrapping", () => {
+    renderRail();
+
+    const tablist: HTMLElement = screen.getByRole("tablist", {
+      name: "Signal tabs",
+    });
+
+    expect(tablist).toBe(screen.getByTestId("rail-tablist"));
+    expect(tablist).toHaveClass("mx-3", "mt-2", "pb-2", "flex", "flex-wrap");
+    expect(tablist).not.toHaveClass("mx-4");
+    expect(tablist).not.toHaveClass("mt-3");
+    expect(tablist).not.toHaveClass("pb-3");
+    expect(tablist).not.toHaveClass("overflow-x-auto");
+    expect(within(tablist).getAllByRole("tab").length).toBeGreaterThan(1);
+  });
+
+  it("puts search and scope in one wrapping row", () => {
+    renderRail();
+
+    const row: HTMLElement = searchRow();
+
+    expect(row).toHaveClass(
+      "flex",
+      "flex-wrap",
+      "items-center",
+      "gap-2",
+      "px-3",
+      "py-2",
+    );
+    expect(row).not.toHaveClass("px-4");
+    expect(row).not.toHaveClass("pt-3");
+    expect(row).not.toHaveClass("pb-3");
+    expect(row).toContainElement(screen.getByTestId("rail-search-input"));
+    expect(row).toContainElement(screen.getByTestId("rail-scope-toggle"));
+    expect(
+      within(row).getByRole("group", { name: "Scope" }),
+    ).toBeInTheDocument();
+    /* The tabs sit above the row, not inside it. */
+    expect(row).not.toContainElement(screen.getByTestId("rail-tablist"));
+  });
+
+  it("lets the search input grow beside the scope toggle with a 10rem floor", () => {
+    renderRail();
+
+    const input: HTMLElement = screen.getByTestId("rail-search-input");
+    const wrapper: HTMLElement = input.parentElement as HTMLElement;
+
+    expect(wrapper.parentElement).toBe(searchRow());
+    expect(wrapper).toHaveClass("relative", "min-w-[10rem]", "flex-1");
+    expect(wrapper).not.toHaveClass("w-full");
+    expect(input).toHaveClass("h-8", "w-full");
+    expect(input).not.toHaveClass("h-9");
+    expect(input).toHaveAttribute("placeholder", "Search events");
+    expect(input).toHaveAttribute("aria-label", "Filter signals");
+  });
+
+  it("keeps the clear button inside the compact input wrapper", () => {
+    renderRail({ query: "checkout" });
+
+    const clear: HTMLElement = screen.getByRole("button", {
+      name: "Clear event search",
+    });
+
+    expect(clear).toBe(screen.getByTestId("rail-search-clear"));
+    expect(clear.parentElement).toBe(
+      screen.getByTestId("rail-search-input").parentElement,
+    );
+    expect(clear.parentElement).toHaveClass("min-w-[10rem]", "flex-1");
+  });
+
+  it("keeps the Show events label for screen readers only", () => {
+    renderRail();
+
+    const label: HTMLElement = screen.getByText("Show events");
+
+    expect(label).toHaveClass("sr-only");
+    expect(label).not.toHaveClass("text-xs");
+    expect(searchRow()).toContainElement(label);
+  });
+
+  it("keeps both scope buttons with their names and pressed state", () => {
+    renderRail();
+
+    const whole: HTMLElement = screen.getByRole("button", {
+      name: "Scope: whole session",
+    });
+    const around: HTMLElement = screen.getByRole("button", {
+      name: "Scope: within 30 seconds of the playhead",
+    });
+
+    expect(whole).toHaveAttribute("aria-pressed", "true");
+    expect(around).toHaveAttribute("aria-pressed", "false");
+
+    fireEvent.click(around);
+
+    expect(whole).toHaveAttribute("aria-pressed", "false");
+    expect(around).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("aligns the quick filters and coverage note with the slimmer gutter", () => {
+    renderRail({
+      activeTab: "network",
+      loadedChunkCount: 1,
+      totalChunkCount: 3,
+    });
+
+    const chips: HTMLElement = screen.getByRole("group", {
+      name: "Quick filters",
+    });
+
+    expect(chips).toHaveClass("flex", "flex-wrap", "px-3", "pb-2");
+    expect(chips).not.toHaveClass("px-4");
+    expect(chips).not.toHaveClass("pb-3");
+    expect(screen.getByTestId("rail-coverage-note")).toHaveClass(
+      "px-3",
+      "pt-2",
+    );
+    expect(screen.getByTestId("rail-coverage-note")).not.toHaveClass("px-4");
+  });
+
+  it("orders the chrome header, tabs, search row, then the list", () => {
+    renderRail();
+
+    const children: Array<Element> = Array.from(
+      screen.getByTestId("replay-rail").children,
+    );
+    const indexOf: (element: HTMLElement) => number = (
+      element: HTMLElement,
+    ): number => {
+      return children.indexOf(element);
+    };
+
+    const headerIndex: number = indexOf(header());
+    const tabsIndex: number = indexOf(screen.getByTestId("rail-tablist"));
+    const searchIndex: number = indexOf(searchRow());
+    const listIndex: number = indexOf(screen.getByTestId("rail-list"));
+
+    expect(headerIndex).toBe(0);
+    expect(tabsIndex).toBeGreaterThan(headerIndex);
+    expect(searchIndex).toBeGreaterThan(tabsIndex);
+    expect(listIndex).toBeGreaterThan(searchIndex);
+    /* The list still takes every leftover pixel. */
+    expect(screen.getByTestId("rail-list")).toHaveClass(
+      "min-h-0",
+      "flex-1",
+      "overflow-y-auto",
+    );
+  });
+});
+
 describe("ReplayRail hover", () => {
   it("reports the hovered row's offset for the ghost playhead and clears it on leave", () => {
     const hovers: Array<number | null> = [];