@oneuptime/common 14.0.11 → 14.0.12

package/UI/Components/Workflow/Workflow.tsx

@@ -2,15 +2,32 @@ import WorkflowComponent from "./Component";
 import ComponentSettingsModal from "./ComponentSettingsModal";
 import ComponentsModal from "./ComponentsModal";
 import RunModal from "./RunModal";
-import { getNewWorkflowNodePosition } from "./NodePlacement";
+import {
+  WorkflowCanvasRect,
+  WorkflowCanvasViewport,
+  getNewWorkflowNodePosition,
+  getViewportToRevealNode,
+} from "./NodePlacement";
 import {
   LintGraphEdge,
   LintGraphNode,
   WorkflowLintResult,
   lintWorkflowGraph,
 } from "./GraphLint";
-import { findStepNodeToOpen } from "./GraphLintSummary";
+import {
+  WorkflowNodeIssueSummary,
+  WorkflowNodeRenderData,
+  buildNodeIssueSummaries,
+  findStepNodeToOpen,
+} from "./GraphLintSummary";
+import {
+  StepGraphEdge,
+  StepGraphNode,
+  StepValueSources,
+  getStepValueSources,
+} from "./ValuePicker/StepGraph";
 import { loadComponentsAndCategories } from "./Utils";
+import Dictionary from "../../../Types/Dictionary";
 import { VoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
@@ -42,6 +59,7 @@ import ReactFlow, {
   OnConnect,
   ProOptions,
   ReactFlowInstance,
+  Viewport,
   addEdge,
   getConnectedEdges,
   updateEdge,
@@ -111,6 +129,57 @@ export const getEdgeDefaultProps: GetEdgeDefaultPropsFunction = (
   };
 };
 
+type PrefersReducedMotionFunction = () => boolean;
+
+const prefersReducedMotion: PrefersReducedMotionFunction = (): boolean => {
+  try {
+    return Boolean(
+      typeof window !== "undefined" &&
+        window.matchMedia &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    );
+  } catch {
+    return false;
+  }
+};
+
+/*
+ * How many animation frames to keep trying to focus a step that was just
+ * added. react-flow keeps a new step hidden until it has measured it, which
+ * takes a frame or two, and a hidden element cannot take focus.
+ */
+const MAX_FOCUS_ATTEMPTS: number = 60;
+
+type GetCanvasOverlaysFunction = (
+  canvas: HTMLElement,
+) => Array<WorkflowCanvasRect>;
+
+/*
+ * Where the minimap and the zoom buttons sit over the canvas, measured from
+ * the inside of its border, which is where react-flow's own coordinates
+ * start.
+ */
+const getCanvasOverlays: GetCanvasOverlaysFunction = (
+  canvas: HTMLElement,
+): Array<WorkflowCanvasRect> => {
+  const canvasBox: DOMRect = canvas.getBoundingClientRect();
+
+  return Array.from(
+    canvas.querySelectorAll<HTMLElement>(
+      ".react-flow__minimap, .react-flow__controls",
+    ),
+  ).map((overlay: HTMLElement): WorkflowCanvasRect => {
+    const box: DOMRect = overlay.getBoundingClientRect();
+
+    return {
+      left: box.left - canvasBox.left - canvas.clientLeft,
+      top: box.top - canvasBox.top - canvas.clientTop,
+      width: box.width,
+      height: box.height,
+    };
+  });
+};
+
 export interface ComponentProps {
   initialNodes: Array<Node>;
   initialEdges: Array<Edge>;
@@ -124,6 +193,25 @@ export interface ComponentProps {
   /** Run one component on its own. */
   onRunStep?: ((component: NodeDataProp) => void) | undefined;
   webhookSecretKey?: string | undefined;
+  /**
+   * Whether the user may read the webhook secret key; the builder only loads
+   * it when they may. Handed to the Webhook trigger's settings.
+   */
+  canSeeWebhookSecretKey?: boolean | undefined;
+  /**
+   * Gives the workflow a new webhook secret key: Reset URL in the Webhook
+   * trigger's settings. Resolves once the new key is saved.
+   */
+  onResetWebhookSecretKey?: (() => Promise<void>) | undefined;
+  /**
+   * The key the Incoming Email trigger's address is built from, whether the
+   * user may read it (the builder only loads it when they may), and what
+   * gives the workflow a new one: Reset address, or the first address of a
+   * workflow that has none. Handed to the Incoming Email trigger's settings.
+   */
+  incomingEmailSecretKey?: string | undefined;
+  canSeeIncomingEmailSecretKey?: boolean | undefined;
+  onResetIncomingEmailSecretKey?: (() => Promise<void>) | 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.
@@ -160,9 +248,35 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     setAllComponentMetadata(value.components);
   }, []);
 
+  /*
+   * The same arrays every time a picker opens: it organises and indexes the
+   * catalog once per array (ComponentPicker), so only the first opening
+   * pays for that.
+   */
+  const actionComponents: Array<ComponentMetadata> = useMemo(() => {
+    return allComponentMetadata.filter((comp: ComponentMetadata) => {
+      return comp.componentType === ComponentType.Component;
+    });
+  }, [allComponentMetadata]);
+
+  const triggerComponents: Array<ComponentMetadata> = useMemo(() => {
+    return allComponentMetadata.filter((comp: ComponentMetadata) => {
+      return comp.componentType === ComponentType.Trigger;
+    });
+  }, [allComponentMetadata]);
+
   const edgeUpdateSuccessful: any = useRef(true);
   const flowInstance: React.MutableRefObject<ReactFlowInstance | null> =
     useRef<ReactFlowInstance | null>(null);
+  const canvasRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+  /*
+   * The react-flow id of a step that was just added and should take the
+   * keyboard focus once the canvas has drawn it. See the effect further down.
+   */
+  const nodeIdToFocusRef: React.MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
   const [showComponentSettingsModal, setShowComponentSettingsModal] =
     useState<boolean>(false);
   const [selectedNodeData, setSelectedNodeData] = useState<NodeDataProp | null>(
@@ -171,6 +285,11 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
   type OnNodeClickFunction = (data: NodeDataProp) => void;
 
+  /*
+   * The one way into a step's settings from the canvas: a click on the step,
+   * or Enter while it has the keyboard focus. Adding a step does not open
+   * them; see addToGraph.
+   */
   const onNodeClick: OnNodeClickFunction = useCallback((data: NodeDataProp) => {
     // if placeholder node is clicked then show modal.
 
@@ -289,6 +408,16 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     props.onLintResultChange?.(lintResult);
   }, [lintResult]);
 
+  /*
+   * The same results sorted into what each step shows on the canvas: "Click to
+   * set up" while its required settings are empty, and a badge for anything
+   * else.
+   */
+  const issueSummariesByNodeId: Dictionary<WorkflowNodeIssueSummary> =
+    useMemo(() => {
+      return buildNodeIssueSummaries(lintResult.issues);
+    }, [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
@@ -313,24 +442,147 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     props.onStepOpened?.();
   }, [props.openStepForNodeId]);
 
+  /*
+   * Every step, for the settings dialog. Placeholder nodes are left out: the
+   * "click here to add trigger" node carries a partial metadata object - no
+   * return values, no arguments, an empty id - and passing it on made every
+   * consumer responsible for knowing that.
+   */
+  const graphComponents: Array<NodeDataProp> = useMemo(() => {
+    return nodes
+      .map((node: Node) => {
+        return node.data as NodeDataProp;
+      })
+      .filter((data: NodeDataProp) => {
+        return data.nodeType !== NodeType.PlaceholderNode;
+      });
+  }, [nodes]);
+
+  /*
+   * The steps the open step can read values from - the trigger and every
+   * step before it - and the ones after it, whose values never exist yet when
+   * it runs. Its value picker offers only the first.
+   */
+  const selectedStepValueSources: StepValueSources | undefined = useMemo(() => {
+    if (!selectedNodeData) {
+      return undefined;
+    }
+
+    const selectedNode: Node | undefined = nodes.find((node: Node) => {
+      return (
+        (node.data as NodeDataProp).internalId === selectedNodeData.internalId
+      );
+    });
+
+    if (!selectedNode) {
+      return undefined;
+    }
+
+    return getStepValueSources({
+      nodes: nodes as unknown as Array<StepGraphNode>,
+      edges: edges as unknown as Array<StepGraphEdge>,
+      nodeId: selectedNode.id,
+    });
+  }, [nodes, edges, selectedNodeData]);
+
   const nodesToRender: Array<Node> = useMemo(() => {
     return nodes.map((node: Node) => {
       const error: string = lintResult.errorsByNodeId[node.id] || "";
+      const issueSummary: WorkflowNodeIssueSummary | undefined =
+        issueSummariesByNodeId[node.id];
 
       // Same object when there is nothing to say, so react-flow can bail early.
-      if (!error && !node.data.error) {
+      if (!error && !issueSummary && !node.data.error) {
         return node;
       }
 
+      const data: WorkflowNodeRenderData = {
+        ...(node.data as NodeDataProp),
+        error: error,
+        issueSummary: issueSummary,
+      };
+
       return {
         ...node,
-        data: {
-          ...node.data,
-          error: error,
-        },
+        data: data,
       };
     });
-  }, [nodes, lintResult]);
+  }, [nodes, lintResult, issueSummariesByNodeId]);
+
+  /*
+   * A step that was just added takes the keyboard focus once the canvas has
+   * drawn it, so Enter opens its settings straight away. The panel it was
+   * chosen from has closed by then and focus is on nothing in particular.
+   * Focus that has gone somewhere else in the meantime is left where it is.
+   */
+  useEffect(() => {
+    if (!nodeIdToFocusRef.current) {
+      return undefined;
+    }
+
+    let frame: number | null = null;
+    let attempts: number = 0;
+
+    const focusNewNode: () => void = (): void => {
+      frame = null;
+
+      const nodeId: string | null = nodeIdToFocusRef.current;
+      const canvas: HTMLDivElement | null = canvasRef.current;
+
+      if (!nodeId || !canvas) {
+        return;
+      }
+
+      const activeElement: Element | null = document.activeElement;
+
+      if (
+        activeElement &&
+        activeElement !== document.body &&
+        !canvas.contains(activeElement)
+      ) {
+        nodeIdToFocusRef.current = null;
+        return;
+      }
+
+      const element: HTMLElement | undefined = Array.from(
+        canvas.querySelectorAll<HTMLElement>(".react-flow__node"),
+      ).find((candidate: HTMLElement) => {
+        return candidate.getAttribute("data-id") === nodeId;
+      });
+
+      if (element) {
+        /*
+         * preventScroll: focus scrolls an overflow-hidden ancestor, and
+         * react-flow's pane is one, which would shift the whole drawing
+         * under its own pan. The canvas has already brought the step into
+         * view by panning.
+         */
+        element.focus({ preventScroll: true });
+
+        if (document.activeElement === element) {
+          nodeIdToFocusRef.current = null;
+          return;
+        }
+      }
+
+      attempts++;
+
+      if (attempts >= MAX_FOCUS_ATTEMPTS) {
+        nodeIdToFocusRef.current = null;
+        return;
+      }
+
+      frame = requestAnimationFrame(focusNewNode);
+    };
+
+    focusNewNode();
+
+    return () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  }, [nodes]);
 
   const proOptions: ProOptions = { hideAttribution: true };
 
@@ -434,6 +686,43 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     props.onRunModalUpdate(showRunModal);
   }, [showRunModal]);
 
