@nyaruka/temba-components 0.156.3 → 0.156.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.3",
+  "version": "0.156.5",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/flow/CanvasNode.ts

@@ -5,7 +5,8 @@ import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
-import { getClasses } from '../utils';
+import { generateUUID, getClasses } from '../utils';
+import { SortableList } from '../list/SortableList';
 import { isRightClick, localizeAction, renderClamped } from './utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
@@ -107,6 +108,26 @@ export class CanvasNode extends RapidElement {
         user-select: none;
       }
 
+      .shift-held > temba-flow-node,
+      .shift-held > temba-flow-node * {
+        cursor: copy !important;
+      }
+
+      .shift-held > temba-flow-node .exit,
+      .shift-held > temba-flow-node .exit *,
+      .shift-held > temba-flow-node .linked-name,
+      .shift-held > temba-flow-node .linked-name *,
+      .shift-held > temba-flow-node .remove-button,
+      .shift-held > temba-flow-node .remove-button * {
+        cursor: pointer !important;
+      }
+
+      temba-flow-node.drag-copy .node {
+        outline: 3px dashed var(--color-primary, #3b82f6);
+        outline-offset: 2px;
+        opacity: 0.7;
+      }
+
       /* Flow start indicator */
       temba-flow-node.flow-start .node::before {
         content: 'FLOW START';
@@ -574,6 +595,8 @@ export class CanvasNode extends RapidElement {
       this.handleExternalActionDragLeave.bind(this);
     this.handleActionShowGhost = this.handleActionShowGhost.bind(this);
     this.handleActionHideGhost = this.handleActionHideGhost.bind(this);
+    this.handleActionShowOriginal = this.handleActionShowOriginal.bind(this);
+    this.handleActionHideOriginal = this.handleActionHideOriginal.bind(this);
   }
 
   connectedCallback() {
@@ -600,6 +623,14 @@ export class CanvasNode extends RapidElement {
       'action-hide-ghost',
       this.handleActionHideGhost as EventListener
     );
+    this.addEventListener(
+      'action-show-original',
+      this.handleActionShowOriginal as EventListener
+    );
+    this.addEventListener(
+      'action-hide-original',
+      this.handleActionHideOriginal as EventListener
+    );
 
     // Observe size changes to revalidate plumbing connections
     this.resizeObserver = new ResizeObserver(() => {
@@ -711,6 +742,14 @@ export class CanvasNode extends RapidElement {
       'action-hide-ghost',
       this.handleActionHideGhost as EventListener
     );
+    this.removeEventListener(
+      'action-show-original',
+      this.handleActionShowOriginal as EventListener
+    );
+    this.removeEventListener(
+      'action-hide-original',
+      this.handleActionHideOriginal as EventListener
+    );
 
     // Clear any pending exit removal timeouts
     this.exitRemovalTimeouts.forEach((timeoutId) => {
@@ -1531,11 +1570,32 @@ export class CanvasNode extends RapidElement {
     }
   }
 
+  private handleActionShowOriginal(_event: CustomEvent): void {
+    const sortableList = this.querySelector(
+      'temba-sortable-list'
+    ) as SortableList;
+    sortableList?.setOriginalVisible(true);
+    this.showLastActionPlaceholder = false;
+    this.requestUpdate();
+  }
+
+  private handleActionHideOriginal(_event: CustomEvent): void {
+    const sortableList = this.querySelector(
+      'temba-sortable-list'
+    ) as SortableList;
+    sortableList?.setOriginalVisible(false);
+    // Restore the placeholder if this is the last action
+    if (this.node.actions.length === 1) {
+      this.showLastActionPlaceholder = true;
+    }
+    this.requestUpdate();
+  }
+
   private handleExternalActionDrop(event: CustomEvent): void {
     // Only handle if this is an execute_actions node
     if (this.ui.type !== 'execute_actions') return;
 
-    const { action, sourceNodeUuid, actionIndex } = event.detail;
+    const { action, sourceNodeUuid, actionIndex, isCopy } = event.detail;
 
     // Don't accept drops from the same node
     if (sourceNodeUuid === this.node.uuid) return;
@@ -1561,30 +1621,52 @@ export class CanvasNode extends RapidElement {
 
     // 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 droppedAction = isCopy
+      ? { ...action, uuid: generateUUID() }
+      : action;
     const newActions = [...this.node.actions];
-    newActions.splice(dropIndex, 0, action);
+    newActions.splice(dropIndex, 0, droppedAction);
 
     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
-    );
+    // Copy localizations from the original action to the new one
+    if (isCopy) {
+      const localization = flowDefinition.localization;
+      if (localization) {
+        for (const langCode of Object.keys(localization)) {
+          const entry = localization[langCode]?.[action.uuid];
+          if (entry) {
+            store.getState().updateLocalization(
+              langCode,
+              droppedAction.uuid,
+              JSON.parse(JSON.stringify(entry))
+            );
+          }
+        }
+      }
+    }
 
-    // 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);
+    if (!isCopy) {
+      // 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 and notify that this node's size changed