@oneuptime/common 12.0.7 → 12.0.9

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/AIChatExport/ConversationMarkdown.ts

@@ -87,6 +87,16 @@ function messageToMarkdown(
     return lines;
   }
 
+  /*
+   * A cancelled turn's content is the server's finalizer text ("Stopped by
+   * user."), not assistant prose — export it as the stop marker it is, the
+   * same way the chat UI renders it.
+   */
+  if (message.status === AIChatMessageStatus.Cancelled) {
+    lines.push(`> _${message.contentInMarkdown || "Stopped by user."}_`, "");
+    return lines;
+  }
+
   if (message.contentInMarkdown) {
     lines.push(neutralizeAssistantMarkdown(message.contentInMarkdown), "");
   }

package/UI/Utils/ModelAPI/ModelAPI.ts

@@ -50,6 +50,12 @@ export default class ModelAPI {
   public static async create<TBaseModel extends BaseModel>(data: {
     model: TBaseModel;
     modelType: { new (): TBaseModel };
+    /*
+     * Extra values that are not columns on the model but that the service
+     * reads off `createBy.miscDataProps` (for example the note a user writes
+     * when they change an incident state).
+     */
+    miscDataProps?: JSONObject | undefined;
     requestOptions?: RequestOptions | undefined;
   }): Promise<
     HTTPResponse<JSONObject | JSONArray | TBaseModel | Array<TBaseModel>>
@@ -58,7 +64,7 @@ export default class ModelAPI {
       model: data.model,
       modelType: data.modelType,
       formType: FormType.Create,
-      miscDataProps: {},
+      miscDataProps: data.miscDataProps || {},
       requestOptions: data.requestOptions,
     });
   }

package/UI/Utils/Platform.ts

@@ -0,0 +1,149 @@
+export enum PlatformType {
+  Mac = "Mac",
+  Windows = "Windows",
+  Linux = "Linux",
+  IOS = "iOS",
+  Android = "Android",
+  ChromeOS = "ChromeOS",
+  Unknown = "Unknown",
+}
+
+interface UserAgentDataLike {
+  platform?: string;
+}
+
+/**
+ * Detects the machine the browser is running on so the UI can speak the
+ * platform's own language — ⌘ on a Mac, Ctrl on Windows and Linux.
+ *
+ * Detection is deliberately not cached: it is a handful of string comparisons,
+ * and keeping it pure means callers (and tests) always read the current
+ * navigator rather than whatever it looked like when the module first loaded.
+ */
+export default class PlatformUtil {
+  public static getPlatform(): PlatformType {
+    if (typeof navigator === "undefined") {
+      return PlatformType.Unknown;
+    }
+
+    /*
+     * navigator.platform is deprecated, so the User-Agent Client Hints value
+     * wins outright where the browser exposes it — it is the only source that
+     * names the OS directly.
+     */
+    const userAgentData: UserAgentDataLike | undefined = (
+      navigator as Navigator & { userAgentData?: UserAgentDataLike }
+    ).userAgentData;
+
+    const fromClientHints: PlatformType = this.classify(
+      userAgentData?.platform || "",
+    );
+
+    if (fromClientHints !== PlatformType.Unknown) {
+      return fromClientHints;
+    }
+
+    /*
+     * The two legacy surfaces are classified together: they describe the same
+     * machine, and each fills the other's gaps — an Android phone reports
+     * platform "Linux armv8l" and only the user agent says "Android".
+     */
+    return this.classify(
+      `${navigator.platform || ""} ${navigator.userAgent || ""}`,
+    );
+  }
+
+  private static classify(source: string): PlatformType {
+    const hint: string = (source || "").toLowerCase().trim();
+
+    if (!hint) {
+      return PlatformType.Unknown;
+    }
+
+    if (
+      hint.includes("iphone") ||
+      hint.includes("ipad") ||
+      hint.includes("ipod") ||
+      hint.includes("ios")
+    ) {
+      return PlatformType.IOS;
+    }
+
+    // Android must be checked before Linux: Android user agents contain both.
+    if (hint.includes("android")) {
+      return PlatformType.Android;
+    }
+
+    // Likewise ChromeOS, whose user agent is "X11; CrOS …".
+    if (hint.includes("cros") || hint.includes("chrome os")) {
+      return PlatformType.ChromeOS;
+    }
+
+    if (hint.includes("mac")) {
+      /*
+       * iPadOS 13+ reports itself as "MacIntel" — a real Mac reports at most
+       * one touch point, an iPad reports five.
+       */
+      if (
+        typeof navigator !== "undefined" &&
+        (navigator.maxTouchPoints || 0) > 1
+      ) {
+        return PlatformType.IOS;
+      }
+      return PlatformType.Mac;
+    }
+
+    if (hint.includes("win")) {
+      return PlatformType.Windows;
+    }
+
+    if (hint.includes("linux") || hint.includes("x11")) {
+      return PlatformType.Linux;
+    }
+
+    return PlatformType.Unknown;
+  }
+
+  public static isMac(): boolean {
+    return this.getPlatform() === PlatformType.Mac;
+  }
+
+  public static isWindows(): boolean {
+    return this.getPlatform() === PlatformType.Windows;
+  }
+
+  public static isLinux(): boolean {
+    return this.getPlatform() === PlatformType.Linux;
+  }
+
+  /**
+   * True for every device that uses ⌘ as the primary shortcut modifier — Macs,
+   * iPhones and iPads with a hardware keyboard attached.
+   */
+  public static isApplePlatform(): boolean {
+    const platform: PlatformType = this.getPlatform();
+    return platform === PlatformType.Mac || platform === PlatformType.IOS;
+  }
+
+  /**
+   * Human readable name, e.g. for support bundles and diagnostics.
+   */
+  public static getPlatformName(): string {
+    switch (this.getPlatform()) {
+      case PlatformType.Mac:
+        return "macOS";
+      case PlatformType.Windows:
+        return "Windows";
+      case PlatformType.Linux:
+        return "Linux";
+      case PlatformType.IOS:
+        return "iOS";
+      case PlatformType.Android:
+        return "Android";
+      case PlatformType.ChromeOS:
+        return "ChromeOS";
+      default:
+        return "Unknown";
+    }
+  }
+}