+  type RevealNodeFunction = (node: Node) => void;
+
+  /*
+   * Bring a step that was just added into view, at the zoom the builder chose
+   * and only as far as it takes. See getViewportToRevealNode.
+   */
+  const revealNode: RevealNodeFunction = (node: Node): void => {
+    const instance: ReactFlowInstance | null = flowInstance.current;
+
+    if (!instance) {
+      return;
+    }
+
+    const viewport: Viewport = instance.getViewport();
+    const canvas: HTMLDivElement | null = canvasRef.current;
+
+    const nextViewport: WorkflowCanvasViewport | null = getViewportToRevealNode(
+      {
+        position: node.position,
+        viewport: viewport,
+        canvasSize: {
+          width: canvas?.clientWidth || 0,
+          height: canvas?.clientHeight || 0,
+        },
+        overlays: canvas ? getCanvasOverlays(canvas) : [],
+      },
+    );
+
+    if (!nextViewport) {
+      return;
+    }
+
+    instance.setViewport(nextViewport, {
+      duration: prefersReducedMotion() ? 0 : 200,
+    });
+  };
+
   type AddToGraphFunction = (componentMetadata: ComponentMetadata) => void;
 
   const addToGraph: AddToGraphFunction = (
@@ -499,17 +788,70 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       });
     }
 
