From 0b34be01b1d3a2ab4c03cb1d13627db2f5a483d3 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Fri, 14 Nov 2025 13:57:25 +0000
Subject: [PATCH] Fix duplicate HTML IDs causing protocol address auto-fill
 issues

---
 src/dashboard/templates.py              |  10 +-
 static/test_protocol_address_debug.html | 139 ++++++++++++++++++
 static/test_protocol_address_fix.html   | 179 ++++++++++++++++++++++++
 3 files changed, 323 insertions(+), 5 deletions(-)
 create mode 100644 static/test_protocol_address_debug.html
 create mode 100644 static/test_protocol_address_fix.html
diff --git a/src/dashboard/templates.py b/src/dashboard/templates.py
index 3925be0..cd2e0d6 100644
--- a/src/dashboard/templates.py
+++ b/src/dashboard/templates.py
@@ -800,13 +800,13 @@ DASHBOARD_HTML = """
                                 <small style="color: #666;">Data types will be loaded from tag metadata system</small>
                             </div>
                             <div class="form-group">
-                                <label for="protocol_address">Protocol Address:</label>
-                                <input type="text" id="protocol_address" name="protocol_address" required>
-                                <small id="protocol_address_help" style="color: #666;"></small>
+                                <label for="mapping_protocol_address">Protocol Address:</label>
+                                <input type="text" id="mapping_protocol_address" name="protocol_address" required>
+                                <small id="mapping-protocol-address-help" style="color: #666;"></small>
                             </div>
                             <div class="form-group">
-                                <label for="db_source">Database Source:</label>
-                                <input type="text" id="db_source" name="db_source" required placeholder="table.column">
+                                <label for="mapping_db_source">Database Source:</label>
+                                <input type="text" id="mapping_db_source" name="db_source" required placeholder="table.column">
                             </div>
                             <div class="action-buttons">
                                 <button type="button" onclick="validateMapping()">Validate</button>
diff --git a/static/test_protocol_address_debug.html b/static/test_protocol_address_debug.html
new file mode 100644
index 0000000..66d252f
--- /dev/null
+++ b/static/test_protocol_address_debug.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Protocol Address Debug Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
+        button { padding: 10px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
+        button:hover { background: #0056b3; }
+        .debug-output { background: #f8f9fa; padding: 10px; border: 1px solid #dee2e6; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
+    </style>
+</head>
+<body>
+    <h1>Protocol Address Auto-fill Debug Test</h1>
+    
+    <div class="test-section">
+        <h2>Test 1: Direct Function Call</h2>
+        <p>Test if autoPopulateSignalForm function works directly:</p>
+        <button onclick="testDirectFunction()">Test Direct Function</button>
+        <div id="test1-output" class="debug-output"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Test 2: Simulate "Use This Signal" Button</h2>
+        <p>Simulate clicking a "Use This Signal" button:</p>
+        <button onclick="testUseSignalButton()">Simulate Use Signal Button</button>
+        <div id="test2-output" class="debug-output"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Test 3: Check Modal Elements</h2>
+        <p>Check if modal form elements exist:</p>
+        <button onclick="checkModalElements()">Check Modal Elements</button>
+        <div id="test3-output" class="debug-output"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Test 4: Manual Modal Population</h2>
+        <p>Manually populate modal fields:</p>
+        <button onclick="manualPopulateModal()">Manual Populate</button>
+        <div id="test4-output" class="debug-output"></div>
+    </div>
+
+    <script>
+        // Test data
+        const testSignalData = {
+            signal_name: 'Test Booster Pump Flow Rate',
+            tags: ['equipment:pump', 'protocol:modbus_tcp', 'data_point:flow_rate', 'discovered:true'],
+            protocol_type: 'modbus_tcp',
+            protocol_address: '30002',
+            db_source: 'measurements.booster_pump_flow_rate'
+        };
+
+        function logTest(testId, message) {
+            const output = document.getElementById(testId + '-output');
+            if (output) {
+                output.textContent += message + '\n';
+            }
+            console.log(message);
+        }
+
+        function testDirectFunction() {
+            logTest('test1', 'Testing direct function call...');
+            
+            if (typeof window.autoPopulateSignalForm === 'function') {
+                logTest('test1', '✓ autoPopulateSignalForm function found');
+                window.autoPopulateSignalForm(testSignalData);
+                logTest('test1', '✓ Function called successfully');
+            } else {
+                logTest('test1', '✗ autoPopulateSignalForm function NOT found');
+            }
+        }
+
+        function testUseSignalButton() {
+            logTest('test2', 'Simulating "Use This Signal" button click...');
+            
+            if (window.simplifiedDiscovery && typeof window.simplifiedDiscovery.useDiscoveredEndpoint === 'function') {
+                logTest('test2', '✓ simplifiedDiscovery.useDiscoveredEndpoint found');
+                // Simulate clicking on the first signal (index 0)
+                window.simplifiedDiscovery.useDiscoveredEndpoint(0);
+                logTest('test2', '✓ Function called successfully');
+            } else {
+                logTest('test2', '✗ simplifiedDiscovery.useDiscoveredEndpoint NOT found');
+            }
+        }
+
+        function checkModalElements() {
+            logTest('test3', 'Checking modal form elements...');
+            
+            const elements = [
+                'signal_name', 'tags', 'protocol_type', 'protocol_address', 'db_source',
+                'signal-modal', 'modal-title'
+            ];
+            
+            elements.forEach(id => {
+                const element = document.getElementById(id);
+                if (element) {
+                    logTest('test3', `✓ Element #${id} found`);
+                } else {
+                    logTest('test3', `✗ Element #${id} NOT found`);
+                }
+            });
+        }
+
+        function manualPopulateModal() {
+            logTest('test4', 'Manually populating modal fields...');
+            
+            // First, try to open the modal
+            if (typeof window.showAddSignalModal === 'function') {
+                window.showAddSignalModal();
+                logTest('test4', '✓ Modal opened');
+            } else {
+                logTest('test4', '✗ showAddSignalModal function NOT found');
+            }
+            
+            // Wait a bit for modal to open, then populate
+            setTimeout(() => {
+                const fields = {
+                    'signal_name': testSignalData.signal_name,
+                    'tags': testSignalData.tags.join(', '),
+                    'protocol_type': testSignalData.protocol_type,
+                    'protocol_address': testSignalData.protocol_address,
+                    'db_source': testSignalData.db_source
+                };
+                
+                Object.entries(fields).forEach(([id, value]) => {
+                    const element = document.getElementById(id);
+                    if (element) {
+                        element.value = value;
+                        logTest('test4', `✓ Set #${id} to: ${value}`);
+                    } else {
+                        logTest('test4', `✗ Element #${id} NOT found`);
+                    }
+                });
+            }, 500);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/static/test_protocol_address_fix.html b/static/test_protocol_address_fix.html
new file mode 100644
index 0000000..5b82ae0
--- /dev/null
+++ b/static/test_protocol_address_fix.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Protocol Address Fix Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
+        button { padding: 10px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
+        button:hover { background: #0056b3; }
+        .debug-output { background: #f8f9fa; padding: 10px; border: 1px solid #dee2e6; margin: 10px 0; font-family: monospace; white-space: pre-wrap; }
+        .success { color: green; }
+        .error { color: red; }
+    </style>
+</head>
+<body>
+    <h1>Protocol Address Auto-fill Fix Verification</h1>
+    
+    <div class="test-section">
+        <h2>Test: Check for Duplicate IDs</h2>
+        <p>Verify that there are no duplicate HTML IDs that could cause JavaScript issues:</p>
+        <button onclick="checkDuplicateIds()">Check for Duplicate IDs</button>
+        <div id="duplicate-check-output" class="debug-output"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Test: Verify Modal Elements</h2>
+        <p>Check if the signal modal elements exist with correct IDs:</p>
+        <button onclick="verifyModalElements()">Verify Modal Elements</button>
+        <div id="modal-check-output" class="debug-output"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Test: Simulate Discovery Integration</h2>
+        <p>Simulate the "Use This Signal" button functionality:</p>
+        <button onclick="simulateUseSignal()">Simulate Use Signal</button>
+        <div id="simulation-output" class="debug-output"></div>
+    </div>
+
+    <script>
+        function logOutput(elementId, message, className = '') {
+            const output = document.getElementById(elementId);
+            if (output) {
+                const line = document.createElement('div');
+                line.textContent = message;
+                if (className) line.className = className;
+                output.appendChild(line);
+            }
+            console.log(message);
+        }
+
+        function checkDuplicateIds() {
+            const output = document.getElementById('duplicate-check-output');
+            output.innerHTML = '';
+            
+            logOutput('duplicate-check-output', 'Checking for duplicate HTML IDs...');
+            
+            const allElements = document.querySelectorAll('[id]');
+            const idCounts = {};
+            
+            allElements.forEach(element => {
+                const id = element.id;
+                idCounts[id] = (idCounts[id] || 0) + 1;
+            });
+            
+            let hasDuplicates = false;
+            Object.entries(idCounts).forEach(([id, count]) => {
+                if (count > 1) {
+                    logOutput('duplicate-check-output', `❌ Duplicate ID: "${id}" found ${count} times`, 'error');
+                    hasDuplicates = true;
+                }
+            });
+            
+            if (!hasDuplicates) {
+                logOutput('duplicate-check-output', '✅ No duplicate IDs found', 'success');
+            }
+            
+            // Check specific protocol-related IDs
+            const protocolIds = ['protocol_address', 'protocol-address-help', 'mapping_protocol_address', 'mapping-protocol-address-help'];
+            logOutput('duplicate-check-output', '\nChecking specific protocol-related IDs:');
+            
+            protocolIds.forEach(id => {
+                const element = document.getElementById(id);
+                if (element) {
+                    logOutput('duplicate-check-output', `✅ Found element with ID: "${id}"`, 'success');
+                } else {
+                    logOutput('duplicate-check-output', `❌ Element with ID "${id}" not found`, 'error');
+                }
+            });
+        }
+
+        function verifyModalElements() {
+            const output = document.getElementById('modal-check-output');
+            output.innerHTML = '';
+            
+            logOutput('modal-check-output', 'Verifying signal modal elements...');
+            
+            const requiredElements = [
+                'signal-modal',
+                'modal-title',
+                'signal-form',
+                'signal_name',
+                'tags',
+                'protocol_type',
+                'protocol_address',
+                'protocol-address-help',
+                'db_source'
+            ];
+            
+            let allFound = true;
+            requiredElements.forEach(id => {
+                const element = document.getElementById(id);
+                if (element) {
+                    logOutput('modal-check-output', `✅ Found: #${id}`, 'success');
+                } else {
+                    logOutput('modal-check-output', `❌ Missing: #${id}`, 'error');
+                    allFound = false;
+                }
+            });
+            
+            if (allFound) {
+                logOutput('modal-check-output', '\n✅ All required modal elements found!', 'success');
+            } else {
+                logOutput('modal-check-output', '\n❌ Some modal elements are missing', 'error');
+            }
+        }
+
+        function simulateUseSignal() {
+            const output = document.getElementById('simulation-output');
+            output.innerHTML = '';
+            
+            logOutput('simulation-output', 'Simulating "Use This Signal" functionality...');
+            
+            // Test data that would come from discovery
+            const testSignalData = {
+                signal_name: 'Test Booster Pump Flow Rate',
+                tags: ['equipment:pump', 'protocol:modbus_tcp', 'data_point:flow_rate', 'discovered:true'],
+                protocol_type: 'modbus_tcp',
+                protocol_address: '30002',
+                db_source: 'measurements.booster_pump_flow_rate'
+            };
+            
+            logOutput('simulation-output', `Test data: ${JSON.stringify(testSignalData, null, 2)}`);
+            
+            // Check if the auto-populate function exists
+            if (typeof window.autoPopulateSignalForm === 'function') {
+                logOutput('simulation-output', '✅ autoPopulateSignalForm function found', 'success');
+                
+                // Call the function
+                window.autoPopulateSignalForm(testSignalData);
+                logOutput('simulation-output', '✅ Function called successfully', 'success');
+                
+                // Check if modal opened and fields populated
+                setTimeout(() => {
+                    const modal = document.getElementById('signal-modal');
+                    if (modal && modal.style.display !== 'none') {
+                        logOutput('simulation-output', '✅ Modal is open', 'success');
+                        
+                        // Check if fields were populated
+                        const protocolAddressField = document.getElementById('protocol_address');
+                        if (protocolAddressField && protocolAddressField.value === '30002') {
+                            logOutput('simulation-output', '✅ Protocol Address field populated correctly: ' + protocolAddressField.value, 'success');
+                        } else {
+                            logOutput('simulation-output', '❌ Protocol Address field NOT populated correctly', 'error');
+                            if (protocolAddressField) {
+                                logOutput('simulation-output', `   Current value: "${protocolAddressField.value}"`, 'error');
+                            }
+                        }
+                    } else {
+                        logOutput('simulation-output', '❌ Modal did not open', 'error');
+                    }
+                }, 1000);
+                
+            } else {
+                logOutput('simulation-output', '❌ autoPopulateSignalForm function NOT found', 'error');
+            }
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
