@nyaruka/temba-components 0.156.9 → 0.156.10

package/src/flow/MessageTable.ts

@@ -87,7 +87,9 @@ export class MessageTable extends RapidElement {
         padding: 2px 16px 2px 26px;
       }
 
-      .message-table tr.localization-paired-row:not(.localization-paired-last) td {
+      .message-table
+        tr.localization-paired-row:not(.localization-paired-last)
+        td {
         border-bottom: none;
       }
 
@@ -278,11 +280,13 @@ export class MessageTable extends RapidElement {
         transition: background 0.15s;
       }
 
-      .translation-cell.category-translation-cell:hover .category-translation-item {
+      .translation-cell.category-translation-cell:hover
+        .category-translation-item {
         background: #f5f8ff;
       }
 
-      .translation-cell.category-translation-cell:hover .category-translation-item.missing {
+      .translation-cell.category-translation-cell:hover
+        .category-translation-item.missing {
         color: #9bb8df;
       }
 
@@ -399,14 +403,24 @@ export class MessageTable extends RapidElement {
       const nodeType = nodeUI?.type;
 
       // Collect rules that have localized values or are flagged for localization
-      const langLocalization = this.definition?.localization?.[this.languageCode] || {};
-      let rules: Array<{ uuid: string; type: string; arguments: string[] }> = [];
+      const langLocalization =
+        this.definition?.localization?.[this.languageCode] || {};
+      let rules: Array<{ uuid: string; type: string; arguments: string[] }> =
+        [];
       if (node.router?.cases?.length) {
         const hasLocalizeRules = nodeUI?.config?.localizeRules;
         rules = node.router.cases
           .filter((c) => c.arguments?.length > 0 && c.arguments.some((a) => a))
-          .filter((c) => hasLocalizeRules || langLocalization[c.uuid]?.arguments?.some((a: string) => a))
-          .map((c) => ({ uuid: c.uuid, type: c.type, arguments: [...c.arguments] }));
+          .filter(
+            (c) =>
+              hasLocalizeRules ||
+              langLocalization[c.uuid]?.arguments?.some((a: string) => a)
+          )
+          .map((c) => ({
+            uuid: c.uuid,
+            type: c.type,
+            arguments: [...c.arguments]
+          }));
       }
 
       // Collect categories that have localized values or are flagged for localization
@@ -424,8 +438,8 @@ export class MessageTable extends RapidElement {
         if (hasLocalizeCategories) {
           categories = translatableCategories;
         } else {
-          categories = translatableCategories.filter(
-            (cat) => langLocalization[cat.uuid]?.name?.some((n: string) => n)
+          categories = translatableCategories.filter((cat) =>
+            langLocalization[cat.uuid]?.name?.some((n: string) => n)
           );
         }
       }
@@ -492,9 +506,7 @@ export class MessageTable extends RapidElement {
     }
 
     return localization.quick_replies
-      .map((reply: unknown) =>
-        typeof reply === 'string' ? reply.trim() : ''
-      )
+      .map((reply: unknown) => (typeof reply === 'string' ? reply.trim() : ''))
       .filter((reply: string) => reply.length > 0);
   }
 
@@ -568,7 +580,10 @@ export class MessageTable extends RapidElement {
     // Count string-type localizable fields (exclude arrays like attachments, quick_replies)
     const textFields = config.localizable.filter((key) => {
       const fieldConfig = config.form?.[key];
-      return fieldConfig && (fieldConfig.type === 'text' || fieldConfig.type === 'textarea');
+      return (
+        fieldConfig &&
+        (fieldConfig.type === 'text' || fieldConfig.type === 'textarea')
+      );
     });
     return textFields.length > 1;
   }
@@ -587,11 +602,15 @@ export class MessageTable extends RapidElement {
     return config.localizable
       .filter((key) => {
         const fieldConfig = config.form?.[key];
-        return fieldConfig && (fieldConfig.type === 'text' || fieldConfig.type === 'textarea');
+        return (
+          fieldConfig &&
+          (fieldConfig.type === 'text' || fieldConfig.type === 'textarea')
+        );
       })
       .map((key) => {
         const fieldConfig = config.form![key];
-        const label = typeof fieldConfig.label === 'string' ? fieldConfig.label : key;
+        const label =
+          typeof fieldConfig.label === 'string' ? fieldConfig.label : key;
         return {
           key,
           label,
@@ -609,7 +628,8 @@ export class MessageTable extends RapidElement {
         if (colonIdx < 0) return html``;
         const contentType = att.substring(0, colonIdx);
         const baseType = contentType.split('/')[0];
-        const iconName = MessageTable.ATTACHMENT_ICONS[baseType] || Icon.attachment;
+        const iconName =
+          MessageTable.ATTACHMENT_ICONS[baseType] || Icon.attachment;
         return html`<div class="attachment-icon">
           <temba-icon name="${iconName}"></temba-icon>
         </div>`;
@@ -628,10 +648,17 @@ export class MessageTable extends RapidElement {
     if (config?.form) {
       for (const key of localizable) {
         const fc = config.form[key];
-        if (fc && (fc.type === 'text' || fc.type === 'textarea' || fc.type === 'message-editor')) {
+        if (
+          fc &&
+          (fc.type === 'text' ||
+            fc.type === 'textarea' ||
+            fc.type === 'message-editor')
+        ) {
           const text = action[key] || '';
           if (text) {
-            parts.push(renderHighlightedText(this.stripLeadingLineBreaks(text), true));
+            parts.push(
+              renderHighlightedText(this.stripLeadingLineBreaks(text), true)
+            );
           }
         }
       }
@@ -640,9 +667,15 @@ export class MessageTable extends RapidElement {
     // Quick replies (send_msg)
     const quickReplies: string[] = action.quick_replies || [];
     if (quickReplies.length > 0) {
-      parts.push(html`<div class="quick-replies ${parts.length === 0 ? 'standalone' : ''}">${quickReplies.map(
-        (reply) => html`<div class="quick-reply">${reply}</div>`
-      )}</div>`);
+      parts.push(
+        html`<div
+          class="quick-replies ${parts.length === 0 ? 'standalone' : ''}"
+        >
+          ${quickReplies.map(
+            (reply) => html`<div class="quick-reply">${reply}</div>`
+          )}
+        </div>`
+      );
     }
 
     // Attachments
@@ -669,10 +702,20 @@ export class MessageTable extends RapidElement {
     if (config?.form) {
       for (const key of localizable) {
         const fc = config.form[key];
-        if (fc && (fc.type === 'text' || fc.type === 'textarea' || fc.type === 'message-editor')) {
+        if (
+          fc &&
+          (fc.type === 'text' ||
+            fc.type === 'textarea' ||
+            fc.type === 'message-editor')
+        ) {
           const translatedText = this.getTranslatedField(action.uuid, key);
           if (typeof translatedText === 'string') {
-            parts.push(renderHighlightedText(this.stripLeadingLineBreaks(translatedText), true));
+            parts.push(
+              renderHighlightedText(
+                this.stripLeadingLineBreaks(translatedText),
+                true
+              )
+            );
           }
         }
       }
@@ -681,13 +724,22 @@ export class MessageTable extends RapidElement {
     // Translated quick replies
     const translatedQuickReplies = this.getTranslatedQuickReplies(action.uuid);
     if (translatedQuickReplies.length > 0) {
-      parts.push(html`<div class="quick-replies ${parts.length === 0 ? 'standalone' : ''}">${translatedQuickReplies.map(
-        (reply) => html`<div class="quick-reply">${reply}</div>`
-      )}</div>`);
+      parts.push(
+        html`<div
+          class="quick-replies ${parts.length === 0 ? 'standalone' : ''}"
+        >
+          ${translatedQuickReplies.map(
+            (reply) => html`<div class="quick-reply">${reply}</div>`
+          )}
+        </div>`
+      );
     }
 
     // Translated attachments
-    const translatedAttachments = this.getTranslatedArrayField(action.uuid, 'attachments');
+    const translatedAttachments = this.getTranslatedArrayField(
+      action.uuid,
+      'attachments'
+    );
     if (translatedAttachments.length > 0) {
       parts.push(this.renderAttachments(translatedAttachments));
     }
@@ -739,9 +791,7 @@ export class MessageTable extends RapidElement {
     });
   }
 
-  private getGroupTranslations(
-    entry: LocalizationGroupEntry
-  ): Array<{
+  private getGroupTranslations(entry: LocalizationGroupEntry): Array<{
     original: string;
     translated: string | null;
     isRule: boolean;
@@ -795,7 +845,10 @@ export class MessageTable extends RapidElement {
   }
 
   private renderPairedRows(
-    items: Array<{ original: TemplateResult; translated: TemplateResult | null }>,
+    items: Array<{
+      original: TemplateResult;
+      translated: TemplateResult | null;
+    }>,
     entry: TableEntry,
     handleBaseClick: () => void,
     handleTranslationClick: () => void,
@@ -805,11 +858,17 @@ export class MessageTable extends RapidElement {
       ${items.map(
         (item, idx) => html`
           <tr
-            class="category-row localization-paired-row ${idx === 0 ? 'localization-paired-first' : ''} ${idx === items.length - 1 ? 'localization-paired-last' : ''}"
+            class="category-row localization-paired-row ${idx === 0
+              ? 'localization-paired-first'
+              : ''} ${idx === items.length - 1
+              ? 'localization-paired-last'
+              : ''}"
             style=${`--node-rail-color: ${this.getEntryRailColor(entry)};`}
             data-node-uuid=${entry.node.uuid}
             data-entry-kind=${entry.kind}
-            data-action-uuid=${entry.kind === 'message' ? entry.action.uuid : ''}
+            data-action-uuid=${entry.kind === 'message'
+              ? entry.action.uuid
+              : ''}
           >
             <td>
               <div
@@ -830,9 +889,16 @@ export class MessageTable extends RapidElement {
                     title="Click to edit translation"
                   >
                     <div
-                      class="category-item category-translation-item ${item.translated !== null ? '' : 'missing'}"
+                      class="category-item category-translation-item ${item.translated !==
+                      null
+                        ? ''
+                        : 'missing'}"
                     >
-                      <span>${item.translated !== null ? item.translated : 'No translation'}</span>
+                      <span
+                        >${item.translated !== null
+                          ? item.translated
+                          : 'No translation'}</span
+                      >
                     </div>
                   </div>
                 </td>`
@@ -880,32 +946,55 @@ export class MessageTable extends RapidElement {
               const groupTranslations = this.getGroupTranslations(entry);
               const items = groupTranslations.map((item) => ({
                 original: html`${item.isRule && item.operatorName
-                  ? html`<span class="rule-operator">${item.operatorName}</span> `
+                  ? html`<span class="rule-operator"
+                      >${item.operatorName}</span
+                    > `
                   : ''}${renderHighlightedText(item.original, true)}`,
-                translated: item.translated !== null
-                  ? html`${item.isRule && item.operatorName
-                      ? html`<span class="rule-operator">${item.operatorName}</span> `
-                      : ''}${renderHighlightedText(item.translated, true)}`
-                  : null
+                translated:
+                  item.translated !== null
+                    ? html`${item.isRule && item.operatorName
+                        ? html`<span class="rule-operator"
+                            >${item.operatorName}</span
+                          > `
+                        : ''}${renderHighlightedText(item.translated, true)}`
+                    : null
               }));
-              return this.renderPairedRows(items, entry, handleBaseClick, handleTranslationClickFn, showTranslation);
+              return this.renderPairedRows(
+                items,
+                entry,
+                handleBaseClick,
+                handleTranslationClickFn,
+                showTranslation
+              );
             }
 
             // Multi-field actions (e.g. send_email with subject + body) - paired rows
-            if (
-              entry.kind === 'message' &&
-              this.usesPairedRows(entry.action)
-            ) {
+            if (entry.kind === 'message' && this.usesPairedRows(entry.action)) {
               const fields = this.getPairedFields(entry.action);
               const items = fields.map((f) => ({
                 original: html`${f.original
-                  ? renderHighlightedText(this.stripLeadingLineBreaks(f.original), true)
-                  : html`<span style="color: #bbb; font-style: italic;">Empty</span>`}`,
-                translated: f.translated !== null
-                  ? html`${renderHighlightedText(this.stripLeadingLineBreaks(f.translated), true)}`
-                  : null
+                  ? renderHighlightedText(
+                      this.stripLeadingLineBreaks(f.original),
+                      true
+                    )
+                  : html`<span style="color: #bbb; font-style: italic;"
+                      >Empty</span
+                    >`}`,
+                translated:
+                  f.translated !== null
+                    ? html`${renderHighlightedText(
+                        this.stripLeadingLineBreaks(f.translated),
+                        true
+                      )}`
+                    : null
               }));
-              return this.renderPairedRows(items, entry, handleBaseClick, handleTranslationClickFn, showTranslation);
+              return this.renderPairedRows(
+                items,
+                entry,
+                handleBaseClick,
+                handleTranslationClickFn,
+                showTranslation
+              );
             }
 
             // Single-row entries (send_msg, send_broadcast, etc.)
@@ -913,9 +1002,9 @@ export class MessageTable extends RapidElement {
               entry.kind === 'message' &&
               showTranslation &&
               this.hasAnyTranslation(entry);
-            const translationCellClass = `translation-cell ${hasTranslation
-              ? 'has-translation'
-              : 'missing-translation'}`;
+            const translationCellClass = `translation-cell ${
+              hasTranslation ? 'has-translation' : 'missing-translation'
+            }`;
 
             return html`
               <tr
@@ -936,23 +1025,41 @@ export class MessageTable extends RapidElement {
                       ? this.renderOriginalContent(entry)
                       : isGroupEntry
                         ? html`
-                          <div class="category-stack category-stack-original">
-                            ${entry.rules.map(
-                              (c) => html`
-                                <div class="category-item category-original-item">
-                                  <span><span class="rule-operator">${getOperatorConfig(c.type)?.name || c.type}</span> ${renderHighlightedText(c.arguments.join(', '), true)}</span>
-                                </div>
-                              `
-                            )}
-                            ${entry.categories.map(
-                              (category) => html`
-                                <div class="category-item category-original-item">
-                                  <span>${renderHighlightedText(category.name, true)}</span>
-                                </div>
-                              `
-                            )}
-                          </div>
-                        `
+                            <div class="category-stack category-stack-original">
+                              ${entry.rules.map(
+                                (c) => html`
+                                  <div
+                                    class="category-item category-original-item"
+                                  >
+                                    <span
+                                      ><span class="rule-operator"
+                                        >${getOperatorConfig(c.type)?.name ||
+                                        c.type}</span
+                                      >
+                                      ${renderHighlightedText(
+                                        c.arguments.join(', '),
+                                        true
+                                      )}</span
+                                    >
+                                  </div>
+                                `
+                              )}
+                              ${entry.categories.map(
+                                (category) => html`
+                                  <div
+                                    class="category-item category-original-item"
+                                  >
+                                    <span
+                                      >${renderHighlightedText(
+                                        category.name,
+                                        true
+                                      )}</span
+                                    >
+                                  </div>
+                                `
+                              )}
+                            </div>
+                          `
                         : ''}
                   </div>
                 </td>
@@ -964,8 +1071,8 @@ export class MessageTable extends RapidElement {
                         title="Click to edit translation"
                       >
                         ${entry.kind === 'message'
-                            ? this.renderTranslatedContent(entry)
-                            : 'No translation'}
+                          ? this.renderTranslatedContent(entry)
+                          : 'No translation'}
                       </div>
                     </td>`
                   : ''}

package/src/flow/NodeEditor.ts

@@ -21,8 +21,13 @@ import {
 } from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
-import { formatIssueMessage } from './utils';
+import {
+  formatIssueMessage,
+  resolveToLocalizationFormData,
+  resolveFromLocalizationFormData
+} from './utils';
 import { getTranslatableCategoriesForNode } from './categoryLocalization';
+import { collectReservedCategoryErrors } from './categoryUtils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
 import {
@@ -587,21 +592,17 @@ export class NodeEditor extends RapidElement {
       const actionConfig = ACTION_CONFIG[this.action.type];
 
       // Check if we're in localization mode
-      if (
-        this.isTranslating &&
-        actionConfig?.localizable &&
-        actionConfig.toLocalizationFormData
-      ) {
+      const actionToLocalization = actionConfig
+        ? resolveToLocalizationFormData(actionConfig)
+        : undefined;
+      if (this.isTranslating && actionToLocalization) {
         // Get localized values for this action
         const localization =
           this.flowDefinition?.localization?.[this.languageCode]?.[
             this.action.uuid
           ] || {};
 
-        this.formData = actionConfig.toLocalizationFormData(
-          this.action,
-          localization
-        );
+        this.formData = actionToLocalization(this.action, localization);
       } else if (actionConfig?.toFormData) {
         this.formData = actionConfig.toFormData(this.action);
       } else {
@@ -618,19 +619,19 @@ export class NodeEditor extends RapidElement {
       const nodeConfig = this.getNodeConfig();
 
       // Check if we're in localization mode for a node with localizable categories
+      const nodeToLocalization = nodeConfig
+        ? resolveToLocalizationFormData(nodeConfig)
+        : undefined;
       if (
         this.isTranslating &&
         nodeConfig?.localizable === 'categories' &&
-        nodeConfig.toLocalizationFormData
+        nodeToLocalization
       ) {
         // Get localized values for this node's categories
         const localization =
           this.flowDefinition?.localization?.[this.languageCode] || {};
 
-        this.formData = nodeConfig.toLocalizationFormData(
-          this.node,
-          localization
-        );
+        this.formData = nodeToLocalization(this.node, localization);
 
         const translatableCategoryUuids = new Set(
           getTranslatableCategoriesForNode(
@@ -648,8 +649,8 @@ export class NodeEditor extends RapidElement {
           this.formData = {
             ...this.formData,
             categories: Object.fromEntries(
-              Object.entries(this.formData.categories).filter(([categoryUuid]) =>
-                translatableCategoryUuids.has(categoryUuid)
+              Object.entries(this.formData.categories).filter(
+                ([categoryUuid]) => translatableCategoryUuids.has(categoryUuid)
               )
             )
           };
@@ -690,9 +691,7 @@ export class NodeEditor extends RapidElement {
         this.flowInfo?.results &&
         !this.flowDefinition?._ui?.nodes?.[this.node.uuid]
       ) {
-        const existingNames = new Set(
-          this.flowInfo.results.map((r) => r.name)
-        );
+        const existingNames = new Set(this.flowInfo.results.map((r) => r.name));
         let candidate = 'Result';
         let i = 2;
         while (existingNames.has(candidate)) {
@@ -906,12 +905,12 @@ export class NodeEditor extends RapidElement {
       if (this.action) {
         const actionConfig = ACTION_CONFIG[this.action.type];
 
-        if (
-          actionConfig?.localizable &&
-          actionConfig.fromLocalizationFormData
-        ) {
+        const actionFromLocalization = actionConfig
+          ? resolveFromLocalizationFormData(actionConfig)
+          : undefined;
+        if (actionFromLocalization) {
           // Save to localization structure
-          const localizationData = actionConfig.fromLocalizationFormData(
+          const localizationData = actionFromLocalization(
             processedFormData,
             this.action
           );
@@ -933,11 +932,11 @@ export class NodeEditor extends RapidElement {
       if (this.node) {
         const nodeConfig = this.getNodeConfig();
 
-        if (
-          nodeConfig?.localizable === 'categories' &&
-          nodeConfig.fromLocalizationFormData
-        ) {
-          const localizationData = nodeConfig.fromLocalizationFormData(
+        const nodeFromLocalization = nodeConfig
+          ? resolveFromLocalizationFormData(nodeConfig)
+          : undefined;
+        if (nodeConfig?.localizable === 'categories' && nodeFromLocalization) {
+          const localizationData = nodeFromLocalization(
             processedFormData,
             this.node
           );
@@ -1238,40 +1237,7 @@ export class NodeEditor extends RapidElement {
   }
 
   private validateCategoryNames(errors: { [key: string]: string }): void {
-    // Universal validation for category names across all node types
-    // Prevents use of reserved category names that have special meaning in the system
-    // Define reserved category names (case-insensitive)
-    const reservedNames = [
-      'other',
-      'failure',
-      'success',
-      'all responses',
-      'no response'
-    ];
-
-    // Check all form fields for category arrays
-    Object.entries(this.formData).forEach(([fieldName, value]) => {
-      if (Array.isArray(value) && fieldName === 'categories') {
-        const categories = value.filter(
-          (item: any) => item?.name && item.name.trim() !== ''
-        );
-
-        // Check for reserved names
-        const reservedUsed = categories
-          .filter((item: any) => {
-            const lowerName = item.name.trim().toLowerCase();
-            return reservedNames.includes(lowerName);
-          })
-          .map((item: any) => item.name.trim()); // Preserve original case
-
-        if (reservedUsed.length > 0) {
-          errors[fieldName] =
-            `Reserved category names cannot be used: ${reservedUsed.join(
-              ', '
-            )}`;
-        }
-      }
-    });
+    Object.assign(errors, collectReservedCategoryErrors(this.formData));
   }
 
   private formDataToNode(formData: FormData = this.formData): Node {
@@ -1673,14 +1639,17 @@ export class NodeEditor extends RapidElement {
                         ? html`
                             <div class="category-localization-row">
                               <div class="original-name">
-                                <span class="rule-operator">${ruleData.operatorName}</span>
+                                <span class="rule-operator"
+                                  >${ruleData.operatorName}</span
+                                >
                                 <span>${arg}</span>
                               </div>
                               <div class="localized-name">
                                 <temba-textinput
                                   name="rule-${caseUuid}-${i}"
                                   placeholder=""
-                                  value="${ruleData.localizedArguments?.[i] || ''}"
+                                  value="${ruleData.localizedArguments?.[i] ||
+                                  ''}"
                                   @change=${(e: Event) =>
                                     this.handleRuleLocalizationChange(
                                       caseUuid,
@@ -1750,7 +1719,10 @@ export class NodeEditor extends RapidElement {
       this.formData.rules = {};
     }
     if (!this.formData.rules[caseUuid]) {
-      this.formData.rules[caseUuid] = { originalArguments: [], localizedArguments: [] };
+      this.formData.rules[caseUuid] = {
+        originalArguments: [],
+        localizedArguments: []
+      };
     }
     if (!this.formData.rules[caseUuid].localizedArguments) {
       this.formData.rules[caseUuid].localizedArguments = [];
@@ -2200,9 +2172,15 @@ export class NodeEditor extends RapidElement {
             : undefined}
         >
           <div class="form-group-info">
-            <div class="form-group-title">${icon
-                ? html`<temba-icon name=${icon} size="1" style="margin-right:6px;color:#999;"></temba-icon>`
-                : ''}${label}</div>
+            <div class="form-group-title">
+              ${icon
+                ? html`<temba-icon
+                    name=${icon}
+                    size="1"
+                    style="margin-right:6px;color:#999;"
+                  ></temba-icon>`
+                : ''}${label}
+            </div>
             ${helpText
               ? html`<div class="form-group-help">
                   ${renderMarkdownInline(helpText)}
@@ -2248,7 +2226,9 @@ export class NodeEditor extends RapidElement {
           style="${[
             contentPadding ? `--group-content-padding: ${contentPadding}` : '',
             gap ? `gap: ${gap}` : ''
-          ].filter(Boolean).join(';')}"
+          ]
+            .filter(Boolean)
+            .join(';')}"
         >
           ${items.map((item) =>
             this.renderLayoutItem(item, config, renderedFields)
@@ -2288,7 +2268,10 @@ export class NodeEditor extends RapidElement {
     }
 
     return html`
-      <temba-accordion ?multi=${multi} @toggle=${this.handleAccordionSectionToggle}>
+      <temba-accordion
+        ?multi=${multi}
+        @toggle=${this.handleAccordionSectionToggle}
+      >
         ${visibleSections.map((section) => {
           const { label, collapsed = true, getValueCount } = section;
           const stateKey = `accordion:${label}`;

package/src/flow/RevisionsWindow.ts

@@ -213,8 +213,7 @@ export class RevisionsWindow extends RapidElement {
 
   private cancelRevisionView() {
     const store = getStore().getState();
-    const preservedLanguageCode =
-      this.browseLanguageCode || store.languageCode;
+    const preservedLanguageCode = this.browseLanguageCode || store.languageCode;
 
     if (this.preRevertState) {
       const currentInfo = store.flowInfo;
@@ -246,8 +245,7 @@ export class RevisionsWindow extends RapidElement {
     if (!this.viewingRevision || !this.preRevertState) return;
 
     const store = getStore().getState();
-    const preservedLanguageCode =
-      this.browseLanguageCode || store.languageCode;
+    const preservedLanguageCode = this.browseLanguageCode || store.languageCode;
 
     const definitionToSave = {
       ...store.flowDefinition,