@oneuptime/common 14.0.11 → 14.0.12

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

@@ -1,65 +1,32 @@
+import CopyTextButton from "../CopyTextButton/CopyTextButton";
+import BreakableCode from "./BreakableCode";
 import { componentReturnValueReference } from "../../../Types/Workflow/TemplateSyntax";
 import React from "react";
+/*
+ * One row per value, the full width of the dialog: its name and type, what it
+ * holds, and the reference that reads it with a button to copy it. The
+ * reference wraps only between its parts (see BreakableCode). In the old narrow
+ * sidebar it wrapped wherever it hit a hyphen, three lines to a reference, and
+ * there was no way to copy it short of selecting it by hand.
+ */
 const ComponentReturnValueViewer = (props) => {
     return (React.createElement("div", null,
         props.name && (React.createElement("h2", { className: "text-sm font-semibold text-gray-600" }, props.name)),
-        props.description && (React.createElement("p", { className: "text-xs text-gray-400 mb-2" }, props.description)),
-        props.returnValues && props.returnValues.length === 0 && (React.createElement("p", { className: "text-xs text-gray-400 italic" }, "This step does not return any data.")),
-        React.createElement("div", null, props.returnValues &&
-            props.returnValues.length > 0 &&
-            props.returnValues.map((returnValue, i) => {
-                return (React.createElement("div", { key: i, style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        gap: "0.625rem",
-                        padding: "0.5rem 0.75rem",
-                        borderRadius: "8px",
-                        backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
-                        border: "1px solid var(--ou-border-subtle, #f1f5f9)",
-                        marginBottom: "0.375rem",
-                    } },
-                    React.createElement("div", { style: { minWidth: 0, flex: 1 } },
-                        React.createElement("p", { style: {
-                                fontSize: "0.8125rem",
-                                fontWeight: 500,
-                                color: "var(--ou-text-secondary, #334155)",
-                                margin: 0,
-                                lineHeight: "1.25rem",
-                            } },
-                            returnValue.name,
-                            React.createElement("span", { style: {
-                                    color: "var(--ou-text-subtle, #94a3b8)",
-                                    fontWeight: 400,
-                                    fontSize: "0.6875rem",
-                                    marginLeft: "0.375rem",
-                                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-                                } }, returnValue.id)),
-                        returnValue.description && (React.createElement("p", { style: {
-                                fontSize: "0.75rem",
-                                color: "var(--ou-text-subtle, #94a3b8)",
-                                margin: 0,
-                                lineHeight: "1rem",
-                            } }, returnValue.description)),
-                        props.componentId && (React.createElement("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)))),
-                    React.createElement("span", { style: {
-                            fontSize: "0.6875rem",
-                            fontWeight: 500,
-                            color: "var(--ou-link, #6366f1)",
-                            backgroundColor: "var(--ou-accent-soft, #eef2ff)",
-                            padding: "0.125rem 0.5rem",
-                            borderRadius: "100px",
-                            whiteSpace: "nowrap",
-                            border: "1px solid var(--ou-accent-muted, #e0e7ff)",
-                        } }, returnValue.type)));
-            }))));
+        props.description && (React.createElement("p", { className: "mb-2 text-xs text-gray-500" }, props.description)),
+        props.returnValues && props.returnValues.length === 0 && (React.createElement("p", { className: "text-xs italic text-gray-500" }, "This step does not return any data.")),
+        props.returnValues && props.returnValues.length > 0 && (React.createElement("ul", { className: "space-y-2" }, props.returnValues.map((returnValue, i) => {
+            const reference = props.componentId
+                ? componentReturnValueReference(props.componentId, returnValue.id)
+                : null;
+            return (React.createElement("li", { key: returnValue.id || i, className: "rounded-lg border border-gray-200 bg-gray-50 px-3 py-2.5", "data-testid": "workflow-return-value" },
+                React.createElement("p", { className: "text-sm font-medium text-gray-900" },
+                    returnValue.name,
+                    React.createElement("span", { className: "ml-2 inline-block whitespace-nowrap rounded-full border border-indigo-100 bg-indigo-50 px-2 py-0.5 align-middle text-[11px] font-medium leading-4 text-indigo-700", "data-testid": "workflow-return-value-type" }, returnValue.type)),
+                returnValue.description && (React.createElement("p", { className: "mt-0.5 text-xs text-gray-500" }, returnValue.description)),
+                reference ? (React.createElement("div", { className: "mt-2 flex items-start gap-2" },
+                    React.createElement(BreakableCode, { text: reference, breakAfter: ".", dataTestId: "workflow-return-value-reference", className: "block min-w-0 overflow-x-auto rounded-md border border-gray-200 bg-white px-2 py-1 text-xs leading-5 text-gray-700" }),
+                    React.createElement(CopyTextButton, { textToBeCopied: reference, iconOnly: true, size: "sm", title: `Copy the reference to ${returnValue.name}`, className: "mt-0.5 shrink-0" }))) : (React.createElement(BreakableCode, { text: returnValue.id, breakAfter: "-", dataTestId: "workflow-return-value-id", className: "mt-1 block text-[11px] text-gray-500" }))));
+        })))));
 };
 export default ComponentReturnValueViewer;
 //# sourceMappingURL=ComponentReturnValueViewer.js.map