package/UI/Utils/ProjectInvitationDisplay.ts

@@ -0,0 +1,118 @@
+import Team from "../../Models/DatabaseModels/Team";
+import TeamMembersByProject, {
+  UserProjectMembership,
+} from "../../Utils/TeamMembersByProject";
+
+/*
+ * How one pending invitation reads on screen.
+ *
+ * An invitation is a UserProjectMembership - one project, and every team of it
+ * the user was invited to - so the things a card has to show (a name, an
+ * avatar, the team chips, a stable React key) are all derived from a row that
+ * may be missing any of its joined relations. A select that omitted the join,
+ * a team deleted between the invite and the render, a project whose relation
+ * was nullified: each of those arrives here as an undefined, and none of them
+ * may render as "undefined" or crash the list.
+ *
+ * Kept out of the component so the fallbacks can be pinned by tests without a
+ * render, and so the same wording is reused wherever invitations are shown.
+ */
+export default class ProjectInvitationDisplay {
+  /**
+   * The name the invitation reads under. Falls back to the project id so a row
+   * whose project relation did not come back still names something the user
+   * can tell apart from the row above it, rather than rendering blank.
+   */
+  public static getProjectName(invitation: UserProjectMembership): string {
+    return TeamMembersByProject.getProjectName(invitation);
+  }
+
+  /**
+   * The letters shown in the square avatar next to a project.
+   *
+   * One letter per word for a multi-word name ("Acme Rockets" -> "AR"), and the
+   * first two letters of a single-word name ("Globex" -> "GL") - a lone letter
+   * in an 44px square reads as a typo rather than as a monogram.
+   *
+   * Split with Array.from rather than by index: a name that opens with an emoji
+   * or any other astral character would otherwise be cut through the middle of
+   * a surrogate pair and render as a replacement box.
+   */
+  public static getInitials(projectName: string): string {
+    const words: Array<string> = (projectName || "")
+      .trim()
+      .split(/\s+/)
+      .filter((word: string) => {
+        return Boolean(word);
+      });
+
+    if (words.length === 0) {
+      // A project with no readable name at all still needs something in the square.
+      return "?";
+    }
+
+    if (words.length === 1) {
+      return Array.from(words[0]!).slice(0, 2).join("").toUpperCase();
+    }
+
+    return words
+      .slice(0, 2)
+      .map((word: string) => {
+        return Array.from(word)[0] || "";
+      })
+      .join("")
+      .toUpperCase();
+  }
+
+  /**
+   * The teams this invitation covers, named. Teams whose relation came back
+   * without a name are dropped rather than rendered as empty chips - the count
+   * of chips is not load-bearing, and a nameless chip is noise.
+   *
+   * Already sorted: groupByProject sorts a row's teams by name.
+   */
+  public static getTeamNames(invitation: UserProjectMembership): Array<string> {
+    return invitation.teams
+      .map((team: Team) => {
+        return team.name?.toString() || "";
+      })
+      .filter((name: string) => {
+        return Boolean(name);
+      });
+  }
+
+  /**
+   * What accepting this invitation does, in words - shown under the project
+   * name when the teams could not be named, and in the decline confirmation.
+   *
+   * Counts memberships rather than named teams, so an invitation whose team
+   * relations did not come back still says how much is being accepted.
+   */
+  public static getTeamCountLabel(invitation: UserProjectMembership): string {
+    const count: number = invitation.teamMemberIds.length;
+
+    if (count === 1) {
+      return "1 team";
+    }
+
+    return `${count} teams`;
+  }
+
+  /**
+   * The React key and the id of the row currently mid-request.
+   *
+   * `id` is the lowest of the row's membership ids, so it is stable across
+   * reloads however the memberships came back ordered. The project id is the
+   * fallback for a row that carried no membership id at all; without one of
+   * the two, keying by index would make React reuse a row's busy state for
+   * whatever row slid into its place after a decline.
+   */
+  public static getRowKey(invitation: UserProjectMembership): string {
+    return (
+      invitation.id ||
+      invitation.projectId?.toString() ||
+      invitation.project?._id?.toString() ||
+      ""
+    );
+  }
+}

