@nyaruka/temba-components 0.132.0 → 0.133.0

package/src/flow/CanvasNode.ts

@@ -76,6 +76,10 @@ export class CanvasNode extends RapidElement {
     actionHeight: number;
   } | null = null;
 
+  // Track if we're showing a placeholder for our own last action being dragged out
+  private showLastActionPlaceholder = false;
+  private lastActionPlaceholderHeight = 60;
+
   static get styles() {
     return css`
 
@@ -119,6 +123,7 @@ export class CanvasNode extends RapidElement {
 
       .action .cn-title:hover .remove-button,
       .router:hover .remove-button {
+        visibility: visible;
         opacity: 0.7;
       }
 
@@ -135,7 +140,7 @@ export class CanvasNode extends RapidElement {
       .remove-button {
         background: transparent;
         color: white;
-        opacity: 0;
+        visibility: hidden;
         cursor: pointer;
         font-size: 1em;
         font-weight: 600;
@@ -143,16 +148,22 @@ export class CanvasNode extends RapidElement {
         z-index: 10;
         transition: all 100ms ease-in-out;
         align-self: center;
-        padding:0.25em;
+        margin-right:0.15em;
         border: 0px solid red;
         width: 1em;
         pointer-events: auto; /* Ensure remove button can receive events */
       }
 
       .remove-button:hover {
+        visibility: visible;
         opacity: 1;
       }
 
+      .translating-hidden {
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+
       .action.sortable {
         display: flex;
         align-items: stretch;
@@ -164,6 +175,7 @@ export class CanvasNode extends RapidElement {
         flex-direction: column;
         min-width: 0; /* Allow flex item to shrink below its content size */
         overflow: hidden;
+        background: #fff;
       }
 
       .action .body {
@@ -194,7 +206,7 @@ export class CanvasNode extends RapidElement {
       }      
 
       .action .drag-handle {
-        opacity: 0;
+        visibility: hidden;
         transition: all 200ms ease-in-out;
         cursor: move;
         background: rgba(0, 0, 0, 0.02);
@@ -209,6 +221,7 @@ export class CanvasNode extends RapidElement {
       }
 
       .action:hover .drag-handle {
+        visibility: visible;
         opacity: 0.7;
         
         
@@ -219,6 +232,7 @@ export class CanvasNode extends RapidElement {
       }
 
       .action .drag-handle:hover {
+        visibility: visible;
         opacity: 1;
         
       }
@@ -422,6 +436,18 @@ export class CanvasNode extends RapidElement {
         opacity: 1 !important;
         transform: scale(1.1);
       }
+
+      .empty-node-placeholder {
+        height: 60px;
+        background: #f3f4f6;
+        border: 2px dashed #d1d5db;
+        border-radius: var(--curvature);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #9ca3af;
+        font-size: 0.9em;
+      }
   }`;
   }
 
@@ -734,6 +760,8 @@ export class CanvasNode extends RapidElement {
     }
 
     // Fire the node deleted event
+    // The Editor will handle cleanup (Plumber connections) and call store.removeNodes()
+    // The store's removeNodes method handles rerouting of connections
     this.fireCustomEvent(CustomEventType.NodeDeleted, {
       uuid: this.node.uuid
     });
