@oneuptime/common 14.0.2 → 14.0.5

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

@@ -67,11 +67,18 @@ describe("Header right-hand rail", () => {
   });
 
   test("an entry can still opt itself out of small screens", () => {
+    /*
+     * Written the way the dashboard's own call site writes it:
+     * `max-lg:hidden`, not `hidden`. A foreign `.hidden { display: none
+     * !important }` rule (Bootstrap 3, HTML5 Boilerplate, a browser
+     * extension) beats `lg:flex`, so the bare-`hidden` form of this opt-out
+     * also takes the entry off every desktop.
+     */
     render(
       <Header
         rightComponents={
           <>
-            <div className="hidden items-center lg:flex">
+            <div className="max-lg:hidden items-center lg:flex">
               <button type="button">Ask AI</button>
             </div>
             <button type="button">Profile</button>
@@ -87,11 +94,44 @@ describe("Header right-hand rail", () => {
 
     expect(isVisibleAtWidth(askAi, PHONE_WIDTH_IN_PX)).toBe(false);
     expect(isVisibleAtWidth(askAi, LAPTOP_WIDTH_IN_PX)).toBe(true);
+    expect(
+      isVisibleAtWidth(askAi, LAPTOP_WIDTH_IN_PX, {
+        withForeignHiddenRule: true,
+      }),
+    ).toBe(true);
 
     // ... without dragging its neighbours off the screen with it.
     expect(isVisibleAtWidth(profile, PHONE_WIDTH_IN_PX)).toBe(true);
   });
 
+  test("the bare-hidden form of that opt-out is lost on a desktop to a foreign .hidden rule", () => {
+    render(
+      <Header
+        rightComponents={
+          <div className="hidden items-center lg:flex">
+            <button type="button">Ask AI</button>
+          </div>
+        }
+      />,
+    );
+
+    const askAi: HTMLElement = screen.getByRole("button", { name: "Ask AI" });
+
+    /*
+     * Identical to the max-lg form on a clean page, which is why the
+     * difference never showed up in review ...
+     */
+    expect(isVisibleAtWidth(askAi, PHONE_WIDTH_IN_PX)).toBe(false);
+    expect(isVisibleAtWidth(askAi, LAPTOP_WIDTH_IN_PX)).toBe(true);
+
+    // ... and gone at every width on the customer's page.
+    expect(
+      isVisibleAtWidth(askAi, LAPTOP_WIDTH_IN_PX, {
+        withForeignHiddenRule: true,
+      }),
+    ).toBe(false);
+  });
+
   test("left and center components still render alongside the rail", () => {
     render(
       <Header

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/LogsEntityNames.test.ts

@@ -233,6 +233,7 @@ describe("LOGS_RESOURCE_FACET_ENTITY_TYPES", () => {
       cloudResourceId: ServiceType.CloudResource,
       rumApplicationId: ServiceType.RealUserMonitor,
       iotFleetId: ServiceType.IoTDevice,
+      databaseServerId: ServiceType.DatabaseServer,
     });
   });
 
@@ -1499,7 +1500,7 @@ describe("catalog resource types the viewer does not preload", () => {
       },
     );
 
-  test("are exactly the eight new catalog types", () => {
+  test("are exactly the catalog types beyond the four preloaded ones", () => {
     expect(
       unpreloaded.map((definition: ResourceFacetDefinition): string => {
         return definition.facetKey;
@@ -1513,6 +1514,7 @@ describe("catalog resource types the viewer does not preload", () => {
       "cloudResourceId",
       "rumApplicationId",
       "iotFleetId",
+      "databaseServerId",
     ]);
   });
 
@@ -1675,6 +1677,19 @@ describe("catalog resource types the viewer does not preload", () => {
     );
   });
 
+  test("a Database id is hinted DatabaseServer, straight to its own table", () => {
+    const id: string = idFor(8);
+    expect(
+      collectLogsEntityIdsToResolve({
+        filters: [chip("databaseServerId", id, "Database")],
+        maps,
+      }).typeHints,
+    ).toEqual({ [id]: ServiceType.DatabaseServer });
+    expect(TELEMETRY_ENTITY_TYPES[ServiceType.DatabaseServer].label).toBe(
+      "Database",
+    );
+  });
+
   test("the preloaded four still skip the resolver when their maps name them", () => {
     const request: LogsEntityResolutionRequest = collectLogsEntityIdsToResolve({
       filters: [

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

@@ -233,15 +233,19 @@ describe("LogsFacetSidebar hides empty resource facets", () => {
 
     render(sidebarElement({ facetData: allEmpty }));
 
+    // One per catalog type (thirteen, Databases included).
+    const count: number = RESOURCE_FACET_CATALOG.length;
+    expect(count).toBe(13);
+
     expect(sectionTitles()).toEqual(["Severity"]);
-    expect(footer()).toHaveTextContent("12 empty filters hidden");
-    expect(screen.getByText("12 empty filters hidden")).toHaveAttribute(
+    expect(footer()).toHaveTextContent(`${count} empty filters hidden`);
+    expect(screen.getByText(`${count} empty filters hidden`)).toHaveAttribute(
       "title",
       CATALOG_LABELS.join(", "),
     );
 
     fireEvent.click(
-      screen.getByRole("button", { name: "Show 12 empty filters" }),
+      screen.getByRole("button", { name: `Show ${count} empty filters` }),
     );
 
     expect(sectionTitles()).toEqual(["Severity", ...CATALOG_LABELS]);

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.",
+      );
+    });
+  });
 });