@oneuptime/common 12.0.30 → 12.0.32

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

@@ -0,0 +1,341 @@
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+/*
+ * Two sentences a table shows constantly, both of which used to say less than
+ * they knew.
+ *
+ * The per-row delete confirmation said "Are you sure you want to delete this
+ * monitor?" - equally true of the row that was clicked and of the twenty
+ * either side of it, which is exactly the wrong moment to be vague. The table
+ * has the row in hand when it renders that dialog.
+ *
+ * And an empty table said "No monitor" whether the project had nothing in it
+ * or a search had simply missed, so a typo in the search box was
+ * indistinguishable from an empty account.
+ */
+
+jest.mock("../../../../UI/Utils/Permission", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllPermissions: (): Array<unknown> => {
+        return [];
+      },
+      getProjectPermissions: (): null => {
+        return null;
+      },
+      getGlobalPermissions: (): null => {
+        return null;
+      },
+    },
+  };
+});
+
+jest.mock("../../../../UI/Utils/User", () => {
+  return {
+    __esModule: true,
+    default: {
+      isMasterAdmin: (): boolean => {
+        return true;
+      },
+      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;
+        },
+      };
+    },
+  };
+});
+
+import BaseModelTable, {
+  BaseTableCallbacks,
+  ComponentProps as BaseModelTableProps,
+} from "../../../../UI/Components/ModelTable/BaseModelTable";
+import TableFilterUrlState from "../../../../UI/Utils/TableFilterUrlState";
+import PermissionGate from "../../../../UI/Utils/PermissionGate";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import Monitor from "../../../../Models/DatabaseModels/Monitor";
+import Incident from "../../../../Models/DatabaseModels/Incident";
+import ListResult from "../../../../Types/BaseDatabase/ListResult";
+import { JSONObject } from "../../../../Types/JSON";
+
+const MONITOR_ROWS: Array<JSONObject> = [
+  { _id: "monitor-1", name: "Checkout API", description: "Payments" },
+  { _id: "monitor-2", name: "Billing Worker", description: "Invoices" },
+];
+
+// Incidents key on `title`, not `name` - the deriver has to know both.
+const INCIDENT_ROWS: Array<JSONObject> = [
+  { _id: "incident-1", title: "Checkout is down", description: "Sev1" },
+];
+
+// Neither `name` nor `title`, so the generic wording has to survive.
+const UNNAMED_ROWS: Array<JSONObject> = [
+  { _id: "monitor-9", description: "No name on this one" },
+];
+
+interface TableOptions {
+  rows?: Array<JSONObject> | undefined;
+  initialFilterData?: JSONObject | undefined;
+  nameColumnTitle?: string | undefined;
+  nameColumnField?: string | undefined;
+  singularName?: string | undefined;
+  pluralName?: string | undefined;
+  noItemsMessage?: string | undefined;
+}
+
+type MakePropsFunction = (
+  options: TableOptions,
+) => BaseModelTableProps<Monitor>;
+
+const makeProps: MakePropsFunction = (
+  options: TableOptions,
+): BaseModelTableProps<Monitor> => {
+  const rows: Array<JSONObject> = options.rows ?? MONITOR_ROWS;
+
+  const callbacks: BaseTableCallbacks<Monitor> = {
+    deleteItem: async (): Promise<void> => {
+      return undefined;
+    },
+    getModelFromJSON: (item: JSONObject): Monitor => {
+      return item as unknown as Monitor;
+    },
+    getJSONFromModel: (item: Monitor): JSONObject => {
+      return item as unknown as JSONObject;
+    },
+    addSlugToSelect: (select: unknown): unknown => {
+      return select;
+    },
+    getList: async (data: {
+      skip: number;
+      limit: number;
+    }): Promise<ListResult<Monitor>> => {
+      return {
+        data: rows as unknown as Array<Monitor>,
+        count: rows.length,
+        skip: data.skip,
+        limit: data.limit,
+      };
+    },
+    toJSONArray: (): Array<JSONObject> => {
+      return [];
+    },
+    updateById: async (): Promise<void> => {
+      return undefined;
+    },
+    showCreateEditModal: (): React.ReactElement => {
+      return <div data-testid="create-edit-modal" />;
+    },
+  } as unknown as BaseTableCallbacks<Monitor>;
+
+  return {
+    modelType: options.nameColumnField === "title" ? Incident : Monitor,
+    id: "monitors-table",
+    name: "Monitors",
+    singularName: options.singularName ?? "Monitor",
+    pluralName: options.pluralName ?? "Monitors",
+    userPreferencesKey: "monitors-delete-table",
+    urlStateKey: "monitors-delete-table",
+    columns: [
+      {
+        field: { [options.nameColumnField ?? "name"]: true },
+        title: options.nameColumnTitle ?? "Name",
+        type: FieldType.Text,
+      },
+      {
+        field: { description: true },
+        title: "Description",
+        type: FieldType.LongText,
+      },
+    ],
+    filters: [],
+    cardProps: { title: "Monitors", description: "All monitors" },
+    isCreateable: false,
+    isEditable: false,
+    isDeleteable: true,
+    isViewable: false,
+    noItemsMessage: options.noItemsMessage,
+    initialFilterData: options.initialFilterData,
+    callbacks: callbacks,
+  } as unknown as BaseModelTableProps<Monitor>;
+};
+
+type RenderTableFunction = (
+  options?: TableOptions | undefined,
+) => ReturnType<typeof render>;
+
+const renderTable: RenderTableFunction = (
+  options?: TableOptions | undefined,
+): ReturnType<typeof render> => {
+  return render(<BaseModelTable<Monitor> {...makeProps(options || {})} />);
+};
+
+type FindButtonsFunction = (label: string) => Array<HTMLButtonElement>;
+
+const findButtons: FindButtonsFunction = (
+  label: string,
+): Array<HTMLButtonElement> => {
+  return Array.from(
+    document.querySelectorAll<HTMLButtonElement>("button"),
+  ).filter((button: HTMLButtonElement) => {
+    return (button.textContent || "").trim().startsWith(label);
+  });
+};
+
+beforeEach(() => {
+  PermissionGate.clearPermissionPropsCache();
+  window.history.replaceState(window.history.state, "", "/dashboard/monitors");
+  TableFilterUrlState.resetClaimedKeys();
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+describe("per-row delete confirmation", () => {
+  test("names the row that was clicked", async () => {
+    renderTable();
+
+    await waitFor(() => {
+      expect(findButtons("Delete").length).toBeGreaterThan(0);
+    });
+
+    // Second row, to prove the dialog follows the click and not the first row.
+    fireEvent.click(findButtons("Delete")[1]!);
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId("confirm-modal-description"),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      'Are you sure you want to delete "Billing Worker"?',
+    );
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      "This action cannot be undone",
+    );
+  });
+
+  test("uses a title-keyed row's title", async () => {
+    renderTable({
+      rows: INCIDENT_ROWS,
+      nameColumnField: "title",
+      nameColumnTitle: "Title",
+      singularName: "Incident",
+      pluralName: "Incidents",
+    });
+
+    await waitFor(() => {
+      expect(findButtons("Delete").length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(findButtons("Delete")[0]!);
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId("confirm-modal-description"),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      'Are you sure you want to delete "Checkout is down"?',
+    );
+  });
+
+  test("falls back to the generic wording when the row has no name to give", async () => {
+    renderTable({ rows: UNNAMED_ROWS });
+
+    await waitFor(() => {
+      expect(findButtons("Delete").length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(findButtons("Delete")[0]!);
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId("confirm-modal-description"),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("confirm-modal-description")).toHaveTextContent(
+      "Are you sure you want to delete this monitor?",
+    );
+  });
+});
+
+describe("empty table message", () => {
+  test('says "yet", pluralised, when there is simply nothing here', async () => {
+    renderTable({ rows: [] });
+
+    await waitFor(() => {
+      expect(screen.getByText("No monitors yet.")).toBeInTheDocument();
+    });
+  });
+
+  test("still lets a caller supply its own empty-state copy", async () => {
+    renderTable({ rows: [], noItemsMessage: "Connect your first monitor." });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("Connect your first monitor."),
+      ).toBeInTheDocument();
+    });
+  });
+
+  /*
+   * The other half of the same branch: an active filter means the emptiness is
+   * the filter's doing, not the project's, and the caller's "create your first
+   * one" copy would be the wrong thing to offer someone whose filter just
+   * missed.
+   */
+  test("says the filter missed, when a filter is applied", async () => {
+    renderTable({
+      rows: [],
+      initialFilterData: { name: "nothing-matches-this" },
+      noItemsMessage: "Connect your first monitor.",
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("No monitors match your search or filters."),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByText("Connect your first monitor."),
+    ).not.toBeInTheDocument();
+  });
+});

package/Tests/UI/Components/ModelTable/ColumnPreference.test.ts

@@ -1675,4 +1675,93 @@ describe("a stored layout replayed against a changed column set", () => {
     expect(rendered).toHaveLength(4);
     expect(titlesOf(rendered)).toEqual(["Name", "Actions", "Actions", ""]);
   });
+
+  test("a layout saved against a column set missing a default-hidden column switches it back off", () => {
+    /*
+     * A column set changes between surfaces, not just between releases: the
+     * same table component is embedded on a detail page with one column
+     * spliced out (there is no point showing "Template" on the template's own
+     * page). If both surfaces persist under one storage key, the narrow one
+     * writes the layout for the wide one.
+     *
+     * buildColumnPreference records only what the picker was showing, so the
+     * spliced-out id lands in neither `order` nor `hidden` — and reading it
+     * back falls through to the column's DECLARED default.
+     *
+     * That fallback is why this stayed invisible until now, and why it is the
+     * hazard the moment a column ships hidden: a dropped column that defaults
+     * to visible is restored by accident, so nobody ever noticed the drop,
+     * while a dropped column that defaults to hidden silently un-picks the one
+     * choice the viewer made — and the picker is the only way back to it. A
+     * table embedded on a second surface must therefore key its stored layout
+     * per surface; this is the loss it is avoiding.
+     */
+    const fullColumns: Columns<Monitor> = [
+      makeColumn({
+        field: { name: true },
+        title: "Name",
+        isNotCustomizable: true,
+      }),
+      makeColumn({ field: { description: true }, title: "Description" }),
+      makeColumn({
+        field: { monitorTemplate: { _id: true, templateName: true } },
+        title: "Template",
+        isHiddenByDefault: true,
+      }),
+      makeColumn({ field: { labels: true }, title: "Labels" }),
+    ];
+
+    // The embedded surface drops the default-hidden column and one other.
+    const scopedColumns: Columns<Monitor> = fullColumns.filter(
+      (column: Column<Monitor>): boolean => {
+        return column.title !== "Template" && column.title !== "Labels";
+      },
+    );
+
+    // The viewer switches Template on from the full table and saves.
+    const preferenceA: ColumnPreference = buildColumnPreference<Monitor>(
+      getCustomizableColumns<Monitor>({
+        columns: fullColumns,
+        preference: {
+          order: ["description", "monitorTemplate", "labels"],
+          hidden: [],
+        },
+      }),
+    );
+
+    expect(
+      findEntry(
+        getCustomizableColumns<Monitor>({
+          columns: fullColumns,
+          preference: preferenceA,
+        }),
+        "monitorTemplate",
+      ).isVisible,
+    ).toBe(true);
+
+    /*
+     * Now the picker is saved from the embedded surface without the viewer
+     * changing anything there.
+     */
+    const preferenceB: ColumnPreference = buildColumnPreference<Monitor>(
+      getCustomizableColumns<Monitor>({
+        columns: scopedColumns,
+        preference: preferenceA,
+      }),
+    );
+
+    expect(preferenceB.order).not.toContain("monitorTemplate");
+    expect(preferenceB.hidden).not.toContain("monitorTemplate");
+
+    const replayed: Array<CustomizableColumn<Monitor>> =
+      getCustomizableColumns<Monitor>({
+        columns: fullColumns,
+        preference: preferenceB,
+      });
+
+    // The viewer's one opt-in is gone...
+    expect(findEntry(replayed, "monitorTemplate").isVisible).toBe(false);
+    // ...while a column dropped exactly the same way comes back unharmed.
+    expect(findEntry(replayed, "labels").isVisible).toBe(true);
+  });
 });

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

