@nyaruka/temba-components 0.131.1 → 0.131.2

package/src/flow/NodeEditor.ts

@@ -10,7 +10,14 @@ import {
   FieldConfig,
   ActionConfig
 } from './config';
-import { LayoutItem, RowLayoutConfig, GroupLayoutConfig } from './types';
+import {
+  LayoutItem,
+  RowLayoutConfig,
+  GroupLayoutConfig,
+  FormData,
+  ACTION_GROUP_METADATA,
+  SPLIT_GROUP_METADATA
+} from './types';
 import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
 import { FieldRenderer } from '../form/FieldRenderer';
@@ -25,7 +32,6 @@ export class NodeEditor extends RapidElement {
         flex-direction: column;
         gap: 15px;
         min-width: 400px;
-        padding-bottom: 40px;
 
         --color-bubble-bg: rgba(var(--primary-rgb), 0.7);
         --color-bubble-border: rgba(0, 0, 0, 0.2);
@@ -88,6 +94,28 @@ export class NodeEditor extends RapidElement {
         align-items: center;
       }
 
+      .form-row-wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .form-row-label {
+        margin-bottom: 5px;
+        margin-left: 4px;
+        display: block;
+        font-weight: 400;
+        font-size: var(--label-size);
+        letter-spacing: 0.05em;
+        line-height: normal;
+        color: var(--color-label, #777);
+      }
+
+      .form-row-help {
+        font-size: 12px;
+        color: #666;
+        margin-top: 6px;
+      }
+
       .form-group {
         border: 1px solid #e0e0e0;
         border-radius: 6px;
@@ -276,6 +304,21 @@ export class NodeEditor extends RapidElement {
       .gutter-fields temba-select {
         min-width: 120px;
       }
+
+      .optional-field-link {
+        margin: 10px 0;
+      }
+
+      .optional-field-link a {
+        color: var(--color-link-primary, #0066cc);
+        text-decoration: none;
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .optional-field-link a:hover {
+        text-decoration: underline;
+      }
     `;
   }
 
@@ -292,10 +335,10 @@ export class NodeEditor extends RapidElement {
   isOpen: boolean = false;
 
   @state()
-  private formData: any = {};
+  private formData: FormData = {};
 
   @state()
-  private originalFormData: any = {};
+  private originalFormData: FormData = {};
 
   @state()
   private errors: { [key: string]: string } = {};
@@ -306,6 +349,9 @@ export class NodeEditor extends RapidElement {
   @state()
   private groupHoverState: { [key: string]: boolean } = {};
 
+  @state()
+  private revealedOptionalFields: Set<string> = new Set();
+
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
@@ -361,7 +407,7 @@ export class NodeEditor extends RapidElement {
       // Node editing mode - use node config
       const nodeConfig = this.getNodeConfig();
       if (nodeConfig?.toFormData) {
-        this.formData = nodeConfig.toFormData(this.node);
+        this.formData = nodeConfig.toFormData(this.node, this.nodeUI);
       } else {
         this.formData = { ...this.node };
       }
@@ -488,7 +534,10 @@ export class NodeEditor extends RapidElement {
 
   private getHeaderColor(): string {
     const config = this.getConfig();
-    return config?.color || '#666666';
+    return config?.group
+      ? ACTION_GROUP_METADATA[config.group]?.color ||
+          SPLIT_GROUP_METADATA[config.group]?.color
+      : '#aaaaaa';
   }
 
   private handleDialogButtonClick(event: CustomEvent): void {
@@ -522,8 +571,16 @@ export class NodeEditor extends RapidElement {
     if (this.node && this.node.router) {
       // Node editing mode with router - use formDataToNode
       const updatedNode = this.formDataToNode(processedFormData);
+
+      // Generate UI config if the node config provides a toUIConfig function
+      const nodeConfig = this.getNodeConfig();
+      const uiConfig = nodeConfig?.toUIConfig
+        ? nodeConfig.toUIConfig(processedFormData)
+        : undefined;
+
       this.fireCustomEvent(CustomEventType.NodeSaved, {
-        node: updatedNode
+        node: updatedNode,
+        uiConfig
       });
     } else if (this.action) {
       // Pure action editing mode (no router)
@@ -534,13 +591,21 @@ export class NodeEditor extends RapidElement {
     } else if (this.node) {
       // Node editing mode without router
       const updatedNode = this.formDataToNode(processedFormData);
+
+      // Generate UI config if the node config provides a toUIConfig function
+      const nodeConfig = this.getNodeConfig();
+      const uiConfig = nodeConfig?.toUIConfig
+        ? nodeConfig.toUIConfig(processedFormData)
+        : undefined;
+
       this.fireCustomEvent(CustomEventType.NodeSaved, {
-        node: updatedNode
+        node: updatedNode,
+        uiConfig
       });
     }
   }
 
-  private processFormDataForSave(): any {
+  private processFormDataForSave(): FormData {
     const processed = { ...this.formData };
 
     // Convert key-value arrays to Records
@@ -743,12 +808,21 @@ export class NodeEditor extends RapidElement {
     });
   }
 
-  private formDataToNode(formData: any = this.formData): Node {
+  private formDataToNode(formData: FormData = this.formData): Node {
     if (!this.node) throw new Error('No node to update');
     let updatedNode: Node = { ...this.node };
 
+    // Check if node config has fromFormData - if so, it handles the entire transformation
+    const nodeConfig = this.getNodeConfig();
+    const nodeHasFromFormData = nodeConfig?.fromFormData !== undefined;
+
     // Handle actions using action config transformations if available
-    if (this.node.actions && this.node.actions.length > 0) {
+    // Skip this if the node has its own fromFormData (which handles actions itself)
+    if (
+      !nodeHasFromFormData &&
+      this.node.actions &&
+      this.node.actions.length > 0
+    ) {
       updatedNode.actions = this.node.actions.map((action) => {
         // If we're editing a specific action, only transform that one
         if (this.action && action.uuid === this.action.uuid) {
@@ -768,66 +842,105 @@ export class NodeEditor extends RapidElement {
     }
 
     // Handle router configuration using node config
-    if (this.node.router) {
-      const nodeConfig = this.getNodeConfig();
-
-      if (nodeConfig?.fromFormData) {
-        // Use node-specific form data transformation
-        updatedNode = nodeConfig.fromFormData(formData, updatedNode);
-      } else {
-        // Default router handling
-        updatedNode.router = { ...this.node.router };
+    if (nodeHasFromFormData) {
+      // Use node-specific form data transformation
+      // When a node has fromFormData, it's responsible for creating the entire
+      // node structure including actions and router (regardless of whether router exists yet)
+      updatedNode = nodeConfig.fromFormData!(formData, updatedNode);
+    } else if (this.node.router) {
+      // Default router handling when no nodeConfig.fromFormData
+      updatedNode.router = { ...this.node.router };
+
+      // Apply form data to router fields if they exist
+      if (formData.result_name !== undefined) {
+        updatedNode.router.result_name = formData.result_name;
+      }
+
+      // Handle preconfigured rules from node config
+      if (nodeConfig?.router?.rules) {
+        // Build a complete new set of categories and exits based on node config
+        const existingCategories = updatedNode.router.categories || [];
+        const existingExits = updatedNode.exits || [];
+
+        const newCategories: any[] = [];
+        const newExits: any[] = [];
+
+        // Group rules by category name to handle multiple rules pointing to the same category
+        const categoryNameToRules = new Map<
+          string,
+          typeof nodeConfig.router.rules
+        >();
+        nodeConfig.router.rules.forEach((rule) => {
+          if (!categoryNameToRules.has(rule.categoryName)) {
+            categoryNameToRules.set(rule.categoryName, []);
+          }
+          categoryNameToRules.get(rule.categoryName)!.push(rule);
+        });
 
-        // Apply form data to router fields if they exist
-        if (formData.result_name !== undefined) {
-          updatedNode.router.result_name = formData.result_name;
-        }
+        // Create categories for all unique category names
+        categoryNameToRules.forEach((rules, categoryName) => {
+          // Check if category already exists to preserve its UUID and exit_uuid
+          const existingCategory = existingCategories.find(
+            (cat) => cat.name === categoryName
+          );
 
-        // Handle preconfigured rules from node config
-        if (nodeConfig?.router?.rules) {
-          // Build a complete new set of categories and exits based on node config
-          const existingCategories = updatedNode.router.categories || [];
-          const existingExits = updatedNode.exits || [];
-
-          const newCategories: any[] = [];
-          const newExits: any[] = [];
-
-          // Group rules by category name to handle multiple rules pointing to the same category
-          const categoryNameToRules = new Map<
-            string,
-            typeof nodeConfig.router.rules
-          >();
-          nodeConfig.router.rules.forEach((rule) => {
-            if (!categoryNameToRules.has(rule.categoryName)) {
-              categoryNameToRules.set(rule.categoryName, []);
+          if (existingCategory) {
+            // Preserve existing category and its associated exit
+            newCategories.push(existingCategory);
+            const associatedExit = existingExits.find(
+              (exit) => exit.uuid === existingCategory.exit_uuid
+            );
+            if (associatedExit) {
+              newExits.push(associatedExit);
             }
-            categoryNameToRules.get(rule.categoryName)!.push(rule);
-          });
+          } else {
+            // Create new category and exit
+            const categoryUuid = generateUUID();
+            const exitUuid = generateUUID();
+
+            newCategories.push({
+              uuid: categoryUuid,
+              name: categoryName,
+              exit_uuid: exitUuid
+            });
+
+            newExits.push({
+              uuid: exitUuid,
+              destination_uuid: null
+            });
+          }
+        });
+
+        // Add default category if specified
+        if (nodeConfig.router.defaultCategory) {
+          // Check if default category already exists in our new list
+          const existingDefault = newCategories.find(
+            (cat) => cat.name === nodeConfig.router.defaultCategory
+          );
 
-          // Create categories for all unique category names
-          categoryNameToRules.forEach((rules, categoryName) => {
-            // Check if category already exists to preserve its UUID and exit_uuid
-            const existingCategory = existingCategories.find(
-              (cat) => cat.name === categoryName
+          if (!existingDefault) {
+            // Check if it exists in the original categories
+            const originalDefault = existingCategories.find(
+              (cat) => cat.name === nodeConfig.router.defaultCategory
             );
 
-            if (existingCategory) {
-              // Preserve existing category and its associated exit
-              newCategories.push(existingCategory);
+            if (originalDefault) {
+              // Preserve existing default category and its exit
+              newCategories.push(originalDefault);
               const associatedExit = existingExits.find(
-                (exit) => exit.uuid === existingCategory.exit_uuid
+                (exit) => exit.uuid === originalDefault.exit_uuid
               );
               if (associatedExit) {
                 newExits.push(associatedExit);
               }
             } else {
-              // Create new category and exit
+              // Create new default category and exit
               const categoryUuid = generateUUID();
               const exitUuid = generateUUID();
 
               newCategories.push({
                 uuid: categoryUuid,
-                name: categoryName,
+                name: nodeConfig.router.defaultCategory,
                 exit_uuid: exitUuid
               });
 
@@ -836,53 +949,12 @@ export class NodeEditor extends RapidElement {
                 destination_uuid: null
               });
             }
-          });
-
-          // Add default category if specified
-          if (nodeConfig.router.defaultCategory) {
-            // Check if default category already exists in our new list
-            const existingDefault = newCategories.find(
-              (cat) => cat.name === nodeConfig.router.defaultCategory
-            );
-
-            if (!existingDefault) {
-              // Check if it exists in the original categories
-              const originalDefault = existingCategories.find(
-                (cat) => cat.name === nodeConfig.router.defaultCategory
-              );
-
-              if (originalDefault) {
-                // Preserve existing default category and its exit
-                newCategories.push(originalDefault);
-                const associatedExit = existingExits.find(
-                  (exit) => exit.uuid === originalDefault.exit_uuid
-                );
-                if (associatedExit) {
-                  newExits.push(associatedExit);
-                }
-              } else {
-                // Create new default category and exit
-                const categoryUuid = generateUUID();
-                const exitUuid = generateUUID();
-
-                newCategories.push({
-                  uuid: categoryUuid,
-                  name: nodeConfig.router.defaultCategory,
-                  exit_uuid: exitUuid
-                });
-
-                newExits.push({
-                  uuid: exitUuid,
-                  destination_uuid: null
-                });
-              }
-            }
           }
-
-          // Replace the entire categories and exits lists with our complete new sets
-          updatedNode.router.categories = newCategories;
-          updatedNode.exits = newExits;
         }
+
+        // Replace the entire categories and exits lists with our complete new sets
+        updatedNode.router.categories = newCategories;
+        updatedNode.exits = newExits;
       }
     } else {
       // If no router, just apply form data to node properties
@@ -901,7 +973,7 @@ export class NodeEditor extends RapidElement {
     return updatedNode;
   }
 
-  private formDataToAction(formData: any = this.formData): Action {
+  private formDataToAction(formData: FormData = this.formData): Action {
     if (!this.action) throw new Error('No action to update');
 
     // Use action config transformation if available
@@ -1009,23 +1081,31 @@ export class NodeEditor extends RapidElement {
     });
   }
 
-  private renderNewField(
-    fieldName: string,
-    config: FieldConfig,
-    value: any
-  ): TemplateResult {
-    // Check visibility condition
+  /**
+   * Helper method to check if a field is visible based on its conditions
+   */
+  private isFieldVisible(fieldName: string, config: FieldConfig): boolean {
     if (config.conditions?.visible) {
       try {
-        const isVisible = config.conditions.visible(this.formData);
-        if (!isVisible) {
-          return html``;
-        }
+        return config.conditions.visible(this.formData);
       } catch (error) {
         console.error(`Error checking visibility for ${fieldName}:`, error);
         // If there's an error, show the field by default
+        return true;
       }
     }
+    return true;
+  }
+
+  private renderNewField(
+    fieldName: string,
+    config: FieldConfig,
+    value: any
+  ): TemplateResult {
+    // Check visibility condition
+    if (!this.isFieldVisible(fieldName, config)) {
+      return html``;
+    }
 
     const errors = this.errors[fieldName] ? [this.errors[fieldName]] : [];
 
@@ -1049,6 +1129,43 @@ export class NodeEditor extends RapidElement {
     return fieldContent;
   }
 
+  private renderOptionalField(
+    fieldName: string,
+    config: FieldConfig,
+    value: any
+  ): TemplateResult {
+    // If the field has a value or has been revealed, show it
+    const hasValue = value && value.toString().trim() !== '';
+    const isRevealed = this.revealedOptionalFields.has(fieldName);
+
+    if (hasValue || isRevealed) {
+      // Render the field normally
+      return this.renderNewField(fieldName, config, value);
+    }
+
+    // Show the "Save as..." link
+    return html`
+      <div class="optional-field-link">
+        <a
+          href="#"
+          @click="${(e: Event) => {
+            e.preventDefault();
+            this.revealOptionalField(fieldName);
+          }}"
+        >
+          ${config.optionalLink}
+        </a>
+      </div>
+    `;
+  }
+
+  private revealOptionalField(fieldName: string): void {
+    this.revealedOptionalFields = new Set([
+      ...this.revealedOptionalFields,
+      fieldName
+    ]);
+  }
+
   private renderFieldContent(
     fieldName: string,
     config: FieldConfig,
@@ -1160,9 +1277,20 @@ export class NodeEditor extends RapidElement {
       case 'field':
         if (config.form![item.field] && !renderedFields.has(item.field)) {
           renderedFields.add(item.field);
+          const fieldConfig = config.form![item.field] as FieldConfig;
+
+          // Handle optional link fields
+          if (fieldConfig.optionalLink) {
+            return this.renderOptionalField(
+              item.field,
+              fieldConfig,
+              this.formData[item.field]
+            );
+          }
+
           return this.renderNewField(
             item.field,
-            config.form![item.field] as FieldConfig,
+            fieldConfig,
             this.formData[item.field]
           );
         }
@@ -1184,7 +1312,7 @@ export class NodeEditor extends RapidElement {
     config: ActionConfig | NodeConfig,
     renderedFields: Set<string>
   ): TemplateResult {
-    const { items, gap = '1rem' } = rowConfig;
+    const { items, gap = '1rem', label, helpText } = rowConfig;
 
     // Collect all fields from this row for width calculations
     const fieldsInRow = this.collectFieldsFromItems(items);
@@ -1192,26 +1320,77 @@ export class NodeEditor extends RapidElement {
       (fieldName) => config.form?.[fieldName]
     );
 
-    if (validFields.length === 0) {
+    // Filter for visible fields only to handle conditional visibility
+    const visibleFields = validFields.filter((fieldName) => {
+      const fieldConfig = config.form![fieldName];
+      return this.isFieldVisible(fieldName, fieldConfig);
+    });
+
+    if (visibleFields.length === 0) {
       return html``;
     }
 
-    // Calculate grid template columns based on field maxWidth constraints
-    const columns = validFields.map((fieldName) => {
+    // Build a map of field flex styles
+    // Fields with maxWidth get flex: 0 0 {maxWidth} (fixed)
+    // Fields without maxWidth get flex: 1 1 0 (grow to fill space)
+    const fieldFlexStyles = new Map<string, string>();
+    visibleFields.forEach((fieldName) => {
       const fieldConfig = config.form![fieldName];
-      return fieldConfig.maxWidth || '1fr';
+      if (fieldConfig.maxWidth) {
+        // Fixed width field: no grow, no shrink, basis = maxWidth
+        fieldFlexStyles.set(fieldName, `flex: 0 0 ${fieldConfig.maxWidth};`);
+      } else {
+        // Flexible field: grow to fill remaining space
+        fieldFlexStyles.set(fieldName, `flex: 1 1 0;`);
+      }
     });
 
+    const rowContent = html`
+      <div class="form-row" style="display: flex; gap: ${gap};">
+        ${items.map((item) => {
+          // Get the field name from the item
+          const fieldName =
+            typeof item === 'string'
+              ? item
+              : item.type === 'field'
+              ? item.field
+              : null;
+
+          // Get flex style for this field if it's a visible field
+          const flexStyle =
+            fieldName && fieldFlexStyles.has(fieldName)
+              ? fieldFlexStyles.get(fieldName)
+              : '';
+
+          const itemContent = this.renderLayoutItem(
+            item,
+            config,
+            renderedFields
+          );
+
+          // Wrap in a div with flex style if we have a flex style
+          return flexStyle
+            ? html`<div style="${flexStyle}">${itemContent}</div>`
+            : itemContent;
+        })}
+      </div>
+    `;
+
+    // If no label or helpText, return just the row content
+    if (!label && !helpText) {
+      return rowContent;
+    }
+
+    // Otherwise, wrap with label on top, content, then helpText below (matching field pattern)
     return html`
-      <div
-        class="form-row"
-        style="display: grid; grid-template-columns: ${columns.join(
-          ' '
-        )}; gap: ${gap};"
-      >
-        ${items.map((item) =>
-          this.renderLayoutItem(item, config, renderedFields)
-        )}
+      <div class="form-row-wrapper">
+        ${label ? html`<label class="form-row-label">${label}</label>` : ''}
+        ${rowContent}
+        ${helpText
+          ? html`<div class="form-row-help">
+              ${renderMarkdownInline(helpText)}
+            </div>`
+          : ''}
       </div>
     `;
   }