refactor: replace Breadcrumb navigation with ProgressBars component for improved step visualization and interaction

Author: Lasim

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

@@ -2,15 +2,8 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { ProgressBars } from '@/components/ui/progress-bars'
 import { FileText, Github, Code, Zap, CheckCircle, Loader2 } from 'lucide-vue-next'
 import { McpCatalogService } from '@/services/mcpCatalogService'
 import { useEventBus } from '@/composables/useEventBus'
@@ -82,6 +75,68 @@ const steps = [
   }
 ]
 
+// Progress steps for ProgressBars component
+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,
+      status,
+      clickable: index < currentStep.value // Only completed steps are clickable
+    }
+  })
+})
+
+// Calculate progress percentage
+const progressPercentage = computed(() => {
+  // Progress should match visual step positions:
+  // 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' 
+      ? t('mcpCatalog.form.navigation.updating')
+      : t('mcpCatalog.form.navigation.creating')
+  }
+  if (isFetchingGitHub.value) {
+    return t('mcpCatalog.form.navigation.fetching')
+  }
+  if (githubFetchError.value) {
+    return t('mcpCatalog.form.errors.githubFetch')
+  }
+  
+  const currentStepData = steps[currentStep.value]
+  return `${currentStepData.label} - ${t('mcpCatalog.form.steps.configuring')}`
+})
+
+// Progress variant based on state
+const progressVariant = computed(() => {
+  if (githubFetchError.value || submitError.value) return 'destructive'
+  if (isSubmitting.value) return 'default' // Keep default while submitting
+  // Only show success after actual completion (would need to be handled by parent component)
+  return 'default'
+})
+
 // State
 const currentStep = ref(0)
 const isSubmitting = ref(false)
@@ -194,6 +249,13 @@ const goToStep = (stepIndex: number) => {
   }
 }
 
+// Handle step click from ProgressBars
+const handleStepClick = (step: any, index: number) => {
+  if (step.clickable) {
+    goToStep(index)
+  }
+}
+
 const nextStep = () => {
   if (canGoNext.value) {
     const oldStep = currentStep.value
@@ -363,7 +425,6 @@ const loadFormData = () => {
   // For now, we'll keep the default empty form
 }
 
-
 // Form submission
 const submitForm = async () => {
   try {
@@ -392,39 +453,17 @@ onUnmounted(() => {
 
 <template>
   <div class="space-y-6">
-    <!-- Breadcrumb Navigation -->
-    <Breadcrumb>
-      <BreadcrumbList>
-        <template v-for="(step, index) in steps" :key="index">
-          <BreadcrumbItem>
-            <!-- Current Step -->
-            <BreadcrumbPage v-if="index === currentStep" class="flex items-center gap-2">
-              <component :is="step.icon" class="h-4 w-4" />
-              <span>{{ step.label }}</span>
-            </BreadcrumbPage>
-
-            <!-- Completed Steps (clickable) -->
-            <BreadcrumbLink
-              v-else-if="index < currentStep"
-              @click="goToStep(index)"
-              class="flex items-center gap-2 cursor-pointer hover:text-foreground"
-            >
-              <component :is="step.icon" class="h-4 w-4" />
-              <span>{{ step.label }}</span>
-            </BreadcrumbLink>
-
-            <!-- Future Steps (disabled) -->
-            <span v-else class="flex items-center gap-2 text-muted-foreground">
-              <component :is="step.icon" class="h-4 w-4" />
-              <span>{{ step.label }}</span>
-            </span>
-          </BreadcrumbItem>
-
-          <!-- Separator -->
-          <BreadcrumbSeparator v-if="index < steps.length - 1" />
-        </template>
-      </BreadcrumbList>
-    </Breadcrumb>
+    <!-- Progress Bar Navigation -->
+    <ProgressBars
+      :steps="progressSteps"
+      :progress="progressPercentage"
+      :title="progressTitle"
+      :variant="progressVariant"
+      size="md"
+      interactive
+      styled
+      @step-click="handleStepClick"
+    />
 
     <!-- Error Message -->
     <Alert v-if="submitError" variant="destructive">
@@ -433,7 +472,6 @@ onUnmounted(() => {
       </AlertDescription>
     </Alert>
 
-
     <!-- Step Content -->
     <div class="bg-white rounded-lg border p-6">
       <component
@@ -477,7 +515,7 @@ onUnmounted(() => {
           class="min-w-[120px]"
         >
           <Loader2 v-if="isFetchingGitHub" class="h-4 w-4 animate-spin mr-2" />
-          {{ isFetchingGitHub ? 'Fetching...' : t('mcpCatalog.form.navigation.next') }}
+          {{ isFetchingGitHub ? t('mcpCatalog.form.navigation.fetching') : t('mcpCatalog.form.navigation.next') }}
         </Button>
 
         <!-- Normal next button for other steps -->
@@ -504,7 +542,7 @@ onUnmounted(() => {
       <AlertDescription>
         {{ githubFetchError }}
         <br>
-        <span class="text-sm">Please check the URL and try again.</span>
+        <span class="text-sm">{{ t('mcpCatalog.validation.githubUrlInvalid') }}</span>
       </AlertDescription>
     </Alert>
   </div>