@@ -1,10 +1,12 @@
 /*
  * The dashboard's command palette owns Cmd/Ctrl+K, so the NavBar grew a
- * `disableCommandKShortcut` prop that stops it registering its own document
- * keydown for the products menu. These tests pin the contract in BOTH
- * directions: with the prop the menu must NOT open on Cmd+K (or the palette
- * and the menu would double-fire on one keystroke), and without the prop the
- * legacy shortcut must keep working for every other NavBar consumer.
+ * `disableCommandKShortcut` prop that surrenders the chord to the dashboard
+ * command palette. These tests pin the contract in BOTH directions: with the
+ * prop the menu must NOT open or advertise Cmd+K (or the two surfaces would
+ * claim the same shortcut), and without the prop the legacy shortcut must
+ * keep working for every other NavBar consumer. An already-open products menu
+ * still listens just long enough to close without consuming the palette's
+ * keydown, preventing two modal dialogs from being stacked.
  */
 
 /*
@@ -98,6 +100,10 @@ function pressCommandK(): void {
   fireEvent.keyDown(document, { key: "k", metaKey: true });
 }
 
+function commandKHint(): HTMLElement | null {
+  return screen.queryByText(/^(Command|Control) \+ K$/);
+}
+
 describe("NavBar Cmd/Ctrl+K gating", () => {
   afterEach(() => {
     cleanup();
@@ -110,6 +116,7 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
 
     pressCommandK();
     expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(commandKHint()).toBeInTheDocument();
 
     // And the same chord closes it again — it is a toggle, not just an opener.
     pressCommandK();
@@ -138,7 +145,7 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
-  test("with disableCommandKShortcut, the menu still opens from its trigger button", () => {
+  test("with disableCommandKShortcut, the menu still opens from its trigger button without advertising Cmd/Ctrl+K", () => {
     /*
      * Disabling the shortcut must not disable the menu: the button path is the
      * remaining way in, so it has to keep working.
@@ -153,6 +160,94 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
 
     fireEvent.click(screen.getByText("Products"));
     expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(commandKHint()).not.toBeInTheDocument();
+  });
+
+  test("with disableCommandKShortcut, Cmd+K closes an already-open products menu without consuming the palette's event", () => {
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Products"));
+    expect(screen.getByRole("dialog", { name: "Products menu" })).toBeVisible();
+
+    const defaultAllowed: boolean = fireEvent.keyDown(document, {
+      key: "k",
+      metaKey: true,
+    });
+
+    expect(defaultAllowed).toBe(true);
+    expect(
+      screen.queryByRole("dialog", { name: "Products menu" }),
+    ).not.toBeInTheDocument();
+  });
+
+  test("the enabled products shortcut ignores extra modifiers and a chord claimed by an earlier handler", () => {
+    render(<Navbar items={[homeItem]} moreMenuItems={moreMenuItems} />);
+
+    fireEvent.keyDown(document, { key: "k", metaKey: true, shiftKey: true });
+    fireEvent.keyDown(document, { key: "k", ctrlKey: true, altKey: true });
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    const claimChord: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", claimChord, { capture: true });
+
+    try {
+      pressCommandK();
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    } finally {
+      window.removeEventListener("keydown", claimChord, { capture: true });
+    }
+
+    pressCommandK();
+    expect(screen.getByRole("dialog", { name: "Products menu" })).toBeVisible();
+  });
+
+  test("a NavBar without a products menu leaves Cmd+K untouched", () => {
+    render(<Navbar items={[homeItem]} />);
+
+    const defaultAllowed: boolean = fireEvent.keyDown(document, {
+      key: "k",
+      metaKey: true,
+    });
+
+    expect(defaultAllowed).toBe(true);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  test("the close-only listener dismisses Products even when the shortcut owner ran first", () => {
+    render(
+      <Navbar
+        items={[homeItem]}
+        moreMenuItems={moreMenuItems}
+        disableCommandKShortcut={true}
+      />,
+    );
+    fireEvent.click(screen.getByText("Products"));
+
+    const claimChord: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", claimChord, { capture: true });
+
+    try {
+      pressCommandK();
+      expect(
+        screen.queryByRole("dialog", { name: "Products menu" }),
+      ).not.toBeInTheDocument();
+    } finally {
+      window.removeEventListener("keydown", claimChord, { capture: true });
+    }
   });
 
   test("with disableCommandKShortcut, Cmd+K's default is not prevented (the palette may claim it)", () => {
@@ -166,8 +261,8 @@ describe("NavBar Cmd/Ctrl+K gating", () => {
 
     /*
      * fireEvent returns false when some handler called preventDefault. With
-     * the NavBar listener unregistered, nothing here may swallow the chord —
-     * the whole point is leaving it free for the command palette's handler.
+     * Products closed, no close-only listener is needed and nothing here may
+     * swallow the chord — the palette is free to claim it.
      */
     const defaultAllowed: boolean = fireEvent.keyDown(document, {
       key: "k",

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

@@ -88,7 +88,7 @@ describe("OrderedSateList", () => {
       onRefreshClick: jest.fn(),
     };
     render(<OrderedStatesList {...props} />);
-    const refreshButton: HTMLElement = screen.getByRole("refresh-button");
+    const refreshButton: HTMLElement = screen.getByTestId("refresh-button");
     refreshButton.click();
     expect(props.onRefreshClick).toHaveBeenCalled();
   });
@@ -110,8 +110,8 @@ describe("OrderedSateList", () => {
     };
     render(<OrderedStatesList {...props} />);
     expect(screen.getByText("Failed to load data")).toBeInTheDocument();
-    expect(screen.getByRole("refresh-button")).toBeInTheDocument();
-    screen.getByRole("refresh-button").click();
+    expect(screen.getByTestId("refresh-button")).toBeInTheDocument();
+    screen.getByTestId("refresh-button").click();
     expect(props.onRefreshClick).toHaveBeenCalled();
   });
   it("renders ErrorMessage with default message and callback when data is empty and noItemsMessage is not defined", () => {
@@ -125,8 +125,8 @@ describe("OrderedSateList", () => {
     expect(
       screen.getByText(`No ${props.singularLabel.toLowerCase()}`),
     ).toBeInTheDocument();
-    expect(screen.getByRole("refresh-button")).toBeInTheDocument();
-    screen.getByRole("refresh-button").click();
+    expect(screen.getByTestId("refresh-button")).toBeInTheDocument();
+    screen.getByTestId("refresh-button").click();
     expect(props.onRefreshClick).toHaveBeenCalled();
   });
   it("should render custom title element provided by getTitleElement function", () => {

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

@@ -901,7 +901,7 @@ describe("PendingProjectInvitations", () => {
         expect(screen.getByTestId("invitations-error")).toBeInTheDocument();
       });
 
-      fireEvent.click(screen.getByRole("refresh-button"));
+      fireEvent.click(screen.getByTestId("refresh-button"));
 
       await waitFor(() => {
         expect(getInvitationCards()).toHaveLength(1);

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

@@ -135,6 +135,36 @@ describe("Side Menu Item", () => {
     expect(mainLink).toHaveClass(highlightClassList);
   });
 
+  it("Should use activeRoute for highlighting without changing the link target", () => {
+    const linkTarget: Route = new Route("/network/map?site=");
+    const activeRoute: Route = new Route("/network/map");
+
+    Navigation.default.isOnThisPage = getJestMockFunction().mockImplementation(
+      (route: Route): boolean => {
+        return route === activeRoute;
+      },
+    );
+
+    render(
+      <SideMenuItem
+        link={{ title: "Network Map", to: linkTarget }}
+        activeRoute={activeRoute}
+      />,
+    );
+
+    const mainLink: HTMLAnchorElement = screen
+      .getByText("Network Map")
+      .closest("a") as HTMLAnchorElement;
+
+    expect(Navigation.default.isOnThisPage).toHaveBeenCalledWith(activeRoute);
+    expect(mainLink).toHaveClass(highlightClassList);
+    expect(mainLink).toHaveAttribute("href", linkTarget.toString());
+
+    fireEvent.click(mainLink);
+
+    expect(Navigation.default.navigate).toHaveBeenCalledWith(linkTarget);
+  });
+
   it("Should highlights sub item link when on the same page", () => {
     const subLink: {
       title: string;