Skip to content

Commit a869274

Browse files
author
Lasim
committed
feat(frontend): add navigation buttons to configuration schema step
1 parent 4295c1b commit a869274

File tree

2 files changed

+79
-62
lines changed

2 files changed

+79
-62
lines changed

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -503,22 +503,23 @@ const submitForm = async () => {
503503
</template>
504504
</DsCard>
505505

506-
<!-- Step 3: Configuration Schema -->
507-
<DsCard v-else-if="currentStep === 2" :title="t('mcpCatalog.form.steps.configurationSchema')">
506+
<!-- Step 3: Configuration Schema (uses its own DsCards for each section) -->
507+
<div v-else-if="currentStep === 2">
508508
<ConfigurationSchemaStepAdd
509509
v-model="formData.configuration_schema"
510510
:claudeConfig="formData.claudeConfig"
511511
/>
512512

513-
<template #footer-actions>
513+
<!-- Navigation buttons -->
514+
<div class="flex justify-end gap-2 mt-6">
514515
<Button variant="outline" @click="previousStep">
515516
{{ t('mcpCatalog.form.navigation.previous') }}
516517
</Button>
517518
<Button @click="nextStep">
518519
{{ t('mcpCatalog.form.navigation.next') }}
519520
</Button>
520-
</template>
521-
</DsCard>
521+
</div>
522+
</div>
522523

523524
<!-- Step 4: Basic Info -->
524525
<DsCard v-else-if="currentStep === 3" :title="t('mcpCatalog.form.steps.basic')">

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

Lines changed: 73 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
<script setup lang="ts">
1212
import { ref, computed, watch, onMounted, nextTick } from 'vue'
1313
import { useI18n } from 'vue-i18n'
14-
import { Terminal, Users, User, Globe } from 'lucide-vue-next'
14+
import { Terminal, Users, User, Globe, Plus } from 'lucide-vue-next'
15+
import { DsCard } from '@/components/ui/ds-card'
16+
import { Button } from '@/components/ui/button'
1517
import ConfigurationSchemaEnvironmentSection from './ConfigurationSchemaEnvironmentSection.vue'
1618
import ConfigurationSchemaHeadersSection from './ConfigurationSchemaHeadersSection.vue'
1719
import ConfigurationSchemaQueryParamsSection from './ConfigurationSchemaQueryParamsSection.vue'
@@ -982,69 +984,83 @@ watch(localData, () => {
982984

983985
<template>
984986
<div class="space-y-6">
985-
<!-- Server Type Indicator -->
986-
<div v-if="isHttpBasedServer" class="flex items-center gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
987-
<Globe class="h-4 w-4 text-blue-600" />
988-
<span class="text-sm font-medium text-blue-900">
989-
{{ $t('mcpCatalog.form.configurationSchema.serverTypeIndicator.http') }}
990-
</span>
991-
</div>
992-
<div v-else class="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg">
993-
<Terminal class="h-4 w-4 text-green-600" />
994-
<span class="text-sm font-medium text-green-900">
995-
{{ $t('mcpCatalog.form.configurationSchema.serverTypeIndicator.stdio') }}
996-
</span>
997-
</div>
998-
999987
<!-- Arguments Section - Only show for STDIO servers -->
1000-
<ConfigurationSchemaArgumentsSection
1001-
v-if="!isHttpBasedServer"
1002-
:items="argumentItems"
1003-
:get-category-info="getCategoryInfo"
1004-
@add="handleArgAdd"
1005-
@edit="handleArgEdit"
1006-
@delete="handleArgDelete"
1007-
@move-up="handleArgMoveUp"
1008-
@move-down="handleArgMoveDown"
1009-
/>
1010-
1011-
<!-- Claude Desktop Config Preview - Only show for STDIO servers -->
1012-
<div v-if="!isHttpBasedServer && claudeConfigPreview" class="space-y-2">
1013-
<h4 class="text-sm font-medium text-muted-foreground">
1014-
{{ $t('mcpCatalog.form.configurationSchema.preview.title') }}
1015-
</h4>
1016-
<pre class="p-3 bg-muted rounded-md text-xs overflow-x-auto"><code>{{ claudeConfigPreview }}</code></pre>
1017-
</div>
988+
<DsCard v-if="!isHttpBasedServer" :title="$t('mcpCatalog.form.configurationSchema.arguments.title')">
989+
<ConfigurationSchemaArgumentsSection
990+
:items="argumentItems"
991+
:get-category-info="getCategoryInfo"
992+
@edit="handleArgEdit"
993+
@delete="handleArgDelete"
994+
@move-up="handleArgMoveUp"
995+
@move-down="handleArgMoveDown"
996+
/>
997+
998+
<!-- Claude Desktop Config Preview -->
999+
<div v-if="claudeConfigPreview" class="space-y-2 mt-4">
1000+
<h4 class="text-sm font-medium text-muted-foreground">
1001+
{{ $t('mcpCatalog.form.configurationSchema.preview.title') }}
1002+
</h4>
1003+
<pre class="p-3 bg-muted rounded-md text-xs overflow-x-auto"><code>{{ claudeConfigPreview }}</code></pre>
1004+
</div>
1005+
1006+
<template #footer-actions>
1007+
<Button @click="handleArgAdd">
1008+
<Plus class="h-4 w-4 mr-2" />
1009+
{{ $t('mcpCatalog.form.configurationSchema.arguments.addButton') }}
1010+
</Button>
1011+
</template>
1012+
</DsCard>
10181013

10191014
<!-- Environment Variables Section - Only show for STDIO servers -->
1020-
<ConfigurationSchemaEnvironmentSection
1021-
v-if="!isHttpBasedServer"
1022-
:items="environmentItems"
1023-
:get-category-info="getCategoryInfo"
1024-
@add="handleEnvAdd"
1025-
@edit="handleEnvEdit"
1026-
@delete="handleEnvDelete"
1027-
/>
1015+
<DsCard v-if="!isHttpBasedServer" :title="$t('mcpCatalog.form.configurationSchema.environment.title')">
1016+
<ConfigurationSchemaEnvironmentSection
1017+
:items="environmentItems"
1018+
:get-category-info="getCategoryInfo"
1019+
@edit="handleEnvEdit"
1020+
@delete="handleEnvDelete"
1021+
/>
1022+
1023+
<template #footer-actions>
1024+
<Button @click="handleEnvAdd">
1025+
<Plus class="h-4 w-4 mr-2" />
1026+
{{ $t('mcpCatalog.form.configurationSchema.environment.addButton') }}
1027+
</Button>
1028+
</template>
1029+
</DsCard>
10281030

10291031
<!-- Headers Configuration Section - Always show for HTTP servers -->
1030-
<ConfigurationSchemaHeadersSection
1031-
v-if="isHttpBasedServer"
1032-
:items="headerItems"
1033-
:get-category-info="getCategoryInfo"
1034-
@add="handleHeaderAdd"
1035-
@edit="handleHeaderEdit"
1036-
@delete="handleHeaderDelete"
1037-
/>
1032+
<DsCard v-if="isHttpBasedServer" :title="$t('mcpCatalog.form.configurationSchema.headers.title')">
1033+
<ConfigurationSchemaHeadersSection
1034+
:items="headerItems"
1035+
:get-category-info="getCategoryInfo"
1036+
@edit="handleHeaderEdit"
1037+
@delete="handleHeaderDelete"
1038+
/>
1039+
1040+
<template #footer-actions>
1041+
<Button @click="handleHeaderAdd">
1042+
<Plus class="h-4 w-4 mr-2" />
1043+
{{ $t('mcpCatalog.form.configurationSchema.headers.addButton') }}
1044+
</Button>
1045+
</template>
1046+
</DsCard>
10381047

10391048
<!-- URL Query Parameters Configuration Section - Always show for HTTP servers -->
1040-
<ConfigurationSchemaQueryParamsSection
1041-
v-if="isHttpBasedServer"
1042-
:items="queryParamItems"
1043-
:get-category-info="getCategoryInfo"
1044-
@add="handleQueryParamAdd"
1045-
@edit="handleQueryParamEdit"
1046-
@delete="handleQueryParamDelete"
1047-
/>
1049+
<DsCard v-if="isHttpBasedServer" :title="$t('mcpCatalog.form.configurationSchema.urlQueryParams.title')">
1050+
<ConfigurationSchemaQueryParamsSection
1051+
:items="queryParamItems"
1052+
:get-category-info="getCategoryInfo"
1053+
@edit="handleQueryParamEdit"
1054+
@delete="handleQueryParamDelete"
1055+
/>
1056+
1057+
<template #footer-actions>
1058+
<Button @click="handleQueryParamAdd">
1059+
<Plus class="h-4 w-4 mr-2" />
1060+
{{ $t('mcpCatalog.form.configurationSchema.urlQueryParams.addButton') }}
1061+
</Button>
1062+
</template>
1063+
</DsCard>
10481064

10491065
<!-- Add/Edit Modal -->
10501066
<ConfigItemModal

0 commit comments

Comments
 (0)