Skip to content

Commit 84b3943

Browse files
LasimLasim
committed
fix(frontend): add empty state to mcp server config page
1 parent 87c39b4 commit 84b3943

2 files changed

Lines changed: 127 additions & 52 deletions

File tree

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

Lines changed: 120 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script setup lang="ts">
22
import { ref, computed, onMounted } from 'vue'
3+
import { useI18n } from 'vue-i18n'
34
import { McpCatalogService } from '@/services/mcpCatalogService'
45
import { McpInstallationService } from '@/services/mcpInstallationService'
5-
import { Spinner } from '@/components/ui/spinner'
6+
import { Skeleton } from '@/components/ui/skeleton'
7+
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
8+
import { Settings } from 'lucide-vue-next'
69
import {
710
ConfigurationArgs,
811
ConfigurationEnv,
@@ -28,6 +31,8 @@ const emit = defineEmits<{
2831
'configuration-updated': [config: UserConfiguration]
2932
}>()
3033
34+
const { t } = useI18n()
35+
3136
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3237
const serverData = ref<any>(null)
3338
const isLoadingServer = ref(true)
@@ -47,6 +52,50 @@ const isRemote = computed(() => {
4752
return transport === 'http' || transport === 'sse'
4853
})
4954
55+
// Helper function to safely parse schema
56+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
57+
const getSchema = (schema: any) => {
58+
if (!schema) return []
59+
try {
60+
return Array.isArray(schema) ? schema : JSON.parse(schema)
61+
} catch {
62+
return []
63+
}
64+
}
65+
66+
// Check if any configuration schema exists
67+
const hasAnyConfiguration = computed(() => {
68+
if (!serverData.value) return false
69+
70+
// Check STDIO schemas
71+
if (isStdio.value) {
72+
const teamArgsSchema = getSchema(serverData.value.team_args_schema)
73+
const userArgsSchema = getSchema(serverData.value.user_args_schema)
74+
const teamEnvSchema = getSchema(serverData.value.team_env_schema)
75+
const userEnvSchema = getSchema(serverData.value.user_env_schema)
76+
77+
return teamArgsSchema.length > 0 ||
78+
userArgsSchema.length > 0 ||
79+
teamEnvSchema.length > 0 ||
80+
userEnvSchema.length > 0
81+
}
82+
83+
// Check HTTP/SSE schemas
84+
if (isRemote.value) {
85+
const teamHeadersSchema = getSchema(serverData.value.team_headers_schema)
86+
const userHeadersSchema = getSchema(serverData.value.user_headers_schema)
87+
const teamQueryParamsSchema = getSchema(serverData.value.team_url_query_params_schema)
88+
const userQueryParamsSchema = getSchema(serverData.value.user_url_query_params_schema)
89+
90+
return teamHeadersSchema.length > 0 ||
91+
userHeadersSchema.length > 0 ||
92+
teamQueryParamsSchema.length > 0 ||
93+
userQueryParamsSchema.length > 0
94+
}
95+
96+
return false
97+
})
98+
5099
onMounted(async () => {
51100
try {
52101
isLoadingServer.value = true
@@ -96,59 +145,78 @@ const handleConfigurationUpdated = async (config: UserConfiguration) => {
96145
</script>
97146

98147
<template>
99-
<div v-if="isLoadingServer || isLoadingUserConfig" class="flex items-center justify-center py-12">
100-
<Spinner class="h-8 w-8" />
148+
<!-- Loading State with Skeleton -->
149+
<div v-if="isLoadingServer || isLoadingUserConfig" class="space-y-4">
150+
<Skeleton class="h-32 w-full rounded-lg" />
151+
<Skeleton class="h-32 w-full rounded-lg" />
152+
<Skeleton class="h-32 w-full rounded-lg" />
101153
</div>
102154

103155
<div v-else class="space-y-0">
104-
<!-- STDIO TRANSPORT: Arguments + Environment Variables -->
105-
<ConfigurationArgs
106-
v-if="isStdio"
107-
:installation="installation"
108-
:server-data="serverData"
109-
:current-user-config="currentUserConfig"
110-
:team-id="teamId"
111-
:can-edit="canEdit"
112-
:is-team-admin="isTeamAdmin"
113-
@installation-updated="handleInstallationUpdated"
114-
@configuration-updated="handleConfigurationUpdated"
115-
/>
116-
117-
<ConfigurationEnv
118-
v-if="isStdio"
119-
:installation="installation"
120-
:server-data="serverData"
121-
:current-user-config="currentUserConfig"
122-
:team-id="teamId"
123-
:can-edit="canEdit"
124-
:is-team-admin="isTeamAdmin"
125-
@installation-updated="handleInstallationUpdated"
126-
@configuration-updated="handleConfigurationUpdated"
127-
/>
128-
129-
<!-- HTTP/SSE TRANSPORT: Headers + URL Query Parameters -->
130-
<ConfigurationHeaders
131-
v-if="isRemote"
132-
:installation="installation"
133-
:server-data="serverData"
134-
:current-user-config="currentUserConfig"
135-
:team-id="teamId"
136-
:can-edit="canEdit"
137-
:is-team-admin="isTeamAdmin"
138-
@installation-updated="handleInstallationUpdated"
139-
@configuration-updated="handleConfigurationUpdated"
140-
/>
141-
142-
<ConfigurationQueryParams
143-
v-if="isRemote"
144-
:installation="installation"
145-
:server-data="serverData"
146-
:current-user-config="currentUserConfig"
147-
:team-id="teamId"
148-
:can-edit="canEdit"
149-
:is-team-admin="isTeamAdmin"
150-
@installation-updated="handleInstallationUpdated"
151-
@configuration-updated="handleConfigurationUpdated"
152-
/>
156+
<!-- Empty State: No Configuration -->
157+
<Empty v-if="!hasAnyConfiguration">
158+
<EmptyHeader>
159+
<EmptyMedia variant="icon">
160+
<Settings />
161+
</EmptyMedia>
162+
<EmptyTitle>{{ t('mcpInstallations.details.config.noConfig.title') }}</EmptyTitle>
163+
<EmptyDescription>
164+
{{ t('mcpInstallations.details.config.noConfig.description') }}
165+
</EmptyDescription>
166+
</EmptyHeader>
167+
</Empty>
168+
169+
<!-- Configuration sections (only shown when config exists) -->
170+
<template v-else>
171+
<!-- STDIO TRANSPORT: Arguments + Environment Variables -->
172+
<ConfigurationArgs
173+
v-if="isStdio"
174+
:installation="installation"
175+
:server-data="serverData"
176+
:current-user-config="currentUserConfig"
177+
:team-id="teamId"
178+
:can-edit="canEdit"
179+
:is-team-admin="isTeamAdmin"
180+
@installation-updated="handleInstallationUpdated"
181+
@configuration-updated="handleConfigurationUpdated"
182+
/>
183+
184+
<ConfigurationEnv
185+
v-if="isStdio"
186+
:installation="installation"
187+
:server-data="serverData"
188+
:current-user-config="currentUserConfig"
189+
:team-id="teamId"
190+
:can-edit="canEdit"
191+
:is-team-admin="isTeamAdmin"
192+
@installation-updated="handleInstallationUpdated"
193+
@configuration-updated="handleConfigurationUpdated"
194+
/>
195+
196+
<!-- HTTP/SSE TRANSPORT: Headers + URL Query Parameters -->
197+
<ConfigurationHeaders
198+
v-if="isRemote"
199+
:installation="installation"
200+
:server-data="serverData"
201+
:current-user-config="currentUserConfig"
202+
:team-id="teamId"
203+
:can-edit="canEdit"
204+
:is-team-admin="isTeamAdmin"
205+
@installation-updated="handleInstallationUpdated"
206+
@configuration-updated="handleConfigurationUpdated"
207+
/>
208+
209+
<ConfigurationQueryParams
210+
v-if="isRemote"
211+
:installation="installation"
212+
:server-data="serverData"
213+
:current-user-config="currentUserConfig"
214+
:team-id="teamId"
215+
:can-edit="canEdit"
216+
:is-team-admin="isTeamAdmin"
217+
@installation-updated="handleInstallationUpdated"
218+
@configuration-updated="handleConfigurationUpdated"
219+
/>
220+
</template>
153221
</div>
154222
</template>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -619,6 +619,13 @@ export default {
619619
},
620620

621621
details: {
622+
config: {
623+
noConfig: {
624+
title: 'No Configuration Required',
625+
description: 'This MCP server does not require any configuration parameters.'
626+
}
627+
},
628+
622629
tools: {
623630
title: 'Tools',
624631
description: 'Tools discovered from this MCP server installation',

0 commit comments

Comments
 (0)