@oneuptime/common 14.0.11 → 14.0.12

package/UI/Components/Workflow/UseRunWatch.ts

@@ -25,6 +25,13 @@ import React, { useEffect, useRef, useState } from "react";
 export interface WatchedRunDetail extends WatchedRun {
   logs: string;
   stepTrace: WorkflowStepTrace;
+  /*
+   * When it was queued, started and finished, where the fetch asked for them.
+   * Only a downloaded run reads these: they name its file and head its log.
+   */
+  scheduledAt?: Date | null | undefined;
+  startedAt?: Date | null | undefined;
+  completedAt?: Date | null | undefined;
 }
 
 export type FetchLatestRunFunction = () => Promise<WatchedRunDetail | null>;
@@ -40,6 +47,12 @@ export interface UseRunWatchResult {
   logs: string;
   /** The run's steps so far. */
   stepTrace: WorkflowStepTrace;
+  /**
+   * The run being followed, as the last poll saw it: its id, status and
+   * times as well as its log and steps. Null until the watch has found it,
+   * and again when a new watch starts.
+   */
+  run: WatchedRunDetail | null;
   /**
    * 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
@@ -68,6 +81,7 @@ const useRunWatch: UseRunWatchFunction = (
   const [isWatching, setIsWatching] = useState<boolean>(false);
   const [logs, setLogs] = useState<string>("");
   const [stepTrace, setStepTrace] = useState<WorkflowStepTrace>(emptyTrace());
+  const [watchedRun, setWatchedRun] = useState<WatchedRunDetail | null>(null);
 
   /*
    * The page rebuilds its fetch function on every render. Reading it through a
@@ -146,6 +160,7 @@ const useRunWatch: UseRunWatchFunction = (
     if (run) {
       setLogs(run.logs);
       setStepTrace(run.stepTrace);
+      setWatchedRun(run);
     }
 
     const decision: RunWatchDecision = decideRunWatch({
@@ -193,6 +208,7 @@ const useRunWatch: UseRunWatchFunction = (
     setMessage("Starting run…");
     setLogs("");
     setStepTrace(emptyTrace());
+    setWatchedRun(null);
     setIsWatching(true);
 
     void pollRun(0, watchGeneration.current);
@@ -204,6 +220,7 @@ const useRunWatch: UseRunWatchFunction = (
     isWatching: isWatching,
     logs: logs,
     stepTrace: stepTrace,
+    run: watchedRun,
     captureRunBeforeTrigger: captureRunBeforeTrigger,
     startWatchingRun: startWatchingRun,
   };

package/UI/Components/Workflow/UseWorkflowEnabled.ts

@@ -0,0 +1,275 @@
+import API from "../../Utils/API/API";
+import React, { useCallback, useRef, useState } from "react";
+
+/*
+ * Whether the workflow open in the Builder is turned on, the switch that
+ * changes it, and what happens when someone runs the workflow, or one of its
+ * steps, while it is off.
+ *
+ * The server refuses to run a workflow that is off (QueueWorkflow), and that
+ * rule stays: off is how a workflow is built without its trigger firing on
+ * real events, and how one is paused. What changes is what the Builder does
+ * about it. It used to send the run anyway and show the refusal, "This
+ * workflow is not enabled", in an Error dialog whose only button closed it:
+ * nothing said how to turn the workflow on, or where. Now a run started while
+ * the workflow is off is held, and a dialog offers to turn the workflow on
+ * and then finish the run: the step the user asked for, with the values they
+ * gave it.
+ *
+ * The Builder knows the switch from loading the workflow, so a run is held
+ * before anything is sent. A run the server refuses anyway (someone turned
+ * the workflow off in another tab) is checked against the switch, read
+ * again, rather than against the wording of the refusal, and held the same
+ * way.
+ */
+
+export enum WorkflowRunKind {
+  // Run Workflow, from the run panel the toolbar opens.
+  Workflow = "Workflow",
+  // Run just this step, from a step's settings.
+  Step = "Step",
+}
+
+export interface WorkflowRunAttempt {
+  kind: WorkflowRunKind;
+  // The step's title, for a step. The dialog names it.
+  stepTitle?: string | undefined;
+  /*
+   * Sends the run, and rejects with the API's error when the server refuses
+   * it. Called again, as it is, once the workflow has been turned on.
+   */
+  run: () => Promise<void>;
+}
+
+export interface UseWorkflowEnabledOptions {
+  // Saves the switch. Rejects with the API's error when the save is refused.
+  saveIsEnabled: (isEnabled: boolean) => Promise<void>;
+  /*
+   * Reads the switch from the server again, after a run was refused. Null
+   * when it cannot be read.
+   */
+  fetchIsEnabled: () => Promise<boolean | null>;
+  /*
+   * Something went wrong that the page has to show: a run refused for another
+   * reason, or a switch that could not be saved.
+   */
+  onError: (message: string) => void;
+}
+
+export interface UseWorkflowEnabledResult {
+  // Null until the workflow has loaded, and whenever it is not known.
+  isEnabled: boolean | null;
+  // What the workflow said when the Builder loaded it.
+  setLoadedIsEnabled: (isEnabled: boolean | null) => void;
+  // The switch is being saved.
+  isSaving: boolean;
+  /*
+   * The toolbar's switch and the notice's Turn on workflow. The switch moves
+   * at once and moves back if the save is refused.
+   */
+  setIsEnabled: (isEnabled: boolean) => Promise<void>;
+  // Sends a run, or holds it while the workflow is off.
+  run: (attempt: WorkflowRunAttempt) => Promise<void>;
+  // The run being held. The turn-on dialog is open while there is one.
+  heldRun: WorkflowRunAttempt | null;
+  isTurningOn: boolean;
+  // Why the workflow could not be turned on, for the dialog to show.
+  turnOnError: string;
+  // Turns the workflow on, then sends the held run.
+  turnOnAndRun: () => Promise<void>;
+  // Closes the dialog. The held run is dropped.
+  dismissHeldRun: () => void;
+}
+
+const useWorkflowEnabled: (
+  options: UseWorkflowEnabledOptions,
+) => UseWorkflowEnabledResult = (
+  options: UseWorkflowEnabledOptions,
+): UseWorkflowEnabledResult => {
+  const [isEnabled, setIsEnabledState] = useState<boolean | null>(null);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [heldRun, setHeldRunState] = useState<WorkflowRunAttempt | null>(null);
+  const [isTurningOn, setIsTurningOn] = useState<boolean>(false);
+  const [turnOnError, setTurnOnError] = useState<string>("");
+
+  /*
+   * The callbacks below outlive the render that made them - a run's
+   * continuation is called after a dialog has come and gone - so they read
+   * these, not the state of the render they were made in.
+   */
+  const isEnabledRef: React.MutableRefObject<boolean | null> = useRef<
+    boolean | null
+  >(null);
+  const isSavingRef: React.MutableRefObject<boolean> = useRef<boolean>(false);
+  const heldRunRef: React.MutableRefObject<WorkflowRunAttempt | null> =
+    useRef<WorkflowRunAttempt | null>(null);
+  const isTurningOnRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+  const optionsRef: React.MutableRefObject<UseWorkflowEnabledOptions> =
+    useRef<UseWorkflowEnabledOptions>(options);
+
+  optionsRef.current = options;
+
+  type UpdateIsEnabledFunction = (value: boolean | null) => void;
+
+  const updateIsEnabled: UpdateIsEnabledFunction = (
+    value: boolean | null,
+  ): void => {
+    isEnabledRef.current = value;
+    setIsEnabledState(value);
+  };
+
+  type HoldRunFunction = (attempt: WorkflowRunAttempt | null) => void;
+
+  const holdRun: HoldRunFunction = (
+    attempt: WorkflowRunAttempt | null,
+  ): void => {
+    heldRunRef.current = attempt;
+    setHeldRunState(attempt);
+  };
+
+  type UpdateIsTurningOnFunction = (value: boolean) => void;
+
+  const updateIsTurningOn: UpdateIsTurningOnFunction = (
+    value: boolean,
+  ): void => {
+    isTurningOnRef.current = value;
+    setIsTurningOn(value);
+  };
+
+  const setLoadedIsEnabled: (value: boolean | null) => void = useCallback(
+    (value: boolean | null): void => {
+      updateIsEnabled(value);
+    },
+    [],
+  );
+
+  const setIsEnabled: (value: boolean) => Promise<void> = useCallback(
+    async (value: boolean): Promise<void> => {
+      if (isSavingRef.current || isTurningOnRef.current) {
+        return;
+      }
+
+      const previous: boolean | null = isEnabledRef.current;
+
+      if (previous === value) {
+        return;
+      }
+
+      isSavingRef.current = true;
+      setIsSaving(true);
+      updateIsEnabled(value);
+
+      try {
+        await optionsRef.current.saveIsEnabled(value);
+      } catch (err) {
+        updateIsEnabled(previous);
+        optionsRef.current.onError(API.getFriendlyMessage(err));
+      } finally {
+        isSavingRef.current = false;
+        setIsSaving(false);
+      }
+    },
+    [],
+  );
+
+  const run: (attempt: WorkflowRunAttempt) => Promise<void> = useCallback(
+    async (attempt: WorkflowRunAttempt): Promise<void> => {
+      if (isEnabledRef.current === false) {
+        setTurnOnError("");
+        holdRun(attempt);
+        return;
+      }
+
+      try {
+        await attempt.run();
+      } catch (err) {
+        /*
+         * Refused. If the workflow is off after all, that is why: ask to turn
+         * it on, as if the Builder had known. Anything else is shown as it is.
+         */
+        let isOnNow: boolean | null = null;
+
+        try {
+          isOnNow = await optionsRef.current.fetchIsEnabled();
+        } catch {
+          isOnNow = null;
+        }
+
+        if (isOnNow === false) {
+          updateIsEnabled(false);
+          setTurnOnError("");
+          holdRun(attempt);
+          return;
+        }
+
+        if (isOnNow === true) {
+          updateIsEnabled(true);
+        }
+
+        optionsRef.current.onError(API.getFriendlyMessage(err));
+      }
+    },
+    [],
+  );
+
+  const turnOnAndRun: () => Promise<void> =
+    useCallback(async (): Promise<void> => {
+      const attempt: WorkflowRunAttempt | null = heldRunRef.current;
+
+      if (!attempt || isTurningOnRef.current) {
+        return;
+      }
+
+      updateIsTurningOn(true);
+      setTurnOnError("");
+
+      try {
+        await optionsRef.current.saveIsEnabled(true);
+      } catch (err) {
+        // The dialog stays open with the reason; the run is still held.
+        setTurnOnError(API.getFriendlyMessage(err));
+        updateIsTurningOn(false);
+        return;
+      }
+
+      updateIsEnabled(true);
+      updateIsTurningOn(false);
+      holdRun(null);
+
+      /*
+       * Sent as it was asked for, and not held again: if it is refused now,
+       * whatever refused it is shown as it is.
+       */
+      try {
+        await attempt.run();
+      } catch (err) {
+        optionsRef.current.onError(API.getFriendlyMessage(err));
+      }
+    }, []);
+
+  const dismissHeldRun: () => void = useCallback((): void => {
+    // The save is already on its way; the dialog says how it went.
+    if (isTurningOnRef.current) {
+      return;
+    }
+
+    holdRun(null);
+    setTurnOnError("");
+  }, []);
+
+  return {
+    isEnabled,
+    setLoadedIsEnabled,
+    isSaving,
+    setIsEnabled,
+    run,
+    heldRun,
+    isTurningOn,
+    turnOnError,
+    turnOnAndRun,
+    dismissHeldRun,
+  };
+};
+
+export default useWorkflowEnabled;

package/UI/Components/Workflow/Utils.ts

@@ -10,10 +10,14 @@ import ComponentMetadata, {
 import Components, { Categories } from "../../../Types/Workflow/Components";
 import BaseModelComponentFactory from "../../../Types/Workflow/Components/BaseModel";
 import Entities from "../../../Models/DatabaseModels/Index";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import { ConditionValueType } from "../../../Types/Workflow/Components/Condition";
 import {
-  ConditionOperator,
-  ConditionValueType,
-} from "../../../Types/Workflow/Components/Condition";
+  CONDITION_COMPARISONS,
+  CONDITION_VALUE_TYPE_LABELS,
+  ConditionComparison,
+  ConditionComparisonKind,
+} from "../../../Types/Workflow/Components/ConditionComparison";
 
 type LoadComponentsAndCategoriesFunction = () => {
   components: Array<ComponentMetadata>;
@@ -30,16 +34,30 @@ export const loadComponentsAndCategories: LoadComponentsAndCategoriesFunction =
 
     initComponents = initComponents.concat(Components);
 
-    for (const model of Entities) {
-      initComponents = initComponents.concat(
-        BaseModelComponentFactory.getComponents(new model()),
-      );
+    for (const modelType of Entities) {
+      const model: BaseModel = new modelType();
+      const modelComponents: Array<ComponentMetadata> =
+        BaseModelComponentFactory.getComponents(model);
+
+      // A model with no workflow steps has nothing for its category to hold.
+      if (modelComponents.length === 0) {
+        continue;
+      }
+
+      initComponents = initComponents.concat(modelComponents);
+
+      /*
+       * The model's own description says what the resource is ("Manage
+       * incidents for your project"); the Add Component picker shows it when
+       * the resource is opened.
+       */
       initCategories.push({
-        name: new model().singularName || "Model",
-        description: `Interact with ${
-          new model().singularName
-        } in your workflow.`,
-        icon: new model().icon || IconProp.Database,
+        name: model.singularName || "Model",
+        description:
+          model.tableDescription ||
+          `Interact with ${model.singularName} in your workflow.`,
+        icon: model.icon || IconProp.Database,
+        tableName: model.tableName || undefined,
       });
     }
 
@@ -121,23 +139,76 @@ export const parseStringDictionaryValue: ParseStringDictionaryValueFunction = (
   return entries;
 };
 
+/*
+ * Free text that runs past a line as often as not: a message, a prompt, a
+ * value written to the run log. Each of these is a plain box that grows with
+ * what is typed, and it stays one whatever the value holds - a message with a
+ * {{...}} reference in it is still a message.
+ *
+ * Markdown is in this list on purpose. The visual Markdown editor rebuilds the
+ * whole value from what it shows on every keystroke, and on the way it rewrites
+ * anything that looks like formatting to it: the underscores in
+ * {{local.variables.my_var}} ... {{global.variables.your_var}} come back as
+ * asterisks, which breaks both references, and Slack's own _italic_ comes back
+ * as *italic*, which Slack shows in bold. A step hands its arguments on exactly
+ * as they are stored, so they have to be stored exactly as typed.
+ *
+ * AnyValue is anything at all that is typed by hand, which is text: a word, a
+ * sentence, a JSON document.
+ */
+export const MULTI_LINE_TEXT_INPUT_TYPES: ReadonlyArray<ComponentInputType> = [
+  ComponentInputType.LongText,
+  ComponentInputType.Markdown,
+  ComponentInputType.AnyValue,
+];
+
+export interface ArgumentFormFieldType {
+  fieldType: FormFieldSchemaType;
+  dropdownOptions?: Array<DropdownOption> | undefined;
+  // See Field.autoGrow. Set for the multi-line text types above.
+  autoGrow?: boolean | undefined;
+}
+
 type ComponentInputTypeToFormFieldTypeFunction = (
   componentInputType: ComponentInputType,
   argValue: unknown,
-) => {
-  fieldType: FormFieldSchemaType;
-  dropdownOptions?: Array<DropdownOption> | undefined;
-};
+) => ArgumentFormFieldType;
 
+/**
+ * The form control for an argument of a given type. This is the one place a
+ * workflow step's settings, and the Run Workflow form, decide which control a
+ * type gets; ArgumentsForm only overrides it for the editors that need the
+ * component's database table (row editors, field picker) and for the cron
+ * picker.
+ */
 export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTypeFunction =
   (
     componentInputType: ComponentInputType,
     argValue: unknown,
-  ): {
-    fieldType: FormFieldSchemaType;
-    dropdownOptions?: Array<DropdownOption> | undefined;
-  } => {
-    // first priority.
+  ): ArgumentFormFieldType => {
+    /*
+     * First priority: types whose control does not depend on the value. Each
+     * of these can hold a {{...}} reference as it is.
+     */
+
+    if (MULTI_LINE_TEXT_INPUT_TYPES.includes(componentInputType)) {
+      return {
+        fieldType: FormFieldSchemaType.LongText,
+        autoGrow: true,
+      };
+    }
+
+    /*
+     * An email body is HTML, and a reference inside it is part of that HTML.
+     * This used to sit below the {{ check, so the moment a body gained a
+     * reference it was shown in a one-line text box the next time the step was
+     * opened, and a whole email had to be read and edited through a slot.
+     */
+    if (componentInputType === ComponentInputType.HTML) {
+      return {
+        fieldType: FormFieldSchemaType.HTML,
+      };
+    }
 
     if (componentInputType === ComponentInputType.BaseModel) {
       return {
@@ -163,12 +234,6 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
-    if (componentInputType === ComponentInputType.Markdown) {
-      return {
-        fieldType: FormFieldSchemaType.Markdown,
-      };
-    }
-
     if (componentInputType === ComponentInputType.JavaScript) {
       return {
         fieldType: FormFieldSchemaType.JavaScript,
@@ -208,13 +273,12 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
-    if (componentInputType === ComponentInputType.LongText) {
-      return {
-        fieldType: FormFieldSchemaType.LongText,
-      };
-    }
-
-    // Second priority.
+    /*
+     * Second priority: a control that holds one value of its own kind - a
+     * toggle, a dropdown, a number, a date, an address - cannot show a
+     * {{...}} reference, so a value holding one is shown as the one line of
+     * text it is.
+     */
 
     if (typeof argValue === "string" && argValue.includes("{{")) {
       return {
@@ -230,13 +294,6 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
-    if (componentInputType === ComponentInputType.HTML) {
-      return {
-        fieldType: FormFieldSchemaType.HTML,
-        dropdownOptions: [],
-      };
-    }
-
     if (componentInputType === ComponentInputType.CronTab) {
       return {
         fieldType: FormFieldSchemaType.Dropdown,
@@ -277,51 +334,24 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
+    /*
+     * If / Else draws its own comparison list (Workflow/Condition); this is
+     * the same list of stored operators, in the same words, for anything else
+     * that has an Operator setting.
+     */
     if (componentInputType === ComponentInputType.Operator) {
       return {
         fieldType: FormFieldSchemaType.Dropdown,
-        dropdownOptions: [
-          {
-            label: "Equal To",
-            value: ConditionOperator.EqualTo,
-          },
-          {
-            label: "Not Equal To",
-            value: ConditionOperator.NotEqualTo,
-          },
-          {
-            label: "Greater Than",
-            value: ConditionOperator.GreaterThan,
-          },
-          {
-            label: "Less Than",
-            value: ConditionOperator.LessThan,
-          },
-          {
-            label: "Greater Than or Equal",
-            value: ConditionOperator.GreaterThanOrEqualTo,
-          },
-          {
-            label: "Less Than or Equal",
-            value: ConditionOperator.LessThanOrEqualTo,
-          },
-          {
-            label: "Contains",
-            value: ConditionOperator.Contains,
+        dropdownOptions: CONDITION_COMPARISONS.filter(
+          (comparison: ConditionComparison) => {
+            return comparison.kind !== ConditionComparisonKind.TrueOrFalse;
           },
-          {
-            label: "Does Not Contain",
-            value: ConditionOperator.DoesNotContain,
-          },
-          {
-            label: "Starts With",
-            value: ConditionOperator.StartsWith,
-          },
-          {
-            label: "Ends With",
-            value: ConditionOperator.EndsWith,
-          },
-        ],
+        ).map((comparison: ConditionComparison) => {
+          return {
+            label: comparison.label,
+            value: comparison.operator,
+          };
+        }),
       };
     }
 
@@ -339,28 +369,14 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
     if (componentInputType === ComponentInputType.ValueType) {
       return {
         fieldType: FormFieldSchemaType.Dropdown,
-        dropdownOptions: [
-          {
-            label: "Text",
-            value: ConditionValueType.Text,
-          },
-          {
-            label: "Boolean",
-            value: ConditionValueType.Boolean,
-          },
-          {
-            label: "Number",
-            value: ConditionValueType.Number,
+        dropdownOptions: Object.values(ConditionValueType).map(
+          (type: ConditionValueType) => {
+            return {
+              label: CONDITION_VALUE_TYPE_LABELS[type],
+              value: type,
+            };
           },
-          {
-            label: "Null",
-            value: ConditionValueType.Null,
-          },
-          {
-            label: "Undefined",
-            value: ConditionValueType.Undefined,
-          },
-        ],
+        ),
       };
     }