@oneuptime/common 12.0.6 → 12.0.8

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,6 +20,7 @@ import {
   Argument,
   ComponentInputType,
   NodeDataProp,
+  isJSON5ToleratedInputType,
 } from "../../../Types/Workflow/Component";
 import { DropdownOption } from "../Dropdown/Dropdown";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
@@ -53,6 +58,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
@@ -163,7 +258,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
               hideSubmitButton={true}
               ref={formRef}
               initialValues={{
-                ...(component.arguments || {}),
+                ...formInitialValues,
               }}
               onChange={(values: FormValues<JSONObject>) => {
                 setComponent({
@@ -175,16 +270,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 +309,25 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                   const useCronPicker: boolean =
                     arg.type === ComponentInputType.CronTab;
 
+                  /*
+                   * Query arguments (which records does this act on) and
+                   * BaseModel arguments (which values does it write) 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.
+                   *
+                   * BaseModelArray 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.BaseModel
+                          ? ModelColumnEditorMode.Record
+                          : undefined;
+
                   let baseField: {
                     fieldType: import("../Forms/Types/FormFieldSchemaType").default;
                     dropdownOptions?: Array<DropdownOption> | undefined;
@@ -216,7 +337,29 @@ 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}
+                          />
+                        );
+                      },
+                    };
+                  } else if (useFieldPicker) {
                     baseField = {
                       fieldType: FormFieldSchemaType.CustomComponent,
                       getCustomElement: (
@@ -285,10 +428,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 +485,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

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/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">
@@ -188,17 +195,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}`}