@oneuptime/common 14.0.2 → 14.0.3

package/Tests/UI/Components/InfoTooltip.test.tsx

@@ -0,0 +1,242 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import InfoTooltip from "../../../UI/Components/Tooltip/InfoTooltip";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The (i) that sits beside a metric's title and says what the metric means.
+ *
+ * Asserting tippy under jsdom (see DisabledButtonTooltip.test.tsx): the
+ * popup is portalled to document.body, so it is queried through `screen`;
+ * its box never finishes animating, so presence is asserted rather than
+ * data-state.
+ */
+
+async function hover(trigger: HTMLElement): Promise<void> {
+  fireEvent.mouseEnter(trigger);
+  await act(async () => {
+    jest.advanceTimersByTime(200);
+  });
+}
+
+async function focus(trigger: HTMLElement): Promise<void> {
+  act(() => {
+    trigger.focus();
+  });
+  await act(async () => {
+    jest.advanceTimersByTime(200);
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+const P95: string =
+  "95% of page loads finished faster than this; the slowest 5% took longer.";
+
+describe("InfoTooltip", () => {
+  test("renders a button named after what it explains", () => {
+    render(<InfoTooltip label="p95 duration" text={P95} />);
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "About p95 duration",
+    });
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("type", "button");
+  });
+
+  test("does not create the tooltip until someone reaches for it", () => {
+    render(<InfoTooltip label="p95 duration" text={P95} />);
+
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    expect(screen.queryByText(P95)).not.toBeInTheDocument();
+  });
+
+  test("shows the explanation on hover", async () => {
+    render(<InfoTooltip label="p95 duration" text={P95} />);
+
+    await hover(screen.getByRole("button", { name: "About p95 duration" }));
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(P95);
+  });
+
+  test("shows the explanation on keyboard focus", async () => {
+    render(
+      <InfoTooltip label="Error rate" text="Share of events that failed." />,
+    );
+
+    await focus(screen.getByRole("button", { name: "About Error rate" }));
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(
+      "Share of events that failed.",
+    );
+  });
+
+  test("links the explanation to the button for assistive technology once shown", async () => {
+    render(<InfoTooltip label="p95 duration" text={P95} />);
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "About p95 duration",
+    });
+
+    await focus(button);
+    await act(async () => {
+      jest.advanceTimersByTime(50);
+    });
+
+    const describedBy: string | null = button.getAttribute("aria-describedby");
+
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(describedBy as string)).toHaveTextContent(
+      P95,
+    );
+  });
+
+  test("does not mark the trigger as expandable (it is not a disclosure)", async () => {
+    render(<InfoTooltip label="p95 duration" text={P95} />);
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "About p95 duration",
+    });
+
+    await hover(button);
+
+    expect(button).not.toHaveAttribute("aria-expanded");
+  });
+
+  test.each([
+    ["undefined", undefined],
+    ["empty", ""],
+    ["whitespace", "   \n "],
+  ])(
+    "renders nothing when the explanation is %s",
+    (_: string, text?: string) => {
+      const { container } = render(
+        <InfoTooltip label="p95 duration" text={text} />,
+      );
+
+      expect(container).toBeEmptyDOMElement();
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    },
+  );
+
+  test("trims the explanation it shows", async () => {
+    render(<InfoTooltip label="Clients" text={"  Platforms seen.  "} />);
+
+    await hover(screen.getByRole("button", { name: "About Clients" }));
+
+    expect(screen.getByRole("tooltip").textContent).toBe("Platforms seen.");
+  });
+
+  test("a click does not bubble, so an (i) inside a link does not navigate", () => {
+    const onParentClick: MockFunction = getJestMockFunction();
+
+    render(
+      <div onClick={onParentClick}>
+        <InfoTooltip label="Clients" text="Platforms seen." />
+      </div>,
+    );
+
+    const notCancelled: boolean = fireEvent.click(
+      screen.getByRole("button", { name: "About Clients" }),
+    );
+
+    expect(onParentClick).not.toHaveBeenCalled();
+    /* fireEvent returns false when preventDefault() was called. */
+    expect(notCancelled).toBe(false);
+  });
+
+  test("a click inside an anchor does not follow the link", () => {
+    render(
+      <a href="#/somewhere-else" data-testid="card-link">
+        <span>Clients</span>
+        <InfoTooltip label="Clients" text="Platforms seen." />
+      </a>,
+    );
+
+    const notCancelled: boolean = fireEvent.click(
+      screen.getByRole("button", { name: "About Clients" }),
+    );
+
+    expect(notCancelled).toBe(false);
+  });
+
+  test("the icon is decorative - the button's name comes from the label alone", () => {
+    render(<InfoTooltip label="CPU" text="Processor time in use." />);
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "About CPU",
+    });
+    const svg: SVGElement | null = button.querySelector("svg");
+
+    expect(svg).not.toBeNull();
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+    expect(button.querySelector("[role='img']")).toBeNull();
+  });
+
+  test("passes the test id, extra classes and icon size through", () => {
+    render(
+      <InfoTooltip
+        label="CPU"
+        text="Processor time in use."
+        dataTestId="cpu-help"
+        className="ml-1"
+        iconClassName="h-4 w-4"
+      />,
+    );
+
+    const button: HTMLElement = screen.getByTestId("cpu-help");
+
+    expect(button).toHaveClass("ml-1");
+    expect(button.querySelector("svg")).toHaveClass("h-4", "w-4");
+  });
+
+  test("uses a small icon by default and shows a visible focus ring", () => {
+    render(<InfoTooltip label="CPU" text="Processor time in use." />);
+
+    const button: HTMLElement = screen.getByRole("button", {
+      name: "About CPU",
+    });
+
+    expect(button.querySelector("svg")).toHaveClass("h-3.5", "w-3.5");
+    expect(button.className).toContain("focus-visible:ring-2");
+  });
+
+  test("two tooltips on one page each show their own text", async () => {
+    render(
+      <div>
+        <InfoTooltip label="p95 duration" text={P95} />
+        <InfoTooltip label="Error rate" text="Share of events that failed." />
+      </div>,
+    );
+
+    await hover(screen.getByRole("button", { name: "About Error rate" }));
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent(
+      "Share of events that failed.",
+    );
+    expect(screen.queryByText(P95)).not.toBeInTheDocument();
+  });
+});

