@oneuptime/common 12.0.12 → 12.0.14

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

@@ -0,0 +1,338 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The flagship interaction of the command palette — press Cmd/Ctrl+K anywhere
+ * on the dashboard and the palette appears — lives entirely in the
+ * DashboardCommandPalette host: a document-level keydown listener plus a
+ * GlobalEvents subscription. The App suite runs in plain node and can only
+ * pin source patterns, so this suite actually mounts the host (real
+ * CommandPalette underneath, portal and all) and fires the real events.
+ *
+ * Escape/close-key semantics inside the open palette are deliberately NOT
+ * pinned here — they belong to the Common CommandPalette's own contract. This
+ * suite owns only the host's chord, its politeness rules, the global toggle
+ * event, and listener cleanup.
+ */
+
+const navigateMock: MockFunction = getJestMockFunction();
+const getListMock: MockFunction = getJestMockFunction();
+const getCurrentProjectIdMock: MockFunction = getJestMockFunction();
+const getAllPermissionsMock: MockFunction = getJestMockFunction();
+const isMasterAdminMock: MockFunction = getJestMockFunction();
+
+/*
+ * The arrow wrappers are load bearing: jest.mock is hoisted above the
+ * compiled requires, so the consts above are still in their temporal dead
+ * zone when the factory body runs. Dereferencing them lazily, at call time,
+ * is what works (same pattern as InvestigationPanel.test.tsx).
+ */
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, defaultValue?: string): string => {
+          return defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<unknown>) => {
+        return getListMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Navigation", () => {
+  return {
+    __esModule: true,
+    default: {
+      navigate: (...args: Array<unknown>) => {
+        return navigateMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (...args: Array<unknown>) => {
+        return getAllPermissionsMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (...args: Array<unknown>) => {
+        return isMasterAdminMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: (...args: Array<unknown>) => {
+        return getCurrentProjectIdMock(...args);
+      },
+    },
+  };
+});
+
+/*
+ * The real catalog hook walks the full RouteMap through useTranslation; the
+ * host only needs SOME catalog, so a single-page one keeps the suite about
+ * the host's event wiring rather than the NavBar's contents.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Utils/NavigationItems",
+  () => {
+    const useDashboardNavigationItemsStub: () => unknown = (): unknown => {
+      /*
+       * Route is loaded lazily for the same hoisting reason as the mock
+       * functions above; requireActual keeps it the real class.
+       */
+      const RouteClass: typeof import("../../../Types/API/Route").default = (
+        jest.requireActual("../../../Types/API/Route") as {
+          default: typeof import("../../../Types/API/Route").default;
+        }
+      ).default;
+      return {
+        navItems: [
+          {
+            id: "home-nav-bar-item",
+            title: "Home",
+            icon: "Home",
+            route: new RouteClass("/dashboard/abc123/home"),
+          },
+        ],
+        moreMenuItems: [],
+        rightElement: {
+          id: "user-profile-nav-bar-item",
+          title: "User Profile",
+          description: "Your account",
+          icon: "User",
+          route: new RouteClass("/dashboard/user-profile/picture"),
+        },
+      };
+    };
+
+    // The App source consumes the hook as the module's default export.
+    return {
+      __esModule: true,
+      default: useDashboardNavigationItemsStub,
+      useDashboardNavigationItems: useDashboardNavigationItemsStub,
+    };
+  },
+);
+
+import DashboardCommandPalette from "../../../../App/FeatureSet/Dashboard/src/Components/CommandPalette/DashboardCommandPalette";
+import EventName from "../../../../App/FeatureSet/Dashboard/src/Utils/EventName";
+import GlobalEvents from "../../../UI/Utils/GlobalEvents";
+
+function palette(): HTMLElement | null {
+  return screen.queryByTestId("command-palette");
+}
+
+/*
+ * The chord is dispatched on document.body — where real key events land when
+ * no input is focused — and bubbles up to the host's document-level listener.
+ */
+function pressChord(init: KeyboardEventInit): void {
+  fireEvent.keyDown(document.body, init);
+}
+
+beforeEach(() => {
+  /*
+   * The open panel schedules an enter-transition frame (rAF + fallback
+   * timer); fake timers keep those under act()'s control.
+   */
+  jest.useFakeTimers();
+  getCurrentProjectIdMock.mockReturnValue(null);
+  getAllPermissionsMock.mockReturnValue([]);
+  isMasterAdminMock.mockReturnValue(false);
+  getListMock.mockResolvedValue({ data: [], count: 0 } as never);
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllTimers();
+  jest.useRealTimers();
+  navigateMock.mockReset();
+  getListMock.mockReset();
+  getCurrentProjectIdMock.mockReset();
+  getAllPermissionsMock.mockReset();
+  isMasterAdminMock.mockReset();
+});
+
+describe("DashboardCommandPalette Cmd/Ctrl+K chord", () => {
+  test("Cmd+K on the document opens the palette", () => {
+    render(<DashboardCommandPalette />);
+    expect(palette()).toBeNull();
+
+    pressChord({ key: "k", metaKey: true });
+
+    expect(palette()).toBeInTheDocument();
+  });
+
+  test("the same chord closes an open palette", () => {
+    render(<DashboardCommandPalette />);
+
+    pressChord({ key: "k", metaKey: true });
+    expect(palette()).toBeInTheDocument();
+
+    pressChord({ key: "k", metaKey: true });
+    expect(palette()).toBeNull();
+  });
+
+  test("Ctrl+K works exactly like Cmd+K (Windows/Linux)", () => {
+    render(<DashboardCommandPalette />);
+
+    pressChord({ key: "k", ctrlKey: true });
+    expect(palette()).toBeInTheDocument();
+
+    pressChord({ key: "k", ctrlKey: true });
+    expect(palette()).toBeNull();
+  });
+
+  test("a chord another handler already claimed (defaultPrevented) is ignored", () => {
+    render(<DashboardCommandPalette />);
+
+    /*
+     * A capture-phase window listener models "some earlier handler took this
+     * chord": it runs before the host's document listener and claims the
+     * event, exactly the situation defaultPrevented is checked for.
+     */
+    const claimChord: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", claimChord, { capture: true });
+
+    try {
+      pressChord({ key: "k", metaKey: true });
+      expect(palette()).toBeNull();
+    } finally {
+      window.removeEventListener("keydown", claimChord, { capture: true });
+    }
+
+    // And with the claimer gone the same chord opens the palette again.
+    pressChord({ key: "k", metaKey: true });
+    expect(palette()).toBeInTheDocument();
+  });
+
+  test("extra modifiers on the chord do not open the palette", () => {
+    render(<DashboardCommandPalette />);
+
+    pressChord({ key: "k", metaKey: true, shiftKey: true });
+    pressChord({ key: "k", ctrlKey: true, altKey: true });
+    pressChord({ key: "k" });
+
+    expect(palette()).toBeNull();
+  });
+});
+
+describe("DashboardCommandPalette global toggle event", () => {
+  test("the COMMAND_PALETTE_TOGGLE event toggles the palette", () => {
+    render(<DashboardCommandPalette />);
+    expect(palette()).toBeNull();
+
+    act((): void => {
+      GlobalEvents.dispatchEvent(EventName.COMMAND_PALETTE_TOGGLE);
+    });
+    expect(palette()).toBeInTheDocument();
+
+    act((): void => {
+      GlobalEvents.dispatchEvent(EventName.COMMAND_PALETTE_TOGGLE);
+    });
+    expect(palette()).toBeNull();
+  });
+});
+
+describe("DashboardCommandPalette listener cleanup", () => {
+  test("unmounting removes every document keydown listener it added, same references", () => {
+    const addSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      document,
+      "addEventListener",
+    );
+    const removeSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      document,
+      "removeEventListener",
+    );
+
+    try {
+      const view: ReturnType<typeof render> = render(
+        <DashboardCommandPalette />,
+      );
+
+      const addedKeydownListeners: Array<unknown> = addSpy.mock.calls
+        .filter((call: Array<unknown>): boolean => {
+          return call[0] === "keydown";
+        })
+        .map((call: Array<unknown>): unknown => {
+          return call[1];
+        });
+
+      // The host claims the chord at the document level while mounted.
+      expect(addedKeydownListeners.length).toBeGreaterThanOrEqual(1);
+
+      view.unmount();
+
+      const removedKeydownListeners: Array<unknown> = removeSpy.mock.calls
+        .filter((call: Array<unknown>): boolean => {
+          return call[0] === "keydown";
+        })
+        .map((call: Array<unknown>): unknown => {
+          return call[1];
+        });
+
+      /*
+       * Every added listener must be removed with the SAME function
+       * reference — an inline re-created arrow in the cleanup would leave
+       * the original behind and stack a listener per mount.
+       */
+      for (const listener of addedKeydownListeners) {
+        expect(removedKeydownListeners).toContain(listener);
+      }
+
+      // And a chord after unmount reaches nothing.
+      pressChord({ key: "k", metaKey: true });
+      expect(palette()).toBeNull();
+    } finally {
+      addSpy.mockRestore();
+      removeSpy.mockRestore();
+    }
+  });
+});

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

