From 2eceda51ed4ee11a187aa8c9f06d938f36f1459e Mon Sep 17 00:00:00 2001 From: andrepimenta Date: Fri, 11 Jul 2025 23:19:33 +0100 Subject: [PATCH] Edit MCP --- src/ui-styles.ts | 27 ++++++++++-- src/ui.ts | 112 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 130 insertions(+), 9 deletions(-) diff --git a/src/ui-styles.ts b/src/ui-styles.ts index e529079..4090149 100644 --- a/src/ui-styles.ts +++ b/src/ui-styles.ts @@ -2335,8 +2335,6 @@ const styles = ` /* MCP Servers styles */ .mcp-servers-list { - max-height: 500px; - overflow-y: auto; padding: 4px; } @@ -2392,6 +2390,7 @@ const styles = ` color: var(--vscode-errorForeground); border-color: var(--vscode-errorForeground); min-width: 80px; + justify-content: center; } .server-delete-btn:hover { @@ -2399,6 +2398,28 @@ const styles = ` border-color: var(--vscode-errorForeground); } + .server-actions { + display: flex; + gap: 8px; + align-items: center; + flex-shrink: 0; + } + + .server-edit-btn { + padding: 8px 16px; + font-size: 13px; + color: var(--vscode-foreground); + border-color: var(--vscode-panel-border); + min-width: 80px; + transition: all 0.2s ease; + justify-content: center; + } + + .server-edit-btn:hover { + background-color: var(--vscode-list-hoverBackground); + border-color: var(--vscode-focusBorder); + } + .mcp-add-server { text-align: center; margin-bottom: 24px; @@ -2411,8 +2432,6 @@ const styles = ` border-radius: 8px; padding: 24px; margin-top: 20px; - max-height: 400px; - overflow-y: auto; box-sizing: border-box; width: 100%; } diff --git a/src/ui.ts b/src/ui.ts index a45cf0c..28d58b1 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -1652,8 +1652,20 @@ const html = ` document.getElementById('addServerBtn').style.display = 'block'; document.getElementById('popularServers').style.display = 'block'; document.getElementById('addServerForm').style.display = 'none'; + + // Reset editing state + editingServerName = null; + + // Reset form title and button + const formTitle = document.querySelector('#addServerForm h5'); + if (formTitle) formTitle.remove(); + + const saveBtn = document.querySelector('#addServerForm .btn:not(.outlined)'); + if (saveBtn) saveBtn.textContent = 'Add Server'; + // Clear form document.getElementById('serverName').value = ''; + document.getElementById('serverName').disabled = false; document.getElementById('serverCommand').value = ''; document.getElementById('serverUrl').value = ''; document.getElementById('serverArgs').value = ''; @@ -1691,16 +1703,41 @@ const html = ` const type = document.getElementById('serverType').value; if (!name) { - alert('Server name is required'); + // Use a simple notification instead of alert which is blocked + const notification = document.createElement('div'); + notification.textContent = 'Server name is required'; + notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--vscode-inputValidation-errorBackground); color: var(--vscode-inputValidation-errorForeground); padding: 8px 12px; border-radius: 4px; z-index: 9999;'; + document.body.appendChild(notification); + setTimeout(() => notification.remove(), 3000); return; } + // If editing, we can use the same name; if adding, check for duplicates + if (!editingServerName) { + const serversList = document.getElementById('mcpServersList'); + const existingServers = serversList.querySelectorAll('.server-name'); + for (let server of existingServers) { + if (server.textContent === name) { + const notification = document.createElement('div'); + notification.textContent = \`Server "\${name}" already exists\`; + notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--vscode-inputValidation-errorBackground); color: var(--vscode-inputValidation-errorForeground); padding: 8px 12px; border-radius: 4px; z-index: 9999;'; + document.body.appendChild(notification); + setTimeout(() => notification.remove(), 3000); + return; + } + } + } + const serverConfig = { type }; if (type === 'stdio') { const command = document.getElementById('serverCommand').value.trim(); if (!command) { - alert('Command is required for stdio servers'); + const notification = document.createElement('div'); + notification.textContent = 'Command is required for stdio servers'; + notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--vscode-inputValidation-errorBackground); color: var(--vscode-inputValidation-errorForeground); padding: 8px 12px; border-radius: 4px; z-index: 9999;'; + document.body.appendChild(notification); + setTimeout(() => notification.remove(), 3000); return; } serverConfig.command = command; @@ -1723,7 +1760,11 @@ const html = ` } else if (type === 'http' || type === 'sse') { const url = document.getElementById('serverUrl').value.trim(); if (!url) { - alert('URL is required for HTTP/SSE servers'); + const notification = document.createElement('div'); + notification.textContent = 'URL is required for HTTP/SSE servers'; + notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--vscode-inputValidation-errorBackground); color: var(--vscode-inputValidation-errorForeground); padding: 8px 12px; border-radius: 4px; z-index: 9999;'; + document.body.appendChild(notification); + setTimeout(() => notification.remove(), 3000); return; } serverConfig.url = url; @@ -1757,13 +1798,71 @@ const html = ` }); } + let editingServerName = null; + + function editMCPServer(name, config) { + editingServerName = name; + + // Hide add button and popular servers + document.getElementById('addServerBtn').style.display = 'none'; + document.getElementById('popularServers').style.display = 'none'; + + // Show form + document.getElementById('addServerForm').style.display = 'block'; + + // Update form title and button + const formTitle = document.querySelector('#addServerForm h5') || + document.querySelector('#addServerForm').insertAdjacentHTML('afterbegin', '
Edit MCP Server
') || + document.querySelector('#addServerForm h5'); + if (!document.querySelector('#addServerForm h5')) { + document.getElementById('addServerForm').insertAdjacentHTML('afterbegin', '
Edit MCP Server
'); + } else { + document.querySelector('#addServerForm h5').textContent = 'Edit MCP Server'; + } + + // Update save button text + const saveBtn = document.querySelector('#addServerForm .btn:not(.outlined)'); + if (saveBtn) saveBtn.textContent = 'Update Server'; + + // Populate form with existing values + document.getElementById('serverName').value = name; + document.getElementById('serverName').disabled = true; // Don't allow name changes when editing + + document.getElementById('serverType').value = config.type || 'stdio'; + + if (config.command) { + document.getElementById('serverCommand').value = config.command; + } + if (config.url) { + document.getElementById('serverUrl').value = config.url; + } + if (config.args && Array.isArray(config.args)) { + document.getElementById('serverArgs').value = config.args.join('\\n'); + } + if (config.env) { + const envLines = Object.entries(config.env).map(([key, value]) => \`\${key}=\${value}\`); + document.getElementById('serverEnv').value = envLines.join('\\n'); + } + if (config.headers) { + const headerLines = Object.entries(config.headers).map(([key, value]) => \`\${key}=\${value}\`); + document.getElementById('serverHeaders').value = headerLines.join('\\n'); + } + + // Update form field visibility + updateServerForm(); + } + function addPopularServer(name, config) { // Check if server already exists const serversList = document.getElementById('mcpServersList'); const existingServers = serversList.querySelectorAll('.server-name'); for (let server of existingServers) { if (server.textContent === name) { - alert(\`Server "\${name}" already exists.\`); + const notification = document.createElement('div'); + notification.textContent = \`Server "\${name}" already exists\`; + notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: var(--vscode-inputValidation-errorBackground); color: var(--vscode-inputValidation-errorForeground); padding: 8px 12px; border-radius: 4px; z-index: 9999;'; + document.body.appendChild(notification); + setTimeout(() => notification.remove(), 3000); return; } } @@ -1815,7 +1914,10 @@ const html = `
\${serverType.toUpperCase()}
\${configDisplay}
- +
+ + +
\`; serversList.appendChild(serverItem);