@oneuptime/common 12.0.33 → 13.0.0

package/UI/Components/Workflow/Workflow.tsx

@@ -2,6 +2,7 @@ import WorkflowComponent from "./Component";
 import ComponentSettingsModal from "./ComponentSettingsModal";
 import ComponentsModal from "./ComponentsModal";
 import RunModal from "./RunModal";
+import { getNewWorkflowNodePosition } from "./NodePlacement";
 import {
   LintGraphEdge,
   LintGraphNode,
@@ -40,6 +41,7 @@ import ReactFlow, {
   NodeTypes,
   OnConnect,
   ProOptions,
+  ReactFlowInstance,
   addEdge,
   getConnectedEdges,
   updateEdge,
@@ -62,7 +64,7 @@ export const getPlaceholderTriggerNode: GetPlaceholderTriggerNodeFunction =
           iconProp: IconProp.Bolt,
           componentType: ComponentType.Trigger,
           title: "Trigger",
-          description: "Please click here to add trigger",
+          description: "Choose what starts this workflow",
         },
         metadataId: "",
         internalId: "",
@@ -159,6 +161,8 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   }, []);
 
   const edgeUpdateSuccessful: any = useRef(true);
+  const flowInstance: React.MutableRefObject<ReactFlowInstance | null> =
+    useRef<ReactFlowInstance | null>(null);
   const [showComponentSettingsModal, setShowComponentSettingsModal] =
     useState<boolean>(false);
   const [selectedNodeData, setSelectedNodeData] = useState<NodeDataProp | null>(
@@ -167,7 +171,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
   type OnNodeClickFunction = (data: NodeDataProp) => void;
 
-  const onNodeClick: OnNodeClickFunction = (data: NodeDataProp) => {
+  const onNodeClick: OnNodeClickFunction = useCallback((data: NodeDataProp) => {
     // if placeholder node is clicked then show modal.
 
     if (data.nodeType === NodeType.PlaceholderNode) {
@@ -180,7 +184,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       setShowComponentSettingsModal(true);
       setSelectedNodeData(data);
     }
-  };
+  }, []);
 
   useEffect(() => {
     if (props.showComponentsPickerModal) {
@@ -194,7 +198,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.showRunModal) {
       setShowRunModal(true);
     } else {
-      setShowComponentsModal(false);
+      setShowRunModal(false);
     }
   }, [props.showRunModal]);
 
@@ -214,12 +218,12 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       });
 
       if (
-        nodeToUpdate.filter((n: Node) => {
+        !nodeToUpdate.some((n: Node) => {
           return (
-            (n.data as NodeDataProp).componentType === ComponentType.Trigger &&
-            (n.data as NodeDataProp).nodeType === NodeType.Node
+            (n.data as NodeDataProp).componentType === ComponentType.Trigger ||
+            (n.data as NodeDataProp).nodeType === NodeType.PlaceholderNode
           );
-        }).length === 0
+        })
       ) {
         nodeToUpdate = nodeToUpdate.concat(getPlaceholderTriggerNode());
       }
