@salesforcedevs/docs-components 1.17.0-hack-alpha5 → 1.17.0-hack-alpha7

package/src/modules/doc/commentPopup/commentDevHelper.ts

@@ -9,7 +9,10 @@ import {
     clearAllComments,
     getCommentsStats,
     convertToApiFormat,
-    addComment
+    addComment,
+    getCommentsForBranch,
+    fetchCommentsForBranch,
+    extractCommentsFromApiResponse
 } from "./commentUtils";
 
 // Make functions available globally for console access
@@ -21,7 +24,11 @@ if (typeof window !== "undefined") {
         clearAllComments,
         getCommentsStats,
         convertToApiFormat,
-        addComment
+        addComment,
+        getCommentsForBranch,
+        fetchCommentsForBranch,
+        extractCommentsFromApiResponse,
+        checkApiAvailability
     };
 }
 
@@ -44,7 +51,7 @@ export function createDevUI(): void {
         position: fixed;
         top: 20px;
         right: 20px;
-        width: 300px;
+        width: 350px;
         background: white;
         border: 2px solid #007bff;
         border-radius: 8px;
@@ -53,6 +60,8 @@ export function createDevUI(): void {
         font-size: 14px;
         z-index: 10000;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        max-height: 80vh;
+        overflow-y: auto;
     `;
 
     const stats = getCommentsStats();
@@ -65,6 +74,7 @@ export function createDevUI(): void {
         
         <div style="margin-bottom: 12px;">
             <strong>Stats:</strong><br>
+            Branches: ${stats.branches.length}<br>
             Locations: ${stats.totalLocations}<br>
             Total Comments: ${stats.totalComments}
         </div>
@@ -85,6 +95,14 @@ export function createDevUI(): void {
             <button onclick="console.log(CommentDevHelper.convertToApiFormat())" style="padding: 8px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;">
                 Show API Format in Console
             </button>
+            
+            <button onclick="CommentDevHelper.addSampleCommentsForNewApi()" style="padding: 8px; background: #fd7e14; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Add Sample Comments (New API Format)
+            </button>
+            
+            <button onclick="CommentDevHelper.testApiResponseFormat()" style="padding: 8px; background: #20c997; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Test API Response Format
+            </button>
         </div>
         
         <div style="margin-top: 12px; font-size: 12px; color: #666;">
@@ -92,7 +110,9 @@ export function createDevUI(): void {
             CommentDevHelper.exportCommentsToFile()<br>
             CommentDevHelper.clearAllComments()<br>
             CommentDevHelper.getCommentsStats()<br>
-            CommentDevHelper.convertToApiFormat()
+            CommentDevHelper.convertToApiFormat()<br>
+            CommentDevHelper.getCommentsForBranch('main')<br>
+            CommentDevHelper.testApiResponseFormat()
         </div>
     `;
 
@@ -110,24 +130,134 @@ export function removeDevUI(): void {
 }
 
 /**
- * Add a sample comment for testing
+ * Add sample comments that match the new API format
  */
-export function addSampleComment(): void {
-    const samplePayload = {
-        branch: "feature/documentation-updates",
-        file_path: "docs/installation.md",
-        heading_title: "Installation Guide",
-        start_line: "10",
-        end_line: "25",
-        comment: {
-            comment_text: "This is a sample comment for testing purposes.",
-            email: "test@example.com",
-            timestamp: new Date().toISOString()
+export function addSampleCommentsForNewApi(): void {
+    const sampleComments = [
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/installation.md",
+            heading_title: "Installation Guide",
+            start_line: "1",
+            end_line: "50",
+            comment: {
+                comment_text:
+                    "This installation guide is very helpful for new users.",
+                email: "john.doe@example.com",
+                timestamp: new Date(Date.now() - 3600000).toISOString() // 1 hour ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/installation.md",
+            heading_title: "Installation Guide",
+            start_line: "1",
+            end_line: "50",
+            comment: {
+                comment_text:
+                    "Consider adding troubleshooting section for common issues.",
+                email: "jane.smith@example.com",
+                timestamp: new Date(Date.now() - 1800000).toISOString() // 30 minutes ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/installation.md",
+            heading_title: "Prerequisites",
+            start_line: "10",
+            end_line: "25",
+            comment: {
+                comment_text:
+                    "The prerequisites section is clear and well-organized.",
+                email: "mike.wilson@example.com",
+                timestamp: new Date(Date.now() - 900000).toISOString() // 15 minutes ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/api.md",
+            heading_title: "API Reference",
+            start_line: "1",
+            end_line: "100",
+            comment: {
+                comment_text:
+                    "The API documentation needs more examples for authentication.",
+                email: "sarah.jones@example.com",
+                timestamp: new Date(Date.now() - 600000).toISOString() // 10 minutes ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/api.md",
+            heading_title: "API Reference",
+            start_line: "1",
+            end_line: "100",
+            comment: {
+                comment_text: "Great work on the endpoint descriptions!",
+                email: "david.brown@example.com",
+                timestamp: new Date().toISOString() // now
+            }
+        },
+        {
+            branch: "main",
+            file_path: "docs/getting-started.md",
+            heading_title: "Quick Start",
+            start_line: "1",
+            end_line: "30",
+            comment: {
+                comment_text:
+                    "This quick start guide is perfect for beginners.",
+                email: "alice.johnson@example.com",
+                timestamp: new Date(Date.now() - 7200000).toISOString() // 2 hours ago
+            }
         }
-    };
+    ];
+
+    sampleComments.forEach((comment) => {
+        addComment(comment);
+    });
 
-    addComment(samplePayload);
-    console.log("Sample comment added:", samplePayload);
+    console.log("Added sample comments for new API format");
+    console.log("Sample data includes multiple branches, files, and titles");
+
+    // Refresh the page to show the new comments
+    setTimeout(() => {
+        window.location.reload();
+    }, 1000);
+}
+
+/**
+ * Test the API response format
+ */
+export function testApiResponseFormat(): void {
+    console.log("=== Testing API Response Format ===");
+
+    // Test with feature/documentation-updates branch
+    const featureBranchResponse = getCommentsForBranch(
+        "feature/documentation-updates"
+    );
+    console.log("Feature branch response:", featureBranchResponse);
+
+    // Test with main branch
+    const mainBranchResponse = getCommentsForBranch("main");
+    console.log("Main branch response:", mainBranchResponse);
+
+    // Test extracting specific comments
+    const installationComments = extractCommentsFromApiResponse(
+        featureBranchResponse,
+        "docs/installation.md",
+        "Installation Guide"
+    );
+    console.log("Installation Guide comments:", installationComments);
+
+    const apiComments = extractCommentsFromApiResponse(
+        featureBranchResponse,
+        "docs/api.md",
+        "API Reference"
+    );
+    console.log("API Reference comments:", apiComments);
+
+    console.log("=== API Response Format Test Complete ===");
 }
 
 /**
@@ -141,6 +271,104 @@ export function showAllComments(): void {
     const stats = getCommentsStats();
     console.log("=== STATISTICS ===");
     console.table(stats.locations);
+
+    console.log("=== BRANCHES ===");
+    console.log("Available branches:", stats.branches);
+}
+
+/**
+ * Simulate API call and show response
+ */
+export async function simulateApiCall(
+    branch: string = "feature/documentation-updates"
+): Promise<void> {
+    console.log(`=== Simulating API Call for branch: ${branch} ===`);
+
+    try {
+        const response = await fetchCommentsForBranch(branch);
+        console.log("API Response:", response);
+
+        // Show all paths and titles
+        response.paths.forEach((path) => {
+            console.log(`File: ${path.path}`);
+            path.titles.forEach((title) => {
+                console.log(
+                    `  Title: ${title.title} (${title.comments.length} comments)`
+                );
+            });
+        });
+    } catch (error) {
+        console.error("API call simulation failed:", error);
+    }
+}
+
+/**
+ * Check if the API endpoints are available
+ */
+export async function checkApiAvailability(): Promise<void> {
+    console.log("=== Checking API Availability ===");
+
+    try {
+        // Test GET endpoint
+        const getResponse = await fetch("/get-comments?branch=test");
+        console.log(
+            `GET /get-comments status: ${getResponse.status} ${getResponse.statusText}`
+        );
+
+        if (getResponse.ok) {
+            console.log("✅ GET /get-comments is available");
+        } else {
+            console.log("❌ GET /get-comments is not available");
+        }
+
+        // Test POST endpoint (with a test payload)
+        const testPayload = {
+            branch: "test",
+            file_path: "test.md",
+            heading_title: "Test",
+            start_line: "1",
+            end_line: "10",
+            comment: {
+                comment_text: "Test comment",
+                email: "test@example.com",
+                timestamp: new Date().toISOString()
+            }
+        };
+
+        const postResponse = await fetch("/post-comment", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(testPayload)
+        });
+
+        console.log(
+            `POST /post-comment status: ${postResponse.status} ${postResponse.statusText}`
+        );
+
+        if (postResponse.ok) {
+            console.log("✅ POST /post-comment is available");
+        } else {
+            console.log("❌ POST /post-comment is not available");
+        }
+
+        console.log("=== API Availability Check Complete ===");
+    } catch (error) {
+        console.error("❌ API availability check failed:", error);
+        console.log("This is expected if the backend is not running");
+    }
+}
+
+// Add the helper functions to the global CommentDevHelper
+if (typeof window !== "undefined") {
+    (window as any).CommentDevHelper = {
+        ...(window as any).CommentDevHelper,
+        addSampleCommentsForNewApi,
+        testApiResponseFormat,
+        showAllComments,
+        simulateApiCall
+    };
 }
 
 // Auto-create UI when this module is imported (in development)