@nyaruka/temba-components 0.156.8 → 0.156.10

package/src/flow/Editor.ts

@@ -34,7 +34,12 @@ import { PRIMARY_LANGUAGE_OPTION_VALUE } from './EditorToolbar';
 import { calculateLayeredLayout, placeStickyNotes } from './reflow';
 import type { RevisionsWindow } from './RevisionsWindow';
 
-import { ACTION_GROUP_METADATA } from './types';
+import {
+  ACTION_GROUP_METADATA,
+  CONTEXT_MENU_SHORTCUTS,
+  FlowType,
+  FlowTypes
+} from './types';
 
 import {
   Plumber,
@@ -201,7 +206,7 @@ export class Editor extends RapidElement {
   public version: string;
 
   @property({ type: String })
-  public flowType: string = 'message';
+  public flowType: FlowType = FlowTypes.MESSAGE;
 
   @property({ type: Array })
   public features: string[] = [];
@@ -1360,7 +1365,7 @@ export class Editor extends RapidElement {
             },
             false, // Don't show sticky note option for connection drops
             false,
-            this.flowType === 'message'
+            CONTEXT_MENU_SHORTCUTS[this.flowType]
           );
         }
       }
@@ -1537,17 +1542,17 @@ export class Editor extends RapidElement {
    * FlowDefinition uses: 'messaging', 'messaging_background', 'messaging_offline', 'voice'
    * Editor uses: 'message', 'voice', 'background'
    */
-  private getFlowTypeFromDefinition(definitionType: string): string {
+  private getFlowTypeFromDefinition(definitionType: string): FlowType {
     if (definitionType === 'voice') {
-      return 'voice';
+      return FlowTypes.VOICE;
     } else if (
       definitionType === 'messaging_background' ||
       definitionType === 'messaging_offline'
     ) {
-      return 'background';
+      return FlowTypes.BACKGROUND;
     } else {
       // 'messaging' or any other messaging type defaults to 'message'
-      return 'message';
+      return FlowTypes.MESSAGE;
     }
   }
 
@@ -1769,10 +1774,10 @@ export class Editor extends RapidElement {
       this.definition?._ui?.languages &&
       this.definition._ui.languages.length > 0
     ) {
-      return this.definition._ui.languages.map((lang: any) => ({
-        code: typeof lang === 'string' ? lang : lang.iso || lang.code,
-        name: typeof lang === 'string' ? lang : lang.name
-      }));
+      return this.definition._ui.languages.map((lang: any) => {
+        const code = typeof lang === 'string' ? lang : lang.iso || lang.code;
+        return { code, name: getLanguageDisplayName(code) };
+      });
     }
 
     // No languages available
@@ -2193,7 +2198,8 @@ export class Editor extends RapidElement {
     search.definition = this.definition;
     search.languageCode = this.languageCode || '';
     search.scope = this.showMessageTable ? 'table' : 'flow';
-    search.includeCategories = this.isTranslating && this.hasAnyNodeWithLocalizeCategories();
+    search.includeCategories =
+      this.isTranslating && this.hasAnyNodeWithLocalizeCategories();
     search.show();
   }
 
@@ -2858,7 +2864,7 @@ export class Editor extends RapidElement {
         },
         true,
         hasNodes,
-        this.flowType === 'message'
+        CONTEXT_MENU_SHORTCUTS[this.flowType]
       );
     }
   }
@@ -2887,7 +2893,7 @@ export class Editor extends RapidElement {
         { x: nodeLeft, y: nodeTop },
         false,
         false,
-        this.flowType === 'message'
+        CONTEXT_MENU_SHORTCUTS[this.flowType]
       );
     }
   }