@@ -244,12 +248,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     });
   };
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(
-    props.initialNodes.map((node: Node) => {
-      node.data.onClick = onNodeClick;
-      return node;
-    }),
-  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(props.initialNodes);
 
   const [edges, setEdges, onEdgesChange] = useEdgesState(
     props.initialEdges.map((edge: Edge) => {
@@ -410,6 +409,11 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   const [showTriggersModal, setShowTriggersModal] = useState<boolean>(false);
 
   const [showRunModal, setShowRunModal] = useState<boolean>(false);
+  const isModalOpen: boolean =
+    showComponentsModal ||
+    showTriggersModal ||
+    showComponentSettingsModal ||
+    showRunModal;
 
   useEffect(() => {
     props.onComponentPickerModalUpdate(showComponentsModal);
@@ -457,7 +461,10 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     const compToAdd: Node = {
       id: ObjectID.generate().toString(), // react-flow id
       type: "node",
-      position: { x: 200, y: 200 },
+      position: getNewWorkflowNodePosition(
+        nodes,
+        componentMetadata.componentType,
+      ),
       selected: true,
       data: {
         nodeType: NodeType.Node,
@@ -491,13 +498,21 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           .concat({ ...compToAdd } as any);
       });
     }
+
+    setSelectedNodeData(compToAdd.data as NodeDataProp);
+    setShowComponentSettingsModal(true);
+    flowInstance.current?.setCenter(
+      compToAdd.position.x + 128,
+      compToAdd.position.y + 100,
+      { zoom: 1, duration: 200 },
+    );
   };
 
   return (
     <div
       style={{
         height: "calc(100vh - 220px)",
-        minHeight: "600px",
+        minHeight: "400px",
         borderRadius: "8px",
         overflow: "hidden",
         border: "1px solid var(--ou-border-default, #e2e8f0)",
@@ -556,20 +571,33 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         `}
       </style>
       <ReactFlow
+        onInit={(instance: ReactFlowInstance) => {
+          flowInstance.current = instance;
+        }}
         nodes={nodesToRender}
         edges={edges}
         fitView={true}
+        fitViewOptions={{ maxZoom: 1 }}
         onEdgeClick={() => {
           refreshEdges();
         }}
-        onNodeClick={() => {
+        onNodeClick={(_event: React.MouseEvent, node: Node) => {
           refreshEdges();
+          /*
+           * Handle every node through the canvas, including newly added steps
+           * and replacement trigger placeholders, without persisting callbacks.
+           */
+          onNodeClick(node.data as NodeDataProp);
         }}
         proOptions={proOptions}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         multiSelectionKeyCode={null}
+        // React Flow listens on document, even while a dialog has focus.
+        panActivationKeyCode={isModalOpen ? null : "Space"}
+        deleteKeyCode={isModalOpen ? null : "Backspace"}
+        selectionKeyCode={isModalOpen ? null : "Shift"}
         onEdgeUpdate={onEdgeUpdate}
         nodeTypes={nodeTypes}
         onEdgeUpdateStart={onEdgeUpdateStart}
@@ -704,11 +732,12 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
               ...componentData,
               error: "",
             };
+            delete dataToStore.onClick;
 
             setNodes((nds: Array<Node>) => {
               return nds.map((n: Node) => {
                 if (n.data.internalId === dataToStore.internalId) {
-                  n.data = dataToStore;
+                  return { ...n, data: dataToStore };
                 }
 
                 return n;

package/UI/Config.ts

@@ -24,9 +24,11 @@ import Protocol from "../Types/API/Protocol";
 import URL from "../Types/API/URL";
 import Route from "../Types/API/Route";
 import SubscriptionPlan from "../Types/Billing/SubscriptionPlan";
-import Dictionary from "../Types/Dictionary";
 import { JSONObject } from "../Types/JSON";
 import Version from "../Types/Version";
+import getBrowserTelemetryConfig, {
+  BrowserTelemetryConfig,
+} from "./Utils/Telemetry/BrowserTelemetryConfig";
 
 type GetAllEnvVarsFunction = () => JSONObject;
 
@@ -215,40 +217,20 @@ export const AnalyticsHost: string = env("ANALYTICS_HOST");
 export const GitSha: string = env("GIT_SHA") || "";
 export const AppVersion: string = env("APP_VERSION") || "";
 
-export const OpenTelemetryExporterOtlpEndpoint: URL | null = env(
-  "OPENTELEMETRY_EXPORTER_OTLP_ENDPOINT",
-)
-  ? URL.fromString(env("OPENTELEMETRY_EXPORTER_OTLP_ENDPOINT").toString())
-  : null;
+const BrowserTelemetryEnvironmentConfig: BrowserTelemetryConfig =
+  getBrowserTelemetryConfig(env);
 
-type GetOpenTelemetryExporterOtlpHeadersFunction = () => Dictionary<string>;
+export const BrowserOpenTelemetryExporterOtlpEndpoint: URL | null =
+  BrowserTelemetryEnvironmentConfig.endpoint;
 
-const getOpenTelemetryExporterOtlpHeaders: GetOpenTelemetryExporterOtlpHeadersFunction =
-  (): Dictionary<string> => {
-    if (!env("OPENTELEMETRY_EXPORTER_OTLP_HEADERS")) {
-      return {};
-    }
-
-    const headersStrings: Array<string> = env(
-      "OPENTELEMETRY_EXPORTER_OTLP_HEADERS",
-    )
-      .toString()
-      .split(";");
-
-    const headers: Dictionary<string> = {};
-
-    for (const headerString of headersStrings) {
-      const header: Array<string> = headerString.split("=");
-      if (header.length === 2) {
-        headers[header[0]!.toString()] = header[1]!.toString();
-      }
-    }
-
-    return headers;
-  };
-
-export const OpenTelemetryExporterOtlpHeaders: Dictionary<string> =
-  getOpenTelemetryExporterOtlpHeaders();
+/*
+ * This value is intentionally public: it is injected into env.js. It must be
+ * a OneUptime Browser ingestion key, whose origin/surface/rate restrictions
+ * are enforced at ingest. Generic backend exporter headers are never read by
+ * browser code.
+ */
+export const BrowserOpenTelemetryExporterOtlpIngestionKey: string =
+  BrowserTelemetryEnvironmentConfig.browserIngestionKey;
 
 export const DisableTelemetry: boolean = env("DISABLE_TELEMETRY") === "true";
 

package/UI/Utils/GlobalKeyboardShortcut.ts

@@ -0,0 +1,208 @@
+/**
+ * The plumbing behind single-key global shortcuts — "?" for the shortcuts
+ * dialog, and "g then <key>" to jump between pages.
+ *
+ * Chorded shortcuts (Cmd/Ctrl+K) can be bound naively because they never
+ * collide with typing. Single-key ones can: every letter a shortcut claims is
+ * a letter someone is also trying to type into a search box, a note, or a
+ * YAML editor. Everything in this module exists to decide, from an event
+ * alone, whether a keypress was meant for the page or for the app — and it is
+ * kept free of React so both halves can be pinned by tests.
+ */
+
+/**
+ * The parts of a KeyboardEvent a global shortcut actually reads. Widened to an
+ * interface so the guards below can be exercised without synthesising DOM
+ * events.
+ */
+export interface KeyboardEventLike {
+  key: string;
+  metaKey?: boolean | undefined;
+  ctrlKey?: boolean | undefined;
+  altKey?: boolean | undefined;
+  shiftKey?: boolean | undefined;
+  defaultPrevented?: boolean | undefined;
+  target?: EventTarget | null | undefined;
+}
+
+/**
+ * Shape we duck-type an event target into. Every field is optional because a
+ * target may be the document, the window, or a plain object in a test.
+ */
+interface ElementLike {
+  tagName?: string | undefined;
+  isContentEditable?: boolean | undefined;
+  getAttribute?: ((name: string) => string | null) | undefined;
+}
+
+/**
+ * How long the leader key stays armed. Long enough that "g" and "i" can be
+ * two deliberate presses rather than a chord, short enough that a "g" typed
+ * and then abandoned does not turn the next keystroke into a navigation.
+ */
+export const KEYBOARD_SEQUENCE_TIMEOUT_IN_MS: number = 1500;
+
+/**
+ * True when the keypress landed somewhere the user is composing text, and so
+ * belongs to that field rather than to the app.
+ *
+ * SELECT is included deliberately: a native select does its own type-ahead,
+ * and stealing those letters would break jumping to an option by name.
+ */
+export function isTextEntryTarget(
+  target: EventTarget | null | undefined,
+): boolean {
+  if (!target) {
+    return false;
+  }
+
+  const element: ElementLike = target as ElementLike;
+  const tagName: string = (element.tagName || "").toUpperCase();
+
+  if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
+    return true;
+  }
+
+  if (element.isContentEditable === true) {
+    return true;
+  }
+
+  /*
+   * jsdom does not implement isContentEditable (it is always undefined), and
+   * some editors set the attribute on a wrapper rather than the focused node.
+   * The attribute is the reliable half of the pair.
+   */
+  if (typeof element.getAttribute === "function") {
+    const attribute: string | null = element.getAttribute("contenteditable");
+
+    if (attribute !== null && attribute !== "false") {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * True when a modal dialog is on screen. Global shortcuts stand down while one
+ * is open: navigating the page out from under a dialog the user is still
+ * filling in would discard their work without asking.
+ *
+ * The selector is the same one Modal itself uses to find the topmost dialog,
+ * so anything that reads as modal to assistive tech reads as modal here.
+ */
+export function hasOpenModalDialog(
+  root: ParentNode | null | undefined,
+): boolean {
+  if (!root) {
+    return false;
+  }
+
+  return root.querySelector('[role="dialog"][aria-modal="true"]') !== null;
+}
+
+/**
+ * The shared gate for every single-key global shortcut: the key must be
+ * unmodified (a chord belongs to whoever bound that chord), unclaimed by
+ * another handler, and pressed outside a text field.
+ *
+ * Shift is deliberately not rejected — "?" is Shift+/ on most layouts, and the
+ * event already reports the shifted `key`.
+ */
+export function shouldIgnoreGlobalKeyPress(event: KeyboardEventLike): boolean {
+  if (
+    event.metaKey === true ||
+    event.ctrlKey === true ||
+    event.altKey === true
+  ) {
+    return true;
+  }
+
+  if (event.defaultPrevented === true) {
+    return true;
+  }
+
+  return isTextEntryTarget(event.target);
+}
+
+// ---- leader-key sequences ---------------------------------------------------
+
+export enum KeyboardSequenceOutcome {
+  /** The leader key was pressed. The next key in time completes the sequence. */
+  Armed = "Armed",
+  /** A key arrived while armed and within the timeout. */
+  Completed = "Completed",
+  /** Not part of a sequence — the caller should do nothing. */
+  Ignored = "Ignored",
+}
+
+export interface KeyboardSequenceState {
+  /** When the leader was pressed, in epoch ms. `null` means "not armed". */
+  leaderPressedAt: number | null;
+}
+
+export interface KeyboardSequenceResult {
+  outcome: KeyboardSequenceOutcome;
+  /** The state to carry into the next keypress. */
+  state: KeyboardSequenceState;
+  /** The completing key, lowercased. Only set when the outcome is Completed. */
+  key: string | null;
+}
+
+export const EMPTY_KEYBOARD_SEQUENCE_STATE: KeyboardSequenceState = {
+  leaderPressedAt: null,
+};
+
+/**
+ * One step of a "leader then key" sequence, as a pure function of the previous
+ * state and the key just pressed.
+ *
+ * Written as a reducer rather than a stateful class so the interesting cases —
+ * an expired leader, a repeated leader, a key with no leader before it — are
+ * ordinary function calls in a test instead of timer choreography.
+ */
+export function reduceKeyboardSequence(input: {
+  state: KeyboardSequenceState;
+  key: string;
+  now: number;
+  leaderKey: string;
+  timeoutInMs: number;
+}): KeyboardSequenceResult {
+  const key: string = input.key.toLowerCase();
+  const leaderKey: string = input.leaderKey.toLowerCase();
+
+  const isArmed: boolean =
+    input.state.leaderPressedAt !== null &&
+    input.now - input.state.leaderPressedAt <= input.timeoutInMs;
+
+  /*
+   * A second leader press re-arms rather than completing. "g" is the one key
+   * that cannot be a destination, so treating "g g h" as "go home" is both the
+   * only sensible reading and the forgiving one.
+   */
+  if (key === leaderKey) {
+    return {
+      outcome: KeyboardSequenceOutcome.Armed,
+      state: { leaderPressedAt: input.now },
+      key: null,
+    };
+  }
+
+  if (isArmed) {
+    return {
+      outcome: KeyboardSequenceOutcome.Completed,
+      state: EMPTY_KEYBOARD_SEQUENCE_STATE,
+      key: key,
+    };
+  }
+
+  /*
+   * Either no leader, or one that timed out. Both disarm: a stale leader must
+   * not survive to pair with a keystroke a second later.
+   */
+  return {
+    outcome: KeyboardSequenceOutcome.Ignored,
+    state: EMPTY_KEYBOARD_SEQUENCE_STATE,
+    key: null,
+  };
+}

package/UI/Utils/Telemetry/BrowserTelemetryConfig.ts

@@ -0,0 +1,28 @@
+import URL from "../../../Types/API/URL";
+
+export interface BrowserTelemetryConfig {
+  endpoint: URL | null;
+  browserIngestionKey: string;
+}
+
+type ReadEnvironmentVariable = (key: string) => string;
+
+/*
+ * Kept independent from the large UI Config module so this security boundary
+ * can be tested directly: backend OTLP names are intentionally not accepted
+ * by this function at all.
+ */
+export default function getBrowserTelemetryConfig(
+  readEnvironmentVariable: ReadEnvironmentVariable,
+): BrowserTelemetryConfig {
+  const endpoint: string = readEnvironmentVariable(
+    "PUBLIC_OPENTELEMETRY_EXPORTER_OTLP_ENDPOINT",
+  );
+
+  return {
+    endpoint: endpoint ? URL.fromString(endpoint) : null,
+    browserIngestionKey: readEnvironmentVariable(
+      "PUBLIC_OPENTELEMETRY_EXPORTER_OTLP_BROWSER_INGESTION_KEY",
+    ),
+  };
+}

package/UI/Utils/Telemetry/Telemetry.ts

@@ -1,7 +1,7 @@
 import {
+  BrowserOpenTelemetryExporterOtlpEndpoint,
+  BrowserOpenTelemetryExporterOtlpIngestionKey,
   DisableTelemetry,
-  OpenTelemetryExporterOtlpEndpoint,
-  OpenTelemetryExporterOtlpHeaders,
 } from "../../Config";
 import { ZoneContextManager } from "@opentelemetry/context-zone";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
@@ -85,15 +85,17 @@ export default class Telemetry {
       return;
     }
 
-    const hasHeaders: boolean =
-      Object.keys(OpenTelemetryExporterOtlpHeaders).length > 0;
-
-    if (OpenTelemetryExporterOtlpEndpoint && hasHeaders) {
+    if (
+      BrowserOpenTelemetryExporterOtlpEndpoint &&
+      BrowserOpenTelemetryExporterOtlpIngestionKey
+    ) {
       const traceExporter: SpanExporter = new OTLPTraceExporter({
         url: URL.fromString(
-          OpenTelemetryExporterOtlpEndpoint?.toString() + "/v1/traces",
+          BrowserOpenTelemetryExporterOtlpEndpoint.toString() + "/v1/traces",
         ).toString(),
-        headers: OpenTelemetryExporterOtlpHeaders,
+        headers: {
+          "x-oneuptime-token": BrowserOpenTelemetryExporterOtlpIngestionKey,
+        },
       }) as unknown as SpanExporter;
 
       const providerConfig: TracerConfig = {

package/UI/esbuild-config.js

@@ -304,6 +304,8 @@ function createConfig(options) {
   const isDev = process.env.NODE_ENV !== "production";
   const isAnalyze = process.env.analyze === "true";
   const reactRoot = resolvePackageRoot("react");
+  const reactRouterRoot = resolvePackageRoot("react-router");
+  const reactRouterDomRoot = resolvePackageRoot("react-router-dom");
   const reactI18nextRoot = resolvePackageRoot("react-i18next");
   const i18nextRoot = resolvePackageRoot("i18next");
 
@@ -356,6 +358,10 @@ function createConfig(options) {
       react: reactRoot,
       "react/jsx-runtime": path.join(reactRoot, "jsx-runtime.js"),
       "react/jsx-dev-runtime": path.join(reactRoot, "jsx-dev-runtime.js"),
+      // Public dashboards reuse widgets from the private dashboard package.
+      // Their links must share the router context installed by the entry app.
+      "react-router": reactRouterRoot,
+      "react-router-dom": reactRouterDomRoot,
       // Force a single instance of i18next/react-i18next so that translations
       // initialized in the service entry are visible to Common UI components.
       // Without this, Common's own node_modules copy gets a separate, never-