@nyaruka/temba-components 0.139.0 → 0.141.0

package/src/store/AppState.ts

@@ -18,6 +18,59 @@ import { produce } from 'immer';
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
 
+/**
+ * Temporary: Reclassify nodes based on whether they contain terminal actions.
+ * - execute_actions nodes with a terminal action become "terminal"
+ * - terminal nodes that no longer have a terminal action become "execute_actions"
+ * This can be removed once we stop supporting terminal nodes.
+ */
+function reclassifyTerminalNodes(definition: FlowDefinition): void {
+  if (!definition?.nodes || !definition?._ui?.nodes) return;
+
+  for (const node of definition.nodes) {
+    const nodeUI = definition._ui.nodes[node.uuid];
+    if (!nodeUI) continue;
+
+    const hasTerminalAction = node.actions?.some(
+      (action) => (action as any).terminal === true
+    );
+
+    if (nodeUI.type === 'execute_actions' && hasTerminalAction) {
+      nodeUI.type = 'terminal' as any;
+    } else if (nodeUI.type === ('terminal' as any) && !hasTerminalAction) {
+      nodeUI.type = 'execute_actions';
+    }
+  }
+}
+
+/**
+ * Reclassify wait_for_response nodes that are actually voice-specific wait types.
+ * The server stores all voice waits as wait_for_response, but we detect the specific
+ * type from the router's wait hint:
+ * - hint.type === 'digits' && hint.count === 1 → wait_for_menu
+ * - hint.type === 'digits' (no count) → wait_for_digits
+ * - hint.type === 'audio' → wait_for_audio
+ */
+function reclassifyVoiceWaitNodes(definition: FlowDefinition): void {
+  if (!definition?.nodes || !definition?._ui?.nodes) return;
+
+  for (const node of definition.nodes) {
+    const nodeUI = definition._ui.nodes[node.uuid];
+    if (!nodeUI || nodeUI.type !== 'wait_for_response') continue;
+
+    const hint = node.router?.wait?.hint;
+    if (!hint) continue;
+
+    if (hint.type === 'digits' && hint.count === 1) {
+      nodeUI.type = 'wait_for_menu' as any;
+    } else if (hint.type === 'digits') {
+      nodeUI.type = 'wait_for_digits' as any;
+    } else if (hint.type === 'audio') {
+      nodeUI.type = 'wait_for_audio' as any;
+    }
+  }
+}
+
 /**
  * Sorts nodes by their position - first by y (top), then by x (left)
  */
@@ -65,11 +118,44 @@ export interface Language {
   name: string;
 }
 
