@oneuptime/common 14.0.11 → 14.0.12

package/build/dist/UI/Components/Workflow/ArgumentsForm.js

@@ -1,29 +1,72 @@
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
+import DictionaryForm, { ValueType } from "../Dictionary/Dictionary";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import BasicForm from "../Forms/BasicForm";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
-import ComponentValuePickerModal from "./ComponentValuePickerModal";
+import ConditionEditor from "./Condition/ConditionEditor";
 import CronScheduleField from "./CronScheduleField";
 import ModelColumnEditor, { ModelColumnEditorMode, RecordIntent, } from "./ModelColumnEditor";
 import ModelFieldPicker from "./ModelFieldPicker";
 import { componentInputTypeToFormFieldType, parseStringDictionaryValue, } from "./Utils";
-import VariableModal from "./VariableModal";
+import { ArgumentControl, argumentControlFor, } from "./ValuePicker/ArgumentControl";
+import InsertValueButton from "./ValuePicker/InsertValueButton";
+import { containsTemplateExpression, referenceForJSON, } from "./ValuePicker/TemplateText";
+import { ValuePickerProvider } from "./ValuePicker/ValuePickerContext";
+import ValueSingleField, { ValueSingleFieldKind, } from "./ValuePicker/ValueSingleField";
+import ValueTextField from "./ValuePicker/ValueTextField";
+import Email from "../../../Types/Email";
+import Exception from "../../../Types/Exception/Exception";
+import URL from "../../../Types/API/URL";
 import { ComponentInputType, isJSON5ToleratedInputType, } from "../../../Types/Workflow/Component";
