@oneuptime/common 12.0.8 → 12.0.9

package/UI/Components/Workflow/WorkflowStatusBar.tsx

@@ -0,0 +1,224 @@
+/*
+ * The strip above the canvas: whether the draft is saved, what the run it
+ * started is doing, and what the static checks have to say about it.
+ *
+ * All three used to be loose text of different shapes and colours sitting next
+ * to each other, and the checks in particular were a bare underlined link — the
+ * one thing on the strip that is clickable looked the least like a control.
+ * They are pills here so the strip reads as one row of statuses, and so the
+ * clickable one can carry a border, a hover state and a focus ring.
+ *
+ * The checks pill only appears when the checks found something. A green "no
+ * problems" pill is the normal state of a workflow, so it says nothing while
+ * taking up the same room as the pill that does.
+ */
+
+import Icon, { SizeProp } from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import { WorkflowLintResult } from "./GraphLint";
+import {
+  WorkflowLintTone,
+  getWorkflowLintCountText,
+  getWorkflowLintTone,
+} from "./GraphLintSummary";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/** Where the draft is between the last edit and the server having it. */
+export enum WorkflowSaveState {
+  /** Nothing has been edited yet. */
+  Idle = "Idle",
+  Saving = "Saving",
+  Saved = "Saved",
+  Error = "Error",
+}
+
+export interface SaveStatePresentation {
+  label: string;
+  dotClassName: string;
+  textClassName: string;
+}
+
+export type GetSaveStatePresentationFunction = (
+  state: WorkflowSaveState,
+) => SaveStatePresentation;
+
+export const getWorkflowSaveStatePresentation: GetSaveStatePresentationFunction =
+  (state: WorkflowSaveState): SaveStatePresentation => {
+    if (state === WorkflowSaveState.Saved) {
+      return {
+        label: "Saved",
+        dotClassName: "bg-emerald-500",
+        textClassName: "text-emerald-700",
+      };
+    }
+
+    if (state === WorkflowSaveState.Saving) {
+      return {
+        label: "Saving…",
+        dotClassName: "bg-indigo-500 animate-pulse",
+        textClassName: "text-indigo-700",
+      };
+    }
+
+    if (state === WorkflowSaveState.Error) {
+      return {
+        label: "Could not save",
+        dotClassName: "bg-red-500",
+        textClassName: "text-red-700",
+      };
+    }
+
+    return {
+      label: "Ready",
+      dotClassName: "bg-gray-400",
+      textClassName: "text-gray-600",
+    };
+  };
+
+const PILL_CLASS_NAME: string =
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium leading-4 whitespace-nowrap";
+
+type GetLintPillClassNameFunction = (tone: WorkflowLintTone) => string;
+
+/** Only ever asked about a tone the pill is shown for — warnings, or worse. */
+const getLintPillClassName: GetLintPillClassNameFunction = (
+  tone: WorkflowLintTone,
+): string => {
+  if (tone === WorkflowLintTone.Error) {
+    return "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 hover:border-red-300";
+  }
+
+  return "border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 hover:border-amber-300";
+};
+
+type GetRunPillClassNameFunction = (
+  hasFailed: boolean,
+  isClickable: boolean,
+) => string;
+
+const getRunPillClassName: GetRunPillClassNameFunction = (
+  hasFailed: boolean,
+  isClickable: boolean,
+): string => {
+  if (hasFailed) {
+    return `border-red-200 bg-red-50 text-red-700${
+      isClickable ? " hover:bg-red-100 hover:border-red-300" : ""
+    }`;
+  }
+
+  return `border-gray-200 bg-gray-50 text-gray-600${
+    isClickable ? " hover:bg-gray-100 hover:border-gray-300" : ""
+  }`;
+};
+
+export interface ComponentProps {
+  saveState: WorkflowSaveState;
+  /** null until the canvas has run its checks for the first time. */
+  lintResult?: WorkflowLintResult | null | undefined;
+  /** Opens the panel listing what the checks found. */
+  onShowIssues?: (() => void) | undefined;
+  /** What the run this builder started is doing, while it is doing it. */
+  runStatusMessage?: string | null | undefined;
+  runStatusFailed?: boolean | undefined;
+  /**
+   * Opens that run's log. Given one, the run pill becomes a control — the
+   * modal opens by itself when a run starts, and this is how it is got back
+   * after being closed.
+   */
+  onShowRunLog?: (() => void) | undefined;
+}
+
+const WorkflowStatusBar: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const savePresentation: SaveStatePresentation =
+    getWorkflowSaveStatePresentation(props.saveState);
+
+  const lintResult: WorkflowLintResult | null = props.lintResult || null;
+  const tone: WorkflowLintTone = lintResult
+    ? getWorkflowLintTone(lintResult)
+    : WorkflowLintTone.Clean;
+
+  const hasIssues: boolean = Boolean(
+    lintResult && lintResult.issues.length > 0,
+  );
+
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2"
+      data-testid="workflow-status-bar"
+    >
+      <span
+        className={`${PILL_CLASS_NAME} border-gray-200 bg-white ${savePresentation.textClassName}`}
+        data-testid="workflow-save-status"
+      >
+        <span
+          className={`h-1.5 w-1.5 shrink-0 rounded-full ${savePresentation.dotClassName}`}
+          aria-hidden="true"
+        />
+        {savePresentation.label}
+      </span>
+
+      {props.runStatusMessage &&
+        (props.onShowRunLog ? (
+          <button
+            type="button"
+            onClick={props.onShowRunLog}
+            title="See this run's log"
+            aria-label={`${props.runStatusMessage} Open the run log.`}
+            data-testid="workflow-run-status-button"
+            className={`${PILL_CLASS_NAME} cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${getRunPillClassName(
+              Boolean(props.runStatusFailed),
+              true,
+            )}`}
+          >
+            <Icon
+              icon={props.runStatusFailed ? IconProp.Alert : IconProp.Play}
+              size={SizeProp.ExtraSmall}
+              className="h-3 w-3 shrink-0"
+            />
+            {props.runStatusMessage}
+          </button>
+        ) : (
+          <span
+            className={`${PILL_CLASS_NAME} ${getRunPillClassName(
+              Boolean(props.runStatusFailed),
+              false,
+            )}`}
+            data-testid="workflow-run-status"
+          >
+            <Icon
+              icon={props.runStatusFailed ? IconProp.Alert : IconProp.Play}
+              size={SizeProp.ExtraSmall}
+              className="h-3 w-3 shrink-0"
+            />
+            {props.runStatusMessage}
+          </span>
+        ))}
+
+      {lintResult && hasIssues && (
+        <button
+          type="button"
+          onClick={props.onShowIssues}
+          title="See everything the checks found"
+          aria-label={`${getWorkflowLintCountText(
+            lintResult,
+          )} found in this workflow. Open the list.`}
+          data-testid="workflow-lint-status-button"
+          className={`${PILL_CLASS_NAME} cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${getLintPillClassName(
+            tone,
+          )}`}
+        >
+          <Icon
+            icon={IconProp.Alert}
+            size={SizeProp.ExtraSmall}
+            className="h-3 w-3 shrink-0"
+          />
+          {getWorkflowLintCountText(lintResult)}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default WorkflowStatusBar;

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,