@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -6,8 +6,12 @@ import { CustomElementProps } from "../Forms/Types/Field";
 import FormValues from "../Forms/Types/FormValues";
 import ComponentValuePickerModal from "./ComponentValuePickerModal";
 import CronScheduleField from "./CronScheduleField";
+import ModelColumnEditor, { ModelColumnEditorMode } from "./ModelColumnEditor";
 import ModelFieldPicker from "./ModelFieldPicker";
-import { componentInputTypeToFormFieldType } from "./Utils";
+import {
+  componentInputTypeToFormFieldType,
+  parseStringDictionaryValue,
+} from "./Utils";
 import VariableModal from "./VariableModal";
 import Dictionary from "../../../Types/Dictionary";
 import { JSONObject } from "../../../Types/JSON";
@@ -16,15 +20,24 @@ import {
   Argument,
   ComponentInputType,
   NodeDataProp,
+  isJSON5ToleratedInputType,
 } from "../../../Types/Workflow/Component";
+import {
+  componentReturnValueReference,
+  globalVariableReference,
+  variableReference,
+} from "../../../Types/Workflow/TemplateSyntax";
 import { DropdownOption } from "../Dropdown/Dropdown";
+import EqualToOrNull from "../../../Types/BaseDatabase/EqualToOrNull";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
 import Workflow from "../../../Models/DatabaseModels/Workflow";
+import WorkflowVariable from "../../../Models/DatabaseModels/WorkflowVariable";
 import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -53,6 +66,96 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
 
   const [selectedArgId, setSelectedArgId] = useState<string>("");
 