package/build/dist/UI/Components/Workflow/ComponentReturnValueViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentReturnValueViewer.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentReturnValueViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAC;AACvF,OAAO,KAA0C,MAAM,OAAO,CAAC;AAe/D,MAAM,0BAA0B,GAAsC,CACpE,KAAqB,EACP,EAAE;IAChB,OAAO,CACL;QACG,KAAK,CAAC,IAAI,IAAI,CACb,4BAAI,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAC,IAAI,CAAM,CACtE;QACA,KAAK,CAAC,WAAW,IAAI,CACpB,2BAAG,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAC,WAAW,CAAK,CAClE;QACA,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CACxD,2BAAG,SAAS,EAAC,8BAA8B,0CAEvC,CACL;QACD,iCACG,KAAK,CAAC,YAAY;YACjB,KAAK,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;YAC7B,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,WAAwB,EAAE,CAAS,EAAE,EAAE;gBAC7D,OAAO,CACL,6BACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAE;wBACL,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,eAAe;wBAC/B,GAAG,EAAE,UAAU;wBACf,OAAO,EAAE,gBAAgB;wBACzB,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,sCAAsC;wBACvD,MAAM,EAAE,4CAA4C;wBACpD,YAAY,EAAE,UAAU;qBACzB;oBAED,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;wBAClC,2BACE,KAAK,EAAE;gCACL,QAAQ,EAAE,WAAW;gCACrB,UAAU,EAAE,GAAG;gCACf,KAAK,EAAE,mCAAmC;gCAC1C,MAAM,EAAE,CAAC;gCACT,UAAU,EAAE,SAAS;6BACtB;4BAEA,WAAW,CAAC,IAAI;4BACjB,8BACE,KAAK,EAAE;oCACL,KAAK,EAAE,gCAAgC;oCACvC,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,WAAW;oCACrB,UAAU,EAAE,UAAU;oCACtB,UAAU,EACR,2DAA2D;iCAC9D,IAEA,WAAW,CAAC,EAAE,CACV,CACL;wBACH,WAAW,CAAC,WAAW,IAAI,CAC1B,2BACE,KAAK,EAAE;gCACL,QAAQ,EAAE,SAAS;gCACnB,KAAK,EAAE,gCAAgC;gCACvC,MAAM,EAAE,CAAC;gCACT,UAAU,EAAE,MAAM;6BACnB,IAEA,WAAW,CAAC,WAAW,CACtB,CACL;wBACA,KAAK,CAAC,WAAW,IAAI,CACpB,8BACE,KAAK,EAAE;gCACL,OAAO,EAAE,OAAO;gCAChB,SAAS,EAAE,SAAS;gCACpB,QAAQ,EAAE,WAAW;gCACrB,KAAK,EAAE,gCAAgC;gCACvC,UAAU,EACR,2DAA2D;gCAC7D,YAAY,EAAE,UAAU;6BACzB,IAEA,6BAA6B,CAC5B,KAAK,CAAC,WAAW,EACjB,WAAW,CAAC,EAAE,CACf,CACI,CACR,CACG;oBACN,8BACE,KAAK,EAAE;4BACL,QAAQ,EAAE,WAAW;4BACrB,UAAU,EAAE,GAAG;4BACf,KAAK,EAAE,yBAAyB;4BAChC,eAAe,EAAE,gCAAgC;4BACjD,OAAO,EAAE,iBAAiB;4BAC1B,YAAY,EAAE,OAAO;4BACrB,UAAU,EAAE,QAAQ;4BACpB,MAAM,EAAE,2CAA2C;yBACpD,IAEA,WAAW,CAAC,IAAI,CACZ,CACH,CACP,CAAC;YACJ,CAAC,CAAC,CACA,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"ComponentReturnValueViewer.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentReturnValueViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAC;AACvF,OAAO,KAA0C,MAAM,OAAO,CAAC;AAe/D;;;;;;GAMG;AACH,MAAM,0BAA0B,GAAsC,CACpE,KAAqB,EACP,EAAE;IAChB,OAAO,CACL;QACG,KAAK,CAAC,IAAI,IAAI,CACb,4BAAI,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAC,IAAI,CAAM,CACtE;QACA,KAAK,CAAC,WAAW,IAAI,CACpB,2BAAG,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAC,WAAW,CAAK,CAClE;QACA,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CACxD,2BAAG,SAAS,EAAC,8BAA8B,0CAEvC,CACL;QACA,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CACtD,4BAAI,SAAS,EAAC,WAAW,IACtB,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,WAAwB,EAAE,CAAS,EAAE,EAAE;YAC9D,MAAM,SAAS,GAAkB,KAAK,CAAC,WAAW;gBAChD,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;gBAClE,CAAC,CAAC,IAAI,CAAC;YAET,OAAO,CACL,4BACE,GAAG,EAAE,WAAW,CAAC,EAAE,IAAI,CAAC,EACxB,SAAS,EAAC,0DAA0D,iBACxD,uBAAuB;gBAQnC,2BAAG,SAAS,EAAC,mCAAmC;oBAC7C,WAAW,CAAC,IAAI;oBACjB,8BACE,SAAS,EAAC,mKAAmK,iBACjK,4BAA4B,IAEvC,WAAW,CAAC,IAAI,CACZ,CACL;gBACH,WAAW,CAAC,WAAW,IAAI,CAC1B,2BAAG,SAAS,EAAC,8BAA8B,IACxC,WAAW,CAAC,WAAW,CACtB,CACL;gBACA,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,SAAS,EAAC,6BAA6B;oBAC1C,oBAAC,aAAa,IACZ,IAAI,EAAE,SAAS,EACf,UAAU,EAAC,GAAG,EACd,UAAU,EAAC,iCAAiC,EAC5C,SAAS,EAAC,oHAAoH,GAC9H;oBACF,oBAAC,cAAc,IACb,cAAc,EAAE,SAAS,EACzB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,yBAAyB,WAAW,CAAC,IAAI,EAAE,EAClD,SAAS,EAAC,iBAAiB,GAC3B,CACE,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,aAAa,IACZ,IAAI,EAAE,WAAW,CAAC,EAAE,EACpB,UAAU,EAAC,GAAG,EACd,UAAU,EAAC,0BAA0B,EACrC,SAAS,EAAC,sCAAsC,GAChD,CACH,CACE,CACN,CAAC;QACJ,CAAC,CAAC,CACC,CACN,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -1,81 +1,210 @@
 import Button, { ButtonStyleType } from "../Button/Button";
 import BasicForm from "../Forms/BasicForm";