+export interface FlowIssue {
+  type: string;
+  node_uuid: string;
+  action_uuid?: string;
+  description: string;
+  dependency?: {
+    key: string;
+    name: string;
+    type: string;
+  };
+}
+
 export interface FlowInfo {
   results: InfoResult[];
   dependencies: TypedObjectRef[];
   counts: { nodes: number; languages: number };
   locals: string[];
+  issues?: FlowIssue[];
+}
+
+function buildIssueMaps(issues: FlowIssue[] = []): {
+  byNode: Map<string, FlowIssue[]>;
+  byAction: Map<string, FlowIssue[]>;
+} {
+  const byNode = new Map<string, FlowIssue[]>();
+  const byAction = new Map<string, FlowIssue[]>();
+  for (const issue of issues) {
+    if (issue.action_uuid) {
+      const actionList = byAction.get(issue.action_uuid) || [];
+      actionList.push(issue);
+      byAction.set(issue.action_uuid, actionList);
+    } else {
+      const nodeList = byNode.get(issue.node_uuid) || [];
+      nodeList.push(issue);
+      byNode.set(issue.node_uuid, nodeList);
+    }
+  }
+  return { byNode, byAction };
 }
 
 export interface FlowContents {
@@ -100,6 +186,8 @@ export interface Activity {
 export interface AppState {
   flowDefinition: FlowDefinition;
   flowInfo: FlowInfo;
+  issuesByNode: Map<string, FlowIssue[]>;
+  issuesByAction: Map<string, FlowIssue[]>;
 
   languageCode: string;
   languageNames: { [code: string]: Language };
@@ -157,6 +245,7 @@ export interface AppState {
     actionUuid: string,
     localizationData: Record<string, any>
   ): void;
+  clearFlowData: () => void;
   setTranslationFilters: (filters: { categories: boolean }) => void;
   markAutoTranslated: (
     languageCode: string,
@@ -174,6 +263,8 @@ export const zustand = createStore<AppState>()(
       workspace: null,
       flowDefinition: null,
       flowInfo: null,
+      issuesByNode: new Map(),
+      issuesByAction: new Map(),
       isTranslating: false,
       viewingRevision: false,
       dirtyDate: null,
@@ -201,10 +292,15 @@ export const zustand = createStore<AppState>()(
           throw new Error('Network response was not ok');
         }
         const data = (await response.json()) as FlowContents;
+        reclassifyTerminalNodes(data.definition);
+        reclassifyVoiceWaitNodes(data.definition);
+        const issueMaps = buildIssueMaps(data.info?.issues);
         set({
           flowInfo: data.info,
           flowDefinition: data.definition,
-          viewingRevision
+          viewingRevision,
+          issuesByNode: issueMaps.byNode,
+          issuesByAction: issueMaps.byAction
         });
       },
 
@@ -285,6 +381,20 @@ export const zustand = createStore<AppState>()(
         return { name: languageNames[languageCode], code: languageCode };
       },
 
+      clearFlowData: () => {
+        set({
+          flowDefinition: null,
+          flowInfo: null,
+          issuesByNode: new Map(),
+          issuesByAction: new Map(),
+          activity: null,
+          simulatorActivity: null,
+          simulatorActive: false,
+          dirtyDate: null,
+          viewingRevision: false
+        });
+      },
+
       // todo: eventually we should be doing the fetching
       setFlowContents: (flow: FlowContents) => {
         set((state: AppState) => {
@@ -295,10 +405,16 @@ export const zustand = createStore<AppState>()(
             nodes: [...(flow.definition.nodes || [])]
           };
           state.flowInfo = flow.info;
+          const issueMaps = buildIssueMaps(flow.info?.issues);
+          state.issuesByNode = issueMaps.byNode;
+          state.issuesByAction = issueMaps.byAction;
           // Reset to the flow's default language when loading a new flow
           state.languageCode = flowLang;
           state.isTranslating = false;
 
+          reclassifyTerminalNodes(state.flowDefinition);
+          reclassifyVoiceWaitNodes(state.flowDefinition);
+
           // Sort nodes by position when loading flow
           if (state.flowDefinition?.nodes && state.flowDefinition?._ui?.nodes) {
             sortNodesByPosition(
@@ -312,6 +428,9 @@ export const zustand = createStore<AppState>()(
       setFlowInfo: (info: FlowInfo) => {
         set((state: AppState) => {
           state.flowInfo = info;
+          const issueMaps = buildIssueMaps(info?.issues);
+          state.issuesByNode = issueMaps.byNode;
+          state.issuesByAction = issueMaps.byAction;
         });
       },
 

package/src/store/flow-definition.d.ts

@@ -28,6 +28,7 @@ export type ActionType =
   | 'send_email'
   | 'send_broadcast'
   | 'enter_flow'
+  | 'terminal'
   | 'start_session'
   | 'transfer_airtime'
   | 'split_by_airtime'
@@ -152,6 +153,7 @@ export interface SendBroadcast extends Action {
 
 export interface EnterFlow extends Action {
   flow: NamedObject;
+  terminal?: boolean;
 }
 
 export interface StartSession extends Action {

package/test/actions/add_contact_groups.test.ts

@@ -86,4 +86,42 @@ describe('add_contact_groups action config', () => {
       'descriptive-group-names'
     );
   });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from groups', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'VIP Customers',
+            query: 'status = vip',
+            status: 'ready',
+            count: 150,
+            system: false
+          },
+          {
+            uuid: 'group-2',
+            name: 'Beta Testers',
+            query: null,
+            status: 'ready',
+            count: 45,
+            system: false
+          }
+        ]
+      };
+
+      const action = add_contact_groups.fromFormData(formData) as AddToGroup;
+
+      expect(action.groups).to.have.lengthOf(2);
+      expect(action.groups[0]).to.deep.equal({
+        uuid: 'group-1',
+        name: 'VIP Customers'
+      });
+      expect(action.groups[1]).to.deep.equal({
+        uuid: 'group-2',
+        name: 'Beta Testers'
+      });
+    });
+  });
 });

package/test/actions/add_input_labels.test.ts

@@ -0,0 +1,67 @@
+import { expect } from '@open-wc/testing';
+import { add_input_labels } from '../../src/flow/actions/add_input_labels';
+import { AddInputLabels } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the add_input_labels action configuration.
+ */
+describe('add_input_labels action config', () => {
+  const helper = new ActionTest(add_input_labels, 'add_input_labels');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(add_input_labels.name).to.equal('Add Input Labels');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'add_input_labels',
+        labels: [{ uuid: 'label-1', name: 'Important' }]
+      } as AddInputLabels,
+      'single-label'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'add_input_labels',
+        labels: [
+          { uuid: 'label-1', name: 'Important' },
+          { uuid: 'label-2', name: 'Follow Up' },
+          { uuid: 'label-3', name: 'Spam' }
+        ]
+      } as AddInputLabels,
+      'multiple-labels'
+    );
+  });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from labels', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        labels: [
+          { uuid: 'label-1', name: 'Important', count: 250 },
+          { uuid: 'label-2', name: 'Follow Up', count: 42 }
+        ]
+      };
+
+      const action = add_input_labels.fromFormData(formData) as AddInputLabels;
+
+      expect(action.labels).to.have.lengthOf(2);
+      expect(action.labels[0]).to.deep.equal({
+        uuid: 'label-1',
+        name: 'Important'
+      });
+      expect(action.labels[1]).to.deep.equal({
+        uuid: 'label-2',
+        name: 'Follow Up'
+      });
+    });
+  });
+});

