@nyaruka/temba-components 0.136.1 → 0.138.0

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()
       }),

package/test/temba-simulator.test.ts

@@ -48,7 +48,7 @@ const openSimulator = async (simulator: Simulator) => {
   tab.dispatchEvent(new CustomEvent('temba-button-clicked', { bubbles: true }));
 
   await simulator.updateComplete;
-  // brief delay for async API mock processing
+  // brief delay for async API response processing
   await delay(50);
 };
 
@@ -148,16 +148,33 @@ const getSimulatorClip = (
 
   const frameBounds = phoneFrame.getBoundingClientRect();
 
-  // add padding around the phone frame
+  // clip to just the phone frame area
   const padding = 10;
+
   return {
     x: frameBounds.x - padding,
     y: frameBounds.y - padding,
-    width: frameBounds.width + padding * 2,
+    // only add padding to the left to avoid capturing option pane on right
+    width: frameBounds.width + padding,
     height: frameBounds.height + padding * 2
   };
 };
 
+// helper to get message count from chat component
+const getMessageCount = (simulator: Simulator): number => {
+  const chat = simulator.shadowRoot.querySelector('temba-chat') as any;
+  if (!chat) {
+    return 0;
+  }
+  // check how many messages are in the chat component
+  // the chat component stores messages in its internal state
+  return (
+    chat.messageGroups?.reduce((total: number, group: any) => {
+      return total + (group.messages?.length || 0);
+    }, 0) || 0
+  );
+};
+
 // mock responses for simulation endpoints
 const mockSimulatorStart = () => {
   const response = {
@@ -340,8 +357,6 @@ describe('temba-simulator', () => {
     mockSimulatorStart();
 
     const simulator: Simulator = await createSimulator();
-    // ensure consistent size for screenshot
-    simulator.size = 'medium';
     await simulator.updateComplete;
     await openSimulator(simulator);
 
@@ -354,9 +369,9 @@ describe('temba-simulator', () => {
     const phoneScreen = simulator.shadowRoot.querySelector('.phone-screen');
     expect(phoneScreen).to.exist;
 
-    // verify initial message is displayed
-    const messages = simulator.shadowRoot.querySelectorAll('.message');
-    expect(messages.length).to.be.greaterThan(0);
+    // verify initial message is displayed via chat component
+    const messageCount = getMessageCount(simulator);
+    expect(messageCount).to.be.greaterThan(0);
 
     await assertScreenshot(
       'simulator/open-initial',
@@ -368,13 +383,11 @@ describe('temba-simulator', () => {
     mockSimulatorStart();
 
     const simulator: Simulator = await createSimulator();
-    simulator.size = 'medium';
     await simulator.updateComplete;
     await openSimulator(simulator);
 
     // count initial messages
-    let messages = simulator.shadowRoot.querySelectorAll('.message');
-    const initialCount = messages.length;
+    const initialCount = getMessageCount(simulator);
 
     // mock the resume response
     mockSimulatorResume('Thanks for your message!');
@@ -396,13 +409,23 @@ describe('temba-simulator', () => {
     });
     input.dispatchEvent(enterEvent);
 
+    // wait for the message to be sent and response to come back
+    await waitForCondition(
+      () => getMessageCount(simulator) > initialCount,
+      40,
+      50
+    );
+
     await simulator.updateComplete;
-    // brief delay for async API mock processing
-    await delay(100);
+    // wait for chat component to update
+    const chat = simulator.shadowRoot.querySelector('temba-chat') as any;
+    if (chat) {
+      await chat.updateComplete;
+    }
 
     // verify we have more messages than before
-    messages = simulator.shadowRoot.querySelectorAll('.message');
-    expect(messages.length).to.be.greaterThan(initialCount);
+    const newCount = getMessageCount(simulator);
+    expect(newCount).to.be.greaterThan(initialCount);
 
     // ensure DOM is settled
     await simulator.updateComplete;
@@ -417,7 +440,6 @@ describe('temba-simulator', () => {
     mockSimulatorStart();
 
     const simulator: Simulator = await createSimulator();
-    simulator.size = 'medium';
     await simulator.updateComplete;
     await openSimulator(simulator);
 
@@ -442,9 +464,10 @@ describe('temba-simulator', () => {
     await waitForCondition(
       () =>
         simulator.shadowRoot.querySelectorAll('.quick-reply-btn').length > 0,
-      2000
+      5000
     );
     await simulator.updateComplete;
+    await delay(100); // extra delay for rendering
 
     // take screenshot with quick replies
     await assertScreenshot(
@@ -457,7 +480,6 @@ describe('temba-simulator', () => {
     mockSimulatorStart();
 
     const simulator: Simulator = await createSimulator();
-    simulator.size = 'medium';
     await simulator.updateComplete;
     await openSimulator(simulator);
 
@@ -486,12 +508,14 @@ describe('temba-simulator', () => {
     mockSimulatorStart();
 
     const simulator: Simulator = await createSimulator();
-    simulator.size = 'medium';
     await simulator.updateComplete;
     // reset attachment indices for deterministic testing
     simulator.resetAttachmentIndices();
     await openSimulator(simulator);
 
+    // count initial messages
+    const initialCount = getMessageCount(simulator);
+
     // mock the response for image attachment
     mockSimulatorResume('Nice picture!');
 
@@ -509,14 +533,23 @@ describe('temba-simulator', () => {
     expect(imageMenuItem).to.exist;
     imageMenuItem.click();
 
-    await delay(100);
+    // wait for the attachment to be sent and response to come back
+    await waitForCondition(
+      () => getMessageCount(simulator) > initialCount,
+      40,
+      50
+    );
+
     await simulator.updateComplete;
+    // wait for chat component to update
+    const chat = simulator.shadowRoot.querySelector('temba-chat') as any;
+    if (chat) {
+      await chat.updateComplete;
+    }
 
-    // verify attachment wrapper is displayed (image attachments show in attachments not messages)
-    const attachmentWrappers = simulator.shadowRoot.querySelectorAll(
-      '.attachment-wrapper'
-    );
-    expect(attachmentWrappers.length).to.be.greaterThan(0);
+    // verify message with attachment was added via chat component
+    const newCount = getMessageCount(simulator);
+    expect(newCount).to.be.greaterThan(initialCount);
 
     await assertScreenshot(
       'simulator/image-attachment',
@@ -674,7 +707,6 @@ describe('temba-simulator', () => {
     mockSimulatorStart();
 
     const simulator: Simulator = await createSimulator();
-    simulator.size = 'medium';
     await simulator.updateComplete;
     await openSimulator(simulator);
 
@@ -696,8 +728,7 @@ describe('temba-simulator', () => {
     await simulator.updateComplete;
 
     // verify we have multiple messages
-    let messages = simulator.shadowRoot.querySelectorAll('.message');
-    const messageCountBefore = messages.length;
+    const messageCountBefore = getMessageCount(simulator);
     expect(messageCountBefore).to.be.greaterThan(1);
 
     // mock the start response for reset
@@ -717,8 +748,8 @@ describe('temba-simulator', () => {
     await simulator.updateComplete;
 
     // verify messages are reset - should go back to just initial message
-    messages = simulator.shadowRoot.querySelectorAll('.message');
-    expect(messages.length).to.be.lessThan(messageCountBefore);
+    const messageCountAfter = getMessageCount(simulator);
+    expect(messageCountAfter).to.be.lessThan(messageCountBefore);
 
     await assertScreenshot(
       'simulator/after-reset',
@@ -799,13 +830,12 @@ describe('temba-simulator', () => {
     mockPOST(/\/flow\/simulate\/.*\//, responseWithEvents);
 
     const simulator: Simulator = await createSimulator();
-    simulator.size = 'medium';
     await simulator.updateComplete;
     await openSimulator(simulator);
 
-    // verify event info is displayed
-    const eventInfo = simulator.shadowRoot.querySelectorAll('.event-info');
-    expect(eventInfo.length).to.be.greaterThan(0);
+    // verify events are displayed via chat component (field change + message = 2 events)
+    const messageCount = getMessageCount(simulator);
+    expect(messageCount).to.be.greaterThan(0);
 
     await assertScreenshot('simulator/event-info', getSimulatorClip(simulator));
   });