imcp 0.1.7 → 0.1.8-dev

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

@@ -1,493 +0,0 @@
-// 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).
- */
-export 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');
-  }
-}
-
-/**
- * Common form field validation used by both validate and publish handlers
- * @param {HTMLFormElement} form - The form to validate
- * @param {string} activeTab - The active tab ('create-category' or 'create-server')
- * @returns {{isValid: boolean, errors: string[]}} Validation result with error messages
- */
-export function validateFormFields(form, activeTab) {
-  // Clear any existing validation messages
-  form.querySelectorAll('.validation-message').forEach(el => el.remove());
-
-  let hasErrors = false;
-  const errors = [];
-
-  // Check for empty required fields and show validation messages
-  const emptyRequiredFields = Array.from(form.querySelectorAll('[required]'));
-  emptyRequiredFields.forEach(field => {
-    if (!field.value.trim()) {
-      showValidationMessage(field, 'This field is required', true);
-      hasErrors = true;
-      errors.push(`${field.name || 'Field'} is required`);
-    }
-  });
-
-  // Check category name format if this is the create category tab
-  if (activeTab === 'create-category') {
-    const nameInput = form.querySelector('input[name="name"]');
-    if (nameInput && nameInput.value.trim()) {
-      if (!/^[a-zA-Z0-9-_]+$/.test(nameInput.value.trim())) {
-        showValidationMessage(nameInput, 'Only alphanumeric characters, hyphens, and underscores allowed', true);
-        hasErrors = true;
-        errors.push('Category name must only contain alphanumeric characters, hyphens, and underscores');
-      }
-    }
-  }
-
-  // Check for other validation errors
-  const envNameFields = form.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;
-      errors.push('Environment variable names must be uppercase with only letters, numbers, and underscores');
-    }
-  });
-
-  const urlFields = form.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;
-        errors.push('Invalid URL format');
-      }
-    }
-  });
-
-  return {
-    isValid: !hasErrors,
-    errors
-  };
-}
-
-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, steps } = data; // Added steps
-  const upperStatus = typeof status === 'string' ? status.toUpperCase() : ''; // Overall status
-  const isInProgressOverall = upperStatus === 'PENDING' || upperStatus === 'VALIDATING' || upperStatus === 'PRCREATING' || upperStatus === 'IN_PROGRESS' || upperStatus === 'PUBLISHING';
-
-  let htmlContent = `<p><strong>Overall Status:</strong> <span class="${upperStatus === 'COMPLETED' || upperStatus === 'SUCCEEDED' ? 'text-green-600' : (upperStatus === 'FAILED' ? 'text-red-600' : 'text-yellow-600')}">${status} ${isInProgressOverall ? "<i class='bx bx-loader-alt bx-spin ml-2'></i>" : ""}</span></p>`;
-  if (operationType) htmlContent += `<p><strong>Operation Type:</strong> ${operationType}</p>`;
-  // Show message if provided, especially useful for direct success/failure from API.
-  if (message) htmlContent += `<p><strong>Message:</strong> ${message}</p>`;
-  if (operationErrorMessage) htmlContent += `<p class="text-red-500"><strong>Overall Error:</strong> ${operationErrorMessage}</p>`;
-
-  // Display Steps
-  if (Array.isArray(steps) && steps.length > 0) {
-    const progressListId = `progress-steps-list-${contentElement.id}`; // Unique ID for the steps list
-    // Ensure the toggle icon reflects the initial state (expanded, so 'bx-chevron-up')
-    // The UL itself won't have 'hidden' class initially.
-    htmlContent += `
-      <div class="progress-section-container mt-4">
-        <h4 class="font-semibold mb-2 text-gray-700 cursor-pointer flex items-center progress-section-toggle" data-target-id="${progressListId}">
-          Progress
-          <i class='bx bx-chevron-up toggle-icon-progress ml-2 text-gray-500'></i>
-        </h4>
-        <ul id="${progressListId}" class="list-none space-y-2 border-l-2 border-blue-500 pl-4 py-2">`; // Added py-2 for padding
-    steps.forEach((step, index) => {
-      const stepTimestamp = new Date(step.timestamp).toLocaleString();
-      let stepStatusIcon = '';
-      let stepTextColor = 'text-gray-700'; // Default text color
-
-      const isLastStep = index === steps.length - 1;
-
-      if (step.errorMessage || step.status === 'failed') {
-        stepStatusIcon = "<i class='bx bx-x-circle text-red-500 mr-2'></i>";
-        stepTextColor = 'text-red-600';
-      } else if (isLastStep && isInProgressOverall) {
-        // Current active step if overall process is still running
-        stepStatusIcon = "<i class='bx bx-loader-alt bx-spin text-blue-500 mr-2'></i>";
-        stepTextColor = 'text-blue-700';
-      } else {
-        // Completed, non-failed step
-        stepStatusIcon = "<i class='bx bx-check-circle text-green-500 mr-2'></i>";
-        stepTextColor = 'text-gray-700'; // Keep default gray for completed steps, icon is green
-      }
-      
-      htmlContent += `<li class="text-sm ${stepTextColor}">`;
-      htmlContent += `${stepStatusIcon}<strong>${step.stepName}</strong>`;
-      if (step.serverName) htmlContent += ` (Server: ${step.serverName})`;
-      htmlContent += `<span class="text-xs text-gray-500 ml-2">- ${stepTimestamp}</span>`;
-      if (step.errorMessage) {
-        htmlContent += `<p class="text-xs text-red-400 pl-6">Error: ${step.errorMessage}</p>`;
-      }
-      htmlContent += `</li>`;
-    });
-    htmlContent += '</ul>';
-  }
-
-  if (validationStatus) {
-    htmlContent += '<h4 class="font-semibold mt-4 mb-2 text-gray-700">Detailed Validation Results:</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;
-  // After updating content, ensure the toggle listener is active for the new/updated progress section
-  if (Array.isArray(steps) && steps.length > 0) {
-    ensureProgressToggleListener(contentElement);
-  }
-}
-
-/**
- * Ensures that a click listener is attached to the statusContentElement
- * to handle toggling the visibility of the progress steps list.
- * This listener is attached only once.
- * @param {HTMLElement} statusContentElement - The parent element where progress is displayed.
- */
-export function ensureProgressToggleListener(statusContentElement) {
-  if (statusContentElement && !statusContentElement.dataset.progressToggleListenerAttached) {
-    statusContentElement.addEventListener('click', (event) => {
-      const toggleHeader = event.target.closest('.progress-section-toggle');
-      if (toggleHeader) {
-        const targetId = toggleHeader.dataset.targetId;
-        const iconElement = toggleHeader.querySelector('.toggle-icon-progress');
-        // Assuming toggleSectionContent is imported from uiHandlers.js and is in scope
-        if (targetId && iconElement && typeof toggleSectionContent === 'function') {
-          toggleSectionContent(targetId, iconElement);
-        }
-      }
-    });
-    statusContentElement.dataset.progressToggleListenerAttached = 'true';
-  }
-}
-
-
-/**
- * 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.
- * @param {string} operationType - The type of operation to poll for (e.g., 'VALIDATION_ONLY', 'FULL_ONBOARDING').
- * @returns {Promise<boolean>} - Promise resolving to true if polling should continue, false otherwise.
- */
-export async function pollOperationStatus(categoryName, contentId, validateBtnId, publishBtnId, operationInitiator, operationType) {
-  const statusContentElement = document.getElementById(contentId);
-  ensureProgressToggleListener(statusContentElement); // Ensure listener is active during polling updates
-
-  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 {
-   // Add operationType as a query parameter
-   const response = await fetch(`/api/categories/${categoryName}/onboard/status?operationType=${encodeURIComponent(operationType)}`);
-   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') {
-        updateButtonStates(true);
-        return false; // Stop polling
-      } else {
-        // Operation is still in progress
-        updateButtonStates(false);
-        return true; // Continue polling
-      }
-    } else {
-      statusContentElement.innerHTML = `<p class="text-red-500">Error polling status: ${result.error || 'Unknown error'}</p>`;
-      updateButtonStates(true);
-      return false; // Stop polling
-    }
-  } 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>`;
-    updateButtonStates(true);
-    return false; // Stop polling
-  }
-}
-
-/**
- * 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);
-  ensureProgressToggleListener(statusContentElement); // Ensure listener is active for initial display
-
-  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;
-  }
-
-  const validationResult = validateFormFields(onboardForm, activeTab);
-  if (!validationResult.isValid) {
-    showToast('Please fix all validation errors before proceeding.', 'error');
-    validateButton.disabled = false;
-    validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
-    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
-
-    // Replace MCP Servers and Requirements with the current state from the form (newServersData).
-    // newServersData, generated by getFormData, already contains the correct, complete list
-    // of servers (including original, adhoc, and newly added ones) and their derived global requirements.
-    finalFeedConfiguration.mcpServers = newServersData.mcpServers || [];
-    finalFeedConfiguration.requirements = newServersData.requirements || [];
-  } 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);
-      // The onboardingId from the response is the combined ID (categoryName_operationType).
-      // We need the categoryName for polling, which we already have as a parameter.
-      // The operationType is also passed to pollOperationStatus.
-      const categoryNameForPolling = finalFeedConfiguration.name; // Use the original category name
-      const operationTypeForPolling = 'VALIDATION_ONLY'; // Validation always initiates 'VALIDATION_ONLY'
-      const initialStatus = result.data.status;
-
-      // Use string literals for status comparison, include 'succeeded'
-      const upperInitialStatus = typeof initialStatus === 'string' ? initialStatus.toUpperCase() : '';
-      if (categoryNameForPolling && upperInitialStatus !== 'COMPLETED' && upperInitialStatus !== 'FAILED' && upperInitialStatus !== 'SUCCEEDED') {
-        pollingIntervalId = setInterval(async () => {
-          const shouldContinue = await pollOperationStatus(categoryNameForPolling, contentId, validateButtonId, publishButtonId, 'validate', operationTypeForPolling);
-          if (!shouldContinue) {
-            clearInterval(pollingIntervalId);
-            pollingIntervalId = null;
-          }
-        }, 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');
-    }
-  }
-}