@nyaruka/temba-components 0.138.6 → 0.140.0

package/src/flow/CanvasNode.ts

@@ -9,7 +9,7 @@ import { getClasses } from '../utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
-import { AppState, fromStore, zustand } from '../store/AppState';
+import { AppState, FlowIssue, fromStore, zustand } from '../store/AppState';
 
 const DRAG_THRESHOLD = 5;
 
@@ -49,6 +49,12 @@ export class CanvasNode extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.getCurrentActivity())
   private activity!: any;
 
+  @fromStore(zustand, (state: AppState) => state.issuesByNode)
+  private issuesByNode!: Map<string, FlowIssue[]>;
+
+  @fromStore(zustand, (state: AppState) => state.issuesByAction)
+  private issuesByAction!: Map<string, FlowIssue[]>;
+
   // Track exits that are in "removing" state
   private exitRemovalTimeouts: Map<string, number> = new Map();
 
@@ -185,6 +191,12 @@ export class CanvasNode extends RapidElement {
         pointer-events: none !important;
       }
 
+      /* Issue indicators - hatched red title bar */
+      .action-content.has-issues .cn-title,
+      .node.has-issues > .router .cn-title {
+        background: repeating-linear-gradient(120deg, tomato, tomato 6px, #ff7056 0, #ff7056 18px) !important;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -360,11 +372,7 @@ export class CanvasNode extends RapidElement {
         position: relative;
         box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
         cursor: pointer;
-        pointer-events: none;
-      }
-
-      .exit.jtk-connected {
-        background: var(--color-connectors, #e6e6e6);
+        pointer-events: all;
       }
 
       .exit.connected {
@@ -376,11 +384,14 @@ export class CanvasNode extends RapidElement {
         background-color: var(--color-connectors, #e6e6e6);
       }
 
-      .exit.connected.read-only, .exit.connected.read-only:hover {
-        background-color: #fff;
+      .exit.read-only, .exit.read-only:hover {
         pointer-events: none !important;
         cursor: default;
       }
+
+      .exit.connected.read-only, .exit.connected.read-only:hover {
+        background-color: #fff;
+      }
       
       .exit.removing, .exit.removing:hover {
         background-color: var(--color-error);
@@ -549,14 +560,17 @@ export class CanvasNode extends RapidElement {
         // make our initial connections
         // We use setTimeout to allow for DOM updates to complete before querying for exits
         this.connectionTimeout = window.setTimeout(() => {
-          for (const exit of this.node.exits) {
-            this.plumber.makeSource(exit.uuid);
-            if (exit.destination_uuid) {
-              this.plumber.connectIds(
-                this.node.uuid,
-                exit.uuid,
-                exit.destination_uuid
-              );
+          // Terminal nodes have no visible exits
+          if (this.ui?.type !== 'terminal') {
+            for (const exit of this.node.exits) {
+              this.plumber.makeSource(exit.uuid);
+              if (exit.destination_uuid) {
+                this.plumber.connectIds(
+                  this.node.uuid,
+                  exit.uuid,
+                  exit.destination_uuid
+                );
+              }
             }
           }
           // Note: revalidation is handled by plumber's processPendingConnections which calls repaintEverything
@@ -950,6 +964,11 @@ export class CanvasNode extends RapidElement {
     this.requestUpdate();
   }
 
+  private getTopCenter(el: Element): { x: number; y: number } {
+    const rect = el.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top };
+  }
+
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
     // Don't handle clicks on the remove button, drag handle, or when action is in removing state
     const target = event.target as HTMLElement;
@@ -1003,10 +1022,18 @@ export class CanvasNode extends RapidElement {
       // Only fire the action edit event if we haven't dragged beyond the threshold
       // AND either there's no Editor parent (test case) or the Editor didn't drag the node
       if (distance <= DRAG_THRESHOLD && (!editor || !editorWasDragging)) {
+        // Use top-center of the action element as the dialog origin
+        const actionEl = event.currentTarget as Element;
+        const origin = actionEl
+          ? this.getTopCenter(actionEl)
+          : { x: event.clientX, y: event.clientY };
+
         // Fire event to request action editing
         this.fireCustomEvent(CustomEventType.ActionEditRequested, {
           action,
-          nodeUuid: this.node.uuid
+          nodeUuid: this.node.uuid,
+          originX: origin.x,
+          originY: origin.y
         });
       }
     }
@@ -1126,17 +1153,24 @@ export class CanvasNode extends RapidElement {
         // Using literal 5 instead of DRAG_THRESHOLD since it's not imported
         // Fire event to request node editing if the node has a router
         if (this.node.router) {
+          // Use top-center of the node as the dialog origin
+          const origin = this.getTopCenter(this);
+
           // If router node has exactly one action, open the action editor directly
           if (this.node.actions && this.node.actions.length === 1) {
             this.fireCustomEvent(CustomEventType.ActionEditRequested, {
               action: this.node.actions[0],
-              nodeUuid: this.node.uuid
+              nodeUuid: this.node.uuid,
+              originX: origin.x,
+              originY: origin.y
             });
           } else {
             // Otherwise open the node editor as before
             this.fireCustomEvent(CustomEventType.NodeEditRequested, {
               node: this.node,
-              nodeUI: this.ui
+              nodeUI: this.ui,
+              originX: origin.x,
+              originY: origin.y
             });
           }
         }
@@ -1311,13 +1345,11 @@ export class CanvasNode extends RapidElement {
     const color = config.group
       ? ACTION_GROUP_METADATA[config.group]?.color
       : '#aaaaaa';
+    const isTerminal = this.ui?.type === 'terminal';
     return html`<div class="cn-title" style="background:${color}">
-      ${this.ui?.type === 'execute_actions'
-        ? html`<temba-icon
-            class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
-            name="sort"
-          ></temba-icon>`
-        : this.node?.actions?.length > 1
+      ${isTerminal
+        ? html`<div class="title-spacer"></div>`
+        : this.ui?.type === 'execute_actions' || this.node?.actions?.length > 1
         ? html`<temba-icon
             class="drag-handle ${this.isReadOnly() ? 'read-only-hidden' : ''}"
             name="sort"
@@ -1326,7 +1358,9 @@ export class CanvasNode extends RapidElement {
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
       <div
-        class="remove-button ${this.isReadOnly() ? 'read-only-hidden' : ''}"
+        class="remove-button ${isTerminal || this.isReadOnly()
+          ? 'read-only-hidden'
+          : ''}"
         @click=${(e: MouseEvent) =>
           this.handleActionRemoveClick(e, action, index)}
         title="Remove action"
@@ -1439,6 +1473,7 @@ export class CanvasNode extends RapidElement {
     const displayAction = this.getLocalizedAction(action);
 
     if (config) {
+      const hasIssues = this.issuesByAction?.has(action.uuid);
       const classes = [
         'action',
         'sortable',
@@ -1453,7 +1488,7 @@ export class CanvasNode extends RapidElement {
 
       return html`<div class="${classes}" id="action-${index}">
         <div
-          class="action-content"
+          class="action-content ${hasIssues ? 'has-issues' : ''}"
           @mousedown=${(e: MouseEvent) =>
             !isDisabled && this.handleActionMouseDown(e, action)}
           @mouseup=${(e: MouseEvent) =>
@@ -1629,13 +1664,19 @@ export class CanvasNode extends RapidElement {
     const activeCount =
       (this.activity?.nodes && this.activity.nodes[this.node.uuid]) || 0;
 
+    // Check for node-level issues or action-level issues on any action in this node
+    const nodeHasIssues =
+      this.issuesByNode?.has(this.node.uuid) ||
+      this.node.actions?.some((a) => this.issuesByAction?.has(a.uuid));
+
     return html`
       <div
         id="${this.node.uuid}"
         class=${getClasses({
           node: true,
           'execute-actions': this.ui.type === 'execute_actions',
-          'non-localizable': isNodeDisabled
+          'non-localizable': isNodeDisabled,
+          'has-issues': nodeHasIssues
         })}
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
@@ -1644,7 +1685,9 @@ export class CanvasNode extends RapidElement {
               ${activeCount.toLocaleString()}
             </div>`
           : ''}
-        ${nodeConfig && nodeConfig.type !== 'execute_actions'
+        ${nodeConfig &&
+        nodeConfig.type !== 'execute_actions' &&
+        nodeConfig.type !== 'terminal'
           ? html`<div class="router" style="position: relative;">
               <div
                 @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
@@ -1662,7 +1705,7 @@ export class CanvasNode extends RapidElement {
                   : null}
               </div>
             </div>`
-          : this.node.actions.length > 0
+          : this.node.actions?.length > 0
           ? this.ui.type === 'execute_actions'
             ? html`<temba-sortable-list
                   dragHandle="drag-handle"
@@ -1692,6 +1735,8 @@ export class CanvasNode extends RapidElement {
               ${this.renderRouter(this.node.router, this.ui)}
               ${this.renderCategories(this.node)}
             </div>`
+          : this.ui.type === 'terminal'
+          ? ''
           : html`<div class="action-exits">
               ${repeat(
                 this.node.exits,