@nyaruka/temba-components 0.138.6 → 0.140.0

package/out-tsc/src/flow/NodeEditor.js

@@ -6,6 +6,7 @@ import { NODE_CONFIG, ACTION_CONFIG } from './config';
 import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
+import { formatIssueMessage } from './utils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
 import { fromStore, zustand } from '../store/AppState';
@@ -50,6 +51,19 @@ export class NodeEditor extends RapidElement {
         margin-top: 15px;
       }
 
+      .issue-warning {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--color-error, tomato);
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .issue-warning:hover .issue-text {
+        text-decoration: underline;
+      }
+
       .form-actions {
         display: flex;
         gap: 10px;
@@ -107,12 +121,29 @@ export class NodeEditor extends RapidElement {
         color: var(--color-label, #777);
       }
 
+      .form-row-inline-label {
+        font-size: 20px;
+        font-weight: 300;
+        color: #ccc;
+        min-width: 20px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+      }
+
       .form-row-help {
         font-size: 12px;
         color: #666;
         margin-top: 6px;
       }
 
+      .form-text {
+        color: #666;
+        font-size: 13px;
+      }
+
       .form-group {
         border: 1px solid #e0e0e0;
         border-radius: 6px;
@@ -397,7 +428,11 @@ export class NodeEditor extends RapidElement {
     initializeFormData() {
         var _a, _b, _c, _d, _e;
         const nodeConfig = this.getNodeConfig();
-        if ((!nodeConfig || nodeConfig.type === 'execute_actions') && this.action) {
+        // Temporary: terminal nodes defer to action configs, same as execute_actions
+        if ((!nodeConfig ||
+            nodeConfig.type === 'execute_actions' ||
+            nodeConfig.type === 'terminal') &&
+            this.action) {
             // Action editing mode - use action config
             const actionConfig = ACTION_CONFIG[this.action.type];
             // Check if we're in localization mode
@@ -516,8 +551,11 @@ export class NodeEditor extends RapidElement {
         // If we have a node and nodeUI, check if we should use node config
         if (this.node && this.nodeUI) {
             const nodeConfig = this.getNodeConfig();
-            // For execute_actions nodes, defer to action editing if an action is selected
-            if (this.nodeUI.type === 'execute_actions' && this.action) {
+            // Temporary: terminal nodes defer to action configs for editing, same as execute_actions
+            // For execute_actions/terminal nodes, defer to action editing if an action is selected
+            if ((this.nodeUI.type === 'execute_actions' ||
+                this.nodeUI.type === 'terminal') &&
+                this.action) {
                 return ACTION_CONFIG[this.action.type] || null;
             }
             // For all other nodes with a config, use the node config
@@ -1181,6 +1219,7 @@ export class NodeEditor extends RapidElement {
         return FieldRenderer.renderField(fieldName, fieldConfig, value, {
             errors,
             onChange: (e) => {
+                var _a, _b;
                 // Handle different change event types
                 if (fieldName && config.type === 'key-value') {
                     // Special handling for key-value editor
@@ -1197,6 +1236,12 @@ export class NodeEditor extends RapidElement {
                     // Special handling for message editor
                     this.handleMessageEditorChange(fieldName, e);
                 }
+                else if (fieldName && config.type === 'media') {
+                    // Extract URL from media picker's attachment
+                    const picker = e.target;
+                    const url = ((_b = (_a = picker.attachments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) || '';
+                    this.handleNewFieldChange(fieldName, url);
+                }
                 else {
                     // Default handling for most field types
                     this.handleFormFieldChange(fieldName, e);
@@ -1276,12 +1321,16 @@ export class NodeEditor extends RapidElement {
                 return this.renderRow(item, config, renderedFields);
             case 'group':
                 return this.renderGroup(item, config, renderedFields);
+            case 'spacer':
+                return html ``;
+            case 'text':
+                return html `<div class="form-text">${item.text}</div>`;
             default:
                 return html ``;
         }
     }
     renderRow(rowConfig, config, renderedFields) {
-        const { items, gap = '1rem', label, helpText } = rowConfig;
+        const { items, gap = '1rem', label, helpText, inlineLabels, marginBottom } = rowConfig;
         // Collect all fields from this row for width calculations
         const fieldsInRow = this.collectFieldsFromItems(items);
         const validFields = fieldsInRow.filter((fieldName) => { var _a; return (_a = config.form) === null || _a === void 0 ? void 0 : _a[fieldName]; });
@@ -1309,8 +1358,17 @@ export class NodeEditor extends RapidElement {
             }
         });
         const rowContent = html `
-      <div class="form-row" style="display: flex; gap: ${gap};">
+      <div
+        class="form-row"
+        style="display: flex; gap: ${gap};${marginBottom
+            ? ` margin-bottom: ${marginBottom};`
+            : ''}"
+      >
         ${items.map((item) => {
+            // Spacer items render as empty flex children
+            if (typeof item !== 'string' && item.type === 'spacer') {
+                return html `<div style="flex: 1 1 0;"></div>`;
+            }
             // Get the field name from the item
             const fieldName = typeof item === 'string'
                 ? item
@@ -1322,10 +1380,20 @@ export class NodeEditor extends RapidElement {
                 ? fieldFlexStyles.get(fieldName)
                 : '';
             const itemContent = this.renderLayoutItem(item, config, renderedFields);
+            // When inlineLabels is provided, render the label inline to the left
+            const inlineLabel = inlineLabels && fieldName ? inlineLabels[fieldName] : null;
             // Wrap in a div with flex style if we have a flex style
-            return flexStyle
-                ? html `<div style="${flexStyle}">${itemContent}</div>`
-                : itemContent;
+            if (flexStyle) {
+                return inlineLabel
+                    ? html `<div
+                  style="${flexStyle} display: flex; align-items: center; gap: 0.35rem;"
+                >
+                  <span class="form-row-inline-label">${inlineLabel}</span>
+                  <div style="flex: 1 1 0; min-width: 0;">${itemContent}</div>
+                </div>`
+                    : html `<div style="${flexStyle}">${itemContent}</div>`;
+            }
+            return itemContent;
         })}
       </div>
     `;
@@ -1640,8 +1708,36 @@ export class NodeEditor extends RapidElement {
       </div>
     `;
     }
-    render() {
+    handleIssueClick(issue) {
+        this.fireCustomEvent(CustomEventType.ShowIssue, { issue });
+    }
+    renderIssueWarnings() {
         var _a, _b;
+        const issues = [];
+        // Check for action-level issues
+        if (this.action && ((_a = this.issuesByAction) === null || _a === void 0 ? void 0 : _a.has(this.action.uuid))) {
+            issues.push(...this.issuesByAction.get(this.action.uuid));
+        }
+        // Check for node-level issues (issues without action_uuid)
+        if (this.node && ((_b = this.issuesByNode) === null || _b === void 0 ? void 0 : _b.has(this.node.uuid))) {
+            issues.push(...this.issuesByNode.get(this.node.uuid));
+        }
+        if (issues.length === 0)
+            return '';
+        return html `
+      ${issues.map((issue) => html `
+          <div
+            class="issue-warning"
+            @click=${() => this.handleIssueClick(issue)}
+          >
+            <temba-icon name="alert_warning" size="1.2"></temba-icon>
+            <span class="issue-text">${formatIssueMessage(issue)}</span>
+          </div>
+        `)}
+    `;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
         if (!this.isOpen) {
             return html ``;
         }
@@ -1660,6 +1756,8 @@ export class NodeEditor extends RapidElement {
       <temba-dialog
         header="${header}"
         .open="${this.isOpen}"
+        .originX=${(_b = (_a = this.dialogOrigin) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : null}
+        .originY=${(_d = (_c = this.dialogOrigin) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : null}
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"
@@ -1668,9 +1766,10 @@ export class NodeEditor extends RapidElement {
       >
         <div class="node-editor-form">
           ${this.renderFields()}
-          ${((_b = (_a = this.getNodeConfig()) === null || _a === void 0 ? void 0 : _a.router) === null || _b === void 0 ? void 0 : _b.configurable)
+          ${((_f = (_e = this.getNodeConfig()) === null || _e === void 0 ? void 0 : _e.router) === null || _f === void 0 ? void 0 : _f.configurable)
             ? this.renderRouterSection()
             : null}
+          ${this.renderIssueWarnings()}
         </div>
 
         <div slot="gutter">${this.renderGutter()}</div>
@@ -1687,6 +1786,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], NodeEditor.prototype, "nodeUI", void 0);
+__decorate([
+    property({ attribute: false })
+], NodeEditor.prototype, "dialogOrigin", void 0);
 __decorate([
     property({ type: Boolean })
 ], NodeEditor.prototype, "isOpen", void 0);
@@ -1717,4 +1819,10 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.flowDefinition)
 ], NodeEditor.prototype, "flowDefinition", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.issuesByNode)
+], NodeEditor.prototype, "issuesByNode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.issuesByAction)
+], NodeEditor.prototype, "issuesByAction", void 0);
 //# sourceMappingURL=NodeEditor.js.map