@oneuptime/common 13.0.1 → 13.0.4

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

@@ -0,0 +1,347 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import React, { FunctionComponent, ReactElement } from "react";
+import { MemoryRouter, Route as PageRoute, Routes } from "react-router-dom";
+import RumSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Rum/View/Settings";
+import CloudSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Cloud/View/Settings";
+import ServerlessSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Serverless/View/Settings";
+import RumSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Rum/View/SideMenu";
+import CloudSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Cloud/View/SideMenu";
+import ServerlessSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Serverless/View/SideMenu";
+import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
+import { getRumBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/RumBreadcrumbs";
+import { getCloudBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/CloudBreadcrumbs";
+import { getServerlessBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/ServerlessBreadcrumbs";
+import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
+import RouteMap, {
+  RouteUtil,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
+import RumApplication from "../../../Models/DatabaseModels/RumApplication";
+import CloudResource from "../../../Models/DatabaseModels/CloudResource";
+import ServerlessFunction from "../../../Models/DatabaseModels/ServerlessFunction";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import HTTPResponse from "../../../Types/API/HTTPResponse";
+import Route from "../../../Types/API/Route";
+import Link from "../../../Types/Link";
+import { JSONObject } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import SideMenuItem from "../../../UI/Components/SideMenu/SideMenuItem";
+import ModelAPI from "../../../UI/Utils/ModelAPI/ModelAPI";
+import Navigation from "../../../UI/Utils/Navigation";
+import PermissionGate from "../../../UI/Utils/PermissionGate";
+import {
+  DESKTOP_WIDTH,
+  MOBILE_WIDTH,
+  PROJECT_ID,
+  goTo,
+  isExpanded,
+  linksIn,
+  mobileSummaryText,
+  renderMenu,
+  setViewportWidth,
+} from "./SideMenuHarness";
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (value: string): string => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+// The recommendation badge fetch is unrelated to resource Settings navigation.
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Recommendations/RecommendationsSideMenuItem",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: { link: Link }): ReactElement => {
+        return <SideMenuItem link={props.link} />;
+      },
+    };
+  },
+);
+
+const MODEL_ID: ObjectID = new ObjectID("22222222-0000-4000-8000-000000000001");
+
+interface ResourceSettingsCase {
+  name: string;
+  Page: FunctionComponent<PageComponentProps>;
+  SideMenu: FunctionComponent<{ modelId: ObjectID }>;
+  modelType: new () => BaseModel;
+  singularName: string;
+  settingsKey: PageMap;
+  overviewKey: PageMap;
+  productPath: string;
+  getBreadcrumbs: (path: string) => Array<Link> | undefined;
+  breadcrumbTitles: Array<string>;
+}
+
+const RESOURCES: Array<ResourceSettingsCase> = [
+  {
+    name: "RUM application",
+    Page: RumSettings,
+    SideMenu: RumSideMenu,
+    modelType: RumApplication,
+    singularName: "application",
+    settingsKey: PageMap.RUM_APPLICATION_VIEW_SETTINGS,
+    overviewKey: PageMap.RUM_APPLICATION_VIEW,
+    productPath: "rum",
+    getBreadcrumbs: getRumBreadcrumbs,
+    breadcrumbTitles: [
+      "Project",
+      "Real User Monitoring",
+      "View Application",
+      "Settings",
+    ],
+  },
+  {
+    name: "Cloud environment",
+    Page: CloudSettings,
+    SideMenu: CloudSideMenu,
+    modelType: CloudResource,
+    singularName: "cloud environment",
+    settingsKey: PageMap.CLOUD_RESOURCE_VIEW_SETTINGS,
+    overviewKey: PageMap.CLOUD_RESOURCE_VIEW,
+    productPath: "cloud",
+    getBreadcrumbs: getCloudBreadcrumbs,
+    breadcrumbTitles: ["Project", "Cloud", "View Resource", "Settings"],
+  },
+  {
+    name: "Serverless function",
+    Page: ServerlessSettings,
+    SideMenu: ServerlessSideMenu,
+    modelType: ServerlessFunction,
+    singularName: "function",
+    settingsKey: PageMap.SERVERLESS_FUNCTION_VIEW_SETTINGS,
+    overviewKey: PageMap.SERVERLESS_FUNCTION_VIEW,
+    productPath: "serverless",
+    getBreadcrumbs: getServerlessBreadcrumbs,
+    breadcrumbTitles: [
+      "Project",
+      "Serverless Functions",
+      "View Function",
+      "Settings",
+    ],
+  },
+];
+
+function resourceRoute(key: PageMap): string {
+  return RouteUtil.populateRouteParams(RouteMap[key] as Route, {
+    modelId: MODEL_ID,
+  }).toString();
+}
+
+function openSettings(
+  resource: ResourceSettingsCase,
+  suffix: string = "",
+): void {
+  const path: string = resourceRoute(resource.settingsKey) + suffix;
+  goTo(path);
+
+  render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <PageRoute
+          path={String(RouteMap[resource.settingsKey])}
+          element={
+            <resource.Page
+              pageRoute={RouteMap[resource.settingsKey] as Route}
+              currentProject={null}
+              hasPaymentMethod={true}
+            />
+          }
+        />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+  window.sessionStorage.clear();
+  setViewportWidth(DESKTOP_WIDTH);
+  goTo(`/dashboard/${PROJECT_ID}`);
+  jest.spyOn(PermissionGate, "check").mockReturnValue({ isAllowed: true });
+  const resource: RumApplication = new RumApplication();
+  resource.isArchived = false;
+  jest.spyOn(ModelAPI, "getItem").mockResolvedValue(resource);
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+/*
+ * These render the real Settings page and archive card on its real route.
+ * Params and project resolution read the actual URL, catching an easy
+ * relocation bug: taking a fixed segment from /:id/settings/ reads "settings"
+ * as the model id instead of the id React Router matched.
+ * The shared card suite covers its permission, cancellation and failure cases.
+ */
+describe.each(RESOURCES)("$name Settings", (resource: ResourceSettingsCase) => {
+  test.each([
+    { name: "canonical", suffix: "" },
+    { name: "trailing slash", suffix: "/" },
+    { name: "query string", suffix: "?source=overview" },
+    { name: "trailing slash and query string", suffix: "/?source=overview" },
+  ])(
+    "loads the routed resource on the $name URL",
+    async ({ suffix }: { suffix: string }) => {
+      openSettings(resource, suffix);
+
+      expect(
+        await screen.findByText(`Archive ${resource.singularName}`),
+      ).toBeInTheDocument();
+      expect(ModelAPI.getItem).toHaveBeenCalledWith({
+        modelType: resource.modelType,
+        id: MODEL_ID,
+        select: { isArchived: true },
+      });
+      expect(
+        screen.getByText(
+          `Archive this ${resource.singularName} to hide it from lists while it keeps collecting telemetry. You can unarchive it anytime.`,
+        ),
+      ).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Archive" })).toBeEnabled();
+    },
+  );
+
+  test("archives the current resource and returns to its current project's list", async () => {
+    const update: ReturnType<typeof jest.spyOn> = jest
+      .spyOn(ModelAPI, "updateById")
+      .mockResolvedValue(new HTTPResponse<JSONObject>(200, {}, {}));
+    const navigate: ReturnType<typeof jest.spyOn> = jest
+      .spyOn(Navigation, "navigate")
+      .mockImplementation((): void => {});
+
+    openSettings(resource);
+    fireEvent.click(await screen.findByRole("button", { name: "Archive" }));
+
+    const dialog: HTMLElement = screen.getByRole("dialog");
+    expect(dialog).toHaveAccessibleName(`Archive ${resource.singularName}`);
+    fireEvent.click(within(dialog).getByRole("button", { name: "Archive" }));
+
+    await waitFor((): void => {
+      expect(update).toHaveBeenCalledWith({
+        modelType: resource.modelType,
+        id: MODEL_ID,
+        data: { isArchived: true },
+      });
+      expect(navigate).toHaveBeenCalledTimes(1);
+    });
+    expect(String(navigate.mock.calls[0]![0])).toBe(
+      `/dashboard/${PROJECT_ID}/${resource.productPath}`,
+    );
+  });
+
+  test("has one Settings link for this resource and marks it active", async () => {
+    const settingsPath: string = resourceRoute(resource.settingsKey);
+    expect(settingsPath).toBe(
+      `${resourceRoute(resource.overviewKey)}/settings`,
+    );
+    expect(RouteUtil.getLastPathForKey(resource.settingsKey)).toBe("settings");
+    goTo(settingsPath);
+
+    await renderMenu(<resource.SideMenu modelId={MODEL_ID} />);
+
+    expect(
+      linksIn("Settings").filter((link: { title: string }): boolean => {
+        return link.title === "Settings";
+      }),
+    ).toEqual([{ title: "Settings", href: settingsPath }]);
+    expect(screen.getByRole("link", { name: "Settings" })).toHaveClass(
+      "bg-indigo-50",
+    );
+    expect(isExpanded("Settings")).toBe(true);
+    expect(screen.getByRole("link", { name: "Overview" })).toHaveAttribute(
+      "href",
+      resourceRoute(resource.overviewKey),
+    );
+  });
+
+  test("identifies Settings when the resource menu is collapsed on mobile", async () => {
+    setViewportWidth(MOBILE_WIDTH);
+    goTo(resourceRoute(resource.settingsKey));
+
+    await renderMenu(<resource.SideMenu modelId={MODEL_ID} />);
+
+    expect(mobileSummaryText()).toContain("Settings / Settings");
+  });
+
+  test("has concrete breadcrumbs back to the resource and its product", () => {
+    const settingsPath: string = resourceRoute(resource.settingsKey);
+    goTo(settingsPath);
+
+    const breadcrumbs: Array<Link> | undefined = resource.getBreadcrumbs(
+      RouteUtil.getRouteString(resource.settingsKey),
+    );
+
+    expect(
+      breadcrumbs?.map((link: Link): string => {
+        return link.title;
+      }),
+    ).toEqual(resource.breadcrumbTitles);
+    expect(
+      breadcrumbs?.map((link: Link): string => {
+        return String(link.to);
+      }),
+    ).toEqual([
+      `/dashboard/${PROJECT_ID}`,
+      `/dashboard/${PROJECT_ID}/${resource.productPath}`,
+      resourceRoute(resource.overviewKey),
+      settingsPath,
+    ]);
+  });
+});
+
+test("RUM keeps application Settings separate from Session Replay policy", async () => {
+  goTo(resourceRoute(PageMap.RUM_APPLICATION_VIEW_SETTINGS));
+
+  await renderMenu(<RumSideMenu modelId={MODEL_ID} />);
+
+  expect(linksIn("Settings")).toEqual([
+    {
+      title: "Settings",
+      href: resourceRoute(PageMap.RUM_APPLICATION_VIEW_SETTINGS),
+    },
+  ]);
+  expect(linksIn("Session Replay")).toEqual([
+    {
+      title: "Session Replay",
+      href: resourceRoute(PageMap.RUM_APPLICATION_VIEW_SESSION_REPLAY),
+    },
+    {
+      title: "Replay Users",
+      href: resourceRoute(PageMap.RUM_APPLICATION_VIEW_SESSION_REPLAY_USERS),
+    },
+    {
+      title: "Replay Policy",
+      href: resourceRoute(PageMap.RUM_APPLICATION_VIEW_SESSION_REPLAY_SETTINGS),
+    },
+    {
+      title: "Replay Access Log",
+      href: resourceRoute(PageMap.RUM_APPLICATION_VIEW_SESSION_REPLAY_AUDIT),
+    },
+  ]);
+});

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

@@ -0,0 +1,263 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import IncidentSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Incidents/View/SideMenu";
+import MonitorSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Monitor/View/SideMenu";
+import SloSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Slo/View/SideMenu";
+import StatusPageSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/StatusPages/View/SideMenu";
+import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
+import RouteMap, {
+  RouteUtil,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
+import Route from "../../../Types/API/Route";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import ObjectID from "../../../Types/ObjectID";
+import {
+  DESKTOP_WIDTH,
+  MOBILE_WIDTH,
+  MenuLink,
+  PROJECT_ID,
+  goTo,
+  hrefsInMenu,
+  iconCountIn,
+  isExpanded,
+  linksIn,
+  mobileSummaryText,
+  renderMenu,
+  sectionRoot,
+  sectionTitlesInOrder,
+  setViewportWidth,
+} from "./SideMenuHarness";
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (value: string): string => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+const MODEL_ID: ObjectID = new ObjectID("0193c0de-3333-4aaa-8bbb-000000000003");
+
+interface ExpectedLink {
+  title: string;
+  page: PageMap;
+}
+
+interface ResourceAuditMenuCase {
+  name: string;
+  menu: () => ReactElement;
+  auditPage: PageMap;
+  sections: Array<string>;
+  advancedLinks: Array<ExpectedLink>;
+}
+
+const RESOURCE_CASES: Array<ResourceAuditMenuCase> = [
+  {
+    name: "Incident",
+    menu: (): ReactElement => {
+      return <IncidentSideMenu modelId={MODEL_ID} />;
+    },
+    auditPage: PageMap.INCIDENT_VIEW_AUDIT_LOGS,
+    sections: [
+      "Overview",
+      "Investigation",
+      "Team",
+      "Notifications",
+      "Notes",
+      "Advanced",
+    ],
+    advancedLinks: [
+      {
+        title: "Custom Fields",
+        page: PageMap.INCIDENT_VIEW_CUSTOM_FIELDS,
+      },
+      { title: "Settings", page: PageMap.INCIDENT_VIEW_SETTINGS },
+      { title: "Audit Logs", page: PageMap.INCIDENT_VIEW_AUDIT_LOGS },
+      { title: "Delete Incident", page: PageMap.INCIDENT_VIEW_DELETE },
+    ],
+  },
+  {
+    name: "Monitor",
+    menu: (): ReactElement => {
+      return (
+        <MonitorSideMenu modelId={MODEL_ID} monitorType={MonitorType.Website} />
+      );
+    },
+    auditPage: PageMap.MONITOR_VIEW_AUDIT_LOGS,
+    sections: ["Overview", "Activity", "Configuration", "Advanced"],
+    advancedLinks: [
+      { title: "Owners", page: PageMap.MONITOR_VIEW_OWNERS },
+      { title: "Custom Fields", page: PageMap.MONITOR_VIEW_CUSTOM_FIELDS },
+      { title: "Settings", page: PageMap.MONITOR_VIEW_SETTINGS },
+      { title: "Audit Logs", page: PageMap.MONITOR_VIEW_AUDIT_LOGS },
+      { title: "Delete Monitor", page: PageMap.MONITOR_VIEW_DELETE },
+    ],
+  },
+  {
+    name: "SLO",
+    menu: (): ReactElement => {
+      return <SloSideMenu modelId={MODEL_ID} />;
+    },
+    auditPage: PageMap.SLO_VIEW_AUDIT_LOGS,
+    sections: ["SLO", "Advanced"],
+    advancedLinks: [
+      { title: "Owners", page: PageMap.SLO_VIEW_OWNERS },
+      { title: "Audit Logs", page: PageMap.SLO_VIEW_AUDIT_LOGS },
+      { title: "Delete SLO", page: PageMap.SLO_VIEW_DELETE },
+    ],
+  },
+  {
+    name: "Status Page",
+    menu: (): ReactElement => {
+      return <StatusPageSideMenu modelId={MODEL_ID} />;
+    },
+    auditPage: PageMap.STATUS_PAGE_VIEW_AUDIT_LOGS,
+    sections: [
+      "Basic",
+      "Resources",
+      "Subscribers",
+      "Notification Logs",
+      "Branding",
+      "Security",
+      "AI",
+      "Advanced",
+    ],
+    advancedLinks: [
+      { title: "Embedded Status", page: PageMap.STATUS_PAGE_VIEW_EMBEDDED },
+      { title: "Reports", page: PageMap.STATUS_PAGE_VIEW_REPORTS },
+      {
+        title: "Custom Fields",
+        page: PageMap.STATUS_PAGE_VIEW_CUSTOM_FIELDS,
+      },
+      {
+        title: "Advanced Settings",
+        page: PageMap.STATUS_PAGE_VIEW_SETTINGS,
+      },
+      {
+        title: "Audit Logs",
+        page: PageMap.STATUS_PAGE_VIEW_AUDIT_LOGS,
+      },
+      {
+        title: "Delete Status Page",
+        page: PageMap.STATUS_PAGE_VIEW_DELETE,
+      },
+    ],
+  },
+];
+
+function resourceRoute(page: PageMap): string {
+  return RouteUtil.populateRouteParams(RouteMap[page] as Route, {
+    modelId: MODEL_ID,
+  }).toString();
+}
+
+async function renderAuditPage(
+  resource: ResourceAuditMenuCase,
+): Promise<string> {
+  const auditPath: string = resourceRoute(resource.auditPage);
+  goTo(auditPath);
+  await renderMenu(resource.menu());
+
+  return auditPath;
+}
+
+beforeEach(() => {
+  setViewportWidth(DESKTOP_WIDTH);
+  goTo(`/dashboard/${PROJECT_ID}`);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe.each(RESOURCE_CASES)(
+  "$name resource Audit Logs menu",
+  (resource: ResourceAuditMenuCase) => {
+    test("uses the expected sections and has no legacy Audit, Manage, or Settings section", async () => {
+      await renderAuditPage(resource);
+
+      expect(sectionTitlesInOrder()).toEqual(resource.sections);
+      expect(sectionTitlesInOrder()).not.toContain("Audit");
+      expect(sectionTitlesInOrder()).not.toContain("Manage");
+      expect(sectionTitlesInOrder()).not.toContain("Settings");
+    });
+
+    test("keeps every Advanced destination in the expected order", async () => {
+      await renderAuditPage(resource);
+
+      expect(linksIn("Advanced")).toEqual(
+        resource.advancedLinks.map((link: ExpectedLink): MenuLink => {
+          return {
+            title: link.title,
+            href: resourceRoute(link.page),
+          };
+        }),
+      );
+    });
+
+    test("has one fully populated Audit Logs destination and no duplicate hrefs", async () => {
+      const auditPath: string = await renderAuditPage(resource);
+      const hrefs: Array<string> = hrefsInMenu();
+
+      expect(hrefs).toEqual(Array.from(new Set(hrefs)));
+      expect(
+        hrefs.filter((href: string): boolean => {
+          return href === auditPath;
+        }),
+      ).toHaveLength(1);
+
+      hrefs.forEach((href: string) => {
+        expect(href).toContain(`/dashboard/${PROJECT_ID}/`);
+        expect(href).not.toContain(":projectId");
+        expect(href).not.toContain(":modelId");
+      });
+    });
+
+    test("marks Audit Logs active and expands Advanced", async () => {
+      const auditPath: string = await renderAuditPage(resource);
+      const auditLogAnchor: HTMLAnchorElement | undefined = Array.from(
+        sectionRoot("Advanced").querySelectorAll<HTMLAnchorElement>("a"),
+      ).find((anchor: HTMLAnchorElement): boolean => {
+        return anchor.getAttribute("href") === auditPath;
+      });
+
+      expect(auditLogAnchor).toBeDefined();
+      expect(auditLogAnchor).toHaveClass("bg-indigo-50", "text-indigo-700");
+      expect(isExpanded("Advanced")).toBe(true);
+    });
+
+    test("names Audit Logs as an Advanced page in the mobile summary", async () => {
+      setViewportWidth(MOBILE_WIDTH);
+
+      await renderAuditPage(resource);
+
+      expect(mobileSummaryText()).toContain("Advanced / Audit Logs");
+    });
+
+    test("retains a visible label and icon for every destination", async () => {
+      await renderAuditPage(resource);
+
+      sectionTitlesInOrder().forEach((sectionTitle: string) => {
+        const links: Array<MenuLink> = linksIn(sectionTitle);
+
+        expect(iconCountIn(sectionTitle)).toBe(links.length);
+        links.forEach((link: MenuLink) => {
+          expect(link.title).not.toBe("");
+        });
+      });
+    });
+  },
+);