Skip to content

Commit 2ffff37

Browse files
author
Lasim
committed
feat(frontend): wrap step content in ContentWrapper component for improved layout
1 parent f91f3c7 commit 2ffff37

File tree

3 files changed

+110
-120
lines changed

3 files changed

+110
-120
lines changed

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

Lines changed: 104 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { Label } from '@/components/ui/label'
77
import { Textarea } from '@/components/ui/textarea'
88
import { Switch } from '@/components/ui/switch'
99
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
10-
import { Card, CardContent } from '@/components/ui/card'
1110
import {
1211
DropdownMenu,
1312
DropdownMenuContent,
@@ -182,122 +181,111 @@ const modalTitle = computed(() => {
182181
</script>
183182

184183
<template>
185-
<div class="max-w-4xl mx-auto">
186-
<!-- White Card inside the gray wrapper -->
187-
<Card class="bg-white shadow-sm">
188-
<CardContent class="p-6">
189-
<!-- Header -->
190-
<div class="px-4 sm:px-0">
191-
<div class="flex items-center justify-between mb-4">
192-
<div>
193-
<Label class="text-base font-medium text-gray-900">{{ t('mcpCatalog.form.capabilities.environmentVariables.label') }}</Label>
194-
<p class="mt-1 text-sm text-gray-500">
195-
{{ t('mcpCatalog.form.capabilities.environmentVariables.description') }}
196-
</p>
197-
</div>
198-
<Button
199-
type="button"
200-
@click="openAddModal"
201-
class="flex items-center gap-2"
202-
>
203-
<Plus class="h-4 w-4" />
204-
{{ t('mcpCatalog.form.capabilities.environmentVariables.addVariable') }}
205-
</Button>
206-
</div>
207-
</div>
208-
209-
<div class="mt-6 border-t border-gray-100">
210-
<!-- Environment Variables Section -->
211-
<div class="px-4 py-6 sm:px-0">
212-
213-
<!-- Environment Variables Display with Edit Actions -->
214-
<div v-if="environmentVariables.length > 0" class="overflow-hidden">
215-
<table class="w-full text-left">
216-
<thead class="sr-only">
217-
<tr>
218-
<th>{{ t('mcpCatalog.form.capabilities.environmentVariables.name.label') }}</th>
219-
<th class="hidden sm:table-cell">{{ t('mcpCatalog.table.columns.properties', 'Properties') }}</th>
220-
<th class="hidden sm:table-cell">{{ t('mcpCatalog.table.columns.details', 'Details') }}</th>
221-
<th>{{ t('mcpCatalog.table.columns.actions') }}</th>
222-
</tr>
223-
</thead>
224-
<tbody>
225-
<tr v-for="(variable, index) in environmentVariables" :key="index">
226-
<td class="relative py-5 pr-6">
227-
<div class="flex gap-x-6">
228-
<div class="flex-auto">
229-
<div class="flex items-start gap-x-3">
230-
<div class="text-sm/6 font-semibold text-gray-900">
231-
{{ variable.name }}
232-
</div>
233-
</div>
234-
</div>
235-
</div>
236-
<div class="absolute right-full bottom-0 h-px w-screen bg-gray-100" />
237-
<div class="absolute bottom-0 left-0 h-px w-screen bg-gray-100" />
238-
</td>
239-
<td class="hidden py-5 pr-6 sm:table-cell">
240-
<div class="space-y-1">
241-
<div v-if="variable.required" class="text-xs/5 text-gray-500">
242-
<span class="font-medium">{{ t('mcpCatalog.form.capabilities.environmentVariables.required.label') }}:</span> {{ t('common.labels.yes') }}
243-
</div>
244-
<div v-if="variable.type" class="text-xs/5 text-gray-500">
245-
<span class="font-medium">{{ t('mcpCatalog.form.capabilities.environmentVariables.type.label') }}:</span> {{ variable.type }}
246-
</div>
247-
</div>
248-
</td>
249-
<td class="hidden py-5 pr-6 sm:table-cell">
250-
<div v-if="variable.description" class="text-sm/6 text-gray-900">
251-
{{ variable.description }}
252-
</div>
253-
<div v-if="variable.placeholder" class="mt-1 text-xs/5 text-gray-500">
254-
{{ t('mcpCatalog.form.capabilities.environmentVariables.placeholder.label') }}: {{ variable.placeholder }}
255-
</div>
256-
</td>
257-
<td class="py-5 text-right">
258-
<div class="flex justify-end">
259-
<DropdownMenu>
260-
<DropdownMenuTrigger as-child>
261-
<Button variant="ghost" class="h-8 w-8 p-0">
262-
<span class="sr-only">{{ t('mcpCatalog.table.openMenu') }} {{ variable.name }}</span>
263-
<MoreHorizontal class="h-4 w-4" />
264-
</Button>
265-
</DropdownMenuTrigger>
266-
<DropdownMenuContent align="end">
267-
<DropdownMenuItem @click="openEditModal(index)">
268-
<Edit class="mr-2 h-4 w-4" />
269-
{{ t('mcpCatalog.table.actions.edit') }}
270-
</DropdownMenuItem>
271-
<DropdownMenuItem
272-
@click="handleDelete(index)"
273-
class="text-red-600 focus:text-red-600"
274-
>
275-
<Trash2 class="mr-2 h-4 w-4" />
276-
{{ t('mcpCatalog.table.actions.delete') }}
277-
</DropdownMenuItem>
278-
</DropdownMenuContent>
279-
</DropdownMenu>
280-
</div>
281-
</td>
282-
</tr>
283-
</tbody>
284-
</table>
285-
</div>
286-
287-
<!-- Empty State -->
288-
<div v-else class="text-center py-12">
289-
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-4">
290-
<Settings class="h-6 w-6 text-gray-400" />
184+
<div class="space-y-6">
185+
<div>
186+
<h3 class="text-lg font-medium">{{ t('mcpCatalog.form.capabilities.environmentVariables.label') }}</h3>
187+
<p class="text-sm text-muted-foreground">
188+
{{ t('mcpCatalog.form.capabilities.environmentVariables.description') }}
189+
</p>
190+
</div>
191+
192+
<!-- Header with Add Button -->
193+
<div class="flex items-center justify-between">
194+
<div></div>
195+
<Button
196+
type="button"
197+
@click="openAddModal"
198+
class="flex items-center gap-2"
199+
>
200+
<Plus class="h-4 w-4" />
201+
{{ t('mcpCatalog.form.capabilities.environmentVariables.addVariable') }}
202+
</Button>
203+
</div>
204+
205+
<!-- Environment Variables Display with Edit Actions -->
206+
<div v-if="environmentVariables.length > 0" class="overflow-hidden">
207+
<table class="w-full text-left">
208+
<thead class="sr-only">
209+
<tr>
210+
<th>{{ t('mcpCatalog.form.capabilities.environmentVariables.name.label') }}</th>
211+
<th class="hidden sm:table-cell">{{ t('mcpCatalog.table.columns.properties', 'Properties') }}</th>
212+
<th class="hidden sm:table-cell">{{ t('mcpCatalog.table.columns.details', 'Details') }}</th>
213+
<th>{{ t('mcpCatalog.table.columns.actions') }}</th>
214+
</tr>
215+
</thead>
216+
<tbody>
217+
<tr v-for="(variable, index) in environmentVariables" :key="index">
218+
<td class="relative py-5 pr-6">
219+
<div class="flex gap-x-6">
220+
<div class="flex-auto">
221+
<div class="flex items-start gap-x-3">
222+
<div class="text-sm/6 font-semibold text-gray-900">
223+
{{ variable.name }}
224+
</div>
225+
</div>
226+
</div>
291227
</div>
292-
<h3 class="text-sm font-medium text-gray-900 mb-2">{{ t('mcpCatalog.form.capabilities.environmentVariables.noVariables') }}</h3>
293-
<p class="text-sm text-gray-500 max-w-sm mx-auto">
294-
{{ t('mcpCatalog.form.capabilities.environmentVariables.noVariablesDescription') }}
295-
</p>
296-
</div>
297-
</div>
298-
</div>
299-
</CardContent>
300-
</Card>
228+
<div class="absolute right-full bottom-0 h-px w-screen bg-gray-100" />
229+
<div class="absolute bottom-0 left-0 h-px w-screen bg-gray-100" />
230+
</td>
231+
<td class="hidden py-5 pr-6 sm:table-cell">
232+
<div class="space-y-1">
233+
<div v-if="variable.required" class="text-xs/5 text-gray-500">
234+
<span class="font-medium">{{ t('mcpCatalog.form.capabilities.environmentVariables.required.label') }}:</span> {{ t('common.labels.yes') }}
235+
</div>
236+
<div v-if="variable.type" class="text-xs/5 text-gray-500">
237+
<span class="font-medium">{{ t('mcpCatalog.form.capabilities.environmentVariables.type.label') }}:</span> {{ variable.type }}
238+
</div>
239+
</div>
240+
</td>
241+
<td class="hidden py-5 pr-6 sm:table-cell">
242+
<div v-if="variable.description" class="text-sm/6 text-gray-900">
243+
{{ variable.description }}
244+
</div>
245+
<div v-if="variable.placeholder" class="mt-1 text-xs/5 text-gray-500">
246+
{{ t('mcpCatalog.form.capabilities.environmentVariables.placeholder.label') }}: {{ variable.placeholder }}
247+
</div>
248+
</td>
249+
<td class="py-5 text-right">
250+
<div class="flex justify-end">
251+
<DropdownMenu>
252+
<DropdownMenuTrigger as-child>
253+
<Button variant="ghost" class="h-8 w-8 p-0">
254+
<span class="sr-only">{{ t('mcpCatalog.table.openMenu') }} {{ variable.name }}</span>
255+
<MoreHorizontal class="h-4 w-4" />
256+
</Button>
257+
</DropdownMenuTrigger>
258+
<DropdownMenuContent align="end">
259+
<DropdownMenuItem @click="openEditModal(index)">
260+
<Edit class="mr-2 h-4 w-4" />
261+
{{ t('mcpCatalog.table.actions.edit') }}
262+
</DropdownMenuItem>
263+
<DropdownMenuItem
264+
@click="handleDelete(index)"
265+
class="text-red-600 focus:text-red-600"
266+
>
267+
<Trash2 class="mr-2 h-4 w-4" />
268+
{{ t('mcpCatalog.table.actions.delete') }}
269+
</DropdownMenuItem>
270+
</DropdownMenuContent>
271+
</DropdownMenu>
272+
</div>
273+
</td>
274+
</tr>
275+
</tbody>
276+
</table>
277+
</div>
278+
279+
<!-- Empty State -->
280+
<div v-else class="text-center py-12">
281+
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-4">
282+
<Settings class="h-6 w-6 text-gray-400" />
283+
</div>
284+
<h3 class="text-sm font-medium text-gray-900 mb-2">{{ t('mcpCatalog.form.capabilities.environmentVariables.noVariables') }}</h3>
285+
<p class="text-sm text-gray-500 max-w-sm mx-auto">
286+
{{ t('mcpCatalog.form.capabilities.environmentVariables.noVariablesDescription') }}
287+
</p>
288+
</div>
301289

302290
<!-- Add/Edit Environment Variable Modal -->
303291
<AlertDialog :open="isModalOpen" @update:open="(value) => isModalOpen = value">

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ProgressBars } from '@/components/ui/progress-bars'
77
import { FileText, Github, Settings } from 'lucide-vue-next'
88
import { McpCatalogService } from '@/services/mcpCatalogService'
99
import { useEventBus } from '@/composables/useEventBus'
10+
import ContentWrapper from '@/components/ContentWrapper.vue'
1011
import GitHubRepositoryStep from '@/components/admin/mcp-catalog/GitHubRepositoryStep.vue'
1112
import ClaudeDesktopConfigStep from '@/components/admin/mcp-catalog/ClaudeDesktopConfigStep.vue'
1213
import BasicInfoStep from '@/components/admin/mcp-catalog/BasicInfoStep.vue'
@@ -410,7 +411,7 @@ onUnmounted(() => {
410411
</Alert>
411412

412413
<!-- Step Content -->
413-
<div class="bg-white rounded-lg border p-6">
414+
<ContentWrapper>
414415
<!-- GitHub Step -->
415416
<GitHubRepositoryStep
416417
v-if="currentStep === 0"
@@ -430,7 +431,7 @@ onUnmounted(() => {
430431
v-model="formData.basic"
431432
:form-data="compatibleFormData"
432433
/>
433-
</div>
434+
</ContentWrapper>
434435

435436
<!-- Navigation Buttons -->
436437
<div class="flex items-center justify-between">

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ProgressBars } from '@/components/ui/progress-bars'
77
import { FileText, Github, Code, Zap, CheckCircle } from 'lucide-vue-next'
88
import { McpCatalogService } from '@/services/mcpCatalogService'
99
import { useEventBus } from '@/composables/useEventBus'
10+
import ContentWrapper from '@/components/ContentWrapper.vue'
1011
import BasicInfoStep from '@/components/admin/mcp-catalog/BasicInfoStep.vue'
1112
import TechnicalStep from '@/components/admin/mcp-catalog/TechnicalStep.vue'
1213
import CapabilitiesStep from '@/components/admin/mcp-catalog/CapabilitiesStep.vue'
@@ -589,7 +590,7 @@ onUnmounted(() => {
589590
</Alert>
590591

591592
<!-- Step Content -->
592-
<div class="bg-muted/50 rounded-lg px-12 py-16">
593+
<ContentWrapper>
593594
<component
594595
:is="currentStepData.component"
595596
v-if="currentStepData.key === 'capabilities'"
@@ -603,7 +604,7 @@ onUnmounted(() => {
603604
:form-data="formData"
604605
@update:modelValue="(newValue: any) => formData[currentStepData.key] = newValue"
605606
/>
606-
</div>
607+
</ContentWrapper>
607608

608609
<!-- Navigation Buttons -->
609610
<div class="flex items-center justify-between">

0 commit comments

Comments
 (0)