+import Icon from "../Icon/Icon";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import ConfirmModal from "../Modal/ConfirmModal";
+import DeleteConfirmationMessage from "../DeleteConfirmation/DeleteConfirmationMessage";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import ArgumentsForm from "./ArgumentsForm";
+import { getComponentPrimaryPanel } from "./ComponentPrimaryPanel";
 import ComponentPortViewer from "./ComponentPortViewer";
 import ComponentReturnValueViewer from "./ComponentReturnValueViewer";
+import ComponentSettingsSection from "./ComponentSettingsSection";
 import DocumentationViewer from "./DocumentationViewer";
+import { WORKFLOW_URL } from "../../Config";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { useState } from "react";
-import Icon from "../Icon/Icon";
-const SectionCard = (props) => {
-    const isInfo = props.tone === "info";
-    const containerClass = isInfo
-        ? "rounded-lg border border-blue-100 bg-blue-50/40 p-4"
-        : "rounded-lg border border-gray-200 bg-white p-4";
-    const iconClass = isInfo ? "text-blue-500" : "text-gray-400";
-    const titleClass = isInfo
-        ? "text-[11px] font-semibold uppercase tracking-wider text-blue-700"
-        : "text-[11px] font-semibold uppercase tracking-wider text-gray-500";
-    return (React.createElement("div", { className: containerClass },
-        React.createElement("div", { className: "flex items-center gap-1.5 mb-3" },
-            React.createElement(Icon, { icon: props.icon, className: `h-3.5 w-3.5 ${iconClass}` }),
-            React.createElement("span", { className: titleClass }, props.title)),
-        props.children));
-};
+import ComponentID from "../../../Types/Workflow/ComponentID";
+import { getComponentDocumentation } from "../../../Types/Workflow/Documentation/Index";
+import { getWebhookTriggerUrl } from "../../../Types/Workflow/WebhookTrigger";
+import React, { useEffect, useMemo, useRef, useState, } from "react";
 const ComponentSettingsModal = (props) => {
+    var _a, _b;
     const [component, setComponent] = useState(props.component);
     const [hasFormValidationErrors, setHasFormValidationErrors] = useState({});
     const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
     const [showRunStepConfirmation, setShowRunStepConfirmation] = useState(false);
-    const settingsSection = (React.createElement(SectionCard, { icon: IconProp.Settings, title: "Settings" },
-        React.createElement(ArgumentsForm, { graphComponents: props.graphComponents, workflowId: props.workflowId, component: component, onFormChange: (c) => {
+    const bodyRef = useRef(null);
+    /*
+     * The dialog focuses the first control it finds as it opens. A step's
+     * settings are often not there yet at that moment - BasicForm renders its
+     * fields a beat later, and the field pickers wait for the model's columns -
+     * so the first control was a copy button in Returns, halfway down the
+     * dialog. Focus that lands past the first section goes back to the dialog
+     * itself. BasicForm still focuses a first text setting when it renders, the
+     * Webhook trigger keeps its focus on Copy URL, and Tab starts from the top.
+     *
+     * This runs after the Modal's own effect: React runs a child's effects
+     * before its parent's.
+     */
+    useEffect(() => {
+        const body = bodyRef.current;
+        const firstSection = body ? body.firstElementChild : null;
+        const focused = document.activeElement;
+        if (!body ||
+            !firstSection ||
+            !focused ||
+            !body.contains(focused) ||
+            firstSection.contains(focused)) {
+            return;
+        }
+        const dialog = body.closest('[role="dialog"]');
+        if (dialog instanceof HTMLElement) {
+            dialog.focus();
+        }
+    }, []);
+    const componentTypeName = component.metadata.componentType.toLowerCase();
+    /*
+     * Which step a delete removes: its kind and the identifier the workflow
+     * knows it by - "Send Email (send-email-2)" - since a workflow can hold
+     * several steps of the same kind. Read from the step as it is on the
+     * canvas, not from this dialog's unsaved edits: an identifier typed here
+     * and not saved names no step at all.
+     */
+    const savedStepTitle = ((_a = props.component.metadata.title) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+    const savedStepId = ((_b = props.component.id) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+    const stepName = savedStepTitle && savedStepId && savedStepId !== savedStepTitle
+        ? `${savedStepTitle} (${savedStepId})`
+        : savedStepTitle || savedStepId;
+    /*
+     * A section is only rendered when it has something to say. A step with no
+     * settings used to get a two-thirds-width card saying "This step does not
+     * need any settings." above a large empty area, while everything else was
+     * stacked in the narrow column beside it.
+     */
+    const hasSettings = Array.isArray(component.metadata.arguments) &&
+        component.metadata.arguments.length > 0;
+    const hasInputs = Array.isArray(component.metadata.inPorts) &&
+        component.metadata.inPorts.length > 0;
+    const hasOutputs = Array.isArray(component.metadata.outPorts) &&
+        component.metadata.outPorts.length > 0;
+    const hasReturns = Array.isArray(component.metadata.returnValues) &&
+        component.metadata.returnValues.length > 0;
+    const primarySection = getComponentPrimaryPanel({
+        component: component,
+        workflowId: props.workflowId,
+        webhookSecretKey: props.webhookSecretKey,
+        canSeeWebhookSecretKey: props.canSeeWebhookSecretKey,
+        onResetWebhookSecretKey: props.onResetWebhookSecretKey,
+        incomingEmailSecretKey: props.incomingEmailSecretKey,
+        canSeeIncomingEmailSecretKey: props.canSeeIncomingEmailSecretKey,
+        onResetIncomingEmailSecretKey: props.onResetIncomingEmailSecretKey,
+    });
+    /*
+     * Where a test request goes. A step after a Webhook that nothing has called
+     * yet offers one to copy in its value picker, so its fields can be seen.
+     * Built only for someone who may see the key, as the Webhook's own URL is.
+     */
+    const webhookUrl = props.canSeeWebhookSecretKey !== false && props.webhookSecretKey
+        ? getWebhookTriggerUrl({
+            workflowServiceUrl: WORKFLOW_URL.toString(),
+            secretKey: props.webhookSecretKey,
+        })
+        : undefined;
+    /*
+     * An If / Else step's settings are one thing, its condition, and are
+     * called that (see Condition/ConditionEditor).
+     */
+    const isCondition = component.metadata.id === ComponentID.IfElse;
+    const settingsSection = hasSettings ? (React.createElement(ComponentSettingsSection, { id: "settings", icon: isCondition ? IconProp.Condition : IconProp.Settings, title: isCondition ? "Condition" : "Settings" },
+        React.createElement(ArgumentsForm, { graphComponents: props.graphComponents, valueSources: props.valueSources, workflowId: props.workflowId, webhookUrl: webhookUrl, component: component, onFormChange: (c) => {
                 setComponent(Object.assign({}, c));
             }, onHasFormValidationErrors: (value) => {
-                setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), value));
-            } })));
-    const idSection = (React.createElement(SectionCard, { icon: IconProp.Label, title: "ID" },
-        React.createElement(BasicForm, { hideSubmitButton: true, initialValues: { id: component === null || component === void 0 ? void 0 : component.id }, onChange: (values) => {
+                /*
+                 * From the latest state, not this render's: the identifier's form
+                 * reports in the same moment as the settings do when the dialog
+                 * opens, and merging into a stale copy dropped the other's report.
+                 * A new If / Else could then be saved with nothing set.
+                 */
+                setHasFormValidationErrors((current) => {
+                    return Object.assign(Object.assign({}, current), value);
+                });
+            } }))) : null;
+    const idSection = (React.createElement(ComponentSettingsSection, { id: "id", icon: IconProp.Label, title: "ID" },
+        React.createElement(BasicForm, { hideSubmitButton: true, 
+            /*
+             * BasicForm focuses its first field on mount. This form mounts after
+             * the settings, so it took the focus from the first setting, and on
+             * the Webhook trigger from the URL's copy button.
+             */
+            disableAutofocus: true, initialValues: { id: component === null || component === void 0 ? void 0 : component.id }, onChange: (values) => {
                 setComponent(Object.assign(Object.assign({}, component), values));
             }, onFormValidationErrorChanged: (hasError) => {
-                setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), { id: hasError }));
+                setHasFormValidationErrors((current) => {
+                    return Object.assign(Object.assign({}, current), { id: hasError });
+                });
             }, fields: [
                 {
                     title: "Identifier",
-                    description: `Used to reference this ${component.metadata.componentType.toLowerCase()} from other steps.`,
+                    description: `How other steps refer to this ${componentTypeName}. Renaming it breaks references that use the old name.`,
                     field: { id: true },
                     required: true,
                     fieldType: FormFieldSchemaType.Text,
                 },
             ] })));
-    const documentationSection = component.metadata
-        .documentationLink ? (React.createElement(SectionCard, { icon: IconProp.Book, title: "Documentation", tone: "info" },
-        React.createElement(DocumentationViewer, { documentationLink: component.metadata.documentationLink, workflowId: props.workflowId, webhookSecretKey: props.webhookSecretKey, tableName: component.metadata.tableName }))) : null;
+    const returnsSection = hasReturns ? (React.createElement(ComponentSettingsSection, { id: "returns", icon: IconProp.Database, title: "Returns", description: "Data this step makes available downstream. Copy a reference into a later step's settings to use it there." },
+        React.createElement(ComponentReturnValueViewer, { name: "", description: "", returnValues: component.metadata.returnValues, componentId: component.id }))) : null;
+    const inputsSection = hasInputs ? (React.createElement(ComponentSettingsSection, { id: "inputs", icon: IconProp.ArrowCircleDown, title: "Inputs", description: "Where this step is reached from." },
+        React.createElement(ComponentPortViewer, { name: "", description: "", ports: component.metadata.inPorts }))) : null;
+    const outputsSection = hasOutputs ? (React.createElement(ComponentSettingsSection, { id: "outputs", icon: IconProp.ArrowCircleRight, title: "Outputs", description: "What runs after this step." },
+        React.createElement(ComponentPortViewer, { name: "", description: "", ports: component.metadata.outPorts }))) : null;
     /*
-     * Each connection/output card is only rendered if there's something to
-     * show — keeps the sidebar lean for triggers (no inputs) and components
-     * that don't return any data.
+     * Built here rather than fetched: the help is written from the step itself,
+     * so its examples use the identifier the step has right now - renaming it
+     * in the ID section renames it in every example too.
      */
-    const hasInputs = Array.isArray(component.metadata.inPorts) &&
-        component.metadata.inPorts.length > 0;
-    const hasOutputs = Array.isArray(component.metadata.outPorts) &&
-        component.metadata.outPorts.length > 0;
-    const hasReturns = Array.isArray(component.metadata.returnValues) &&
-        component.metadata.returnValues.length > 0;
-    const inputsSection = hasInputs ? (React.createElement(SectionCard, { icon: IconProp.ArrowCircleDown, title: "Inputs" },
-        React.createElement(ComponentPortViewer, { name: "", description: "Where this step is reached from.", ports: component.metadata.inPorts }))) : null;
-    const outputsSection = hasOutputs ? (React.createElement(SectionCard, { icon: IconProp.ArrowCircleRight, title: "Outputs" },
-        React.createElement(ComponentPortViewer, { name: "", description: "What runs after this step.", ports: component.metadata.outPorts }))) : null;
-    const returnsSection = hasReturns ? (React.createElement(SectionCard, { icon: IconProp.Database, title: "Returns" },
-        React.createElement(ComponentReturnValueViewer, { name: "", description: "Data this step makes available downstream.", returnValues: component.metadata.returnValues, componentId: component.id }))) : null;
+    const documentation = useMemo(() => {
+        return getComponentDocumentation({
+            metadata: component.metadata,
+            stepId: component.id,
+            graphComponents: props.graphComponents,
+        });
+    }, [component.metadata, component.id, props.graphComponents]);
+    const documentationSection = documentation ? (React.createElement(ComponentSettingsSection, { id: "documentation", icon: IconProp.Book, title: "How to use", tone: "info", isFocusTarget: true },
+        React.createElement(DocumentationViewer, { documentation: documentation }))) : null;
+    /*
+     * The help is the last section, below everything the step is opened for, so
+     * the header carries a way to it. It scrolls the help into view and moves
+     * the focus there, so a keyboard or screen reader user is taken along.
+     */
+    const showDocumentation = () => {
+        var _a;
+        const section = ((_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-testid="workflow-component-section-documentation"]')) || null;
+        if (!section) {
+            return;
+        }
+        const prefersReducedMotion = typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (typeof section.scrollIntoView === "function") {
+            section.scrollIntoView({
+                behavior: prefersReducedMotion ? "auto" : "smooth",
+                block: "start",
+            });
+        }
+        section.focus({ preventScroll: true });
+    };
+    const documentationButton = documentation ? (React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500", "data-testid": "workflow-component-docs-jump", onClick: showDocumentation },
+        React.createElement(Icon, { icon: IconProp.Book, className: "h-4 w-4" }),
+        React.createElement("span", { className: "max-sm:sr-only" }, "How to use"))) : undefined;
+    /*
+     * The identifier and the connections are a line or two each. Given the
+     * dialog's full width apiece, each was a short strip of mostly empty card,
+     * so they share a row: split evenly however many there are (a trigger has
+     * no inputs), and wrapped onto rows of their own when the dialog is too
+     * narrow for them.
+     */
+    const compactRowSections = [
+        idSection,
+        inputsSection,
+        outputsSection,
+    ].filter((section) => {
+        return section !== null;
+    });
     const hasErrors = Object.values(hasFormValidationErrors).some((v) => {
         return v;
     });
     return (React.createElement(Modal, { title: props.title, description: props.description, onClose: props.onClose, onSubmit: () => {
             return component && props.onSave(component);
-        }, submitButtonText: "Save", modalWidth: ModalWidth.Large, disableSubmitButton: hasErrors, leftFooterElement: 
+        }, submitButtonText: "Save", modalWidth: ModalWidth.Large, rightElement: documentationButton, disableSubmitButton: hasErrors, leftFooterElement: 
         /*
          * 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
@@ -105,22 +234,34 @@ const ComponentSettingsModal = (props) => {
                     var _a;
                     setShowRunStepConfirmation(false);
                     (_a = props.onRunStep) === null || _a === void 0 ? void 0 : _a.call(props, component);
-                }, submitButtonType: ButtonStyleType.NORMAL })),
-            showDeleteConfirmation && (React.createElement(ConfirmModal, { title: `Delete ${component.metadata.componentType}`, description: `Are you sure you want to delete this ${component.metadata.componentType.toLowerCase()}? This action is not recoverable.`, onClose: () => {
+                }, 
+                /*
+                 * Running the step is what the user opened this dialog to do, so it
+                 * is the one primary button; Cancel is the plain way out.
+                 */
+                submitButtonType: ButtonStyleType.PRIMARY })),
+            showDeleteConfirmation && (React.createElement(ConfirmModal, { title: `Delete ${component.metadata.componentType}`, description: React.createElement(DeleteConfirmationMessage, { kind: "question", name: stepName, typeLabel: componentTypeName }), onClose: () => {
                     setShowDeleteConfirmation(false);
                 }, submitButtonText: "Delete", onSubmit: () => {
-                    props.onDelete(component);
+                    /*
+                     * The step on the canvas, which the sentence named. This passed
+                     * the dialog's working copy, so a step whose identifier had been
+                     * edited here and not saved was looked up by the new identifier,
+                     * matched nothing, and stayed on the canvas while the dialog
+                     * closed as though it had gone.
+                     */
+                    props.onDelete(props.component);
                     setShowDeleteConfirmation(false);
                     props.onClose();
                 }, submitButtonType: ButtonStyleType.DANGER })),
-            React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4" },
-                React.createElement("div", { className: "md:col-span-2 space-y-4" }, settingsSection),
-                React.createElement("div", { className: "md:col-span-1 space-y-4" },
-                    idSection,
-                    inputsSection,
-                    outputsSection,
-                    returnsSection,
-                    documentationSection)))));
+            React.createElement("div", { ref: bodyRef, className: "space-y-4", "data-testid": "workflow-component-settings" },
+                primarySection,
+                settingsSection,
+                React.createElement("div", { className: "flex flex-wrap gap-4", "data-testid": "workflow-component-settings-compact-row" }, compactRowSections.map((section, index) => {
+                    return (React.createElement("div", { key: index, className: "min-w-[15rem] flex-1 [&>section]:h-full" }, section));
+                })),
+                returnsSection,
+                documentationSection))));
 };
 export default ComponentSettingsModal;
 //# sourceMappingURL=ComponentSettingsModal.js.map

