imcp 0.0.14 → 0.0.16

package/src/web/public/js/onboard/validationHandlers.js

@@ -0,0 +1,378 @@
+// src/web/public/js/onboard/validationHandlers.js
+import { showToast } from '../notifications.js';
+import { getFormData } from './formProcessor.js';
+import { toggleSectionContent } from './uiHandlers.js'; // Assuming this is correctly in uiHandlers.js and exported
+
+/**
+ * Shows validation message under an input field.
+ * @param {HTMLElement} element - The input element to show validation message for.
+ * @param {string} message - The validation message to display.
+ * @param {boolean} isError - Whether this is an error message (true) or success message (false).
+ */
+function showValidationMessage(element, message, isError = true) {
+  // Remove any existing validation message
+  const existingMessage = element.nextElementSibling;
+  if (existingMessage && existingMessage.classList.contains('validation-message')) {
+    existingMessage.remove();
+  }
+
+  // Create new validation message element
+  const messageDiv = document.createElement('div');
+  messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+  messageDiv.textContent = message;
+
+  // Insert the message after the input element
+  element.insertAdjacentElement('afterend', messageDiv);
+
+  // Add visual feedback to the input field
+  if (isError) {
+    element.classList.add('border-red-500');
+    element.classList.remove('border-green-500');
+  } else {
+    element.classList.add('border-green-500');
+    element.classList.remove('border-red-500');
+  }
+}
+
+const POLLING_INTERVAL = 3000; // 3 seconds
+let pollingIntervalId = null;
+
+/**
+ * Updates the operation status display.
+ * @param {object} data - The data object from the API response.
+ * @param {HTMLElement} contentElement - The HTML element to update.
+ */
+export function updateOperationDisplay(data, contentElement) { // Renamed from updateValidationDisplay
+  const { status, message, validationStatus, prInfo, errorMessage: operationErrorMessage, operationType } = data;
+  let htmlContent = `<p><strong>Overall Status:</strong> <span class="${status === 'COMPLETED' || status === 'succeeded' ? 'text-green-600' : (status === 'FAILED' ? 'text-red-600' : 'text-yellow-600')}">${status} ${(status === 'IN_PROGRESS' || status === 'PENDING' || status === 'VALIDATING' || status === 'PUBLISHING') ? "<i class='bx bx-loader-alt bx-spin ml-2'></i>" : ""}</span></p>`;
+  if (operationType) htmlContent += `<p><strong>Operation Type:</strong> ${operationType}</p>`;
+  if (message) htmlContent += `<p><strong>Message:</strong> ${message}</p>`;
+  if (operationErrorMessage) htmlContent += `<p class="text-red-500"><strong>Error:</strong> ${operationErrorMessage}</p>`;
+  if (validationStatus) {
+    htmlContent += '<h4 class="font-semibold mt-3 mb-1">Detailed Validation:</h4>';
+    htmlContent += '<ul class="list-disc list-inside space-y-1">';
+    let hasDetailedItems = false;
+    // Check for serverResults array first
+    if (Array.isArray(validationStatus.serverResults)) {
+      validationStatus.serverResults.forEach(serverResult => {
+        if (serverResult && typeof serverResult.serverName === 'string' && typeof serverResult.isValid === 'boolean') {
+          hasDetailedItems = true;
+          const icon = serverResult.isValid ? "<i class='bx bx-check-circle text-green-500'></i>" : "<i class='bx bx-x-circle text-red-500'></i>";
+          let serverMessage = serverResult.message ? `: ${serverResult.message}` : (serverResult.isValid ? ': Valid' : ': Invalid');
+          htmlContent += `<li>${icon} <strong>Server "${serverResult.serverName}"</strong>${serverMessage}</li>`;
+        }
+      });
+    }
+
+    // Fallback for other keys in validationStatus or if serverResults is not the primary detail
+    for (const key in validationStatus) {
+      if (key === 'serverResults') continue; // Already processed
+
+      const item = validationStatus[key];
+      // Handle simple {isValid, message} structure directly under validationStatus
+      if (key === 'isValid' && typeof item === 'boolean' && typeof validationStatus.message === 'string' && !hasDetailedItems) {
+        hasDetailedItems = true;
+        const icon = item ? "<i class='bx bx-check-circle text-green-500'></i>" : "<i class='bx bx-x-circle text-red-500'></i>";
+        htmlContent += `<li>${icon} <strong>Overall Validation:</strong> ${validationStatus.message}</li>`;
+        break; // Assume this is the main summary if serverResults wasn't present or detailed
+      } else if (typeof item === 'object' && item !== null && 'isValid' in item && 'message' in item) {
+        // Handle other named detailed items
+        hasDetailedItems = true;
+        const icon = item.isValid ? "<i class='bx bx-check-circle text-green-500'></i>" : "<i class='bx bx-x-circle text-red-500'></i>";
+        htmlContent += `<li>${icon} <strong>${key.replace(/([A-Z])/g, ' $1').trim()}:</strong> ${item.message}</li>`;
+      }
+    }
+
+    if (!hasDetailedItems && validationStatus.isValid === true && validationStatus.message) {
+      // Catch-all for a simple success message if no other details were parsed
+      hasDetailedItems = true;
+      const icon = "<i class='bx bx-check-circle text-green-500'></i>";
+      htmlContent += `<li>${icon} <strong>Overall:</strong> ${validationStatus.message}</li>`;
+    } else if (!hasDetailedItems) {
+      htmlContent += '<li>No detailed validation information available or format is unexpected.</li>';
+    }
+    htmlContent += '</ul>';
+  }
+
+  if (prInfo && prInfo.url) {
+    htmlContent += `<p class="mt-3"><strong>PR Info:</strong> <a href="${prInfo.url}" target="_blank" class="text-blue-600 hover:underline">${prInfo.url}</a></p>`;
+  }
+  contentElement.innerHTML = htmlContent;
+}
+
+/**
+ * Polls the server for operation status.
+ * @param {string} categoryName - The name of the category.
+ * @param {string} contentId - The ID of the status content element.
+ * @param {string} validateBtnId - The ID of the validate button.
+ * @param {string} publishBtnId - The ID of the publish button.
+ * @param {string} operationInitiator - 'validate' or 'publish' to restore correct button text.
+ */
+export async function pollOperationStatus(categoryName, contentId, validateBtnId, publishBtnId, operationInitiator) {
+  const statusContentElement = document.getElementById(contentId);
+  const validateButton = document.getElementById(validateBtnId);
+  const publishButton = document.getElementById(publishBtnId);
+
+  // Helper function to update button states based on operation status
+  const updateButtonStates = (isCompleted = false) => {
+    if (validateButton && publishButton) {
+      if (isCompleted) {
+        // On completion, enable both buttons and restore their original state
+        validateButton.disabled = false;
+        validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+        validateButton.classList.remove('opacity-50');
+        publishButton.disabled = false;
+        publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+        publishButton.classList.remove('opacity-50');
+      } else {
+        // During operation, handle buttons based on which operation is running
+        if (operationInitiator === 'validate') {
+          validateButton.disabled = true;
+          validateButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Validating...";
+          publishButton.disabled = true;
+          publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+          publishButton.classList.add('opacity-50');
+        } else if (operationInitiator === 'publish') {
+          publishButton.disabled = true;
+          publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
+          validateButton.disabled = true;
+          validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+          validateButton.classList.add('opacity-50');
+        }
+      }
+    }
+  };
+
+  try {
+    const response = await fetch(`/api/categories/${categoryName}/onboard/status`);
+    const result = await response.json();
+
+    if (result.success && result.data) {
+      updateOperationDisplay(result.data, statusContentElement);
+
+      const currentStatus = result.data.status ? String(result.data.status).toUpperCase() : ''; // Ensure uppercase for comparison
+      // Use string literals for status comparison, include 'succeeded'
+      if (currentStatus === 'COMPLETED' || currentStatus === 'FAILED' || currentStatus === 'SUCCEEDED') {
+        clearInterval(pollingIntervalId);
+        pollingIntervalId = null;
+        updateButtonStates(true);
+      } else {
+        // Operation is still in progress
+        updateButtonStates(false);
+      }
+    } else {
+      statusContentElement.innerHTML = `<p class="text-red-500">Error polling status: ${result.error || 'Unknown error'}</p>`;
+      clearInterval(pollingIntervalId);
+      pollingIntervalId = null;
+      updateButtonStates(true);
+    }
+  } catch (error) {
+    console.error('Error polling operation status:', error);
+    statusContentElement.innerHTML = `<p class="text-red-500">An error occurred while polling status. Please check the console.</p>`;
+    clearInterval(pollingIntervalId);
+    pollingIntervalId = null;
+    updateButtonStates(true);
+  }
+}
+
+/**
+ * Handles the validation process for the onboarding form.
+ * It initiates validation, displays status, and polls for updates.
+ * @param {Event} event - The click event.
+ * @param {string} activeTab - Identifier for the active tab ('create-category' or 'create-server').
+ * @param {object|null} currentSelectedCategoryData - Data for the currently selected category if activeTab is 'create-server'.
+ */
+export async function handleValidation(event, activeTab, currentSelectedCategoryData = null) {
+  const { panelId, contentId, formId, validateButtonId, publishButtonId } = getElementIdsByTab(activeTab);
+
+  const statusContentElement = document.getElementById(contentId);
+  const onboardForm = document.getElementById(formId);
+  const validateButton = document.getElementById(validateButtonId);
+  const publishButton = document.getElementById(publishButtonId);
+
+  if (!onboardForm || !statusContentElement || !validateButton || !publishButton) {
+    console.error('Required form or panel elements not found for validation.');
+    showToast('Required form or panel elements not found for validation.', 'error');
+    return;
+  }
+
+  // First clear any existing validation messages
+  onboardForm.querySelectorAll('.validation-message').forEach(el => el.remove());
+
+  // Check for empty required fields and show validation messages
+  const emptyRequiredFields = Array.from(onboardForm.querySelectorAll('[required]'));
+  let hasErrors = false;
+
+  emptyRequiredFields.forEach(field => {
+    if (!field.value.trim()) {
+      showValidationMessage(field, 'This field is required', true);
+      hasErrors = true;
+    }
+  });
+
+  // Check for other validation errors
+  const envNameFields = onboardForm.querySelectorAll('input[name$=".env\\[\\].name"]');
+  envNameFields.forEach(field => {
+    const value = field.value.trim();
+    if (value && !/^[A-Z_][A-Z0-9_]*$/.test(value)) {
+      showValidationMessage(field, 'Must be uppercase with only letters, numbers, and underscores', true);
+      hasErrors = true;
+    }
+  });
+
+  const urlFields = onboardForm.querySelectorAll('input[name$=".url"]');
+  urlFields.forEach(field => {
+    const value = field.value.trim();
+    if (value) {
+      try {
+        new URL(value);
+      } catch (e) {
+        showValidationMessage(field, 'Invalid URL format', true);
+        hasErrors = true;
+      }
+    }
+  });
+
+  if (hasErrors) {
+    showToast('Please fix all validation errors before proceeding.', 'error');
+    return;
+  }
+
+  // Additional validation for new category form
+  if (activeTab === 'create-category') {
+    const formData = getFormData(onboardForm, false);
+    if (!formData.mcpServers || formData.mcpServers.length === 0) {
+      showToast('At least one MCP server must be configured for a new category.', 'error');
+      return;
+    }
+  }
+
+  // Disable buttons and show appropriate states
+  validateButton.disabled = true;
+  validateButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Validating...";
+  publishButton.disabled = true;
+  publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+  publishButton.classList.add('opacity-50'); // Add gray state to inactive button
+
+  if (pollingIntervalId) {
+    clearInterval(pollingIntervalId); // Clear any existing polling
+    pollingIntervalId = null;
+  }
+
+  const forExistingCategoryTab = activeTab === 'create-server';
+  const newServersData = getFormData(onboardForm, forExistingCategoryTab, currentSelectedCategoryData);
+  let finalFeedConfiguration;
+
+  if (forExistingCategoryTab && currentSelectedCategoryData) {
+    finalFeedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData)); // Deep clone
+
+    // Merge MCP Servers
+    finalFeedConfiguration.mcpServers = (finalFeedConfiguration.mcpServers || []).concat(newServersData.mcpServers || []);
+
+    // Merge Requirements (ensuring uniqueness)
+    const existingReqKeys = new Set((finalFeedConfiguration.requirements || []).map(r => `${r.type}|${r.name}|${r.version}`));
+    (newServersData.requirements || []).forEach(newReq => {
+      const reqKey = `${newReq.type}|${newReq.name}|${newReq.version}`;
+      if (!existingReqKeys.has(reqKey)) {
+        if (!finalFeedConfiguration.requirements) {
+          finalFeedConfiguration.requirements = [];
+        }
+        finalFeedConfiguration.requirements.push(newReq);
+        existingReqKeys.add(reqKey);
+      }
+    });
+  } else {
+    finalFeedConfiguration = newServersData;
+  }
+
+  statusContentElement.innerHTML = '<p class="text-gray-500">Initiating validation...</p>';
+  ensureStatusPanelVisible(panelId, contentId);
+
+
+  try {
+    const response = await fetch('/api/categories/onboard/validate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        categoryData: finalFeedConfiguration,
+        forExistingCategory: forExistingCategoryTab
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.success && result.data) {
+      updateOperationDisplay(result.data, statusContentElement);
+      const categoryName = result.data.onboardingId; // This is the category name used for polling
+      const initialStatus = result.data.status;
+
+      // Use string literals for status comparison, include 'succeeded'
+      if (categoryName && initialStatus !== 'COMPLETED' && initialStatus !== 'FAILED' && initialStatus !== 'succeeded') {
+        pollingIntervalId = setInterval(() => pollOperationStatus(categoryName, contentId, validateButtonId, publishButtonId, 'validate'), POLLING_INTERVAL);
+      } else {
+        validateButton.disabled = false;
+        validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+        publishButton.disabled = false;
+        publishButton.classList.remove('opacity-50'); // Remove gray state
+      }
+    } else {
+      statusContentElement.innerHTML = `<p class="text-red-500">Validation request failed: ${result.error || 'Unknown error'}</p>`;
+      validateButton.disabled = false;
+      validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+      publishButton.disabled = false;
+      publishButton.classList.remove('opacity-50'); // Remove gray state on error
+    }
+  } catch (error) {
+    console.error('Error during validation:', error);
+    statusContentElement.innerHTML = `<p class="text-red-500">An error occurred while initiating validation. Please check the console.</p>`;
+    validateButton.disabled = false;
+    validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+    publishButton.disabled = false;
+    publishButton.classList.remove('opacity-50'); // Remove gray state on error
+  }
+}
+
+/**
+ * Gets common element IDs based on the active tab.
+ * @param {string} activeTab - Identifier for the active tab.
+ * @returns {object} Object containing element IDs.
+ */
+export function getElementIdsByTab(activeTab) {
+  const isCreateCategoryTab = activeTab === 'create-category';
+  return {
+    panelId: isCreateCategoryTab ? 'validationStatusPanelNewCategory' : 'validationStatusPanelExistingCategory',
+    contentId: isCreateCategoryTab ? 'validationStatusContentNewCategory' : 'validationStatusContentExistingCategoryTab',
+    formId: isCreateCategoryTab ? 'onboardForm' : 'onboardServerForm',
+    validateButtonId: isCreateCategoryTab ? 'validateButtonNewCategory' : 'validateButtonExistingCategory',
+    publishButtonId: isCreateCategoryTab ? 'publishButtonNewCategory' : 'publishButtonExistingCategory',
+  };
+}
+
+/**
+ * Ensures the status panel is visible and expanded.
+ * @param {string} panelId - The ID of the status panel.
+ * @param {string} contentId - The ID of the status content area.
+ */
+export function ensureStatusPanelVisible(panelId, contentId) {
+  const statusPanel = document.getElementById(panelId);
+  const statusContent = document.getElementById(contentId);
+
+  if (!statusPanel || !statusContent) return;
+
+  statusPanel.classList.remove('hidden');
+  if (statusContent.classList.contains('hidden')) {
+    const headerIcon = statusPanel.querySelector('.toggle-icon');
+    if (headerIcon && typeof toggleSectionContent === 'function') {
+      toggleSectionContent(contentId, headerIcon);
+    } else if (headerIcon) {
+      console.warn('toggleSectionContent function not available for status panel.');
+      statusContent.classList.remove('hidden');
+      headerIcon.classList.remove('bx-chevron-down');
+      headerIcon.classList.add('bx-chevron-up');
+    } else {
+      statusContent.classList.remove('hidden');
+    }
+  }
+}

