@nyaruka/temba-components 0.137.0 → 0.138.4

package/src/flow/NodeTypeSelector.ts

@@ -172,12 +172,13 @@ export class NodeTypeSelector extends RapidElement {
 
       .items-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 0.75em;
       }
 
       .node-item {
-        padding: 1em;
+        padding: 0.5em;
+        padding-left: 1em;
         border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: calc(var(--curvature) * 0.75);
         cursor: pointer;
@@ -211,7 +212,6 @@ export class NodeTypeSelector extends RapidElement {
         font-weight: 500;
         font-size: 1rem;
         color: var(--color-text-dark);
-        margin-bottom: 0.25em;
       }
 
       .node-item-type {
@@ -259,8 +259,14 @@ export class NodeTypeSelector extends RapidElement {
     this.open = true;
   }
 
-  public close() {
-    this.open = false;
+  public close(fireCanceledEvent: boolean = true) {
+    if (this.open) {
+      this.open = false;
+      // Fire canceled event so parent can clean up, but only if not from a selection
+      if (fireCanceledEvent) {
+        this.fireCustomEvent(CustomEventType.Canceled, {});
+      }
+    }
   }
 
   /**
@@ -297,7 +303,8 @@ export class NodeTypeSelector extends RapidElement {
       nodeType,
       position: this.clickPosition
     } as NodeTypeSelection);
-    this.close();
+    // Close without firing canceled event since we made a selection
+    this.close(false);
   }
 
   private handleOverlayClick() {
@@ -549,7 +556,6 @@ export class NodeTypeSelector extends RapidElement {
                                 <div class="node-item-title">
                                   ${item.config.name}
                                 </div>
-                                <div class="node-item-type">${item.type}</div>
                               </div>
                             `
                           )}
@@ -587,9 +593,6 @@ export class NodeTypeSelector extends RapidElement {
                                       <div class="node-item-title">
                                         ${item.config.name}
                                       </div>
-                                      <div class="node-item-type">
-                                        ${item.type}
-                                      </div>
                                     </div>
                                   `
                                 )}
@@ -622,7 +625,6 @@ export class NodeTypeSelector extends RapidElement {
                                 <div class="node-item-title">
                                   ${item.config.name}
                                 </div>
-                                <div class="node-item-type">${item.type}</div>
                               </div>
                             `
                           )}

package/src/flow/Plumber.ts

@@ -89,50 +89,54 @@ export class Plumber {
   private showContactsTimeout: number | null = null;
   private editor: any;
 
-  constructor(canvas: HTMLElement, editor: any) {
-    this.editor = editor;
-    ready(() => {
-      this.jsPlumb = newInstance({
-        container: canvas,
-        connectionsDetachable: true,
-        endpointStyle: {
-          fill: 'green'
-        },
-        connector: CONNECTOR_DEFAULTS,
-        connectionOverlays: OVERLAYS_DEFAULTS
-      });
+  initializeJSPlumb(canvas: HTMLElement) {
+    this.jsPlumb = newInstance({
+      container: canvas,
+      connectionsDetachable: true,
+      endpointStyle: {
+        fill: 'green'
+      },
+      connector: CONNECTOR_DEFAULTS,
+      connectionOverlays: OVERLAYS_DEFAULTS
+    });
 
-      // Bind to connection events
-      this.jsPlumb.bind(EVENT_CONNECTION, (info) => {
-        this.connectionDragging = false;
-        this.notifyListeners(EVENT_CONNECTION, info);
-      });
+    // Bind to connection events
+    this.jsPlumb.bind(EVENT_CONNECTION, (info) => {
+      this.connectionDragging = false;
+      this.notifyListeners(EVENT_CONNECTION, info);
+    });
 
-      // Bind to connection drag events
-      this.jsPlumb.bind(EVENT_CONNECTION_DRAG, (info) => {
-        this.connectionDragging = true;
-        this.notifyListeners(EVENT_CONNECTION_DRAG, info);
-      });
+    // Bind to connection drag events
+    this.jsPlumb.bind(EVENT_CONNECTION_DRAG, (info) => {
+      this.connectionDragging = true;
+      this.notifyListeners(EVENT_CONNECTION_DRAG, info);
+    });
 
-      this.jsPlumb.bind(EVENT_CONNECTION_ABORT, (info) => {
-        this.connectionDragging = false;
-        this.notifyListeners(EVENT_CONNECTION_ABORT, info);
-      });
+    this.jsPlumb.bind(EVENT_CONNECTION_ABORT, (info) => {
+      this.connectionDragging = false;
+      this.notifyListeners(EVENT_CONNECTION_ABORT, info);
+    });
 
-      this.jsPlumb.bind(EVENT_CONNECTION_DETACHED, (info) => {
-        this.connectionDragging = false;
-        this.notifyListeners(EVENT_CONNECTION_DETACHED, info);
-      });
+    this.jsPlumb.bind(EVENT_CONNECTION_DETACHED, (info) => {
+      this.connectionDragging = false;
+      this.notifyListeners(EVENT_CONNECTION_DETACHED, info);
+    });
 
-      this.jsPlumb.bind(EVENT_REVERT, (info) => {
-        this.notifyListeners(EVENT_REVERT, info);
-      });
+    this.jsPlumb.bind(EVENT_REVERT, (info) => {
+      this.notifyListeners(EVENT_REVERT, info);
+    });
 
-      this.jsPlumb.bind(INTERCEPT_BEFORE_DROP, () => {
-        // we always deny automatic connections
-        return false;
-      });
-      this.jsPlumb.bind(INTERCEPT_BEFORE_DETACH, () => {});
+    this.jsPlumb.bind(INTERCEPT_BEFORE_DROP, () => {
+      // we always deny automatic connections
+      return false;
+    });
+    this.jsPlumb.bind(INTERCEPT_BEFORE_DETACH, () => {});
+  }
+
+  constructor(canvas: HTMLElement, editor: any) {
+    this.editor = editor;
+    ready(() => {
+      this.initializeJSPlumb(canvas);
     });
   }
 
@@ -159,12 +163,14 @@ export class Plumber {
 
   public makeTarget(uuid: string) {
     const element = document.getElementById(uuid);
-    this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);
+    if (!element) return;
+    return this.jsPlumb.addEndpoint(element, TARGET_DEFAULTS);
   }
 
   public makeSource(uuid: string) {
     const element = document.getElementById(uuid);
-    this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);
+    if (!element) return;
+    return this.jsPlumb.addEndpoint(element, SOURCE_DEFAULTS);
   }
 
   // we'll process our pending connections, but we want to debounce this
@@ -180,27 +186,40 @@ export class Plumber {
       this.jsPlumb.batch(() => {
         this.pendingConnections.forEach((connection) => {
           const { scope, fromId, toId } = connection;
-          const fromElement = document.getElementById(fromId);
-          const toElement = document.getElementById(toId);
-
-          // delete any existing endpoints
-          this.jsPlumb.selectEndpoints({ source: fromId }).deleteAll();
-
-          const source = this.jsPlumb.addEndpoint(fromElement, {
-            ...SOURCE_DEFAULTS,
-            endpoint: {
-              ...SOURCE_DEFAULTS.endpoint,
-              options: {
-                ...SOURCE_DEFAULTS.endpoint.options,
-                cssClass: 'plumb-source connected'
-              }
-            }
-          });
 
-          const target = this.jsPlumb.addEndpoint(toElement, TARGET_DEFAULTS);
+          // sources and targets must exist
+          const source = document.getElementById(fromId);
+          // const target = document.getElementById(toId);
+
+          this.revalidate([fromId, toId]);
+
+          // we need to find the source endpoint
+          const sourceEndpoint = this.jsPlumb
+            .getEndpoints(source)
+            ?.find((endpoint) =>
+              endpoint.elementId === fromId ? true : false
+            );
+
+          // update endpoint have connect css class
+          if (sourceEndpoint) {
+            sourceEndpoint.addClass('connected');
+          }
+
+          // each connection needs its own target endpoint
+          const targetEndpoint = this.makeTarget(toId);
+
+          if (!source || !targetEndpoint) {
+            console.warn(
+              `Plumber: Cannot connect ${fromId} to ${toId}. Element(s) missing.`
+            );
+            return;
+          }
+
+          // delete connections
+          this.jsPlumb.select({ source, targetEndpoint }).deleteAll();
           this.jsPlumb.connect({
-            source,
-            target,
+            source: source,
+            target: targetEndpoint,
             connector: {
               ...CONNECTOR_DEFAULTS,
               options: { ...CONNECTOR_DEFAULTS.options, gap: [0, 5] }
@@ -212,7 +231,15 @@ export class Plumber {
         });
         this.pendingConnections = [];
       });
-    }, 50);
+
+      // Force a repaint to ensure connections are positioned correctly
+      // especially after bulk updates or view switching
+      window.requestAnimationFrame(() => {
+        if (this.jsPlumb) {
+          this.jsPlumb.repaintEverything();
+        }
+      });
+    }, 0);
   }
 
   public connectIds(scope: string, fromId: string, toId: string) {
@@ -597,20 +624,44 @@ export class Plumber {
     });
   }
 
-  public removeNodeConnections(nodeId: string) {
+  public reset() {
+    if (this.connectionWait) {
+      clearTimeout(this.connectionWait);
+      this.connectionWait = null;
+    }
+    this.pendingConnections = [];
+    this.jsPlumb.select().deleteAll();
+    this.jsPlumb._managedElements = {};
+  }
+
+  public forgetNode(nodeId: string) {
+    if (!this.jsPlumb) return;
+    const element = document.getElementById(nodeId);
+    if (!element) return;
+
+    this.jsPlumb.deleteConnectionsForElement(element);
+    this.jsPlumb.removeAllEndpoints(element);
+    this.jsPlumb.unmanage(element);
+  }
+
+  public removeNodeConnections(nodeId: string, exitIds?: string[]) {
     if (!this.jsPlumb) return;
 
     const inbound = this.jsPlumb.select({ target: nodeId });
-    const exitIds =
+
+    // Use provided exitIds or try to find them in DOM (fallback)
+    const exits =
+      exitIds ||
       Array.from(
         document.getElementById(nodeId)?.querySelectorAll('.exit') || []
       ).map((exit) => {
         return exit.id;
-      }) || [];
+      }) ||
+      [];
 
     inbound.deleteAll();
-    this.jsPlumb.select({ source: exitIds }).deleteAll();
-    this.jsPlumb.selectEndpoints({ source: exitIds }).deleteAll();
+    this.jsPlumb.select({ source: exits }).deleteAll();
+    this.jsPlumb.selectEndpoints({ source: exits }).deleteAll();
   }
 
   public removeExitConnection(exitId: string) {
@@ -627,13 +678,16 @@ export class Plumber {
       this.jsPlumb.deleteConnection(connection);
     });
 
-    // Re-create the source endpoint (now without connection)
-    this.jsPlumb.removeAllEndpoints(exitElement);
-    this.makeSource(exitId);
-
     return connections.length > 0;
   }
 
+  public removeAllEndpoints(nodeId: string) {
+    if (!this.jsPlumb) return;
+    const element = document.getElementById(nodeId);
+    if (!element) return;
+    this.jsPlumb.removeAllEndpoints(element, true);
+  }
+
   /**
    * Set the removing state for an exit's connection
    * @param exitId The ID of the exit whose connections should be marked as removing

package/src/flow/actions/set_contact_field.ts

@@ -29,7 +29,11 @@ export const set_contact_field: ActionConfig = {
       endpoint: '/api/v2/fields.json',
       helpText: 'Select the contact field to update',
       allowCreate: true,
-      createArbitraryOption: (input: string) => ({ key: input, name: input })
+      createArbitraryOption: (input: string) => ({
+        key: input,
+        name: input,
+        type: 'text'
+      })
     },
     value: {
       type: 'text',

package/src/list/RunList.ts

@@ -179,7 +179,8 @@ export class RunList extends TembaList {
   public getRefreshEndpoint() {
     if (this.items.length > 0) {
       const modifiedOn = this.items[0].modified_on;
-      return this.endpoint + '&after=' + modifiedOn;
+      const separator = this.endpoint.includes('?') ? '&' : '?';
+      return this.endpoint + separator + 'after=' + modifiedOn;
     }
     return this.endpoint;
   }

package/src/list/TicketList.ts

@@ -11,8 +11,9 @@ export class TicketList extends TembaList {
   public getRefreshEndpoint() {
     if (this.items.length > 0) {
       const lastActivity = this.items[0].ticket.last_activity_on;
+      const separator = this.endpoint.includes('?') ? '&' : '?';
       return (
-        this.endpoint + '?after=' + new Date(lastActivity).getTime() * 1000
+        this.endpoint + separator + 'after=' + new Date(lastActivity).getTime() * 1000
       );
     }
     return this.endpoint;

package/src/locales/es.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-  s73b4d70c02f4b4e0: `No options`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
+'s73b4d70c02f4b4e0': `No options`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/locales/fr.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/locales/locale-codes.ts

@@ -10,9 +10,18 @@ export const sourceLocale = `en`;
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export const targetLocales = [`es`, `fr`, `pt`] as const;
+export const targetLocales = [
+  `es`,
+  `fr`,
+  `pt`,
+] as const;
 
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export const allLocales = [`en`, `es`, `fr`, `pt`] as const;
+export const allLocales = [
+  `en`,
+  `es`,
+  `fr`,
+  `pt`,
+] as const;

package/src/locales/pt.ts

@@ -1,13 +1,18 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
-
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-export const templates = {
-  s73b4d70c02f4b4e0: `No options`,
-  scf1453991c986b25: `Tab to complete, enter to select`,
-  s8f02e3a18ffc083a: `Are not currently in a flow`,
-  s638236250662c6b3: `Have sent a message in the last`,
-  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
-};
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's73b4d70c02f4b4e0': `No options`,
+'scf1453991c986b25': `Tab to complete, enter to select`,
+'s8f02e3a18ffc083a': `Are not currently in a flow`,
+'s638236250662c6b3': `Have sent a message in the last`,
+'s4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+    };
+  

package/src/simulator/Simulator.ts

@@ -183,7 +183,6 @@ export class Simulator extends RapidElement {
         backdrop-filter: blur(10px);
         border-radius: 16px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-        pointer-events: all;
       }
       .option-btn {
         background: rgba(255, 255, 255, 0.1);
@@ -359,6 +358,10 @@ export class Simulator extends RapidElement {
         pointer-events: auto;
       }
 
+      .context-explorer.hidden {
+        pointer-events: none !important;
+      }
+
       .context-item {
         display: flex;
         align-items: flex-start;
@@ -1319,8 +1322,6 @@ export class Simulator extends RapidElement {
     const phoneWindow = this.shadowRoot.getElementById(
       'phone-window'
     ) as FloatingWindow;
-    // phoneWindow.hide();
-
     phoneWindow.handleClose();
     this.isVisible = false;
     getStore().getState().setSimulatorActive(false);
@@ -1753,7 +1754,9 @@ export class Simulator extends RapidElement {
       >
         <div class="phone-simulator" style="${styleVars}">
           <div
-            class="context-explorer ${this.contextExplorerOpen ? 'open' : ''}"
+            class="context-explorer ${this.contextExplorerOpen
+              ? 'open'
+              : ''} ${this.isVisible ? 'visible' : 'hidden'}"
           >
             <div class="context-explorer-scroll">
               ${this.context
@@ -1884,7 +1887,10 @@ export class Simulator extends RapidElement {
               </div>
             </div>
           </div>
-          <div class="option-pane">
+          <div
+            class="option-pane"
+            style="pointer-events:${this.isVisible ? 'all' : 'none'}"
+          >
             <button class="option-btn" @click=${this.handleClose} title="Close">
               <temba-icon name="x" size="1.5"></temba-icon>
             </button>

package/src/store/AppState.ts

@@ -105,6 +105,7 @@ export interface AppState {
   languageNames: { [code: string]: Language };
   workspace: Workspace;
   isTranslating: boolean;
+  viewingRevision: boolean;
 
   dirtyDate: Date | null;
 
@@ -174,6 +175,7 @@ export const zustand = createStore<AppState>()(
       flowDefinition: null,
       flowInfo: null,
       isTranslating: false,
+      viewingRevision: false,
       dirtyDate: null,
       activity: null,
       simulatorActivity: null,
@@ -187,6 +189,7 @@ export const zustand = createStore<AppState>()(
       },
 
       fetchRevision: async (endpoint: string, id: string = null) => {
+        const viewingRevision = !!id && id !== 'latest';
         if (!id) {
           id = 'latest';
         }
@@ -198,7 +201,11 @@ export const zustand = createStore<AppState>()(
           throw new Error('Network response was not ok');
         }
         const data = (await response.json()) as FlowContents;
-        set({ flowInfo: data.info, flowDefinition: data.definition });
+        set({
+          flowInfo: data.info,
+          flowDefinition: data.definition,
+          viewingRevision
+        });
       },
 
       fetchWorkspace: async (endpoint) => {
@@ -282,7 +289,11 @@ export const zustand = createStore<AppState>()(
       setFlowContents: (flow: FlowContents) => {
         set((state: AppState) => {
           const flowLang = flow.definition.language;
-          state.flowDefinition = flow.definition;
+          // Clone to ensure mutable for sorting
+          state.flowDefinition = {
+            ...flow.definition,
+            nodes: [...(flow.definition.nodes || [])]
+          };
           state.flowInfo = flow.info;
           // Reset to the flow's default language when loading a new flow
           state.languageCode = flowLang;
@@ -473,6 +484,11 @@ export const zustand = createStore<AppState>()(
         exitUuid: string,
         destinationNodeUuid: string
       ) => {
+        /* console.log('Upating connection:', {
+          nodeUuid,
+          exitUuid,
+          destinationNodeUuid
+        });*/
         set((state: AppState) => {
           // Find the exit with this UUID
           const node = state.flowDefinition.nodes.find(

package/test/temba-contact-fields.test.ts

@@ -1,14 +1,19 @@
 import { assert, expect } from '@open-wc/testing';
 import { ContactFields } from '../src/live/ContactFields';
-import { delay, getComponent, loadStore, mockPOST } from './utils.test';
+import {
+  getComponent,
+  loadStore,
+  mockPOST,
+  waitForCondition
+} from './utils.test';
 
 const TAG = 'temba-contact-fields';
 const getFields = async (attrs: any = {}) => {
   attrs['endpoint'] = '/test-assets/contacts/';
   const fields = (await getComponent(TAG, attrs, '', 600)) as ContactFields;
 
-  // wait for our contact to load
-  await delay(100);
+  // wait for our contact data to load
+  await waitForCondition(() => fields.data !== undefined);
 
   return fields;
 };

package/test/temba-flow-editor-node.test.ts

@@ -835,7 +835,9 @@ describe('EditorNode', () => {
         makeTarget: stub(),
         makeSource: stub(),
         connectIds: stub(),
-        removeExitConnection: stub()
+        removeExitConnection: stub(),
+        forgetNode: stub(),
+        removeNodeConnections: stub()
       };
       editorNode['plumber'] = mockPlumber;
     });