Skip to content

Commit 7c9902e

Browse files
author
Lasim
committed
refactor(frontend): simplify header structure in multiple components
1 parent e04ac09 commit 7c9902e

File tree

10 files changed

+199
-156
lines changed

10 files changed

+199
-156
lines changed

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,9 @@ watch([httpConfig, stdioConfig, activeTab], () => {
5757

5858
<template>
5959
<div class="space-y-6">
60-
<!-- Header -->
61-
<div>
62-
<h2 class="text-xl font-semibold">Server Transport Type</h2>
63-
<p class="text-sm text-muted-foreground mt-1">
64-
Choose how your MCP server will be accessed
65-
</p>
66-
</div>
60+
<p class="text-sm text-muted-foreground">
61+
Choose how your MCP server will be accessed.
62+
</p>
6763

6864
<!-- Transport Type Tabs -->
6965
<DsTabs v-model="activeTab" variant="pills">

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,9 @@ watch(repositoryUrl, validateUrl)
102102

103103
<template>
104104
<div class="space-y-6">
105-
<div>
106-
<h2 class="text-2xl font-semibold mb-2">GitHub Repository</h2>
107-
<p class="text-muted-foreground">
108-
Enter the GitHub repository URL for your MCP server
109-
</p>
110-
</div>
105+
<p class="text-sm text-muted-foreground">
106+
Enter the GitHub repository URL for your MCP server.
107+
</p>
111108

112109
<div class="space-y-2">
113110
<Label for="repository-url">Repository URL (Optional)</Label>

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

Lines changed: 57 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { Button } from '@/components/ui/button'
66
import { Spinner } from '@/components/ui/spinner'
77
import { Alert, AlertDescription } from '@/components/ui/alert'
88
import { ProgressBars } from '@/components/ui/progress-bars'
9+
import { DsCard } from '@/components/ui/ds-card'
910
import { FileText, Github, Settings } from 'lucide-vue-next'
1011
import { McpCatalogService } from '@/services/mcpCatalogService'
1112
import { useEventBus } from '@/composables/useEventBus'
12-
import ContentWrapper from '@/components/ContentWrapper.vue'
1313
import GitHubRepositoryStep from '@/components/admin/mcp-catalog/GitHubRepositoryStep.vue'
1414
import ClaudeDesktopConfigStep from '@/components/admin/mcp-catalog/ClaudeDesktopConfigStep.vue'
1515
import ConfigurationSchemaStepAdd from '@/components/admin/mcp-catalog/steps/ConfigurationSchemaStepAdd.vue'
@@ -502,94 +502,90 @@ const submitForm = async () => {
502502
</AlertDescription>
503503
</Alert>
504504

505-
<!-- Step Content -->
506-
<ContentWrapper>
507-
<!-- Repository Step -->
505+
<!-- Step 1: GitHub Repository -->
506+
<DsCard v-if="currentStep === 0" :title="t('mcpCatalog.form.steps.github')">
508507
<GitHubRepositoryStep
509-
v-if="currentStep === 0"
510508
v-model="formData.repository"
511509
:form-data="compatibleFormData"
512510
/>
513511

514-
<!-- Claude Config Step -->
515-
<ClaudeDesktopConfigStep
516-
v-else-if="currentStep === 1"
517-
v-model="formData.claudeConfig"
518-
/>
519-
520-
<!-- Configuration Schema Step -->
521-
<ConfigurationSchemaStepAdd
522-
v-else-if="currentStep === 2"
523-
v-model="formData.configuration_schema"
524-
:claudeConfig="formData.claudeConfig"
525-
/>
526-
527-
<!-- Basic Info Step -->
528-
<BasicInfoStepAdd
529-
v-else-if="currentStep === 3"
530-
v-model="formData.basic"
531-
:form-data="compatibleFormData"
532-
/>
533-
</ContentWrapper>
534-
535-
<!-- Navigation Buttons -->
536-
<div class="flex items-center justify-between">
537-
<Button
538-
v-if="canGoPrevious"
539-
variant="outline"
540-
@click="previousStep"
541-
>
542-
{{ t('mcpCatalog.form.navigation.previous') }}
543-
</Button>
544-
<div v-else></div>
545-
546-
<div class="flex items-center gap-2">
547-
<Button
548-
variant="ghost"
549-
@click="handleCancel"
550-
>
512+
<!-- GitHub Fetch Error -->
513+
<Alert v-if="githubFetchError" variant="destructive" class="mt-4">
514+
<AlertDescription>
515+
{{ githubFetchError }}
516+
<br>
517+
<span class="text-sm">{{ t('mcpCatalog.validation.githubUrlInvalid') }}</span>
518+
</AlertDescription>
519+
</Alert>
520+
521+
<template #footer-actions>
522+
<Button variant="outline" @click="handleCancel">
551523
{{ cancelText }}
552524
</Button>
553-
554-
<!-- Special GitHub step button with loading -->
555525
<Button
556-
v-if="currentStep === 0"
557526
@click="handleGitHubStepNext"
558527
:disabled="!canProceedFromGitHub || isFetchingGitHub"
559528
class="min-w-[120px]"
560529
>
561530
<Spinner v-if="isFetchingGitHub" class="mr-2" />
562531
{{ t('mcpCatalog.form.navigation.next') }}
563532
</Button>
533+
</template>
534+
</DsCard>
564535

565-
<!-- Normal next button for Claude config and new Schema step -->
536+
<!-- Step 2: Claude Desktop Config -->
537+
<DsCard v-else-if="currentStep === 1" :title="t('mcpCatalog.form.steps.claudeConfig')">
538+
<ClaudeDesktopConfigStep v-model="formData.claudeConfig" />
539+
540+
<template #footer-actions>
541+
<Button variant="outline" @click="previousStep">
542+
{{ t('mcpCatalog.form.navigation.previous') }}
543+
</Button>
566544
<Button
567-
v-else-if="currentStep === 1 || currentStep === 2"
568545
@click="nextStep"
569-
:disabled="currentStep === 1 && !canProceedFromClaudeConfig"
546+
:disabled="!canProceedFromClaudeConfig"
570547
>
571548
{{ t('mcpCatalog.form.navigation.next') }}
572549
</Button>
550+
</template>
551+
</DsCard>
573552

574-
<!-- Submit button for final step -->
553+
<!-- Step 3: Configuration Schema -->
554+
<DsCard v-else-if="currentStep === 2" :title="t('mcpCatalog.form.steps.configurationSchema')">
555+
<ConfigurationSchemaStepAdd
556+
v-model="formData.configuration_schema"
557+
:claudeConfig="formData.claudeConfig"
558+
/>
559+
560+
<template #footer-actions>
561+
<Button variant="outline" @click="previousStep">
562+
{{ t('mcpCatalog.form.navigation.previous') }}
563+
</Button>
564+
<Button @click="nextStep">
565+
{{ t('mcpCatalog.form.navigation.next') }}
566+
</Button>
567+
</template>
568+
</DsCard>
569+
570+
<!-- Step 4: Basic Info -->
571+
<DsCard v-else-if="currentStep === 3" :title="t('mcpCatalog.form.steps.basic')">
572+
<BasicInfoStepAdd
573+
v-model="formData.basic"
574+
:form-data="compatibleFormData"
575+
/>
576+
577+
<template #footer-actions>
578+
<Button variant="outline" @click="previousStep">
579+
{{ t('mcpCatalog.form.navigation.previous') }}
580+
</Button>
575581
<Button
576-
v-else
577582
@click="submitForm"
578583
:disabled="!canSubmit || isSubmitting"
579584
>
580585
<Spinner v-if="isSubmitting" class="mr-2" />
581586
{{ t('mcpCatalog.form.navigation.submit') }}
582587
</Button>
583-
</div>
584-
</div>
585-
586-
<!-- GitHub Fetch Error (show below navigation) -->
587-
<Alert v-if="githubFetchError && currentStep === 0" variant="destructive" class="mt-4">
588-
<AlertDescription>
589-
{{ githubFetchError }}
590-
<br>
591-
<span class="text-sm">{{ t('mcpCatalog.validation.githubUrlInvalid') }}</span>
592-
</AlertDescription>
593-
</Alert>
588+
</template>
589+
</DsCard>
594590
</div>
595591
</template>

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,10 @@ loadCategories()
8686

8787
<template>
8888
<div class="space-y-6">
89-
<div class="px-4 sm:px-0">
90-
<h3 class="text-base/7 font-semibold text-gray-900">{{ t('mcpCatalog.form.basic.title') }}</h3>
91-
<p class="mt-1 max-w-2xl text-sm/6 text-gray-500">
92-
{{ t('mcpCatalog.form.basic.subtitle') }}
93-
<span v-if="isAutoPopulated"> (auto-populated from GitHub)</span>
94-
</p>
95-
</div>
89+
<p class="text-sm text-muted-foreground">
90+
{{ t('mcpCatalog.form.basic.subtitle') }}
91+
<span v-if="isAutoPopulated"> (auto-populated from GitHub)</span>
92+
</p>
9693

9794
<!-- Auto-population success indicator -->
9895
<Alert v-if="isAutoPopulated" class="border-green-200 bg-green-50">

‎services/frontend/src/views/admin/mcp-server-catalog/McpServerTableColumns.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -556,7 +556,9 @@ const getRepositoryLabel = (platform?: string) => {
556556
<!-- Name -->
557557
<TableCell>
558558
<div class="space-y-1">
559-
<div>{{ server.name }}</div>
559+
<RouterLink :to="`/admin/mcp-server-catalog/view/${server.id}`" class="link">
560+
{{ server.name }}
561+
</RouterLink>
560562
<!-- Repository Link -->
561563
<div v-if="server.repository_url" class="flex items-center gap-1">
562564
<component

‎services/frontend/src/views/admin/mcp-server-catalog/add.vue‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,16 @@ import { useI18n } from 'vue-i18n'
44
import { useRouter } from 'vue-router'
55
import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
66
import { toast } from 'vue-sonner'
7-
import { Button } from '@/components/ui/button'
8-
import { ArrowLeft } from 'lucide-vue-next'
97
import NavbarLayout from '@/components/NavbarLayout.vue'
8+
import { DsPageHeading } from '@/components/ui/ds-page-heading'
9+
import {
10+
Breadcrumb,
11+
BreadcrumbItem,
12+
BreadcrumbLink,
13+
BreadcrumbList,
14+
BreadcrumbPage,
15+
BreadcrumbSeparator,
16+
} from '@/components/ui/breadcrumb'
1017
import McpServerAddFormWizard from '@/components/admin/mcp-catalog/McpServerAddFormWizard.vue'
1118
import { McpCatalogService } from '@/services/mcpCatalogService'
1219
import type { CreateMcpServerRequest } from './types'
@@ -26,10 +33,6 @@ onMounted(() => {
2633
])
2734
})
2835
29-
const goBack = () => {
30-
router.push('/admin/mcp-server-catalog')
31-
}
32-
3336
const handleSubmit = async (formData: FinalPayload) => {
3437
try {
3538
// The formData is now the final payload, constructed in the wizard.
@@ -63,15 +66,25 @@ const handleCancel = () => {
6366

6467
<template>
6568
<NavbarLayout>
66-
<div class="space-y-6">
67-
<!-- Header with back button -->
68-
<div class="flex items-center gap-4">
69-
<Button variant="ghost" size="sm" @click="goBack" class="flex items-center gap-2">
70-
<ArrowLeft class="h-4 w-4" />
71-
{{ t('mcpCatalog.edit.backToCatalog') }}
72-
</Button>
73-
</div>
69+
<DsPageHeading :title="t('mcpCatalog.form.title')">
70+
<Breadcrumb>
71+
<BreadcrumbList>
72+
<BreadcrumbItem>
73+
<BreadcrumbLink as-child>
74+
<RouterLink to="/admin/mcp-server-catalog">
75+
{{ t('mcpCatalog.title') }}
76+
</RouterLink>
77+
</BreadcrumbLink>
78+
</BreadcrumbItem>
79+
<BreadcrumbSeparator />
80+
<BreadcrumbItem>
81+
<BreadcrumbPage>{{ t('mcpCatalog.form.title') }}</BreadcrumbPage>
82+
</BreadcrumbItem>
83+
</BreadcrumbList>
84+
</Breadcrumb>
85+
</DsPageHeading>
7486

87+
<div class="mt-6">
7588
<!-- Form Wizard Component -->
7689
<McpServerAddFormWizard
7790
@submit="handleSubmit"

‎services/frontend/src/views/admin/mcp-server-catalog/edit/[id].vue‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@ import { Spinner } from '@/components/ui/spinner'
1010
import { Loader2 } from 'lucide-vue-next'
1111
import { Alert, AlertDescription } from '@/components/ui/alert'
1212
import NavbarLayout from '@/components/NavbarLayout.vue'
13+
import { DsPageHeading } from '@/components/ui/ds-page-heading'
14+
import {
15+
Breadcrumb,
16+
BreadcrumbItem,
17+
BreadcrumbLink,
18+
BreadcrumbList,
19+
BreadcrumbPage,
20+
BreadcrumbSeparator,
21+
} from '@/components/ui/breadcrumb'
1322
import McpServerFormWizard from '@/components/admin/mcp-catalog/McpServerEditFormWizard.vue'
1423
import { McpCatalogService } from '@/services/mcpCatalogService'
1524
import { useEventBus } from '@/composables/useEventBus'
@@ -400,7 +409,33 @@ onMounted(() => {
400409

401410
<template>
402411
<NavbarLayout>
403-
<div class="space-y-6">
412+
<DsPageHeading :title="serverData?.name || t('mcpCatalog.edit.titleLoading')">
413+
<Breadcrumb>
414+
<BreadcrumbList>
415+
<BreadcrumbItem>
416+
<BreadcrumbLink as-child>
417+
<RouterLink to="/admin/mcp-server-catalog">
418+
{{ t('mcpCatalog.title') }}
419+
</RouterLink>
420+
</BreadcrumbLink>
421+
</BreadcrumbItem>
422+
<BreadcrumbSeparator />
423+
<BreadcrumbItem>
424+
<BreadcrumbLink as-child>
425+
<RouterLink :to="`/admin/mcp-server-catalog/view/${serverId}`">
426+
{{ serverData?.name || t('mcpCatalog.edit.titleLoading') }}
427+
</RouterLink>
428+
</BreadcrumbLink>
429+
</BreadcrumbItem>
430+
<BreadcrumbSeparator />
431+
<BreadcrumbItem>
432+
<BreadcrumbPage>{{ t('mcpCatalog.form.navigation.edit') }}</BreadcrumbPage>
433+
</BreadcrumbItem>
434+
</BreadcrumbList>
435+
</Breadcrumb>
436+
</DsPageHeading>
437+
438+
<div class="space-y-6 mt-6">
404439
<!-- Loading State -->
405440
<div v-if="isLoading" class="flex items-center justify-center py-12">
406441
<div class="flex items-center gap-2 text-muted-foreground">

0 commit comments

Comments
 (0)