@nyaruka/temba-components 0.129.6 → 0.129.8

package/test-assets/style.css

@@ -60,6 +60,8 @@ html {
   --error-rgb: 255, 99, 71;
   --success-rgb: 102, 186, 104;
 
+  --color-label: #333;
+
   --selection-light-rgb: 240, 240, 240;
   --selection-dark-rgb: 180, 180, 180;
 

package/web-dev-mock.mjs

@@ -0,0 +1,433 @@
+import { Client as MinioClient } from 'minio';
+import busboy from 'busboy';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * Generates FlowInfo dynamically from a FlowDefinition
+ * This is a plain JavaScript version that can be imported by the web-dev-server
+ */
+export function generateFlowInfo(definition) {
+  const dependencies = [];
+  const results = [];
+  const locals = [];
+
+  // Track unique dependencies by key/uuid to avoid duplicates
+  const dependencyMap = new Map();
+  // Track results by name to collect node_uuids
+  const resultMap = new Map();
+
+  // Process all nodes
+  definition.nodes.forEach((node) => {
+    // Process actions
+    node.actions.forEach((action) => {
+      extractDependenciesFromAction(action, dependencyMap, resultMap, node.uuid);
+    });
+
+    // Process router
+    if (node.router) {
+      extractDependenciesFromRouter(
+        node.router,
+        dependencyMap,
+        resultMap,
+        node.uuid
+      );
+    }
+  });
+
+  // Extract unique dependencies from map
+  dependencies.push(...Array.from(dependencyMap.values()));
+
+  // Extract results from map
+  results.push(...Array.from(resultMap.values()));
+
+  // Count languages from localization
+  const languageCount = Object.keys(definition.localization || {}).length;
+
+  return {
+    results,
+    dependencies,
+    counts: {
+      nodes: definition.nodes.length,
+      languages: languageCount
+    },
+    locals
+  };
+}
+
+function extractDependenciesFromAction(action, dependencyMap, resultMap, nodeUuid) {
+  switch (action.type) {
+    case 'set_contact_field':
+      if (action.field?.name) {
+        const key = `field:${action.field.name}`;
+        dependencyMap.set(key, {
+          uuid: action.field.uuid || '',
+          name: action.field.name,
+          type: 'field'
+        });
+      }
+      break;
+
+    case 'call_webhook':
+      if (action.url) {
+        const key = `webhook:${action.url}`;
+        dependencyMap.set(key, {
+          uuid: action.uuid,
+          name: action.url,
+          type: 'webhook'
+        });
+      }
+      break;
+
+    case 'add_contact_groups':
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      break;
+
+    case 'remove_contact_groups':
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      break;
+
+    case 'set_contact_channel':
+      if (action.channel?.name) {
+        const key = `channel:${action.channel.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.channel.uuid,
+          name: action.channel.name,
+          type: 'channel'
+        });
+      }
+      break;
+
+    case 'send_broadcast':
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      action.contacts?.forEach((contact) => {
+        if (contact.name) {
+          const key = `contact:${contact.uuid}`;
+          dependencyMap.set(key, {
+            uuid: contact.uuid,
+            name: contact.name,
+            type: 'contact'
+          });
+        }
+      });
+      break;
+
+    case 'enter_flow':
+      if (action.flow?.name) {
+        const key = `flow:${action.flow.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.flow.uuid,
+          name: action.flow.name,
+          type: 'flow'
+        });
+      }
+      break;
+
+    case 'start_session':
+      if (action.flow?.name) {
+        const key = `flow:${action.flow.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.flow.uuid,
+          name: action.flow.name,
+          type: 'flow'
+        });
+      }
+      action.groups?.forEach((group) => {
+        if (group.name) {
+          const key = `group:${group.uuid || group.name}`;
+          dependencyMap.set(key, {
+            uuid: group.uuid || '',
+            name: group.name,
+            type: 'group'
+          });
+        }
+      });
+      break;
+
+    case 'call_classifier':
+      if (action.classifier?.name) {
+        const key = `classifier:${action.classifier.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.classifier.uuid,
+          name: action.classifier.name,
+          type: 'classifier'
+        });
+      }
+      break;
+
+    case 'call_resthook':
+      if (action.resthook) {
+        const key = `resthook:${action.resthook}`;
+        dependencyMap.set(key, {
+          uuid: action.uuid,
+          name: action.resthook,
+          type: 'resthook'
+        });
+      }
+      break;
+
+    case 'call_llm':
+      if (action.llm?.name) {
+        const key = `llm:${action.llm.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.llm.uuid,
+          name: action.llm.name,
+          type: 'llm'
+        });
+      }
+      break;
+
+    case 'open_ticket':
+      if (action.assignee?.name) {
+        const key = `user:${action.assignee.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.assignee.uuid,
+          name: action.assignee.name,
+          type: 'user'
+        });
+      }
+      if (action.topic?.name) {
+        const key = `topic:${action.topic.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.topic.uuid,
+          name: action.topic.name,
+          type: 'topic'
+        });
+      }
+      break;
+
+    case 'request_optin':
+      if (action.optin?.name) {
+        const key = `optin:${action.optin.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.optin.uuid,
+          name: action.optin.name,
+          type: 'optin'
+        });
+      }
+      break;
+
+    case 'add_input_labels':
+      action.labels?.forEach((label) => {
+        if (label.name) {
+          const key = `label:${label.uuid}`;
+          dependencyMap.set(key, {
+            uuid: label.uuid,
+            name: label.name,
+            type: 'label'
+          });
+        }
+      });
+      break;
+
+    case 'send_msg':
+      if (action.template?.name) {
+        const key = `template:${action.template.uuid}`;
+        dependencyMap.set(key, {
+          uuid: action.template.uuid,
+          name: action.template.name,
+          type: 'template'
+        });
+      }
+      break;
+
+    case 'set_run_result':
+      if (action.name) {
+        const existingResult = resultMap.get(action.name);
+        if (existingResult) {
+          // Add this node to existing result if not already present
+          if (!existingResult.node_uuids.includes(nodeUuid)) {
+            existingResult.node_uuids.push(nodeUuid);
+          }
+          // Add category if specified and not already present
+          if (action.category && !existingResult.categories.includes(action.category)) {
+            existingResult.categories.push(action.category);
+          }
+        } else {
+          // Create new result
+          resultMap.set(action.name, {
+            key: action.name.toLowerCase(),
+            name: action.name,
+            categories: action.category ? [action.category] : [],
+            node_uuids: [nodeUuid]
+          });
+        }
+      }
+      break;
+  }
+}
+
+function extractDependenciesFromRouter(router, dependencyMap, resultMap, nodeUuid) {
+  // Extract result information
+  if (router.result_name && router.categories) {
+    const existingResult = resultMap.get(router.result_name);
+    if (existingResult) {
+      // Add this node to existing result
+      existingResult.node_uuids.push(nodeUuid);
+    } else {
+      // Create new result
+      const result = {
+        key: router.result_name,
+        name: router.result_name,
+        categories: router.categories.map((cat) => cat.name),
+        node_uuids: [nodeUuid]
+      };
+      resultMap.set(router.result_name, result);
+    }
+  }
+
+  // Process cases for potential dependencies
+  router.cases?.forEach((case_) => {
+    if (case_.type === 'has_group' && case_.arguments?.length >= 2) {
+      // Group dependency from split_by_groups
+      const groupUuid = case_.arguments[0];
+      const groupName = case_.arguments[1];
+      if (groupName) {
+        const key = `group:${groupUuid}`;
+        dependencyMap.set(key, {
+          uuid: groupUuid,
+          name: groupName,
+          type: 'group'
+        });
+      }
+    }
+  });
+}
+
+// Initialize Minio client for file uploads
+export const minioClient = new MinioClient({
+  endPoint: 'minio',
+  port: 9000,
+  useSSL: false,
+  accessKey: 'root',
+  secretKey: 'tembatemba'
+});
+
+// Helper function to generate the correct public URL for uploaded files
+export function getPublicUrl(bucketName, fileName, request) {
+  // Check if request is coming from localhost/127.0.0.1 (host machine)
+  // or from within docker network
+  const host = request.headers.host;
+  const userAgent = request.headers['user-agent'] || '';
+  
+  // If accessing from host machine (localhost:3010), use localhost for minio too
+  if (host && host.startsWith('localhost:')) {
+    return `http://localhost:9000/${bucketName}/${fileName}`;
+  }
+  
+  // If accessing from docker network, use internal hostname
+  return `http://minio:9000/${bucketName}/${fileName}`;
+}
+
+// Handle minio file uploads for media
+export function handleMinioUpload(context) {
+  return new Promise((resolve) => {
+    try {
+      const bb = busboy({ headers: context.request.headers });
+      let fileInfo = null;
+      let fileBuffer = null;
+      
+      bb.on('file', (name, file, info) => {
+        fileInfo = info;
+        const chunks = [];
+        
+        file.on('data', (chunk) => {
+          chunks.push(chunk);
+        });
+        
+        file.on('end', () => {
+          fileBuffer = Buffer.concat(chunks);
+        });
+      });
+      
+      bb.on('finish', async () => {
+        if (!fileBuffer || !fileInfo) {
+          context.status = 400;
+          context.body = JSON.stringify({ error: 'No file uploaded' });
+          resolve();
+          return;
+        }
+        
+        try {
+          const fileUuid = uuidv4();
+          const fileName = `${fileUuid}-${fileInfo.filename}`;
+          const bucketName = 'temba-attachments';
+          
+          // Upload to minio
+          await minioClient.putObject(bucketName, fileName, fileBuffer, {
+            'Content-Type': fileInfo.mimeType
+          });
+          
+          // Return success response with appropriate URL based on request source
+          const publicUrl = getPublicUrl(bucketName, fileName, context.request);
+          
+          // Debug logging
+          console.log('🔧 Upload Debug:', {
+            fileUuid,
+            fileName,
+            bucketName,
+            publicUrl,
+            contentType: fileInfo.mimeType,
+            host: context.request.headers.host
+          });
+          
+          context.contentType = 'application/json';
+          context.body = JSON.stringify({
+            uuid: fileUuid,
+            content_type: fileInfo.mimeType,
+            url: publicUrl,
+            filename: fileInfo.filename,
+            size: fileBuffer.length
+          });
+          
+        } catch (uploadError) {
+          console.error('Minio upload error:', uploadError);
+          context.status = 500;
+          context.body = JSON.stringify({ 
+            error: 'Upload failed',
+            details: uploadError.message 
+          });
+        }
+        
+        resolve();
+      });
+      
+      context.req.pipe(bb);
+      
+    } catch (error) {
+      console.error('File upload processing error:', error);
+      context.status = 500;
+      context.body = JSON.stringify({ 
+        error: 'Upload processing failed',
+        details: error.message 
+      });
+      resolve();
+    }
+  });
+}

