Skip to content

Commit 4295c1b

Browse files
author
Lasim
committed
feat(frontend): enhance configuration schema steps with navigation buttons
1 parent 462f4ba commit 4295c1b

File tree

7 files changed

+86
-152
lines changed

7 files changed

+86
-152
lines changed

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -902,18 +902,21 @@ onUnmounted(() => {
902902
</DsCard>
903903

904904
<!-- Step 4: Configuration Schema -->
905-
<DsCard v-else-if="currentStep === 3" :title="t('mcpCatalog.form.steps.configurationSchema')">
905+
<div v-else-if="currentStep === 3" class="space-y-6">
906+
<h2 class="text-lg font-semibold">{{ t('mcpCatalog.form.steps.configurationSchema') }}</h2>
907+
906908
<ConfigurationSchemaStepEdit />
907909

908-
<template #footer-actions>
910+
<!-- Navigation Buttons -->
911+
<div class="flex justify-end gap-3 pt-4">
909912
<Button variant="outline" @click="previousStep">
910913
{{ t('mcpCatalog.form.navigation.previous') }}
911914
</Button>
912915
<Button @click="nextStep">
913916
{{ t('mcpCatalog.form.navigation.next') }}
914917
</Button>
915-
</template>
916-
</DsCard>
918+
</div>
919+
</div>
917920

918921
<!-- Step 5: README -->
919922
<DsCard v-else-if="currentStep === 4" title="README">

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
DropdownMenuTrigger,
1717
} from '@/components/ui/dropdown-menu'
1818
import { Badge } from '@/components/ui/badge'
19-
import { Plus, Edit, Trash2, MoreHorizontal, Terminal, Lock, ChevronUp, ChevronDown } from 'lucide-vue-next'
19+
import { Edit, Trash2, MoreHorizontal, Terminal, Lock, ChevronUp, ChevronDown } from 'lucide-vue-next'
2020
2121
const { t } = useI18n()
2222
@@ -45,7 +45,6 @@ interface Props {
4545
4646
defineProps<Props>()
4747
const emit = defineEmits<{
48-
'add': []
4948
'edit': [index: number]
5049
'delete': [index: number]
5150
'move-up': [index: number]
@@ -55,26 +54,6 @@ const emit = defineEmits<{
5554

5655
<template>
5756
<div class="space-y-4">
58-
<div>
59-
<h4 class="text-md font-medium">{{ t('mcpCatalog.form.configurationSchema.arguments.title') }}</h4>
60-
<p class="text-sm text-muted-foreground">
61-
{{ t('mcpCatalog.form.configurationSchema.arguments.description') }}
62-
</p>
63-
</div>
64-
65-
<!-- Header with Add Button -->
66-
<div class="flex items-center justify-between">
67-
<div></div>
68-
<Button
69-
type="button"
70-
@click="emit('add')"
71-
class="flex items-center gap-2"
72-
>
73-
<Plus class="h-4 w-4" />
74-
{{ t('mcpCatalog.form.configurationSchema.arguments.addButton') }}
75-
</Button>
76-
</div>
77-
7857
<!-- Arguments Display with Edit Actions -->
7958
<div v-if="items.length > 0" class="overflow-hidden">
8059
<table class="w-full text-left">

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
DropdownMenuTrigger,
1515
} from '@/components/ui/dropdown-menu'
1616
import { Badge } from '@/components/ui/badge'
17-
import { Plus, Edit, Trash2, Settings, MoreHorizontal, Lock } from 'lucide-vue-next'
17+
import { Edit, Trash2, Settings, MoreHorizontal, Lock } from 'lucide-vue-next'
1818
1919
// Simple interface for environment items (reusing existing structure)
2020
interface EnvItem {
@@ -40,34 +40,13 @@ interface Props {
4040
4141
defineProps<Props>()
4242
const emit = defineEmits<{
43-
'add': []
4443
'edit': [index: number]
4544
'delete': [index: number]
4645
}>()
4746
</script>
4847

4948
<template>
5049
<div class="space-y-4">
51-
<div>
52-
<h4 class="text-md font-medium">{{ $t('mcpCatalog.form.configurationSchema.environment.title') }}</h4>
53-
<p class="text-sm text-muted-foreground">
54-
{{ $t('mcpCatalog.form.configurationSchema.environment.description') }}
55-
</p>
56-
</div>
57-
58-
<!-- Header with Add Button -->
59-
<div class="flex items-center justify-between">
60-
<div></div>
61-
<Button
62-
type="button"
63-
@click="emit('add')"
64-
class="flex items-center gap-2"
65-
>
66-
<Plus class="h-4 w-4" />
67-
{{ $t('mcpCatalog.form.configurationSchema.environment.addButton') }}
68-
</Button>
69-
</div>
70-
7150
<!-- Environment Variables Display with Edit Actions -->
7251
<div v-if="items.length > 0" class="overflow-hidden">
7352
<table class="w-full text-left">

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
DropdownMenuTrigger,
1515
} from '@/components/ui/dropdown-menu'
1616
import { Badge } from '@/components/ui/badge'
17-
import { Plus, Edit, Trash2, Globe, MoreHorizontal, Lock } from 'lucide-vue-next'
17+
import { Edit, Trash2, Globe, MoreHorizontal, Lock } from 'lucide-vue-next'
1818
1919
// Simple interface for header items (reusing existing structure)
2020
interface HeaderItem {
@@ -41,34 +41,13 @@ interface Props {
4141
4242
defineProps<Props>()
4343
const emit = defineEmits<{
44-
'add': []
4544
'edit': [index: number]
4645
'delete': [index: number]
4746
}>()
4847
</script>
4948

5049
<template>
5150
<div class="space-y-4">
52-
<div>
53-
<h4 class="text-md font-medium">{{ $t('mcpCatalog.form.configurationSchema.headers.title') }}</h4>
54-
<p class="text-sm text-muted-foreground">
55-
{{ $t('mcpCatalog.form.configurationSchema.headers.description') }}
56-
</p>
57-
</div>
58-
59-
<!-- Header with Add Button -->
60-
<div class="flex items-center justify-between">
61-
<div></div>
62-
<Button
63-
type="button"
64-
@click="emit('add')"
65-
class="flex items-center gap-2"
66-
>
67-
<Plus class="h-4 w-4" />
68-
{{ $t('mcpCatalog.form.configurationSchema.headers.addButton') }}
69-
</Button>
70-
</div>
71-
7251
<!-- Headers Display with Edit Actions -->
7352
<div v-if="items.length > 0" class="overflow-hidden">
7453
<table class="w-full text-left">

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
DropdownMenuTrigger,
1515
} from '@/components/ui/dropdown-menu'
1616
import { Badge } from '@/components/ui/badge'
17-
import { Plus, Edit, Trash2, SearchCode, MoreHorizontal, Lock } from 'lucide-vue-next'
17+
import { Edit, Trash2, SearchCode, MoreHorizontal, Lock } from 'lucide-vue-next'
1818
1919
// Simple interface for query param items (reusing existing structure)
2020
interface QueryParamItem {
@@ -41,34 +41,13 @@ interface Props {
4141
4242
defineProps<Props>()
4343
const emit = defineEmits<{
44-
'add': []
4544
'edit': [index: number]
4645
'delete': [index: number]
4746
}>()
4847
</script>
4948

5049
<template>
5150
<div class="space-y-4">
52-
<div>
53-
<h4 class="text-md font-medium">{{ $t('mcpCatalog.form.configurationSchema.urlQueryParams.title') }}</h4>
54-
<p class="text-sm text-muted-foreground">
55-
{{ $t('mcpCatalog.form.configurationSchema.urlQueryParams.description') }}
56-
</p>
57-
</div>
58-
59-
<!-- Query Param with Add Button -->
60-
<div class="flex items-center justify-between">
61-
<div></div>
62-
<Button
63-
type="button"
64-
@click="emit('add')"
65-
class="flex items-center gap-2"
66-
>
67-
<Plus class="h-4 w-4" />
68-
{{ $t('mcpCatalog.form.configurationSchema.urlQueryParams.addButton') }}
69-
</Button>
70-
</div>
71-
7251
<!-- Query Params Display with Edit Actions -->
7352
<div v-if="items.length > 0" class="overflow-hidden">
7453
<table class="w-full text-left">

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

Lines changed: 72 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ import {
2929
AlertDialogTitle,
3030
} from '@/components/ui/alert-dialog'
3131
32-
import { Terminal, Users, User, Globe } from 'lucide-vue-next'
32+
import { Terminal, Users, User, Globe, Plus } from 'lucide-vue-next'
33+
import { DsCard } from '@/components/ui/ds-card'
3334
import ConfigurationSchemaEnvironmentSection from './ConfigurationSchemaEnvironmentSection.vue'
3435
import ConfigurationSchemaHeadersSection from './ConfigurationSchemaHeadersSection.vue'
3536
import ConfigurationSchemaQueryParamsSection from './ConfigurationSchemaQueryParamsSection.vue'
@@ -1064,69 +1065,83 @@ onUnmounted(() => {
10641065

10651066
<template>
10661067
<div class="space-y-6">
1067-
<!-- Server Type Indicator -->
1068-
<div v-if="isHttpTransport" class="flex items-center gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
1069-
<Globe class="h-4 w-4 text-blue-600" />
1070-
<span class="text-sm font-medium text-blue-900">
1071-
{{ $t('mcpCatalog.form.configurationSchema.serverTypeIndicator.http') }}
1072-
</span>
1073-
</div>
1074-
<div v-else class="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg">
1075-
<Terminal class="h-4 w-4 text-green-600" />
1076-
<span class="text-sm font-medium text-green-900">
1077-
{{ $t('mcpCatalog.form.configurationSchema.serverTypeIndicator.stdio') }}
1078-
</span>
1079-
</div>
1080-
10811068
<!-- Arguments Section - Only show for STDIO servers -->
1082-
<ConfigurationSchemaArgumentsSection
1083-
v-if="!isHttpTransport"
1084-
:items="argumentItems"
1085-
:get-category-info="getCategoryInfo"
1086-
@add="handleArgAdd"
1087-
@edit="handleArgEdit"
1088-
@delete="handleArgDelete"
1089-
@move-up="handleArgMoveUp"
1090-
@move-down="handleArgMoveDown"
1091-
/>
1092-
1093-
<!-- Claude Desktop Config Preview - Only show for STDIO servers -->
1094-
<div v-if="!isHttpTransport && claudeConfigPreview" class="space-y-2">
1095-
<h4 class="text-sm font-medium text-muted-foreground">
1096-
{{ $t('mcpCatalog.form.configurationSchema.preview.title') }}
1097-
</h4>
1098-
<pre class="p-3 bg-muted rounded-md text-xs overflow-x-auto"><code>{{ claudeConfigPreview }}</code></pre>
1099-
</div>
1069+
<DsCard v-if="!isHttpTransport" :title="$t('mcpCatalog.form.configurationSchema.arguments.title')">
1070+
<ConfigurationSchemaArgumentsSection
1071+
:items="argumentItems"
1072+
:get-category-info="getCategoryInfo"
1073+
@edit="handleArgEdit"
1074+
@delete="handleArgDelete"
1075+
@move-up="handleArgMoveUp"
1076+
@move-down="handleArgMoveDown"
1077+
/>
1078+
1079+
<!-- Claude Desktop Config Preview -->
1080+
<div v-if="claudeConfigPreview" class="space-y-2 mt-4">
1081+
<h4 class="text-sm font-medium text-muted-foreground">
1082+
{{ $t('mcpCatalog.form.configurationSchema.preview.title') }}
1083+
</h4>
1084+
<pre class="p-3 bg-muted rounded-md text-xs overflow-x-auto"><code>{{ claudeConfigPreview }}</code></pre>
1085+
</div>
1086+
1087+
<template #footer-actions>
1088+
<Button @click="handleArgAdd">
1089+
<Plus class="h-4 w-4 mr-2" />
1090+
{{ $t('mcpCatalog.form.configurationSchema.arguments.addButton') }}
1091+
</Button>
1092+
</template>
1093+
</DsCard>
11001094

11011095
<!-- Environment Variables Section - Only show for STDIO servers -->
1102-
<ConfigurationSchemaEnvironmentSection
1103-
v-if="!isHttpTransport"
1104-
:items="environmentItems"
1105-
:get-category-info="getCategoryInfo"
1106-
@add="handleEnvAdd"
1107-
@edit="handleEnvEdit"
1108-
@delete="handleEnvDelete"
1109-
/>
1096+
<DsCard v-if="!isHttpTransport" :title="$t('mcpCatalog.form.configurationSchema.environment.title')">
1097+
<ConfigurationSchemaEnvironmentSection
1098+
:items="environmentItems"
1099+
:get-category-info="getCategoryInfo"
1100+
@edit="handleEnvEdit"
1101+
@delete="handleEnvDelete"
1102+
/>
1103+
1104+
<template #footer-actions>
1105+
<Button @click="handleEnvAdd">
1106+
<Plus class="h-4 w-4 mr-2" />
1107+
{{ $t('mcpCatalog.form.configurationSchema.environment.addButton') }}
1108+
</Button>
1109+
</template>
1110+
</DsCard>
11101111

11111112
<!-- Headers Section - Only show for HTTP servers -->
1112-
<ConfigurationSchemaHeadersSection
1113-
v-if="isHttpTransport"
1114-
:items="headerItems"
1115-
:get-category-info="getCategoryInfo"
1116-
@add="handleHeaderAdd"
1117-
@edit="handleHeaderEdit"
1118-
@delete="handleHeaderDelete"
1119-
/>
1113+
<DsCard v-if="isHttpTransport" :title="$t('mcpCatalog.form.configurationSchema.headers.title')">
1114+
<ConfigurationSchemaHeadersSection
1115+
:items="headerItems"
1116+
:get-category-info="getCategoryInfo"
1117+
@edit="handleHeaderEdit"
1118+
@delete="handleHeaderDelete"
1119+
/>
1120+
1121+
<template #footer-actions>
1122+
<Button @click="handleHeaderAdd">
1123+
<Plus class="h-4 w-4 mr-2" />
1124+
{{ $t('mcpCatalog.form.configurationSchema.headers.addButton') }}
1125+
</Button>
1126+
</template>
1127+
</DsCard>
11201128

11211129
<!-- URL Query Parameters Section - Only show for HTTP servers -->
1122-
<ConfigurationSchemaQueryParamsSection
1123-
v-if="isHttpTransport"
1124-
:items="queryParamItems"
1125-
:get-category-info="getCategoryInfo"
1126-
@add="handleQueryParamAdd"
1127-
@edit="handleQueryParamEdit"
1128-
@delete="handleQueryParamDelete"
1129-
/>
1130+
<DsCard v-if="isHttpTransport" :title="$t('mcpCatalog.form.configurationSchema.urlQueryParams.title')">
1131+
<ConfigurationSchemaQueryParamsSection
1132+
:items="queryParamItems"
1133+
:get-category-info="getCategoryInfo"
1134+
@edit="handleQueryParamEdit"
1135+
@delete="handleQueryParamDelete"
1136+
/>
1137+
1138+
<template #footer-actions>
1139+
<Button @click="handleQueryParamAdd">
1140+
<Plus class="h-4 w-4 mr-2" />
1141+
{{ $t('mcpCatalog.form.configurationSchema.urlQueryParams.addButton') }}
1142+
</Button>
1143+
</template>
1144+
</DsCard>
11301145

11311146
<!-- Add/Edit Modal -->
11321147
<AlertDialog :open="isModalOpen" @update:open="(value) => isModalOpen = value">

‎services/frontend/src/components/ui/ds-card/DsCard.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
interface Props {
3-
title: string
3+
title?: string
44
}
55
66
defineProps<Props>()
@@ -10,10 +10,10 @@ defineProps<Props>()
1010
<div class="rounded-lg border border-neutral-200 bg-white mb-8 last:mb-0">
1111
<!-- Content Area -->
1212
<div class="p-6">
13-
<h4 class="text-xl font-medium leading-8 tracking-tight text-foreground">
13+
<h4 v-if="title" class="text-xl font-medium leading-8 tracking-tight text-foreground">
1414
{{ title }}
1515
</h4>
16-
<div v-if="$slots.default" class="mt-4">
16+
<div v-if="$slots.default" :class="{ 'mt-4': title }">
1717
<slot />
1818
</div>
1919
</div>

0 commit comments

Comments
 (0)