refactor(frontend): clean up code and improve readability in components

Author: Lasim

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

@@ -3,7 +3,7 @@
  *
  * This component uses storage-first architecture where:
  * - All form data is stored in localStorage via the event bus
- * - Component reads/writes directly to storage, not through v-model props  
+ * - Component reads/writes directly to storage, not through v-model props
  * - Real-time synchronization across all wizard steps
  * - No v-model props or emit patterns
  *
@@ -137,14 +137,8 @@ const handleTagKeydown = (event: KeyboardEvent) => {
   }
 }
 
-// Debug function to check storage state
-const debugStorageState = () => {
-  const currentData = eventBus.getState<BasicInfoFormData>(STORAGE_KEY)
-  console.log('[BasicInfoStep] Current storage state:', currentData)
-  console.log('[BasicInfoStep] Featured value:', currentData?.featured)
-}
-
 // Storage change handler
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleStorageChange = (data: { key: string; oldValue: any; newValue: any }) => {
   if (data.key === STORAGE_KEY) {
     // Storage changed externally, update local reactive data
@@ -155,13 +149,13 @@ const handleStorageChange = (data: { key: string; oldValue: any; newValue: any }
 // Lifecycle
 onMounted(() => {
   loadCategories()
-  
+
   // Load initial data from storage
   loadFromStorage()
-  
+
   // Listen for storage changes from other components
   eventBus.on('storage-changed', handleStorageChange)
-  
+
   // Initialize from props in edit mode if storage is empty
   if (props.mode === 'edit' && props.modelValue) {
     const currentData = eventBus.getState<BasicInfoFormData>(STORAGE_KEY)

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
@@ -27,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Emits
 const emit = defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   
   submit: [formData: any] // Use any to avoid circular type dependencies, parent view defines the final type
   cancel: []
   stepChanged: [data: { step: number; stepKey: string }]
@@ -43,7 +44,7 @@ interface McpServerAddFormData {
     github_url: string
     git_branch: string
     auto_populated: boolean
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+     
     repo_data?: any
   }
   claudeConfig: {
@@ -262,7 +263,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)
@@ -342,7 +343,7 @@ const handleGitHubStepNext = async () => {
 }
 
 // Auto-population function for GitHub data
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 const autoPopulateFromGitHub = (githubData: any) => {
   // Update GitHub data
   formData.value.github = {

services/frontend/src/components/admin/mcp-catalog/steps/ConfigurationSchemaEnvironmentSection.vue

@@ -1,13 +1,11 @@
 <!--
  * SHARED ENVIRONMENT VARIABLES CONFIGURATION SECTION
- * 
+ *
  * This component extracts ONLY the duplicated template code for environment variables.
  * No logic duplication - just the UI template that was identical in both components.
  -->
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -34,19 +32,18 @@ interface Props {
   items: EnvItem[]
   getCategoryInfo: (category: string) => {
     label: string
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     icon: any
     color: string
   }
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 const emit = defineEmits<{
   'add': []
   'edit': [index: number]
   'delete': [index: number]
 }>()
-
-const { t } = useI18n()
 </script>
 
 <template>

services/frontend/src/components/mcp-server/installation/TeamConfiguration.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
  
 import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'

services/frontend/src/composables/useDevices.ts

@@ -21,13 +21,17 @@ export function useDevices() {
 
   // Computed
   const sortedDevices = computed<DeviceTableItem[]>(() => {
-    return devices.value.map(device => ({
-      ...device,
-      statusBadgeVariant: device.is_active ? 'default' : 'secondary' as const,
-      osDisplayName: getOSDisplayName(device.os_type),
-      lastActivityDisplay: formatLastActivity(device.last_activity_at || device.last_login_at),
-      trustStatusDisplay: device.is_trusted ? t('devices.status.trusted') : t('devices.status.untrusted')
-    })).sort((a, b) => {
+    return devices.value.map(device => {
+      const statusBadgeVariant: 'default' | 'secondary' | 'destructive' | 'outline' = device.is_active ? 'default' : 'secondary'
+      
+      return {
+        ...device,
+        statusBadgeVariant,
+        osDisplayName: getOSDisplayName(device.os_type),
+        lastActivityDisplay: formatLastActivity(device.last_activity_at || device.last_login_at),
+        trustStatusDisplay: device.is_trusted ? t('devices.status.trusted') : t('devices.status.untrusted')
+      }
+    }).sort((a, b) => {
       // Sort by last activity, then by device name
       const aTime = new Date(a.last_activity_at || a.last_login_at || a.created_at).getTime()
       const bTime = new Date(b.last_activity_at || b.last_login_at || b.created_at).getTime()
@@ -43,44 +47,44 @@ export function useDevices() {
     const active = devices.value.filter(d => d.is_active).length
     const trusted = devices.value.filter(d => d.is_trusted).length
     const inactive = total - active
-    
+
     return { total, active, trusted, inactive }
   })
 
   // Helper functions
   function getOSDisplayName(osType: string | null): string {
     if (!osType) return t('devices.os.unknown')
-    
+
     const osMap: Record<string, string> = {
       'windows': t('devices.os.windows'),
       'darwin': t('devices.os.macos'),
       'macos': t('devices.os.macos'),
       'linux': t('devices.os.linux')
     }
-    
+
     return osMap[osType.toLowerCase()] || osType
   }
 
   function formatLastActivity(timestamp: string | null): string {
     if (!timestamp) return t('devices.time.never')
-    
+
     const now = new Date()
     const activityTime = new Date(timestamp)
     const diffMs = now.getTime() - activityTime.getTime()
     const diffMinutes = Math.floor(diffMs / (1000 * 60))
-    
+
     if (diffMinutes < 1) return t('devices.time.justNow')
     if (diffMinutes < 60) return t('devices.time.minutesAgo', { minutes: diffMinutes })
-    
+
     const diffHours = Math.floor(diffMinutes / 60)
     if (diffHours < 24) return t('devices.time.hoursAgo', { hours: diffHours })
-    
+
     const diffDays = Math.floor(diffHours / 24)
     if (diffDays < 7) return t('devices.time.daysAgo', { days: diffDays })
-    
+
     const diffWeeks = Math.floor(diffDays / 7)
     if (diffWeeks < 4) return t('devices.time.weeksAgo', { weeks: diffWeeks })
-    
+
     const diffMonths = Math.floor(diffDays / 30)
     return t('devices.time.monthsAgo', { months: diffMonths })
   }
@@ -106,19 +110,19 @@ export function useDevices() {
     try {
       isUpdating.value = true
       const updatedDevice = await DeviceService.updateDevice(deviceId, updates)
-      
+
       // Update local state
       const index = devices.value.findIndex(d => d.id === deviceId)
       if (index !== -1) {
         devices.value[index] = updatedDevice
       }
-      
+
       // Show success message
       toast.success(t('devices.messages.deviceUpdated'))
-      
+
       // Emit event for other components
       eventBus.emit('device-updated', { device: updatedDevice })
-      
+
       return updatedDevice
     } catch (error) {
       console.error('Failed to update device:', error)
@@ -135,17 +139,16 @@ export function useDevices() {
     try {
       isRemoving.value = true
       await DeviceService.removeDevice(deviceId)
-      
+
       // Remove from local state
-      const deviceName = devices.value.find(d => d.id === deviceId)?.device_name
       devices.value = devices.value.filter(d => d.id !== deviceId)
-      
+
       // Show success message
       toast.success(t('devices.messages.deviceRemoved'))
-      
+
       // Emit event for other components
       eventBus.emit('device-removed', { deviceId })
-      
+
     } catch (error) {
       console.error('Failed to remove device:', error)
       toast.error(t('devices.errors.removeDevice'), {
@@ -165,7 +168,7 @@ export function useDevices() {
     isLoading,
     isUpdating,
     isRemoving,
-    
+
     // Methods
     fetchDevices,
     updateDevice,

services/frontend/src/composables/useEventBus.ts

@@ -30,7 +30,10 @@ export type EventBusEvents = {
   'mcp-github-data-populated': any
   'mcp-form-step-changed': { from: number; to: number; stepKey: string }
   'technical-env-vars-updated': { envVars: string[] }
-
+  'device-loaded': { device: any }
+  'devices-loaded': { devices: any[] }
+  'device-updated': { device: any }
+  'device-removed': { deviceId: string }
   'mcp-edit-draft-updated': { serverId: string; data: any; step: number }
   'mcp-edit-draft-cleared': { serverId: string }
   'icons-cache-loaded': { count: number }

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
@@ -63,7 +64,7 @@ const loadServerData = async () => {
 }
 
 // Helper function to parse JSON fields with proper error handling
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 const parseJsonField = (fieldValue: any, defaultValue: any) => {
   if (!fieldValue || fieldValue === '' || (typeof fieldValue === 'string' && fieldValue.trim() === '')) {
     return defaultValue
@@ -79,42 +80,10 @@ const parseJsonField = (fieldValue: any, defaultValue: any) => {
   }
 }
 
-// Helper function to parse environment variables with robust handling
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const parseEnvironmentVariables = (envVars: any): any[] => {
-  // Handle null/undefined (service returns null as fallback)
-  if (!envVars || envVars === null || envVars === undefined) return []
-
-  // Handle arrays (expected format from API)
-  if (Array.isArray(envVars)) {
-    return envVars
-  }
-
-  // Handle JSON strings (legacy format)
-  if (typeof envVars === 'string') {
-    try {
-      const parsed = JSON.parse(envVars)
-      return Array.isArray(parsed) ? parsed : []
-    } catch {
-      return []
-    }
-  }
-
-  // Handle objects (in case service parsing changes)
-  if (typeof envVars === 'object') {
-    // If it's an object with array-like properties, try to convert
-    if (Object.keys(envVars).every(key => !isNaN(Number(key)))) {
-      return Object.values(envVars)
-    }
-  }
-
-  return []
-}
-
 // Convert server data to form data format
 const convertServerToFormData = (server: McpServer): Partial<McpServerFormData> => {
   // Convert installation methods to new format
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   
   const convertedInstallationMethods = (server.installation_methods || []).map((method: any) => {
     // Handle old format: {type, command, description}
     if (method.type && method.command && !method.client) {
@@ -138,7 +107,7 @@ const convertServerToFormData = (server: McpServer): Partial<McpServerFormData>
       args: method.args || [],
       env: method.env || {}
     }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   
   }).filter((method: any) =>
     // Filter out git clone template entries and any invalid entries
     method.command &&
@@ -149,11 +118,6 @@ const convertServerToFormData = (server: McpServer): Partial<McpServerFormData>
   // Parse tags with proper handling
   const parsedTags = parseJsonField(server.tags, [])
 
-  // Parse tools, resources, and prompts with proper handling
-  const parsedTools = parseJsonField(server.tools, [])
-  const parsedResources = parseJsonField(server.resources, [])
-  const parsedPrompts = parseJsonField(server.prompts, [])
-
   // Convert three-tier schema fields from API response
   const parseSchemaField = (field: any, defaultValue: any) => {
     if (!field) return defaultValue