📝 docs(config-wizard): update description for migration architectures

- Enhance the wizard description to include support for three migration type architectures: Work Items, Pipelines, and Custom.
- Clarify the types and constraints associated with each migration type.

💄 style(config-wizard): improve CSS for migration type selection
- Introduce new styles for constrained and flexible migration types, adding gradient backgrounds and hover effects.
- Enhance form styling for better readability and user experience.

♻️ refactor(config-wizard): enhance JS logic for type and processor handling
- Refactor logic to handle pre-configured migration types with locked processors and endpoints.
- Update UI interactions to better guide users based on selected migration type and available processors.
- Improve code readability and consistency by standardizing string literals and object properties.

Author: MrHinsh

docs/content/docs/config-wizard.md

@@ -1,6 +1,6 @@
 ---
 title: Interactive Configuration Wizard
-description: Build your Azure DevOps Migration Tools configuration with our interactive step-by-step wizard
+description: Build your Azure DevOps Migration Tools configuration with our interactive step-by-step wizard supporting three migration type architectures
 weight: 50
 date: 2025-06-26T12:00:00Z
 discussionId: 
@@ -11,4 +11,10 @@ aliases:
 layout: config-wizard
 ---
 
-Use this interactive wizard to build your Azure DevOps Migration Tools configuration. The wizard will guide you through each step and generate a complete configuration file based on your selections.
+Use this interactive wizard to build your Azure DevOps Migration Tools configuration. The wizard supports three primary migration types:
+
+- **Work Items**: Standard work item migration with pre-configured TfsWorkItemEndpoint and TfsWorkItemMigrationProcessor
+- **Pipelines**: Pipeline migration with pre-configured AzureDevOpsEndpoint and AzureDevOpsPipelineProcessor  
+- **Custom**: Advanced scenarios with complete flexibility to configure multiple endpoints and processors
+
+The wizard will guide you through each step and generate a complete configuration file based on your selections and the migration type constraints.

docs/static/css/config-wizard.css

@@ -37,7 +37,7 @@
 }
 
 .wizard-step:not(:last-child)::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 15px;
   left: 60%;
@@ -205,77 +205,114 @@
   margin-bottom: 0;
 }
 
-/* Processor configuration */
-.processor-config {
-  background: var(--bs-light);
-  border-radius: 8px;
-  padding: 1.5rem;
-  margin-top: 1rem;
-  display: none;
+/* Migration Type Architecture Styles */
+
+/* Constrained migration types (WorkItems & Pipelines) */
+.config-option-constrained {
+  border: 2px solid var(--bs-info);
+  background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.1) 100%);
 }
 
-[data-bs-theme="dark"] .processor-config {
-  background: var(--bs-gray-800);
+.config-option-constrained:hover {
+  border-color: var(--bs-info);
+  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.15) 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(13, 110, 253, 0.15);
 }
 
-.processor-config.active {
-  display: block;
-  animation: slideDown 0.3s ease;
+.config-option-constrained.selected {
+  border-color: var(--bs-info);
+  background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.2) 100%);
 }
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 500px;
-  }
+/* Flexible migration types (Custom) */
+.config-option-flexible {
+  border: 2px solid var(--bs-success);
+  background: linear-gradient(135deg, rgba(25, 135, 84, 0.05) 0%, rgba(25, 135, 84, 0.1) 100%);
 }
 
-/* Configuration preview */
-.config-preview {
-  background: var(--bs-dark);
-  color: var(--bs-light);
+.config-option-flexible:hover {
+  border-color: var(--bs-success);
+  background: linear-gradient(135deg, rgba(25, 135, 84, 0.1) 0%, rgba(25, 135, 84, 0.15) 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(25, 135, 84, 0.15);
+}
+
+.config-option-flexible.selected {
+  border-color: var(--bs-success);
+  background: linear-gradient(135deg, rgba(25, 135, 84, 0.15) 0%, rgba(25, 135, 84, 0.2) 100%);
+}
+
+/* Configuration detail styling */
+.config-option-detail {
+  font-size: 0.9rem;
+  color: var(--bs-gray-700);
+  margin-bottom: 0.5rem;
+}
+
+/* Processor configuration forms */
+.processor-config-form {
+  background: var(--bs-gray-50);
   border-radius: 8px;
   padding: 1.5rem;
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 0.9rem;
-  overflow-x: auto;
-  max-height: 600px;
-  overflow-y: auto;
+  border: 1px solid var(--bs-gray-200);
 }
 
-[data-bs-theme="dark"] .config-preview {
-  background: var(--bs-black);
-  border: 1px solid var(--bs-gray-700);
+.config-subsection {
+  background: white;
+  border-radius: 6px;
+  padding: 1rem;
+  border: 1px solid var(--bs-gray-200);
+  margin-bottom: 1rem;
 }
 
-/* Validation alerts */
-.validation-alert {
-  border-radius: 8px;
+.config-subsection h4 {
+  border-bottom: 2px solid var(--bs-primary);
+  padding-bottom: 0.5rem;
   margin-bottom: 1rem;
 }
 
-/* Form controls */
-.wizard-form-group {
-  margin-bottom: 1.5rem;
+.config-subsection h5 {
+  color: var(--bs-gray-700);
+  font-size: 1.1rem;
 }
 
-.wizard-form-label {
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-  color: var(--bs-dark);
+/* Named endpoint configuration */
+#namedEndpointsContainer .card {
+  border-left: 4px solid var(--bs-primary);
 }
 
-[data-bs-theme="dark"] .wizard-form-label {
-  color: var(--bs-light);
+#namedEndpointsContainer .card-header {
+  background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.1) 100%);
+}
+
+/* Selected processors configuration */
+#selectedProcessorsConfig .card {
+  border-left: 4px solid var(--bs-success);
+}
+
+#selectedProcessorsConfig .card-header {
+  background: linear-gradient(135deg, rgba(25, 135, 84, 0.05) 0%, rgba(25, 135, 84, 0.1) 100%);
+}
+
+/* Locked/pre-configured indicators */
+.badge.bg-info {
+  background-color: var(--bs-info) !important;
+}
+
+.badge.bg-success {
+  background-color: var(--bs-success) !important;
+}
+
+/* Enhanced form styling for constrained modes */
+.wizard-form-group label {
+  font-weight: 600;
+  color: var(--bs-gray-800);
 }
 
 .wizard-form-help {
-  font-size: 0.9rem;
-  color: var(--bs-secondary);
+  font-size: 0.875rem;
+  color: var(--bs-gray-600);
   margin-top: 0.25rem;
 }
 
@@ -285,23 +322,32 @@
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .wizard-step:not(:last-child)::after {
     display: none;
   }
-  
+
   .wizard-content {
     padding: 1rem;
   }
-  
+
   .wizard-navigation {
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .wizard-nav-button {
     width: 100%;
   }
+
+  .config-option-constrained,
+  .config-option-flexible {
+    margin-bottom: 1rem;
+  }
+
+  .config-option-detail {
+    font-size: 0.8rem;
+  }
 }
 
 /* Loading states */