feat(frontend): add ConfigurationHeaders and ConfigurationQueryParams components for managing installation headers and query parameters

- Implemented ConfigurationHeaders.vue to allow team admins to manage team and user headers.
- Implemented ConfigurationQueryParams.vue for managing team and user query parameters.
- Updated index.ts to export new components.
- Enhanced config.vue to integrate new configuration components and handle updates.

Author: Lasim

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

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { McpCatalogService } from '@/services/mcpCatalogService'
+import { McpInstallationService } from '@/services/mcpInstallationService'
+import { Spinner } from '@/components/ui/spinner'
+import {
+  ConfigurationArgs,
+  ConfigurationEnv,
+  ConfigurationHeaders,
+  ConfigurationQueryParams
+} from './config'
+import type { McpInstallation, UserConfiguration } from '@/types/mcp-installations'
+
+interface Props {
+  installation: McpInstallation
+  teamId: string
+  canEdit?: boolean
+  userRole?: 'team_admin' | 'team_user' | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  canEdit: true,
+  userRole: null
+})
+
+const emit = defineEmits<{
+  'installation-updated': [installation: McpInstallation]
+  'configuration-updated': [config: UserConfiguration]
+}>()
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const serverData = ref<any>(null)
+const isLoadingServer = ref(true)
+const userConfigurations = ref<UserConfiguration[]>([])
+const currentUserConfig = ref<UserConfiguration | null>(null)
+const isLoadingUserConfig = ref(true)
+
+const isTeamAdmin = computed(() => props.userRole === 'team_admin')
+
+const isStdio = computed(() => {
+  const transport = props.installation.server?.transport_type || serverData.value?.transport_type
+  return transport === 'stdio'
+})
+
+const isRemote = computed(() => {
+  const transport = props.installation.server?.transport_type || serverData.value?.transport_type
+  return transport === 'http' || transport === 'sse'
+})
+
+onMounted(async () => {
+  try {
+    isLoadingServer.value = true
+    isLoadingUserConfig.value = true
+
+    if (props.installation.server_id) {
+      serverData.value = await McpCatalogService.getServerById(props.installation.server_id)
+    }
+
+    await loadUserConfigurations()
+  } catch (error) {
+    console.error('Error loading data:', error)
+  } finally {
+    isLoadingServer.value = false
+    isLoadingUserConfig.value = false
+  }
+})
+
+const loadUserConfigurations = async () => {
+  try {
+    const configs: UserConfiguration[] = await McpInstallationService.getUserConfigurations(
+      props.teamId,
+      props.installation.id
+    )
+    userConfigurations.value = configs
+
+    if (configs.length > 0 && configs[0]) {
+      currentUserConfig.value = configs[0]
+    } else {
+      currentUserConfig.value = null
+    }
+  } catch (error) {
+    console.error('Error loading user configurations:', error)
+    userConfigurations.value = []
+    currentUserConfig.value = null
+  }
+}
+
+const handleInstallationUpdated = (updatedInstallation: McpInstallation) => {
+  emit('installation-updated', updatedInstallation)
+}
+
+const handleConfigurationUpdated = async (config: UserConfiguration) => {
+  await loadUserConfigurations()
+  emit('configuration-updated', config)
+}
+</script>
+
+<template>
+  <div v-if="isLoadingServer || isLoadingUserConfig" class="flex items-center justify-center py-12">
+    <Spinner class="h-8 w-8" />
+  </div>
+
+  <div v-else class="space-y-0">
+    <!-- STDIO TRANSPORT: Arguments + Environment Variables -->
+    <ConfigurationArgs
+      v-if="isStdio"
+      :installation="installation"
+      :server-data="serverData"
+      :current-user-config="currentUserConfig"
+      :team-id="teamId"
+      :can-edit="canEdit"
+      :is-team-admin="isTeamAdmin"
+      @installation-updated="handleInstallationUpdated"
+      @configuration-updated="handleConfigurationUpdated"
+    />
+
+    <ConfigurationEnv
+      v-if="isStdio"
+      :installation="installation"
+      :server-data="serverData"
+      :current-user-config="currentUserConfig"
+      :team-id="teamId"
+      :can-edit="canEdit"
+      :is-team-admin="isTeamAdmin"
+      @installation-updated="handleInstallationUpdated"
+      @configuration-updated="handleConfigurationUpdated"
+    />
+
+    <!-- HTTP/SSE TRANSPORT: Headers + URL Query Parameters -->
+    <ConfigurationHeaders
+      v-if="isRemote"
+      :installation="installation"
+      :server-data="serverData"
+      :current-user-config="currentUserConfig"
+      :team-id="teamId"
+      :can-edit="canEdit"
+      :is-team-admin="isTeamAdmin"
+      @installation-updated="handleInstallationUpdated"
+      @configuration-updated="handleConfigurationUpdated"
+    />
+
+    <ConfigurationQueryParams
+      v-if="isRemote"
+      :installation="installation"
+      :server-data="serverData"
+      :current-user-config="currentUserConfig"
+      :team-id="teamId"
+      :can-edit="canEdit"
+      :is-team-admin="isTeamAdmin"
+      @installation-updated="handleInstallationUpdated"
+      @configuration-updated="handleConfigurationUpdated"
+    />
+  </div>
+</template>

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

@@ -15,29 +15,21 @@ const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
 
-// Get environment variables count for badge
-const environmentVariablesCount = computed(() => {
-  if (!props.installation?.user_environment_variables) return 0
-  return Object.keys(props.installation.user_environment_variables).length
-})
-
 // Map route names to tab values
 const routeToTabMap: Record<string, string> = {
   'McpServerInstallationGeneral': 'general',
   'McpServerInstallationTools': 'tools',
-  'McpServerInstallationUserConfig': 'user-config',
-  'McpServerInstallationTeamConfig': 'team-config',
   'McpServerInstallationRequests': 'requests',
+  'McpServerInstallationConfig': 'config',
   'McpServerInstallationDangerZone': 'danger-zone',
 }
 
 // Map tab values to route names
 const tabToRouteMap: Record<string, string> = {
   'general': 'McpServerInstallationGeneral',
   'tools': 'McpServerInstallationTools',
-  'user-config': 'McpServerInstallationUserConfig',
-  'team-config': 'McpServerInstallationTeamConfig',
   'requests': 'McpServerInstallationRequests',
+  'config': 'McpServerInstallationConfig',
   'danger-zone': 'McpServerInstallationDangerZone',
 }
 
@@ -61,12 +53,7 @@ const activeTab = computed({
     <DsTabsItem value="general" label="General" />
     <DsTabsItem value="tools" :label="t('mcpInstallations.details.tools.title')" />
     <DsTabsItem value="requests" label="Requests" />
-    <DsTabsItem value="user-config" label="User Configuration" />
-    <DsTabsItem
-      value="team-config"
-      label="Team Configuration"
-      :badge="environmentVariablesCount > 0 ? environmentVariablesCount : undefined"
-    />
+    <DsTabsItem value="config" label="Configuration" />
     <DsTabsItem value="danger-zone" label="Danger Zone" />
   </DsTabs>
 </template>