@oneuptime/common 12.0.31 → 12.0.33

package/Tests/UI/Utils/PageScrollLock.test.tsx

@@ -0,0 +1,377 @@
+import {
+  lockPageScroll,
+  resetPageScrollLockForTesting,
+  unlockPageScroll,
+  usePageScrollLock,
+} from "../../../UI/Utils/PageScrollLock";
+import { render, RenderResult } from "@testing-library/react";
+import React, { FunctionComponent, ReactElement } from "react";
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+
+/*
+ * Issue #3553: the Ask AI panel dimmed the page, declared aria-modal, and then
+ * let the incident list behind it scroll away under the wheel, because nothing
+ * ever took this lock. The panel now takes it through usePageScrollLock, which
+ * is the surface every dialog is meant to use — so the guarantees it makes are
+ * pinned here, at the one place they are implemented, rather than re-derived in
+ * each component suite.
+ *
+ * The counter is module state that outlives a single test, so every case starts
+ * from a known zero and a known body.
+ */
+
+type SetBodyFunction = (overflow: string, paddingRight?: string) => void;
+
+const setBody: SetBodyFunction = (
+  overflow: string,
+  paddingRight: string = "",
+): void => {
+  /*
+   * setProperty/removeProperty rather than assignment: jsdom's CSS layer
+   * silently ignores `style.paddingRight = ""`, so an assigning reset would
+   * carry one case's gutter into the next and quietly hand a later assertion
+   * the wrong page to look at.
+   */
+  document.body.style.setProperty("overflow", overflow);
+  document.body.style.setProperty("padding-right", paddingRight);
+};
+
+/*
+ * jsdom reports innerWidth === clientWidth, so it never has a scrollbar to
+ * reclaim. Faking the gap is the only way to exercise the padding compensation,
+ * which is the half of the lock a user notices as the page jumping sideways.
+ */
+type SetScrollbarWidthFunction = (width: number) => void;
+
+const setScrollbarWidth: SetScrollbarWidthFunction = (width: number): void => {
+  Object.defineProperty(document.documentElement, "clientWidth", {
+    configurable: true,
+    value: window.innerWidth - width,
+  });
+};
+
+const Locker: FunctionComponent<{ isLocked: boolean }> = (props: {
+  isLocked: boolean;
+}): ReactElement => {
+  usePageScrollLock(props.isLocked);
+
+  return <div data-testid="locker" />;
+};
+
+describe("PageScrollLock", () => {
+  beforeEach(() => {
+    resetPageScrollLockForTesting();
+    setBody("");
+    setScrollbarWidth(0);
+  });
+
+  afterEach(() => {
+    resetPageScrollLockForTesting();
+    setBody("");
+    setScrollbarWidth(0);
+  });
+
+  describe("lockPageScroll / unlockPageScroll", () => {
+    test("hides the page scrollbar while a dialog is up", () => {
+      setBody("auto");
+
+      lockPageScroll();
+
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    test("puts back whatever the page had before, not a hardcoded default", () => {
+      setBody("scroll");
+
+      lockPageScroll();
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("scroll");
+    });
+
+    test("restores an empty inline overflow rather than inventing one", () => {
+      setBody("");
+
+      lockPageScroll();
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("");
+    });
+
+    test("keeps the page locked while an inner dialog closes over an outer one", () => {
+      setBody("auto");
+
+      lockPageScroll();
+      lockPageScroll();
+
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("hidden");
+
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("restores the page exactly once no matter how deep the nesting went", () => {
+      setBody("auto");
+
+      lockPageScroll();
+      lockPageScroll();
+      lockPageScroll();
+      unlockPageScroll();
+      unlockPageScroll();
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("leaves the page alone when unlocked with nothing open", () => {
+      /*
+       * A stray release — a surface unlocking twice, a cleanup outliving the
+       * lock it was paired with — used to paint the snapshot from some earlier
+       * dialog straight over the live page, wiping whatever overflow the page
+       * had set for itself. Nothing is open, so there is nothing to put back.
+       */
+      setBody("auto", "8px");
+
+      unlockPageScroll();
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("auto");
+      expect(document.body.style.paddingRight).toBe("8px");
+    });
+
+    test("counts the next lock after a stray unlock as a first lock", () => {
+      /*
+       * The stray unlocks must not leave a credit behind either: one lock still
+       * has to inert the page, and one unlock still has to hand it back. A
+       * counter allowed to run negative would need three locks before anything
+       * happened at all.
+       */
+      setBody("auto");
+
+      unlockPageScroll();
+      unlockPageScroll();
+
+      lockPageScroll();
+
+      expect(document.body.style.overflow).toBe("hidden");
+
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("re-reads the page on every fresh lock instead of reusing a stale snapshot", () => {
+      setBody("auto");
+
+      lockPageScroll();
+      unlockPageScroll();
+
+      setBody("scroll");
+
+      lockPageScroll();
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("scroll");
+    });
+
+    test("pads the page by the width of the scrollbar it just hid", () => {
+      setScrollbarWidth(15);
+
+      lockPageScroll();
+
+      expect(document.body.style.paddingRight).toBe("15px");
+    });
+
+    test("removes that padding again on unlock", () => {
+      setScrollbarWidth(15);
+
+      lockPageScroll();
+      unlockPageScroll();
+
+      expect(document.body.style.paddingRight).toBe("");
+    });
+
+    test("preserves padding the page already had of its own", () => {
+      setBody("auto", "8px");
+      setScrollbarWidth(15);
+
+      lockPageScroll();
+
+      expect(document.body.style.paddingRight).toBe("15px");
+
+      unlockPageScroll();
+
+      expect(document.body.style.paddingRight).toBe("8px");
+    });
+
+    test("adds no padding on overlay-scrollbar platforms, where nothing was reclaimed", () => {
+      setScrollbarWidth(0);
+
+      lockPageScroll();
+
+      expect(document.body.style.paddingRight).toBe("");
+    });
+
+    test("pads only for the outermost dialog, so nesting does not stack gutters", () => {
+      setScrollbarWidth(15);
+
+      lockPageScroll();
+      lockPageScroll();
+
+      expect(document.body.style.paddingRight).toBe("15px");
+    });
+  });
+
+  describe("usePageScrollLock", () => {
+    test("locks the page for a surface that mounts open", () => {
+      setBody("auto");
+
+      render(<Locker isLocked={true} />);
+
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    test("leaves the page alone for a surface that is mounted but closed", () => {
+      setBody("auto");
+
+      render(<Locker isLocked={false} />);
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("locks when a mounted-but-closed surface opens", () => {
+      setBody("auto");
+
+      const rendered: RenderResult = render(<Locker isLocked={false} />);
+
+      rendered.rerender(<Locker isLocked={true} />);
+
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    test("releases when the surface closes without unmounting", () => {
+      /*
+       * AIChatPanel's shape exactly: it stays mounted for the life of the app
+       * and swaps its own open flag, so a lock keyed on mount alone would never
+       * be handed back.
+       */
+      setBody("auto");
+
+      const rendered: RenderResult = render(<Locker isLocked={true} />);
+
+      rendered.rerender(<Locker isLocked={false} />);
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("releases when the surface unmounts while still open", () => {
+      setBody("auto");
+
+      const rendered: RenderResult = render(<Locker isLocked={true} />);
+
+      rendered.unmount();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("survives being opened and closed repeatedly", () => {
+      setBody("auto");
+
+      const rendered: RenderResult = render(<Locker isLocked={false} />);
+
+      for (let index: number = 0; index < 5; index++) {
+        rendered.rerender(<Locker isLocked={true} />);
+        expect(document.body.style.overflow).toBe("hidden");
+
+        rendered.rerender(<Locker isLocked={false} />);
+        expect(document.body.style.overflow).toBe("auto");
+      }
+    });
+
+    test("does not re-take the lock on a re-render that leaves it open", () => {
+      setBody("auto");
+
+      const rendered: RenderResult = render(<Locker isLocked={true} />);
+
+      rendered.rerender(<Locker isLocked={true} />);
+      rendered.rerender(<Locker isLocked={true} />);
+
+      /*
+       * A dependency array that missed would acquire once per render and leave
+       * the counter far above zero, so one unmount could never unlock the page.
+       */
+      rendered.unmount();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("shares one lock across two surfaces open at the same time", () => {
+      setBody("auto");
+
+      const first: RenderResult = render(<Locker isLocked={true} />);
+      const second: RenderResult = render(<Locker isLocked={true} />);
+
+      first.unmount();
+
+      expect(document.body.style.overflow).toBe("hidden");
+
+      second.unmount();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("shares that lock with imperative callers too", () => {
+      setBody("auto");
+
+      lockPageScroll();
+
+      const rendered: RenderResult = render(<Locker isLocked={true} />);
+
+      rendered.unmount();
+
+      expect(document.body.style.overflow).toBe("hidden");
+
+      unlockPageScroll();
+
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    test("locks before paint, so a right-pinned surface never draws in the wrong place", () => {
+      /*
+       * useLayoutEffect, not useEffect. Hiding the scrollbar widens the
+       * viewport a fixed overlay resolves `right: 0` against, so a lock that
+       * landed after paint would shift the panel sideways by the scrollbar's
+       * width on its first frame — the jump SideOver used to document.
+       *
+       * React flushes every layout effect in a commit before any passive one,
+       * so a passive effect ordered AHEAD of the locker in the tree is the
+       * discriminator: it sees "hidden" only if the lock was taken during
+       * layout. Were the hook a plain useEffect, this probe would run first and
+       * still see the page scrolling.
+       */
+      setBody("auto");
+
+      let overflowSeenAfterPaint: string = "";
+
+      const Probe: FunctionComponent = (): ReactElement => {
+        React.useEffect(() => {
+          overflowSeenAfterPaint = document.body.style.overflow;
+        }, []);
+
+        return <div />;
+      };
+
+      render(
+        <React.Fragment>
+          <Probe />
+          <Locker isLocked={true} />
+        </React.Fragment>,
+      );
+
+      expect(overflowSeenAfterPaint).toBe("hidden");
+    });
+  });
+});

package/Tests/UI/Utils/PermissionGate.test.ts

@@ -70,6 +70,7 @@ import PermissionGate, {
 } from "../../../UI/Utils/PermissionGate";
 import { CardButtonSchema } from "../../../UI/Components/Card/Card";
 import Monitor from "../../../Models/DatabaseModels/Monitor";
+import Team from "../../../Models/DatabaseModels/Team";
 import Log from "../../../Models/AnalyticsModels/Log";
 import IconProp from "../../../Types/Icon/IconProp";
 import Permission from "../../../Types/Permission";
@@ -297,6 +298,83 @@ describe("PermissionGate", () => {
     });
   });
 
+  /*
+   * The server widens a model's declared ACL with the matching
+   * *AllOperationalResources wildcard for anything marked @OperationalResource
+   * (TablePermission.getEffectiveModelPermissions). The gate has to do the
+   * same, or it is stricter than the endpoint it stands in front of: somebody
+   * granted "Edit All Operational Resources" and nothing else was told by every
+   * edit button in the product that they could not edit, while the API would
+   * have accepted the write.
+   */
+  describe("operational resource wildcards", () => {
+    test("a wildcard grants the operation on an operational resource", () => {
+      permissionsForTest = [Permission.EditAllOperationalResources];
+
+      const result: PermissionGateResult = PermissionGate.check(
+        new Monitor(),
+        ModelAction.Update,
+      );
+
+      expect(result.isAllowed).toBe(true);
+      expect(result.disabledReason).toBeUndefined();
+    });
+
+    test("each wildcard only covers its own operation", () => {
+      permissionsForTest = [Permission.ReadAllOperationalResources];
+
+      const monitor: Monitor = new Monitor();
+
+      expect(PermissionGate.check(monitor, ModelAction.Read).isAllowed).toBe(
+        true,
+      );
+      expect(PermissionGate.check(monitor, ModelAction.Update).isAllowed).toBe(
+        false,
+      );
+      expect(PermissionGate.check(monitor, ModelAction.Create).isAllowed).toBe(
+        false,
+      );
+      expect(PermissionGate.check(monitor, ModelAction.Delete).isAllowed).toBe(
+        false,
+      );
+    });
+
+    test("a wildcard does not cover a model that is not an operational resource", () => {
+      permissionsForTest = [Permission.EditAllOperationalResources];
+
+      /*
+       * Team is a settings model - deliberately outside the wildcard, so that
+       * "edit every operational resource" never quietly becomes "administer
+       * the project".
+       */
+      const result: PermissionGateResult = PermissionGate.check(
+        new Team(),
+        ModelAction.Update,
+      );
+
+      expect(result.isAllowed).toBe(false);
+    });
+
+    /*
+     * The wildcard widens the decision, not the explanation. The server names
+     * only the model's own permissions when it refuses, and telling a viewer
+     * they need "Edit All Operational Resources" would point them at a
+     * project-wide grant instead of the one permission they actually want.
+     */
+    test("the wildcard is not named in the reason the operation is refused", () => {
+      permissionsForTest = [Permission.Viewer];
+
+      const result: PermissionGateResult = PermissionGate.check(
+        new Monitor(),
+        ModelAction.Update,
+      );
+
+      expect(result.isAllowed).toBe(false);
+      expect(result.disabledReason).toContain("Edit Monitor");
+      expect(result.disabledReason).not.toContain("Operational Resources");
+    });
+  });
+
   describe("getPermissionTitles", () => {
     test("maps permissions to their human titles", () => {
       expect(

package/Tests/UI/Utils/SensitiveUrlToken.test.ts

@@ -0,0 +1,140 @@
+import SensitiveUrlToken from "../../../UI/Utils/SensitiveUrlToken";
+import { describe, expect, it, beforeEach } from "@jest/globals";
+
+/*
+ * The client half of the reset/verify token handoff.
+ *
+ * The head bootstrap normally leaves the token in sessionStorage and a clean
+ * URL behind it, but it has three failure modes that all have to keep the flow
+ * working: storage blocked (private mode), the bootstrap not having run at all
+ * (so the token is still in the path), and a spent token that must not linger.
+ */
+
+const STORAGE_KEY: string = "oneuptime-sensitive-url-token";
+
+function setPath(pathname: string): void {
+  window.history.replaceState({}, "", pathname);
+}
+
+describe("SensitiveUrlToken.readFromPath", () => {
+  it("reads the token out of a reset-password path", () => {
+    expect(
+      SensitiveUrlToken.readFromPath("/accounts/reset-password/abc-123"),
+    ).toBe("abc-123");
+  });
+
+  it("reads the token out of a verify-email path", () => {
+    expect(
+      SensitiveUrlToken.readFromPath("/accounts/verify-email/abc-123"),
+    ).toBe("abc-123");
+  });
+
+  it("reads the token out of a status page path, with or without a preview prefix", () => {
+    expect(SensitiveUrlToken.readFromPath("/reset-password/abc-123")).toBe(
+      "abc-123",
+    );
+    expect(
+      SensitiveUrlToken.readFromPath(
+        "/status-page/6392f2a1/reset-password/abc-123",
+      ),
+    ).toBe("abc-123");
+  });
+
+  it("returns nothing for the cleaned form of the same route", () => {
+    /*
+     * This is the ordinary case after the bootstrap has run. Returning
+     * "reset-password" here would submit the route name as the token.
+     */
+    expect(SensitiveUrlToken.readFromPath("/accounts/reset-password")).toBe("");
+    expect(SensitiveUrlToken.readFromPath("/reset-password")).toBe("");
+  });
+
+  it("returns nothing for unrelated routes", () => {
+    expect(SensitiveUrlToken.readFromPath("/accounts/login")).toBe("");
+    expect(SensitiveUrlToken.readFromPath("/accounts/forgot-password")).toBe(
+      "",
+    );
+    expect(SensitiveUrlToken.readFromPath("/")).toBe("");
+    expect(SensitiveUrlToken.readFromPath("")).toBe("");
+  });
+
+  it("tolerates a trailing slash", () => {
+    expect(
+      SensitiveUrlToken.readFromPath("/accounts/reset-password/abc-123/"),
+    ).toBe("abc-123");
+  });
+
+  it("percent-decodes the token, and passes a malformed escape through", () => {
+    expect(
+      SensitiveUrlToken.readFromPath("/accounts/reset-password/a%2Bb"),
+    ).toBe("a+b");
+    expect(
+      SensitiveUrlToken.readFromPath("/accounts/reset-password/a%zz"),
+    ).toBe("a%zz");
+  });
+});
+
+describe("SensitiveUrlToken.read", () => {
+  beforeEach(() => {
+    window.sessionStorage.clear();
+    delete (window as any).__ONEUPTIME_SENSITIVE_URL_TOKEN__;
+    setPath("/accounts/reset-password");
+  });
+
+  it("prefers the stash the head bootstrap wrote", () => {
+    window.sessionStorage.setItem(STORAGE_KEY, "stashed-token");
+
+    expect(SensitiveUrlToken.read()).toBe("stashed-token");
+  });
+
+  it("falls back to the in-memory handoff when storage is unavailable", () => {
+    (window as any).__ONEUPTIME_SENSITIVE_URL_TOKEN__ = "in-memory-token";
+
+    expect(SensitiveUrlToken.read()).toBe("in-memory-token");
+  });
+
+  it("falls back to the path when the bootstrap did not run", () => {
+    setPath("/accounts/reset-password/path-token");
+
+    expect(SensitiveUrlToken.read()).toBe("path-token");
+  });
+
+  it("returns nothing when there is no token anywhere", () => {
+    expect(SensitiveUrlToken.read()).toBe("");
+  });
+
+  it("prefers the stash over a token still in the path", () => {
+    /*
+     * Both can be present when storage worked but replaceState did not. The
+     * stash is the value the bootstrap actually captured.
+     */
+    setPath("/accounts/reset-password/path-token");
+    window.sessionStorage.setItem(STORAGE_KEY, "stashed-token");
+
+    expect(SensitiveUrlToken.read()).toBe("stashed-token");
+  });
+});
+
+describe("SensitiveUrlToken.clear", () => {
+  beforeEach(() => {
+    window.sessionStorage.clear();
+    delete (window as any).__ONEUPTIME_SENSITIVE_URL_TOKEN__;
+    setPath("/accounts/reset-password");
+  });
+
+  it("drops a spent token from both stashes", () => {
+    window.sessionStorage.setItem(STORAGE_KEY, "stashed-token");
+    (window as any).__ONEUPTIME_SENSITIVE_URL_TOKEN__ = "in-memory-token";
+
+    SensitiveUrlToken.clear();
+
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+    expect(SensitiveUrlToken.read()).toBe("");
+  });
+
+  it("is safe to call when nothing was stashed", () => {
+    expect(() => {
+      return SensitiveUrlToken.clear();
+    }).not.toThrow();
+  });
+});

package/Tests/UI/Utils/TableColumnsToCsv.test.ts

@@ -25,6 +25,7 @@ interface Row {
   hosts?: Array<{ name: string }> | undefined;
   services?: Array<{ name: string }> | undefined;
   monitors?: Array<{ name: string }> | undefined;
+  monitorTemplate?: { templateName?: string } | undefined;
 }
 
 /*
@@ -446,6 +447,35 @@ describe("TableColumnsToCsv", () => {
 
       expect(result).toEqual([]);
     });
+
+    test("keeps a column that is only hidden on mobile", () => {
+      /*
+       * hideOnMobile is a render-time decision taken by TableHeader / TableRow,
+       * and this utility never sees a viewport. The monitors list Template
+       * column sits at the intersection of the two different kinds of "hidden"
+       * a column can now have: a phone viewer who switched it on in Customize
+       * Columns gets it in their file, while a desktop viewer on the defaults
+       * does not - because the "which columns am I seeing" question is answered
+       * upstream in BaseModelTable, never here. Teaching the exporter about
+       * hideOnMobile would silently strip columns from the export of anyone on
+       * a narrow screen, and nobody would notice until a support ticket.
+       */
+      const result: Columns<Row> = TableColumnsToCsv.getExportableColumns([
+        { title: "Name", type: FieldType.Text, key: "name" },
+        {
+          title: "Template",
+          type: FieldType.Entity,
+          key: "monitorTemplate",
+          hideOnMobile: true,
+        },
+      ]);
+
+      expect(
+        result.map((c: Column<Row>) => {
+          return c.title;
+        }),
+      ).toEqual(["Name", "Template"]);
+    });
   });
 
   describe("getExportKeys", () => {