package/web-dev-server.config.mjs

@@ -3,14 +3,26 @@ import { fromRollup } from '@web/dev-server-rollup';
 import fs from 'fs';
 import path from 'path';
 
+// Import the shared flow info generator and Minio functionality
+import { generateFlowInfo, handleMinioUpload } from './web-dev-mock.mjs';
+
 const replacePlugin = fromRollup(replace);
 
+// Simple wrapper function to use the shared flow info generator
+function generateFlowMetadata(flowDefinition) {
+  return generateFlowInfo(flowDefinition);
+}
+
 export default {
   nodeResolve: true,
   plugins: [
     replacePlugin({
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('development'),
+      'process.env.MINIO_ENDPOINT': JSON.stringify('http://minio:9000'),
+      'process.env.MINIO_PUBLIC_ENDPOINT': JSON.stringify('http://localhost:9000'),
+      'process.env.MINIO_ACCESS_KEY': JSON.stringify('root'),
+      'process.env.MINIO_SECRET_KEY': JSON.stringify('tembatemba'),
     }),
     {
       name: 'api-mock-server',
@@ -22,7 +34,7 @@ export default {
             '/api/v2/groups.json': './static/api/groups.json',
             '/api/v2/fields.json': './static/api/fields.json', 
             '/api/v2/globals.json': './static/api/globals.json',
-            '/api/v2/completion.json': './static/api/completion.json',
+            '/api/v2/completion.json': './static/mr/docs/en-us/editor.json',
             '/api/v2/functions.json': './static/api/functions.json',
             '/api/internal/templates.json': './static/api/templates.json',
             '/api/v2/media.json': './static/api/media.json',
@@ -44,6 +56,31 @@ export default {
             return;
           }
         }
+
+        // Handle minio file uploads for media
+        if (context.request.method === 'POST' && context.path === '/api/v2/media.json') {
+          return handleMinioUpload(context);
+        }
+      }
+    },
+    {
+      name: 'flows-directory-listing',
+      serve(context) {
+        // Handle directory listing for flows using a special API endpoint
+
+        if (context.request.method === 'GET' && context.path === '/api/flows-list') {
+
+          const flowsDir = path.resolve('./demo/data/flows');
+          
+          if (fs.existsSync(flowsDir)) {
+            const files = fs.readdirSync(flowsDir).filter(file => file.endsWith('.json'));
+
+            // Return JSON array of filenames
+            context.contentType = 'application/json';
+            context.body = JSON.stringify(files);
+            return;
+          }
+        }
       }
     },
     {
@@ -60,15 +97,31 @@ export default {
             context.req.on('end', () => {
               context.contentType = 'application/json';
               if (body) {
+                const flowDefinition = JSON.parse(body);
                 fs.writeFileSync(
                   path.resolve(`./demo/data/flows/${uuid}.json`),
-                  JSON.stringify({ definition: JSON.parse(body) }, null, 2)
+                  JSON.stringify({ definition: flowDefinition }, null, 2)
                 );
-                // console.log(`Flow ${uuid} saved successfully.`);
+                
+                // Generate metadata similar to production
+                const metadata = generateFlowMetadata(flowDefinition);
+                
                 context.body = {
                   status: 'success',
-                  message: `Flow ${uuid} saved successfully.`,
-                  definition: JSON.parse(body),
+                  saved_on: new Date().toISOString(),
+                  revision: {
+                    id: Math.floor(Math.random() * 1000) + 1,
+                    user: {
+                      email: 'test@textit.com',
+                      name: 'Test User'
+                    },
+                    created_on: new Date().toISOString(),
+                    version: flowDefinition.spec_version || '14.3.0',
+                    revision: flowDefinition.revision || 1
+                  },
+                  info: metadata,
+                  issues: [],
+                  metadata: metadata
                 };
                 context.status = 200;
               } else {
@@ -88,10 +141,22 @@ export default {
           const parts = context.path.split('/');
           const uuid = parts[3];
           context.contentType = 'application/json';
-          context.body = fs.readFileSync(
+          
+          // Read the flow definition from file
+          const flowFileContent = fs.readFileSync(
             path.resolve(`./demo/data/flows/${uuid}.json`),
             'utf-8',
           );
+          
+          const flowData = JSON.parse(flowFileContent);
+          
+          if (flowData.definition) {
+            const info = generateFlowMetadata(flowData.definition);
+            context.body = JSON.stringify({
+              definition: flowData.definition,
+              info: info
+            });
+          }
         }
       }
     }

package/web-test-runner.config.mjs

@@ -13,6 +13,7 @@ import rimraf from 'rimraf';
 
 import replace from '@rollup/plugin-replace';
 import { fromRollup } from '@web/dev-server-rollup';
+
 const replacePlugin = fromRollup(replace);
 
 const SCREENSHOTS = 'screenshots';
@@ -151,10 +152,14 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
         const truthFile = await getPath(TRUTH, filename);
 
         // Only wait for network idle if explicitly requested
-        if (wait) {
-          await page.waitForNetworkIdle();
-        } else {
-          await page.waitForNetworkIdle({ idleTime: 100, timeout: 1000 });
+        try{
+          if (wait) {
+            await page.waitForNetworkIdle({idleTime: 500, timeout: 2000});
+          } else {
+            await page.waitForNetworkIdle({ idleTime: 100, timeout: 1000 });
+          }
+        } catch (error) {
+          console.error('Error waiting for network idle, proceeding: ' + filename);
         }
 
         if (!(await fileExists(truthFile))) {