@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Workflow/UseRunWatch.ts

@@ -0,0 +1,212 @@
+/*
+ * Following the run the builder just started, until it settles.
+ *
+ * RunStatusWatcher decides what to say and when to stop; this is the part that
+ * holds a timer, a generation counter and the run's log, and it lives here
+ * rather than in the page so it can be exercised through a real component
+ * lifecycle. Fetching is injected: the page knows how to ask the API for a
+ * run, and the hook only cares that asking returns one.
+ */
+
+import {
+  RUN_WATCH_POLL_INTERVAL_MS,
+  RunWatchDecision,
+  WatchedRun,
+  decideRunWatch,
+  isFailedRunStatus,
+} from "./RunStatusWatcher";
+import {
+  WorkflowStepTrace,
+  emptyTrace,
+} from "../../../Types/Workflow/StepTrace";
+import React, { useEffect, useRef, useState } from "react";
+
+/** A run, with everything the run log modal needs to show it. */
+export interface WatchedRunDetail extends WatchedRun {
+  logs: string;
+  stepTrace: WorkflowStepTrace;
+}
+
+export type FetchLatestRunFunction = () => Promise<WatchedRunDetail | null>;
+
+export interface UseRunWatchResult {
+  /** What the run is doing, in a sentence. Null before anything is watched. */
+  message: string | null;
+  /** The run ended badly. */
+  hasFailed: boolean;
+  /** Still following: what is on screen is not the final word. */
+  isWatching: boolean;
+  /** The run's log so far. */
+  logs: string;
+  /** The run's steps so far. */
+  stepTrace: WorkflowStepTrace;
+  /**
+   * Note which run is newest *before* triggering a new one. Await this before
+   * the request that starts the run: a worker can pick the job up and create
+   * its log while that request is still in flight, and asking afterwards can
+   * record the new run as the old one — leaving the watch waiting for a run
+   * that already exists.
+   */
+  captureRunBeforeTrigger: () => Promise<void>;
+  /** Start following the run that was just triggered. */
+  startWatchingRun: () => void;
+}
+
+export interface UseRunWatchParams {
+  fetchLatestRun: FetchLatestRunFunction;
+}
+
+export type UseRunWatchFunction = (
+  params: UseRunWatchParams,
+) => UseRunWatchResult;
+
+const useRunWatch: UseRunWatchFunction = (
+  params: UseRunWatchParams,
+): UseRunWatchResult => {
+  const [message, setMessage] = useState<string | null>(null);
+  const [hasFailed, setHasFailed] = useState<boolean>(false);
+  const [isWatching, setIsWatching] = useState<boolean>(false);
+  const [logs, setLogs] = useState<string>("");
+  const [stepTrace, setStepTrace] = useState<WorkflowStepTrace>(emptyTrace());
+
+  /*
+   * The page rebuilds its fetch function on every render. Reading it through a
+   * ref keeps a poll that is already in flight from being pinned to the
+   * function it started with.
+   */
+  const fetchLatestRun: React.MutableRefObject<FetchLatestRunFunction> =
+    useRef<FetchLatestRunFunction>(params.fetchLatestRun);
+
+  useEffect(() => {
+    fetchLatestRun.current = params.fetchLatestRun;
+  }, [params.fetchLatestRun]);
+
+  const pollTimer: React.MutableRefObject<ReturnType<
+    typeof setTimeout
+  > | null> = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const runIdBeforeTrigger: React.MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+
+  /*
+   * Which watch a poll belongs to. A poll is a pending promise, so starting a
+   * second run while the first is mid-request leaves that request in flight —
+   * it comes back, and without this would report on the wrong run and schedule
+   * a second chain of timers alongside the new one.
+   */
+  const watchGeneration: React.MutableRefObject<number> = useRef<number>(0);
+
+  const isMounted: React.MutableRefObject<boolean> = useRef<boolean>(true);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+
+      if (pollTimer.current) {
+        clearTimeout(pollTimer.current);
+        pollTimer.current = null;
+      }
+    };
+  }, []);
+
+  type PollRunFunction = (
+    pollCount: number,
+    generation: number,
+  ) => Promise<void>;
+
+  const pollRun: PollRunFunction = async (
+    pollCount: number,
+    generation: number,
+  ): Promise<void> => {
+    let run: WatchedRunDetail | null = null;
+
+    try {
+      run = await fetchLatestRun.current();
+    } catch {
+      /*
+       * A failed poll is not a failed run. Keep watching — the next poll may
+       * well succeed, and the Logs tab is the fallback either way.
+       */
+      run = null;
+    }
+
+    // This watch was replaced or the page went away while we were asking.
+    if (!isMounted.current || generation !== watchGeneration.current) {
+      return;
+    }
+
+    // Not our run yet: the worker has not created its log.
+    if (run && run.runId === runIdBeforeTrigger.current) {
+      run = null;
+    }
+
+    if (run) {
+      setLogs(run.logs);
+      setStepTrace(run.stepTrace);
+    }
+
+    const decision: RunWatchDecision = decideRunWatch({
+      run: run,
+      pollCount: pollCount,
+    });
+
+    setMessage(decision.message);
+    setHasFailed(isFailedRunStatus(run?.status));
+
+    if (!decision.shouldContinue) {
+      setIsWatching(false);
+      return;
+    }
+
+    pollTimer.current = setTimeout(() => {
+      void pollRun(pollCount + 1, generation);
+    }, RUN_WATCH_POLL_INTERVAL_MS);
+  };
+
+  const captureRunBeforeTrigger: () => Promise<void> =
+    async (): Promise<void> => {
+      try {
+        const existing: WatchedRunDetail | null =
+          await fetchLatestRun.current();
+        runIdBeforeTrigger.current = existing ? existing.runId : null;
+      } catch {
+        /*
+         * Without a baseline the first run we see counts as ours. That is the
+         * kinder failure: showing the previous run beats showing nothing.
+         */
+        runIdBeforeTrigger.current = null;
+      }
+    };
+
+  const startWatchingRun: () => void = (): void => {
+    if (pollTimer.current) {
+      clearTimeout(pollTimer.current);
+      pollTimer.current = null;
+    }
+
+    watchGeneration.current = watchGeneration.current + 1;
+
+    setHasFailed(false);
+    setMessage("Starting run…");
+    setLogs("");
+    setStepTrace(emptyTrace());
+    setIsWatching(true);
+
+    void pollRun(0, watchGeneration.current);
+  };
+
+  return {
+    message: message,
+    hasFailed: hasFailed,
+    isWatching: isWatching,
+    logs: logs,
+    stepTrace: stepTrace,
+    captureRunBeforeTrigger: captureRunBeforeTrigger,
+    startWatchingRun: startWatchingRun,
+  };
+};
+
+export default useRunWatch;

