@nyaruka/temba-components 0.170.0 → 0.171.0

package/src/form/RangePicker.ts

@@ -4,107 +4,157 @@ import { DateTime } from 'luxon';
 import { html, css, PropertyValues } from 'lit';
 import { DatePicker } from './DatePicker';
 import { CustomEventType } from '../interfaces';
+import { Icon } from '../Icons';
+import { designTokens } from '../styles/designTokens';
 
 export class RangePicker extends RapidElement {
   static styles = css`
+    ${designTokens}
+
+    :host {
+      display: inline-block;
+      font-family: var(--font);
+    }
+
     .range-container {
       display: flex;
-      gap: 0.5em;
+      gap: 8px;
       align-items: center;
+      font-size: 13.5px;
+      color: var(--text-1);
     }
+
     .date-display {
       cursor: pointer;
-      padding: 0.2em 0.5em;
-      margin: 0.6em 0;
-      border-radius: var(--curvature-widget);
-      border: 1px solid transparent;
-      transition: border 0.2s;
+      padding: 3px 6px;
+      border-radius: var(--r-sm);
+      transition:
+        background 120ms,
+        color 120ms;
     }
 
     .date-display:hover {
-      border: 1px solid var(--color-widget-border);
       background: var(--sunken);
     }
 
-    input[type='date'] {
-      font-size: 1em;
-      padding: 0.2em 0.5em;
-      border-radius: var(--curvature-widget);
-      border: 1px solid var(--color-widget-border);
+    .range-separator {
+      color: var(--text-3);
     }
 
     .navigation-container {
       display: flex;
       align-items: center;
-      gap: 0.25em;
+      gap: 4px;
     }
 
+    /* Chevron-only step buttons, same chrome as the list pager: bare
+       glyph at rest, sunken wash on hover. No border of their own, so
+       they don't compete with the period track between them. */
     .nav-arrow {
-      background: var(--sunken);
-      border: 1px solid var(--color-widget-border);
-
-      border-radius: var(--curvature-widget);
-      padding: 0em 0em;
-      cursor: pointer;
-      font-size: 0.6em;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 23px;
-      height: 23px;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      border-radius: var(--r-sm);
+      color: var(--text-3);
+      cursor: pointer;
       transition:
-        background 0.2s,
-        border 0.2s,
-        opacity 0.2s;
+        background 120ms,
+        color 120ms,
+        opacity 120ms;
+    }
+
+    .nav-arrow temba-icon {
+      --icon-color: currentColor;
     }
 
     .nav-arrow:hover:not(:disabled) {
-      background: var(--accent-50);
-      border-color: var(--accent);
+      background: var(--sunken);
+      color: var(--text-1);
     }
 
     .nav-arrow:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background: var(--sunken);
+      opacity: 0.35;
+      cursor: default;
     }
 
     .nav-arrow.hidden {
       visibility: hidden;
     }
 
+    /* Segmented control — one bordered sunken track holds every
+       period and the selected one lifts out as a surface pill. The
+       buttons carry no borders themselves, so there are no
+       overlapping 1px edges to clip the selection's outline (the old
+       -1px margin stacking left the selected button's left border
+       painted over by its neighbor). */
     .button-group {
-      display: flex;
-      margin-left: 0em;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 2px;
+      background: var(--sunken);
+      border: 1px solid var(--border);
+      border-radius: var(--r-sm);
     }
+
     .range-btn {
-      background: var(--sunken);
-      border: 1px solid var(--color-widget-border);
-      border-radius: 0px;
-      margin-left: -1px;
-      padding: 0.2em 0.8em;
+      height: 22px;
+      padding: 0 10px;
+      border: 0;
+      background: transparent;
+      border-radius: var(--r-xs);
+      font-family: inherit;
+      font-size: 12.5px;
+      font-weight: var(--w-medium);
+      line-height: 1;
+      color: var(--text-2);
       cursor: pointer;
-      font-size: 0.95em;
       transition:
-        background 0.2s,
-        border 0.2s;
+        background 120ms,
+        color 120ms,
+        box-shadow 120ms;
     }
 
-    .button-group .range-btn:first-child {
-      border-radius: var(--curvature-widget) 0 0 var(--curvature-widget);
+    /* The hover wash sits on the sunken track, so --sunken itself
+       would be invisible here. Derived from --text-1 rather than a raw
+       rgba literal so it follows the palette (the tokens file mixes
+       against transparent the same way for --focus-halo). */
+    .range-btn:hover:not(.selected) {
+      background: color-mix(in srgb, var(--text-1) 6%, transparent);
+      color: var(--text-1);
     }
 
-    .button-group .range-btn:last-child {
-      border-radius: 0 var(--curvature-widget) var(--curvature-widget) 0;
+    .range-btn.selected {
+      background: var(--surface);
+      color: var(--accent-700);
+      box-shadow: var(--shadow-1);
+      cursor: default;
     }
 
-    .range-btn.selected,
-    .range-btn:active {
-      background: var(--accent-50);
-      border-color: var(--accent);
+    .range-btn:focus-visible,
+    .nav-arrow:focus-visible {
+      outline: none;
+      box-shadow: var(--focus-halo);
     }
   `;
 
+  // the periods in the segmented control, in display order
+  private static RANGES: {
+    type: 'W' | 'M' | 'Y' | 'ALL';
+    label: string;
+    title: string;
+  }[] = [
+    { type: 'W', label: 'W', title: 'Last week' },
+    { type: 'M', label: 'M', title: 'Last month' },
+    { type: 'Y', label: 'Y', title: 'Last year' },
+    { type: 'ALL', label: 'All', title: 'All time' }
+  ];
+
   @property({ type: String, attribute: 'start' })
   startDate = '';
 
@@ -465,6 +515,15 @@ export class RangePicker extends RapidElement {
     } ${amount} ${unit}`;
   }
 
+  private getNavigationTitle(direction: 'previous' | 'next'): string {
+    const prefix = direction === 'previous' ? 'Previous' : 'Next';
+    if (this.selectedRange === 'W') return `${prefix} week`;
+    if (this.selectedRange === 'M') return `${prefix} month`;
+    if (this.selectedRange === 'Y') return `${prefix} year`;
+    if (this.selectedRange === '') return this.getNavigationLabel(direction);
+    return `${prefix} period`;
+  }
+
   willUpdate(changed: PropertyValues) {
     super.willUpdate(changed);
 
@@ -543,7 +602,7 @@ export class RangePicker extends RapidElement {
               >${this.formatDateForDisplay(this.startDate) ||
               'Start date'}</span
             >`}
