refactor: update installation handling and status representation in MCP components

Lasim · Lasim · commit 89f9447b1278 · 2025-07-20T07:50:28.000+02:00
diff --git a/services/frontend/src/components/mcp-server/InstallServerModal.vue b/services/frontend/src/components/mcp-server/InstallServerModal.vue
diff --git a/services/frontend/src/components/mcp-server/McpInstallationsCard.vue b/services/frontend/src/components/mcp-server/McpInstallationsCard.vue
@@ -102,23 +102,26 @@ const sortedInstallations = computed(() => {
 })
 
 // Methods
-const getStatusVariant = (status: McpInstallation['status']) => {
-  switch (status) {
-    case 'active':
-      return 'default'
-    case 'error':
-      return 'destructive'
-    case 'installing':
-      return 'secondary'
-    case 'stopped':
-      return 'outline'
+const getStatusVariant = (installationType: string) => {
+  switch (installationType) {
+    case 'local':
+      return 'default' // Green/success for local (ready)
+    case 'cloud':
+      return 'secondary' // Gray for cloud
     default:
       return 'secondary'
   }
 }
 
-const getStatusText = (status: McpInstallation['status']) => {
-  return t(`mcpInstallations.status.${status}`)
+const getStatusText = (installationType: string) => {
+  switch (installationType) {
+    case 'local':
+      return t('mcpInstallations.status.ready')
+    case 'cloud':
+      return t('mcpInstallations.status.cloud')
+    default:
+      return t('mcpInstallations.status.unknown')
+  }
 }
 
 const formatDate = (dateString: string) => {
@@ -252,8 +255,8 @@ const handleInstallServer = () => {
                   <p class="text-sm font-medium leading-none truncate">
                     {{ installation.installation_name }}
                   </p>
-                  <Badge :variant="getStatusVariant(installation.status)" class="text-xs">
-                    {{ getStatusText(installation.status) }}
+                  <Badge :variant="getStatusVariant(installation.installation_type)" class="text-xs">
+                    {{ getStatusText(installation.installation_type) }}
                   </Badge>
                 </div>
                 <p class="text-sm text-muted-foreground truncate mb-1">
diff --git a/services/frontend/src/i18n/locales/en/mcp-installations.ts b/services/frontend/src/i18n/locales/en/mcp-installations.ts
@@ -13,7 +13,10 @@ export default {
     installing: 'Installing',
     stopped: 'Stopped',
     deprecated: 'Deprecated',
-    maintenance: 'Maintenance'
+    maintenance: 'Maintenance',
+    ready: 'Ready',
+    cloud: 'Cloud',
+    unknown: 'Unknown'
   },
 
   table: {
diff --git a/services/frontend/src/types/mcp-installations.ts b/services/frontend/src/types/mcp-installations.ts
@@ -26,12 +26,13 @@ export interface McpInstallation {
   installation_name: string
   server_id: string
   server: McpServer
-  status: 'active' | 'error' | 'installing' | 'stopped'
+  installation_type: 'local' | 'cloud'
   user_environment_variables: Record<string, string>
   team_id: string
-  created_by: string
+  user_id: string
   created_at: string
   updated_at: string
+  last_used_at: string | null
 }
 
 export interface InstallServerRequest {
diff --git a/services/frontend/src/views/teams/TeamTableColumns.vue b/services/frontend/src/views/teams/TeamTableColumns.vue
@@ -30,11 +30,6 @@ const sortedTeams = computed(() => {
   return [...props.teams].sort((a, b) => a.name.localeCompare(b.name))
 })
 
-// Helper function to check if user can manage a specific team
-const canManageTeam = (team: TeamWithRole): boolean => {
-  return props.userPermissions.includes('teams.edit') && team.role === 'team_admin'
-}
-
 // Helper function to format date
 const formatDate = (date: Date | string): string => {
   const dateObj = typeof date === 'string' ? new Date(date) : date
diff --git a/services/frontend/src/views/teams/manage/[id].vue b/services/frontend/src/views/teams/manage/[id].vue
@@ -70,10 +70,6 @@ const canDeleteTeam = computed(() => {
          !team.value?.is_default
 })
 
-const isTeamOwner = computed(() => {
-  return team.value?.is_owner === true
-})
-
 const hasChanges = computed(() => {
   if (!team.value) return false
   return formData.value.name !== team.value.name ||
