@oneuptime/common 12.0.6 → 12.0.8

package/UI/Types/UseAnchoredFieldPopup.ts

@@ -1,6 +1,8 @@
+import { consumePressForAnchoredPopup } from "./LayeredDismissal";
 import React, {
   useCallback,
   useEffect,
+  useId,
   useLayoutEffect,
   useRef,
   useState,
@@ -44,10 +46,26 @@ export interface AnchoredFieldPopup {
   isPopupOpen: boolean;
   popupPosition: AnchoredFieldPopupPosition | null;
   portalTarget: HTMLElement | null;
+  popupId: string;
   closePopup: (shouldReturnFocus?: boolean) => void;
   togglePopup: () => void;
+  // Opens the popup from a trigger's keyboard, and moves focus into it.
+  onTriggerKeyDown: (event: React.KeyboardEvent) => void;
 }
 
+/*
+ * The keys that open a popup from its trigger. ArrowDown/ArrowUp match the
+ * listbox convention every other menu in this codebase follows; Enter and Space
+ * are what a button-shaped control is expected to answer to.
+ */
+const POPUP_OPENING_KEYS: Array<string> = [
+  "Enter",
+  " ",
+  "Spacebar",
+  "ArrowDown",
+  "ArrowUp",
+];
+
 type GetFocusableElementsFunction = (
   container: HTMLElement,
 ) => Array<HTMLElement>;
@@ -83,6 +101,27 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
   const popupRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
 
+  const popupId: string = useId();
+
+  /*
+   * A pointer user wants the popup to appear under the field and their pointer
+   * to stay where it is. A keyboard user has no other way in, so opening from
+   * the keyboard hands focus to the popup's first control - the hex box for a
+   * colour, the search box for an icon.
+   */
+  const shouldMoveFocusIntoPopupRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  const focusPopup: () => void = useCallback((): void => {
+    const popup: HTMLDivElement | null = popupRef.current;
+
+    if (!popup) {
+      return;
+    }
+
+    (getFocusableElements(popup)[0] || popup).focus();
+  }, []);
+
   const closePopup: (shouldReturnFocus?: boolean) => void = useCallback(
     (shouldReturnFocus?: boolean): void => {
       setIsPopupOpen(false);
@@ -115,6 +154,58 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
     });
   }, []);
 