+  /*
+   * Arguments flagged isAdvanced are collapsed behind a disclosure, so the
+   * settings panel opens on the two or three fields that actually decide what
+   * the step does rather than on every knob it has. A required argument is
+   * never collapsed no matter how it is flagged: BasicForm skips validation
+   * for a field hidden by showIf, so hiding a required one would let an
+   * incomplete step save cleanly.
+   */
+  const collapsibleAdvancedArguments: Array<Argument> = (
+    component.metadata.arguments || []
+  ).filter((arg: Argument) => {
+    return Boolean(arg.isAdvanced) && !arg.required;
+  });
+
+  const hasValueForArgument: (arg: Argument) => boolean = (
+    arg: Argument,
+  ): boolean => {
+    const value: unknown = component.arguments
+      ? component.arguments[arg.id]
+      : undefined;
+
+    if (value === undefined || value === null) {
+      return false;
+    }
+
+    if (typeof value === "string") {
+      return value.trim() !== "";
+    }
+
+    if (typeof value === "object") {
+      return Object.keys(value as JSONObject).length > 0;
+    }
+
+    return true;
+  };
+
+  /*
+   * Open on load when something down there is already set, so an existing
+   * configuration is never hidden from the person who comes back to read it.
+   */
+  const [showAdvanced, setShowAdvanced] = useState<boolean>(
+    collapsibleAdvancedArguments.some(hasValueForArgument),
+  );
+
+  const isCollapsibleAdvanced: (arg: Argument) => boolean = (
+    arg: Argument,
+  ): boolean => {
+    return collapsibleAdvancedArguments.some((advancedArg: Argument) => {
+      return advancedArg.id === arg.id;
+    });
+  };
+
+  /*
+   * StringDictionary arguments render as key/value rows, and the row editor
+   * needs a real object. Every workflow written before that change stored a
+   * JSON string, so parse those on the way into the form. Anything
+   * parseStringDictionaryValue declines stays a string and keeps the JSON
+   * editor (see componentInputTypeToFormFieldType), so the two always agree.
+   */
+  const formInitialValues: JSONObject = { ...(component.arguments || {}) };
+
+  for (const arg of component.metadata.arguments || []) {
+    if (arg.type !== ComponentInputType.StringDictionary) {
+      continue;
+    }
+
+    const parsed: JSONObject | null = parseStringDictionaryValue(
+      formInitialValues[arg.id],
+    );
+
+    if (parsed !== null) {
+      formInitialValues[arg.id] = parsed;
+    }
+  }
+
+  /*
+   * Everyday settings first, collapsible ones last, each group keeping its
+   * declared order. Without this an advanced argument declared in the middle
+   * would pop into the middle of the form when the disclosure opens.
+   */
+  const orderedArguments: Array<Argument> = [
+    ...(component.metadata.arguments || []).filter((arg: Argument) => {
+      return !isCollapsibleAdvanced(arg);
+    }),
+    ...collapsibleAdvancedArguments,
+  ];
+
+  const firstAdvancedArgumentIndex: number =
+    orderedArguments.length - collapsibleAdvancedArguments.length;
+
   /*
    * Workflows in the current project, used to populate dropdowns for any
    * argument of type WorkflowSelect (e.g. the "Workflow" field on the
@@ -135,6 +238,121 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
     // Only re-fetch when the component in the settings panel changes identity.
   }, [component.id, hasWorkflowSelectArg]);
 
+  /*
+   * Every reference the builder could type into a row, offered as autocomplete
+   * on any row whose column has no suggestions of its own.
+   *
+   * The row editor replaces the "pick this value from other component or from
+   * variable" footer on the arguments it takes over, and a create payload is
+   * almost always assembled out of a trigger's return values - so without this
+   * the row editor would be a step backwards for exactly the case it exists to
+   * serve. The old footer cannot simply be kept: it appends the reference to
+   * the whole field, turning {"title":"x"} into {"title":"x"}{{...}}, which is
+   * not JSON and which the linter rejects immediately.
+   */
+  const hasColumnEditorArgument: boolean = Boolean(
+    component.metadata.tableName &&
+      component.metadata.arguments?.some((arg: Argument) => {
+        return (
+          arg.type === ComponentInputType.Query ||
+          arg.type === ComponentInputType.JSON ||
+          arg.type === ComponentInputType.BaseModel
+        );
+      }),
+  );
+
+  const componentReferenceSuggestions: Array<string> = useMemo(() => {
+    const suggestions: Array<string> = [];
+
+    for (const graphComponent of props.graphComponents || []) {
+      // A component cannot reference its own output.
+      if (graphComponent.id === component.id) {
+        continue;
+      }
+
+      /*
+       * Placeholder nodes carry a partial metadata object with no return
+       * values at all, so this cannot assume the array is there.
+       */
+      for (const returnValue of graphComponent.metadata?.returnValues || []) {
+        suggestions.push(
+          componentReturnValueReference(graphComponent.id, returnValue.id),
+        );
+      }
+    }
+
+    return suggestions;
+  }, [props.graphComponents, component.id]);
+
+  const [variableSuggestions, setVariableSuggestions] = useState<Array<string>>(
+    [],
+  );
+
+  useEffect(() => {
+    if (!hasColumnEditorArgument) {
+      return;
+    }
+
+    let cancelled: boolean = false;
+
+    const loadVariables: () => Promise<void> = async (): Promise<void> => {
+      try {
+        const result: ListResult<WorkflowVariable> =
+          await ModelAPI.getList<WorkflowVariable>({
+            modelType: WorkflowVariable,
+            // Null workflowId is a project-wide variable, usable from any workflow.
+            query: {
+              workflowId: new EqualToOrNull(props.workflowId.toString()),
+            },
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            select: {
+              _id: true,
+              name: true,
+              workflowId: true,
+            },
+            sort: {
+              name: "Ascending" as any,
+            },
+          });
+
+        if (cancelled) {
+          return;
+        }
+
+        setVariableSuggestions(
+          result.data
+            .filter((variable: WorkflowVariable) => {
+              return Boolean(variable.name);
+            })
+            .map((variable: WorkflowVariable) => {
+              return variable.workflowId
+                ? variableReference(variable.name as string)
+                : globalVariableReference(variable.name as string);
+            }),
+        );
+      } catch {
+        /*
+         * Swallow: suggestions are an accelerator, not the only way in. The
+         * builder can still type a reference by hand.
+         */
+        if (!cancelled) {
+          setVariableSuggestions([]);
+        }
+      }
+    };
+
+    void loadVariables();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hasColumnEditorArgument, props.workflowId.toString()]);
+
+  const referenceSuggestions: Array<string> = useMemo(() => {
+    return [...componentReferenceSuggestions, ...variableSuggestions];
+  }, [componentReferenceSuggestions, variableSuggestions]);
+
   useEffect(() => {
     props.onHasFormValidationErrors(hasFormValidationErrors);
   }, [hasFormValidationErrors]);
