@oneuptime/common 14.0.7 → 14.0.9

package/Tests/App/Dashboard/OnCallPreventionGuards.test.tsx

@@ -1393,13 +1393,25 @@ describe("Escalation rules, wired: the delete confirmation says what it costs",
     await waitFor(() => {
       /*
        * The name appears twice on purpose - once in the escalation summary and
-       * once on the rule card - so the wait is on the delete control, which
-       * exists exactly once per level and is the thing the next line clicks.
+       * once on the rule card - so the wait is on the card, which exists
+       * exactly once per level and holds the ⋯ menu the next lines open.
        */
-      expect(screen.getAllByLabelText("Delete rule").length).toBeGreaterThan(0);
+      expect(
+        screen.getAllByTestId("escalation-rule-card").length,
+      ).toBeGreaterThan(0);
     });
 
-    fireEvent.click(screen.getAllByLabelText("Delete rule")[0]!);
+    // Delete lives in the level's ⋯ menu now, not on the card.
+    fireEvent.click(
+      within(screen.getAllByTestId("escalation-rule-card")[0]!).getByTestId(
+        "row-actions-more-button",
+      ),
+    );
+    fireEvent.click(
+      within(screen.getByRole("menu")).getByRole("menuitem", {
+        name: "Delete rule",
+      }),
+    );
 
     await waitFor(() => {
       expect(
@@ -1456,13 +1468,25 @@ describe("Escalation rules, wired: the delete confirmation says what it costs",
     await waitFor(() => {
       /*
        * The name appears twice on purpose - once in the escalation summary and
-       * once on the rule card - so the wait is on the delete control, which
-       * exists exactly once per level and is the thing the next line clicks.
+       * once on the rule card - so the wait is on the card, which exists
+       * exactly once per level and holds the ⋯ menu the next lines open.
        */
-      expect(screen.getAllByLabelText("Delete rule").length).toBeGreaterThan(0);
+      expect(
+        screen.getAllByTestId("escalation-rule-card").length,
+      ).toBeGreaterThan(0);
     });
 
-    fireEvent.click(screen.getAllByLabelText("Delete rule")[0]!);
+    // Delete lives in the level's ⋯ menu now, not on the card.
+    fireEvent.click(
+      within(screen.getAllByTestId("escalation-rule-card")[0]!).getByTestId(
+        "row-actions-more-button",
+      ),
+    );
+    fireEvent.click(
+      within(screen.getByRole("menu")).getByRole("menuitem", {
+        name: "Delete rule",
+      }),
+    );
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -1483,14 +1507,15 @@ describe("Escalation rules, wired: the delete confirmation says what it costs",
  * "are you sure" and none of the arithmetic above ever ran. Every test passed.
  *
  * So these tests refuse to hand the modal its props. They render the real
- * component, wait for the real row, click the real Delete control, and assert on
+ * component, wait for the real row, click the real Delete control - the row's
+ * button, or an item in its ⋯ menu, wherever the row put it - and assert on
  * what a person would then be looking at. The only thing that can make them pass
  * is a delete that actually goes through the guard.
  *
  * The second assertion in each case is the one that catches the half-measure:
- * exactly ONE Delete control per row. `isDeleteable={true}` left alongside a
- * custom Delete action gives two, and whichever one the user reaches for first
- * decides whether they are told anything.
+ * exactly ONE Delete control per row, the ⋯ menu included. `isDeleteable={true}`
+ * left alongside a custom Delete action gives two, and whichever one the user
+ * reaches for first decides whether they are told anything.
  */
 
 interface MethodSurface {
@@ -1507,6 +1532,12 @@ interface MethodSurface {
   modalTitle: string;
   /* How the method is expected to be named in the sentence. */
   methodLabel: string;
+  /*
+   * What the row draws: its buttons in order (the ⋯ trigger reads "More
+   * actions"), and the items behind the ⋯ - none when there is no menu.
+   */
+  rowButtons: Array<string>;
+  menuItems: Array<string>;
 }
 
 type BuildRowFunction = (
@@ -1555,6 +1586,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Email",
     methodLabel: "Email: jane@example.com",
+    rowButtons: ["Delete"],
+    menuItems: [],
   },
   {
     name: "SMS",
@@ -1570,6 +1603,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Phone Number",
     methodLabel: "SMS: +15551230100",
+    rowButtons: ["Delete"],
+    menuItems: [],
   },
   {
     name: "Call",
@@ -1585,6 +1620,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Phone Number",
     methodLabel: "Call: +15551230199",
+    rowButtons: ["Delete"],
+    menuItems: [],
   },
   {
     name: "Push",
@@ -1599,6 +1636,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Device",
     methodLabel: "Push: Chrome on macOS",
+    rowButtons: ["Test Notification", "More actions"],
+    menuItems: ["Delete"],
   },
   {
     name: "WhatsApp",
@@ -1614,6 +1653,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete WhatsApp Number",
     methodLabel: "WhatsApp: +15551230123",
+    rowButtons: ["Delete"],
+    menuItems: [],
   },
   {
     name: "Telegram",
@@ -1629,6 +1670,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Telegram Account",
     methodLabel: "Telegram: @alexchen",
+    rowButtons: ["Delete"],
+    menuItems: [],
   },
   {
     name: "Slack",
@@ -1644,6 +1687,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Slack Account",
     methodLabel: "Slack: alexchen",
+    rowButtons: ["Send Test Message", "More actions"],
+    menuItems: ["Delete"],
   },
   {
     name: "Microsoft Teams",
@@ -1659,6 +1704,8 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Microsoft Teams Account",
     methodLabel: "Microsoft Teams: Alex Example",
+    rowButtons: ["Send Test Message", "More actions"],
+    menuItems: ["Delete"],
   },
   {
     name: "Webhook",
@@ -1673,6 +1720,13 @@ const METHOD_SURFACES: Array<MethodSurface> = [
     },
     modalTitle: "Delete Webhook",
     methodLabel: "Webhook: Internal alerts",
+    rowButtons: ["Send Test", "More actions"],
+    /*
+     * Webhooks are editable, and ModelTable adds its Edit after the page's own
+     * actions - yet Delete still comes last, because destructive actions sink
+     * to the bottom of the menu.
+     */
+    menuItems: ["Edit", "Delete"],
   },
 ];
 
@@ -1741,21 +1795,69 @@ const mockMethodTable: MockMethodTableFunction = (
   );
 };
 
+/*
+ * Every Delete control the row offers, wherever the row put it. A row carries
+ * one action as a button and folds the rest into a ⋯ menu, so a method with
+ * nothing else to do (a verified email, a phone number) keeps Delete as its
+ * button, while one that can also send a test (a device, Slack, Teams, a
+ * webhook) gives the button to the test and puts Delete in the menu. These
+ * tests are about what Delete opens, not where it hangs - so the menu is opened
+ * whenever the row has one, which also puts its items on the page for the
+ * count that follows.
+ */
+type FindRowDeleteControlsFunction = (
+  rowActions: HTMLElement,
+) => Array<HTMLElement>;
+
+const findRowDeleteControls: FindRowDeleteControlsFunction = (
+  rowActions: HTMLElement,
+): Array<HTMLElement> => {
+  const moreButton: HTMLElement | null = within(rowActions).queryByTestId(
+    "row-actions-more-button",
+  );
+
+  const rowButtons: Array<HTMLElement> = within(rowActions).queryAllByRole(
+    "button",
+    { name: "Delete" },
+  );
+
+  if (!moreButton) {
+    return rowButtons;
+  }
+
+  fireEvent.click(moreButton);
+
+  return [
+    ...rowButtons,
+    ...within(screen.getByRole("menu")).queryAllByRole("menuitem", {
+      name: "Delete",
+    }),
+  ];
+};
+
 type OpenDeleteFunction = () => Promise<void>;
 
 const openDeleteConfirmation: OpenDeleteFunction = async (): Promise<void> => {
+  // The one row the table's list read returns, with its actions drawn.
   await waitFor(() => {
-    expect(screen.getAllByText("Delete").length).toBeGreaterThan(0);
+    expect(screen.getAllByTestId("row-actions")).toHaveLength(1);
   });
 
+  const deleteControls: Array<HTMLElement> = findRowDeleteControls(
+    screen.getByTestId("row-actions"),
+  );
+
   /*
-   * Exactly one Delete control on the row. Two would mean the built-in delete
-   * was left switched on beside the guard, and a user reaching for the wrong one
-   * gets the generic confirmation and no numbers at all.
+   * Exactly one Delete control on the row, the ⋯ menu included. Two would mean
+   * the built-in delete was left switched on beside the guard, and a user
+   * reaching for the wrong one gets the generic confirmation and no numbers at
+   * all. And nothing else on the page reads "Delete" either - counted with the
+   * menu open, so a second one hiding in there is on the page to be counted.
    */
+  expect(deleteControls).toHaveLength(1);
   expect(screen.getAllByText("Delete")).toHaveLength(1);
 
-  fireEvent.click(screen.getByText("Delete"));
+  fireEvent.click(deleteControls[0]!);
 
   await waitFor(() => {
     expect(screen.getByTestId("confirm-modal-description")).toBeInTheDocument();
@@ -1785,9 +1887,76 @@ const clickInModal: ClickInModalFunction = (name: string): void => {
   );
 };
 
+/*
+ * What a control is called to a person: the ⋯ trigger by its aria-label, a
+ * labelled button or menu item by its text.
+ */
+type ControlLabelsFunction = (controls: Array<HTMLElement>) => Array<string>;
+
+const controlLabels: ControlLabelsFunction = (
+  controls: Array<HTMLElement>,
+): Array<string> => {
+  return controls.map((control: HTMLElement) => {
+    const label: string =
+      control.getAttribute("aria-label") || (control.textContent || "").trim();
+
+    /*
+     * Each ⋯ is named for its row ("More actions for Monitor: Checkout
+     * API"); what these tests compare is which controls a row has.
+     */
+    return label.startsWith("More actions for ") ? "More actions" : label;
+  });
+};
+
+/* The labels behind the row's ⋯, or none when the row has no menu at all. */
+type ReadMenuItemsFunction = (rowActions: HTMLElement) => Array<string>;
+
+const readMenuItems: ReadMenuItemsFunction = (
+  rowActions: HTMLElement,
+): Array<string> => {
+  const moreButton: HTMLElement | null = within(rowActions).queryByTestId(
+    "row-actions-more-button",
+  );
+
+  if (!moreButton) {
+    return [];
+  }
+
+  fireEvent.click(moreButton);
+
+  return controlLabels(
+    within(screen.getByRole("menu")).getAllByRole("menuitem"),
+  );
+};
+
 describe.each(METHOD_SURFACES)(
   "$name methods, wired: deleting goes through the impact modal",
   (surface: MethodSurface) => {
+    /*
+     * Where Delete hangs. A row shows one button and a ⋯ menu with the rest,
+     * and Delete - the one action here that cannot be taken back - only earns
+     * the button when there is nothing else on the row to give it to. A method
+     * that can send a test gives the button to the test, and Delete goes behind
+     * the ⋯, still reachable, and still the only way to delete.
+     */
+    test("Delete is the row's button only when it is the row's only action", async () => {
+      signIn();
+      mockMethodTable(surface);
+
+      render(<surface.Component />);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId("row-actions")).toHaveLength(1);
+      });
+
+      const rowActions: HTMLElement = screen.getByTestId("row-actions");
+
+      expect(controlLabels(within(rowActions).getAllByRole("button"))).toEqual(
+        surface.rowButtons,
+      );
+      expect(readMenuItems(rowActions)).toEqual(surface.menuItems);
+    });
+
     test("the Delete control opens the impact modal, with the real numbers", async () => {
       signIn();
       mockMethodTable(surface);

package/Tests/App/Dashboard/OnCallRulesDeleteGuard.test.tsx

@@ -14,6 +14,7 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from "@testing-library/react";
 import React from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
@@ -381,12 +382,124 @@ const readinessJson: ReadinessJsonFunction = (
   };
 };
 
-type FindDeleteButtonsFunction = () => Array<HTMLElement>;
+/*
+ * A rule row carries one button (Edit) and folds everything else into a ⋯ menu
+ * beside it, and Delete - destructive, so never the row's one button - is in
+ * that menu. The helpers below are the only way these tests reach it: find the
+ * row, open ITS menu, pick the item by name. Picking by name, not position, is
+ * what keeps "the guarded Delete" distinguishable from "some menu entry".
+ */
+
+type FindRowsFunction = () => Array<HTMLElement>;
+
+/*
+ * The action cell of every rendered rule row. RowActions draws nothing at all
+ * for a row with no actions, so a row with none is not counted - which is the
+ * point: these tests count rows that OFFER something.
+ */
+const findRows: FindRowsFunction = (): Array<HTMLElement> => {
+  return screen.queryAllByTestId("row-actions");
+};
+
+type WaitForRowsFunction = (count: number) => Promise<Array<HTMLElement>>;
+
+/*
+ * Waits until the table has drawn exactly `count` rows, each with its ⋯ menu -
+ * the stand-in for the old wait on "this many Delete buttons", which used to
+ * be visible on the row and now is one click further in.
+ */
+const waitForRows: WaitForRowsFunction = async (
+  count: number,
+): Promise<Array<HTMLElement>> => {
+  let rows: Array<HTMLElement> = [];
 
-const findDeleteButtons: FindDeleteButtonsFunction = (): Array<HTMLElement> => {
-  return screen.queryAllByRole("button", { name: "Delete" });
+  await waitFor(() => {
+    rows = findRows();
+    expect(rows.length).toBe(count);
+
+    for (const row of rows) {
+      expect(
+        within(row).getByTestId("row-actions-more-button"),
+      ).toBeInTheDocument();
+    }
+  });
+
+  return rows;
 };
 
+type RowMenuFunction = (row: HTMLElement) => HTMLElement;
+
+/*
+ * The menu is portalled to document.body, so it is found on the screen rather
+ * than inside the row - and there is only ever one open, so `getByRole` both
+ * finds it and proves no other row's menu was left open behind it.
+ */
+const openRowMenu: RowMenuFunction = (row: HTMLElement): HTMLElement => {
+  fireEvent.click(within(row).getByTestId("row-actions-more-button"));
+
+  return screen.getByRole("menu");
+};
+
+type CloseRowMenuFunction = (row: HTMLElement) => void;
+
+const closeRowMenu: CloseRowMenuFunction = (row: HTMLElement): void => {
+  fireEvent.click(within(row).getByTestId("row-actions-more-button"));
+
+  expect(screen.queryByRole("menu")).toBeNull();
+};
+
+type FindRowDeleteItemFunction = (menu: HTMLElement) => HTMLElement | null;
+
+const findRowDeleteItem: FindRowDeleteItemFunction = (
+  menu: HTMLElement,
+): HTMLElement | null => {
+  return within(menu).queryByRole("menuitem", { name: "Delete" });
+};
+
+type ExpectRowsOfferDeleteFunction = (rows: Array<HTMLElement>) => void;
+
+/*
+ * Every row offers exactly one Delete, and it is live. `getByRole` throws on
+ * two, so the stock delete switched back on NEXT TO the guarded one fails here
+ * just as the old count of Delete buttons did.
+ */
+const expectEveryRowOffersDelete: ExpectRowsOfferDeleteFunction = (
+  rows: Array<HTMLElement>,
+): void => {
+  for (const row of rows) {
+    const menu: HTMLElement = openRowMenu(row);
+
+    expect(
+      within(menu).getByRole("menuitem", { name: "Delete" }),
+    ).toBeEnabled();
+
+    closeRowMenu(row);
+  }
+};
+
+type ClickRowDeleteFunction = (row: HTMLElement) => void;
+
+const clickRowDelete: ClickRowDeleteFunction = (row: HTMLElement): void => {
+  const menu: HTMLElement = openRowMenu(row);
+
+  fireEvent.click(within(menu).getByRole("menuitem", { name: "Delete" }));
+};
+
+type FindConfirmDeleteButtonFunction = () => HTMLElement;
+
+/*
+ * The confirmation's own Delete. The row's Delete is a menu item in a menu
+ * that closed when it was picked, so it no longer competes for the name - but
+ * the confirmation is still looked for inside the dialog, so a Delete that
+ * turned up anywhere else on the page could not be mistaken for its submit.
+ */
+const findConfirmDeleteButton: FindConfirmDeleteButtonFunction =
+  (): HTMLElement => {
+    return within(screen.getByRole("dialog")).getByRole("button", {
+      name: "Delete",
+    });
+  };
+
 type SettleFunction = () => Promise<void>;
 
 /*
@@ -454,11 +567,10 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
 
     render(<IncidentOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -485,11 +597,10 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
 
     render(<IncidentOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(2);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(2);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     /*
      * The property, rather than the exact reassuring sentence: a guard that
@@ -523,11 +634,10 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
 
     render(<IncidentOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -550,11 +660,10 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
 
     render(<IncidentOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -562,12 +671,7 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
       );
     });
 
-    /*
-     * Two controls now read "Delete": the row's and the confirmation's. The
-     * last one in the document is the modal's submit.
-     */
-    const deleteControls: Array<HTMLElement> = findDeleteButtons();
-    fireEvent.click(deleteControls[deleteControls.length - 1]!);
+    fireEvent.click(findConfirmDeleteButton());
 
     await waitFor(() => {
       expect(deleteItemMock).toHaveBeenCalled();
@@ -595,9 +699,8 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
 
     render(<IncidentOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
     const previousImplementation: any = (
       getListMock as any
@@ -620,7 +723,7 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
       return previousImplementation(params);
     });
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -628,8 +731,7 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
       );
     });
 
-    const heldControls: Array<HTMLElement> = findDeleteButtons();
-    fireEvent.click(heldControls[heldControls.length - 1]!);
+    fireEvent.click(findConfirmDeleteButton());
 
     expect(deleteItemMock).not.toHaveBeenCalled();
 
@@ -641,8 +743,7 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
       );
     });
 
-    const readyControls: Array<HTMLElement> = findDeleteButtons();
-    fireEvent.click(readyControls[readyControls.length - 1]!);
+    fireEvent.click(findConfirmDeleteButton());
 
     await waitFor(() => {
       expect(deleteItemMock).toHaveBeenCalled();
@@ -673,8 +774,19 @@ describe("Incident on-call rules: deleting a rule says what it costs", () => {
      * Row rendering is what makes this non-vacuous. Hand the table an action
      * button unconditionally and the Actions column alone is enough to render
      * it - with a Delete on every row - in place of the refusal below.
+     *
+     * Checked both where a Delete could be offered: on the row as a button,
+     * and folded into a row's ⋯ menu, which is where a destructive action
+     * lands now. A Delete one click further in is still a Delete offered.
      */
-    expect(findDeleteButtons().length).toBe(0);
+    expect(screen.queryAllByRole("button", { name: "Delete" }).length).toBe(0);
+
+    for (const row of findRows()) {
+      const menu: HTMLElement = openRowMenu(row);
+      expect(findRowDeleteItem(menu)).toBeNull();
+      closeRowMenu(row);
+    }
+
     expect(
       screen.getByText(/You are not authorized to view this table/),
     ).toBeInTheDocument();
@@ -707,11 +819,10 @@ describe("The other three rule pages carry the same guard", () => {
 
     render(<AlertOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -738,11 +849,10 @@ describe("The other three rule pages carry the same guard", () => {
 
     render(<EpisodeOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
@@ -769,11 +879,10 @@ describe("The other three rule pages carry the same guard", () => {
 
     render(<IncidentEpisodeOnCallRules {...({} as any)} />);
 
-    await waitFor(() => {
-      expect(findDeleteButtons().length).toBe(1);
-    });
+    const rows: Array<HTMLElement> = await waitForRows(1);
+    expectEveryRowOffersDelete(rows);
 
-    fireEvent.click(findDeleteButtons()[0]!);
+    clickRowDelete(rows[0]!);
 
     await waitFor(() => {
       expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(