+  const openPopup: (shouldMoveFocusIntoPopup?: boolean) => void = useCallback(
+    (shouldMoveFocusIntoPopup?: boolean): void => {
+      shouldMoveFocusIntoPopupRef.current = Boolean(shouldMoveFocusIntoPopup);
+      setIsPopupOpen(true);
+    },
+    [],
+  );
+
+  const onTriggerKeyDown: (event: React.KeyboardEvent) => void = useCallback(
+    (event: React.KeyboardEvent): void => {
+      if (event.defaultPrevented || !POPUP_OPENING_KEYS.includes(event.key)) {
+        return;
+      }
+
+      /*
+       * The key opened the popup and means nothing else after that: Input's
+       * own onEnterPress stands down on a defaultPrevented event, and a
+       * trigger placed inside a real <form> - which nothing about Input
+       * prevents, even though this codebase's forms are not form elements -
+       * would otherwise submit it on the way past.
+       */
+      event.preventDefault();
+
+      if (isPopupOpen) {
+        focusPopup();
+        return;
+      }
+
+      openPopup(true);
+    },
+    [isPopupOpen, focusPopup, openPopup],
+  );
+
+  /*
+   * Waits for a measured position, not just for the open flag: until then the
+   * popup is `visibility: hidden` so it cannot flash at the top left corner,
+   * and a hidden element refuses focus. jsdom has no such scruples, so this
+   * ordering only shows itself in a browser.
+   */
+  useEffect(() => {
+    if (
+      !isPopupOpen ||
+      !popupPosition ||
+      !shouldMoveFocusIntoPopupRef.current
+    ) {
+      return;
+    }
+
+    shouldMoveFocusIntoPopupRef.current = false;
+    focusPopup();
+  }, [isPopupOpen, popupPosition, focusPopup]);
+
   const updatePopupPosition: () => void = useCallback((): void => {
     if (!anchorRef.current || typeof window === "undefined") {
       return;
@@ -222,6 +313,12 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
         return;
       }
 
+      /*
+       * This press is spent on closing the popup. Claiming it stops the modal
+       * underneath from reading the same press as a backdrop dismissal and
+       * throwing the form away along with the picker.
+       */
+      consumePressForAnchoredPopup(event);
       closePopup(false);
     };
 
@@ -311,6 +408,8 @@ const useAnchoredFieldPopup: UseAnchoredFieldPopupFunction = (
     anchorRef,
     closePopup,
     isPopupOpen,
+    onTriggerKeyDown,
+    popupId,
     popupPosition,
     popupRef,
     portalTarget: typeof document === "undefined" ? null : document.body,

package/UI/Utils/PageScrollLock.ts

@@ -0,0 +1,66 @@
+/*
+ * The page behind an open dialog surface must not scroll, and nested surfaces
+ * share a single lock: a counter, rather than a boolean, is what stops an inner
+ * dialog from handing scrolling back while the surface that opened it is still
+ * up.
+ *
+ * This lives outside any one component on purpose. Modal and SideOver nest
+ * inside each other in shipped code — Workflow's "Run Workflow" panel is a
+ * SideOver that opens a ConfirmModal — and two private counters would race over
+ * document.body.style. Whichever surface unmounted first would restore the
+ * snapshot the other had already overwritten, leaving the page either scrolling
+ * under a dialog that is still open or locked forever with no dialog on screen.
+ */
+
+let openDialogCount: number = 0;
+let bodyOverflowBeforeLock: string = "";
+let bodyPaddingRightBeforeLock: string = "";
+
+export type PageScrollLockFunction = () => void;
+
+export const lockPageScroll: PageScrollLockFunction = (): void => {
+  openDialogCount++;
+
+  if (openDialogCount > 1 || typeof document === "undefined") {
+    return;
+  }
+
+  bodyOverflowBeforeLock = document.body.style.overflow;
+  bodyPaddingRightBeforeLock = document.body.style.paddingRight;
+
+  /*
+   * Hiding the scrollbar reclaims its width, so the page underneath would
+   * jump sideways by exactly that much. Pad it back to hold everything still.
+   */
+  const scrollbarWidth: number =
+    window.innerWidth - document.documentElement.clientWidth;
+
+  if (scrollbarWidth > 0) {
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+  }
+
+  document.body.style.overflow = "hidden";
+};
+
+export const unlockPageScroll: PageScrollLockFunction = (): void => {
+  openDialogCount = Math.max(0, openDialogCount - 1);
+
+  if (openDialogCount > 0 || typeof document === "undefined") {
+    return;
+  }
+
+  document.body.style.overflow = bodyOverflowBeforeLock;
+  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
+};
+
+/*
+ * Test-only escape hatch. The counter is module state that survives between
+ * cases in the same jest file, so a suite that asserts on the FIRST lock needs
+ * a way back to a known zero.
+ */
+export const resetPageScrollLockForTesting: PageScrollLockFunction =
+  (): void => {
+    openDialogCount = 0;
+    bodyOverflowBeforeLock = "";
+    bodyPaddingRightBeforeLock = "";
+  };

package/Utils/Dashboard/HtmlWidgetDocument.ts

@@ -128,8 +128,10 @@ export default class HtmlWidgetDocument {
    *
    * Resolution is delegated to DashboardVariableInterpolation so this widget
    * agrees with every query-driven widget about what a variable currently
-   * means (selected value, else default, else nothing). Multi-select joins
-   * with "," because that is the form an author would paste into a filter.
+   * means: a single-select is its selected value, else its default, else
+   * nothing; a multi-select is its picks, and no picks is "All" — which
+   * lands here as "" rather than the default. Multi-select joins with ","
+   * because that is the form an author would paste into a filter.
    */
   public static resolveVariables(
     variables: Array<DashboardVariable> | undefined,

package/Utils/Dashboard/VariableInterpolation.ts

@@ -31,6 +31,23 @@ export interface ResolvedVariableValue {
  * key so the server's WHERE-builder produces `attributes[key] IN (...)`.
  */
 export default class DashboardVariableInterpolation {
+  /*
+   * The one place that decides what a variable currently *means*. Every
+   * widget and every selector defers to it, so the rules have to be
+   * stated rather than inferred:
+   *
+   * - A multi-select variable's `selectedValues` is its sole source of
+   *   truth. Empty or unset is the "All" state and produces no
+   *   predicate. `defaultValue` deliberately does NOT apply here: the
+   *   selector shows "All" whenever the list is empty and cannot show
+   *   anything else, so honouring a default would filter widgets behind
+   *   a control that reads "unfiltered". A default that only holds one
+   *   value also cannot express what a multi-select is for.
+   * - A single-select variable falls back to `defaultValue` only when
+   *   `selectedValue` is absent. An empty string is a real choice — the
+   *   "All" option — and must not be overwritten by the default, which
+   *   is why this uses `??` rather than `||`.
+   */
   public static resolveValue(
     variable: DashboardVariable,
   ): ResolvedVariableValue | undefined {
@@ -43,7 +60,8 @@ export default class DashboardVariableInterpolation {
       if (values.length > 0) {
         return { multi: values };
       }
-      // No multi-select picks. Fall through to default value handling.
+      // No picks: "All". Never falls back to the single-select default.
+      return undefined;
     }
 
     const v: string | undefined =

package/Utils/LegacySerializedArray.ts

@@ -0,0 +1,60 @@
+/*
+ * JSONFunctions.serializeValue had no Array.isArray branch. Arrays are
+ * typeof "object", so any array that reached it directly was walked by key and
+ * written out as { "0": ..., "1": ... }. Two shapes hit that path:
+ *
+ *   - an array nested directly inside another array, e.g. the
+ *     [facetKey, value] filter tuples of a telemetry saved view;
+ *   - a top-level array handed to LocalStorage/SessionStorage/Cookie, which
+ *     call serializeValue on the value itself rather than on a wrapper object.
+ *
+ * (An array under an object key was always safe, at any depth, because
+ * serialize() special-cases array-valued keys.)
+ *
+ * The serializer is fixed, but values written before the fix are still in
+ * databases and in browser storage. readLegacySerializedArray reads either
+ * shape, so those values load instead of being thrown away — or, worse,
+ * destructured and taking the page down with them.
+ */
+
+export function readLegacySerializedArray(
+  value: unknown,
+): Array<unknown> | null {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+
+  const record: Record<string, unknown> = value as Record<string, unknown>;
+  const keys: Array<string> = Object.keys(record);
+
+  /*
+   * An empty object is what an empty array serialized to, and in every place
+   * this is used an empty collection is the sensible reading.
+   */
+  if (keys.length === 0) {
+    return [];
+  }
+
+  /*
+   * Only a complete run of indices 0..n-1 could have come from an array. A
+   * genuine object that merely happens to have a "0" key keeps its own shape
+   * and is rejected here.
+   */
+  for (let index: number = 0; index < keys.length; index++) {
+    if (!Object.prototype.hasOwnProperty.call(record, String(index))) {
+      return null;
+    }
+  }
+
+  const restored: Array<unknown> = [];
+
+  for (let index: number = 0; index < keys.length; index++) {
+    restored.push(record[String(index)]);
+  }
+
+  return restored;
+}

package/Utils/Monitor/MonitorDependencyRule.ts

@@ -0,0 +1,88 @@
+/*
+ * The alert-dependency suppression decision rule, shared verbatim by the
+ * server (MonitorDependencySuppression, which enforces it during
+ * evaluation) and the dashboard (DependencySuppressionWarning, which
+ * explains it to the user). It lives here — not in Common/Server — so the
+ * browser bundle can import it without dragging in the server module
+ * graph, the same split MonitorSummarySnapshotUtil uses. Keep it pure:
+ * no queries, no model imports.
+ */
+
+/*
+ * A parent monitor whose current status matches the suppression rule.
+ * statusName is carried for user-facing messages ("parent monitor
+ * 'Router' is Offline").
+ */
+export interface SuppressingParent {
+  monitorId: string;
+  monitorName: string;
+  statusName: string;
+}
+
+export interface DependencySuppressionResult {
+  isSuppressed: boolean;
+  suppressingParents: Array<SuppressingParent>;
+}
+
+// The status facts about one parent monitor that the decision needs.
+export interface ParentMonitorStatusRef {
+  monitorId: string;
+  monitorName: string;
+  statusId: string | undefined;
+  statusName: string | undefined;
+  isOfflineState: boolean;
+}
+
+export default class MonitorDependencyRule {
+  /*
+   * A parent suppresses when its current status is in the configured
+   * status list; with no list configured, when its current status is
+   * flagged offline. A parent with no current status never suppresses (a
+   * never-evaluated parent must not silence its children).
+   */
+  public static getSuppressingParents(input: {
+    parents: Array<ParentMonitorStatusRef>;
+    configuredSuppressionStatusIds: Set<string>;
+  }): Array<SuppressingParent> {
+    const suppressing: Array<SuppressingParent> = [];
+
+    for (const parent of input.parents) {
+      const matchesRule: boolean =
+        input.configuredSuppressionStatusIds.size > 0
+          ? Boolean(
+              parent.statusId &&
+                input.configuredSuppressionStatusIds.has(parent.statusId),
+            )
+          : parent.isOfflineState;
+
+      if (matchesRule) {
+        suppressing.push({
+          monitorId: parent.monitorId,
+          monitorName: parent.monitorName,
+          statusName: parent.statusName || "Offline",
+        });
+      }
+    }
+
+    return suppressing;
+  }
+
+  /*
+   * One human sentence naming the suppressing parents, shared by the
+   * alert and incident skip events so both read identically in the
+   * evaluation log.
+   */
+  public static buildSuppressionReason(
+    suppressingParents: Array<SuppressingParent>,
+  ): string {
+    const parts: Array<string> = suppressingParents.map(
+      (parent: SuppressingParent) => {
+        return `"${parent.monitorName}" is ${parent.statusName}`;
+      },
+    );
+
+    const plural: boolean = parts.length > 1;
+
+    return `parent monitor${plural ? "s" : ""} ${parts.join(", ")}`;
+  }
+}