-        <span> - </span>
+        <span class="range-separator">–</span>
         ${this.editingEnd
           ? html`<temba-datepicker
               .value=${this.endDate}
@@ -566,61 +625,34 @@ export class RangePicker extends RapidElement {
             class="nav-arrow ${this.selectedRange === 'ALL' ? 'hidden' : ''}"
             ?disabled=${!this.canNavigatePrevious()}
             @click=${this.navigatePrevious}
-            title="Previous ${this.selectedRange === 'W'
-              ? 'week'
-              : this.selectedRange === 'M'
-                ? 'month'
-                : this.selectedRange === 'Y'
-                  ? 'year'
-                  : this.selectedRange === ''
-                    ? this.getNavigationLabel('previous')
-                    : 'period'}"
+            title=${this.getNavigationTitle('previous')}
+            aria-label=${this.getNavigationTitle('previous')}
           >
-            ◀
+            <temba-icon name=${Icon.arrow_left}></temba-icon>
           </button>
-          <div class="button-group">
-            <button
-              class="range-btn ${this.selectedRange === 'W' ? 'selected' : ''}"
-              @click=${() => this.setRange('W')}
-            >
-              W
-            </button>
-            <button
-              class="range-btn ${this.selectedRange === 'M' ? 'selected' : ''}"
-              @click=${() => this.setRange('M')}
-            >
-              M
-            </button>
-            <button
-              class="range-btn ${this.selectedRange === 'Y' ? 'selected' : ''}"
-              @click=${() => this.setRange('Y')}
-            >
-              Y
-            </button>
-            <button
-              class="range-btn ${this.selectedRange === 'ALL'
-                ? 'selected'
-                : ''}"
-              @click=${() => this.setRange('ALL')}
-            >
-              All
-            </button>
+          <div class="button-group" role="group" aria-label="Period">
+            ${RangePicker.RANGES.map(
+              (range) =>
+                html`<button
+                  class="range-btn ${this.selectedRange === range.type
+                    ? 'selected'
+                    : ''}"
+                  title=${range.title}
+                  aria-pressed=${this.selectedRange === range.type}
+                  @click=${() => this.setRange(range.type)}
+                >
+                  ${range.label}
+                </button>`
+            )}
           </div>
           <button
             class="nav-arrow ${this.selectedRange === 'ALL' ? 'hidden' : ''}"
             ?disabled=${!this.canNavigateNext()}
             @click=${this.navigateNext}
-            title="Next ${this.selectedRange === 'W'
-              ? 'week'
-              : this.selectedRange === 'M'
-                ? 'month'
-                : this.selectedRange === 'Y'
-                  ? 'year'
-                  : this.selectedRange === ''
-                    ? this.getNavigationLabel('next')
-                    : 'period'}"
+            title=${this.getNavigationTitle('next')}
+            aria-label=${this.getNavigationTitle('next')}
           >
-            ▶
+            <temba-icon name=${Icon.arrow_right}></temba-icon>
           </button>
         </div>
       </div>

package/src/list/ContentList.ts

@@ -1615,6 +1615,12 @@ export class ContentList<T = any> extends RapidElement {
     super();
   }
 
+  /** Gives specialized lists a chance to normalize a fetched page before it
+   * becomes visible. The default keeps the server response unchanged. */
+  protected prepareItems(items: T[]): T[] {
+    return items;
+  }
+
   protected willUpdate(changes: PropertyValues): void {
     super.willUpdate(changes);
     if (
@@ -2021,7 +2027,7 @@ export class ContentList<T = any> extends RapidElement {
       // empty results) with an `error` message — surface it over the
       // empty table rather than the plain empty-state copy.
       this.searchError = typeof data.error === 'string' ? data.error : '';
-      this.items = data.results || [];
+      this.items = this.prepareItems(data.results || []);
       this.nextCursor = data.next ? this.toRequestUrl(data.next) : '';
       this.prevCursor = data.previous ? this.toRequestUrl(data.previous) : '';
       // Cursor mode is detected from the shape of next/previous,

package/src/list/FlowList.ts

@@ -2,6 +2,8 @@ import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
 import { CustomEventType, Flow, ObjectReference } from '../interfaces';
+import { getStore, StoreAsset, StoreAssetChangedEvent } from '../store/Store';
+import { RealtimeSubscription } from '../live/Realtime';
 
 /**
  * Flow CRUDL list — drop-in replacement for the rapidpro
@@ -11,6 +13,8 @@ import { CustomEventType, Flow, ObjectReference } from '../interfaces';
  * bar, activity sparkline.
  */
 export class FlowList extends ContentList<Flow> {
+  private assetWatch: RealtimeSubscription = null;
+
   static get styles() {
     return css`
       ${ContentList.styles}