package/test/actions/enter_flow.test.ts

@@ -0,0 +1,88 @@
+import { expect } from '@open-wc/testing';
+import { enter_flow } from '../../src/flow/actions/enter_flow';
+import { EnterFlow } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the enter_flow action configuration.
+ */
+describe('enter_flow action config', () => {
+  const helper = new ActionTest(enter_flow, 'enter_flow');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(enter_flow.name).to.equal('Enter a Flow');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'enter_flow',
+        terminal: true,
+        flow: { uuid: 'flow-1', name: 'Registration Flow' }
+      } as EnterFlow,
+      'basic-flow'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'enter_flow',
+        terminal: true,
+        flow: {
+          uuid: 'flow-2',
+          name: 'Very Long Flow Name That Tests Layout Wrapping'
+        }
+      } as EnterFlow,
+      'long-flow-name'
+    );
+  });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from flow', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        flow: [
+          {
+            uuid: 'flow-1',
+            name: 'Registration Flow',
+            type: 'message',
+            archived: false,
+            labels: [],
+            expires: 720,
+            runs: { active: 0, waiting: 5, completed: 100 },
+            results: [],
+            parent_refs: [],
+            created_on: '2024-01-01T00:00:00.000Z',
+            modified_on: '2024-06-15T12:00:00.000Z'
+          }
+        ]
+      };
+
+      const action = enter_flow.fromFormData(formData) as EnterFlow;
+
+      expect(action.flow).to.deep.equal({
+        uuid: 'flow-1',
+        name: 'Registration Flow'
+      });
+    });
+
+    it('should handle flow selected via value key', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        flow: [{ value: 'flow-1', name: 'Test Flow' }]
+      };
+
+      const action = enter_flow.fromFormData(formData) as EnterFlow;
+
+      expect(action.flow).to.deep.equal({
+        uuid: 'flow-1',
+        name: 'Test Flow'
+      });
+    });
+  });
+});