package/build/dist/UI/Components/Workflow/ComponentSettingsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentSettingsModal.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentSettingsModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComponentSettingsModal.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentSettingsModal.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import Icon from "../Icon/Icon";
+import React, { useId, } from "react";
+const TONE_CLASSES = {
+    default: {
+        container: "rounded-lg border border-gray-200 bg-white p-4",
+        icon: "text-gray-400",
+        title: "text-gray-500",
+    },
+    primary: {
+        container: "rounded-lg border border-indigo-200 bg-indigo-50/40 p-4",
+        icon: "text-indigo-500",
+        title: "text-indigo-700",
+    },
+    info: {
+        container: "rounded-lg border border-blue-100 bg-blue-50/40 p-4",
+        icon: "text-blue-500",
+        title: "text-blue-700",
+    },
+};
+const ComponentSettingsSection = (props) => {
+    const headingId = useId();
+    const tone = TONE_CLASSES[props.tone || "default"];
+    return (React.createElement("section", { className: `${tone.container}${props.isFocusTarget
+            ? " scroll-mt-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300"
+            : ""}`, "aria-labelledby": headingId, tabIndex: props.isFocusTarget ? -1 : undefined, "data-testid": `workflow-component-section-${props.id}` },
+        React.createElement("div", { className: "mb-3" },
+            React.createElement("div", { className: "flex items-center gap-1.5" },
+                React.createElement(Icon, { icon: props.icon, className: `h-3.5 w-3.5 ${tone.icon}` }),
+                React.createElement("h4", { id: headingId, className: `text-[11px] font-semibold uppercase tracking-wider ${tone.title}` }, props.title)),
+            props.description ? (React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, props.description)) : (React.createElement(React.Fragment, null))),
+        props.children));
+};
+export default ComponentSettingsSection;
+//# sourceMappingURL=ComponentSettingsSection.js.map

