@nyaruka/temba-components 0.121.7 → 0.123.0

package/src/select/Select.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { TemplateResult, html, css, CSSResult, CSSResultArray } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import {
   getUrl,
   getClasses,
@@ -410,6 +410,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @state()
+  attemptedOpen = false;
+
   @property({ attribute: false })
   selectedIndex = -1;
 
@@ -863,6 +866,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     this.visibleOptions = [];
+    this.attemptedOpen = false;
     this.input = '';
     this.next = null;
     this.complete = true;
@@ -955,7 +959,9 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public isOpen(): boolean {
-    return this.visibleOptions.length > 0;
+    return (
+      this.visibleOptions.length > 0 || (this.attemptedOpen && this.focused)
+    );
   }
 
   public setOptions(options: any[]): void {
@@ -1212,6 +1218,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   private handleBlur() {
     this.focused = false;
+    this.attemptedOpen = false;
     if (this.visibleOptions.length > 0) {
       this.input = '';
       this.next = null;
@@ -1285,8 +1292,10 @@ export class Select<T extends SelectOption> extends FormElement {
     ) {
       if (
         this.visibleOptions.length === 0 &&
-        this.completionOptions.length === 0
+        this.completionOptions.length === 0 &&
+        !this.input
       ) {
+        this.attemptedOpen = true;
         this.requestUpdate('input');
         return;
       }
@@ -1322,6 +1331,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   private handleCancel() {
     this.visibleOptions = [];
+    this.attemptedOpen = false;
   }
 
   private handleCursorChanged(event: CustomEvent) {
@@ -1340,10 +1350,15 @@ export class Select<T extends SelectOption> extends FormElement {
         return;
       }
 
-      if (this.visibleOptions.length > 0) {
+      // Check if dropdown is currently open (either with options or showing "No options")
+      if (this.isOpen()) {
         this.visibleOptions = [];
+        this.attemptedOpen = false;
       } else {
+        this.attemptedOpen = true;
         this.requestUpdate('input');
+        // Also trigger an immediate update to show empty dropdown
+        this.requestUpdate();
       }
     }
   }
@@ -1461,6 +1476,17 @@ export class Select<T extends SelectOption> extends FormElement {
     this.requestUpdate('values', oldValues);
   }
 
+  private shouldShowEmptyMessage(): boolean {
+    return (
+      this.attemptedOpen &&
+      this.focused &&
+      this.visibleOptions.length === 0 &&
+      !this.input &&
+      this.staticOptions.length === 0 &&
+      !this.endpoint
+    );
+  }
+
   public render(): TemplateResult {
     const placeholder = this.values.length === 0 ? this.placeholder : '';
     const placeholderDiv = html`
@@ -1620,7 +1646,8 @@ export class Select<T extends SelectOption> extends FormElement {
     .getName=${this.getNameInternal}
     ?static-width=${this.optionWidth}
     ?anchor-right=${this.anchorRight}
-    ?visible=${this.visibleOptions.length > 0}
+    ?visible=${this.visibleOptions.length > 0 || this.shouldShowEmptyMessage()}
+    ?showEmptyMessage=${this.shouldShowEmptyMessage()}
     ></temba-options>
 
     <temba-options

package/src/store/AppState.ts

@@ -157,11 +157,11 @@ export const zustand = createStore<AppState>()(
       setFlowContents: (flow: FlowContents) => {
         set((state: AppState) => {
           const flowLang = flow.definition.language;
-          const languageCode = state.languageCode || flowLang;
           state.flowDefinition = flow.definition;
           state.flowInfo = flow.info;
-          state.isTranslating = flowLang !== languageCode;
-          state.languageCode = languageCode || flowLang;
+          // Reset to the flow's default language when loading a new flow
+          state.languageCode = flowLang;
+          state.isTranslating = false;
         });
       },
 

package/src/utils/index.ts

@@ -494,7 +494,7 @@ export const getScrollParent = (node: any): any => {
   return null;
 };
 
-export const isElementVisible = (el: any, holder: any) => {
+export const isElementVisible = (el: any, holder?: any) => {
   holder = holder || document.body;
   const { top, bottom } = el.getBoundingClientRect();
   const holderRect = holder.getBoundingClientRect();
@@ -575,7 +575,7 @@ export const timeSince = (
   }
 };
 
-export const isDate = (value: string): boolean => {
+export const isDate = (value: any): boolean => {
   if (toString.call(value) === '[object Date]') {
     return true;
   }
@@ -635,6 +635,10 @@ export const truncate = (input: string, max: number): string => {
 };
 
 export const oxford = (items: any[], joiner = 'and'): any => {
+  if (items.length === 0) {
+    return '';
+  }
+
   if (items.length === 1) {
     return items[0];
   }
@@ -657,7 +661,9 @@ export const oxford = (items: any[], joiner = 'and'): any => {
     });
   }
 
-  return items.join(', ') + joiner + items[items.length - 1];
+  const allButLast = items.slice(0, -1);
+  const last = items[items.length - 1];
+  return allButLast.join(', ') + ', ' + joiner + ' ' + last;
 };
 
 export const oxfordFn = (
@@ -713,13 +719,19 @@ export enum COOKIE_KEYS {
   TICKET_SHOW_DETAILS = 'tickets.show-details'
 }
 
-export const capitalize = ([first, ...rest], locale = navigator.language) =>
+export const capitalize = (
+  [first, ...rest]: string[] | string,
+  locale = navigator.language
+) =>
   first === undefined ? '' : first.toLocaleUpperCase(locale) + rest.join('');
 
 export const formatFileType = (type: string): string => {
   return type.split('/')[1];
 };
-export const formatFileSize = (bytes: number, decimalPoint: number): string => {
+export const formatFileSize = (
+  bytes: number,
+  decimalPoint?: number
+): string => {
   if (bytes == 0) return '0 KB';
   const k = 1024,
     dm = decimalPoint || 2,

package/src/vectoricon/VectorIcon.ts

@@ -127,9 +127,10 @@ export class VectorIcon extends LitElement {
 
       .spin-forever {
         animation-name: spin;
-        animation-duration: 2000ms;
+        animation-duration: var(--test-animation-duration, 2000ms);
         animation-iteration-count: infinite;
         animation-timing-function: linear;
+        animation-play-state: var(--test-animation-play-state, running);
       }
 
       @keyframes spin {

package/temba-modules.ts

@@ -58,13 +58,13 @@ import { MediaPicker } from './src/mediapicker/MediaPicker';
 import { Editor } from './src/flow/Editor';
 import { EditorNode } from './src/flow/EditorNode';
 import { ContactNotepad } from './src/contacts/ContactNotepad';
-import { OutboxMonitor } from './src/outboxmonitor/OutboxMonitor';
 import { ProgressBar } from './src/progress/ProgressBar';
 import { StartProgress } from './src/progress/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
 import { PopupSelect } from './src/select/PopupSelect';
 import { UserSelect } from './src/select/UserSelect';
 import { WorkspaceSelect } from './src/select/WorkspaceSelect';
+import { TembaChart } from './src/chart/TembaChart';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -133,10 +133,10 @@ addCustomElement('temba-media-picker', MediaPicker);
 addCustomElement('temba-flow-editor', Editor);
 addCustomElement('temba-flow-node', EditorNode);
 addCustomElement('temba-contact-notepad', ContactNotepad);
-addCustomElement('temba-outbox-monitor', OutboxMonitor);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);
 addCustomElement('temba-shortcuts', ShortcutList);
 addCustomElement('temba-popup-select', PopupSelect);
 addCustomElement('temba-user-select', UserSelect);
 addCustomElement('temba-workspace-select', WorkspaceSelect);
+addCustomElement('temba-chart', TembaChart);

package/test/temba-appstate-language.test.ts

@@ -0,0 +1,218 @@
+import { assert } from '@open-wc/testing';
+import { zustand } from '../src/store/AppState';
+
+describe('AppState Language Reset', () => {
+  beforeEach(() => {
+    // Reset the store state before each test
+    const state = zustand.getState();
+    zustand.setState({
+      ...state,
+      languageCode: '',
+      isTranslating: false,
+      flowDefinition: null,
+      flowInfo: null
+    });
+  });
+
+  it('should reset language when loading a new flow', () => {
+    const state = zustand.getState();
+
+    // First, load an initial flow to establish state
+    const initialFlowContents = {
+      definition: {
+        language: 'en',
+        localization: {},
+        name: 'Initial Flow',
+        nodes: [],
+        uuid: 'initial-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          languages: []
+        }
+      },
+      info: {
+        results: [],
+        dependencies: [],
+        counts: { nodes: 0, languages: 1 },
+        locals: []
+      }
+    };
+
+    state.setFlowContents(initialFlowContents);
+
+    // Simulate having a previous flow with localization
+    state.setLanguageCode('es'); // User selected Spanish for localization
+    assert.equal(zustand.getState().languageCode, 'es');
+    assert.equal(zustand.getState().isTranslating, true); // Now translating from English to Spanish
+
+    // Simulate loading a new flow with English as default
+    const mockFlowContents = {
+      definition: {
+        language: 'en',
+        localization: {},
+        name: 'Test Flow',
+        nodes: [],
+        uuid: 'test-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          languages: []
+        }
+      },
+      info: {
+        results: [],
+        dependencies: [],
+        counts: { nodes: 0, languages: 1 },
+        locals: []
+      }
+    };
+
+    state.setFlowContents(mockFlowContents);
+
+    // The language should reset to the flow's default language
+    assert.equal(
+      zustand.getState().languageCode,
+      'en',
+      'Language should reset to flow default'
+    );
+    assert.equal(
+      zustand.getState().isTranslating,
+      false,
+      'Should not be in translation mode'
+    );
+  });
+
+  it('should set isTranslating correctly when languages differ', () => {
+    const state = zustand.getState();
+
+    // Load a flow with Spanish as default
+    const mockFlowContents = {
+      definition: {
+        language: 'es',
+        localization: {},
+        name: 'Test Flow',
+        nodes: [],
+        uuid: 'test-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          languages: []
+        }
+      },
+      info: {
+        results: [],
+        dependencies: [],
+        counts: { nodes: 0, languages: 1 },
+        locals: []
+      }
+    };
+
+    state.setFlowContents(mockFlowContents);
+
+    // Should be in Spanish and not translating
+    assert.equal(zustand.getState().languageCode, 'es');
+    assert.equal(zustand.getState().isTranslating, false);
+
+    // Now switch to English for localization
+    state.setLanguageCode('en');
+    assert.equal(zustand.getState().languageCode, 'en');
+    assert.equal(
+      zustand.getState().isTranslating,
+      true,
+      'Should be translating when language differs from flow default'
+    );
+  });
+
+  it('should preserve flow default language when no previous language is set', () => {
+    const state = zustand.getState();
+
+    // Load a flow with French as default, no previous language set
+    const mockFlowContents = {
+      definition: {
+        language: 'fr',
+        localization: {},
+        name: 'Test Flow',
+        nodes: [],
+        uuid: 'test-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          languages: []
+        }
+      },
+      info: {
+        results: [],
+        dependencies: [],
+        counts: { nodes: 0, languages: 1 },
+        locals: []
+      }
+    };
+
+    state.setFlowContents(mockFlowContents);
+
+    // Should use the flow's default language
+    assert.equal(
+      zustand.getState().languageCode,
+      'fr',
+      'Should use flow default language'
+    );
+    assert.equal(
+      zustand.getState().isTranslating,
+      false,
+      'Should not be translating'
+    );
+  });
+
+  it('should handle language switching after flow is loaded', () => {
+    const state = zustand.getState();
+
+    // Load a flow with English as default
+    const mockFlowContents = {
+      definition: {
+        language: 'en',
+        localization: {},
+        name: 'Test Flow',
+        nodes: [],
+        uuid: 'test-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          languages: []
+        }
+      },
+      info: {
+        results: [],
+        dependencies: [],
+        counts: { nodes: 0, languages: 1 },
+        locals: []
+      }
+    };
+
+    state.setFlowContents(mockFlowContents);
+
+    // Should start in English, not translating
+    assert.equal(zustand.getState().languageCode, 'en');
+    assert.equal(zustand.getState().isTranslating, false);
+
+    // Switch to Spanish for localization
+    state.setLanguageCode('es');
+    assert.equal(zustand.getState().languageCode, 'es');
+    assert.equal(zustand.getState().isTranslating, true);
+
+    // Switch back to English
+    state.setLanguageCode('en');
+    assert.equal(zustand.getState().languageCode, 'en');
+    assert.equal(zustand.getState().isTranslating, false);
+  });
+});

package/test/temba-chart.test.ts

@@ -0,0 +1,215 @@
+import { expect } from '@open-wc/testing';
+import {
+  RapidChartData,
+  TembaChart,
+  formatDurationFromSeconds
+} from '../src/chart/TembaChart';
+import { getComponent } from './utils.test';
+
+const sampleData: RapidChartData = {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  datasets: [
+    {
+      label: 'General',
+      data: [65, 59, 80, 81, 56, 55, 40]
+    },
+    {
+      label: 'Support',
+      data: [28, 48, 40, 19, 86, 27, 90]
+    },
+    {
+      label: 'VIPs',
+      data: [58, 28, 10, 1, 0, 19, 20]
+    }
+  ]
+};
+
+const TAG = 'temba-chart';
+const getChart = async (attrs: any = {}) => {
+  const picker = (await getComponent(TAG, attrs, '', 400)) as TembaChart;
+  return picker;
+};
+
+describe('temba-chart', () => {
+  it('calculates others', async () => {
+    const chart: TembaChart = await getChart();
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // if we haven't set any splits, everything should be summed as "All"
+    expect(chart.datasets[0].data).to.deep.equal([
+      151, 135, 130, 101, 142, 101, 150
+    ]);
+
+    // add a split
+    chart.splits = ['General'];
+    await chart.updateComplete;
+
+    // now we should get an "Others" dataset
+    expect(chart.datasets[1].data).to.deep.equal([86, 76, 50, 20, 86, 46, 110]);
+
+    // add another split
+    chart.splits = ['General', 'Support'];
+    await chart.updateComplete;
+
+    // now others should be everything but general and support
+    expect(chart.datasets[2].data).to.deep.equal([58, 28, 10, 1, 0, 19, 20]);
+  });
+
+  it('supports duration formatting', async () => {
+    const chart: TembaChart = await getChart();
+
+    // Test that formatDuration property exists and defaults to false
+    expect(chart.formatDuration).to.equal(false);
+
+    // Test that we can set formatDuration to true
+    chart.formatDuration = true;
+    expect(chart.formatDuration).to.equal(true);
+  });
+
+  it('formats duration values correctly', async () => {
+    const chart: TembaChart = await getChart();
+
+    // Access the formatDurationFromSeconds function through the chart's module
+    // We need to test the duration formatting logic
+    const durationData: RapidChartData = {
+      labels: ['Day 1', 'Day 2', 'Day 3'],
+      datasets: [
+        {
+          label: 'Process Time',
+          data: [68787, 958000, 3661] // seconds that should be formatted as durations
+        }
+      ]
+    };
+
+    chart.formatDuration = true;
+    chart.data = durationData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Test that the chart was created and has the duration formatting enabled
+    expect(chart.formatDuration).to.equal(true);
+    expect(chart.chart).to.exist;
+
+    // Test that the chart configuration includes the duration formatting
+    const chartConfig = chart.chart.options;
+    expect(chartConfig.scales.y.ticks).to.exist;
+    expect(chartConfig.scales.y.ticks.callback).to.be.a('function');
+
+    // Test the tick callback function formatting
+    const tickCallback = chartConfig.scales.y.ticks.callback;
+    expect(tickCallback.call({}, 68787, 0, [])).to.equal('19h 6m');
+    expect(tickCallback.call({}, 958000, 1, [])).to.equal('11d 2h');
+    expect(tickCallback.call({}, 3661, 2, [])).to.equal('1h 1m');
+    expect(tickCallback.call({}, 120, 3, [])).to.equal('2m');
+    expect(tickCallback.call({}, 0, 4, [])).to.equal('0s');
+
+    // Test tooltip formatting
+    expect(chartConfig.plugins.tooltip.callbacks.label).to.be.a('function');
+    const tooltipCallback = chartConfig.plugins.tooltip.callbacks.label;
+
+    const mockContext = {
+      dataset: { label: 'Process Time' },
+      parsed: { y: 68787 }
+    };
+    expect(tooltipCallback.call({}, mockContext)).to.equal(
+      'Process Time: 19h 6m'
+    );
+  });
+
+  it('formats various duration edge cases correctly', async () => {
+    const chart: TembaChart = await getChart();
+    chart.formatDuration = true;
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(chart.chart).to.exist;
+    const tickCallback = chart.chart.options.scales.y.ticks.callback;
+
+    // Test edge cases for duration formatting
+    expect(tickCallback.call({}, 0, 0, [])).to.equal('0s');
+    expect(tickCallback.call({}, 1, 1, [])).to.equal('1s');
+    expect(tickCallback.call({}, 59, 2, [])).to.equal('59s');
+    expect(tickCallback.call({}, 60, 3, [])).to.equal('1m');
+    expect(tickCallback.call({}, 61, 4, [])).to.equal('1m 1s');
+    expect(tickCallback.call({}, 3600, 5, [])).to.equal('1h');
+    expect(tickCallback.call({}, 3661, 6, [])).to.equal('1h 1m');
+    expect(tickCallback.call({}, 86400, 7, [])).to.equal('1d');
+    expect(tickCallback.call({}, 90061, 8, [])).to.equal('1d 1h'); // 1 day, 1 hour, 1 minute, 1 second - should show only first two units
+    expect(tickCallback.call({}, 604800, 9, [])).to.equal('7d'); // 1 week in seconds
+    expect(tickCallback.call({}, 1209600, 10, [])).to.equal('14d'); // 2 weeks in seconds
+  });
+
+  it('respects formatDuration property state', async () => {
+    const chart: TembaChart = await getChart();
+
+    // Test default state
+    expect(chart.formatDuration).to.equal(false);
+
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Test that formatDuration property can be toggled
+    chart.formatDuration = true;
+    expect(chart.formatDuration).to.equal(true);
+
+    chart.formatDuration = false;
+    expect(chart.formatDuration).to.equal(false);
+  });
+});
+
+describe('formatDurationFromSeconds', () => {
+  it('formats zero correctly', () => {
+    expect(formatDurationFromSeconds(0)).to.equal('0s');
+  });
+
+  it('formats seconds only', () => {
+    expect(formatDurationFromSeconds(1)).to.equal('1s');
+    expect(formatDurationFromSeconds(30)).to.equal('30s');
+    expect(formatDurationFromSeconds(59)).to.equal('59s');
+  });
+
+  it('formats minutes and seconds', () => {
+    expect(formatDurationFromSeconds(60)).to.equal('1m');
+    expect(formatDurationFromSeconds(61)).to.equal('1m 1s');
+    expect(formatDurationFromSeconds(90)).to.equal('1m 30s');
+    expect(formatDurationFromSeconds(120)).to.equal('2m');
+    expect(formatDurationFromSeconds(3599)).to.equal('59m 59s');
+  });
+
+  it('formats hours and minutes', () => {
+    expect(formatDurationFromSeconds(3600)).to.equal('1h');
+    expect(formatDurationFromSeconds(3661)).to.equal('1h 1m');
+    expect(formatDurationFromSeconds(7200)).to.equal('2h');
+    expect(formatDurationFromSeconds(68787)).to.equal('19h 6m');
+  });
+
+  it('formats days and hours', () => {
+    expect(formatDurationFromSeconds(86400)).to.equal('1d');
+    expect(formatDurationFromSeconds(90000)).to.equal('1d 1h');
+    expect(formatDurationFromSeconds(958000)).to.equal('11d 2h');
+  });
+
+  it('shows only two most significant units', () => {
+    // 1 day, 1 hour, 1 minute, 1 second - should show only "1d 1h"
+    expect(formatDurationFromSeconds(90061)).to.equal('1d 1h');
+
+    // 2 hours, 30 minutes, 45 seconds - should show only "2h 30m"
+    expect(formatDurationFromSeconds(9045)).to.equal('2h 30m');
+
+    // 5 minutes, 30 seconds - should show "5m 30s"
+    expect(formatDurationFromSeconds(330)).to.equal('5m 30s');
+  });
+
+  it('handles large durations', () => {
+    expect(formatDurationFromSeconds(604800)).to.equal('7d'); // 1 week
+    expect(formatDurationFromSeconds(1209600)).to.equal('14d'); // 2 weeks
+    expect(formatDurationFromSeconds(2678400)).to.equal('31d'); // ~1 month
+  });
+});