Skip to content

Commit e4a68f0

Browse files
author
Lasim
committed
refactor: enhance layout and styling for environment variables in EnvironmentVariableCard component
1 parent d3a005a commit e4a68f0

File tree

1 file changed

+151
-137
lines changed

1 file changed

+151
-137
lines changed

‎services/frontend/src/components/mcp-server/EnvironmentVariableCard.vue‎

Lines changed: 151 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -169,154 +169,168 @@ watch(() => environmentVariables.value, (newVariables) => {
169169
</script>
170170

171171
<template>
172-
<div class="space-y-6">
173-
<!-- No Environment Variables -->
174-
<div v-if="!environmentVariables.length" class="text-center py-8">
175-
<Settings class="h-12 w-12 text-gray-400 mx-auto mb-4" />
176-
<h3 class="text-lg font-medium text-gray-900 mb-2">
177-
{{ t('mcpInstallations.wizard.environment.noVariables') }}
178-
</h3>
179-
<p class="text-gray-600">
180-
{{ t('mcpInstallations.wizard.environment.noVariablesDescription') }}
181-
</p>
182-
</div>
183-
184-
<!-- Environment Variables Form -->
185-
<div v-else class="space-y-6">
186-
<!-- Server Info -->
187-
<Card v-if="serverData">
188-
<CardHeader>
189-
<CardTitle class="flex items-center gap-2">
190-
<Settings class="h-5 w-5" />
191-
{{ serverData.name }}
192-
</CardTitle>
193-
<CardDescription>
194-
{{ t('mcpInstallations.wizard.environment.configureFor', { name: serverData.name }) }}
195-
</CardDescription>
196-
</CardHeader>
197-
</Card>
198-
199-
200-
<!-- Required Variables -->
201-
<div v-if="hasRequiredVariables" class="space-y-4">
202-
<h3 class="text-lg font-medium text-gray-900">
203-
{{ t('mcpInstallations.wizard.environment.requiredVariables') }}
204-
</h3>
205-
206-
<div class="space-y-4">
207-
<div
208-
v-for="env in requiredVariables"
209-
:key="env.name"
210-
class="space-y-2"
211-
>
212-
<Label :for="env.name" class="text-sm font-medium">
213-
{{ env.name }}
214-
</Label>
215-
216-
<!-- Textarea for long values -->
217-
<div v-if="isTextarea(env)" class="relative">
218-
<Textarea
219-
:id="env.name"
220-
:value="modelValue[env.name] || ''"
221-
@input="updateValue(env.name, ($event.target as HTMLTextAreaElement).value)"
222-
:placeholder="env.placeholder || `Enter ${env.name}`"
223-
class="min-h-[100px]"
224-
:class="{ 'border-red-500': env.required && isPlaceholderValue(modelValue[env.name] || '', env) }"
225-
/>
226-
</div>
227-
228-
<!-- Regular input -->
229-
<div v-else class="relative">
230-
<Input
231-
:id="env.name"
232-
:type="getInputType(env)"
233-
:value="modelValue[env.name] || ''"
234-
@input="updateValue(env.name, ($event.target as HTMLInputElement).value)"
235-
:placeholder="env.placeholder || `Enter ${env.name}`"
236-
:class="{ 'border-red-500': env.required && isPlaceholderValue(modelValue[env.name] || '', env) }"
237-
/>
238-
239-
<!-- Password toggle -->
240-
<Button
241-
v-if="env.type === 'password'"
242-
type="button"
243-
variant="ghost"
244-
size="sm"
245-
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
246-
@click="togglePasswordVisibility(env.name)"
247-
>
248-
<Eye v-if="!showPasswords[env.name]" class="h-4 w-4" />
249-
<EyeOff v-else class="h-4 w-4" />
250-
</Button>
251-
</div>
252-
253-
<!-- Validation message -->
254-
<p v-if="env.validation" class="text-xs text-gray-600">
255-
{{ env.validation }}
172+
<div class="bg-muted/50 sm:rounded-lg">
173+
<div class="py-16 sm:py-24">
174+
<div class="mx-auto max-w-7xl sm:px-2 lg:px-8">
175+
<div class="mx-auto max-w-2xl px-4 lg:max-w-4xl lg:px-0">
176+
<!-- No Environment Variables -->
177+
<div v-if="!environmentVariables.length" class="text-center py-8">
178+
<Settings class="h-12 w-12 text-gray-400 mx-auto mb-4" />
179+
<h3 class="text-lg font-medium text-gray-900 mb-2">
180+
{{ t('mcpInstallations.wizard.environment.noVariables') }}
181+
</h3>
182+
<p class="text-gray-600">
183+
{{ t('mcpInstallations.wizard.environment.noVariablesDescription') }}
256184
</p>
257185
</div>
258186
</div>
259187
</div>
260188

261-
<!-- Optional Variables -->
262-
<div v-if="hasOptionalVariables" class="space-y-4">
263-
<h3 class="text-lg font-medium text-gray-900">
264-
{{ t('mcpInstallations.wizard.environment.optionalVariables') }}
265-
</h3>
266-
267-
<div class="space-y-4">
268-
<div
269-
v-for="env in optionalVariables"
270-
:key="env.name"
271-
class="space-y-2"
272-
>
273-
<Label :for="env.name" class="text-sm font-medium">
274-
{{ env.name }}
275-
</Label>
276-
277-
<!-- Textarea for long values -->
278-
<div v-if="isTextarea(env)" class="relative">
279-
<Textarea
280-
:id="env.name"
281-
:value="modelValue[env.name] || ''"
282-
@input="updateValue(env.name, ($event.target as HTMLTextAreaElement).value)"
283-
:placeholder="env.placeholder || `Enter ${env.name} (optional)`"
284-
class="min-h-[100px]"
285-
/>
189+
<!-- Environment Variables Form -->
190+
<div v-if="environmentVariables.length">
191+
<div class="mx-auto max-w-7xl sm:px-2 lg:px-8">
192+
<div class="mx-auto max-w-2xl space-y-8 sm:px-4 lg:max-w-4xl lg:px-0">
193+
<!-- Server Info -->
194+
<Card v-if="serverData" class="border-t border-b border-gray-200 bg-white shadow-xs sm:rounded-lg sm:border">
195+
<CardHeader>
196+
<CardTitle class="flex items-center gap-2">
197+
<Settings class="h-5 w-5" />
198+
{{ serverData.name }}
199+
</CardTitle>
200+
<CardDescription>
201+
{{ t('mcpInstallations.wizard.environment.configureFor', { name: serverData.name }) }}
202+
</CardDescription>
203+
</CardHeader>
204+
</Card>
205+
206+
<!-- Required Variables -->
207+
<div v-if="hasRequiredVariables" class="border-t border-b border-gray-200 bg-white shadow-xs sm:rounded-lg sm:border">
208+
<div class="p-4 sm:p-6">
209+
<h3 class="text-lg font-medium text-gray-900 mb-4">
210+
{{ t('mcpInstallations.wizard.environment.requiredVariables') }}
211+
</h3>
212+
213+
<div class="space-y-4">
214+
<div
215+
v-for="env in requiredVariables"
216+
:key="env.name"
217+
class="space-y-2"
218+
>
219+
<Label :for="env.name" class="text-sm font-medium">
220+
{{ env.name }}
221+
</Label>
222+
223+
<!-- Textarea for long values -->
224+
<div v-if="isTextarea(env)" class="relative">
225+
<Textarea
226+
:id="env.name"
227+
:value="modelValue[env.name] || ''"
228+
@input="updateValue(env.name, ($event.target as HTMLTextAreaElement).value)"
229+
:placeholder="env.placeholder || `Enter ${env.name}`"
230+
class="min-h-[100px] bg-white"
231+
:class="{ 'border-red-500': env.required && isPlaceholderValue(modelValue[env.name] || '', env) }"
232+
/>
233+
</div>
234+
235+
<!-- Regular input -->
236+
<div v-else class="relative">
237+
<Input
238+
:id="env.name"
239+
:type="getInputType(env)"
240+
:value="modelValue[env.name] || ''"
241+
@input="updateValue(env.name, ($event.target as HTMLInputElement).value)"
242+
:placeholder="env.placeholder || `Enter ${env.name}`"
243+
class="bg-white"
244+
:class="{ 'border-red-500': env.required && isPlaceholderValue(modelValue[env.name] || '', env) }"
245+
/>
246+
247+
<!-- Password toggle -->
248+
<Button
249+
v-if="env.type === 'password'"
250+
type="button"
251+
variant="ghost"
252+
size="sm"
253+
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
254+
@click="togglePasswordVisibility(env.name)"
255+
>
256+
<Eye v-if="!showPasswords[env.name]" class="h-4 w-4" />
257+
<EyeOff v-else class="h-4 w-4" />
258+
</Button>
259+
</div>
260+
261+
<!-- Validation message -->
262+
<p v-if="env.validation" class="text-xs text-gray-600">
263+
{{ env.validation }}
264+
</p>
265+
</div>
266+
</div>
267+
</div>
286268
</div>
287269

288-
<!-- Regular input -->
289-
<div v-else class="relative">
290-
<Input
291-
:id="env.name"
292-
:type="getInputType(env)"
293-
:value="modelValue[env.name] || ''"
294-
@input="updateValue(env.name, ($event.target as HTMLInputElement).value)"
295-
:placeholder="env.placeholder || `Enter ${env.name} (optional)`"
296-
/>
297-
298-
<!-- Password toggle -->
299-
<Button
300-
v-if="env.type === 'password'"
301-
type="button"
302-
variant="ghost"
303-
size="sm"
304-
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
305-
@click="togglePasswordVisibility(env.name)"
306-
>
307-
<Eye v-if="!showPasswords[env.name]" class="h-4 w-4" />
308-
<EyeOff v-else class="h-4 w-4" />
309-
</Button>
270+
<!-- Optional Variables -->
271+
<div v-if="hasOptionalVariables" class="border-t border-b border-gray-200 bg-white shadow-xs sm:rounded-lg sm:border">
272+
<div class="p-4 sm:p-6">
273+
<h3 class="text-lg font-medium text-gray-900 mb-4">
274+
{{ t('mcpInstallations.wizard.environment.optionalVariables') }}
275+
</h3>
276+
277+
<div class="space-y-4">
278+
<div
279+
v-for="env in optionalVariables"
280+
:key="env.name"
281+
class="space-y-2"
282+
>
283+
<Label :for="env.name" class="text-sm font-medium">
284+
{{ env.name }}
285+
</Label>
286+
287+
<!-- Textarea for long values -->
288+
<div v-if="isTextarea(env)" class="relative">
289+
<Textarea
290+
:id="env.name"
291+
:value="modelValue[env.name] || ''"
292+
@input="updateValue(env.name, ($event.target as HTMLTextAreaElement).value)"
293+
:placeholder="env.placeholder || `Enter ${env.name} (optional)`"
294+
class="min-h-[100px] bg-white"
295+
/>
296+
</div>
297+
298+
<!-- Regular input -->
299+
<div v-else class="relative">
300+
<Input
301+
:id="env.name"
302+
:type="getInputType(env)"
303+
:value="modelValue[env.name] || ''"
304+
@input="updateValue(env.name, ($event.target as HTMLInputElement).value)"
305+
:placeholder="env.placeholder || `Enter ${env.name} (optional)`"
306+
class="bg-white"
307+
/>
308+
309+
<!-- Password toggle -->
310+
<Button
311+
v-if="env.type === 'password'"
312+
type="button"
313+
variant="ghost"
314+
size="sm"
315+
class="absolute right-2 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
316+
@click="togglePasswordVisibility(env.name)"
317+
>
318+
<Eye v-if="!showPasswords[env.name]" class="h-4 w-4" />
319+
<EyeOff v-else class="h-4 w-4" />
320+
</Button>
321+
</div>
322+
323+
<!-- Validation message -->
324+
<p v-if="env.validation" class="text-xs text-gray-600">
325+
{{ env.validation }}
326+
</p>
327+
</div>
328+
</div>
329+
</div>
310330
</div>
311-
312-
<!-- Validation message -->
313-
<p v-if="env.validation" class="text-xs text-gray-600">
314-
{{ env.validation }}
315-
</p>
316331
</div>
317332
</div>
318333
</div>
319-
320334
</div>
321335
</div>
322336
</template>

0 commit comments

Comments
 (0)