package/Tests/UI/Components/ModelTable/BaseModelTableBulkDelete.test.tsx

@@ -101,6 +101,7 @@ jest.mock("../../../../UI/Utils/Translation", () => {
 import BaseModelTable, {
   BaseTableCallbacks,
   ComponentProps as BaseModelTableProps,
+  ModalTableBulkDefaultActions,
 } from "../../../../UI/Components/ModelTable/BaseModelTable";
 import TableFilterUrlState from "../../../../UI/Utils/TableFilterUrlState";
 import PermissionGate from "../../../../UI/Utils/PermissionGate";
@@ -108,6 +109,7 @@ import FieldType from "../../../../UI/Components/Types/FieldType";
 import { ButtonStyleType } from "../../../../UI/Components/Button/Button";
 import NetworkDevice from "../../../../Models/DatabaseModels/NetworkDevice";
 import Permission from "../../../../Types/Permission";
+import IconProp from "../../../../Types/Icon/IconProp";
 import ListResult from "../../../../Types/BaseDatabase/ListResult";
 import { JSONObject } from "../../../../Types/JSON";
 
@@ -136,6 +138,8 @@ const DEVICE_DELETE_WARNING: string =
 type TableOptions = {
   bulkActionButtons?: Array<unknown> | undefined;
   deleteConfirmationWarning?: string | undefined;
+  deleteVerb?: string | undefined;
+  deleteIcon?: IconProp | undefined;
   deleteItem?: ((item: NetworkDevice) => Promise<void>) | undefined;
 };
 
@@ -218,6 +222,8 @@ describe("BaseModelTable bulk Delete", () => {
         ...(options.deleteConfirmationWarning
           ? { deleteConfirmationWarning: options.deleteConfirmationWarning }
           : {}),
+        ...(options.deleteVerb ? { deleteVerb: options.deleteVerb } : {}),
+        ...(options.deleteIcon ? { deleteIcon: options.deleteIcon } : {}),
       },
     } as unknown as BaseModelTableProps<NetworkDevice>;
   };
@@ -307,10 +313,12 @@ describe("BaseModelTable bulk Delete", () => {
     });
   };
 
