@oneuptime/common 14.0.13 → 14.0.14

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

@@ -0,0 +1,359 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react";
+import React, { ReactElement, useState } from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import { getJestSpyOn } from "../../Spy";
+
+/*
+ * The dashboard reads Monitor Groups off the project it has selected (the
+ * Monitors menu's Monitor Groups page, a status page's Resources item), and
+ * the switch on Settings > Feature Flags saves it without a reload. So the
+ * dashboard follows the switch's saves (Utils/SelectedProjectSwitches and
+ * UseSelectedProjectSwitches, wired in App.tsx): a save for the selected
+ * project swaps in a copy of it with the new value, and the menus follow at
+ * once. The Edit dialog this replaced reloaded the whole dashboard instead.
+ */
+
+const getItemMock: MockFunction = getJestMockFunction();
+const updateByIdMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<unknown>): unknown => {
+        return getItemMock(...args);
+      },
+      updateById: (...args: Array<unknown>): unknown => {
+        return updateByIdMock(...args);
+      },
+    },
+  };
+});
+
+import {
+  followSelectedProjectSwitches,
+  getProjectWithSwitchedColumn,
+  SELECTED_PROJECT_SWITCH_COLUMNS,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/SelectedProjectSwitches";
+import useSelectedProjectSwitches from "../../../../App/FeatureSet/Dashboard/src/Utils/UseSelectedProjectSwitches";
+import MonitorGroupsSwitchCard from "../../../../App/FeatureSet/Dashboard/src/Components/MonitorGroup/MonitorGroupsSwitchCard";
+import {
+  MONITOR_GROUPS_SWITCH_COLUMN,
+  MONITOR_GROUPS_SWITCH_TEST_ID,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/MonitorGroup/MonitorGroupsSwitchCopy";
+import Project from "../../../Models/DatabaseModels/Project";
+import ObjectID from "../../../Types/ObjectID";
+import { announceModelSwitchSaved } from "../../../UI/Components/ModelSwitch/ModelSwitchEvents";
+import PermissionGate, {
+  PermissionGateResult,
+} from "../../../UI/Utils/PermissionGate";
+import ProjectUtil from "../../../UI/Utils/Project";
+
+const PROJECT_ID: string = "5e5e5e5e-0000-4000-8000-0000000000cc";
+const OTHER_PROJECT_ID: string = "6f6f6f6f-0000-4000-8000-0000000000dd";
+
+function makeProject(id: string, monitorGroups?: boolean): Project {
+  const project: Project = new Project();
+  project._id = id;
+  project.name = "Acme";
+  project.paymentProviderPlanId = "plan_growth";
+
+  if (monitorGroups !== undefined) {
+    project.isFeatureFlagMonitorGroupsEnabled = monitorGroups;
+  }
+
+  return project;
+}
+
+function announce(data: {
+  projectId: string;
+  column?: string | undefined;
+  value: boolean;
+}): void {
+  act(() => {
+    announceModelSwitchSaved({
+      modelType: Project,
+      modelId: new ObjectID(data.projectId),
+      column: data.column || MONITOR_GROUPS_SWITCH_COLUMN,
+      value: data.value,
+    });
+  });
+}
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+describe("the columns the menus read off the selected project", () => {
+  test("are Monitor Groups, the one the project list selects for the menus", () => {
+    expect(SELECTED_PROJECT_SWITCH_COLUMNS).toEqual([
+      "isFeatureFlagMonitorGroupsEnabled",
+    ]);
+  });
+
+  test("a copy with the column switched keeps every other column, and is a new object", () => {
+    const project: Project = makeProject(PROJECT_ID, false);
+
+    const updated: Project = getProjectWithSwitchedColumn({
+      project: project,
+      column: MONITOR_GROUPS_SWITCH_COLUMN,
+      value: true,
+    });
+
+    expect(updated).not.toBe(project);
+    expect(updated).toBeInstanceOf(Project);
+    expect(updated.isFeatureFlagMonitorGroupsEnabled).toBe(true);
+    expect(updated._id?.toString()).toBe(PROJECT_ID);
+    expect(updated.name).toBe("Acme");
+    expect(updated.paymentProviderPlanId).toBe("plan_growth");
+
+    // The selected project itself is not changed under the dashboard.
+    expect(project.isFeatureFlagMonitorGroupsEnabled).toBe(false);
+  });
+});
+
+describe("following the switches' saves", () => {
+  test("hears a save of a selected-project column for this project, and only that", () => {
+    const heard: Array<string> = [];
+
+    const unsubscribe: () => void = followSelectedProjectSwitches({
+      projectId: new ObjectID(PROJECT_ID),
+      onSaved: (column: string, value: boolean): void => {
+        heard.push(`${column}=${value}`);
+      },
+    });
+
+    announce({ projectId: PROJECT_ID, value: true });
+    announce({ projectId: OTHER_PROJECT_ID, value: true });
+    announce({
+      projectId: PROJECT_ID,
+      column: "letCustomerSupportAccessProject",
+      value: true,
+    });
+
+    expect(heard).toEqual(["isFeatureFlagMonitorGroupsEnabled=true"]);
+
+    unsubscribe();
+
+    announce({ projectId: PROJECT_ID, value: false });
+
+    expect(heard).toEqual(["isFeatureFlagMonitorGroupsEnabled=true"]);
+  });
+});
+
+describe("useSelectedProjectSwitches", () => {
+  test("hands back the selected project with the saved value, as a new project", () => {
+    const updates: Array<Project> = [];
+    const selected: Project = makeProject(PROJECT_ID, false);
+
+    renderHook(() => {
+      useSelectedProjectSwitches({
+        selectedProject: selected,
+        onProjectUpdated: (project: Project): void => {
+          updates.push(project);
+        },
+      });
+    });
+
+    announce({ projectId: PROJECT_ID, value: true });
+
+    expect(updates).toHaveLength(1);
+    expect(updates[0]).not.toBe(selected);
+    expect(updates[0]!.isFeatureFlagMonitorGroupsEnabled).toBe(true);
+    expect(updates[0]!.name).toBe("Acme");
+  });
+
+  test("a second save before the next render builds on the first", () => {
+    const updates: Array<Project> = [];
+
+    renderHook(() => {
+      useSelectedProjectSwitches({
+        selectedProject: makeProject(PROJECT_ID, false),
+        onProjectUpdated: (project: Project): void => {
+          updates.push(project);
+        },
+      });
+    });
+
+    act(() => {
+      announceModelSwitchSaved({
+        modelType: Project,
+        modelId: new ObjectID(PROJECT_ID),
+        column: MONITOR_GROUPS_SWITCH_COLUMN,
+        value: true,
+      });
+      announceModelSwitchSaved({
+        modelType: Project,
+        modelId: new ObjectID(PROJECT_ID),
+        column: MONITOR_GROUPS_SWITCH_COLUMN,
+        value: false,
+      });
+    });
+
+    expect(
+      updates.map((project: Project): boolean | undefined => {
+        return project.isFeatureFlagMonitorGroupsEnabled;
+      }),
+    ).toEqual([true, false]);
+    expect(updates[1]!.name).toBe("Acme");
+  });
+
+  test("ignores another project's saves, and stops listening for a project no longer selected", () => {
+    const updates: Array<Project> = [];
+    const onProjectUpdated: (project: Project) => void = (
+      project: Project,
+    ): void => {
+      updates.push(project);
+    };
+
+    interface HookProps {
+      selectedProject: Project | null;
+    }
+
+    const initialProps: HookProps = {
+      selectedProject: makeProject(PROJECT_ID, false),
+    };
+
+    const { rerender } = renderHook(
+      (props: HookProps) => {
+        useSelectedProjectSwitches({
+          selectedProject: props.selectedProject,
+          onProjectUpdated: onProjectUpdated,
+        });
+      },
+      { initialProps: initialProps },
+    );
+
+    announce({ projectId: OTHER_PROJECT_ID, value: true });
+
+    expect(updates).toEqual([]);
+
+    rerender({ selectedProject: makeProject(OTHER_PROJECT_ID, false) });
+
+    announce({ projectId: PROJECT_ID, value: true });
+
+    expect(updates).toEqual([]);
+
+    announce({ projectId: OTHER_PROJECT_ID, value: true });
+
+    expect(updates).toHaveLength(1);
+    expect(updates[0]!._id?.toString()).toBe(OTHER_PROJECT_ID);
+
+    rerender({ selectedProject: null });
+
+    announce({ projectId: OTHER_PROJECT_ID, value: false });
+
+    expect(updates).toHaveLength(1);
+  });
+});
+
+describe("the Monitor Groups switch and the menus", () => {
+  beforeEach(() => {
+    getItemMock.mockReset();
+    getItemMock.mockImplementation(async (): Promise<Project> => {
+      return makeProject(PROJECT_ID, false);
+    });
+
+    updateByIdMock.mockReset();
+    updateByIdMock.mockImplementation(async (): Promise<unknown> => {
+      return {};
+    });
+
+    getJestSpyOn(PermissionGate, "checkColumnUpdate").mockImplementation(
+      (): PermissionGateResult => {
+        return { isAllowed: true };
+      },
+    );
+    getJestSpyOn(ProjectUtil, "getCurrentPlan").mockReturnValue(null);
+  });
+
+  /*
+   * A stand-in for App.tsx and the Monitors menu: the selected project in
+   * state, followed by the hook, and a menu that shows Monitor Groups when
+   * the project has them on - the way Pages/Monitor/SideMenu reads it.
+   */
+  const Dashboard: () => ReactElement = (): ReactElement => {
+    const [selectedProject, setSelectedProject] = useState<Project | null>(
+      makeProject(PROJECT_ID, false),
+    );
+
+    useSelectedProjectSwitches({
+      selectedProject: selectedProject,
+      onProjectUpdated: setSelectedProject,
+    });
+
+    return (
+      <div>
+        <nav data-testid="monitors-menu">
+          All Monitors
+          {selectedProject?.isFeatureFlagMonitorGroupsEnabled
+            ? " | Monitor Groups"
+            : ""}
+        </nav>
+        <MonitorGroupsSwitchCard projectId={new ObjectID(PROJECT_ID)} />
+      </div>
+    );
+  };
+
+  test("flipping it on puts Monitor Groups in the menu without a reload, and flipping it off takes it out", async () => {
+    render(<Dashboard />);
+
+    await act(async () => {
+      for (let i: number = 0; i < 8; i++) {
+        await Promise.resolve();
+      }
+    });
+
+    expect(screen.getByTestId("monitors-menu")).toHaveTextContent(
+      "All Monitors",
+    );
+    expect(screen.getByTestId("monitors-menu")).not.toHaveTextContent(
+      "Monitor Groups",
+    );
+
+    const control: HTMLElement = screen.getByTestId(
+      MONITOR_GROUPS_SWITCH_TEST_ID,
+    );
+
+    fireEvent.click(control);
+
+    await act(async () => {
+      for (let i: number = 0; i < 8; i++) {
+        await Promise.resolve();
+      }
+    });
+
+    expect(screen.getByTestId("monitors-menu")).toHaveTextContent(
+      "Monitor Groups",
+    );
+
+    fireEvent.click(control);
+
+    await act(async () => {
+      for (let i: number = 0; i < 8; i++) {
+        await Promise.resolve();
+      }
+    });
+
+    expect(screen.getByTestId("monitors-menu")).not.toHaveTextContent(
+      "Monitor Groups",
+    );
+  });
+});

package/Tests/App/Dashboard/ServerlessSetupGuide.test.ts

@@ -604,7 +604,7 @@ describe.each(PLATFORM_KEYS)("the %s guide", (platform: ServerlessPlatform) => {
         return topic.title === "The function is listed, but its tabs are empty";
       })?.markdown || "";
     expect(empty).toContain(
-      "whose `faas.name` equals its **Function Identifier** exactly",
+      "whose `faas.name` equals its **Function Name (faas.name)** exactly",
     );
     expect(empty).not.toContain("has no `faas.name` on its telemetry");
     expect(empty).not.toContain("add `faas.name`");

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

@@ -0,0 +1,297 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import React, { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import { getJestSpyOn } from "../../Spy";
+
+/*
+ * The project's session replay master switch, on Real User Monitoring ->
+ * Settings -> Session Replay (Dashboard Components/SessionReplay/
+ * SessionReplayAllowedCard). It was a card whose Update dialog held one
+ * switch; now it is the switch, saving the moment it is flipped - except
+ * that turning recording ON asks first, since the switch's own sentence says
+ * to confirm the masking policy and the lawful basis before it is on.
+ * Turning it OFF never asks: stopping the recording of end users must never
+ * take a dialog.
+ *
+ * The real card, switch and dialog are rendered (and the real page, with
+ * its roster table stubbed); only the network, the project and the
+ * permission gate are stubbed.
+ */
+
+const getItemMock: MockFunction = getJestMockFunction();
+const updateByIdMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<unknown>): unknown => {
+        return getItemMock(...args);
+      },
+      updateById: (...args: Array<unknown>): unknown => {
+        return updateByIdMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Components/ModelTable/ModelTable", () => {
+  return {
+    __esModule: true,
+    default: (props: Record<string, unknown>): ReactElement => {
+      return React.createElement("div", {
+        "data-testid": `stub-table-${props["id"] as string}`,
+      });
+    },
+  };
+});
+
+import SessionReplayAllowedCard, {
+  getAllowSessionReplayConfirmation,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayAllowedCard";
+import SessionReplayAllowedSwitchCopy, {
+  SESSION_REPLAY_ALLOWED_SWITCH_COLUMN,
+  SESSION_REPLAY_ALLOWED_SWITCH_TEST_ID,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SessionReplay/SessionReplayAllowedSwitchCopy";
+import RumSessionReplaySettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Rum/Settings/SessionReplay";
+import Project from "../../../Models/DatabaseModels/Project";
+import Route from "../../../Types/API/Route";
+import ObjectID from "../../../Types/ObjectID";
+import PermissionGate, {
+  PermissionGateResult,
+} from "../../../UI/Utils/PermissionGate";
+import ProjectUtil from "../../../UI/Utils/Project";
+
+const PROJECT_ID: string = "8f8f8f8f-0000-4000-8000-0000000000aa";
+
+let stored: Record<string, unknown> = {};
+
+beforeEach(() => {
+  stored = {};
+
+  getItemMock.mockReset();
+  getItemMock.mockImplementation(async (): Promise<unknown> => {
+    const project: Project = new Project();
+    project._id = PROJECT_ID;
+    Object.assign(project, stored);
+    return project;
+  });
+
+  updateByIdMock.mockReset();
+  updateByIdMock.mockImplementation(
+    async (options: unknown): Promise<unknown> => {
+      Object.assign(
+        stored,
+        (options as { data: Record<string, unknown> }).data,
+      );
+      return {};
+    },
+  );
+
+  getJestSpyOn(PermissionGate, "checkColumnUpdate").mockImplementation(
+    (): PermissionGateResult => {
+      return { isAllowed: true };
+    },
+  );
+
+  getJestSpyOn(ProjectUtil, "getCurrentProjectId").mockImplementation(
+    (): ObjectID => {
+      return new ObjectID(PROJECT_ID);
+    },
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    for (let i: number = 0; i < 8; i++) {
+      await Promise.resolve();
+    }
+  });
+}
+
+async function renderCard(): Promise<HTMLElement> {
+  render(<SessionReplayAllowedCard projectId={new ObjectID(PROJECT_ID)} />);
+  await flush();
+  return await screen.findByTestId(SESSION_REPLAY_ALLOWED_SWITCH_TEST_ID);
+}
+
+interface UpdateCall {
+  modelType: unknown;
+  id: ObjectID;
+  data: Record<string, unknown>;
+}
+
+function updateCall(index: number = 0): UpdateCall {
+  return updateByIdMock.mock.calls[index]![0] as UpdateCall;
+}
+
+describe("Session Replay for this Project", () => {
+  test("is one switch under the card's title and line, with no Update button", async () => {
+    const control: HTMLElement = await renderCard();
+
+    expect(
+      screen.getByText(SessionReplayAllowedSwitchCopy.cardTitle),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(SessionReplayAllowedSwitchCopy.cardDescription),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("switch", {
+        name: SessionReplayAllowedSwitchCopy.switchTitle,
+      }),
+    ).toBe(control);
+    expect(
+      screen.getByText(SessionReplayAllowedSwitchCopy.switchDescription),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Update" })).toBeNull();
+  });
+
+  test("reads the project's master switch, and only that", async () => {
+    await renderCard();
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+    const call: { modelType: unknown; id: ObjectID; select: unknown } =
+      getItemMock.mock.calls[0]![0] as {
+        modelType: unknown;
+        id: ObjectID;
+        select: unknown;
+      };
+    expect(call.modelType).toBe(Project);
+    expect(call.id.toString()).toBe(PROJECT_ID);
+    expect(call.select).toEqual({
+      [SESSION_REPLAY_ALLOWED_SWITCH_COLUMN]: true,
+    });
+  });
+
+  test("a project that never set it is allowed, as the column's default says", async () => {
+    const control: HTMLElement = await renderCard();
+
+    expect(control).toHaveAttribute("aria-checked", "true");
+  });
+
+  test("turning it off saves at once, with no dialog", async () => {
+    stored = { isSessionReplayAllowed: true };
+
+    const control: HTMLElement = await renderCard();
+
+    fireEvent.click(control);
+    await flush();
+
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(updateByIdMock).toHaveBeenCalledTimes(1);
+    expect(updateCall().modelType).toBe(Project);
+    expect(updateCall().id.toString()).toBe(PROJECT_ID);
+    expect(updateCall().data).toEqual({ isSessionReplayAllowed: false });
+    expect(control).toHaveAttribute("aria-checked", "false");
+  });
+
+  test("turning it on asks first, and saves nothing until confirmed", async () => {
+    stored = { isSessionReplayAllowed: false };
+
+    const control: HTMLElement = await renderCard();
+    expect(control).toHaveAttribute("aria-checked", "false");
+
+    fireEvent.click(control);
+    await flush();
+
+    const dialog: HTMLElement = screen.getByRole("dialog");
+    expect(dialog).toHaveAccessibleName(
+      SessionReplayAllowedSwitchCopy.allowConfirmTitle,
+    );
+    expect(
+      within(dialog).getByTestId("confirm-modal-description"),
+    ).toHaveTextContent(SessionReplayAllowedSwitchCopy.allowConfirmDescription);
+    expect(updateByIdMock).not.toHaveBeenCalled();
+
+    fireEvent.click(
+      within(dialog).getByRole("button", {
+        name: SessionReplayAllowedSwitchCopy.allowConfirmButton,
+      }),
+    );
+    await flush();
+
+    expect(updateCall().data).toEqual({ isSessionReplayAllowed: true });
+    expect(control).toHaveAttribute("aria-checked", "true");
+  });
+
+  test("cancelling leaves recording off", async () => {
+    stored = { isSessionReplayAllowed: false };
+
+    const control: HTMLElement = await renderCard();
+
+    fireEvent.click(control);
+    await flush();
+
+    fireEvent.click(
+      within(screen.getByRole("dialog")).getByRole("button", {
+        name: "Cancel",
+      }),
+    );
+    await flush();
+
+    expect(updateByIdMock).not.toHaveBeenCalled();
+    expect(control).toHaveAttribute("aria-checked", "false");
+  });
+
+  test("the confirmation is only for turning recording on", () => {
+    expect(getAllowSessionReplayConfirmation(false)).toBeUndefined();
+    expect(getAllowSessionReplayConfirmation(true)).toEqual({
+      title: SessionReplayAllowedSwitchCopy.allowConfirmTitle,
+      description: SessionReplayAllowedSwitchCopy.allowConfirmDescription,
+      submitButtonText: SessionReplayAllowedSwitchCopy.allowConfirmButton,
+    });
+  });
+});
+
+describe("the RUM Session Replay settings page", () => {
+  test("opens on the master switch, for the current project, above the roster", async () => {
+    render(
+      <MemoryRouter>
+        <RumSessionReplaySettings
+          pageRoute={new Route("/dashboard")}
+          currentProject={null}
+          hasPaymentMethod={false}
+        />
+      </MemoryRouter>,
+    );
+    await flush();
+
+    const control: HTMLElement = await screen.findByTestId(
+      SESSION_REPLAY_ALLOWED_SWITCH_TEST_ID,
+    );
+    const roster: HTMLElement = screen.getByTestId(
+      "stub-table-rum-application-session-replay-roster-table",
+    );
+
+    expect(
+      control.compareDocumentPosition(roster) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    expect(
+      (getItemMock.mock.calls[0]![0] as { id: ObjectID }).id.toString(),
+    ).toBe(PROJECT_ID);
+    expect(screen.queryByRole("button", { name: "Update" })).toBeNull();
+  });
+});

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

@@ -160,6 +160,7 @@ const renderCard: (options?: RenderOptions) => {
           initialOption={renderOptions.initialOption}
           onOptionChange={renderOptions.onOptionChange}
           getKeyTypeFilter={renderOptions.getKeyTypeFilter}
+          newKeyName="Thing key"
           getContent={renderOptions.getContent || buildContent}
         />
       </MemoryRouter>
@@ -729,12 +730,17 @@ describe("SetupGuideCard", () => {
       await waitFor(() => {
         expect(getList).toHaveBeenCalled();
       });
+      /*
+       * An option that names no type lists Server keys: an agent or a
+       * collector sends no Origin header, so a Browser key would be
+       * refused on every export.
+       */
       const firstQuery: Record<string, unknown> = (
         getList.mock.calls[0]![0] as unknown as {
           query: Record<string, unknown>;
         }
       ).query;
-      expect(firstQuery["keyType"]).toBeUndefined();
+      expect(firstQuery["keyType"]).toBe(TelemetryIngestionKeyType.Server);
 
       fireEvent.click(radio("Beta"));