-import { componentReturnValueReference, globalVariableReference, variableReference, } from "../../../Types/Workflow/TemplateSyntax";
-import EqualToOrNull from "../../../Types/BaseDatabase/EqualToOrNull";
+import ComponentID from "../../../Types/Workflow/ComponentID";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import Workflow from "../../../Models/DatabaseModels/Workflow";
-import WorkflowVariable from "../../../Models/DatabaseModels/WorkflowVariable";
-import React, { useEffect, useMemo, useRef, useState, } from "react";
+import React, { useEffect, useRef, useState, } from "react";
+const SINGLE_FIELD_KINDS = {
+    [ArgumentControl.Number]: ValueSingleFieldKind.Number,
+    [ArgumentControl.Password]: ValueSingleFieldKind.Password,
+    [ArgumentControl.Boolean]: ValueSingleFieldKind.Boolean,
+    [ArgumentControl.Date]: ValueSingleFieldKind.Date,
+    [ArgumentControl.DateTime]: ValueSingleFieldKind.DateTime,
+};
+/*
+ * A setting's help: whether it is required, then what it is for. Under the
+ * label for most settings, and under a switch's name beside it.
+ */
+const describeArgument = (arg) => {
+    return `${arg.required ? "Required" : "Optional"}. ${arg.description}`;
+};
+/*
+ * The checks a URL or an email box made of what was typed in it. They only
+ * apply to a value typed out in full: one with a reference in it is not
+ * known until the step runs.
+ */
+export const validateTypedValue = (type, value) => {
+    if (typeof value !== "string" || value.trim() === "") {
+        return null;
+    }
+    if (containsTemplateExpression(value)) {
+        return null;
+    }
+    if (type === ComponentInputType.URL) {
+        try {
+            URL.fromString(value.trim());
+        }
+        catch (err) {
+            return err instanceof Exception ? err.getMessage() : "URL is not valid.";
+        }
+    }
+    if (type === ComponentInputType.Email && !Email.isValid(value.trim())) {
+        return "Email is not valid.";
+    }
+    return null;
+};
 const ArgumentsForm = (props) => {
-    var _a, _b;
+    var _a;
     const formRef = useRef(null);
     const [component, setComponent] = useState(props.component);
-    const [showVariableModal, setShowVariableModal] = useState(false);
-    const [showComponentPickerModal, setShowComponentPickerModal] = useState(false);
     const [hasFormValidationErrors, setHasFormValidationErrors] = useState({});
-    const [selectedArgId, setSelectedArgId] = useState("");
     /*
      * Arguments flagged isAdvanced are collapsed behind a disclosure, so the
      * settings panel opens on the two or three fields that actually decide what
@@ -160,105 +203,216 @@ const ArgumentsForm = (props) => {
         };
         // 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(component.metadata.tableName &&
-        ((_b = component.metadata.arguments) === null || _b === void 0 ? void 0 : _b.some((arg) => {
-            return (arg.type === ComponentInputType.Query ||
-                arg.type === ComponentInputType.JSON ||
-                arg.type === ComponentInputType.BaseModel);
-        })));
-    const componentReferenceSuggestions = useMemo(() => {
-        var _a;
-        const suggestions = [];
-        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 ((_a = graphComponent.metadata) === null || _a === void 0 ? void 0 : _a.returnValues) || []) {
-                suggestions.push(componentReturnValueReference(graphComponent.id, returnValue.id));
-            }
-        }
-        return suggestions;
-    }, [props.graphComponents, component.id]);
-    const [variableSuggestions, setVariableSuggestions] = useState([]);
-    useEffect(() => {
-        if (!hasColumnEditorArgument) {
-            return;
-        }
-        let cancelled = false;
-        const loadVariables = async () => {
-            try {
-                const result = await ModelAPI.getList({
-                    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",
-                    },
-                });
-                if (cancelled) {
-                    return;
-                }
-                setVariableSuggestions(result.data
-                    .filter((variable) => {
-                    return Boolean(variable.name);
-                })
-                    .map((variable) => {
-                    return variable.workflowId
-                        ? variableReference(variable.name)
-                        : globalVariableReference(variable.name);
-                }));
-            }
-            catch (_a) {
-                /*
-                 * 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 = useMemo(() => {
-        return [...componentReferenceSuggestions, ...variableSuggestions];
-    }, [componentReferenceSuggestions, variableSuggestions]);
     useEffect(() => {
         props.onHasFormValidationErrors(hasFormValidationErrors);
     }, [hasFormValidationErrors]);
     useEffect(() => {
         props.onFormChange(component);
     }, [component]);
-    return (React.createElement("div", null,
+    const fieldForArgument = (arg, argIndex) => {
+        const storedValue = component.arguments && component.arguments[arg.id]
+            ? component.arguments[arg.id]
+            : null;
+        /*
+         * Database Select args (the "Select Fields" / "Listen on" trigger inputs)
+         * get a tree-style field picker backed by the model's schema, instead of
+         * a raw JSON textarea. We need a tableName on the component metadata to
+         * fetch the column list; without it, fall back to the JSON editor.
+         */
+        if (arg.type === ComponentInputType.Select &&
+            Boolean(component.metadata.tableName)) {
+            return {
+                fieldType: FormFieldSchemaType.CustomComponent,
+                getCustomElement: (_values, customProps) => {
+                    return (React.createElement(ModelFieldPicker, { tableName: component.metadata.tableName, initialValue: customProps.initialValue, onChange: (value) => {
+                            var _a;
+                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
+                        }, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex }));
+                },
+            };
+        }
+        /*
+         * 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. Retyping those arguments would move them into
+         * JSON5_TOLERANT_INPUT_TYPES and change how RunWorkflow parses them, so
+         * the predicate is widened instead.
+         *
+         * 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.
+         *
+         * Each of the row editor's value cells is a value picker of its own.
+         */
+        const columnEditorMode = !component
+            .metadata.tableName
+            ? undefined
+            : arg.type === ComponentInputType.Query
+                ? ModelColumnEditorMode.Query
+                : arg.type === ComponentInputType.JSON ||
+                    arg.type === ComponentInputType.BaseModel
+                    ? ModelColumnEditorMode.Record
+                    : undefined;
+        if (columnEditorMode) {
+            return {
+                fieldType: FormFieldSchemaType.CustomComponent,
+                getCustomElement: (_values, customProps) => {
+                    return (React.createElement(ModelColumnEditor, { tableName: component.metadata.tableName, mode: columnEditorMode, 
+                        /*
+                         * A create writes a whole record, so it opens with a row for
+                         * every column it must be given. An update legitimately writes
+                         * one column. The create payload is the argument called "json"
+                         * (BaseModel components); an update's is "data".
+                         */
+                        recordIntent: arg.id === "json" ? RecordIntent.Create : RecordIntent.Update, initialValue: customProps.initialValue, onChange: (value) => {
+                            var _a;
+                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
+                        }, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex }));
+                },
+            };
+        }
+        /*
+         * The Schedule trigger's CronTab argument gets a dedicated cron picker
+         * (presets, custom expression with live preview, or a variable) instead
+         * of a bare dropdown.
+         */
+        if (arg.type === ComponentInputType.CronTab) {
+            return {
+                fieldType: FormFieldSchemaType.CustomComponent,
+                getCustomElement: (_values, customProps) => {
+                    return (React.createElement(CronScheduleField, { initialValue: customProps.initialValue, onChange: (value) => {
+                            var _a;
+                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
+                        }, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex }));
+                },
+            };
+        }
+        const control = argumentControlFor({
+            type: arg.type,
+            value: storedValue,
+            isRowsDictionary: arg.type === ComponentInputType.StringDictionary &&
+                parseStringDictionaryValue(storedValue) !== null,
+        });
+        /*
+         * The first setting takes the focus as the dialog opens, as BasicForm
+         * gives it to a first text box: the keyboard starts where the step is set
+         * up.
+         */
+        const autoFocus = argIndex === 0;
+        if (control === ArgumentControl.Text ||
+            control === ArgumentControl.MultiLineText) {
+            return {
+                fieldType: FormFieldSchemaType.CustomComponent,
+                getCustomElement: (_values, customProps) => {
+                    return (React.createElement(ValueTextField, { value: customProps.initialValue, onChange: (value) => {
+                            var _a;
+                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
+                        }, multiline: control === ArgumentControl.MultiLineText, placeholder: customProps.placeholder, ariaLabelledby: customProps.ariaLabelledby, error: customProps.error, autoFocus: autoFocus, tabIndex: customProps.tabIndex, dataTestId: `workflow-argument-${arg.id}`, onBlur: customProps.onBlur }));
+                },
+            };
+        }
+        const singleKind = SINGLE_FIELD_KINDS[control];
+        if (singleKind) {
+            /*
+             * A switch is one row, as a switch field is everywhere else: the
+             * switch, its name beside it and its help under the name. The form
+             * draws no label above it.
+             */
+            const isSwitch = singleKind === ValueSingleFieldKind.Boolean;
+            return {
+                fieldType: FormFieldSchemaType.CustomComponent,
+                customElementDrawsOwnLabel: isSwitch,
+                getCustomElement: (_values, customProps) => {
+                    var _a;
+                    return (React.createElement(ValueSingleField, { kind: singleKind, title: isSwitch ? arg.name : undefined, description: isSwitch ? describeArgument(arg) : undefined, value: singleKind === ValueSingleFieldKind.Boolean
+                            ? (_a = component.arguments) === null || _a === void 0 ? void 0 : _a[arg.id]
+                            : customProps.initialValue, onChange: (value) => {
+                            var _a;
+                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
+                        }, placeholder: customProps.placeholder, ariaLabelledby: customProps.ariaLabelledby, error: customProps.error, autoFocus: autoFocus, tabIndex: customProps.tabIndex, dataTestId: `workflow-argument-${arg.id}`, onBlur: customProps.onBlur }));
+                },
+            };
+        }
+        /*
+         * Request headers and the like, as key/value rows: each value can be a
+         * value from an earlier step or a variable - an Authorization header from
+         * a secret variable is the usual one.
+         */
+        if (control === ArgumentControl.KeyValueRows) {
+            return {
+                fieldType: FormFieldSchemaType.CustomComponent,
+                getCustomElement: (_values, customProps) => {
+                    return (React.createElement(DictionaryForm, { keyPlaceholder: "Key", valuePlaceholder: "Value", addButtonSuffix: arg.name, valueTypes: [ValueType.Text, ValueType.Number, ValueType.Boolean], initialValue: customProps.initialValue &&
+                            typeof customProps.initialValue === "object"
+                            ? customProps.initialValue
+                            : {}, onChange: (value) => {
+                            var _a;
+                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
+                        }, renderTextValueInput: (row) => {
+                            return (React.createElement(ValueTextField, { value: row.value, onChange: row.onChange, multiline: false, placeholder: row.placeholder, ariaLabel: `${arg.name} value ${row.rowIndex + 1}`, dataTestId: `workflow-argument-${arg.id}-value-${row.rowIndex}` }));
+                        } }));
+                },
+            };
+        }
+        // Everything else is chosen by type: code, JSON, toggles, dropdowns.
+        const baseField = componentInputTypeToFormFieldType(arg.type, storedValue);
+        if (control === ArgumentControl.JSONCode ||
+            control === ArgumentControl.HTMLCode) {
+            const isJSON = control === ArgumentControl.JSONCode;
+            baseField.codeEditorToolbarActions = (editor) => {
+                return (React.createElement(InsertValueButton, { dataTestId: `workflow-argument-${arg.id}-insert-value`, onPick: (reference) => {
+                        const selection = editor.getSelection();
+                        /*
+                         * In JSON a reference goes inside quotes, which come with it
+                         * where the caret is not already in a string; on its own it
+                         * stands for the whole document.
+                         */
+                        editor.insertText(isJSON
+                            ? referenceForJSON({
+                                text: editor.getText(),
+                                start: selection.start,
+                                end: selection.end,
+                                reference: reference,
+                                allowJSON5: isJSON5ToleratedInputType(arg.type),
+                            })
+                            : reference);
+                    }, onCloseFocus: () => {
+                        editor.focus();
+                    } }));
+            };
+        }
+        return baseField;
+    };
+    /*
+     * If / Else is set up as the sentence its settings make, not as a form of
+     * five fields (Condition/ConditionEditor). It edits the same stored
+     * settings, and reports whether the step can be saved the way the form
+     * below does, under "arguments".
+     */
+    if (component.metadata.id === ComponentID.IfElse) {
+        return (React.createElement(ValuePickerProvider, { workflowId: props.workflowId, component: component, graphComponents: props.graphComponents, valueSources: props.valueSources, sources: props.valueSuggestionSources, webhookUrl: props.webhookUrl },
+            React.createElement(ConditionEditor, { arguments: component.arguments, onChange: (patch) => {
+                    setComponent((current) => {
+                        return Object.assign(Object.assign({}, current), { arguments: Object.assign(Object.assign({}, (current.arguments || {})), patch) });
+                    });
+                }, onValidationChange: (hasError) => {
+                    setHasFormValidationErrors((current) => {
+                        return current["arguments"] === hasError
+                            ? current
+                            : Object.assign(Object.assign({}, current), { arguments: hasError });
+                    });
+                } })));
+    }
+    return (React.createElement(ValuePickerProvider, { workflowId: props.workflowId, component: component, graphComponents: props.graphComponents, valueSources: props.valueSources, sources: props.valueSuggestionSources, webhookUrl: props.webhookUrl },
         React.createElement("div", null,
             component.metadata.arguments &&
                 component.metadata.arguments.length === 0 && (React.createElement(ErrorMessage, { message: "This step does not need any settings." })),
@@ -280,125 +434,14 @@ const ArgumentsForm = (props) => {
                     }
                 }, fields: component.metadata.arguments &&
                     orderedArguments.map((arg, argIndex) => {
-                        const isWorkflowSelect = arg.type === ComponentInputType.WorkflowSelect;
-                        /*
-                         * Database Select args (the "Select Fields" / "Listen on"
-                         * trigger inputs) get a tree-style field picker backed by
-                         * the model's schema, instead of a raw JSON textarea. We
-                         * need a tableName on the component metadata to fetch the
-                         * column list; without it, fall back to the JSON editor.
-                         */
-                        const useFieldPicker = arg.type === ComponentInputType.Select &&
-                            Boolean(component.metadata.tableName);
-                        /*
-                         * The Schedule trigger's CronTab argument gets a dedicated
-                         * cron picker (presets, custom expression with live preview,
-                         * or a variable reference) instead of a bare dropdown.
-                         */
-                        const useCronPicker = 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 = !component.metadata.tableName
-                            ? undefined
-                            : arg.type === ComponentInputType.Query
-                                ? ModelColumnEditorMode.Query
-                                : arg.type === ComponentInputType.JSON ||
-                                    arg.type === ComponentInputType.BaseModel
-                                    ? ModelColumnEditorMode.Record
-                                    : undefined;
-                        let baseField;
-                        if (columnEditorMode) {
-                            baseField = {
-                                fieldType: FormFieldSchemaType.CustomComponent,
-                                getCustomElement: (_values, customProps) => {
-                                    return (React.createElement(ModelColumnEditor, { tableName: component.metadata.tableName, mode: columnEditorMode, 
-                                        /*
-                                         * A create writes a whole record, so it opens with a
-                                         * row for every column it must be given. An update
-                                         * legitimately writes one column, and seeding it
-                                         * with six would present five fields nobody asked
-                                         * for. The create payload is the argument called
-                                         * "json" (BaseModel components); an update's is
-                                         * "data".
-                                         */
-                                        recordIntent: arg.id === "json"
-                                            ? RecordIntent.Create
-                                            : RecordIntent.Update, initialValue: customProps.initialValue, onChange: (value) => {
-                                            var _a;
-                                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
-                                        }, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex, valueSuggestions: referenceSuggestions }));
-                                },
-                            };
-                        }
-                        else if (useFieldPicker) {
-                            baseField = {
-                                fieldType: FormFieldSchemaType.CustomComponent,
-                                getCustomElement: (_values, customProps) => {
-                                    return (React.createElement(ModelFieldPicker, { tableName: component.metadata.tableName, initialValue: customProps.initialValue, onChange: (value) => {
-                                            var _a;
-                                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
-                                        }, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex }));
-                                },
-                            };
-                        }
-                        else if (useCronPicker) {
-                            baseField = {
-                                fieldType: FormFieldSchemaType.CustomComponent,
-                                getCustomElement: (_values, customProps) => {
-                                    return (React.createElement(CronScheduleField, { workflowId: props.workflowId, initialValue: customProps.initialValue, onChange: (value) => {
-                                            var _a;
-                                            void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
-                                        }, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex }));
-                                },
-                            };
-                        }
-                        else {
-                            baseField = componentInputTypeToFormFieldType(arg.type, component.arguments && component.arguments[arg.id]
-                                ? component.arguments[arg.id]
-                                : null);
-                        }
+                        const baseField = fieldForArgument(arg, argIndex);
                         /*
                          * For WorkflowSelect, inject the dynamically fetched list
                          * of workflows as dropdown options.
                          */
-                        if (isWorkflowSelect) {
+                        if (arg.type === ComponentInputType.WorkflowSelect) {
                             baseField.dropdownOptions = workflowDropdownOptions;
                         }
-                        /*
-                         * The "pick from component / variable" footer doesn't
-                         * apply to the field picker (it edits a structured object,
-                         * not a free-text expression), to WorkflowSelect, or to the
-                         * cron picker (which has its own built-in variable selector,
-                         * and a schedule can't reference component return values).
-                         */
-                        const showVariableFooter = !isWorkflowSelect &&
-                            !useFieldPicker &&
-                            !useCronPicker &&
-                            !columnEditorMode;
                         const isAdvanced = isCollapsibleAdvanced(arg);
                         return Object.assign({ title: `${arg.name}`, 
                             /*
@@ -412,21 +455,7 @@ const ArgumentsForm = (props) => {
                                 ? () => {
                                     return showAdvanced;
                                 }
-                                : undefined, footerElement: showVariableFooter ? (React.createElement("div", { className: "text-gray-500" },
-                                React.createElement("p", { className: "text-sm" },
-                                    "Pick this value from other",
-                                    " ",
-                                    React.createElement("button", { className: "underline text-blue-500 hover:text-blue-600 cursor-pointer", onClick: () => {
-                                            setSelectedArgId(arg.id);
-                                            setShowComponentPickerModal(true);
-                                        } }, "component"),
-                                    " ",
-                                    "or from",
-                                    " ",
-                                    React.createElement("button", { className: "underline text-blue-500 hover:text-blue-600 cursor-pointer", onClick: () => {
-                                            setSelectedArgId(arg.id);
-                                            setShowVariableModal(true);
-                                        } }, "variable.")))) : undefined, description: `${arg.required ? "Required" : "Optional"}. ${arg.description}`, field: {
+                                : undefined, description: describeArgument(arg), field: {
                                 [arg.id]: true,
                             }, required: arg.required, placeholder: arg.placeholder, 
                             /*
@@ -434,38 +463,24 @@ const ArgumentsForm = (props) => {
                              * JSON, so the check has to be no stricter than the parser
                              * that will actually see the value.
                              */
-                            allowJSON5: isJSON5ToleratedInputType(arg.type) }, baseField);
+                            allowJSON5: isJSON5ToleratedInputType(arg.type), 
+                            /*
+                             * A URL or an address typed out in full is checked as the
+                             * box used to; one built from a value is not known yet.
+                             */
+                            customValidation: arg.type === ComponentInputType.URL ||
+                                arg.type === ComponentInputType.Email
+                                ? (values) => {
+                                    return validateTypedValue(arg.type, values[arg.id]);
+                                }
+                                : undefined }, baseField);
                     }) })),
             collapsibleAdvancedArguments.length > 0 && (React.createElement("div", { className: "mt-3" },
                 React.createElement("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"}`)))),
-        showVariableModal && (React.createElement(VariableModal, { workflowId: props.workflowId, onClose: () => {
-                setShowVariableModal(false);
-            }, onSave: (variableId) => {
-                var _a;
-                setShowVariableModal(false);
-                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldValue(selectedArgId, (component.arguments && component.arguments[selectedArgId]
-                    ? component.arguments[selectedArgId]
-                    : "") + variableId);
-            } })),
-        showComponentPickerModal && (React.createElement(ComponentValuePickerModal
-        /* A component cannot read its own output. */
-        , { 
-            /* A component cannot read its own output. */
-            components: (props.graphComponents || []).filter((graphComponent) => {
-                return graphComponent.id !== component.id;
-            }), onClose: () => {
-                setShowComponentPickerModal(false);
-            }, onSave: (returnValuePath) => {
-                var _a;
-                setShowComponentPickerModal(false);
-                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldValue(selectedArgId, (component.arguments && component.arguments[selectedArgId]
-                    ? component.arguments[selectedArgId]
-                    : "") + returnValuePath);
-            } }))));
+                    : `Show ${collapsibleAdvancedArguments.length} advanced setting${collapsibleAdvancedArguments.length === 1 ? "" : "s"}`))))));
 };
 export default ArgumentsForm;
 //# sourceMappingURL=ArgumentsForm.js.map