package/UI/esbuild-config.js

@@ -315,7 +315,28 @@ function createConfig(options) {
     platform: "browser",
     target: "es2017",
     sourcemap: isDev ? "inline" : false,
-    minify: false,
+    /*
+     * Production bundles ship minified; development builds do not. The five
+     * frontends were shipping unminified ESM - measured at 4,842,357 bytes for
+     * one service's bundle, 2,636,716 after minification (-46% raw, -30%
+     * gzipped). That is bandwidth on every cold page load, per user, plus the
+     * bytes sitting in the image and in the registry.
+     *
+     * Dev stays unminified deliberately: the inline sourcemap above is only
+     * half the story - readable output is what makes a stack trace in the
+     * browser console point at something, and minifying would cost watch-mode
+     * rebuild time for no benefit nobody is measuring locally.
+     */
+    minify: !isDev,
+    /*
+     * Insurance for the minified build. esbuild renames functions and classes
+     * when minifying, which breaks anything reading `fn.name` or
+     * `instance.constructor.name` at runtime - error classes that switch on
+     * their own name, component displayName inference, decorator metadata.
+     * Keeping names costs a few KB and removes an entire category of
+     * production-only failure that no test would catch.
+     */
+    keepNames: true,
     treeShaking: true,
     splitting: true,
     publicPath,

package/Utils/Monitor/NetworkDeviceLinkRuleUtil.ts

@@ -0,0 +1,187 @@
+/*
+ * Turning label rules into uplinks.
+ *
+ * Pure data-in/data-out so the whole decision matrix — which is mostly about
+ * REFUSING to draw things — is unit-testable without a database.
+ *
+ * The shape is a star, not a clique. A rule names a set of child labels and a
+ * set of parent labels; every device carrying all the child labels gets one
+ * edge to the single device carrying all the parent labels. Matching "devices
+ * that share a label" symmetrically, which is what was originally asked for,
+ * would turn one forty-device site label into 780 edges.
+ */
+
+export interface LinkRuleDeviceInput {
+  id: string;
+  // Normalised label ids the device carries.
+  labelIds: Array<string>;
+}
+
+export interface LinkRuleInput {
+  id: string;
+  name?: string | undefined;
+  isEnabled?: boolean | undefined;
+  childLabelIds: Array<string>;
+  parentLabelIds: Array<string>;
+}
+
+/*
+ * Why a rule drew nothing. Reported rather than swallowed: a rule that
+ * silently produces no edges is indistinguishable from a rule that is
+ * working, and the operator has no way to tell which they are looking at.
+ */
+export type LinkRuleSkipReason =
+  | "disabled"
+  | "noChildLabels"
+  | "noParentLabels"
+  | "noParentMatched"
+  | "ambiguousParent"
+  | "noChildrenMatched";
+
+export interface LinkRuleOutcome {
+  ruleId: string;
+  ruleName?: string | undefined;
+  // Device pairs this rule contributes, parent second.
+  links: Array<{ fromDeviceId: string; toDeviceId: string }>;
+  // Set when links is empty and the rule had something to say about why.
+  skipReason?: LinkRuleSkipReason | undefined;
+  // How many devices the parent labels matched — the ambiguity evidence.
+  matchedParentCount: number;
+  matchedChildCount: number;
+}
+
+export default class NetworkDeviceLinkRuleUtil {
+  /*
+   * ALL of the rule's labels must be present on the device, not any. "Devices
+   * that are both an access point AND on floor 1" is the question an operator
+   * is asking; any-of would sweep in every access point in the building.
+   */
+  private static deviceMatches(
+    device: LinkRuleDeviceInput,
+    requiredLabelIds: Array<string>,
+  ): boolean {
+    const owned: Set<string> = new Set<string>(device.labelIds);
+    return requiredLabelIds.every((labelId: string) => {
+      return owned.has(labelId);
+    });
+  }
+
+  public static resolveRule(
+    rule: LinkRuleInput,
+    devices: Array<LinkRuleDeviceInput>,
+  ): LinkRuleOutcome {
+    const empty: (
+      reason: LinkRuleSkipReason,
+      parents?: number,
+      children?: number,
+    ) => LinkRuleOutcome = (
+      reason: LinkRuleSkipReason,
+      parents: number = 0,
+      children: number = 0,
+    ): LinkRuleOutcome => {
+      return {
+        ruleId: rule.id,
+        ruleName: rule.name,
+        links: [],
+        skipReason: reason,
+        matchedParentCount: parents,
+        matchedChildCount: children,
+      };
+    };
+
+    if (rule.isEnabled === false) {
+      return empty("disabled");
+    }
+
+    /*
+     * An empty label set matches EVERY device, so a rule with one would link
+     * the whole project to one box (or, on the parent side, be ambiguous
+     * across the whole project). Refused outright rather than resolved.
+     */
+    if (rule.childLabelIds.length === 0) {
+      return empty("noChildLabels");
+    }
+    if (rule.parentLabelIds.length === 0) {
+      return empty("noParentLabels");
+    }
+
+    const parents: Array<LinkRuleDeviceInput> = devices.filter(
+      (device: LinkRuleDeviceInput) => {
+        return NetworkDeviceLinkRuleUtil.deviceMatches(
+          device,
+          rule.parentLabelIds,
+        );
+      },
+    );
+
+    if (parents.length === 0) {
+      return empty("noParentMatched", 0);
+    }
+
+    /*
+     * Two candidate parents is not a tie to break — it is a question the
+     * labels do not answer. Drawing to either one would assert a cabling
+     * fact nobody stated.
+     */
+    if (parents.length > 1) {
+      return empty("ambiguousParent", parents.length);
+    }
+
+    const parent: LinkRuleDeviceInput = parents[0]!;
+
+    const children: Array<LinkRuleDeviceInput> = devices.filter(
+      (device: LinkRuleDeviceInput) => {
+        // The parent is excluded even when it matches both sets: no self-links.
+        return (
+          device.id !== parent.id &&
+          NetworkDeviceLinkRuleUtil.deviceMatches(device, rule.childLabelIds)
+        );
+      },
+    );
+
+    if (children.length === 0) {
+      return empty("noChildrenMatched", 1);
+    }
+
+    return {
+      ruleId: rule.id,
+      ruleName: rule.name,
+      links: children.map((child: LinkRuleDeviceInput) => {
+        return { fromDeviceId: child.id, toDeviceId: parent.id };
+      }),
+      matchedParentCount: 1,
+      matchedChildCount: children.length,
+    };
+  }
+
+  public static resolveRules(
+    rules: Array<LinkRuleInput>,
+    devices: Array<LinkRuleDeviceInput>,
+  ): Array<LinkRuleOutcome> {
+    return rules.map((rule: LinkRuleInput) => {
+      return NetworkDeviceLinkRuleUtil.resolveRule(rule, devices);
+    });
+  }
+
+  /** One line an operator can act on, for the rule list. */
+  public static describeOutcome(outcome: LinkRuleOutcome): string {
+    switch (outcome.skipReason) {
+      case "disabled":
+        return "Disabled — draws no links.";
+      case "noChildLabels":
+        return "No child labels set, so this rule matches nothing.";
+      case "noParentLabels":
+        return "No parent labels set, so this rule matches nothing.";
+      case "noParentMatched":
+        return "No device carries the parent labels, so there is nothing to uplink to.";
+      case "ambiguousParent":
+        return `${outcome.matchedParentCount} devices carry the parent labels. Exactly one must, or there is no way to tell which is the uplink.`;
+      case "noChildrenMatched":
+        return "No device carries the child labels yet.";
+      default:
+        return `Draws ${outcome.matchedChildCount} uplink${
+          outcome.matchedChildCount === 1 ? "" : "s"
+        }.`;
+    }
+  }
+}