@capillarytech/cap-ui-dev-tools 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-dev-tools",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Development tools for Capillary UI projects including webpack hot-reload plugin and CapVision session recording",
   "main": "src/index.js",
   "exports": {

package/src/capvision-recorder/core/ReportEnhancer.js

@@ -155,6 +155,109 @@ class ReportEnhancer {
     }
   }
 
+  /**
+   * Generate logo HTML header with toggle button
+   * @private
+   * @returns {string} Logo HTML
+   */
+  generateLogoHTML() {
+    // Load PNG logo from assets folder and convert to base64
+    let logoImage = '';
+    try {
+      const logoPath = path.join(__dirname, '../assets/CapVisionIcon.png');
+      if (fs.existsSync(logoPath)) {
+        const imageBuffer = fs.readFileSync(logoPath);
+        const base64Image = imageBuffer.toString('base64');
+        logoImage = `<img src="data:image/png;base64,${base64Image}" alt="CapVision Logo" style="display: inline-block; vertical-align: middle; height: 80px; width: auto;" />`;
+      } else {
+        console.warn('⚠️ CapVisionIcon.png not found, using fallback');
+        logoImage = '<span style="color: #007bff; font-weight: bold;">CapVision</span>';
+      }
+    } catch (error) {
+      console.warn('⚠️ Failed to load CapVisionIcon.png:', error.message);
+      logoImage = '<span style="color: #007bff; font-weight: bold;">CapVision</span>';
+    }
+
+    return `
+                    <tr class="recording-logo-header">
+                        <td colspan="2">
+                            <div style="padding: 20px 15px; display: flex; justify-content: space-between; align-items: center;">
+                                <span id="capvision-toggle-wrapper" 
+                                      onclick="toggleCapVisionRecordings()" 
+                                      style="cursor: pointer; padding: 10px; user-select: none; background-color: none; border-radius: 3px; display: inline-block; flex: 1; max-width: calc(100% - 150px); margin-right: 20px;">
+                                    <span id="capvision-toggle-icon" class="collapsed" style="font-size: 20px; display: inline-block;"></span>
+                                </span>
+                                <div style="text-align: right;">
+                                    ${logoImage}
+                                </div>
+                            </div>
+                        </td>
+                    </tr>`;
+  }
+
+  /**
+   * Generate wrapper HTML for recordings (table structure)
+   * @private
+   * @param {string} logoHTML - Logo HTML
+   * @param {string} recordingPlayersHTML - Recording players HTML
+   * @returns {string} Wrapped HTML
+   */
+  generateRecordingsWrapper(logoHTML, recordingPlayersHTML) {
+    return `
+<table class="table table-bordered" style="margin-top: 20px;">
+<thead style="background: rgb(0, 70, 255, 0.2);">
+${logoHTML}
+</thead>
+<tbody id="capvision-recordings-container" class="collapsed" style="display: table-row-group;">
+${recordingPlayersHTML}
+</tbody>
+</table>
+<style>
+  #capvision-recordings-container {
+    transition: opacity 0.3s ease-in-out;
+  }
+  #capvision-recordings-container.collapsed {
+    display: none !important;
+  }
+  #capvision-toggle-wrapper {
+    transition: background-color 0.2s ease;
+  }
+  #capvision-toggle-wrapper:hover {
+    background-color: none;
+  }
+  #capvision-toggle-wrapper:hover #capvision-toggle-icon {
+    color: #333;
+  }
+  #capvision-toggle-icon {
+    display: inline-block;
+  }
+  #capvision-toggle-icon::before {
+    font-family: "Glyphicons Halflings", "Font Awesome", Arial, sans-serif;
+    color: #333;
+  }
+  #capvision-toggle-icon.collapsed::before {
+    content: "\\e113";
+  }
+  #capvision-toggle-icon:not(.collapsed)::before {
+    content: "\\e114";
+  }
+</style>
+<script>
+  function toggleCapVisionRecordings() {
+    const container = document.getElementById('capvision-recordings-container');
+    const toggleIcon = document.getElementById('capvision-toggle-icon');
+    
+    if (container.classList.contains('collapsed')) {
+      container.classList.remove('collapsed');
+      toggleIcon.classList.remove('collapsed');
+    } else {
+      container.classList.add('collapsed');
+      toggleIcon.classList.add('collapsed');
+    }
+  }
+</script>`;
+  }
+
   /**
    * Add inline recording players to HTML content
    * @private
@@ -167,17 +270,60 @@ class ReportEnhancer {
       return htmlContent;
     }
 
-    const testHeaderRegex = /(<tr class="test-header">[\s\S]*?<\/tr>)/;
+    // Find table with class "table table-bordered table-suite"
+    const tableSuiteRegex = /<table[^>]*class=["'][^"']*table[^"']*table-bordered[^"']*table-suite[^"']*["'][^>]*>/i;
+    const match = htmlContent.match(tableSuiteRegex);
+
+    if (!match) {
+      // Table not found, return original content
+      return htmlContent;
+    }
+
+    const tableStartIndex = match.index;
+    const tableStartTag = match[0];
+
+    // Find the matching closing </table> tag for this table
+    // We need to account for nested tables
+    let depth = 1;
+    let searchIndex = tableStartIndex + tableStartTag.length;
+    let closingTableIndex = -1;
+
+    while (searchIndex < htmlContent.length && depth > 0) {
+      const nextOpen = htmlContent.indexOf('<table', searchIndex);
+      const nextClose = htmlContent.indexOf('</table>', searchIndex);
+
+      if (nextClose === -1) {
+        break; // No closing tag found
+      }
+
+      if (nextOpen !== -1 && nextOpen < nextClose) {
+        depth++;
+        searchIndex = nextOpen + 6;
+      } else {
+        depth--;
+        if (depth === 0) {
+          closingTableIndex = nextClose;
+          break;
+        }
+        searchIndex = nextClose + 8;
+      }
+    }
+
+    if (closingTableIndex === -1) {
+      // If we can't find matching closing tag, return original content
+      return htmlContent;
+    }
 
-    return htmlContent.replace(testHeaderRegex, (match) => {
-      const recordingPlayersHTML = recordings.map((recording, index) => {
-        const testName = recording.data.testName || 'Unknown Test';
-        const recordingNumber = recording.data.recordingNumber || (index + 1);
-        const displayName = recording.data.testName
-          ? `${testName} (Recording #${recordingNumber})`
-          : recording.filename;
+    // Generate logo and players HTML
+    const logoHTML = this.generateLogoHTML();
+    const recordingPlayersHTML = recordings.map((recording, index) => {
+      const testName = recording.data.testName || 'Unknown Test';
+      const recordingNumber = recording.data.recordingNumber || (index + 1);
+      const displayName = recording.data.testName
+        ? `${testName} (Recording #${recordingNumber})`
+        : recording.filename;
 
-        return `
+      return `
                     <tr class="test-row recording">
                         <td colspan="2">
                             <div class="recordingWrapper" style="padding: 15px; background: #f8f9fa; margin: 10px 0;">
@@ -195,10 +341,15 @@ class ReportEnhancer {
                             </div>
                         </td>
                     </tr>`;
-      }).join('');
+    }).join('');
+
+    // Wrap logo and players in a new table and inject after the closing </table> tag
+    const recordingsWrapper = this.generateRecordingsWrapper(logoHTML, recordingPlayersHTML);
+    const insertPosition = closingTableIndex + 8; // 8 = length of '</table>'
 
-      return match + recordingPlayersHTML;
-    });
+    return htmlContent.substring(0, insertPosition) +
+      recordingsWrapper +
+      htmlContent.substring(insertPosition);
   }
 
   /**
@@ -441,7 +592,7 @@ class ReportEnhancer {
       // Add player scripts and CSS
       const capVisionPlayerHTML = this.generateCapVisionPlayerHTML(recordings);
       const bodyEndIndex = htmlContent.lastIndexOf('</body>');
-      
+
       if (bodyEndIndex === -1) {
         console.log('🟡 Could not find </body> tag, appending to end');
         htmlContent += capVisionPlayerHTML;