@nyaruka/temba-components 0.137.0 → 0.138.0

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 (!sourceEndpoint || !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/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;

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

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

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

@@ -0,0 +1,134 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { Editor } from '../src/flow/Editor';
+import { stub, restore, SinonStub } from 'sinon';
+
+customElements.define('temba-flow-editor-revisions', Editor);
+
+describe('Editor Revisions', () => {
+  let element: Editor;
+  let fetchStub: SinonStub;
+
+  beforeEach(async () => {
+    restore();
+    fetchStub = stub(window, 'fetch');
+    // Initialize without 'flow' attribute to prevent firstUpdated from calling getStore().getState()
+    element = await fixture(
+      html`<temba-flow-editor-revisions></temba-flow-editor-revisions>`
+    );
+    element.flow = 'test-flow';
+  });
+
+  afterEach(() => {
+    restore();
+  });
+
+  it('should exclude the most recent revision from the list', async () => {
+    const mockRevisions = [
+      {
+        id: 3,
+        created_on: '2023-01-03',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      },
+      {
+        id: 2,
+        created_on: '2023-01-02',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      },
+      {
+        id: 1,
+        created_on: '2023-01-01',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      }
+    ];
+
+    // Mock the fetch response for the revisions list
+    const mockResponse = new Response(
+      JSON.stringify({ results: mockRevisions }),
+      {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' }
+      }
+    );
+
+    fetchStub.resolves(mockResponse);
+
+    // Call fetchRevisions (private)
+    // Note: fetchRevisions calls fetchResults -> fetchResultsPage -> fetch
+    await (element as any).fetchRevisions();
+
+    const revisions = (element as any).revisions;
+    expect(revisions.length).to.equal(2);
+    expect(revisions[0].id).to.equal(2);
+    expect(revisions[1].id).to.equal(1);
+  });
+
+  it('should handle empty revisions list', async () => {
+    const mockResponse = new Response(JSON.stringify({ results: [] }), {
+      status: 200
+    });
+    fetchStub.resolves(mockResponse);
+
+    await (element as any).fetchRevisions();
+    const revisions = (element as any).revisions;
+    expect(revisions.length).to.equal(0);
+  });
+
+  it('should handle single revision in list', async () => {
+    const mockRevisions = [
+      {
+        id: 1,
+        created_on: '2023-01-01',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      }
+    ];
+    const mockResponse = new Response(
+      JSON.stringify({ results: mockRevisions }),
+      { status: 200 }
+    );
+    fetchStub.resolves(mockResponse);
+
+    await (element as any).fetchRevisions();
+    const revisions = (element as any).revisions;
+    expect(revisions.length).to.equal(0);
+  });
+
+  it('should have purple color for revisions tab and blue for selected item', async () => {
+    // Force revisions window to show
+    (element as any).revisionsWindowHidden = false;
+    (element as any).localizationWindowHidden = true;
+
+    // Mock revisions so we can see list items
+    const mockRevisions = [
+      {
+        id: 2,
+        created_on: '2023-01-02',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      },
+      {
+        id: 1,
+        created_on: '2023-01-01',
+        user: { id: 1, first_name: 'A', last_name: 'B', username: 'ab' }
+      }
+    ];
+    (element as any).revisions = mockRevisions;
+    (element as any).viewingRevision = mockRevisions[0]; // Select the first one
+
+    await element.requestUpdate();
+
+    // Check tab color
+    const tab = element.querySelector('#revisions-tab');
+    expect(tab).to.exist;
+    expect(tab.getAttribute('color')).to.equal('rgb(142, 94, 167)');
+
+    // Check selected item styles
+    const selectedItem = element.querySelector(
+      '.revision-item.selected'
+    ) as HTMLElement;
+    expect(selectedItem).to.exist;
+
+    // We need to check inline styles because they are set in the template
+    const style = selectedItem.getAttribute('style');
+    expect(style).to.contain('#f0f6ff'); // Blue background
+    expect(style).to.contain('#a4cafe'); // Blue border
+  });
+});

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

@@ -653,11 +653,14 @@ describe('Editor', () => {
 
       await editor.updateComplete;
 
-      // node-2 should be first (top: 100 < top: 200)
-      const flowNodes = editor.querySelectorAll('temba-flow-node');
-      expect(flowNodes[0].getAttribute('uuid')).to.equal('node-2');
-      expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
-      expect(flowNodes[1].classList.contains('flow-start')).to.be.false;
+      // node-2 is at top (top: 100 < top: 200) so it should be flow-start
+      const node1 = editor.querySelector('temba-flow-node[uuid="node-1"]');
+      const node2 = editor.querySelector('temba-flow-node[uuid="node-2"]');
+
+      expect(node2).to.exist;
+      expect(node1).to.exist;
+      expect(node2.classList.contains('flow-start')).to.be.true;
+      expect(node1.classList.contains('flow-start')).to.be.false;
 
       // move node-1 to the top
       zustand.getState().updateCanvasPositions({
@@ -720,7 +723,7 @@ describe('Editor', () => {
 
       await editor.updateComplete;
 
-      let flowNodes = editor.querySelectorAll('temba-flow-node');
+      const flowNodes = editor.querySelectorAll('temba-flow-node');
       expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
 
       // add a new node at the top
@@ -741,10 +744,13 @@ describe('Editor', () => {
       await editor.updateComplete;
 
       // new node should now be the flow-start
-      flowNodes = editor.querySelectorAll('temba-flow-node');
-      expect(flowNodes[0].getAttribute('uuid')).to.equal('node-2');
-      expect(flowNodes[0].classList.contains('flow-start')).to.be.true;
-      expect(flowNodes[1].classList.contains('flow-start')).to.be.false;
+      const node1 = editor.querySelector('temba-flow-node[uuid="node-1"]');
+      const node2 = editor.querySelector('temba-flow-node[uuid="node-2"]');
+
+      expect(node2).to.exist;
+      expect(node1).to.exist;
+      expect(node2.classList.contains('flow-start')).to.be.true;
+      expect(node1.classList.contains('flow-start')).to.be.false;
     });
 
     it('should handle flow-start when first node is removed', async () => {

package/test/temba-flow-plumber-connections.test.ts

@@ -29,7 +29,14 @@ describe('Plumber - Connection Management', () => {
       removeClass: stub(),
       batch: stub().callsFake((fn: any) => fn()),
       addEndpoint: stub().returns({}),
+      revalidate: stub(),
       connect: stub(),
+      getEndpoints: stub().returns([
+        { elementId: 'test-from', addClass: stub() }
+      ]),
+      select: stub().returns({
+        deleteAll: stub()
+      }),
       selectEndpoints: stub().returns({
         deleteAll: stub()
       }),
@@ -131,7 +138,6 @@ describe('Plumber - Connection Management', () => {
       expect(result).to.be.true;
       expect((plumber as any).jsPlumb.deleteConnection).to.have.been
         .calledTwice;
-      expect((plumber as any).jsPlumb.removeAllEndpoints).to.have.been.called;
     });
 
     it('returns false when no connections exist', () => {

package/test/temba-flow-plumber.test.ts

@@ -31,6 +31,12 @@ describe('Plumber', () => {
       batch: stub().callsFake((fn) => fn()),
       addEndpoint: stub().returns({}),
       connect: stub(),
+      getEndpoints: stub().returns([
+        { elementId: 'test-from', addClass: stub() }
+      ]),
+      select: stub().returns({
+        deleteAll: stub()
+      }),
       selectEndpoints: stub().returns({
         deleteAll: stub()
       }),