refactor: implement server pre-selection in installation wizard and enhance UI with install button

Author: Lasim

services/frontend/src/components/mcp-server/wizard/McpServerInstallWizard.vue

@@ -2,24 +2,38 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { ProgressBars } from '@/components/ui/progress-bars'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Server, Settings, Cloud, Loader2 } from 'lucide-vue-next'
 import { McpInstallationService } from '@/services/mcpInstallationService'
 import { TeamService } from '@/services/teamService'
+import { McpCatalogService } from '@/services/mcpCatalogService'
 import { useEventBus } from '@/composables/useEventBus'
 import McpServerSelectionStep from './McpServerSelectionStep.vue'
 import EnvironmentVariablesStep from './EnvironmentVariablesStep.vue'
 import PlatformSelectionStep from './PlatformSelectionStep.vue'
 
+// Props
+interface Props {
+  initialServerId?: string
+  initialStep?: number
+}
+
+withDefaults(defineProps<Props>(), {
+  initialServerId: '',
+  initialStep: 0
+})
+
 // Emits
 const emit = defineEmits<{
   complete: [installationData: any]
   cancel: []
 }>()
 
 const { t } = useI18n()
+const route = useRoute()
 const eventBus = useEventBus()
 
 // Form data interface
@@ -63,13 +77,13 @@ const steps = [
 const progressSteps = computed(() => {
   return steps.map((step, index) => {
     let status: 'completed' | 'current' | 'pending' = 'pending'
-    
+
     if (index < currentStep.value) {
       status = 'completed'
     } else if (index === currentStep.value) {
       status = 'current'
     }
-    
+
     return {
       id: step.key,
       label: step.label,
@@ -157,7 +171,7 @@ const nextStep = () => {
 const previousStep = () => {
   if (canGoPrevious.value) {
     currentStep.value--
-    
+
     // Reset form data when going back to previous steps
     if (currentStep.value === 0) {
       // Going back to server selection - clear server data
@@ -276,10 +290,51 @@ const handleValidationChange = (isValid: boolean, missingFields: string[]) => {
   }
 }
 
+// Handle query parameters for pre-selection
+const handleQueryParameters = async () => {
+  const serverId = route.query.serverId as string
+  const step = route.query.step as string
+
+  if (serverId) {
+    try {
+      // Fetch server data from API
+      const serverData = await McpCatalogService.getServerById(serverId)
+
+      if (serverData) {
+        // Pre-populate form data
+        formData.value.server.server_id = serverId
+        formData.value.server.server_data = serverData
+
+        // Pre-populate environment variables with default values
+        if (serverData.environment_variables) {
+          serverData.environment_variables.forEach((env: any) => {
+            if (env.placeholder && env.placeholder !== `<insert-your-${env.name.toLowerCase()}-here>`) {
+              formData.value.environment.user_environment_variables[env.name] = env.placeholder
+            } else {
+              formData.value.environment.user_environment_variables[env.name] = ''
+            }
+          })
+        }
+
+        // Set initial step if specified
+        if (step === '2') {
+          currentStep.value = 1 // Step 2 = index 1
+        }
+      }
+    } catch (error) {
+      console.error('Error loading server from query parameters:', error)
+      submitError.value = 'Failed to load the selected server. Please try again.'
+    }
+  }
+}
+
 onMounted(async () => {
   // Initialize team context
   await initializeTeamContext()
 
+  // Handle query parameters for pre-selection
+  await handleQueryParameters()
+
   // Listen for wizard reset events
   eventBus.on('mcp-install-wizard-reset', () => {
     currentStep.value = 0

services/frontend/src/i18n/locales/en/mcp-installations.ts

@@ -167,6 +167,7 @@ export default {
     title: 'MCP Server: {name}',
     titleLoading: 'Loading MCP Server...',
     backToServers: 'Back to MCP Servers',
+    installServer: 'Install MCP Server',
     loading: 'Loading server details...',
     errorLoading: 'Error loading server: {error}',
     serverInformation: 'Server Information',

services/frontend/src/views/mcp-server/add.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { ArrowLeft } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
@@ -10,6 +10,7 @@ import McpServerInstallWizard from '@/components/mcp-server/wizard/McpServerInst
 
 const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
 const eventBus = useEventBus()
 
 
@@ -65,6 +66,8 @@ onMounted(() => {
 
       <!-- Wizard Component -->
       <McpServerInstallWizard
+        :initial-server-id="route.query.serverId as string"
+        :initial-step="route.query.step ? parseInt(route.query.step as string) - 1 : 0"
         @complete="handleWizardComplete"
         @cancel="handleWizardCancel"
       />

services/frontend/src/views/mcp-server/view/[id].vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { ArrowLeft, Github, ExternalLink, Star, Package, Code, Settings, Calendar, Tag } from 'lucide-vue-next'
+import { ArrowLeft, Github, ExternalLink, Star, Package, Code, Settings, Calendar, Tag, Download } from 'lucide-vue-next'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import EnvironmentVariablesDisplay from '@/components/admin/mcp-catalog/EnvironmentVariablesDisplay.vue'
 import { McpCatalogService } from '@/services/mcpCatalogService'
@@ -188,12 +188,23 @@ const formatDate = (dateString: string) => {
 const goBack = () => {
   router.push('/mcp-server')
 }
+
+const installServer = () => {
+  // Navigate to installation wizard with server pre-selected
+  router.push({
+    path: '/mcp-server/add',
+    query: {
+      serverId: serverId,
+      step: '2'
+    }
+  })
+}
 </script>
 
 <template>
   <DashboardLayout :title="server ? t('mcpInstallations.view.title', { name: server.name }) : t('mcpInstallations.view.titleLoading')">
     <div class="space-y-6">
-      <!-- Header with Back Button -->
+      <!-- Header with Back Button and Install Button -->
       <div class="flex items-center justify-between">
         <Button
           variant="outline"
@@ -202,6 +213,15 @@ const goBack = () => {
           <ArrowLeft class="h-4 w-4 mr-2" />
           {{ t('mcpInstallations.view.backToServers') }}
         </Button>
+        
+        <Button
+          v-if="server"
+          @click="installServer"
+          class="flex items-center gap-2"
+        >
+          <Download class="h-4 w-4" />
+          {{ t('mcpInstallations.view.installServer') }}
+        </Button>
       </div>
 
       <!-- Loading State -->