@oneuptime/common 13.0.4 → 13.0.5

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

@@ -948,6 +948,51 @@ describe("ReplayHeader", () => {
   });
 
   describe("actions", () => {
+    it("groups recording commands and layout toggles without claiming toolbar keyboard behavior", () => {
+      render(
+        <ReplayHeader
+          {...makeProps({
+            pinControl: <button data-testid="fake-pin">Pin recording</button>,
+          })}
+        />,
+      );
+
+      const controls: HTMLElement = screen.getByRole("group", {
+        name: "Session recording controls",
+      });
+      const recordingActions: HTMLElement = within(controls).getByRole(
+        "group",
+        { name: "Recording actions" },
+      );
+      const playerLayout: HTMLElement = within(controls).getByRole("group", {
+        name: "Player layout",
+      });
+
+      expect(controls).toBe(screen.getByTestId("replay-header-toolbar"));
+      expect(controls.className).toContain("flex-wrap");
+      expect(controls).not.toHaveAttribute("role", "toolbar");
+      expect(recordingActions).toBe(
+        screen.getByTestId("replay-recording-actions"),
+      );
+      expect(recordingActions.className).toContain("flex-wrap");
+      expect(
+        Array.from(recordingActions.querySelectorAll("button")).map(
+          (button: HTMLButtonElement): string => {
+            return button.textContent || "";
+          },
+        ),
+      ).toEqual(["Pin recording", "Copy link", "Session details"]);
+      expect(
+        within(playerLayout).getByTestId("replay-toggle-wide"),
+      ).toBeInTheDocument();
+      expect(
+        within(playerLayout).getByTestId("replay-toggle-theater"),
+      ).toBeInTheDocument();
+      expect(
+        within(recordingActions).queryByTestId("replay-toggle-wide"),
+      ).not.toBeInTheDocument();
+    });
+
     it("wide and theater carry aria-pressed and call their toggles", () => {
       const props: ReplayHeaderProps = makeProps({
         isWide: true,
@@ -993,7 +1038,11 @@ describe("ReplayHeader", () => {
         />,
       );
 
-      expect(screen.getByTestId("fake-pin")).toBeInTheDocument();
+      expect(
+        within(
+          screen.getByRole("group", { name: "Recording actions" }),
+        ).getByTestId("fake-pin"),
+      ).toBeInTheDocument();
     });
   });
 

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

@@ -11,6 +11,7 @@ import { beforeEach, describe, expect, it, jest } from "@jest/globals";
 import ObjectID from "../../../Types/ObjectID";
 import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
 import getJestMockFunction, { MockFunction } from "../../MockType";
+import { REPLAY_CONTROL_HEIGHT_CLASS } from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/ReplayUi";
 
 /*
  * Pin / Unpin on the player header.
@@ -85,6 +86,14 @@ function renderControl(): ReturnType<typeof render> {
   );
 }
 
+function expectReplayActionButton(button: HTMLElement): void {
+  expect(button.className).toContain(REPLAY_CONTROL_HEIGHT_CLASS);
+  expect(button.className).toContain("rounded-lg");
+  expect(button.className).toContain("w-8");
+  expect(button.className).toContain("sm:w-auto");
+  expect(button.className).not.toContain("btn-outline-secondary");
+}
+
 beforeEach(() => {
   getListMock.mockReset();
   createMock.mockReset();
@@ -97,9 +106,10 @@ describe("ReplayPinControl initial load", () => {
 
     renderControl();
 
-    expect(await screen.findByTestId("replay-pin-button")).toHaveTextContent(
-      "Pin recording",
-    );
+    const button: HTMLElement = await screen.findByTestId("replay-pin-button");
+
+    expect(button).toHaveTextContent("Pin recording");
+    expectReplayActionButton(button);
     expect(screen.queryByTestId("replay-pin-status")).not.toBeInTheDocument();
   });
 
@@ -122,11 +132,16 @@ describe("ReplayPinControl initial load", () => {
 
     renderControl();
 
-    expect(await screen.findByTestId("replay-pin-error")).toHaveTextContent(
-      "Database is unavailable",
-    );
+    const error: HTMLElement = await screen.findByTestId("replay-pin-error");
+
+    expect(error).toHaveTextContent("Database is unavailable");
+    expect(error.className).toContain("whitespace-normal");
+    expect(error.className).not.toContain("truncate");
 
-    fireEvent.click(screen.getByTestId("replay-pin-retry"));
+    const retry: HTMLElement = screen.getByTestId("replay-pin-retry");
+
+    expectReplayActionButton(retry);
+    fireEvent.click(retry);
 
     expect(await screen.findByTestId("replay-pin-button")).toHaveTextContent(
       "Pin recording",
@@ -139,9 +154,11 @@ describe("ReplayPinControl initial load", () => {
 
     renderControl();
 
-    expect(await screen.findByTestId("replay-pin-status")).toHaveTextContent(
-      PIN_PENDING_COPY,
-    );
+    const status: HTMLElement = await screen.findByTestId("replay-pin-status");
+
+    expect(status).toHaveTextContent(PIN_PENDING_COPY);
+    expect(status.className).toContain("max-w-full");
+    expect(status.querySelector(".truncate")).not.toBeNull();
     expect(PIN_PENDING_COPY).toContain("when the recording ends");
     expect(PIN_PENDING_COPY).toContain("10 minutes");
   });
@@ -162,6 +179,7 @@ describe("ReplayPinControl initial load", () => {
 
     expect(status).toHaveTextContent("Pinned");
     expect(status.getAttribute("title")).toContain("pinned retention until");
+    expectReplayActionButton(screen.getByTestId("replay-unpin-button"));
   });
 });
 
@@ -187,6 +205,45 @@ describe("ReplayPinControl pin", () => {
     expect(created.model.sessionId).toBe(SESSION_ID);
   });
 
+  it("keeps the pin action stable and announces it as busy while creating", async () => {
+    let resolveCreate: (() => void) | undefined;
+
+    getListMock.mockResolvedValue(listResult([]));
+    createMock.mockImplementation((): Promise<void> => {
+      return new Promise<void>((resolve: () => void): void => {
+        resolveCreate = resolve;
+      });
+    });
+
+    renderControl();
+
+    const button: HTMLElement = await screen.findByTestId("replay-pin-button");
+
+    fireEvent.click(button);
+
+    await waitFor((): void => {
+      const workingButton: HTMLElement =
+        screen.getByTestId("replay-pin-button");
+
+      expect(workingButton).toBeDisabled();
+      expect(workingButton).toHaveAttribute("aria-busy", "true");
+      expect(workingButton).toHaveTextContent("Pin recording");
+      expectReplayActionButton(workingButton);
+    });
+
+    await act(async (): Promise<void> => {
+      resolveCreate?.();
+      await Promise.resolve();
+    });
+
+    await waitFor((): void => {
+      const idleButton: HTMLElement = screen.getByTestId("replay-pin-button");
+
+      expect(idleButton).not.toBeDisabled();
+      expect(idleButton).not.toHaveAttribute("aria-busy");
+    });
+  });
+
   it("surfaces a create failure with the server's message and offers a retry", async () => {
     getListMock.mockResolvedValue(listResult([]));
     createMock.mockRejectedValueOnce(

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

@@ -351,36 +351,65 @@ describe("header hierarchy", () => {
     expect(screen.getByTestId("replay-header").textContent).not.toContain("|");
   });
 
-  /*
-   * Row 2 is a shelf under a hairline. Its actions are the only
-   * outlined-looking things on the header, and their accessible names
-   * are the words printed on them (WCAG 2.5.3), not their tooltips.
-   */
+  /* Visible labels remain the accessible names (WCAG 2.5.3), not tooltips. */
   it("names the action buttons by the word printed on them", () => {
     render(<ReplayHeader {...makeHeaderProps()} />);
 
+    const toolbar: HTMLElement = screen.getByRole("group", {
+      name: "Session recording controls",
+    });
+
     ["Copy link", "Wide", "Theater", "Session details"].forEach(
       (label: string): void => {
-        expect(screen.getByRole("button", { name: label })).toHaveTextContent(
-          label,
-        );
+        expect(
+          within(toolbar).getByRole("button", { name: label }),
+        ).toHaveTextContent(label);
       },
     );
   });
 
-  it("puts the layout toggles on one shared track", () => {
+  it("separates recording commands from layout state on two shared tracks", () => {
     render(<ReplayHeader {...makeHeaderProps()} />);
 
-    const group: HTMLElement = screen.getByRole("group", {
+    const recordingActions: HTMLElement = screen.getByRole("group", {
+      name: "Recording actions",
+    });
+    const playerLayout: HTMLElement = screen.getByRole("group", {
       name: "Player layout",
     });
 
-    expect(within(group).getByTestId("replay-toggle-wide")).toBeInTheDocument();
+    expect(recordingActions.className).toContain("bg-gray-100");
+    expect(playerLayout.className).toContain("bg-gray-100");
+    expect(
+      within(recordingActions).getByTestId("replay-copy-link"),
+    ).not.toHaveAttribute("aria-pressed");
+    expect(
+      within(recordingActions).getByTestId("replay-open-details"),
+    ).not.toHaveAttribute("aria-pressed");
+    expect(
+      within(playerLayout).getByTestId("replay-toggle-wide"),
+    ).toBeInTheDocument();
     expect(
-      within(group).getByTestId("replay-toggle-theater"),
+      within(playerLayout).getByTestId("replay-toggle-theater"),
     ).toBeInTheDocument();
   });
 
+  it("uses one control height and radius across every built-in header action", () => {
+    render(<ReplayHeader {...makeHeaderProps()} />);
+
+    ["Copy link", "Session details", "Wide", "Theater"].forEach(
+      (label: string): void => {
+        const button: HTMLElement = screen.getByRole("button", {
+          name: label,
+        });
+
+        expect(button.className).toContain(REPLAY_CONTROL_HEIGHT_CLASS);
+        expect(button.className).toContain("rounded-lg");
+        expect(button.className).not.toContain("btn-outline-secondary");
+      },
+    );
+  });
+
   /*
    * The wall clock is the number a viewer lines up against a dashboard,
    * so it leads its block; the offset pair is a reference underneath it.