@@ -2920,19 +2926,6 @@ export class Editor extends RapidElement {
       this.connectionSourceX = null;
       this.connectionSourceY = null;
       this.dragFromNodeId = null;
-    } else if (
-      selection.action === 'send_msg' ||
-      selection.action === 'wait_for_response'
-    ) {
-      // Go directly to the node editor (skip node type selector)
-      this.handleNodeTypeSelection(
-        new CustomEvent(CustomEventType.Selection, {
-          detail: {
-            nodeType: selection.action,
-            position: selection.position
-          } as NodeTypeSelection
-        })
-      );
     } else if (selection.action === 'other') {
       // Show unified node type selector
       const selector = this.querySelector(
@@ -2943,6 +2936,17 @@ export class Editor extends RapidElement {
       }
       // Note: we don't clear pendingCanvasConnection or placeholder here,
       // they will be used in handleNodeTypeSelection
+    } else {
+      // Configured shortcut — go directly to the node editor with the
+      // action/node type carried in selection.action.
+      this.handleNodeTypeSelection(
+        new CustomEvent(CustomEventType.Selection, {
+          detail: {
+            nodeType: selection.action,
+            position: selection.position
+          } as NodeTypeSelection
+        })
+      );
     }
   }
 
@@ -3855,9 +3859,7 @@ export class Editor extends RapidElement {
 
     this.focusNode(issue.node_uuid);
 
-    const node = this.definition.nodes.find(
-      (n) => n.uuid === issue.node_uuid
-    );
+    const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
     if (!node) return;
 
     if (issue.action_uuid) {
@@ -3915,7 +3917,7 @@ export class Editor extends RapidElement {
     const baseLanguage = this.definition?.language;
     const baseLanguageName =
       availableLanguages.find((lang) => lang.code === baseLanguage)?.name ||
-      baseLanguage ||
+      (baseLanguage ? getLanguageDisplayName(baseLanguage) : '') ||
       'Primary language';
     const isBaseSelected =
       !this.languageCode ||
@@ -3934,25 +3936,30 @@ export class Editor extends RapidElement {
     const percent = Math.round(
       (progress.localized / Math.max(progress.total, 1)) * 100
     );
-    const languageOptions = [
-      {
-        name: baseLanguageName,
-        value: PRIMARY_LANGUAGE_OPTION_VALUE
-      },
-      ...languages.map((lang) => {
-        const localizationProgress = this.getLocalizationProgress(lang.code);
-        const localizationPercent = Math.round(
-          (localizationProgress.localized /
-            Math.max(localizationProgress.total, 1)) *
-            100
-        );
-        return {
-          name: lang.name,
-          value: lang.code,
-          percent: localizationPercent
-        };
-      })
-    ];
+    const isEmptyFlow = !this.definition || this.definition.nodes.length === 0;
+    const languageOptions = isEmptyFlow
+      ? []
+      : [
+          {
+            name: baseLanguageName,
+            value: PRIMARY_LANGUAGE_OPTION_VALUE
+          },
+          ...languages.map((lang) => {
+            const localizationProgress = this.getLocalizationProgress(
+              lang.code
+            );
+            const localizationPercent = Math.round(
+              (localizationProgress.localized /
+                Math.max(localizationProgress.total, 1)) *
+                100
+            );
+            return {
+              name: lang.name,
+              value: lang.code,
+              percent: localizationPercent
+            };
+          })
+        ];
 
     return html`
       <temba-editor-toolbar
@@ -3962,7 +3969,8 @@ export class Editor extends RapidElement {
         ?zoom-fitted=${this.zoomManager.isZoomFitted}
         ?revisions-active=${!this.revisionsWindowHidden}
         ?is-saving=${this.isSaving}
-        ?search-disabled=${this.getRevisionsWindow()?.isViewingRevision ?? false}
+        ?search-disabled=${this.getRevisionsWindow()?.isViewingRevision ??
+        false}
         .languageOptions=${languageOptions}
         current-language-name=${currentLanguage.name}
         ?is-base-language=${isBaseSelected}
@@ -4219,9 +4227,7 @@ export class Editor extends RapidElement {
                     : ''}
                 <div
                   id="grid"
-                  class="${this.viewingRevision
-                    ? 'viewing-revision'
-                    : ''}"
+                  class="${this.viewingRevision ? 'viewing-revision' : ''}"
                   style="min-width:${100 / this.zoom}%;min-height:${100 /
                   this.zoom}%;width:${this.canvasSize.width}px; height:${this
                     .canvasSize.height}px;transform:scale(${this.zoom})"
@@ -4229,11 +4235,9 @@ export class Editor extends RapidElement {
                   <div
                     id="canvas"
                     class="${getClasses({
-                      'viewing-revision':
-                        this.viewingRevision,
+                      'viewing-revision': this.viewingRevision,
                       'read-only-connections':
-                        this.viewingRevision ||
-                        this.isTranslating
+                        this.viewingRevision || this.isTranslating
                     })}"
                   >
                     ${this.definition && !hasCorruptedUI
@@ -4354,7 +4358,8 @@ export class Editor extends RapidElement {
         : ''}
       <temba-flow-search
         .scope=${this.showMessageTable ? 'table' : 'flow'}
-        .includeCategories=${this.isTranslating && this.hasAnyNodeWithLocalizeCategories()}
+        .includeCategories=${this.isTranslating &&
+        this.hasAnyNodeWithLocalizeCategories()}
         @temba-search-result-selected=${this.handleSearchResultSelected}
       ></temba-flow-search>
       ${!this.showMessageTable && this.flowIssues?.length

package/src/flow/EditorToolbar.ts

@@ -311,10 +311,7 @@ export class EditorToolbar extends RapidElement {
     `;
   }
 
-  private renderShortcutLabel(
-    label: string,
-    shortcut: string
-  ): TemplateResult {
+  private renderShortcutLabel(label: string, shortcut: string): TemplateResult {
     return html`<span style="display:inline-flex; align-items:center; gap:8px;">
       <span>${label}</span>
       <kbd>${shortcut}</kbd>
@@ -348,7 +345,9 @@ export class EditorToolbar extends RapidElement {
 
     return html`
       <div
-        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; ${optionBg ? `background:${optionBg};` : ''} ${optionRadius}"
+        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; ${optionBg
+          ? `background:${optionBg};`
+          : ''} ${optionRadius}"
         @mouseenter=${isComplete
           ? (e: MouseEvent) => {
               (e.currentTarget as HTMLElement).style.background = optionHoverBg;
@@ -372,9 +371,7 @@ export class EditorToolbar extends RapidElement {
 
   public render(): TemplateResult {
     const showLanguageControls = this.languageOptions.length > 1;
-    const searchTargetLabel = this.messageView
-      ? 'Search table'
-      : 'Search flow';
+    const searchTargetLabel = this.messageView ? 'Search table' : 'Search flow';
 
     return html`
       <div class="editor-toolbar">
@@ -384,7 +381,8 @@ export class EditorToolbar extends RapidElement {
             html`
               <button
                 class="toolbar-btn ${!this.messageView ? 'active' : ''}"
-                @click=${() => this.fireToolbarAction('view-change', { view: 'flow' })}
+                @click=${() =>
+                  this.fireToolbarAction('view-change', { view: 'flow' })}
                 aria-label="Flow View"
               >
                 <temba-icon name="flow" size="1"></temba-icon>
@@ -396,7 +394,8 @@ export class EditorToolbar extends RapidElement {
             html`
               <button
                 class="toolbar-btn ${this.messageView ? 'active' : ''}"
-                @click=${() => this.fireToolbarAction('view-change', { view: 'table' })}
+                @click=${() =>
+                  this.fireToolbarAction('view-change', { view: 'table' })}
                 aria-label="Table View"
               >
                 <temba-icon name=${Icon.quick_replies} size="1"></temba-icon>
@@ -412,7 +411,11 @@ export class EditorToolbar extends RapidElement {
                       'Change language',
                       html`
                         <button
-                          class="language-pill ${this.isBaseLanguage ? 'primary' : this.languagePercent === 100 ? 'complete' : ''}"
+                          class="language-pill ${this.isBaseLanguage
+                            ? 'primary'
+                            : this.languagePercent === 100
+                              ? 'complete'
+                              : ''}"
                           id="language-btn"
                           @click=${this.handleLanguageIconClick}
                           aria-label="Change language"
@@ -434,7 +437,9 @@ export class EditorToolbar extends RapidElement {
                       `
                     )}
                     <temba-options
-                      .anchorTo=${this.shadowRoot?.querySelector('#language-btn') as HTMLElement}
+                      .anchorTo=${this.shadowRoot?.querySelector(
+                        '#language-btn'
+                      ) as HTMLElement}
                       .options=${this.languageOptions}
                       .renderOption=${this.renderLanguageOption}
                       ?visible=${this.showLanguageOptions}
@@ -462,10 +467,7 @@ export class EditorToolbar extends RapidElement {
                       ?disabled=${!this.zoomInitialized || this.zoomFitted}
                       aria-label="Zoom to fit"
                     >
-                      <temba-icon
-                        name=${Icon.zoom_fit}
-                        size="1"
-                      ></temba-icon>
+                      <temba-icon name=${Icon.zoom_fit} size="1"></temba-icon>
                     </button>
                   `
                 )}
@@ -511,10 +513,7 @@ export class EditorToolbar extends RapidElement {
                       ?disabled=${!this.zoomInitialized || this.zoom >= 1.0}
                       aria-label="Zoom to 100%"
                     >
-                      <temba-icon
-                        name=${Icon.zoom_in}
-                        size="1"
-                      ></temba-icon>
+                      <temba-icon name=${Icon.zoom_in} size="1"></temba-icon>
                     </button>
                   `
                 )}

package/src/flow/FlowSearch.ts

@@ -265,9 +265,7 @@ function getNodeSearchTexts(
   if (node.router?.categories) {
     for (const cat of node.router.categories) {
       if (cat.name && cat.name !== 'Other' && cat.name !== 'All Responses') {
-        texts.push(
-          localizeCategoryName(cat.uuid, cat.name, langLocalization)
-        );
+        texts.push(localizeCategoryName(cat.uuid, cat.name, langLocalization));
       }
     }
   }
@@ -748,7 +746,8 @@ export class FlowSearch extends LitElement {
           const actionConfig = ACTION_CONFIG[action.type];
           if (
             action.type !== 'send_msg' &&
-            (!actionConfig?.localizable || actionConfig.localizable.length === 0)
+            (!actionConfig?.localizable ||
+              actionConfig.localizable.length === 0)
           ) {
             continue;
           }
@@ -907,7 +906,10 @@ export class FlowSearch extends LitElement {
                       >
                         <div
                           class="result-type-badge"
-                          style="background:${result.color};border-color:${result.borderColor || result.color}${result.textColor ? `;color:${result.textColor}` : ''}"
+                          style="background:${result.color};border-color:${result.borderColor ||
+                          result.color}${result.textColor
+                            ? `;color:${result.textColor}`
+                            : ''}"
                         >
                           ${result.typeName}
                         </div>
@@ -925,8 +927,8 @@ export class FlowSearch extends LitElement {
               `
             : html`<div class="no-results">No matches found</div>`
           : html`<div class="hint">
-              <kbd>↑</kbd> <kbd>↓</kbd> to navigate &nbsp;
-              <kbd>Enter</kbd> to open &nbsp; <kbd>Esc</kbd> to close
+              <kbd>↑</kbd> <kbd>↓</kbd> to navigate &nbsp; <kbd>Enter</kbd> to
+              open &nbsp; <kbd>Esc</kbd> to close
             </div>`}
       </div>
     `;