@@ -742,6 +770,12 @@ export class CanvasNode extends RapidElement {
   private handleActionOrderChanged(event: CustomEvent) {
     const [fromIdx, toIdx] = event.detail.swap;
 
+    // If we have an external drag in progress, ignore internal order changes
+    // as they'll be handled by the external drop handler
+    if (this.externalDragInfo) {
+      return;
+    }
+
     // swap our actions
     const newActions = [...this.node.actions];
     const movedAction = newActions.splice(fromIdx, 1)[0];
@@ -769,6 +803,13 @@ export class CanvasNode extends RapidElement {
       // Fallback to a reasonable default
       this.draggedActionHeight = 60;
     }
+
+    // If this is the last action, show placeholder
+    if (this.node.actions.length === 1) {
+      this.showLastActionPlaceholder = true;
+      this.lastActionPlaceholderHeight = this.draggedActionHeight;
+      this.requestUpdate();
+    }
   }
 
   private handleActionDragExternal(event: CustomEvent) {
@@ -785,6 +826,9 @@ export class CanvasNode extends RapidElement {
     const actionIndex = parseInt(splitId[1], 10);
     const action = this.node.actions[actionIndex];
 
+    // Check if this is the last action
+    const isLastAction = this.node.actions.length === 1;
+
     // fire event to editor to show canvas drop preview, including the captured height
     this.fireCustomEvent(CustomEventType.DragExternal, {
       action,
@@ -792,7 +836,8 @@ export class CanvasNode extends RapidElement {
       actionIndex,
       mouseX: event.detail.mouseX,
       mouseY: event.detail.mouseY,
-      actionHeight: this.draggedActionHeight
+      actionHeight: this.draggedActionHeight,
+      isLastAction
     });
   }
 
@@ -807,6 +852,9 @@ export class CanvasNode extends RapidElement {
   private handleActionDragStop(event: CustomEvent) {
     const isExternal = event.detail.isExternal;
 
+    // Clear last action placeholder when drag stops
+    this.showLastActionPlaceholder = false;
+
     if (isExternal) {
       // stop propagation of the original event from SortableList
       event.stopPropagation();
@@ -821,16 +869,23 @@ export class CanvasNode extends RapidElement {
       const actionIndex = parseInt(split[1], 10);
       const action = this.node.actions[actionIndex];
 
-      // fire event to editor to create new node
+      // Check if this is the last action in the node
+      const isLastAction = this.node.actions.length === 1;
+
+      // Always fire the DragStop event so the Editor can handle drops on other nodes
+      // The Editor will decide whether to create a new node or drop on existing node
       this.fireCustomEvent(CustomEventType.DragStop, {
         action,
         nodeUuid: this.node.uuid,
         actionIndex,
         isExternal: true,
+        isLastAction,
         mouseX: event.detail.mouseX,
         mouseY: event.detail.mouseY
       });
     }
+
+    this.requestUpdate();
   }
 
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
@@ -1141,7 +1196,6 @@ export class CanvasNode extends RapidElement {
     // Clear external drag state
     this.externalDragInfo = null;
 
-    // Remove the action from the source node
     const store = getStore();
     if (!store) return;
 
@@ -1152,33 +1206,36 @@ export class CanvasNode extends RapidElement {
       (n) => n.uuid === sourceNodeUuid
     );
 
-    if (sourceNode) {
-      const updatedSourceActions = sourceNode.actions.filter(
-        (_a, idx) => idx !== actionIndex
-      );
-
-      // If source node has no actions left, remove it
-      if (updatedSourceActions.length === 0) {
-        this.fireCustomEvent(CustomEventType.NodeDeleted, {
-          uuid: sourceNodeUuid
-        });
-      } else {
-        // Update source node
-        const updatedSourceNode = {
-          ...sourceNode,
-          actions: updatedSourceActions
-        };
-        getStore()?.getState().updateNode(sourceNodeUuid, updatedSourceNode);
-      }
-    }
+    if (!sourceNode) return;
 
-    // Add the action to this node at the calculated position
+    // IMPORTANT: Add the action to this node FIRST, before removing from source
+    // This ensures we don't lose the action if the source node gets deleted
     const newActions = [...this.node.actions];
     newActions.splice(dropIndex, 0, action);
 
     const updatedNode = { ...this.node, actions: newActions };
     getStore()?.getState().updateNode(this.node.uuid, updatedNode);
 
+    // Now remove the action from the source node
+    const updatedSourceActions = sourceNode.actions.filter(
+      (_a, idx) => idx !== actionIndex
+    );
+
+    // If source node has no actions left, remove it
+    if (updatedSourceActions.length === 0) {
+      // Fire event to Editor so it can clean up jsPlumb connections properly
+      this.fireCustomEvent(CustomEventType.NodeDeleted, {
+        uuid: sourceNodeUuid
+      });
+    } else {
+      // Update source node
+      const updatedSourceNode = {
+        ...sourceNode,
+        actions: updatedSourceActions
+      };
+      getStore()?.getState().updateNode(sourceNodeUuid, updatedSourceNode);
+    }
+
     // Request update
     this.requestUpdate();
   }
@@ -1193,21 +1250,31 @@ export class CanvasNode extends RapidElement {
       ? ACTION_GROUP_METADATA[config.group]?.color
       : '#aaaaaa';
     return html`<div class="cn-title" style="background:${color}">
-      ${!this.isTranslating && this.node?.actions?.length > 1
-        ? html`<temba-icon class="drag-handle" name="sort"></temba-icon>`
+      ${this.ui?.type === 'execute_actions'
+        ? html`<temba-icon
+            class="drag-handle ${this.isTranslating
+              ? 'translating-hidden'
+              : ''}"
+            name="sort"
+          ></temba-icon>`
+        : this.node?.actions?.length > 1
+        ? html`<temba-icon
+            class="drag-handle ${this.isTranslating
+              ? 'translating-hidden'
+              : ''}"
+            name="sort"
+          ></temba-icon>`
         : html`<div class="title-spacer"></div>`}
 
       <div class="name">${isRemoving ? 'Remove?' : config.name}</div>
-      ${!this.isTranslating
-        ? html`<div
-            class="remove-button"
-            @click=${(e: MouseEvent) =>
-              this.handleActionRemoveClick(e, action, index)}
-            title="Remove action"
-          >
-            ✕
-          </div>`
-        : html`<div class="title-spacer"></div>`}
+      <div
+        class="remove-button ${this.isTranslating ? 'translating-hidden' : ''}"
+        @click=${(e: MouseEvent) =>
+          this.handleActionRemoveClick(e, action, index)}
+        title="Remove action"
+      >
+        ✕
+      </div>
     </div>`;
   }
 
@@ -1234,15 +1301,13 @@ export class CanvasNode extends RapidElement {
           ? config.renderTitle(node, ui)
           : html`${config.name}`}
       </div>
-      ${!this.isTranslating
-        ? html`<div
-            class="remove-button"
-            @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
-            title="Remove node"
-          >
-            ✕
-          </div>`
-        : html`<div class="title-spacer"></div>`}
+      <div
+        class="remove-button ${this.isTranslating ? 'translating-hidden' : ''}"
+        @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
+        title="Remove node"
+      >
+        ✕
+      </div>
     </div>`;
   }
 
@@ -1528,19 +1593,27 @@ export class CanvasNode extends RapidElement {
           : this.node.actions.length > 0
           ? this.ui.type === 'execute_actions'
             ? html`<temba-sortable-list
-                dragHandle="drag-handle"
-                externalDrag
-                @temba-order-changed="${this.handleActionOrderChanged}"
-                @temba-drag-start="${this.handleActionDragStart}"
-                @temba-drag-external="${this.handleActionDragExternal}"
-                @temba-drag-internal="${this.handleActionDragInternal}"
-                @temba-drag-stop="${this.handleActionDragStop}"
-              >
-                ${this.renderActionsWithPlaceholder()}
-              </temba-sortable-list>`
+                  dragHandle="drag-handle"
+                  externalDrag
+                  @temba-order-changed="${this.handleActionOrderChanged}"
+                  @temba-drag-start="${this.handleActionDragStart}"
+                  @temba-drag-external="${this.handleActionDragExternal}"
+                  @temba-drag-internal="${this.handleActionDragInternal}"
+                  @temba-drag-stop="${this.handleActionDragStop}"
+                >
+                  ${this.renderActionsWithPlaceholder()}
+                </temba-sortable-list>
+                ${this.showLastActionPlaceholder
+                  ? html`<div
+                      class="empty-node-placeholder"
+                      style="height: ${this.lastActionPlaceholderHeight}px;"
+                    ></div>`
+                  : ''}`
             : html`${this.node.actions.map((action, index) =>
                 this.renderAction(this.node, action, index)
               )}`
+          : this.ui.type === 'execute_actions'
+          ? html`<div class="empty-node-placeholder"></div>`
           : ''}
         ${this.node.router
           ? html`<div class="router-section">

package/src/flow/Editor.ts

@@ -292,8 +292,6 @@ export class Editor extends RapidElement {
         );
         background-size: 20px 20px;
         background-position: 10px 10px;
-        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);
-        border-top: 1px solid #e0e0e0;
         width: 100%;
         display: flex;
       }
@@ -741,11 +739,19 @@ export class Editor extends RapidElement {
   private saveChanges(): void {
     // post the flow definition to the server
     getStore()
-      .postJSON(`/flow/revisions/${this.flow}`, this.definition)
+      .postJSON(`/flow/revisions/${this.flow}/`, this.definition)
       .then((response) => {
-        // Update flow info with the response data
-        if (response.json && response.json.info) {
-          getStore().getState().setFlowInfo(response.json.info);
+        // Update flow info and revision with the response data
+        if (response.json) {
+          const state = getStore().getState();
+
+          if (response.json.info) {
+            state.setFlowInfo(response.json.info);
+          }
+
+          if (response.json.revision?.revision !== undefined) {
+            state.setRevision(response.json.revision.revision);
+          }
         }
       })
       .catch((error) => {
@@ -812,6 +818,12 @@ export class Editor extends RapidElement {
       this.handleNodeEditRequested.bind(this)
     );
 
+    // Listen for node deletion events
+    this.addEventListener(
+      CustomEventType.NodeDeleted,
+      this.handleNodeDeleted.bind(this)
+    );
+
     // Listen for canvas menu selections
     this.addEventListener(CustomEventType.Selection, (event: CustomEvent) => {
       const target = event.target as HTMLElement;
@@ -1599,6 +1611,13 @@ export class Editor extends RapidElement {
     this.editingNodeUI = event.detail.nodeUI;
   }
 
+  private handleNodeDeleted(event: CustomEvent): void {
+    const nodeUuid = event.detail.uuid;
+    if (nodeUuid) {
+      this.deleteNodes([nodeUuid]);
+    }
+  }
+
   private handleActionSaved(updatedAction: Action): void {
     if (this.editingNode && this.editingAction) {
       let updatedActions: Action[];
@@ -1801,7 +1820,8 @@ export class Editor extends RapidElement {
       actionIndex,
       mouseX,
       mouseY,
-      actionHeight = 60
+      actionHeight = 60,
+      isLastAction = false
     } = event.detail;
 
     // Check if mouse is over another execute_actions node
@@ -1896,29 +1916,47 @@ export class Editor extends RapidElement {
 
     this.actionDragTargetNodeUuid = null;
 
-    // Tell source node to hide ghost (we're not over a valid target)
     const sourceElement = this.querySelector(
       `temba-flow-node[data-node-uuid="${nodeUuid}"]`
     );
-    if (sourceElement) {
-      sourceElement.dispatchEvent(
-        new CustomEvent('action-hide-ghost', {
-          detail: {},
-          bubbles: false
-        })
-      );
-    }
 
-    // Don't snap to grid for preview - let it follow cursor smoothly
-    const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+    // Show canvas drop preview only if this is NOT the last action
+    // Last actions can only be dropped on other nodes, not on canvas
+    if (!isLastAction) {
+      // Hide ghost when showing canvas preview (for canvas drops)
+      if (sourceElement) {
+        sourceElement.dispatchEvent(
+          new CustomEvent('action-hide-ghost', {
+            detail: {},
+            bubbles: false
+          })
+        );
+      }
 
-    this.canvasDropPreview = {
-      action,
-      nodeUuid,
-      actionIndex,
-      position,
-      actionHeight
-    };
+      // Don't snap to grid for preview - let it follow cursor smoothly
+      const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+
+      this.canvasDropPreview = {
+        action,
+        nodeUuid,
+        actionIndex,
+        position,
+        actionHeight
+      };
+    } else {
+      // For last action, keep ghost visible (can't drop on canvas)
+      if (sourceElement) {
+        sourceElement.dispatchEvent(
+          new CustomEvent('action-show-ghost', {
+            detail: {},
+            bubbles: false
+          })
+        );
+      }
+
+      // Clear any existing preview for last action
+      this.canvasDropPreview = null;
+    }
 
     // Force re-render to update preview position
     this.requestUpdate();
@@ -1946,7 +1984,14 @@ export class Editor extends RapidElement {
   }
 
   private handleActionDropExternal(event: CustomEvent): void {
-    const { action, nodeUuid, actionIndex, mouseX, mouseY } = event.detail;
+    const {
+      action,
+      nodeUuid,
+      actionIndex,
+      mouseX,
+      mouseY,
+      isLastAction = false
+    } = event.detail;
 
     // Check if we're dropping on an existing execute_actions node
     const targetNodeUuid = this.actionDragTargetNodeUuid;
@@ -1977,6 +2022,14 @@ export class Editor extends RapidElement {
       return;
     }
 
+    // If this is the last action and we're not dropping on another node, do nothing
+    // Last actions can only be moved to other nodes, not dropped on canvas
+    if (isLastAction) {
+      this.canvasDropPreview = null;
+      this.actionDragTargetNodeUuid = null;
+      return;
+    }
+
     // Not dropping on another node, create a new one on canvas
     // Snap to grid for the final drop position
     const position = this.calculateCanvasDropPosition(mouseX, mouseY, true);
@@ -1991,7 +2044,8 @@ export class Editor extends RapidElement {
 
     // if no actions remain, delete the node
     if (updatedActions.length === 0) {
-      getStore()?.getState().removeNodes([nodeUuid]);
+      // Use deleteNodes to properly clean up Plumber connections before removing
+      this.deleteNodes([nodeUuid]);
     } else {
       // update the node
       const updatedNode = { ...originalNode, actions: updatedActions };
@@ -2573,7 +2627,7 @@ export class Editor extends RapidElement {
         header="Translations"
         .width=${360}
         .maxHeight=${600}
-        .top=${20}
+        .top=${170}
         color="#6b7280"
         .hidden=${this.localizationWindowHidden}
         @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
@@ -2738,6 +2792,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
+        top="180"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -2810,8 +2865,7 @@ export class Editor extends RapidElement {
                     ? 'selected'
                     : ''}"
                   @mousedown=${this.handleMouseDown.bind(this)}
-                  style="left:${position.left}px; top:${position.top}px; z-index: ${1000 +
-                  position.top}"
+                  style="left:${position.left}px; top:${position.top}px;"
                   uuid=${uuid}
                   .data=${sticky}
                   .dragging=${dragging}

package/src/layout/FloatingWindow.ts

@@ -18,7 +18,7 @@ export class FloatingWindow extends RapidElement {
         transition: transform var(--transition-duration, 300ms) ease-in-out,
           opacity var(--transition-duration, 300ms) ease-in-out;
         position: fixed;
-        z-index: 9999;
+        z-index: 5000;
         top: 100px;
         background: white;
         border-radius: 8px;
@@ -193,8 +193,6 @@ export class FloatingWindow extends RapidElement {
   ): void {
     super.updated(changes);
     if (changes.has('hidden')) {
-      this.classList.toggle('hidden', this.hidden);
-
       // when hiding, reset positioning behavior to original
       if (this.hidden && !changes.get('hidden')) {
         if (this.defaultLeft === -1) {

package/src/list/ContentMenu.ts

@@ -36,6 +36,7 @@ export class ContentMenu extends RapidElement {
     return css`
       :host {
         tabindex: 0;
+        z-index: 5000;
       }
       .container {
         --button-y: 0.4em;

package/src/list/SortableList.ts

@@ -577,8 +577,9 @@ export class SortableList extends RapidElement {
         const fromIdx = originalDragIdx;
         const toIdx = this.pendingDropIndex;
 
-        // only fire if the position actually changed
-        if (fromIdx !== toIdx) {
+        // only fire if the position actually changed AND this is not an external drag
+        // External drags are handled by external drop handlers
+        if (fromIdx !== toIdx && !this.isExternalDrag) {
           this.fireCustomEvent(CustomEventType.OrderChanged, {
             swap: [fromIdx, toIdx]
           });