package/test/actions/play_audio.test.ts

@@ -0,0 +1,155 @@
+import { expect } from '@open-wc/testing';
+import { play_audio } from '../../src/flow/actions/play_audio';
+import { PlayAudio } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the play_audio action configuration.
+ */
+describe('play_audio action config', () => {
+  const helper = new ActionTest(play_audio, 'play_audio');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(play_audio.name).to.equal('Play Recording');
+    });
+
+    it('is voice-only', () => {
+      expect(play_audio.flowTypes).to.deep.equal(['voice']);
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-play-1',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      } as PlayAudio,
+      'expression-url'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-play-2',
+        type: 'play_audio',
+        audio_url: 'https://example.com/greeting.mp3'
+      } as PlayAudio,
+      'static-url'
+    );
+  });
+
+  describe('data transformation', () => {
+    it('converts action to form data', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = play_audio.toFormData!(action);
+      expect(formData.uuid).to.equal('test-action');
+      expect(formData.audio_url).to.equal('@results.voicemail');
+    });
+
+    it('handles missing audio_url', () => {
+      const action = {
+        uuid: 'test-action',
+        type: 'play_audio'
+      } as PlayAudio;
+
+      const formData = play_audio.toFormData!(action);
+      expect(formData.audio_url).to.equal('');
+    });
+
+    it('converts form data to action', () => {
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '@results.voicemail'
+      };
+
+      const action = play_audio.fromFormData!(formData) as PlayAudio;
+      expect(action.uuid).to.equal('test-action');
+      expect(action.type).to.equal('play_audio');
+      expect(action.audio_url).to.equal('@results.voicemail');
+    });
+
+    it('trims whitespace from audio_url', () => {
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '  @results.voicemail  '
+      };
+
+      const action = play_audio.fromFormData!(formData) as PlayAudio;
+      expect(action.audio_url).to.equal('@results.voicemail');
+    });
+  });
+
+  describe('localization', () => {
+    it('converts localization to form data', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const localization = {
+        audio_url: ['@results.voicemail_es']
+      };
+
+      const formData = play_audio.toLocalizationFormData!(action, localization);
+      expect(formData.audio_url).to.equal('@results.voicemail_es');
+    });
+
+    it('handles missing localization', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = play_audio.toLocalizationFormData!(action, {});
+      expect(formData.audio_url).to.equal('');
+    });
+
+    it('converts form data to localization', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '@results.voicemail_es'
+      };
+
+      const localization = play_audio.fromLocalizationFormData!(
+        formData,
+        action
+      );
+      expect(localization.audio_url).to.deep.equal(['@results.voicemail_es']);
+    });
+
+    it('omits unchanged localization', () => {
+      const action: PlayAudio = {
+        uuid: 'test-action',
+        type: 'play_audio',
+        audio_url: '@results.voicemail'
+      };
+
+      const formData = {
+        uuid: 'test-action',
+        audio_url: '@results.voicemail' // same as original
+      };
+
+      const localization = play_audio.fromLocalizationFormData!(
+        formData,
+        action
+      );
+      expect(localization.audio_url).to.be.undefined;
+    });
+  });
+});

package/test/actions/remove_contact_groups.test.ts

@@ -262,4 +262,33 @@ describe('remove_contact_groups action config', () => {
       expect(Object.keys(result.errors)).to.have.length(0);
     });
   });
+
+  describe('metadata stripping', () => {
+    it('should strip superfluous API metadata from groups', () => {
+      const formData = {
+        uuid: 'test-uuid',
+        all_groups: false,
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'VIP Customers',
+            query: 'status = vip',
+            status: 'ready',
+            count: 150,
+            system: false
+          }
+        ]
+      };
+
+      const action = remove_contact_groups.fromFormData(
+        formData
+      ) as RemoveFromGroup;
+
+      expect(action.groups).to.have.lengthOf(1);
+      expect(action.groups[0]).to.deep.equal({
+        uuid: 'group-1',
+        name: 'VIP Customers'
+      });
+    });
+  });
 });