package/src/web/public/js/serverCategoryList.js

@@ -1,6 +1,7 @@
 import { allServerCategoriesData, fetchServerCategories } from './api.js';
-import { showServerDetails } from './serverCategoryDetails.js';
+import { showServerDetails } from './serverCategoryDetails.js'; // Still needed for initial load and direct calls
 import { showToast } from './notifications.js';
+import { buildUrlWithFlights } from './flights/flights.js';
 
 // Wait for data to be loaded
 async function waitForData() {
@@ -73,7 +74,7 @@ function renderServerCategoryList(servers) {
 
         return `
         <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
-             onclick="window.showServerDetails('${server.name}')"
+             onclick="navigateToCategory('${server.name}')"
              data-server-name="${server.name}">
             <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
             <p class="text-sm text-gray-500">${statusHtml}</p>
@@ -128,5 +129,17 @@ function setupSearch() {
     });
 }
 
+function navigateToCategory(categoryName) {
+    // This function will now handle the navigation, ensuring flight params are preserved.
+    // It constructs the new URL with the selected category and existing flight params.
+    window.location.href = buildUrlWithFlights('index.html', { category: categoryName });
+}
+
+// Make navigateToCategory globally accessible if it's directly used in HTML onclick
+// Alternatively, attach event listeners dynamically after rendering the list.
+// For simplicity with current structure, we'll make it global.
+window.navigateToCategory = navigateToCategory;
+
+
 // Export functions
 export { renderServerCategoryList, setupSearch, loadLastSelectedCategory };