imcp 0.0.13 → 0.0.15

package/dist/web/public/js/modal/modalSetup.js

@@ -0,0 +1,513 @@
+import { showToast, showConfirm } from '../notifications.js';
+import { showInstallLoadingModal } from './loadingModal.js';
+import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+import { uninstallTools } from './installation.js';
+import { handleBulkClientInstall } from './installation.js';
+import { compareVersions } from './versionUtils.js';
+
+/**
+ * Set up client items in the modal
+ */
+export function setupClientItems(targets, serverStatus, categoryName, serverName, targetDiv) {
+    targets.forEach(target => {
+        const operationStatus = serverStatus.installedStatus[target] || { status: 'not-installed', type: 'check', target: 'server' };
+
+        // Determine client status
+        let statusText = '';
+        let statusClass = '';
+
+        if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
+            statusText = 'Installed';
+            statusClass = 'installed';
+        } else if (operationStatus.status === 'pending') {
+            statusText = 'Pending Requirements';
+            statusClass = 'pending';
+        } else if (operationStatus.status === 'in-progress') {
+            statusText = 'In Progress';
+            statusClass = 'pending';
+        } else if (operationStatus.status === 'failed') {
+            statusText = 'Failed';
+            statusClass = 'not-installed';
+        }
+
+        const isConfigured = operationStatus.status === 'completed' && operationStatus.type === 'install';
+        const isInProgress = operationStatus.status === 'in-progress';
+        const isSelectable = !isConfigured && !isInProgress;
+
+        const clientItem = createClientItem(target, statusText, statusClass, isSelectable, isConfigured, isInProgress);
+        setupClientItemListeners(clientItem, target, isSelectable);
+        setupUninstallButton(clientItem, statusText, operationStatus, target, categoryName, serverName, statusClass);
+        targetDiv.appendChild(clientItem);
+    });
+
+    addSectionTitle(targetDiv);
+}
+
+/**
+ * Set up environment variables section in the modal
+ */
+export function setupEnvironmentVariables(mcpServer, envInputsDiv, targetData) {
+    // For SSE mode, don't show env section at all
+    if (mcpServer.mode === 'sse') {
+        envInputsDiv.style.display = 'none';
+        return;
+    }
+
+    const envRequirements = mcpServer.installation?.['env'] || mcpServer.installation?.env || {};
+    addEnvironmentTitle(envInputsDiv);
+
+    if (Object.keys(envRequirements).length === 0) {
+        addNoEnvMessage(envInputsDiv);
+    } else {
+        createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name);
+    }
+}
+
+/**
+ * Set up installation arguments section in the modal
+ */
+export function setupInstallationArguments(installation, modalArguments, mcpServer) {
+    // For SSE mode, don't show arguments section at all
+    if (mcpServer?.mode === 'sse') {
+        modalArguments.style.display = 'none';
+        return;
+    }
+
+    if (!installation) return;
+
+    addArgumentsTitle(modalArguments);
+    const container = createArgumentsContainer();
+    modalArguments.appendChild(container);
+
+    if (installation.args && Array.isArray(installation.args)) {
+        installation.args.forEach(arg => {
+            container.appendChild(createArgumentInput(arg));
+        });
+    } else {
+        container.appendChild(createArgumentInput());
+    }
+
+    if (installation.command === 'python' || installation.command.includes('python')) {
+        addPythonEnvironmentInput(modalArguments);
+    }
+}
+
+/**
+ * Set up server requirements section in the modal
+ */
+export function setupServerRequirements(mcpServer, serverData, categoryName, serverName, modalRequirements) {
+    // For SSE mode, don't show requirements section at all
+    if (mcpServer.mode === 'sse') {
+        modalRequirements.style.display = 'none';
+        return;
+    }
+
+    const serverRequirements = mcpServer.dependencies?.requirements || [];
+    const requirements = serverData.data.installationStatus?.requirementsStatus || {};
+
+    if (serverRequirements.length > 0) {
+        const reqHtml = renderRequirements(serverRequirements, requirements, categoryName, serverName);
+        modalRequirements.innerHTML = `
+            <h3 class="text-lg font-semibold text-gray-700 mb-3">Dependencies</h3>
+            <p class="text-sm text-gray-600 mb-4">These dependencies will be automatically installed when installing the server</p>
+            ${reqHtml}
+        `;
+
+        setupUpdateToggles(modalRequirements);
+    } else {
+        modalRequirements.innerHTML = '<p class="text-gray-600">No additional dependencies required.</p>';
+    }
+}
+
+/**
+ * Set up the form submit handler
+ */
+export function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modalRequirements, categoryName, serverName, serverStatuses, serverData, mcpServer) {
+    form.onsubmit = (e) => {
+        e.preventDefault();
+
+        const envVars = {};
+        const args = [];
+        const requirementsToUpdate = [];
+        let pythonEnv = undefined;
+
+        // Only collect env, args and requirements if not in SSE mode
+        if (mcpServer?.mode !== 'sse') {
+            const inputs = envInputsDiv.querySelectorAll('input');
+            inputs.forEach(input => {
+                if (input.name && input.value) {
+                    envVars[input.name] = input.value;
+                }
+            });
+
+            const argInputs = modalArguments.querySelectorAll('.arg-input');
+            args.push(...Array.from(argInputs)
+                .map(input => input.value.trim())
+                .filter(val => val !== ''));
+
+            const pythonEnvInput = document.getElementById('python_env');
+            pythonEnv = pythonEnvInput?.value?.trim();
+
+            const updateToggles = modalRequirements.querySelectorAll('.toggle-update:checked');
+            updateToggles.forEach(toggle => {
+                requirementsToUpdate.push({
+                    name: toggle.dataset.name,
+                    version: toggle.dataset.version
+                });
+            });
+        }
+
+        const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
+
+        const uninstallBtn = document.querySelector('.uninstall-btn');
+        if (!uninstallBtn || !uninstallBtn.matches(':active')) {
+            const selectedTargets = window.selectedClients;
+            if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
+                showToast('Please select at least one client to configure.', 'error');
+                return;
+            }
+
+            let installingMessage = "Starting installation...";
+            const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+            if (selectedTargets.length > 0) {
+                const target = selectedTargets[0];
+                const msg = serverStatus.installedStatus?.[target]?.message;
+                if (msg) installingMessage = msg;
+            }
+
+            const serverInstallOptions = {
+                targetClients: selectedTargets,
+                env: envVars,
+                args: args,
+                settings: pythonEnv ? { pythonEnv: pythonEnv } : {}
+            };
+
+            if (requirementsToUpdate.length > 0) {
+                serverInstallOptions.requirements = requirementsToUpdate;
+            }
+
+            handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);
+        }
+    };
+}
+
+// Helper functions
+function createClientItem(target, statusText, statusClass, isSelectable, isConfigured, isInProgress) {
+    const clientItem = document.createElement('div');
+    clientItem.className = 'client-item';
+    clientItem.dataset.target = target;
+    clientItem.dataset.selected = 'false';
+
+    // Create client info (name)
+    const clientInfo = document.createElement('div');
+    clientInfo.className = 'client-info';
+
+    // Client name label
+    const clientName = document.createElement('span');
+    clientName.className = 'text-sm font-medium text-gray-900';
+    clientName.textContent = target;
+
+    // Add elements to client info
+    clientInfo.appendChild(clientName);
+
+    // Add client info to client item
+    clientItem.appendChild(clientInfo);
+
+    if (!isSelectable) {
+        clientItem.classList.add('non-selectable');
+        if (isConfigured) {
+            clientItem.classList.add('installed-item');
+            clientItem.title = 'Already installed';
+        } else if (isInProgress) {
+            clientItem.classList.add('in-progress-item');
+            clientItem.title = 'Installation in progress';
+        }
+    }
+
+    return clientItem;
+}
+
+function setupClientItemListeners(clientItem, target, isSelectable) {
+    if (isSelectable) {
+        clientItem.addEventListener('click', () => {
+            const isSelected = clientItem.dataset.selected === 'true';
+            clientItem.dataset.selected = isSelected ? 'false' : 'true';
+
+            if (isSelected) {
+                clientItem.classList.remove('selected');
+                window.selectedClients = window.selectedClients.filter(c => c !== target);
+            } else {
+                clientItem.classList.add('selected');
+                if (!window.selectedClients.includes(target)) {
+                    window.selectedClients.push(target);
+                }
+            }
+        });
+    }
+}
+
+function setupUninstallButton(clientItem, statusText, operationStatus, target, categoryName, serverName, statusClass) {
+    if (statusText) {
+        const statusContainer = document.createElement('div');
+        statusContainer.className = 'status-container';
+
+        const statusBadge = document.createElement('span');
+        statusBadge.className = `status-badge ${statusClass}`;
+        statusBadge.textContent = statusText;
+        statusContainer.appendChild(statusBadge);
+
+        if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
+            const uninstallBtn = createUninstallButton(target, categoryName, serverName);
+            statusContainer.appendChild(uninstallBtn);
+        }
+
+        clientItem.appendChild(statusContainer);
+    }
+}
+
+function createUninstallButton(target, categoryName, serverName) {
+    const uninstallBtn = document.createElement('button');
+    uninstallBtn.className = 'uninstall-btn text-red-600 hover:text-red-800 ml-2';
+    uninstallBtn.innerHTML = '<i class="bx bx-trash"></i>';
+    uninstallBtn.title = 'Uninstall from this client';
+
+    uninstallBtn.onclick = async (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const confirmed = await showConfirm('Uninstall Confirmation',
+            `Are you sure you want to uninstall ${serverName} from ${target}?`);
+
+        if (confirmed) {
+            window.selectedClients = [target];
+            showInstallLoadingModal('Uninstalling');
+            const serverList = {
+                [serverName]: {
+                    removeData: true
+                }
+            };
+
+            try {
+                delayedAppendInstallLoadingMessage(`Uninstalling ${serverName} from ${target}...`);
+                await uninstallTools(categoryName, serverList, [target]);
+            } catch (error) {
+                delayedAppendInstallLoadingMessage(`Error: ${error.message}`);
+                throw error;
+            }
+        }
+        return false;
+    };
+
+    return uninstallBtn;
+}
+
+function addSectionTitle(targetDiv) {
+    if (!targetDiv.querySelector('.section-title')) {
+        const titleElement = document.createElement('h3');
+        titleElement.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
+        titleElement.textContent = 'Client Status';
+        targetDiv.insertBefore(titleElement, targetDiv.firstChild);
+    }
+}
+
+function addEnvironmentTitle(envInputsDiv) {
+    if (!envInputsDiv.querySelector('.section-title')) {
+        const envTitle = document.createElement('h3');
+        envTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
+        envTitle.textContent = 'Environment Variables';
+        envInputsDiv.insertBefore(envTitle, envInputsDiv.firstChild);
+    }
+}
+
+function addNoEnvMessage(envInputsDiv) {
+    const noEnvMessage = document.createElement('p');
+    noEnvMessage.className = 'text-gray-600';
+    noEnvMessage.textContent = 'No environment variables required for this MCP server.';
+    envInputsDiv.appendChild(noEnvMessage);
+}
+
+function createEnvironmentInputs(envRequirements, envInputsDiv, clientSettings, serverName) {
+    Object.keys(envRequirements).forEach(key => {
+        const req = envRequirements[key];
+        const inputId = `env_${key}`;
+        const inputWrapper = document.createElement('div');
+        inputWrapper.className = 'mb-3';
+
+        const label = document.createElement('label');
+        label.htmlFor = inputId;
+        label.className = 'block text-sm font-medium text-gray-700 mb-1';
+        label.innerHTML = `${key} ${req.Required ? '<span class="text-red-500">*</span>' : ''}`;
+
+        const input = document.createElement('input');
+        input.type = req.isSecret ? 'password' : 'text';
+        input.id = inputId;
+        input.name = key;
+        input.placeholder = req.Description || key;
+        input.required = req.Required;
+        input.className = 'input-field';
+
+        // For default value, first check settings for the target server, then use the provided default
+        let defaultValue = req.Default || '';
+
+        // Check if we have settings from client configuration
+        if (clientSettings && clientSettings.MSRooCode &&
+            clientSettings.MSRooCode.mcpServers &&
+            clientSettings.MSRooCode.mcpServers[serverName] &&
+            clientSettings.MSRooCode.mcpServers[serverName].env &&
+            clientSettings.MSRooCode.mcpServers[serverName].env[key]) {
+            defaultValue = clientSettings.MSRooCode.mcpServers[serverName].env[key];
+        }
+
+        input.value = defaultValue;
+
+        inputWrapper.appendChild(label);
+        inputWrapper.appendChild(input);
+
+        if (req.Description) {
+            const description = document.createElement('p');
+            description.className = 'text-xs text-gray-500 mt-1';
+            description.textContent = req.Description;
+            inputWrapper.appendChild(description);
+        }
+
+        envInputsDiv.appendChild(inputWrapper);
+    });
+}
+
+function addArgumentsTitle(modalArguments) {
+    const argsTitle = document.createElement('h3');
+    argsTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
+    argsTitle.textContent = 'Arguments';
+    modalArguments.appendChild(argsTitle);
+}
+
+function createArgumentsContainer() {
+    const container = document.createElement('div');
+    container.className = 'args-container mb-3';
+
+    const addButton = document.createElement('button');
+    addButton.type = 'button';
+    addButton.className = 'add-arg-button px-3 py-1 text-sm text-blue-600 hover:text-blue-800 border border-blue-600 hover:border-blue-800 rounded-md mb-2';
+    addButton.innerHTML = '<i class="bx bx-plus"></i> Add Argument';
+    addButton.onclick = () => container.appendChild(createArgumentInput());
+
+    container.appendChild(addButton);
+    return container;
+}
+
+function createArgumentInput(value = '') {
+    const argWrapper = document.createElement('div');
+    argWrapper.className = 'arg-wrapper flex items-center gap-2 mb-2';
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'arg-input flex-grow';
+    input.value = value;
+    input.placeholder = 'Enter argument value';
+
+    const removeButton = document.createElement('button');
+    removeButton.type = 'button';
+    removeButton.className = 'remove-arg-button text-red-600 hover:text-red-800';
+    removeButton.innerHTML = '<i class="bx bx-trash"></i>';
+    removeButton.onclick = () => argWrapper.remove();
+
+    argWrapper.appendChild(input);
+    argWrapper.appendChild(removeButton);
+    return argWrapper;
+}
+
+function addPythonEnvironmentInput(modalArguments) {
+    const pythonEnvWrapper = document.createElement('div');
+    pythonEnvWrapper.className = 'mt-4';
+
+    const pythonEnvLabel = document.createElement('label');
+    pythonEnvLabel.htmlFor = 'python_env';
+    pythonEnvLabel.className = 'block text-sm font-medium text-gray-700 mb-1';
+    pythonEnvLabel.textContent = 'Python Environment';
+
+    const pythonEnvInput = document.createElement('input');
+    pythonEnvInput.type = 'text';
+    pythonEnvInput.id = 'python_env';
+    pythonEnvInput.className = 'input-field';
+    pythonEnvInput.placeholder = 'Enter Python environment path (optional)';
+
+    const envDescription = document.createElement('p');
+    envDescription.className = 'text-xs text-gray-500 mt-1';
+    envDescription.textContent = 'Specify the Python executable file(e.g. C:/python312/python) to use for installation. Leave empty to use system default.';
+
+    pythonEnvWrapper.appendChild(pythonEnvLabel);
+    pythonEnvWrapper.appendChild(pythonEnvInput);
+    pythonEnvWrapper.appendChild(envDescription);
+    modalArguments.appendChild(pythonEnvWrapper);
+}
+
+function renderRequirements(serverRequirements, requirements, categoryName, serverName) {
+    return serverRequirements.map(req => {
+        const status = requirements[req.name] || {};
+        let statusClass = status.installed
+            ? 'text-green-600 bg-green-50'
+            : 'text-yellow-600 bg-yellow-50';
+        let statusText = status.installed ? 'Installed' : 'Required';
+        let versionDisplay = status.version ? ` • <span class="font-medium">${status.version}</span>` : '';
+        let updateToggle = '';
+
+        // Check if there's an available update
+        if (status.installed && status.availableUpdate && status.availableUpdate.version) {
+            if (status.version && compareVersions(status.availableUpdate.version, status.version) > 0) {
+                // Show version update information with yellow color and icon
+                statusClass = 'text-yellow-600 bg-yellow-50';
+                statusText = `<span style="color: #f59e0b; font-weight: bold; margin-right: 5px;">↑</span>${status.availableUpdate.version}`;
+
+                // Create a toggle switch for update
+                updateToggle = `
+                    <label class="inline-flex items-center cursor-pointer ml-2">
+                        <input type="checkbox" class="toggle-update sr-only"
+                            data-name="${req.name}"
+                            data-version="${status.availableUpdate.version}"
+                            data-category="${categoryName}"
+                            data-server="${serverName}">
+                        <div class="relative w-10 h-5 bg-gray-200 rounded-full toggle-bg">
+                            <div class="absolute inset-y-0 left-0 w-5 h-5 bg-white rounded-full transition-transform duration-300 transform"></div>
+                        </div>
+                        <span class="ml-2 text-sm text-gray-700">Update</span>
+                    </label>
+                `;
+            }
+        }
+
+        return `
+            <div class="border border-gray-200 p-3 rounded-lg mb-2 hover:bg-gray-50">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <div class="font-semibold text-gray-800">${req.name}</div>
+                        <div class="text-sm text-gray-600 shadow-sm p-1 rounded bg-gray-50">
+                            <span class="font-medium">${status.type || 'package'}</span>${versionDisplay}
+                        </div>
+                    </div>
+                    <div class="flex items-center">
+                        <span class="${statusClass} inline-flex items-center px-3 py-1 rounded-full text-sm">
+                            ${statusText}
+                        </span>
+                        ${updateToggle}
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function setupUpdateToggles(modalRequirements) {
+    const updateToggles = modalRequirements.querySelectorAll('.toggle-update');
+    updateToggles.forEach(toggle => {
+        toggle.addEventListener('change', function () {
+            const toggleBg = this.parentElement.querySelector('.toggle-bg');
+            if (this.checked) {
+                toggleBg.classList.add('bg-blue-500');
+                toggleBg.querySelector('div').classList.add('translate-x-5');
+            } else {
+                toggleBg.classList.remove('bg-blue-500');
+                toggleBg.querySelector('div').classList.remove('translate-x-5');
+            }
+        });
+    });
+}