package/UI/Components/Workflow/Utils.ts

@@ -1,6 +1,8 @@
 import { DropdownOption } from "../Dropdown/Dropdown";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import IconProp from "../../../Types/Icon/IconProp";
+import { JSONObject } from "../../../Types/JSON";
+import JSONFunctions from "../../../Types/JSONFunctions";
 import ComponentMetadata, {
   ComponentCategory,
   ComponentInputType,
@@ -44,6 +46,81 @@ export const loadComponentsAndCategories: LoadComponentsAndCategoriesFunction =
     return { components: initComponents, categories: initCategories };
   };
 
+export type ParseStringDictionaryValueFunction = (
+  argValue: unknown,
+) => JSONObject | null;
+
+/**
+ * The key/value view of a StringDictionary argument, or null when the value
+ * cannot be shown that way and belongs in the JSON editor instead.
+ *
+ * Editable as rows:
+ *   - nothing yet (a new component)
+ *   - an object of primitives, whether stored as an object (written by the row
+ *     editor) or as a JSON string (written by the old JSON editor, and by
+ *     every workflow that already exists)
+ *
+ * Not editable as rows, so left in the JSON editor:
+ *   - a whole-field template such as {{local.components.x.returnValues.headers}},
+ *     which substitutes an entire object at run time and is not JSON as written
+ *   - text that does not parse, which is exactly the case where the builder
+ *     most needs to see and fix what they typed
+ *   - nested objects or arrays, which the row editor cannot represent and would
+ *     therefore quietly discard
+ */
+export const parseStringDictionaryValue: ParseStringDictionaryValueFunction = (
+  argValue: unknown,
+): JSONObject | null => {
+  if (argValue === null || argValue === undefined || argValue === "") {
+    return {};
+  }
+
+  let candidate: unknown = argValue;
+
+  if (typeof candidate === "string") {
+    if (candidate.trim() === "") {
+      return {};
+    }
+
+    /*
+     * JSONFunctions.parse is JSON5, which is what the components themselves use
+     * on these values (ApiComponentUtils.sanitizeArgs). Parsing more strictly
+     * here than the runtime does would push a value that works today into the
+     * JSON editor for no reason.
+     */
+    try {
+      candidate = JSONFunctions.parse(candidate);
+    } catch {
+      return null;
+    }
+  }
+
+  if (
+    typeof candidate !== "object" ||
+    candidate === null ||
+    Array.isArray(candidate)
+  ) {
+    return null;
+  }
+
+  const entries: JSONObject = candidate as JSONObject;
+
+  for (const key of Object.keys(entries)) {
+    const value: unknown = entries[key];
+
+    const isPrimitive: boolean =
+      typeof value === "string" ||
+      typeof value === "number" ||
+      typeof value === "boolean";
+
+    if (!isPrimitive) {
+      return null;
+    }
+  }
+
+  return entries;
+};
+
 type ComponentInputTypeToFormFieldTypeFunction = (
   componentInputType: ComponentInputType,
   argValue: unknown,
@@ -110,9 +187,24 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
+    /*
+     * A dictionary of strings is a list of key/value pairs — request headers,
+     * query params — and asking someone to hand-write the braces and commas
+     * for that is where a good share of workflow JSON mistakes come from. Give
+     * it the key/value row editor instead.
+     *
+     * Values written before this change are JSON strings, and a value can also
+     * be something the row editor cannot represent (a whole-field
+     * {{...}} substitution, or nested objects). parseStringDictionaryValue
+     * decides; anything it cannot represent stays in the JSON editor, so no
+     * existing value is ever silently dropped on the floor.
+     */
     if (componentInputType === ComponentInputType.StringDictionary) {
       return {
-        fieldType: FormFieldSchemaType.JSON,
+        fieldType:
+          parseStringDictionaryValue(argValue) === null
+            ? FormFieldSchemaType.JSON
+            : FormFieldSchemaType.Dictionary,
       };
     }
 

package/UI/Components/Workflow/VariableModal.tsx

@@ -2,6 +2,10 @@ import ModelListModal from "../ModelListModal/ModelListModal";
 import EqualToOrNull from "../../../Types/BaseDatabase/EqualToOrNull";
 import ObjectID from "../../../Types/ObjectID";
 import WorkflowVariable from "../../../Models/DatabaseModels/WorkflowVariable";
+import {
+  globalVariableReference,
+  variableReference,
+} from "../../../Types/Workflow/TemplateSyntax";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -43,9 +47,9 @@ const VariableModal: FunctionComponent<ComponentProps> = (
       onClose={props.onClose}
       onSave={(variables: Array<WorkflowVariable>) => {
         if (variables[0]?.workflowId) {
-          props.onSave(`{{local.variables.${variables[0]?.name}}}`);
+          props.onSave(variableReference(variables[0]?.name || ""));
         } else {
-          props.onSave(`{{global.variables.${variables[0]?.name}}}`);
+          props.onSave(globalVariableReference(variables[0]?.name || ""));
         }
       }}
     />

package/UI/Components/Workflow/Workflow.tsx

@@ -2,6 +2,13 @@ import WorkflowComponent from "./Component";
 import ComponentSettingsModal from "./ComponentSettingsModal";
 import ComponentsModal from "./ComponentsModal";
 import RunModal from "./RunModal";
+import {
+  LintGraphEdge,
+  LintGraphNode,
+  WorkflowLintResult,
+  lintWorkflowGraph,
+} from "./GraphLint";
+import { findStepNodeToOpen } from "./GraphLintSummary";
 import { loadComponentsAndCategories } from "./Utils";
 import { VoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -17,6 +24,7 @@ import React, {
   FunctionComponent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -111,7 +119,25 @@ export interface ComponentProps {
   workflowId: ObjectID;
   onRunModalUpdate: (isModalShown: boolean) => void;
   onRun: (trigger: NodeDataProp) => void;
+  /** Run one component on its own. */
+  onRunStep?: ((component: NodeDataProp) => void) | undefined;
   webhookSecretKey?: string | undefined;
+  /**
+   * Called whenever the static checks over the graph are recomputed, so the
+   * page around the canvas can show a count and decide what to do about it.
+   */
+  onLintResultChange?: ((result: WorkflowLintResult) => void) | undefined;
+  /**
+   * A react-flow node id whose settings should be opened. The issues panel
+   * lives outside the canvas but its whole point is fixing a step, and this is
+   * how it gets the builder there.
+   */
+  openStepForNodeId?: string | null | undefined;
+  /**
+   * Called once the request above has been handled — whether or not the node
+   * was still in the graph — so the page can clear it and ask again later.
+   */
+  onStepOpened?: (() => void) | undefined;
 }
 
 const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
@@ -244,6 +270,69 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     }
   }, [nodes, edges]);
 
+  /*
+   * Static checks over the graph, recomputed as it is edited.
+   *
+   * The results are deliberately NOT written back into node state. Node data is
+   * what gets persisted (Builder.saveGraph sends node.data verbatim, minus
+   * metadata), so storing lint output there would save today's warnings into
+   * the workflow itself and show them again on reload even once they were
+   * fixed. Deriving a separate array for rendering keeps the saved graph clean.
+   */
+  const lintResult: WorkflowLintResult = useMemo(() => {
+    return lintWorkflowGraph({
+      nodes: nodes as unknown as Array<LintGraphNode>,
+      edges: edges as unknown as Array<LintGraphEdge>,
+    });
+  }, [nodes, edges]);
+
+  useEffect(() => {
+    props.onLintResultChange?.(lintResult);
+  }, [lintResult]);
+
+  /*
+   * Opening a step from outside the canvas — the issues panel naming the node
+   * it is complaining about. A node that has since been deleted simply opens
+   * nothing; the request is still acknowledged so the page does not sit
+   * waiting for a step that no longer exists.
+   */
+  useEffect(() => {
+    if (!props.openStepForNodeId) {
+      return;
+    }
+
+    const nodeToOpen: Node | null = findStepNodeToOpen({
+      nodes: nodes,
+      nodeId: props.openStepForNodeId,
+    });
+
+    if (nodeToOpen) {
+      setSelectedNodeData(nodeToOpen.data as NodeDataProp);
+      setShowComponentSettingsModal(true);
+    }
+
+    props.onStepOpened?.();
+  }, [props.openStepForNodeId]);
+
+  const nodesToRender: Array<Node> = useMemo(() => {
+    return nodes.map((node: Node) => {
+      const error: string = lintResult.errorsByNodeId[node.id] || "";
+
+      // Same object when there is nothing to say, so react-flow can bail early.
+      if (!error && !node.data.error) {
+        return node;
+      }
+
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          error: error,
+        },
+      };
+    });
+  }, [nodes, lintResult]);
+
   const proOptions: ProOptions = { hideAttribution: true };
 
   const onConnect: OnConnect = useCallback(
@@ -467,7 +556,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         `}
       </style>
       <ReactFlow
-        nodes={nodes}
+        nodes={nodesToRender}
         edges={edges}
         fitView={true}
         onEdgeClick={() => {
@@ -561,9 +650,19 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
       {showComponentSettingsModal && selectedNodeData && (
         <ComponentSettingsModal
-          graphComponents={nodes.map((node: Node) => {
-            return node.data as NodeDataProp;
-          })}
+          /*
+           * Placeholder nodes are excluded here rather than defended against
+           * downstream. The "click here to add trigger" node carries a partial
+           * metadata object — no returnValues, no arguments, an empty id — and
+           * passing it on made every consumer responsible for knowing that.
+           */
+          graphComponents={nodes
+            .map((node: Node) => {
+              return node.data as NodeDataProp;
+            })
+            .filter((data: NodeDataProp) => {
+              return data.nodeType !== NodeType.PlaceholderNode;
+            })}
           workflowId={props.workflowId}
           webhookSecretKey={props.webhookSecretKey}
           component={selectedNodeData}
@@ -575,6 +674,16 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           onDelete={(component: NodeDataProp) => {
             deleteNode(component.id);
           }}
+          /*
+           * Triggers have nothing to run on their own — they are the thing
+           * that starts a run, so "run just this step" is meaningless for one.
+           */
+          onRunStep={
+            props.onRunStep &&
+            selectedNodeData.componentType !== ComponentType.Trigger
+              ? props.onRunStep
+              : undefined
+          }
           description={
             selectedNodeData && selectedNodeData.metadata.description
               ? selectedNodeData.metadata.description
@@ -584,12 +693,22 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             setShowComponentSettingsModal(false);
           }}
           onSave={(componentData: NodeDataProp) => {
-            // Update the node.
+            /*
+             * The settings modal was opened from the rendered node, so what
+             * comes back carries whatever lint message was on it. Clear that
+             * before it reaches node state — state is what gets saved, and a
+             * message about today's mistake has no business being written into
+             * the workflow.
+             */
+            const dataToStore: NodeDataProp = {
+              ...componentData,
+              error: "",
+            };
 
             setNodes((nds: Array<Node>) => {
               return nds.map((n: Node) => {
-                if (n.data.internalId === componentData.internalId) {
-                  n.data = componentData;
+                if (n.data.internalId === dataToStore.internalId) {
+                  n.data = dataToStore;
                 }
 
                 return n;