-    setSelectedNodeData(compToAdd.data as NodeDataProp);
-    setShowComponentSettingsModal(true);
-    flowInstance.current?.setCenter(
-      compToAdd.position.x + 128,
-      compToAdd.position.y + 100,
-      { zoom: 1, duration: 200 },
-    );
+    /*
+     * The new step lands selected and in view, and its settings stay closed
+     * until it is clicked. Opening them by themselves covered the canvas the
+     * moment anything was added, before the builder had seen where the step
+     * went or connected it, and turned adding a few steps in a row into
+     * closing a dialog after each one. A step that still needs settings says
+     * "Click to set up" on the canvas instead.
+     */
+    revealNode(compToAdd);
+    nodeIdToFocusRef.current = compToAdd.id;
+  };
+
+  type OnCanvasKeyDownFunction = (
+    event: React.KeyboardEvent<HTMLDivElement>,
+  ) => void;
+
+  /*
+   * Enter on a step opens its settings, the way a click does. react-flow makes
+   * every step a focusable button but only selects it on Enter, and a step
+   * that was just added is focused for exactly this.
+   */
+  const onCanvasKeyDown: OnCanvasKeyDownFunction = (
+    event: React.KeyboardEvent<HTMLDivElement>,
+  ): void => {
+    if (
+      event.key !== "Enter" ||
+      event.defaultPrevented ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey
+    ) {
+      return;
+    }
+
+    const target: HTMLElement = event.target as HTMLElement;
+
+    // The step itself, not something inside it or elsewhere on the canvas.
+    if (!target.classList || !target.classList.contains("react-flow__node")) {
+      return;
+    }
+
+    const nodeId: string | null = target.getAttribute("data-id");
+
+    const node: Node | undefined = nodesToRender.find((candidate: Node) => {
+      return candidate.id === nodeId;
+    });
+
+    if (!node) {
+      return;
+    }
+
+    /*
+     * Otherwise the Enter carries on into the settings once they have opened
+     * and focused their first box, and starts a new line in it.
+     */
+    event.preventDefault();
+    refreshEdges();
+    onNodeClick(node.data as NodeDataProp);
   };
 
   return (
     <div
+      ref={canvasRef}
       style={{
         height: "calc(100vh - 220px)",
         minHeight: "400px",
@@ -568,6 +910,16 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             animation: flow-dash 0.5s linear infinite !important;
             stroke-dasharray: 5 5 !important;
           }
+          /*
+           * react-flow removes the focus outline from steps, which leaves a
+           * keyboard user with no way to see which step Enter would open.
+           * Pointer focus stays unmarked, so a click draws no ring.
+           */
+          .react-flow__node.selectable:focus-visible {
+            outline: 2px solid var(--ou-chart-focus-ring, #4f46e5) !important;
+            outline-offset: 3px !important;
+            border-radius: 14px;
+          }
         `}
       </style>
       <ReactFlow
@@ -589,6 +941,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
            */
           onNodeClick(node.data as NodeDataProp);
         }}
+        onKeyDown={onCanvasKeyDown}
         proOptions={proOptions}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
@@ -647,9 +1000,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             setShowComponentsModal(false);
           }}
           categories={allComponentCategories}
-          components={allComponentMetadata.filter((comp: ComponentMetadata) => {
-            return comp.componentType === ComponentType.Component;
-          })}
+          components={actionComponents}
           onComponentClick={(component: ComponentMetadata) => {
             setShowComponentsModal(false);
 
@@ -665,9 +1016,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             setShowTriggersModal(false);
           }}
           categories={allComponentCategories}
-          components={allComponentMetadata.filter((comp: ComponentMetadata) => {
-            return comp.componentType === ComponentType.Trigger;
-          })}
+          components={triggerComponents}
           onComponentClick={(component: ComponentMetadata) => {
             setShowTriggersModal(false);
 
@@ -678,21 +1027,15 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
       {showComponentSettingsModal && selectedNodeData && (
         <ComponentSettingsModal
-          /*
-           * 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;
-            })}
+          graphComponents={graphComponents}
+          valueSources={selectedStepValueSources}
           workflowId={props.workflowId}
           webhookSecretKey={props.webhookSecretKey}
+          canSeeWebhookSecretKey={props.canSeeWebhookSecretKey}
+          onResetWebhookSecretKey={props.onResetWebhookSecretKey}
+          incomingEmailSecretKey={props.incomingEmailSecretKey}
+          canSeeIncomingEmailSecretKey={props.canSeeIncomingEmailSecretKey}
+          onResetIncomingEmailSecretKey={props.onResetIncomingEmailSecretKey}
           component={selectedNodeData}
           title={
             selectedNodeData && selectedNodeData.metadata.title
@@ -726,13 +1069,15 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
              * 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.
+             * the workflow. The same goes for the sorted summary the canvas
+             * draws its "Click to set up" and badges from.
              */
-            const dataToStore: NodeDataProp = {
+            const dataToStore: WorkflowNodeRenderData = {
               ...componentData,
               error: "",
             };
             delete dataToStore.onClick;
+            delete dataToStore.issueSummary;
 
             setNodes((nds: Array<Node>) => {
               return nds.map((n: Node) => {

package/UI/Components/Workflow/WorkflowEnabledCopy.ts

@@ -0,0 +1,55 @@
+import { WORKFLOW_ENABLED_SWITCH_LABEL } from "../../../Types/Workflow/WorkflowEnabled";
+
+/*
+ * Every sentence the Builder shows about a workflow that is turned off: the
+ * notice above the canvas, the Enabled switch in the toolbar, and the dialog
+ * that turns the workflow on when someone runs it, or one of its steps,
+ * while it is off.
+ *
+ * Each is looked up whole in the Dashboard's locale files, never assembled
+ * from translated words. A sentence with a value in it has the value as a
+ * {{placeholder}} and goes through translateTemplate, so every language puts
+ * the step's name where its own grammar wants it.
+ * WorkflowEnabledI18n.test.ts holds all seventeen locales to having every
+ * one of them, placeholders included.
+ */
+export const WorkflowEnabledCopy: {
+  readonly switchLabel: string;
+  readonly noticeTitle: string;
+  readonly noticeBody: string;
+  readonly turnOnWorkflow: string;
+  readonly onlyEditorsCanTurnOn: string;
+  readonly promptTitle: string;
+  readonly promptRunStep: string;
+  readonly promptRunWorkflow: string;
+  readonly promptTrigger: string;
+  readonly promptWhereTheSwitchIs: string;
+  readonly turnOnAndRunStep: string;
+  readonly turnOnAndRun: string;
+  readonly promptCannotTurnOnTitle: string;
+  readonly promptCannotTurnOn: string;
+  readonly close: string;
+} = {
+  // The switch's own name, as the Overview's Workflow Details call it too.
+  switchLabel: WORKFLOW_ENABLED_SWITCH_LABEL,
+  noticeTitle: "This workflow is off",
+  noticeBody:
+    "Its trigger is ignored and it can't be run or tested until you turn it on.",
+  turnOnWorkflow: "Turn on workflow",
+  onlyEditorsCanTurnOn:
+    "Only people who can edit this workflow can turn it on.",
+  promptTitle: "Turn on this workflow?",
+  promptRunStep:
+    'This workflow is off, so "{{step}}" can\'t run. Turn the workflow on to run this step now.',
+  promptRunWorkflow:
+    "This workflow is off, so it can't run. Turn it on to run it now.",
+  promptTrigger: "Once it's on, its {{trigger}} trigger starts it too.",
+  promptWhereTheSwitchIs:
+    "You can turn it off again with the Enabled switch above the canvas.",
+  turnOnAndRunStep: "Turn on and run step",
+  turnOnAndRun: "Turn on and run",
+  promptCannotTurnOnTitle: "This workflow is off",
+  promptCannotTurnOn:
+    "This workflow is off, so it can't run. Only people who can edit this workflow can turn it on.",
+  close: "Close",
+};

package/UI/Components/Workflow/WorkflowEnabledSwitch.tsx

@@ -0,0 +1,44 @@
+import Toggle from "../Toggle/Toggle";
+import { WorkflowEnabledCopy } from "./WorkflowEnabledCopy";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  isEnabled: boolean;
+  // The switch is being saved, so a second press is not sent.
+  isSaving?: boolean | undefined;
+  /*
+   * Set when the user may not turn the workflow on or off. The switch stays on
+   * screen, so the state is still read from it, but it is disabled and says
+   * which permission is missing.
+   */
+  disabledReason?: string | undefined;
+  onChange: (isEnabled: boolean) => void;
+}
+
+/*
+ * The workflow's Enabled switch, at the top of the Builder.
+ *
+ * It used to live only in the Overview's Workflow Details, behind Edit, two
+ * pages away from where a workflow is built and run, and nothing in the
+ * Builder said it existed. Here the state is in view while the workflow is
+ * edited, which matters both ways: a workflow that is off does not run, and
+ * one that is on is live, so every saved change to it takes effect at once.
+ */
+const WorkflowEnabledSwitch: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <div className="shrink-0" data-testid="workflow-enabled-switch-field">
+      <Toggle
+        title={WorkflowEnabledCopy.switchLabel}
+        value={props.isEnabled}
+        onChange={props.onChange}
+        disabled={Boolean(props.isSaving) || Boolean(props.disabledReason)}
+        tooltip={props.disabledReason}
+        dataTestId="workflow-enabled-switch"
+      />
+    </div>
+  );
+};
+
+export default WorkflowEnabledSwitch;