@oneuptime/common 13.0.6 → 13.0.8

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

@@ -17,6 +17,12 @@ import {
 } from "@testing-library/react";
 import * as React from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
+import Route from "../../../Types/API/Route";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardCommandPalette from "../../../../App/FeatureSet/Dashboard/src/Components/CommandPalette/DashboardCommandPalette";
+import DashboardNavbar from "../../../../App/FeatureSet/Dashboard/src/Components/NavBar/NavBar";
+import EventName from "../../../../App/FeatureSet/Dashboard/src/Utils/EventName";
+import GlobalEvents from "../../../UI/Utils/GlobalEvents";
 
 /*
  * The flagship interaction of the command palette — press Cmd/Ctrl+K anywhere
@@ -28,8 +34,8 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
  *
  * 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.
+ * suite owns the host's chord, its politeness rules, the global toggle event,
+ * listener cleanup, and searching the real dashboard navigation catalog.
  */
 
 const navigateMock: MockFunction = getJestMockFunction();
@@ -37,6 +43,7 @@ const getListMock: MockFunction = getJestMockFunction();
 const getCurrentProjectIdMock: MockFunction = getJestMockFunction();
 const getAllPermissionsMock: MockFunction = getJestMockFunction();
 const isMasterAdminMock: MockFunction = getJestMockFunction();
+let navigationTranslations: Record<string, string> = {};
 
 /*
  * The arrow wrappers are load bearing: jest.mock is hoisted above the
@@ -49,7 +56,7 @@ jest.mock("react-i18next", () => {
     useTranslation: () => {
       return {
         t: (key: string, defaultValue?: string): string => {
-          return defaultValue ?? key;
+          return navigationTranslations[key] ?? defaultValue ?? key;
         },
       };
     },
@@ -117,67 +124,6 @@ jest.mock("../../../UI/Utils/Project", () => {
   };
 });
 
-/*
- * The real catalog hook walks the full RouteMap through useTranslation; the
- * host and dashboard NavBar only need a compact catalog, so one page plus one
- * product keeps the suite about shortcut ownership rather than catalog data.
- */
-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: [
-          {
-            title: "Monitors",
-            description: "Monitor anything that can go down.",
-            icon: "AltGlobe",
-            iconColor: "blue",
-            category: "Essentials",
-            route: new RouteClass("/dashboard/abc123/monitors"),
-          },
-        ],
-        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 DashboardNavbar from "../../../../App/FeatureSet/Dashboard/src/Components/NavBar/NavBar";
-import EventName from "../../../../App/FeatureSet/Dashboard/src/Utils/EventName";
-import GlobalEvents from "../../../UI/Utils/GlobalEvents";
-
 function palette(): HTMLElement | null {
   return screen.queryByTestId("command-palette");
 }
@@ -214,6 +160,12 @@ beforeEach(() => {
    * timer); fake timers keep those under act()'s control.
    */
   jest.useFakeTimers();
+  window.localStorage.clear();
+  navigationTranslations = {
+    "navbar.items.rumTitle": "Real User Monitoring",
+    "navbar.items.kubernetesTitle": "Kubernetes",
+    "navbar.items.servicesTitle": "Services",
+  };
   getCurrentProjectIdMock.mockReturnValue(null);
   getAllPermissionsMock.mockReturnValue([]);
   isMasterAdminMock.mockReturnValue(false);
@@ -299,6 +251,146 @@ describe("DashboardCommandPalette Cmd/Ctrl+K chord", () => {
   });
 });
 
