@nyaruka/temba-components 0.138.6 → 0.140.0

package/src/flow/NodeEditor.ts

@@ -20,9 +20,10 @@ import {
 } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
+import { formatIssueMessage } from './utils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
-import { AppState, fromStore, zustand } from '../store/AppState';
+import { AppState, FlowIssue, fromStore, zustand } from '../store/AppState';
 import { getStore } from '../store/Store';
 
 export class NodeEditor extends RapidElement {
@@ -55,6 +56,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;
@@ -112,12 +126,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;
@@ -381,6 +412,9 @@ export class NodeEditor extends RapidElement {
   @property({ type: Object })
   nodeUI?: NodeUI;
 
+  @property({ attribute: false })
+  dialogOrigin?: { x: number; y: number };
+
   @property({ type: Boolean })
   isOpen: boolean = false;
 
@@ -411,6 +445,12 @@ export class NodeEditor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.flowDefinition)
   private flowDefinition!: FlowDefinition;
 
+  @fromStore(zustand, (state: AppState) => state.issuesByNode)
+  private issuesByNode!: Map<string, FlowIssue[]>;
+
+  @fromStore(zustand, (state: AppState) => state.issuesByAction)
+  private issuesByAction!: Map<string, FlowIssue[]>;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
@@ -447,7 +487,13 @@ export class NodeEditor extends RapidElement {
   private initializeFormData(): void {
     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];
 
@@ -597,8 +643,13 @@ export class NodeEditor extends RapidElement {
     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' as any)) &&
+        this.action
+      ) {
         return ACTION_CONFIG[this.action.type] || null;
       }
 
@@ -1462,6 +1513,11 @@ export class NodeEditor extends RapidElement {
         } else if (fieldName && config.type === 'message-editor') {
           // 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 as any;
+          const url = picker.attachments?.[0]?.url || '';
+          this.handleNewFieldChange(fieldName, url);
         } else {
           // Default handling for most field types
           this.handleFormFieldChange(fieldName, e);
@@ -1575,6 +1631,12 @@ export class NodeEditor extends RapidElement {
       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``;
     }
@@ -1585,7 +1647,14 @@ export class NodeEditor extends RapidElement {
     config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
-    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);
@@ -1619,8 +1688,18 @@ 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'
@@ -1641,10 +1720,22 @@ export class NodeEditor extends RapidElement {
             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>
     `;
@@ -2038,6 +2129,40 @@ export class NodeEditor extends RapidElement {
     `;
   }
 
+  private handleIssueClick(issue: FlowIssue): void {
+    this.fireCustomEvent(CustomEventType.ShowIssue, { issue });
+  }
+
+  private renderIssueWarnings(): TemplateResult | string {
+    const issues: FlowIssue[] = [];
+
+    // Check for action-level issues
+    if (this.action && this.issuesByAction?.has(this.action.uuid)) {
+      issues.push(...this.issuesByAction.get(this.action.uuid));
+    }
+
+    // Check for node-level issues (issues without action_uuid)
+    if (this.node && this.issuesByNode?.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(): TemplateResult {
     if (!this.isOpen) {
       return html``;
@@ -2061,6 +2186,8 @@ export class NodeEditor extends RapidElement {
       <temba-dialog
         header="${header}"
         .open="${this.isOpen}"
+        .originX=${this.dialogOrigin?.x ?? null}
+        .originY=${this.dialogOrigin?.y ?? null}
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"
@@ -2072,6 +2199,7 @@ export class NodeEditor extends RapidElement {
           ${this.getNodeConfig()?.router?.configurable
             ? this.renderRouterSection()
             : null}
+          ${this.renderIssueWarnings()}
         </div>
 
         <div slot="gutter">${this.renderGutter()}</div>