@oneuptime/common 12.0.31 → 12.0.33

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

@@ -1,5 +1,6 @@
 import {
   afterEach,
+  beforeAll,
   beforeEach,
   describe,
   expect,
@@ -70,6 +71,12 @@ jest.mock("../../../UI/Utils/Navigation", () => {
   return {
     __esModule: true,
     default: {
+      isOnThisPage: () => {
+        return false;
+      },
+      isStartWith: () => {
+        return false;
+      },
       navigate: (...args: Array<unknown>) => {
         return navigateMock(...args);
       },
@@ -112,8 +119,8 @@ jest.mock("../../../UI/Utils/Project", () => {
 
 /*
  * 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.
+ * 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",
@@ -137,7 +144,16 @@ jest.mock(
             route: new RouteClass("/dashboard/abc123/home"),
           },
         ],
-        moreMenuItems: [],
+        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",
@@ -158,6 +174,7 @@ jest.mock(
 );
 
 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";
 
@@ -165,6 +182,19 @@ function palette(): HTMLElement | null {
   return screen.queryByTestId("command-palette");
 }
 
+function productsMenu(): HTMLElement | null {
+  return screen.queryByRole("dialog", { name: "Products menu" });
+}
+
+function renderDashboardChrome(): void {
+  render(
+    <>
+      <DashboardNavbar show={true} />
+      <DashboardCommandPalette />
+    </>,
+  );
+}
+
 /*
  * 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.
@@ -173,6 +203,11 @@ function pressChord(init: KeyboardEventInit): void {
   fireEvent.keyDown(document.body, init);
 }
 
+beforeAll(() => {
+  // The products menu keeps its keyboard selection in view when it opens.
+  Element.prototype.scrollIntoView = (): void => {};
+});
+
 beforeEach(() => {
   /*
    * The open panel schedules an enter-transition frame (rAF + fallback
@@ -264,6 +299,75 @@ describe("DashboardCommandPalette Cmd/Ctrl+K chord", () => {
   });
 });
 
+describe("dashboard Cmd/Ctrl+K ownership with the products menu mounted", () => {
+  test.each([
+    ["Cmd+K", { key: "k", metaKey: true }],
+    ["Ctrl+K", { key: "k", ctrlKey: true }],
+  ] as Array<[string, KeyboardEventInit]>)(
+    "%s opens Search only",
+    (_label: string, chord: KeyboardEventInit) => {
+      renderDashboardChrome();
+
+      pressChord(chord);
+
+      expect(palette()).toBeInTheDocument();
+      expect(productsMenu()).not.toBeInTheDocument();
+      expect(screen.getAllByRole("dialog")).toHaveLength(1);
+    },
+  );
+
+  test("the Products button still opens Products without advertising Cmd/Ctrl+K", () => {
+    renderDashboardChrome();
+
+    fireEvent.click(screen.getByRole("button", { name: /Products/i }));
+
+    const dialog: HTMLElement = screen.getByRole("dialog", {
+      name: "Products menu",
+    });
+    expect(palette()).not.toBeInTheDocument();
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
+
+    /*
+     * The dashboard surrendered this chord to Search, so Products must not
+     * leave either the visible keycaps or their screen-reader label behind.
+     */
+    const commandKKeycaps: HTMLElement[] = Array.from(
+      dialog.querySelectorAll<HTMLElement>("kbd"),
+    ).filter((keycap: HTMLElement): boolean => {
+      return keycap.textContent === "K";
+    });
+    expect(commandKKeycaps).toHaveLength(0);
+    expect(dialog).not.toHaveTextContent(/(?:Command|Control) \+ K/);
+  });
+
+  test.each([
+    ["Cmd+K", { key: "k", metaKey: true }],
+    ["Ctrl+K", { key: "k", ctrlKey: true }],
+  ] as Array<[string, KeyboardEventInit]>)(
+    "%s replaces an open Products dialog with one Search dialog",
+    (_label: string, chord: KeyboardEventInit) => {
+      renderDashboardChrome();
+      fireEvent.click(screen.getByRole("button", { name: /Products/i }));
+
+      const productsDialog: HTMLElement = screen.getByRole("dialog", {
+        name: "Products menu",
+      });
+      const productsSearch: HTMLElement = screen.getByRole("combobox", {
+        name: "navbar.search.placeholder",
+      });
+      expect(productsDialog).toBeInTheDocument();
+      expect(document.activeElement).toBe(productsSearch);
+
+      // Real keystrokes originate in the focused Products search input.
+      fireEvent.keyDown(productsSearch, chord);
+
+      expect(productsMenu()).not.toBeInTheDocument();
+      expect(palette()).toBeInTheDocument();
+      expect(screen.getAllByRole("dialog")).toHaveLength(1);
+    },
+  );
+});
+
 describe("DashboardCommandPalette global toggle event", () => {
   test("the COMMAND_PALETTE_TOGGLE event toggles the palette", () => {
     render(<DashboardCommandPalette />);

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

@@ -0,0 +1,517 @@
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import React, { act } from "react";
+import { JSONObject, ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardViewConfig from "../../../Types/Dashboard/DashboardViewConfig";
+import DefaultDashboardSize from "../../../Types/Dashboard/DashboardSize";
+import DashboardTextComponentUtil from "../../../Utils/Dashboard/Components/DashboardTextComponent";
+
+/*
+ * github.com/OneUptime/oneuptime/issues/3550.
+ *
+ * A user whose only roles were `Viewer` and `Monitor Viewer` - both read-only
+ * by definition - opened a dashboard, pressed Edit, added and removed widgets,
+ * rearranged the board and pressed Save Changes.
+ *
+ * The API was never going to accept that write: Dashboard's update ACL is
+ * [ProjectOwner, ProjectAdmin, EditDashboard] and TablePermission refuses
+ * anything else (Common/Tests/Server/.../DashboardAccessPermission.test.ts
+ * pins that). The bug was that nothing in the UI said so. The dashboard is a
+ * bespoke screen - no ModelTable, no ModelForm - so none of the generic
+ * permission gates ever ran over it, and the first and only sign of the
+ * refusal came after all the work was done. Worse, the failed save set the
+ * page-level error, which replaced the entire board with a bare message and
+ * took every unsaved widget with it.
+ *
+ * So there are two things to hold onto here, and both are asserted below:
+ *
+ *   1. A reader is turned back at the door - no Edit, no Add Widget, no Save.
+ *   2. If a save is ever refused anyway, the board and the work survive it.
+ *
+ * The suite drives the real DashboardViewer against a fake dashboard API, the
+ * way DashboardVariablesDiscard does, so what is asserted is what a person
+ * actually sees.
+ */
+
+/*
+ * Mounting the real DashboardViewer pulls in ~60 widget modules. The default
+ * 5s budget is a machine-speed check, not an assertion about this code.
+ */
+jest.setTimeout(120000);
+
+const DASHBOARD_ID: string = "33333333-3333-4333-8333-333333333333";
+
+let permissionsForTest: Array<unknown> = [];
+let isMasterAdminForTest: boolean = false;
+
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<unknown> => {
+        return permissionsForTest;
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): { globalPermissions: Array<unknown> } => {
+        return { globalPermissions: [...permissionsForTest] };
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (): boolean => {
+        return isMasterAdminForTest;
+      },
+      getUserId: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: string | undefined): string | undefined => {
+          return value;
+        },
+        translateValue: (value: unknown): unknown => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+/* The fake server's copy of the board. */
+const serverState: { dashboardViewConfig: JSONObject | null } = {
+  dashboardViewConfig: null,
+};
+
+const getItemMock: jest.Mock<any, any> = jest.fn() as jest.Mock<any, any>;
+const updateByIdMock: jest.Mock<any, any> = jest.fn() as jest.Mock<any, any>;
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<any>) => {
+        return getItemMock(...args);
+      },
+      updateById: (...args: Array<any>) => {
+        return updateByIdMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/API/API", () => {
+  return {
+    __esModule: true,
+    default: {
+      getFriendlyErrorMessage: (err: Error) => {
+        return err.message;
+      },
+      getFriendlyMessage: (err: Error) => {
+        return err.message;
+      },
+    },
+  };
+});
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics",
+  () => {
+    return {
+      __esModule: true,
+      default: {
+        loadAllMetricsTypes: () => {
+          return Promise.resolve({ metricTypes: [], telemetryAttributes: [] });
+        },
+        getTelemetryAttributes: () => {
+          return Promise.resolve([]);
+        },
+        getTelemetryAttributeValues: () => {
+          return Promise.resolve([]);
+        },
+      },
+    };
+  },
+);
+
+/*
+ * The canvas is ~60 widget implementations deep and none of them are under
+ * test here. The stub publishes the edit flag it was handed, so "is the board
+ * editable" is directly observable rather than inferred from the toolbar.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/Index",
+  () => {
+    const reactModule: typeof React = jest.requireActual(
+      "react",
+    ) as typeof React;
+    return {
+      __esModule: true,
+      default: (props: { isEditMode?: boolean | undefined }) => {
+        return reactModule.createElement("div", {
+          "data-testid": "canvas-stub",
+          "data-is-edit-mode": props.isEditMode ? "true" : "false",
+        });
+      },
+    };
+  },
+);
+
+import DashboardViewer from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardView";
+import PermissionGate from "../../../UI/Utils/PermissionGate";
+import Permission from "../../../Types/Permission";
+
+type MakeConfigFunction = () => DashboardViewConfig;
+
+const makeConfig: MakeConfigFunction = (): DashboardViewConfig => {
+  return {
+    _type: ObjectType.DashboardViewConfig,
+    components: [DashboardTextComponentUtil.getDefaultComponent()],
+    heightInDashboardUnits: DefaultDashboardSize.heightInDashboardUnits,
+  };
+};
+
+type SettleFunction = () => Promise<void>;
+
+const settle: SettleFunction = async (): Promise<void> => {
+  await act(async () => {
+    for (let turn: number = 0; turn < 5; turn++) {
+      await new Promise<void>((resolve: () => void) => {
+        setTimeout(resolve, 0);
+      });
+    }
+  });
+};
+
+type RenderDashboardFunction = () => Promise<void>;
+
+const renderDashboard: RenderDashboardFunction = async (): Promise<void> => {
+  render(<DashboardViewer dashboardId={new ObjectID(DASHBOARD_ID)} />);
+  await waitFor(() => {
+    expect(screen.getByTestId("canvas-stub")).toBeInTheDocument();
+  });
+};
+
+type OpenMoreMenuFunction = () => Promise<void>;
+
+const openMoreMenu: OpenMoreMenuFunction = async (): Promise<void> => {
+  await act(async () => {
+    fireEvent.click(screen.getByLabelText("More dashboard options"));
+  });
+};
+
+type EnterEditModeFunction = () => Promise<void>;
+
+const enterEditMode: EnterEditModeFunction = async (): Promise<void> => {
+  await openMoreMenu();
+  await act(async () => {
+    fireEvent.click(screen.getByText("Edit Dashboard"));
+  });
+};
+
+type IsCanvasEditableFunction = () => boolean;
+
+const isCanvasEditable: IsCanvasEditableFunction = (): boolean => {
+  return (
+    screen.getByTestId("canvas-stub").getAttribute("data-is-edit-mode") ===
+    "true"
+  );
+};
+
+/* The exact roles from the report. */
+const READ_ONLY_ROLES: Array<Permission> = [
+  Permission.Viewer,
+  Permission.MonitorViewer,
+];
+
+beforeEach(() => {
+  permissionsForTest = [];
+  isMasterAdminForTest = false;
+  PermissionGate.clearPermissionPropsCache();
+  serverState.dashboardViewConfig = makeConfig() as unknown as JSONObject;
+  window.history.replaceState({}, "", `/dashboard/${DASHBOARD_ID}`);
+
+  getItemMock.mockImplementation(() => {
+    return Promise.resolve({
+      dashboardViewConfig: serverState.dashboardViewConfig,
+      name: "Monitor status",
+      description: "A dashboard",
+      pageTitle: null,
+      pageDescription: null,
+    });
+  });
+
+  updateByIdMock.mockImplementation((args: any) => {
+    serverState.dashboardViewConfig = args.data
+      .dashboardViewConfig as JSONObject;
+    return Promise.resolve();
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+});
+
+describe("DashboardView - a reader cannot edit the board (issue #3550)", () => {
+  describe("a user holding only Viewer and Monitor Viewer", () => {
+    beforeEach(() => {
+      permissionsForTest = [...READ_ONLY_ROLES];
+    });
+
+    test("still sees the dashboard", async () => {
+      await renderDashboard();
+
+      expect(screen.getByTestId("canvas-stub")).toBeInTheDocument();
+      expect(screen.getAllByText("Monitor status").length).toBeGreaterThan(0);
+    });
+
+    test("is offered a locked Edit Dashboard, not a working one", async () => {
+      await renderDashboard();
+      await openMoreMenu();
+
+      const editItem: HTMLElement = screen.getByText("Edit Dashboard");
+      const editButton: HTMLElement = editItem.closest("button") as HTMLElement;
+
+      expect(editButton).toBeDisabled();
+    });
+
+    test("is told which permission the Edit would need", async () => {
+      await renderDashboard();
+      await openMoreMenu();
+
+      const editButton: HTMLElement = screen
+        .getByText("Edit Dashboard")
+        .closest("button") as HTMLElement;
+
+      fireEvent.mouseEnter(editButton.parentElement as HTMLElement);
+
+      const tooltip: HTMLElement = screen.getByRole("tooltip");
+
+      expect(tooltip).toHaveTextContent(
+        "You do not have permission to update this Dashboard.",
+      );
+      /* The human title, not the raw `EditDashboard` enum value. */
+      expect(tooltip).toHaveTextContent("Edit Dashboard");
+      expect(tooltip).toHaveTextContent("Project Admin");
+    });
+
+    /*
+     * The heart of the report. Clicking through must not put the board into
+     * edit mode, because everything downstream of edit mode - Add Widget,
+     * drag, resize, Save Changes - ends in a refused write.
+     */
+    test("cannot get the board into edit mode by clicking the locked item", async () => {
+      await renderDashboard();
+      await enterEditMode();
+
+      expect(isCanvasEditable()).toBe(false);
+      expect(screen.queryByText("Save Changes")).not.toBeInTheDocument();
+      expect(screen.queryByText("Add Widget")).not.toBeInTheDocument();
+      expect(screen.queryByText("Editing")).not.toBeInTheDocument();
+    });
+
+    test("never reaches the update endpoint", async () => {
+      await renderDashboard();
+      await enterEditMode();
+      await settle();
+
+      expect(updateByIdMock).not.toHaveBeenCalled();
+    });
+
+    /*
+     * View-mode affordances are untouched: this is about writing to the
+     * board, not about looking at it.
+     */
+    test("keeps the read-only tools it is entitled to", async () => {
+      await renderDashboard();
+      await openMoreMenu();
+
+      expect(screen.getByText("Full Screen")).toBeInTheDocument();
+    });
+  });
+
+  describe("a user holding Edit Dashboard", () => {
+    beforeEach(() => {
+      permissionsForTest = [Permission.Viewer, Permission.EditDashboard];
+    });
+
+    test("gets a working Edit Dashboard", async () => {
+      await renderDashboard();
+      await openMoreMenu();
+
+      expect(
+        screen.getByText("Edit Dashboard").closest("button"),
+      ).not.toBeDisabled();
+    });
+
+    test("can put the board into edit mode and save it", async () => {
+      await renderDashboard();
+      await enterEditMode();
+
+      expect(isCanvasEditable()).toBe(true);
+      expect(screen.getByText("Save Changes")).toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.click(screen.getByText("Save Changes"));
+      });
+      await settle();
+
+      expect(updateByIdMock).toHaveBeenCalledTimes(1);
+      expect(isCanvasEditable()).toBe(false);
+    });
+  });
+
+  /*
+   * Dashboard is @OperationalResource, so the server's table-level check
+   * accepts the EditAllOperationalResources wildcard for it even though the
+   * model's ACL does not enumerate it. A gate that did not know that would
+   * lock the editor for somebody the API would have let through.
+   */
+  describe("a user holding only the operational-resource wildcard", () => {
+    beforeEach(() => {
+      permissionsForTest = [
+        Permission.Viewer,
+        Permission.EditAllOperationalResources,
+      ];
+    });
+
+    test("can edit the board", async () => {
+      await renderDashboard();
+      await enterEditMode();
+
+      expect(isCanvasEditable()).toBe(true);
+    });
+  });
+
+  /*
+   * The permission snapshot arrives on a response header, so it is empty for
+   * the first paint after a login and for a beat after a project switch.
+   * Telling a project owner they need a permission they hold is worse than
+   * briefly not offering the button - PermissionGate's documented contract.
+   */
+  describe("before the permission snapshot has landed", () => {
+    test("hides Edit Dashboard rather than accusing the user", async () => {
+      permissionsForTest = [];
+
+      await renderDashboard();
+      await openMoreMenu();
+
+      expect(screen.queryByText("Edit Dashboard")).not.toBeInTheDocument();
+      /* The rest of the menu still works. */
+      expect(screen.getByText("Full Screen")).toBeInTheDocument();
+    });
+  });
+
+  describe("a master admin", () => {
+    test("is allowed everything, snapshot or not", async () => {
+      permissionsForTest = [];
+      isMasterAdminForTest = true;
+
+      await renderDashboard();
+      await enterEditMode();
+
+      expect(isCanvasEditable()).toBe(true);
+    });
+  });
+
+  /*
+   * The second half of the damage. Even for somebody who IS allowed to edit,
+   * a save can fail - a revoked permission, a lost connection, a conflict.
+   * That used to drop straight back to view mode and swap the whole board for
+   * a bare error, so the user could not tell a refused save from a successful
+   * one and lost every unsaved widget either way.
+   */
+  describe("when a save is refused", () => {
+    beforeEach(() => {
+      permissionsForTest = [Permission.Viewer, Permission.EditDashboard];
+      updateByIdMock.mockImplementation(() => {
+        return Promise.reject(
+          new Error(
+            "You do not have permissions to update Dashboard. You need one of these permissions: Project Owner, Project Admin, Edit Dashboard",
+          ),
+        );
+      });
+    });
+
+    test("says so instead of looking like it worked", async () => {
+      await renderDashboard();
+      await enterEditMode();
+
+      await act(async () => {
+        fireEvent.click(screen.getByText("Save Changes"));
+      });
+      await settle();
+
+      expect(
+        screen.getByText(/You do not have permissions to update Dashboard/),
+      ).toBeInTheDocument();
+    });
+
+    test("keeps the user in edit mode with the board still on screen", async () => {
+      await renderDashboard();
+      await enterEditMode();
+
+      await act(async () => {
+        fireEvent.click(screen.getByText("Save Changes"));
+      });
+      await settle();
+
+      expect(screen.getByTestId("canvas-stub")).toBeInTheDocument();
+      expect(isCanvasEditable()).toBe(true);
+      expect(screen.getByText("Save Changes")).toBeInTheDocument();
+    });
+
+    test("lets the user try again once the cause is gone", async () => {
+      await renderDashboard();
+      await enterEditMode();
+
+      await act(async () => {
+        fireEvent.click(screen.getByText("Save Changes"));
+      });
+      await settle();
+
+      updateByIdMock.mockImplementation(() => {
+        return Promise.resolve();
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.getByText("Save Changes"));
+      });
+      await settle();
+
+      expect(isCanvasEditable()).toBe(false);
+      expect(
+        screen.queryByText(/You do not have permissions to update Dashboard/),
+      ).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -69,6 +69,32 @@ const serverState: { dashboardViewConfig: JSONObject | null } = {
 const getItemMock: jest.Mock<any, any> = jest.fn() as jest.Mock<any, any>;
 const updateByIdMock: jest.Mock<any, any> = jest.fn() as jest.Mock<any, any>;
 
+/*
+ * Editing the board is permission-gated (issue #3550), so the toolbar only
+ * offers "Edit Dashboard" to somebody who may write to it. These tests are
+ * about variables, not permissions, so they run as a user who can edit.
+ */
+jest.mock("../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      /*
+       * Permission.ProjectAdmin - a literal, because a jest.mock factory is
+       * hoisted above the imports and cannot close over the enum.
+       */
+      getAllPermissions: (): Array<string> => {
+        return ["ProjectAdmin"];
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
 jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
   return {
     __esModule: true,