@@ -163,7 +381,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
               hideSubmitButton={true}
               ref={formRef}
               initialValues={{
-                ...(component.arguments || {}),
+                ...formInitialValues,
               }}
               onChange={(values: FormValues<JSONObject>) => {
                 setComponent({
@@ -175,16 +393,23 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                 });
               }}
               onFormValidationErrorChanged={(hasError: boolean) => {
-                if (hasFormValidationErrors["id"] !== hasError) {
+                /*
+                 * Keyed "arguments", not "id": the Identifier field in the
+                 * settings modal reports into the same dictionary under "id",
+                 * so both forms were overwriting each other. Typing in the
+                 * Identifier box cleared an outstanding argument error and
+                 * re-enabled Save on a component that was still invalid.
+                 */
+                if (hasFormValidationErrors["arguments"] !== hasError) {
                   setHasFormValidationErrors({
                     ...hasFormValidationErrors,
-                    id: hasError,
+                    arguments: hasError,
                   });
                 }
               }}
               fields={
                 component.metadata.arguments &&
-                component.metadata.arguments.map((arg: Argument) => {
+                orderedArguments.map((arg: Argument, argIndex: number) => {
                   const isWorkflowSelect: boolean =
                     arg.type === ComponentInputType.WorkflowSelect;
 
@@ -207,6 +432,42 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                   const useCronPicker: boolean =
                     arg.type === ComponentInputType.CronTab;
 
+                  /*
+                   * Query arguments (which records does this act on) and the
+                   * write payload (which values does it set) are both keyed on
+                   * the model's columns, so both get the row editor backed by
+                   * the model schema. Same tableName requirement as the field
+                   * picker.
+                   *
+                   * The write payload is typed JSON, not BaseModel: Create One's
+                   * "json" and Update's "data" are declared
+                   * ComponentInputType.JSON in Types/Workflow/Components/BaseModel,
+                   * and BaseModel appears there only as a *return* value. Keying
+                   * this branch on BaseModel alone therefore never matched a real
+                   * component, and every create and update opened on a bare code
+                   * editor. Retyping those arguments would be the smaller-looking
+                   * fix and is the wrong one - it moves them into
+                   * JSON5_TOLERANT_INPUT_TYPES and changes how RunWorkflow parses
+                   * them. Widening the predicate leaves every runtime path alone.
+                   *
+                   * tableName is set only by the database component generator, and
+                   * the only JSON-typed arguments on those components are the two
+                   * above, so this cannot reach a JSON argument on any other
+                   * component.
+                   *
+                   * JSONArray (Create Many) is deliberately not included: it holds
+                   * a list of records, which rows cannot represent.
+                   */
+                  const columnEditorMode: ModelColumnEditorMode | undefined =
+                    !component.metadata.tableName
+                      ? undefined
+                      : arg.type === ComponentInputType.Query
+                        ? ModelColumnEditorMode.Query
+                        : arg.type === ComponentInputType.JSON ||
+                            arg.type === ComponentInputType.BaseModel
+                          ? ModelColumnEditorMode.Record
+                          : undefined;
+
                   let baseField: {
                     fieldType: import("../Forms/Types/FormFieldSchemaType").default;
                     dropdownOptions?: Array<DropdownOption> | undefined;
@@ -216,7 +477,30 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                     ) => ReactElement | undefined;
                   };
 
-                  if (useFieldPicker) {
+                  if (columnEditorMode) {
+                    baseField = {
+                      fieldType: FormFieldSchemaType.CustomComponent,
+                      getCustomElement: (
+                        _values: FormValues<JSONObject>,
+                        customProps: CustomElementProps,
+                      ): ReactElement => {
+                        return (
+                          <ModelColumnEditor
+                            tableName={component.metadata.tableName as string}
+                            mode={columnEditorMode}
+                            initialValue={customProps.initialValue}
+                            onChange={(value: string) => {
+                              void customProps.onChange?.(value);
+                            }}
+                            placeholder={customProps.placeholder}
+                            error={customProps.error}
+                            tabIndex={customProps.tabIndex}
+                            valueSuggestions={referenceSuggestions}
+                          />
+                        );
+                      },
+                    };
+                  } else if (useFieldPicker) {
                     baseField = {
                       fieldType: FormFieldSchemaType.CustomComponent,
                       getCustomElement: (
@@ -285,10 +569,29 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                    * and a schedule can't reference component return values).
                    */
                   const showVariableFooter: boolean =
-                    !isWorkflowSelect && !useFieldPicker && !useCronPicker;
+                    !isWorkflowSelect &&
+                    !useFieldPicker &&
+                    !useCronPicker &&
+                    !columnEditorMode;
+
+                  const isAdvanced: boolean = isCollapsibleAdvanced(arg);
 
                   return {
                     title: `${arg.name}`,
+                    /*
+                     * The heading sits on the first advanced field, so the
+                     * disclosure reads as a labelled section rather than as a
+                     * run of extra inputs appearing out of nowhere.
+                     */
+                    sectionTitle:
+                      isAdvanced && argIndex === firstAdvancedArgumentIndex
+                        ? "Advanced"
+                        : undefined,
+                    showIf: isAdvanced
+                      ? (): boolean => {
+                          return showAdvanced;
+                        }
+                      : undefined,
                     footerElement: showVariableFooter ? (
                       <div className="text-gray-500">
                         <p className="text-sm">
@@ -323,12 +626,37 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                     },
                     required: arg.required,
                     placeholder: arg.placeholder,
+                    /*
+                     * Some argument types are read back with JSON5 rather than
+                     * JSON, so the check has to be no stricter than the parser
+                     * that will actually see the value.
+                     */
+                    allowJSON5: isJSON5ToleratedInputType(arg.type),
                     ...baseField,
                   };
                 })
               }
             />
           )}
+
+        {collapsibleAdvancedArguments.length > 0 && (
+          <div className="mt-3">
+            <button
+              type="button"
+              aria-expanded={showAdvanced}
+              className="text-sm underline text-blue-500 hover:text-blue-600 cursor-pointer"
+              onClick={() => {
+                setShowAdvanced(!showAdvanced);
+              }}
+            >
+              {showAdvanced
+                ? "Hide advanced settings"
+                : `Show ${collapsibleAdvancedArguments.length} advanced setting${
+                    collapsibleAdvancedArguments.length === 1 ? "" : "s"
+                  }`}
+            </button>
+          </div>
+        )}
       </div>
       {showVariableModal && (
         <VariableModal
@@ -350,7 +678,12 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
 
       {showComponentPickerModal && (
         <ComponentValuePickerModal
-          components={props.graphComponents}
+          /* A component cannot read its own output. */
+          components={(props.graphComponents || []).filter(
+            (graphComponent: NodeDataProp) => {
+              return graphComponent.id !== component.id;
+            },
+          )}
           onClose={() => {
             setShowComponentPickerModal(false);
           }}

package/UI/Components/Workflow/Component.tsx

@@ -372,35 +372,37 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           </div>
         )}
 
-      {/* Error indicator */}
+      {/* Error indicator — hover it to read what is actually wrong. */}
       {!props.data.isPreview && hasError && (
-        <div
-          style={{
-            position: "absolute",
-            top: "8px",
-            right: "8px",
-            zIndex: 10,
-            width: "22px",
-            height: "22px",
-            borderRadius: "50%",
-            backgroundColor:
-              "color-mix(in srgb, #ef4444 15%, var(--ou-surface-primary, #ffffff))",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            border: "1px solid rgb(248 113 113 / 45%)",
-          }}
-        >
-          <Icon
-            icon={IconProp.Alert}
+        <Tooltip text={props.data.error}>
+          <div
             style={{
-              color: "#ef4444",
-              width: "0.75rem",
-              height: "0.75rem",
+              position: "absolute",
+              top: "8px",
+              right: "8px",
+              zIndex: 10,
+              width: "22px",
+              height: "22px",
+              borderRadius: "50%",
+              backgroundColor:
+                "color-mix(in srgb, #ef4444 15%, var(--ou-surface-primary, #ffffff))",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "1px solid rgb(248 113 113 / 45%)",
             }}
-            thick={ThickProp.Thick}
-          />
-        </div>
+          >
+            <Icon
+              icon={IconProp.Alert}
+              style={{
+                color: "#ef4444",
+                width: "0.75rem",
+                height: "0.75rem",
+              }}
+              thick={ThickProp.Thick}
+            />
+          </div>
+        </Tooltip>
       )}
 
       {/* Header bar with gradient */}

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -1,10 +1,18 @@
 import { ReturnValue } from "../../../Types/Workflow/Component";
+import { componentReturnValueReference } from "../../../Types/Workflow/TemplateSyntax";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   returnValues: Array<ReturnValue>;
   name: string;
   description: string;
+  /*
+   * This step's identifier. When given, each return value also shows the exact
+   * reference another step would use to read it. That string was previously
+   * obtainable only by opening the value picker on some other component, so the
+   * syntax had no home on the component that owns the value.
+   */
+  componentId?: string | undefined;
 }
 
 const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
@@ -78,6 +86,24 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                       {returnValue.description}
                     </p>
                   )}
+                  {props.componentId && (
+                    <code
+                      style={{
+                        display: "block",
+                        marginTop: "0.25rem",
+                        fontSize: "0.6875rem",
+                        color: "var(--ou-text-subtle, #94a3b8)",
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                        overflowWrap: "anywhere",
+                      }}
+                    >
+                      {componentReturnValueReference(
+                        props.componentId,
+                        returnValue.id,
+                      )}
+                    </code>
+                  )}
                 </div>
                 <span
                   style={{

package/UI/Components/Workflow/ComponentSettingsModal.tsx

@@ -22,6 +22,11 @@ export interface ComponentProps {
   onClose: () => void;
   onSave: (component: NodeDataProp) => void;
   onDelete: (component: NodeDataProp) => void;
+  /**
+   * Run this one step now. Absent for triggers, which have nothing to run on
+   * their own.
+   */
+  onRunStep?: ((component: NodeDataProp) => void) | undefined;
   component: NodeDataProp;
   graphComponents: Array<NodeDataProp>;
   workflowId: ObjectID;
@@ -67,6 +72,8 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
   >({});
   const [showDeleteConfirmation, setShowDeleteConfirmation] =
     useState<boolean>(false);
+  const [showRunStepConfirmation, setShowRunStepConfirmation] =
+    useState<boolean>(false);
 
   const settingsSection: ReactElement = (
     <SectionCard icon={IconProp.Settings} title="Settings">
@@ -121,6 +128,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
         documentationLink={component.metadata.documentationLink}
         workflowId={props.workflowId}
         webhookSecretKey={props.webhookSecretKey}
+        tableName={component.metadata.tableName}
       />
     </SectionCard>
   ) : null;
@@ -166,6 +174,7 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
         name=""
         description="Data this step makes available downstream."
         returnValues={component.metadata.returnValues}
+        componentId={component.id}
       />
     </SectionCard>
   ) : null;
@@ -188,17 +197,71 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
       modalWidth={ModalWidth.Large}
       disableSubmitButton={hasErrors}
       leftFooterElement={
-        <Button
-          title="Delete"
-          icon={IconProp.Trash}
-          buttonStyle={ButtonStyleType.DANGER_OUTLINE}
-          onClick={() => {
-            setShowDeleteConfirmation(true);
-          }}
-        />
+        /*
+         * Say why Save is off. Form errors are only rendered under a field
+         * once it has been touched, so a component opened with a setting that
+         * was already invalid — a stored JSON value that does not parse, say —
+         * otherwise presents a dead button and no explanation anywhere.
+         */
+        hasErrors ? (
+          <div className="flex items-center gap-3">
+            <Button
+              title="Delete"
+              icon={IconProp.Trash}
+              buttonStyle={ButtonStyleType.DANGER_OUTLINE}
+              onClick={() => {
+                setShowDeleteConfirmation(true);
+              }}
+            />
+            <span className="text-sm text-red-600">
+              Some settings need fixing before this can be saved.
+            </span>
+          </div>
+        ) : (
+          <div className="flex items-center gap-3">
+            <Button
+              title="Delete"
+              icon={IconProp.Trash}
+              buttonStyle={ButtonStyleType.DANGER_OUTLINE}
+              onClick={() => {
+                setShowDeleteConfirmation(true);
+              }}
+            />
+            {props.onRunStep && (
+              <Button
+                title="Run just this step"
+                icon={IconProp.Play}
+                buttonStyle={ButtonStyleType.OUTLINE}
+                onClick={() => {
+                  setShowRunStepConfirmation(true);
+                }}
+              />
+            )}
+          </div>
+        )
       }
     >
       <>
+        {showRunStepConfirmation && (
+          <ConfirmModal
+            title={`Run this step now?`}
+            /*
+             * Worded as what it is. There is no dry run: the step executes for
+             * real, and anything it sends or changes is not undone afterwards.
+             */
+            description={`This runs "${component.metadata.title}" for real, on its own. Anything it sends, writes or deletes actually happens. Values it reads from other steps will be empty, because nothing else runs.`}
+            onClose={() => {
+              setShowRunStepConfirmation(false);
+            }}
+            submitButtonText="Run this step"
+            onSubmit={() => {
+              setShowRunStepConfirmation(false);
+              props.onRunStep?.(component);
+            }}
+            submitButtonType={ButtonStyleType.NORMAL}
+          />
+        )}
+
         {showDeleteConfirmation && (
           <ConfirmModal
             title={`Delete ${component.metadata.componentType}`}
@@ -223,12 +286,19 @@ const ComponentSettingsModal: FunctionComponent<ComponentProps> = (
          */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div className="md:col-span-2 space-y-4">{settingsSection}</div>
+          {/*
+           * Documentation goes last. Inputs, outputs and returns are generated
+           * from this component's own metadata and are therefore always exactly
+           * about the step on screen; the documentation is a shared file
+           * covering a whole family. Reading order should follow accuracy, and
+           * the shared file is also much the tallest of the four.
+           */}
           <div className="md:col-span-1 space-y-4">
             {idSection}
-            {documentationSection}
             {inputsSection}
             {outputsSection}
             {returnsSection}
+            {documentationSection}
           </div>
         </div>
       </>