@nyaruka/temba-components 0.139.0 → 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;
@@ -548,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
@@ -949,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;
@@ -1002,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
         });
       }
     }
@@ -1125,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
             });
           }
         }
@@ -1310,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"
@@ -1325,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"
@@ -1438,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',
@@ -1452,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) =>
@@ -1628,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"
       >
@@ -1643,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)}
@@ -1661,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"
@@ -1691,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,

package/src/flow/Editor.ts

@@ -11,6 +11,7 @@ import {
 import { getStore } from '../store/Store';
 import {
   AppState,
+  FlowIssue,
   fromStore,
   zustand,
   FLOW_SPEC_VERSION
@@ -19,6 +20,13 @@ import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType, Workspace } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import {
+  formatIssueMessage,
+  getNodeBounds,
+  calculateReflowPositions,
+  NodeBounds,
+  snapToGrid
+} from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 
 interface Revision {
@@ -49,12 +57,6 @@ import { Dialog } from '../layout/Dialog';
 
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
-import {
-  getNodeBounds,
-  calculateReflowPositions,
-  NodeBounds,
-  snapToGrid
-} from './utils';
 import { FloatingWindow } from '../layout/FloatingWindow';
 
 export function findNodeForExit(
@@ -173,6 +175,9 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.getCurrentActivity())
   private activityData!: any;
 
+  @fromStore(zustand, (state: AppState) => state.flowInfo?.issues || [])
+  private flowIssues!: FlowIssue[];
+
   // Drag state
   @state()
   private isDragging = false;
@@ -217,6 +222,9 @@ export class Editor extends RapidElement {
   private connectionSourceX: number | null = null;
   private connectionSourceY: number | null = null;
 
+  @state()
+  private issuesWindowHidden = true;
+
   @state()
   private localizationWindowHidden = true;
 
@@ -269,6 +277,8 @@ export class Editor extends RapidElement {
   @state()
   private editingAction: Action | null = null;
 
+  private dialogOrigin: { x: number; y: number } | null = null;
+
   @state()
   private isCreatingNewNode = false;
 
@@ -357,6 +367,10 @@ export class Editor extends RapidElement {
         -webkit-font-smoothing: antialiased;
       }
 
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       #grid {
         position: relative;
         background-color: #f9f9f9;
@@ -490,7 +504,7 @@ export class Editor extends RapidElement {
         font-weight: 600;
         line-height: 0.9;
         cursor: pointer;
-        z-index: 500;
+        z-index: 10;
         pointer-events: auto;
         white-space: nowrap;
         user-select: none;
@@ -805,6 +819,26 @@ export class Editor extends RapidElement {
         color: #9ca3af;
         white-space: nowrap;
       }
+
+      .issue-list-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .issue-list-item:hover {
+        background: #fff5f5;
+      }
+
+      .issue-list-item temba-icon {
+        color: tomato;
+        flex-shrink: 0;
+      }
     `;
   }
 
@@ -1219,6 +1253,7 @@ export class Editor extends RapidElement {
     if (event.button !== 0) return;
 
     if (this.isReadOnly()) return;
+    this.blurActiveContentEditable();
 
     const element = event.currentTarget as HTMLElement;
     // Only start dragging if clicking on the element itself, not on exits or other interactive elements
@@ -1288,8 +1323,22 @@ export class Editor extends RapidElement {
     this.handleCanvasMouseDown(event);
   }
 
+  private blurActiveContentEditable(): void {
+    let active: Element | null = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    if (
+      active instanceof HTMLElement &&
+      active.getAttribute('contenteditable') === 'true'
+    ) {
+      active.blur();
+    }
+  }
+
   private handleCanvasMouseDown(event: MouseEvent): void {
     if (this.isReadOnly()) return;
+    this.blurActiveContentEditable();
 
     const target = event.target as HTMLElement;
     if (target.id === 'canvas' || target.id === 'grid') {
@@ -2160,6 +2209,10 @@ export class Editor extends RapidElement {
   private handleActionEditRequested(event: CustomEvent): void {
     // For action editing, we set the action and find the corresponding node
     this.editingAction = event.detail.action;
+    this.dialogOrigin =
+      event.detail.originX != null
+        ? { x: event.detail.originX, y: event.detail.originY }
+        : null;
 
     // Find the node that contains this action
     const nodeUuid = event.detail.nodeUuid;
@@ -2205,6 +2258,10 @@ export class Editor extends RapidElement {
   private handleNodeEditRequested(event: CustomEvent): void {
     this.editingNode = event.detail.node;
     this.editingNodeUI = event.detail.nodeUI;
+    this.dialogOrigin =
+      event.detail.originX != null
+        ? { x: event.detail.originX, y: event.detail.originY }
+        : null;
   }
 
   private handleNodeDeleted(event: CustomEvent): void {
@@ -2294,6 +2351,7 @@ export class Editor extends RapidElement {
     this.editingNode = null;
     this.editingNodeUI = null;
     this.editingAction = null;
+    this.dialogOrigin = null;
   }
 
   private handleActionEditCanceled(): void {
@@ -2948,6 +3006,7 @@ export class Editor extends RapidElement {
 
     this.localizationWindowHidden = false;
     this.revisionsWindowHidden = true;
+    this.issuesWindowHidden = true;
 
     const alreadySelected = languages.some(
       (lang) => lang.code === this.languageCode
@@ -3210,11 +3269,47 @@ export class Editor extends RapidElement {
     this.autoTranslating = false;
   }
 
+  private handleIssuesTabClick(): void {
+    this.issuesWindowHidden = false;
+    this.revisionsWindowHidden = true;
+    this.localizationWindowHidden = true;
+  }
+
+  private handleIssuesWindowClosed(): void {
+    this.issuesWindowHidden = true;
+  }
+
+  private handleIssueItemClick(issue: FlowIssue): void {
+    const issuesWindow = document.getElementById(
+      'issues-window'
+    ) as FloatingWindow;
+    issuesWindow?.handleClose();
+    this.issuesWindowHidden = true;
+
+    this.focusNode(issue.node_uuid);
+
+    const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
+    if (!node) return;
+
+    if (issue.action_uuid) {
+      const action = node.actions?.find((a) => a.uuid === issue.action_uuid);
+      if (action) {
+        this.editingAction = action;
+        this.editingNode = node;
+        this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+      }
+    } else {
+      this.editingNode = node;
+      this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+    }
+  }
+
   private handleRevisionsTabClick(): void {
     if (this.revisionsWindowHidden) {
       this.fetchRevisions();
       this.revisionsWindowHidden = false;
-      this.localizationWindowHidden = true; // Close other window
+      this.issuesWindowHidden = true;
+      this.localizationWindowHidden = true;
     }
   }
 
@@ -3328,6 +3423,51 @@ export class Editor extends RapidElement {
     getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
   }
 
+  private renderIssuesTab(): TemplateResult | string {
+    if (!this.flowIssues?.length) return '';
+    return html`
+      <temba-floating-tab
+        id="issues-tab"
+        icon="alert_warning"
+        label="Flow Issues"
+        color="tomato"
+        order="1"
+        .hidden=${!this.issuesWindowHidden}
+        @temba-button-clicked=${this.handleIssuesTabClick}
+      ></temba-floating-tab>
+    `;
+  }
+
+  private renderIssuesWindow(): TemplateResult | string {
+    if (!this.flowIssues?.length) return '';
+    return html`
+      <temba-floating-window
+        id="issues-window"
+        header="Flow Issues"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="tomato"
+        .hidden=${this.issuesWindowHidden}
+        @temba-dialog-hidden=${this.handleIssuesWindowClosed}
+      >
+        <div style="display:flex; flex-direction:column; gap:2px;">
+          ${this.flowIssues.map(
+            (issue) => html`
+              <div
+                class="issue-list-item"
+                @click=${() => this.handleIssueItemClick(issue)}
+              >
+                <temba-icon name="alert_warning" size="1.2"></temba-icon>
+                <span>${formatIssueMessage(issue)}</span>
+              </div>
+            `
+          )}
+        </div>
+      </temba-floating-window>
+    `;
+  }
+
   private renderRevisionsTab(): TemplateResult | string {
     return html`
       <temba-floating-tab
@@ -3335,7 +3475,7 @@ export class Editor extends RapidElement {
         icon="revisions"
         label="Revisions"
         color="rgb(142, 94, 167)"
-        order="1"
+        order="2"
         .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
         @temba-button-clicked=${this.handleRevisionsTabClick}
       ></temba-floating-tab>
@@ -3633,7 +3773,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
-        order="2"
+        order="3"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -3691,8 +3831,9 @@ export class Editor extends RapidElement {
 
     const stickies = this.definition?._ui?.stickies || {};
 
-    return html`${style} ${this.renderRevisionsWindow()}
-      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
+    return html`${style} ${this.renderIssuesWindow()}
+      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
@@ -3782,6 +3923,7 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
+            .dialogOrigin=${this.dialogOrigin}
             @temba-node-saved=${(e: CustomEvent) =>
               this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e: CustomEvent) =>
@@ -3797,6 +3939,7 @@ export class Editor extends RapidElement {
             .features=${this.features}
           ></temba-node-type-selector>`
         : ''}
-      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
+      ${this.renderIssuesTab()} ${this.renderRevisionsTab()}
+      ${this.renderLocalizationTab()} `;
   }
 }