@nyaruka/temba-components 0.160.0 → 0.161.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.160.0",
+  "version": "0.161.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/flow/nodes/split_by_webhook.ts

@@ -200,7 +200,10 @@ export const split_by_webhook: NodeConfig = {
         callWebhookAction?.headers ||
         getDefaultHeadersRecord(callWebhookAction?.method || 'GET'),
       body: callWebhookAction?.body || '',
-      result_name: node.router?.result_name || ''
+      // Legacy webhooks store result_name on the action; modern ones store it
+      // on the router. Prefer the action so legacy nodes round-trip correctly.
+      result_name:
+        callWebhookAction?.result_name || node.router?.result_name || ''
     };
   },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
@@ -213,9 +216,17 @@ export const split_by_webhook: NodeConfig = {
     // Find existing call_webhook action to preserve its UUID
     const existingCallWebhookAction = originalNode.actions?.find(
       (action) => action.type === 'call_webhook'
-    );
+    ) as CallWebhook | undefined;
     const callWebhookUuid = existingCallWebhookAction?.uuid || generateUUID();
 
+    // Legacy webhooks keep the result_name on the action rather than the
+    // router. Detect them by the presence of result_name on the existing
+    // action so they continue to round-trip in their original format instead
+    // of being silently migrated (which would change how results are
+    // referenced downstream of the flow).
+    const isLegacyResultName = !!existingCallWebhookAction?.result_name;
+    const trimmedResultName = formData.result_name?.trim() || '';
+
     // Create call_webhook action
     const callWebhookAction: CallWebhook = {
       type: 'call_webhook',
@@ -226,6 +237,11 @@ export const split_by_webhook: NodeConfig = {
       body: formData.body || ''
     };
 
+    // Preserve the legacy placement: result_name stays on the action.
+    if (isLegacyResultName && trimmedResultName !== '') {
+      callWebhookAction.result_name = trimmedResultName;
+    }
+
     // Create categories and exits for Success and Failure
     const existingCategories = originalNode.router?.categories || [];
     const existingExits = originalNode.exits || [];
@@ -247,9 +263,11 @@ export const split_by_webhook: NodeConfig = {
       ...router
     };
 
-    // Only set result_name if provided
-    if (formData.result_name && formData.result_name.trim() !== '') {
-      finalRouter.result_name = formData.result_name.trim();
+    // Modern webhooks store result_name on the router. For legacy webhooks the
+    // result_name lives on the action (set above), so we leave it off the
+    // router to avoid storing it in both places.
+    if (!isLegacyResultName && trimmedResultName !== '') {
+      finalRouter.result_name = trimmedResultName;
     }
 
     // Return the complete node

package/src/list/FlowList.ts

@@ -1,7 +1,7 @@
 import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
-import { Flow, ObjectReference } from '../interfaces';
+import { CustomEventType, Flow, ObjectReference } from '../interfaces';
 
 /**
  * Flow CRUDL list — drop-in replacement for the rapidpro
@@ -89,27 +89,28 @@ export class FlowList extends ContentList<Flow> {
         key: 'name',
         label: 'Name',
         sortable: true,
-        width: '280px',
+        minWidth: '160px',
+        maxWidth: '280px',
         pinned: true
       },
       {
         key: 'runs',
         label: 'Runs',
         sortable: true,
-        width: '90px',
+        minWidth: '64px',
         align: 'right'
       },
       {
         key: 'ongoing',
         label: 'Ongoing',
         sortable: true,
-        width: '90px',
+        minWidth: '64px',
         align: 'right'
       },
       {
         key: 'completion',
         label: 'Completion',
-        width: '130px',
+        minWidth: '110px',
         align: 'right'
       },
       { key: 'activity', label: 'Activity', width: '120px', align: 'right' }
@@ -146,6 +147,25 @@ export class FlowList extends ContentList<Flow> {
     return item?.uuid ? `/flow/editor/${item.uuid}/` : null;
   }
 
+  /** Clicking a label chip opens that label's filtered flow list rather
+   * than falling through to the row click (which opens the flow editor). */
+  private handleLabelClick(label: ObjectReference, event: MouseEvent): void {
+    // Stop the click from bubbling to the row's navigation handler.
+    event.stopPropagation();
+    if (!label?.uuid) return;
+    const href = `/flow/filter/${label.uuid}/`;
+    // Guard the JSON-driven href against open-redirect, same as the
+    // row-click path in ContentList.handleRowClick.
+    if (!this.isSafeHref(href)) return;
+    // Meta/ctrl-click opens a new tab, matching ordinary links and the
+    // row-click behavior.
+    if (event.metaKey || event.ctrlKey) {
+      window.open(href, '_blank');
+      return;
+    }
+    this.fireCustomEvent(CustomEventType.Redirected, { url: href });
+  }
+
   protected renderCell(
     item: Flow,
     column: ContentListColumn
@@ -166,7 +186,11 @@ export class FlowList extends ContentList<Flow> {
             ? html`<span class="flow-labels">
                 ${labels.map(
                   (l: ObjectReference) =>
-                    html`<temba-label type="label" icon=${Icon.label}
+                    html`<temba-label
+                      type="label"
+                      icon=${Icon.label}
+                      clickable
+                      @click=${(e: MouseEvent) => this.handleLabelClick(l, e)}
                       >${l.name}</temba-label
                     >`
                 )}

package/src/utils.ts

@@ -1291,9 +1291,19 @@ export const generateDefaultCategoryName = (
 
   // Handle different operator types
   switch (operator) {
-    // Word/phrase operators - capitalize first letter of value
+    // Word-list operators - the argument is a list of words, so only the
+    // first word seeds the category name (e.g. "red maroon fire" -> "Red").
+    // Trailing punctuation is stripped so comma-separated lists like
+    // "red, blue, green" yield "Red" rather than "Red,".
     case 'has_any_word':
-    case 'has_all_words':
+    case 'has_all_words': {
+      const firstWord = cleanValue1
+        .split(/\s+/)[0]
+        .replace(/[^\p{L}\p{N}]+$/u, '');
+      return firstWord ? capitalize(firstWord) : '';
+    }
+
+    // Phrase operators - the argument is a single phrase, capitalize as-is
     case 'has_phrase':
     case 'has_only_phrase':
     case 'has_beginning':