package/build/dist/UI/Components/Workflow/ComponentSettingsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSettingsSection.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentSettingsSection.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,cAAc,CAAC;AAEhC,OAAO,KAAK,EAAE,EAIZ,KAAK,GACN,MAAM,OAAO,CAAC;AAuCf,MAAM,YAAY,GAAsD;IACtE,OAAO,EAAE;QACP,SAAS,EAAE,gDAAgD;QAC3D,IAAI,EAAE,eAAe;QACrB,KAAK,EAAE,eAAe;KACvB;IACD,OAAO,EAAE;QACP,SAAS,EAAE,yDAAyD;QACpE,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,iBAAiB;KACzB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,qDAAqD;QAChE,IAAI,EAAE,eAAe;QACrB,KAAK,EAAE,eAAe;KACvB;CACF,CAAC;AAEF,MAAM,wBAAwB,GAAsC,CAClE,KAAqB,EACP,EAAE;IAChB,MAAM,SAAS,GAAW,KAAK,EAAE,CAAC;IAClC,MAAM,IAAI,GAAgB,YAAY,CAAC,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC;IAEhE,OAAO,CACL,iCACE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,GAC1B,KAAK,CAAC,aAAa;YACjB,CAAC,CAAC,kFAAkF;YACpF,CAAC,CAAC,EACN,EAAE,qBACe,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,iBACjC,8BAA8B,KAAK,CAAC,EAAE,EAAE;QAErD,6BAAK,SAAS,EAAC,MAAM;YACnB,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE,GAAI;gBACjE,4BACE,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,sDAAsD,IAAI,CAAC,KAAK,EAAE,IAE5E,KAAK,CAAC,KAAK,CACT,CACD;YACL,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,2BAAG,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAC,WAAW,CAAK,CAClE,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG;QACL,KAAK,CAAC,QAAQ,CACP,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}