refactor: optimize step position calculations and remove debug logging in MCP server data conversion

Author: Lasim

services/frontend/src/components/admin/mcp-catalog/McpServerAddFormWizard.vue

@@ -86,18 +86,18 @@ const steps = [
 const progressSteps = computed(() => {
   return steps.map((step, index) => {
     let status: 'completed' | 'current' | 'pending' | 'error' = 'pending'
-    
+
     if (index < currentStep.value) {
       status = 'completed'
     } else if (index === currentStep.value) {
       status = 'current'
     }
-    
+
     // Check for errors
     if (index === 0 && githubFetchError.value) {
       status = 'error'
     }
-    
+
     return {
       id: step.key,
       label: step.label,
@@ -130,7 +130,7 @@ const progressTitle = computed(() => {
   if (githubFetchError.value) {
     return t('mcpCatalog.form.errors.githubFetch')
   }
-  
+
   const currentStepData = steps[currentStep.value]
   return `${currentStepData.label} - ${t('mcpCatalog.form.steps.configuring')}`
 })
@@ -256,6 +256,7 @@ const goToStep = (stepIndex: number) => {
 }
 
 // Handle step click from ProgressBars
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleStepClick = (step: any, index: number) => {
   if (step.clickable) {
     goToStep(index)

services/frontend/src/components/admin/mcp-catalog/McpServerEditFormWizard.vue

@@ -79,18 +79,18 @@ const steps = [
 const progressSteps = computed(() => {
   return steps.map((step, index) => {
     let status: 'completed' | 'current' | 'pending' | 'error' = 'pending'
-    
+
     if (index < currentStep.value) {
       status = 'completed'
     } else if (index === currentStep.value) {
       status = 'current'
     }
-    
+
     // Check for errors
     if (index === 0 && githubFetchError.value) {
       status = 'error'
     }
-    
+
     return {
       id: step.key,
       label: step.label,
@@ -106,15 +106,15 @@ const progressPercentage = computed(() => {
   // For 5 steps: 0%, 25%, 50%, 75%, 100%
   const totalSteps = steps.length
   if (totalSteps <= 1) return 0
-  
+
   const progressIncrement = 100 / (totalSteps - 1)
   return currentStep.value * progressIncrement
 })
 
 // Progress title based on current step
 const progressTitle = computed(() => {
   if (isSubmitting.value) {
-    return props.mode === 'edit' 
+    return props.mode === 'edit'
       ? t('mcpCatalog.form.navigation.updating')
       : t('mcpCatalog.form.navigation.creating')
   }
@@ -124,7 +124,7 @@ const progressTitle = computed(() => {
   if (githubFetchError.value) {
     return t('mcpCatalog.form.errors.githubFetch')
   }
-  
+
   const currentStepData = steps[currentStep.value]
   return `${currentStepData.label} - ${t('mcpCatalog.form.steps.configuring')}`
 })
@@ -250,6 +250,7 @@ const goToStep = (stepIndex: number) => {
 }
 
 // Handle step click from ProgressBars
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleStepClick = (step: any, index: number) => {
   if (step.clickable) {
     goToStep(index)

services/frontend/src/components/ui/progress-bars/ProgressBars.vue

@@ -158,28 +158,29 @@ const stepVariants = cva(
 
 const clampedProgress = computed(() => Math.max(0, Math.min(100, props.progress)))
 
-const gridCols = computed(() => {
-  const stepCount = props.steps.length
-  if (stepCount <= 2) return 'grid-cols-2'
-  if (stepCount <= 3) return 'grid-cols-3'
-  if (stepCount <= 4) return 'grid-cols-4'
-  if (stepCount <= 5) return 'grid-cols-5'
-  if (stepCount <= 6) return 'grid-cols-6'
-  return 'grid-cols-6' // Max 6 columns for readability
-})
+// Calculate the exact position percentage for each step
+function getStepPosition(index: number) {
+  const totalSteps = props.steps.length
+  if (totalSteps <= 1) return 50 // Center if only one step
+  
+  // Calculate position as percentage (0% to 100%)
+  return (index / (totalSteps - 1)) * 100
+}
 
 function handleStepClick(step: ProgressStep, index: number) {
   if (props.interactive && step.clickable) {
     emit('stepClick', step, index)
   }
 }
 
-function getStepAlignment(index: number) {
-  const totalSteps = props.steps.length
-  if (totalSteps <= 1) return 'text-center'
-  if (index === 0) return 'text-left'
-  if (index === totalSteps - 1) return 'text-right'
-  return 'text-center'
+// Get transform style to center text on the exact position
+function getStepTransform(index: number) {
+  const position = getStepPosition(index)
+  
+  // Adjust transform to center the text on the position
+  if (position === 0) return 'translateX(0%)' // First step: no adjustment needed
+  if (position === 100) return 'translateX(-100%)' // Last step: move completely left
+  return 'translateX(-50%)' // Middle steps: center on position
 }
 </script>
 
@@ -215,10 +216,7 @@ function getStepAlignment(index: number) {
       <!-- Steps -->
       <div
         v-if="showSteps && steps.length > 0"
-        :class="[
-          'hidden sm:grid gap-2 text-sm font-medium',
-          gridCols
-        ]"
+        class="hidden sm:block relative w-full pt-2"
       >
         <button
           v-for="(step, index) in steps"
@@ -230,8 +228,12 @@ function getStepAlignment(index: number) {
               status: step.status,
               clickable: interactive && step.clickable
             })),
-            getStepAlignment(index)
+            'absolute text-sm font-medium whitespace-nowrap'
           ]"
+          :style="{
+            left: `${getStepPosition(index)}%`,
+            transform: getStepTransform(index)
+          }"
           @click="handleStepClick(step, index)"
         >
           {{ step.label }}

services/frontend/src/views/admin/mcp-server-catalog/edit/[id].vue

@@ -150,28 +150,8 @@ const convertServerToFormData = (server: McpServer): Partial<McpServerFormData>
   const parsedResources = parseJsonField(server.resources, [])
   const parsedPrompts = parseJsonField(server.prompts, [])
 
-  // Parse environment variables with robust handling
   const parsedEnvironmentVariables = parseEnvironmentVariables(server.environment_variables)
 
-  // Debug logging to help troubleshoot
-  console.log('Server data conversion:', {
-    serverId: server.id,
-    rawEnvironmentVariables: server.environment_variables,
-    parsedEnvironmentVariables,
-    environmentVariablesType: typeof server.environment_variables,
-    environmentVariablesLength: parsedEnvironmentVariables.length,
-    isArray: Array.isArray(server.environment_variables),
-    rawLength: server.environment_variables?.length
-  })
-
-  // Additional debug logging for capabilities
-  console.log('Capabilities data being set:', {
-    environment_variables: parsedEnvironmentVariables,
-    tools: parsedTools,
-    resources: parsedResources,
-    prompts: parsedPrompts
-  })
-
   return {
     basic: {
       name: server.name || '',