@@ -60,7 +60,7 @@ jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
  * Record MarkdownViewer's props so safeMode remains an asserted part of the
  * contract even when the Common Jest config replaces its markdown renderer.
  */
-jest.mock("../../../UI/Components/Markdown.tsx/MarkdownViewer", () => {
+jest.mock("../../../UI/Components/Markdown.tsx/LazyMarkdownViewer", () => {
   return {
     __esModule: true,
     default: (props: MarkdownViewerProps): React.ReactElement => {

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

@@ -0,0 +1,328 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test } from "@jest/globals";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import MonitorType, {
+  MonitorTypeCategory,
+  MonitorTypeHelper,
+} from "../../../Types/Monitor/MonitorType";
+import CardSelect, {
+  CardSelectOption,
+  CardSelectOptionGroup,
+} from "../../../UI/Components/CardSelect/CardSelect";
+import MonitorTypeUtil from "../../../../App/FeatureSet/Dashboard/src/Utils/MonitorType";
+
+/*
+ * The real catalog, driven through the real picker. The unit tests either side
+ * of this one prove the search ranks correctly and the component renders
+ * correctly; what is pinned here is that the dashboard hands the component the
+ * data it needs to do either - the adapter drops keywords silently, and every
+ * search below still "works" while finding nothing.
+ */
+
+const categorizedOptions: Array<CardSelectOptionGroup> =
+  MonitorTypeUtil.monitorTypesAsCategorizedCardSelectOptions();
+
+type RenderPickerFunction = (value?: string) => MockFunction;
+
+const renderPicker: RenderPickerFunction = (value?: string): MockFunction => {
+  const onChange: MockFunction = getJestMockFunction();
+
+  render(
+    <CardSelect
+      options={categorizedOptions}
+      value={value}
+      onChange={onChange}
+      searchable={true}
+      searchPlaceholder="Search monitor types - try ping, ssl, k8s, postgres"
+      collapsibleGroups={true}
+    />,
+  );
+
+  return onChange;
+};
+
+type SearchFunction = (value: string) => void;
+
+const search: SearchFunction = (value: string): void => {
+  fireEvent.change(screen.getByTestId("card-select-search"), {
+    target: { value: value },
+  });
+};
+
+// Every type the catalog actually offers, in the order the picker lists them.
+const catalogTypeValues: Array<string> = categorizedOptions.flatMap(
+  (group: CardSelectOptionGroup) => {
+    return group.options.map((option: CardSelectOption) => {
+      return option.value;
+    });
+  },
+);
+
+type ShownTypesFunction = () => Array<string>;
+
+const shownTypes: ShownTypesFunction = (): Array<string> => {
+  return screen.queryAllByRole("radio").map((card: HTMLElement) => {
+    return (card.getAttribute("data-testid") || "").replace(
+      "card-select-option-",
+      "",
+    );
+  });
+};
+
+describe("Monitor type picker", () => {
+  describe("the options the dashboard builds", () => {
+    test("carries the keywords through from the monitor type catalog", () => {
+      for (const group of categorizedOptions) {
+        for (const option of group.options) {
+          expect({
+            monitorType: option.value,
+            hasKeywords: Boolean(option.keywords && option.keywords.length > 0),
+          }).toEqual({ monitorType: option.value, hasKeywords: true });
+        }
+      }
+    });
+
+    test("carries keywords through the flat option list too", () => {
+      const flat: Array<CardSelectOption> =
+        MonitorTypeUtil.monitorTypesAsCardSelectOptions();
+
+      for (const option of flat) {
+        expect(option.keywords).toBeDefined();
+        expect((option.keywords || []).length).toBeGreaterThan(0);
+      }
+    });
+
+    test("offers one group per category, in catalog order", () => {
+      const categories: Array<MonitorTypeCategory> =
+        MonitorTypeHelper.getMonitorTypeCategories();
+
+      expect(
+        categorizedOptions.map((group: CardSelectOptionGroup) => {
+          return group.label;
+        }),
+      ).toEqual(
+        categories.map((category: MonitorTypeCategory) => {
+          return category.label;
+        }),
+      );
+    });
+  });
+
+  describe("what a user sees on opening the form", () => {
+    test("the everyday types are on screen without scrolling past anything", () => {
+      renderPicker();
+
+      expect(screen.getByTestId("card-select-option-Website")).toBeVisible();
+      expect(screen.getByTestId("card-select-option-API")).toBeVisible();
+      expect(screen.getByTestId("card-select-option-Ping")).toBeVisible();
+    });
+
+    /*
+     * The whole point of the change. Every type used to render at once - nine
+     * headings and 29 cards, about six thousand pixels of them.
+     */
+    test("the long tail starts folded away behind its headings", () => {
+      renderPicker();
+
+      expect(
+        screen.queryByTestId("card-select-option-Kubernetes"),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId("card-select-option-Ceph"),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId("card-select-option-Traces"),
+      ).not.toBeInTheDocument();
+    });
+
+    test("shows far fewer cards than the catalog holds", () => {
+      renderPicker();
+
+      const total: number = categorizedOptions.reduce(
+        (count: number, group: CardSelectOptionGroup) => {
+          return count + group.options.length;
+        },
+        0,
+      );
+
+      expect(shownTypes().length).toBeLessThan(total / 2);
+    });
+
+    test("every category is still reachable, with a count of what is inside", () => {
+      renderPicker();
+
+      for (const group of categorizedOptions) {
+        const header: HTMLElement = screen.getByTestId(
+          `card-select-group-${group.label}`,
+        );
+
+        expect(header).toBeVisible();
+        expect(header).toHaveTextContent(String(group.options.length));
+      }
+    });
+
+    test("says how many types there are to choose from", () => {
+      renderPicker();
+
+      expect(
+        screen.getByTestId("card-select-search-summary"),
+      ).toHaveTextContent("to choose from");
+    });
+  });
+
+  describe("finding a type by the words a user already knows", () => {
+    test.each([
+      ["k8s", MonitorType.Kubernetes],
+      ["postgres", MonitorType.SQLQuery],
+      ["heartbeat", MonitorType.IncomingRequest],
+      ["tls", MonitorType.SSLCertificate],
+      ["snmp", MonitorType.NetworkDevice],
+      ["icmp", MonitorType.Ping],
+      ["whois", MonitorType.Domain],
+      ["prometheus", MonitorType.Metrics],
+    ])("%s finds %s first", (query: string, expected: MonitorType) => {
+      renderPicker();
+
+      search(query);
+
+      expect(shownTypes()[0]).toBe(expected);
+    });
+
+    test("a search reaches types that are folded away", () => {
+      renderPicker();
+
+      expect(
+        screen.queryByTestId("card-select-option-Kubernetes"),
+      ).not.toBeInTheDocument();
+
+      search("k8s");
+
+      expect(screen.getByTestId("card-select-option-Kubernetes")).toBeVisible();
+    });
+
+    test("a search for a vendor finds the external status page monitor", () => {
+      renderPicker();
+
+      search("cloudflare");
+
+      expect(shownTypes()).toContain(MonitorType.ExternalStatusPage);
+    });
+
+    test("a category name gathers its types together", () => {
+      renderPicker();
+
+      search("telemetry");
+
+      const shown: Array<string> = shownTypes();
+
+      expect(shown).toContain(MonitorType.Logs);
+      expect(shown).toContain(MonitorType.Metrics);
+      expect(shown).toContain(MonitorType.Traces);
+      expect(shown).not.toContain(MonitorType.Website);
+    });
+
+    test("a word nothing uses says so instead of showing an empty grid", () => {
+      renderPicker();
+
+      search("mainframe");
+
+      expect(screen.getByTestId("card-select-no-results")).toBeVisible();
+      expect(shownTypes()).toEqual([]);
+    });
+
+    test("picking a type from the search results reports the monitor type", () => {
+      const onChange: MockFunction = renderPicker();
+
+      search("k8s");
+      fireEvent.click(screen.getByTestId("card-select-option-Kubernetes"));
+
+      expect(onChange).toHaveBeenCalledWith(MonitorType.Kubernetes);
+    });
+
+    /*
+     * The e2e suite reaches a folded-away type by typing its MonitorType value
+     * into this box and then clicking card-select-option-<value>
+     * (selectMonitorTypeCard in E2E/Tests/Dashboard/Helpers/Monitors.ts). That
+     * only holds while every type's own value is a search term that finds it,
+     * which a renamed title or a reworded description can quietly break — and
+     * the only thing that would notice is a full release e2e run.
+     */
+    test.each(catalogTypeValues)(
+      "typing %s finds the card the e2e suite goes on to click",
+      (value: string) => {
+        renderPicker();
+
+        search(value);
+
+        expect(screen.getByTestId(`card-select-option-${value}`)).toBeVisible();
+      },
+    );
+  });
+
+  describe("coming back to a form that already has a type", () => {
+    test("shows the selection rather than hiding it behind a closed heading", () => {
+      renderPicker(MonitorType.Ceph);
+
+      expect(screen.getByTestId("card-select-option-Ceph")).toBeVisible();
+      expect(screen.getByTestId("card-select-option-Ceph")).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+    });
+
+    test("leaves the rest folded away", () => {
+      renderPicker(MonitorType.Ceph);
+
+      expect(
+        screen.queryByTestId("card-select-option-Traces"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("browsing without searching", () => {
+    test("opening a category shows every type in it", () => {
+      renderPicker();
+
+      fireEvent.click(screen.getByTestId("card-select-group-Telemetry"));
+
+      expect(screen.getByTestId("card-select-option-Logs")).toBeVisible();
+      expect(screen.getByTestId("card-select-option-Metrics")).toBeVisible();
+      expect(screen.getByTestId("card-select-option-Traces")).toBeVisible();
+      expect(screen.getByTestId("card-select-option-Exceptions")).toBeVisible();
+    });
+
+    test("a type can be picked by browsing, with no typing at all", () => {
+      const onChange: MockFunction = renderPicker();
+
+      fireEvent.click(screen.getByTestId("card-select-group-Infrastructure"));
+      fireEvent.click(screen.getByTestId("card-select-option-Kubernetes"));
+
+      expect(onChange).toHaveBeenCalledWith(MonitorType.Kubernetes);
+    });
+
+    test("every type in the catalog can be reached by opening its category", () => {
+      renderPicker();
+
+      // Only the closed ones - clicking an open heading would fold it away.
+      for (const group of categorizedOptions) {
+        const header: HTMLElement = screen.getByTestId(
+          `card-select-group-${group.label}`,
+        );
+
+        if (header.getAttribute("aria-expanded") === "false") {
+          fireEvent.click(header);
+        }
+      }
+
+      for (const group of categorizedOptions) {
+        for (const option of group.options) {
+          expect(
+            screen.getByTestId(`card-select-option-${option.value}`),
+          ).toBeVisible();
+        }
+      }
+    });
+  });
+});