-  type ConfirmFunction = () => Promise<void>;
+  type ConfirmFunction = (buttonText?: string | undefined) => Promise<void>;
 
   /* Presses the danger button in the confirmation dialog's footer. */
-  const confirmDelete: ConfirmFunction = async (): Promise<void> => {
+  const confirmDelete: ConfirmFunction = async (
+    buttonText?: string | undefined,
+  ): Promise<void> => {
     await waitFor(() => {
       expect(
         document.querySelector('[data-testid="modal-footer"]'),
@@ -324,7 +332,7 @@ describe("BaseModelTable bulk Delete", () => {
     const submitButton: HTMLButtonElement | undefined = Array.from(
       footer.querySelectorAll<HTMLButtonElement>("button"),
     ).find((button: HTMLButtonElement) => {
-      return (button.textContent || "").trim() === "Delete";
+      return (button.textContent || "").trim() === (buttonText || "Delete");
     });
 
     expect(submitButton).toBeDefined();
@@ -748,4 +756,200 @@ describe("BaseModelTable bulk Delete", () => {
       expect(deletedIds).toEqual([]);
     });
   });
+
+  /*
+   * A table of links (an incident's linked alerts, say) deletes rows that are
+   * relationships, not things. "Delete 3 Alerts ... This action cannot be
+   * undone" read as if the alerts themselves were going, and contradicted the
+   * warning appended after it. Such a table names its own verb; every other
+   * table keeps the default wording (pinned above).
+   */
+  describe("a table that names its own verb", () => {
+    const LINK_WARNING: string =
+      "Only the links are removed: the devices themselves are not deleted.";
+
+    test("offers the verb in place of Delete, once", async () => {
+      const { container } = renderTable({
+        bulkActionButtons: [
+          ARCHIVE_ACTION,
+          ModalTableBulkDefaultActions.Delete,
+        ],
+        deleteVerb: "Unlink",
+        deleteIcon: IconProp.LinkSlash,
+      });
+
+      await selectRows(container, 1);
+      await openBulkMenu();
+
+      expect(menuItemLabels()).toEqual(
+        expect.arrayContaining(["Archive", "Export CSV", "Unlink"]),
+      );
+      expect(menuItemLabels()).not.toContain("Delete");
+      expect(
+        menuItemLabels().filter((label: string) => {
+          return label === "Unlink";
+        }).length,
+      ).toBe(1);
+      expect(findMenuItem("Unlink")).not.toBeDisabled();
+    });
+
+    /*
+     * The verb must still be recognised as the table's delete action when it
+     * is added automatically, or a second, default Delete would sit next to
+     * it.
+     */
+    test("uses the verb for the automatically added action too", async () => {
+      const { container } = renderTable({
+        deleteVerb: "Unlink",
+      });
+
+      await selectRows(container, 1);
+      await openBulkMenu();
+
+      expect(findMenuItem("Unlink")).toBeDefined();
+      expect(findMenuItem("Delete")).toBeUndefined();
+    });
+
+    test("does not add the default action beside a page's own button with that verb", async () => {
+      const { container } = renderTable({
+        bulkActionButtons: [
+          ARCHIVE_ACTION,
+          {
+            title: "Unlink",
+            buttonStyleType: ButtonStyleType.DANGER,
+            onClick: async (): Promise<void> => {
+              return Promise.resolve();
+            },
+          },
+        ],
+        deleteVerb: "Unlink",
+      });
+
+      await selectRows(container, 1);
+      await openBulkMenu();
+
+      expect(
+        menuItemLabels().filter((label: string) => {
+          return label === "Unlink" || label === "Delete";
+        }),
+      ).toEqual(["Unlink"]);
+    });
+
+    test("asks with the verb, and does not claim it cannot be undone", async () => {
+      const { container } = renderTable({
+        bulkActionButtons: [
+          ARCHIVE_ACTION,
+          ModalTableBulkDefaultActions.Delete,
+        ],
+        deleteVerb: "Unlink",
+        deleteConfirmationWarning: LINK_WARNING,
+      });
+
+      await selectRows(container, 2);
+      await openBulkMenu();
+
+      fireEvent.click(findMenuItem("Unlink")!);
+
+      await waitFor(() => {
+        expect(confirmationText()).not.toBe("");
+      });
+
+      expect(confirmationText().trim()).toBe(
+        `Are you sure you want to unlink 2 network devices? ${LINK_WARNING}`,
+      );
+      expect(confirmationText()).not.toContain("cannot be undone");
+      expect(screen.getByText("Unlink 2 Network Devices")).toBeInTheDocument();
+      expect(screen.queryByText("Delete 2 Network Devices")).toBeNull();
+    });
+
+    test("uses the singular for one row", async () => {
+      const { container } = renderTable({
+        deleteVerb: "Unlink",
+      });
+
+      await selectRows(container, 1);
+      await openBulkMenu();
+
+      fireEvent.click(findMenuItem("Unlink")!);
+
+      await waitFor(() => {
+        expect(confirmationText()).not.toBe("");
+      });
+
+      expect(confirmationText().trim()).toBe(
+        "Are you sure you want to unlink 1 network device?",
+      );
+      expect(screen.getByText("Unlink 1 Network Device")).toBeInTheDocument();
+    });
+
+    test("still deletes exactly the selected rows once confirmed", async () => {
+      const { container } = renderTable({
+        deleteVerb: "Unlink",
+      });
+
+      await selectRows(container, 2);
+      await openBulkMenu();
+
+      fireEvent.click(findMenuItem("Unlink")!);
+
+      expect(deletedIds).toEqual([]);
+
+      await confirmDelete("Unlink");
+
+      await waitFor(() => {
+        expect(deletedIds.length).toBe(2);
+      });
+
+      expect(deletedIds.sort()).toEqual(["device-1", "device-2"]);
+    });
+
+    test("is still gated on the model's delete permission", async () => {
+      permissionsForTest = [Permission.Viewer];
+
+      const { container } = renderTable({
+        deleteVerb: "Unlink",
+      });
+
+      await selectRows(container, 1);
+      await openBulkMenu();
+
+      const unlinkItem: HTMLElement | undefined = findMenuItem("Unlink");
+
+      expect(unlinkItem).toBeDefined();
+      expect(unlinkItem).toBeDisabled();
+
+      fireEvent.mouseEnter(unlinkItem!.parentElement as HTMLElement);
+
+      /*
+       * The reason follows the verb, but the permission it names is still the
+       * delete one the action is gated on.
+       */
+      const tooltip: HTMLElement = screen.getByRole("tooltip");
+
+      expect(tooltip).toHaveTextContent(
+        "You do not have permission to unlink this Network Device.",
+      );
+      expect(tooltip).toHaveTextContent("Delete Network Device");
+      expect(tooltip).not.toHaveTextContent("delete this Network Device");
+    });
+
+    test("a blank verb keeps the default wording", async () => {
+      const { container } = renderTable({
+        deleteVerb: "   ",
+      });
+
+      await selectRows(container, 2);
+      await openBulkMenu();
+
+      fireEvent.click(findMenuItem("Delete")!);
+
+      await waitFor(() => {
+        expect(confirmationText()).not.toBe("");
+      });
+
+      expect(confirmationText().trim()).toBe(
+        "Are you sure you want to delete 2 Network Devices? This action cannot be undone.",
+      );
+    });
+  });
 });