Skip to content

Commit 2934f86

Browse files
author
Lasim
committed
feat(frontend): enhance installation views with loading and error states
1 parent 6e17ab1 commit 2934f86

File tree

6 files changed

+113
-127
lines changed

6 files changed

+113
-127
lines changed

‎services/frontend/src/views/mcp-server/installation/[id]/danger-zone.vue‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,35 +83,33 @@ onUnmounted(() => {
8383
</DsPageHeading>
8484

8585
<div class="space-y-6 mt-6">
86+
<!-- Tabs - Always visible when installation is loaded -->
87+
<InstallationTabs
88+
v-if="installation"
89+
:installation="installation"
90+
:installation-id="installationId"
91+
/>
92+
8693
<!-- Error State -->
8794
<div v-if="error" class="text-red-500">
8895
{{ t('mcpInstallations.view.errorLoading', { error }) }}
8996
</div>
9097

91-
<!-- Loading State -->
92-
<div v-else-if="isLoading" class="space-y-6">
93-
<Skeleton class="h-12 w-full" />
94-
<div class="space-y-4">
95-
<Skeleton class="h-32 w-full rounded-lg" />
96-
<Skeleton class="h-32 w-full rounded-lg" />
97-
<Skeleton class="h-32 w-full rounded-lg" />
98-
</div>
98+
<!-- Loading State for Content -->
99+
<div v-else-if="isLoading" class="space-y-4">
100+
<Skeleton class="h-32 w-full rounded-lg" />
101+
<Skeleton class="h-32 w-full rounded-lg" />
102+
<Skeleton class="h-32 w-full rounded-lg" />
99103
</div>
100104

101-
<!-- Installation Details with Tabs -->
102-
<div v-else-if="installation && currentTeam">
103-
<InstallationTabs
104-
:installation="installation"
105-
:installation-id="installationId"
106-
/>
107-
108-
<DangerZone
109-
:installation="installation"
110-
:team-id="currentTeam.id"
111-
:can-edit="canEditInstallation"
112-
:user-role="userTeamRole"
113-
/>
114-
</div>
105+
<!-- Danger Zone Content -->
106+
<DangerZone
107+
v-else-if="installation && currentTeam"
108+
:installation="installation"
109+
:team-id="currentTeam.id"
110+
:can-edit="canEditInstallation"
111+
:user-role="userTeamRole"
112+
/>
115113
</div>
116114
</NavbarLayout>
117115
</template>

‎services/frontend/src/views/mcp-server/installation/[id]/information.vue‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const { t } = useI18n()
1919
2020
const {
2121
installation,
22-
currentTeam,
2322
isLoading,
2423
error,
2524
installationId,
@@ -78,30 +77,27 @@ onUnmounted(() => {
7877
</DsPageHeading>
7978

8079
<div class="space-y-6 mt-6">
80+
<!-- Tabs - Always visible when installation is loaded -->
81+
<InstallationTabs
82+
v-if="installation"
83+
:installation="installation"
84+
:installation-id="installationId"
85+
/>
86+
8187
<!-- Error State -->
8288
<div v-if="error" class="text-red-500">
8389
{{ t('mcpInstallations.view.errorLoading', { error }) }}
8490
</div>
8591

86-
<!-- Loading State -->
87-
<div v-else-if="isLoading" class="space-y-6">
88-
<Skeleton class="h-12 w-full" />
89-
<div class="space-y-4">
90-
<Skeleton class="h-32 w-full rounded-lg" />
91-
<Skeleton class="h-32 w-full rounded-lg" />
92-
<Skeleton class="h-32 w-full rounded-lg" />
93-
</div>
92+
<!-- Loading State for Content -->
93+
<div v-else-if="isLoading" class="space-y-4">
94+
<Skeleton class="h-32 w-full rounded-lg" />
95+
<Skeleton class="h-32 w-full rounded-lg" />
96+
<Skeleton class="h-32 w-full rounded-lg" />
9497
</div>
9598

96-
<!-- Installation Details with Tabs -->
97-
<div v-else-if="installation && currentTeam">
98-
<InstallationTabs
99-
:installation="installation"
100-
:installation-id="installationId"
101-
/>
102-
103-
<InstallationInfo :installation="installation" />
104-
</div>
99+
<!-- Installation Info Content -->
100+
<InstallationInfo v-else-if="installation" :installation="installation" />
105101
</div>
106102
</NavbarLayout>
107103
</template>

‎services/frontend/src/views/mcp-server/installation/[id]/mcp-tools.vue‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,35 +83,33 @@ onUnmounted(() => {
8383
</DsPageHeading>
8484

8585
<div class="space-y-6 mt-6">
86+
<!-- Tabs - Always visible when installation is loaded -->
87+
<InstallationTabs
88+
v-if="installation"
89+
:installation="installation"
90+
:installation-id="installationId"
91+
/>
92+
8693
<!-- Error State -->
8794
<div v-if="error" class="text-red-500">
8895
{{ t('mcpInstallations.view.errorLoading', { error }) }}
8996
</div>
9097

91-
<!-- Loading State -->
92-
<div v-else-if="isLoading" class="space-y-6">
93-
<Skeleton class="h-12 w-full" />
94-
<div class="space-y-4">
95-
<Skeleton class="h-32 w-full rounded-lg" />
96-
<Skeleton class="h-32 w-full rounded-lg" />
97-
<Skeleton class="h-32 w-full rounded-lg" />
98-
</div>
98+
<!-- Loading State for Content -->
99+
<div v-else-if="isLoading" class="space-y-4">
100+
<Skeleton class="h-32 w-full rounded-lg" />
101+
<Skeleton class="h-32 w-full rounded-lg" />
102+
<Skeleton class="h-32 w-full rounded-lg" />
99103
</div>
100104

101-
<!-- Installation Details with Tabs -->
102-
<div v-else-if="installation && currentTeam">
103-
<InstallationTabs
104-
:installation="installation"
105-
:installation-id="installationId"
106-
/>
107-
108-
<McpToolsTab
109-
:installation="installation"
110-
:team-id="currentTeam.id"
111-
:can-edit="canEditInstallation"
112-
:user-role="userTeamRole"
113-
/>
114-
</div>
105+
<!-- MCP Tools Content -->
106+
<McpToolsTab
107+
v-else-if="installation && currentTeam"
108+
:installation="installation"
109+
:team-id="currentTeam.id"
110+
:can-edit="canEditInstallation"
111+
:user-role="userTeamRole"
112+
/>
115113
</div>
116114
</NavbarLayout>
117115
</template>

‎services/frontend/src/views/mcp-server/installation/[id]/requests.vue‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -78,33 +78,31 @@ onUnmounted(() => {
7878
</DsPageHeading>
7979

8080
<div class="space-y-6 mt-6">
81+
<!-- Tabs - Always visible when installation is loaded -->
82+
<InstallationTabs
83+
v-if="installation"
84+
:installation="installation"
85+
:installation-id="installationId"
86+
/>
87+
8188
<!-- Error State -->
8289
<div v-if="error" class="text-red-500">
8390
{{ t('mcpInstallations.view.errorLoading', { error }) }}
8491
</div>
8592

86-
<!-- Loading State -->
87-
<div v-else-if="isLoading" class="space-y-6">
88-
<Skeleton class="h-12 w-full" />
89-
<div class="space-y-4">
90-
<Skeleton class="h-32 w-full rounded-lg" />
91-
<Skeleton class="h-32 w-full rounded-lg" />
92-
<Skeleton class="h-32 w-full rounded-lg" />
93-
</div>
93+
<!-- Loading State for Content -->
94+
<div v-else-if="isLoading" class="space-y-4">
95+
<Skeleton class="h-32 w-full rounded-lg" />
96+
<Skeleton class="h-32 w-full rounded-lg" />
97+
<Skeleton class="h-32 w-full rounded-lg" />
9498
</div>
9599

96-
<!-- Installation Details with Tabs -->
97-
<div v-else-if="installation && currentTeam">
98-
<InstallationTabs
99-
:installation="installation"
100-
:installation-id="installationId"
101-
/>
102-
103-
<RequestsTab
104-
:installation="installation"
105-
:team-id="currentTeam.id"
106-
/>
107-
</div>
100+
<!-- Requests Content -->
101+
<RequestsTab
102+
v-else-if="installation && currentTeam"
103+
:installation="installation"
104+
:team-id="currentTeam.id"
105+
/>
108106
</div>
109107
</NavbarLayout>
110108
</template>

‎services/frontend/src/views/mcp-server/installation/[id]/team-config.vue‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -91,36 +91,34 @@ onUnmounted(() => {
9191
</DsPageHeading>
9292

9393
<div class="space-y-6 mt-6">
94+
<!-- Tabs - Always visible when installation is loaded -->
95+
<InstallationTabs
96+
v-if="installation"
97+
:installation="installation"
98+
:installation-id="installationId"
99+
/>
100+
94101
<!-- Error State -->
95102
<div v-if="error" class="text-red-500">
96103
{{ t('mcpInstallations.view.errorLoading', { error }) }}
97104
</div>
98105

99-
<!-- Loading State -->
100-
<div v-else-if="isLoading" class="space-y-6">
101-
<Skeleton class="h-12 w-full" />
102-
<div class="space-y-4">
103-
<Skeleton class="h-32 w-full rounded-lg" />
104-
<Skeleton class="h-32 w-full rounded-lg" />
105-
<Skeleton class="h-32 w-full rounded-lg" />
106-
</div>
106+
<!-- Loading State for Content -->
107+
<div v-else-if="isLoading" class="space-y-4">
108+
<Skeleton class="h-32 w-full rounded-lg" />
109+
<Skeleton class="h-32 w-full rounded-lg" />
110+
<Skeleton class="h-32 w-full rounded-lg" />
107111
</div>
108112

109-
<!-- Installation Details with Tabs -->
110-
<div v-else-if="installation && currentTeam">
111-
<InstallationTabs
112-
:installation="installation"
113-
:installation-id="installationId"
114-
/>
115-
116-
<TeamConfiguration
117-
:installation="installation"
118-
:team-id="currentTeam.id"
119-
:can-edit="canEditInstallation"
120-
:user-role="userTeamRole"
121-
@installation-updated="handleInstallationUpdated"
122-
/>
123-
</div>
113+
<!-- Team Configuration Content -->
114+
<TeamConfiguration
115+
v-else-if="installation && currentTeam"
116+
:installation="installation"
117+
:team-id="currentTeam.id"
118+
:can-edit="canEditInstallation"
119+
:user-role="userTeamRole"
120+
@installation-updated="handleInstallationUpdated"
121+
/>
124122
</div>
125123
</NavbarLayout>
126124
</template>

‎services/frontend/src/views/mcp-server/installation/[id]/user-config.vue‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,35 +83,33 @@ onUnmounted(() => {
8383
</DsPageHeading>
8484

8585
<div class="space-y-6 mt-6">
86+
<!-- Tabs - Always visible when installation is loaded -->
87+
<InstallationTabs
88+
v-if="installation"
89+
:installation="installation"
90+
:installation-id="installationId"
91+
/>
92+
8693
<!-- Error State -->
8794
<div v-if="error" class="text-red-500">
8895
{{ t('mcpInstallations.view.errorLoading', { error }) }}
8996
</div>
9097

91-
<!-- Loading State -->
92-
<div v-else-if="isLoading" class="space-y-6">
93-
<Skeleton class="h-12 w-full" />
94-
<div class="space-y-4">
95-
<Skeleton class="h-32 w-full rounded-lg" />
96-
<Skeleton class="h-32 w-full rounded-lg" />
97-
<Skeleton class="h-32 w-full rounded-lg" />
98-
</div>
98+
<!-- Loading State for Content -->
99+
<div v-else-if="isLoading" class="space-y-4">
100+
<Skeleton class="h-32 w-full rounded-lg" />
101+
<Skeleton class="h-32 w-full rounded-lg" />
102+
<Skeleton class="h-32 w-full rounded-lg" />
99103
</div>
100104

101-
<!-- Installation Details with Tabs -->
102-
<div v-else-if="installation && currentTeam">
103-
<InstallationTabs
104-
:installation="installation"
105-
:installation-id="installationId"
106-
/>
107-
108-
<UserConfiguration
109-
:installation="installation"
110-
:team-id="currentTeam.id"
111-
:can-edit="canEditInstallation"
112-
:user-role="userTeamRole"
113-
/>
114-
</div>
105+
<!-- User Configuration Content -->
106+
<UserConfiguration
107+
v-else-if="installation && currentTeam"
108+
:installation="installation"
109+
:team-id="currentTeam.id"
110+
:can-edit="canEditInstallation"
111+
:user-role="userTeamRole"
112+
/>
115113
</div>
116114
</NavbarLayout>
117115
</template>

0 commit comments

Comments
 (0)