@@ -149,6 +153,84 @@ export class FlowList extends ContentList<Flow> {
     ];
   }
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    // rows we already have (if any) - each load re-syncs from prepareItems
+    this.syncAssetWatch();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.assetWatch) {
+      this.assetWatch.unsubscribe();
+      this.assetWatch = null;
+    }
+  }
+
+  private syncAssetWatch(): void {
+    if (!this.isConnected) {
+      return;
+    }
+    const store = getStore();
+    if (!store) {
+      return;
+    }
+    if (this.assetWatch) {
+      this.assetWatch.unsubscribe();
+    }
+    this.assetWatch = store.watchAssets(
+      (this.items || []).map((flow) => ({ type: 'flow', uuid: flow.uuid })),
+      (event: StoreAssetChangedEvent | null) => this.syncFlowNames(event?.asset)
+    );
+  }
+
+  private syncFlowNames(changed?: StoreAsset): void {
+    const items = this.withCanonicalFlowNames(this.items, changed);
+    if (items !== this.items) {
+      this.items = items;
+    }
+  }
+
+  /**
+   * A freshly fetched page is authoritative, so it seeds the store cache
+   * rather than being overwritten by it - a cached name can predate this
+   * response (e.g. a rename missed while another page was on screen), and
+   * writing it back would make the stale name self-reinforcing. Cached names
+   * only ever move rows through syncFlowNames, driven by socket changes and
+   * the reconnect refresh, which are the paths that are actually newer.
+   */
+  protected prepareItems(items: Flow[]): Flow[] {
+    getStore()?.cacheAssets(
+      items
+        .filter((item) => !!item.uuid && typeof item.name === 'string')
+        .map((item) => ({
+          type: 'flow',
+          uuid: item.uuid,
+          name: item.name
+        }))
+    );
+    Promise.resolve().then(() => this.syncAssetWatch());
+    return items;
+  }
+
+  private withCanonicalFlowNames(items: Flow[], changed?: StoreAsset): Flow[] {
+    const store = getStore();
+    let updated = false;
+    const canonical = items.map((item) => {
+      const asset = changed
+        ? changed.uuid === item.uuid
+          ? changed
+          : null
+        : store?.getAsset('flow', item.uuid);
+      if (asset && asset.name !== item.name) {
+        updated = true;
+        return { ...item, name: asset.name };
+      }
+      return item;
+    });
+    return updated ? canonical : items;
+  }
+
   protected getRowIcon(item: Flow): string | null {
     switch (item?.type) {
       case 'voice':

package/src/live/Realtime.ts

@@ -115,6 +115,28 @@ export const subscribeToNotifications = (
   );
 };
 
+/**
+ * Workspace-wide state changes shared by every component on the page.
+ */
+export const subscribeToOrganization = (
+  onEvent: (event: any) => void,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  return subscribeWhenReady((ctx) => `org:${ctx.org}`, onEvent, onSubscribed);
+};
+
+/**
+ * Realtime events for a flow open in the editor. Needs no page context
+ * because the flow UUID uniquely identifies the authorized channel.
+ */
+export const subscribeToFlow = (
+  flow: string,
+  onEvent: (event: any) => void,
+  onSubscribed?: () => void
+): RealtimeSubscription => {
+  return subscribeToSocket(`flow:${flow}`, onEvent, onSubscribed);
+};
+
 /**
  * A contact's history events, or a ticket's detail events when a ticket is
  * given. Needs no page context so subscribes immediately.

package/src/store/AppState.ts

@@ -15,10 +15,60 @@ import { immer } from 'zustand/middleware/immer';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { property } from 'lit/decorators.js';
 import { produce } from 'immer';
+import {
+  FlowDependency,
+  replaceDependencies,
+  resolveDependencyNames
+} from '../flow/dependencies';
 
 export const FLOW_SPEC_VERSION = '14.3';
 const CANVAS_PADDING = 800;
 
+// how long a revision load will wait on canonical names before rendering the
+// names embedded in the definition, which the editor heals asynchronously
+const DEPENDENCY_RESOLVE_TIMEOUT = 3000;
+
+export type DependencyResolver = (
+  dependencies: FlowDependency[]
+) => Promise<FlowDependency[]>;
+
+let dependencyResolver: DependencyResolver | null = null;
+
+/** Installs the page-level canonical-name resolver and returns the previous
+ * resolver so a disconnected store can restore it in tests. */
+export const setDependencyResolver = (
+  resolver: DependencyResolver | null
+): DependencyResolver | null => {
+  const previous = dependencyResolver;
+  dependencyResolver = resolver;
+  return previous;
+};
+
+/** The currently installed resolver, so a store can tell whether it is still
+ * the owner before restoring the one it replaced. */
+export const getDependencyResolver = (): DependencyResolver | null =>
+  dependencyResolver;
+
+/** Resolves with null if the given promise hasn't settled in time. */
+const withTimeout = async <T>(
+  promise: Promise<T>,
+  timeout: number
+): Promise<T | null> => {
+  let timer: any = null;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise<null>((resolve) => {
+        timer = setTimeout(() => resolve(null), timeout);
+      })
+    ]);
+  } finally {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+  }
+};
+
 /**
  * Temporary: Reclassify nodes based on whether they contain terminal actions.
  * - execute_actions nodes with a terminal action become "terminal"
@@ -105,15 +155,6 @@ export interface InfoResult {
   node_uuids: string[];
 }
 
-export interface ObjectRef {
-  uuid: string;
-  name: string;
-}
-
-export interface TypedObjectRef extends ObjectRef {
-  type: string;
-}
-
 export interface Language {
   code: string;
   name: string;
@@ -133,7 +174,7 @@ export interface FlowIssue {
 
 export interface FlowInfo {
   results: InfoResult[];
-  dependencies: TypedObjectRef[];
+  dependencies: FlowDependency[];
   counts: { nodes: number; languages: number };
   locals: string[];
   issues?: FlowIssue[];
@@ -220,6 +261,7 @@ export interface AppState {
 
   setFlowContents: (flow: FlowContents) => void;
   setFlowInfo: (info: FlowInfo) => void;
+  updateDependencyNames: (dependencies: FlowDependency[]) => void;
   setRevision: (revision: number) => void;
   setLanguageCode: (languageCode: string) => void;
   setDirtyDate: (date: Date) => void;
@@ -305,6 +347,31 @@ export const zustand = createStore<AppState>()(
           throw new Error('Network response was not ok');
         }
         const data = (await response.json()) as FlowContents;
+        if (dependencyResolver && data.info?.dependencies?.length) {
+          try {
+            // resolving before the first paint avoids a visible flash of stale
+            // names, but a slow endpoint must never hold the editor hostage -
+            // past the timeout we render and let the editor's watcher heal it
+            const canonical = await withTimeout(
+              dependencyResolver(data.info.dependencies),
+              DEPENDENCY_RESOLVE_TIMEOUT
+            );
+            const dependencies = canonical
+              ? replaceDependencies(data.info.dependencies, canonical)
+              : null;
+            if (dependencies) {
+              data.info = { ...data.info, dependencies };
+              data.definition = resolveDependencyNames(
+                data.definition,
+                canonical
+              );
+            }
+          } catch (error) {
+            // A name lookup shouldn't make an otherwise valid flow unusable.
+            // Keep its embedded names and let a later socket/reconnect heal it.
+            console.error('failed to resolve flow dependency names', error);
+          }
+        }
         reclassifyTerminalNodes(data.definition);
         reclassifyVoiceWaitNodes(data.definition);
         const issueMaps = buildIssueMaps(data.info?.issues);
@@ -438,6 +505,26 @@ export const zustand = createStore<AppState>()(
         });
       },
 
+      updateDependencyNames: (changed: FlowDependency[]) => {
+        set((state: AppState) => {
+          if (!state.flowInfo || !state.flowDefinition) {
+            return;
+          }
+          const dependencies = replaceDependencies(
+            state.flowInfo.dependencies,
+            changed
+          );
+          if (!dependencies) {
+            return;
+          }
+          state.flowInfo.dependencies = dependencies;
+          state.flowDefinition = resolveDependencyNames(
+            state.flowDefinition,
+            changed
+          );
+        });
+      },
+
       setRevision: (revision: number) => {
         set((state: AppState) => {
           state.flowDefinition.revision = revision;