@oneuptime/common 14.0.12 → 14.0.13

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

@@ -131,6 +131,7 @@ import Monitor from "../../../../Models/DatabaseModels/Monitor";
 import Query from "../../../../Types/BaseDatabase/Query";
 import ListResult from "../../../../Types/BaseDatabase/ListResult";
 import { JSONObject } from "../../../../Types/JSON";
+import IconProp from "../../../../Types/Icon/IconProp";
 
 const PREFS_KEY: string = "monitors-wrap-content-table";
 
@@ -261,6 +262,7 @@ const makeColumns: MakeColumnsFunction = (): Columns<Monitor> => {
 const ACTION_BUTTONS: Array<ActionButtonSchema<Monitor>> = [
   {
     title: "Edit",
+    icon: IconProp.Edit,
     buttonStyleType: ButtonStyleType.NORMAL,
     onClick: (): void => {
       return undefined;

package/Tests/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.test.ts

@@ -3,6 +3,11 @@ import TemplateVariablesCatalog, {
   TemplateVariableGroup,
 } from "../../../../UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog";
 import MonitorType from "../../../../Types/Monitor/MonitorType";
+import {
+  TemplateVariable as EditorTemplateVariable,
+  TemplateVariableGroup as EditorTemplateVariableGroup,
+  TemplateVariableGroups,
+} from "../../../../Types/Template/TemplateVariable";
 import { describe, expect, it } from "@jest/globals";
 
 /*
@@ -722,3 +727,68 @@ describe("TemplateVariablesCatalog.getVariables - determinism and isolation", ()
     expect(titlesOf(second)).not.toContain("Injected");
   });
 });
+
+/*
+ * The same catalog as a template editor offers it: a monitor criteria's
+ * incident and alert descriptions and remediation notes list these under the
+ * Markdown editor and behind its Insert variable button.
+ */
+describe("TemplateVariablesCatalog.getTemplateVariableGroups", () => {
+  it.each([
+    [MonitorType.API, undefined],
+    [MonitorType.SSLCertificate, undefined],
+    [MonitorType.Kubernetes, ["host.name", "region"]],
+    [MonitorType.Metrics, undefined],
+  ])(
+    "for %s, the same groups, in the same order, with the same variables and examples",
+    (
+      monitorType: MonitorType,
+      seriesAttributeKeys: Array<string> | undefined,
+    ) => {
+      const catalog: Array<TemplateVariableGroup> =
+        TemplateVariablesCatalog.getVariables({
+          monitorType,
+          seriesAttributeKeys,
+        });
+
+      const groups: TemplateVariableGroups =
+        TemplateVariablesCatalog.getTemplateVariableGroups({
+          monitorType,
+          seriesAttributeKeys,
+        });
+
+      expect(groups).toEqual(
+        catalog.map((group: TemplateVariableGroup) => {
+          return {
+            title: group.title,
+            description: group.description,
+            variables: group.variables.map((variable: TemplateVariable) => {
+              return {
+                name: variable.key,
+                description: variable.description,
+                example: variable.example,
+              };
+            }),
+          };
+        }),
+      );
+    },
+  );
+
+  it("offers a grouped monitor's series labels by their attribute key", () => {
+    const names: Array<string> =
+      TemplateVariablesCatalog.getTemplateVariableGroups({
+        monitorType: MonitorType.Kubernetes,
+        seriesAttributeKeys: ["host.name"],
+      }).flatMap((group: EditorTemplateVariableGroup): Array<string> => {
+        return group.variables.map(
+          (variable: EditorTemplateVariable): string => {
+            return variable.name;
+          },
+        );
+      });
+
+    expect(names).toContain("monitorName");
+    expect(names).toContain("host.name");
+  });
+});

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

@@ -0,0 +1,307 @@
+import MoreMenu, {
+  MENU_ITEM_SELECTOR,
+} from "../../../UI/Components/MoreMenu/MoreMenu";
+import MoreMenuItem from "../../../UI/Components/MoreMenu/MoreMenuItem";
+import MoreMenuSection from "../../../UI/Components/MoreMenu/MoreMenuSection";
+import IconProp from "../../../Types/Icon/IconProp";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import React, { act } from "react";
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, options?: { defaultValue?: string }): string => {
+          return options?.defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+/*
+ * A menu can hold a choice of several - a feed's sort order - beside its
+ * actions. A choice is a menuitemradio with aria-checked, so a screen reader
+ * hears which one is in use, and MoreMenu treats it like any other item: in
+ * the arrow-key order, picked with Enter or a click, closing the menu. Before
+ * this, MoreMenu's promotion of plain buttons rewrote such a role to
+ * "menuitem", and its roving focus skipped anything else.
+ */
+
+type ClickMock = ReturnType<typeof jest.fn<() => void>>;
+type UserEventController = ReturnType<typeof userEvent.setup>;
+
+async function userKeyboard(
+  user: UserEventController,
+  keys: string,
+): Promise<void> {
+  await act(async () => {
+    await user.keyboard(keys);
+  });
+}
+
+interface Rendered {
+  newest: ClickMock;
+  oldest: ClickMock;
+  refresh: ClickMock;
+  toggle: ClickMock;
+}
+
+const renderMenu: () => Rendered = (): Rendered => {
+  const newest: ClickMock = jest.fn<() => void>();
+  const oldest: ClickMock = jest.fn<() => void>();
+  const refresh: ClickMock = jest.fn<() => void>();
+  const toggle: ClickMock = jest.fn<() => void>();
+
+  render(
+    <MoreMenu menuIcon={IconProp.EllipsisHorizontal} text="">
+      {[
+        <MoreMenuSection key="sort" title="Sort by time">
+          {[
+            <MoreMenuItem
+              key="newest"
+              text="Newest first"
+              icon={IconProp.Check}
+              isIconSpaceReserved={true}
+              isChecked={true}
+              onClick={newest}
+            />,
+            <MoreMenuItem
+              key="oldest"
+              text="Oldest first"
+              isIconSpaceReserved={true}
+              isChecked={false}
+              onClick={oldest}
+            />,
+          ]}
+        </MoreMenuSection>,
+        <MoreMenuItem
+          key="refresh"
+          text="Refresh"
+          icon={IconProp.Refresh}
+          onClick={refresh}
+        />,
+        // A caller's own on/off item.
+        <button
+          key="toggle"
+          type="button"
+          role="menuitemcheckbox"
+          aria-checked="false"
+          onClick={toggle}
+        >
+          Show archived
+        </button>,
+      ]}
+    </MoreMenu>,
+  );
+
+  return { newest, oldest, refresh, toggle };
+};
+
+const openMenu: () => HTMLElement = (): HTMLElement => {
+  fireEvent.click(screen.getByRole("button", { name: "More options" }));
+
+  return screen.getByRole("menu");
+};
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("MoreMenuItem isChecked", () => {
+  test("makes a choice a menuitemradio that says whether it is the one in use", () => {
+    renderMenu();
+
+    const menu: HTMLElement = openMenu();
+
+    expect(
+      within(menu).getByRole("menuitemradio", { name: "Newest first" }),
+    ).toHaveAttribute("aria-checked", "true");
+    expect(
+      within(menu).getByRole("menuitemradio", { name: "Oldest first" }),
+    ).toHaveAttribute("aria-checked", "false");
+  });
+
+  test("leaves an item without it an ordinary menuitem, with no aria-checked", () => {
+    renderMenu();
+
+    const refresh: HTMLElement = within(openMenu()).getByRole("menuitem", {
+      name: "Refresh",
+    });
+
+    expect(refresh).not.toHaveAttribute("aria-checked");
+  });
+});
+
+describe("MoreMenu with choices among its items", () => {
+  test("keeps each item's own role when it opens", () => {
+    renderMenu();
+
+    const menu: HTMLElement = openMenu();
+
+    // The promotion of plain buttons to menuitem leaves choices alone.
+    expect(within(menu).getAllByRole("menuitemradio")).toHaveLength(2);
+    expect(
+      within(menu).getByRole("menuitemcheckbox", { name: "Show archived" }),
+    ).toBeInTheDocument();
+    expect(
+      within(menu)
+        .getAllByRole("menuitem")
+        .map((item: HTMLElement): string => {
+          return (item.textContent || "").trim();
+        }),
+    ).toEqual(["Refresh"]);
+  });
+
+  test("names every item role in its selector", () => {
+    expect(MENU_ITEM_SELECTOR).toContain('[role="menuitem"]');
+    expect(MENU_ITEM_SELECTOR).toContain('[role="menuitemradio"]');
+    expect(MENU_ITEM_SELECTOR).toContain('[role="menuitemcheckbox"]');
+  });
+
+  test("walks choices and actions alike with the arrow keys, Home and End", async () => {
+    const user: UserEventController = userEvent.setup();
+
+    renderMenu();
+    const menu: HTMLElement = openMenu();
+
+    const newest: HTMLElement = within(menu).getByRole("menuitemradio", {
+      name: "Newest first",
+    });
+    const oldest: HTMLElement = within(menu).getByRole("menuitemradio", {
+      name: "Oldest first",
+    });
+    const refresh: HTMLElement = within(menu).getByRole("menuitem", {
+      name: "Refresh",
+    });
+    const toggle: HTMLElement = within(menu).getByRole("menuitemcheckbox", {
+      name: "Show archived",
+    });
+
+    // The section heading is not an item; focus starts on the first choice.
+    expect(newest).toHaveFocus();
+
+    await userKeyboard(user, "{ArrowDown}");
+    expect(oldest).toHaveFocus();
+    await userKeyboard(user, "{ArrowDown}");
+    expect(refresh).toHaveFocus();
+    await userKeyboard(user, "{ArrowDown}");
+    expect(toggle).toHaveFocus();
+    await userKeyboard(user, "{ArrowDown}");
+    expect(newest).toHaveFocus();
+    await userKeyboard(user, "{ArrowUp}");
+    expect(toggle).toHaveFocus();
+    await userKeyboard(user, "{Home}");
+    expect(newest).toHaveFocus();
+    await userKeyboard(user, "{End}");
+    expect(toggle).toHaveFocus();
+
+    // One tab stop at a time: the focused item, whatever its role.
+    expect(toggle).toHaveAttribute("tabindex", "0");
+    expect(newest).toHaveAttribute("tabindex", "-1");
+    expect(oldest).toHaveAttribute("tabindex", "-1");
+    expect(refresh).toHaveAttribute("tabindex", "-1");
+  });
+
+  test("picks a choice with Enter once, and closes", async () => {
+    const user: UserEventController = userEvent.setup();
+    const { oldest, newest } = renderMenu();
+
+    openMenu();
+    await userKeyboard(user, "{ArrowDown}");
+    await userKeyboard(user, "{Enter}");
+
+    expect(oldest).toHaveBeenCalledTimes(1);
+    expect(newest).not.toHaveBeenCalled();
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  });
+
+  test("picks a choice with a click once, closes, and hands focus back to the trigger", async () => {
+    const { oldest } = renderMenu();
+
+    fireEvent.click(
+      within(openMenu()).getByRole("menuitemradio", { name: "Oldest first" }),
+    );
+
+    expect(oldest).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+
+    await act(async () => {
+      await new Promise<void>((resolve: () => void) => {
+        requestAnimationFrame(() => {
+          resolve();
+        });
+      });
+    });
+
+    expect(screen.getByRole("button", { name: "More options" })).toHaveFocus();
+  });
+
+  test("closes after a caller's own menuitemcheckbox is clicked", () => {
+    const { toggle } = renderMenu();
+
+    fireEvent.click(
+      within(openMenu()).getByRole("menuitemcheckbox", {
+        name: "Show archived",
+      }),
+    );
+
+    expect(toggle).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  });
+
+  test("skips a disabled choice, as it skips a disabled action", async () => {
+    const user: UserEventController = userEvent.setup();
+    const picked: ClickMock = jest.fn<() => void>();
+
+    render(
+      <MoreMenu menuIcon={IconProp.EllipsisHorizontal} text="">
+        {[
+          <MoreMenuItem
+            key="a"
+            text="Newest first"
+            icon={IconProp.Check}
+            isIconSpaceReserved={true}
+            isChecked={true}
+            onClick={picked}
+          />,
+          <MoreMenuItem
+            key="b"
+            text="Oldest first"
+            isIconSpaceReserved={true}
+            isChecked={false}
+            isDisabled={true}
+            onClick={picked}
+          />,
+          <MoreMenuItem
+            key="c"
+            text="Refresh"
+            icon={IconProp.Refresh}
+            onClick={picked}
+          />,
+        ]}
+      </MoreMenu>,
+    );
+
+    const menu: HTMLElement = openMenu();
+
+    expect(
+      within(menu).getByRole("menuitemradio", { name: "Newest first" }),
+    ).toHaveFocus();
+
+    await userKeyboard(user, "{ArrowDown}");
+
+    expect(
+      within(menu).getByRole("menuitem", { name: "Refresh" }),
+    ).toHaveFocus();
+  });
+});

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

@@ -0,0 +1,187 @@
+import MoreMenuItem from "../../../UI/Components/MoreMenu/MoreMenuItem";
+import Color from "../../../Types/Color";
+import IconProp from "../../../Types/Icon/IconProp";
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import React from "react";
+
+/*
+ * A menu item that picks a state - "Change state to" in an incident's,
+ * alert's, episode's or scheduled maintenance event's header - shows the
+ * state's colour in the icon's place, the dot the state dropdowns draw.
+ */
+
+const GREEN: string = "#10b981";
+
+function dotOf(item: HTMLElement): HTMLElement | null {
+  return item.querySelector('[data-testid="more-menu-item-color"]');
+}
+
+// jsdom reports inline colours as rgb(); the tests speak in hex.
+function toHex(cssColor: string): string {
+  const match: RegExpMatchArray | null = cssColor.match(
+    /rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
+  );
+
+  if (!match) {
+    return cssColor;
+  }
+
+  return (
+    "#" +
+    [match[1], match[2], match[3]]
+      .map((part: string | undefined): string => {
+        return Number(part).toString(16).padStart(2, "0");
+      })
+      .join("")
+  );
+}
+
+function dotColor(item: HTMLElement): string | undefined {
+  const inner: HTMLElement | null =
+    dotOf(item)?.querySelector<HTMLElement>("span[style]") || null;
+
+  return inner ? toHex(inner.style.backgroundColor) : undefined;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("MoreMenuItem color", () => {
+  test("draws a dot of the colour before the label", () => {
+    render(
+      <MoreMenuItem
+        text="Resolved"
+        color={new Color(GREEN)}
+        onClick={() => {}}
+      />,
+    );
+
+    const item: HTMLElement = screen.getByRole("menuitem", {
+      name: "Resolved",
+    });
+
+    expect(dotColor(item)).toBe(GREEN);
+
+    // Before the label, where an icon would sit.
+    const dot: HTMLElement = dotOf(item)!;
+    const label: HTMLElement = screen.getByText("Resolved");
+
+    expect(
+      dot.compareDocumentPosition(label) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("the dot is decoration: the item's name stays the label alone", () => {
+    render(
+      <MoreMenuItem
+        text="Resolved"
+        color={new Color(GREEN)}
+        onClick={() => {}}
+      />,
+    );
+
+    const item: HTMLElement = screen.getByRole("menuitem");
+
+    expect(item).toHaveAccessibleName("Resolved");
+    expect(item.textContent?.trim()).toBe("Resolved");
+    expect(dotOf(item)).toHaveAttribute("aria-hidden", "true");
+  });
+
+  test("takes the icon's gutter, so its label lines up with icon items", () => {
+    render(
+      <MoreMenuItem
+        text="Resolved"
+        color={new Color(GREEN)}
+        onClick={() => {}}
+      />,
+    );
+
+    const dot: HTMLElement = dotOf(screen.getByRole("menuitem"))!;
+
+    // The same 16px box and 10px gap the item's icon has.
+    expect(dot).toHaveClass("h-4", "w-4", "mr-2.5", "shrink-0");
+    // The same dot the state dropdowns draw.
+    expect(dot.querySelector("span")).toHaveClass(
+      "h-2.5",
+      "w-2.5",
+      "rounded-full",
+      "border",
+      "border-gray-200",
+    );
+  });
+
+  test("takes a colour written as a string", () => {
+    render(<MoreMenuItem text="Resolved" color={GREEN} onClick={() => {}} />);
+
+    expect(dotColor(screen.getByRole("menuitem"))).toBe(GREEN);
+  });
+
+  test("an icon wins over a colour", () => {
+    render(
+      <MoreMenuItem
+        text="Resolved"
+        icon={IconProp.Check}
+        color={new Color(GREEN)}
+        onClick={() => {}}
+      />,
+    );
+
+    expect(dotOf(screen.getByRole("menuitem"))).toBeNull();
+  });
+
+  test.each([
+    ["no colour", undefined],
+    ["an empty colour", ""],
+    ["a blank colour", "   "],
+  ])("draws no dot for %s", (_name: string, color: string | undefined) => {
+    render(<MoreMenuItem text="Resolved" color={color} onClick={() => {}} />);
+
+    expect(dotOf(screen.getByRole("menuitem"))).toBeNull();
+  });
+
+  test("without a dot, a reserved icon gutter is still kept", () => {
+    const { container } = render(
+      <MoreMenuItem text="Resolved" isIconSpaceReserved onClick={() => {}} />,
+    );
+
+    expect(
+      container.querySelector('span.mr-2\\.5.h-4.w-4[aria-hidden="true"]'),
+    ).not.toBeNull();
+    expect(dotOf(screen.getByRole("menuitem"))).toBeNull();
+  });
+
+  test("with a dot, the reserved gutter is the dot's, not a second one", () => {
+    const { container } = render(
+      <MoreMenuItem
+        text="Resolved"
+        isIconSpaceReserved
+        color={new Color(GREEN)}
+        onClick={() => {}}
+      />,
+    );
+
+    expect(
+      container.querySelectorAll('span.mr-2\\.5.h-4.w-4[aria-hidden="true"]'),
+    ).toHaveLength(1);
+  });
+
+  test("still runs its action", () => {
+    const onClick: MockFunction = getJestMockFunction();
+
+    render(
+      <MoreMenuItem
+        text="Resolved"
+        color={new Color(GREEN)}
+        onClick={onClick}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("menuitem"));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -24,6 +24,7 @@ import {
 } from "@jest/globals";
 import { Mock } from "jest-mock";
 import React, { ReactElement } from "react";
+import IconProp from "../../../Types/Icon/IconProp";
 
 /*
  * MoreMenu's portalled mode, which every table row's ⋯ menu uses.
@@ -548,6 +549,7 @@ describe("MoreMenu, portalled", () => {
               actionButtons={[
                 {
                   title: "View User",
+                  icon: IconProp.Eye,
                   buttonStyleType: ButtonStyleType.NORMAL,
                   onClick: () => {
                     return undefined;
@@ -555,6 +557,7 @@ describe("MoreMenu, portalled", () => {
                 },
                 {
                   title: "Remove from Team",
+                  icon: IconProp.Trash,
                   buttonStyleType: ButtonStyleType.DANGER_OUTLINE,
                   onClick: () => {
                     onRemove();