+describe("DashboardCommandPalette navigation keyword search", () => {
+  test.each([
+    ["RUM", "Real User Monitoring", "rum"],
+    ["  rUm  ", "Real User Monitoring", "rum"],
+    ["web vitals", "Real User Monitoring", "rum"],
+    ["session replay", "Real User Monitoring", "rum"],
+    ["k8s", "Kubernetes", "kubernetes"],
+    ["  K8S  ", "Kubernetes", "kubernetes"],
+    ["pods", "Kubernetes", "kubernetes"],
+    ["apm", "Services", "service"],
+    ["error budgets", "SLOs", "slos"],
+    ["siem", "Security Events", "security-events"],
+  ])(
+    "%s finds %s and navigates to the selected project's page",
+    (query: string, title: string, path: string) => {
+      getCurrentProjectIdMock.mockReturnValue(new ObjectID("project-a"));
+      render(<DashboardCommandPalette />);
+      pressChord({ key: "k", metaKey: true });
+
+      fireEvent.change(screen.getByTestId("command-palette-input"), {
+        target: { value: query },
+      });
+
+      const option: HTMLElement = screen.getByTestId(
+        `command-palette-option-nav-dashboard-projectid-${path}`,
+      );
+      expect(option).toHaveTextContent(title);
+      fireEvent.click(option);
+
+      expect(navigateMock).toHaveBeenCalledTimes(1);
+      expect(navigateMock).toHaveBeenCalledWith(
+        new Route(`/dashboard/project-a/${path}`),
+      );
+      expect(palette()).not.toBeInTheDocument();
+    },
+  );
+
+  test("Enter opens the Kubernetes keyword result", () => {
+    getCurrentProjectIdMock.mockReturnValue(new ObjectID("project-a"));
+    render(<DashboardCommandPalette />);
+    pressChord({ key: "k", ctrlKey: true });
+    const input: HTMLElement = screen.getByTestId("command-palette-input");
+
+    fireEvent.change(input, { target: { value: "k8s" } });
+    expect(screen.getAllByRole("option")[0]).toHaveTextContent("Kubernetes");
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(navigateMock).toHaveBeenCalledWith(
+      new Route("/dashboard/project-a/kubernetes"),
+    );
+    expect(palette()).not.toBeInTheDocument();
+  });
+
+  test.each([
+    ["RUM", "rum"],
+    ["k8s", "kubernetes"],
+  ])(
+    "%s keeps using the current project's route after a project switch",
+    (query: string, path: string) => {
+      getCurrentProjectIdMock.mockReturnValue(new ObjectID("project-a"));
+      const view: ReturnType<typeof render> = render(
+        <DashboardCommandPalette />,
+      );
+      pressChord({ key: "k", metaKey: true });
+      fireEvent.change(screen.getByTestId("command-palette-input"), {
+        target: { value: query },
+      });
+      expect(
+        screen.getByTestId(
+          `command-palette-option-nav-dashboard-projectid-${path}`,
+        ),
+      ).toBeInTheDocument();
+
+      getCurrentProjectIdMock.mockReturnValue(new ObjectID("project-b"));
+      view.rerender(<DashboardCommandPalette />);
+      fireEvent.click(
+        screen.getByTestId(
+          `command-palette-option-nav-dashboard-projectid-${path}`,
+        ),
+      );
+
+      expect(navigateMock).toHaveBeenCalledWith(
+        new Route(`/dashboard/project-b/${path}`),
+      );
+    },
+  );
+
+  test.each([
+    ["RUM", "rum", "navbar.items.rumTitle", "Surveillance des utilisateurs"],
+    ["k8s", "kubernetes", "navbar.items.kubernetesTitle", "Orchestration"],
+  ])(
+    "%s still finds the page after its title is translated",
+    (query: string, path: string, translationKey: string, title: string) => {
+      getCurrentProjectIdMock.mockReturnValue(new ObjectID("project-a"));
+      const view: ReturnType<typeof render> = render(
+        <DashboardCommandPalette />,
+      );
+      pressChord({ key: "k", metaKey: true });
+      fireEvent.change(screen.getByTestId("command-palette-input"), {
+        target: { value: query },
+      });
+
+      navigationTranslations[translationKey] = title;
+      view.rerender(<DashboardCommandPalette />);
+
+      const option: HTMLElement = screen.getByTestId(
+        `command-palette-option-nav-dashboard-projectid-${path}`,
+      );
+      expect(option).toHaveTextContent(title);
+      fireEvent.click(option);
+      expect(navigateMock).toHaveBeenCalledWith(
+        new Route(`/dashboard/project-a/${path}`),
+      );
+    },
+  );
+
+  test.each(["RUM", "k8s"])(
+    "%s does not expose project routes when no project is selected",
+    (query: string) => {
+      render(<DashboardCommandPalette />);
+      pressChord({ key: "k", metaKey: true });
+      fireEvent.change(screen.getByTestId("command-palette-input"), {
+        target: { value: query },
+      });
+
+      expect(
+        screen.queryByTestId(
+          "command-palette-option-nav-dashboard-projectid-rum",
+        ),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByTestId(
+          "command-palette-option-nav-dashboard-projectid-kubernetes",
+        ),
+      ).not.toBeInTheDocument();
+      expect(navigateMock).not.toHaveBeenCalled();
+    },
+  );
+});
+
 describe("dashboard Cmd/Ctrl+K ownership with the products menu mounted", () => {
   test.each([
     ["Cmd+K", { key: "k", metaKey: true }],

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

@@ -27,7 +27,7 @@ const getMock: MockFunction = getJestMockFunction();
 const countMock: MockFunction = getJestMockFunction();
 const currentProjectIdMock: MockFunction = getJestMockFunction();
 
-jest.mock("../../../Utils/API", () => {
+jest.mock("../../../UI/Utils/API/API", () => {
   return {
     __esModule: true,
     default: {

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

@@ -11,7 +11,10 @@ import DashboardMonitorListComponentElement, {
   ComponentProps,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardMonitorListComponent";
 import DashboardVariableSelector from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Toolbar/DashboardVariableSelector";
-import { setPublicDashboardContext } from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Utils/PublicDashboardContext";
+import {
+  PublicDashboardContext,
+  setPublicDashboardContext,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Utils/PublicDashboardContext";
 import DashboardMonitorListComponentUtil from "../../../Utils/Dashboard/Components/DashboardMonitorListComponent";
 import DashboardVariable, {
   DashboardVariableType,
@@ -36,6 +39,9 @@ const DASHBOARD_ID: ObjectID = new ObjectID(
 const UNIT_660: string = "06600000-0000-4000-8000-000000000000";
 const UNIT_661: string = "06610000-0000-4000-8000-000000000000";
 const NETWORK: string = "00000000-0000-4000-8000-000000000001";
+// Stands in for the public dashboard's API class; ModelAPI is mocked here.
+const PUBLIC_API_CLIENT: PublicDashboardContext["apiClient"] =
+  {} as unknown as PublicDashboardContext["apiClient"];
 
 jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
   return {
@@ -411,6 +417,7 @@ describe("MonitorList project label variables", () => {
       postJSON: async () => {
         throw new Error("Unexpected public request");
       },
+      apiClient: PUBLIC_API_CLIENT,
     });
     const input: ComponentProps = props({
       variables: [
@@ -424,6 +431,7 @@ describe("MonitorList project label variables", () => {
     expect(options["overrideRequestUrl"].toString()).toContain(
       `/resource-list/${DASHBOARD_ID.toString()}/monitor`,
     );
+    expect(options["apiClient"]).toBe(PUBLIC_API_CLIENT);
     expect(options["additionalRequestBody"]).toEqual({
       componentId: input.componentId.toString(),
       variables: [

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

@@ -467,6 +467,30 @@ describe("dashboard variable All contract", () => {
 
       expect(screen.getByRole("combobox")).toHaveValue("eu-1");
     });
+
+    test("a TelemetryAttribute Default missing from the values does not read All", async () => {
+      /*
+       * The attribute values list is capped, and the Default is free text,
+       * so the Default can be missing from it. The widgets still filter by
+       * the Default, so the select has to show it. The mocked public API
+       * returns no values at all.
+       */
+      const variable: DashboardVariable = makeVariable({
+        type: DashboardVariableType.TelemetryAttribute,
+        customListValues: undefined,
+        attributeKey: ATTRIBUTE_KEY,
+        defaultValue: "prod",
+      });
+
+      renderPublic(variable);
+
+      await waitFor(() => {
+        expect(screen.getByRole("combobox")).not.toBeDisabled();
+      });
+      expect(screen.getByRole("combobox")).toHaveValue("prod");
+      expect(screen.getByRole("combobox")).toHaveDisplayValue("prod");
+      expect(isUnfiltered(variable)).toBe(false);
+    });
   });
 
   /*

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

@@ -424,18 +424,22 @@ describe("DashboardVariableSelector", () => {
 
     test("a default the attribute no longer reports does not select some other value", async () => {
       /*
-       * The attribute stopped reporting "prod" in this time range. There is no
-       * option to select, so the control lands on "All" — the point being that
-       * it does not silently scope the board to a different cluster.
+       * The attribute stopped reporting "prod" in this time range. The
+       * widgets still filter by "prod", so the control shows "prod" rather
+       * than scoping the board to a different cluster, or reading "All".
        */
       getTelemetryAttributeValuesMock.mockResolvedValue(["staging"]);
 
-      renderToolbar([telemetryVariable({ defaultValue: "prod" })]);
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "prod" }),
+      ]);
 
       const select: HTMLSelectElement = await waitForOptions();
 
-      expect(optionLabels(select)).toEqual(["All", "staging"]);
-      expect(select).toHaveValue("");
+      expect(optionLabels(select)).toEqual(["All", "prod", "staging"]);
+      expect(select).toHaveValue("prod");
+      expect(select).toHaveDisplayValue("prod");
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "prod" });
     });
   });
 
@@ -477,12 +481,29 @@ describe("DashboardVariableSelector", () => {
       expect(getSelect()).toHaveValue("prod");
     });
 
-    test('a failed fetch leaves the control usable and on "All"', async () => {
+    test("a failed fetch leaves the control usable and still showing the default", async () => {
       getTelemetryAttributeValuesMock.mockRejectedValue(
         new Error("attribute values unavailable"),
       );
 
-      renderToolbar([telemetryVariable({ defaultValue: "prod" })]);
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "prod" }),
+      ]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      // No values came back, but the widgets are still filtered by "prod".
+      expect(optionLabels(select)).toEqual(["All", "prod"]);
+      expect(select).toHaveDisplayValue("prod");
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "prod" });
+    });
+
+    test("a failed fetch with no default or selection stays on All", async () => {
+      getTelemetryAttributeValuesMock.mockRejectedValue(
+        new Error("attribute values unavailable"),
+      );
+
+      renderToolbar([telemetryVariable({})]);
 
       const select: HTMLSelectElement = await waitForOptions();
 
@@ -491,6 +512,139 @@ describe("DashboardVariableSelector", () => {
     });
   });
 
+  describe("a value missing from the fetched options", () => {
+    /*
+     * The option list is not every value the attribute has: the server
+     * returns the first 100 in ascending order, from the last day only. A
+     * variable's default is free text, and a selection can come from the URL,
+     * so the value in effect can be missing from the list and still match
+     * data. The widgets filter by it regardless. The select used to have no
+     * option for it, so the browser showed the first one, "All", over widgets
+     * that were filtered.
+     */
+    const FIRST_HUNDRED: Array<string> = Array.from(
+      { length: 100 },
+      (_unused: unknown, index: number): string => {
+        return `cluster-${String(index).padStart(3, "0")}`;
+      },
+    );
+
+    test("a default past the first 100 values reads as itself, not All", async () => {
+      getTelemetryAttributeValuesMock.mockResolvedValue(FIRST_HUNDRED);
+
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "zeta" }),
+      ]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      expect(select).toHaveValue("zeta");
+      expect(select).toHaveDisplayValue("zeta");
+      expect(optionLabels(select)).toEqual(["All", "zeta", ...FIRST_HUNDRED]);
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "zeta" });
+      expect(
+        DashboardVariableInterpolation.applyToAttributes({}, state.variables),
+      ).toEqual({ [ATTRIBUTE_KEY]: "zeta" });
+    });
+
+    test("a selection missing from the options reads as itself", async () => {
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "prod", selectedValue: "zeta" }),
+      ]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      expect(select).toHaveValue("zeta");
+      expect(select).toHaveDisplayValue("zeta");
+      expect(optionLabels(select)).toEqual(["All", "zeta", "prod", "staging"]);
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "zeta" });
+    });
+
+    test("a listed value is not offered twice", async () => {
+      renderToolbar([telemetryVariable({ defaultValue: "staging" })]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      expect(optionLabels(select)).toEqual(["All", "prod", "staging"]);
+      expect(select).toHaveDisplayValue("staging");
+    });
+
+    test("the extra option goes away once the user picks something else", async () => {
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "zeta" }),
+      ]);
+
+      selectValue(await waitForOptions(), "staging");
+
+      expect(getSelect()).toHaveDisplayValue("staging");
+      expect(optionLabels(getSelect())).toEqual(["All", "prod", "staging"]);
+      expect(resolvedFilter(state.variables[0]!)).toEqual({
+        scalar: "staging",
+      });
+
+      selectValue(getSelect(), "");
+
+      expect(getSelect()).toHaveDisplayValue("All");
+      expect(optionLabels(getSelect())).toEqual(["All", "prod", "staging"]);
+      expect(resolvedFilter(state.variables[0]!)).toBeUndefined();
+    });
+
+    test("while values load it still reads Loading…, not the value", async () => {
+      let releaseValues: (values: Array<string>) => void = (): void => {
+        // Replaced synchronously by the executor below.
+      };
+
+      getTelemetryAttributeValuesMock.mockImplementation((): unknown => {
+        return new Promise<Array<string>>(
+          (resolve: (values: Array<string>) => void): void => {
+            releaseValues = resolve;
+          },
+        );
+      });
+
+      renderToolbar([telemetryVariable({ defaultValue: "zeta" })]);
+
+      expect(optionLabels(getSelect())).toEqual(["Loading…"]);
+
+      await act(async (): Promise<void> => {
+        releaseValues(OPTIONS);
+      });
+
+      expect(optionLabels(getSelect())).toEqual([
+        "All",
+        "zeta",
+        "prod",
+        "staging",
+      ]);
+      expect(getSelect()).toHaveDisplayValue("zeta");
+    });
+
+    test("a multi-select keeps and names a picked value the options do not list", async () => {
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ isMultiSelect: true, selectedValues: ["zeta"] }),
+      ]);
+
+      await waitFor((): void => {
+        expect(screen.getByRole("button")).not.toBeDisabled();
+      });
+
+      expect(screen.getByRole("button")).toHaveTextContent("zeta");
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ multi: ["zeta"] });
+
+      fireEvent.click(screen.getByRole("button"));
+      fireEvent.click(screen.getByRole("checkbox", { name: "staging" }));
+
+      // Ticking a listed value adds to the selection; "zeta" is not dropped.
+      expect(state.variables[0]!.selectedValues).toEqual(["zeta", "staging"]);
+      expect(
+        screen.getByRole("button", { name: "Cluster: 2 selected" }),
+      ).toBeInTheDocument();
+      expect(resolvedFilter(state.variables[0]!)).toEqual({
+        multi: ["zeta", "staging"],
+      });
+    });
+  });
+
   describe("custom list variables", () => {
     test("options come from the comma-separated list, trimmed", () => {
       renderToolbar([customListVariable({ defaultValue: "eu-west-1" })]);