Skip to content

Commit bbd9b62

Browse files
author
Lasim
committed
feat(frontend): add boolean select input for environment variables
1 parent 3862166 commit bbd9b62

File tree

2 files changed

+108
-10
lines changed

2 files changed

+108
-10
lines changed

‎services/frontend/src/components/mcp-server/installation/TeamConfiguration.vue‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ import { Badge } from '@/components/ui/badge'
1212
import { Input } from '@/components/ui/input'
1313
import { Label } from '@/components/ui/label'
1414
import { Textarea } from '@/components/ui/textarea'
15+
import {
16+
Select,
17+
SelectContent,
18+
SelectItem,
19+
SelectTrigger,
20+
SelectValue,
21+
} from '@/components/ui/select'
1522
import {
1623
AlertDialog,
1724
AlertDialogContent,
@@ -170,7 +177,7 @@ const openEditModal = (item: any, type: 'arg' | 'env' | 'header' | 'query_param'
170177
171178
editingItem.value = item
172179
editingType.value = type
173-
editingValue.value = item.currentValue
180+
editingValue.value = String(item.currentValue || '')
174181
showPassword.value = false
175182
formErrors.value = {}
176183
isEditModalOpen.value = true
@@ -202,6 +209,10 @@ const isTextarea = (item: any) => {
202209
(item.placeholder && item.placeholder.length > 100)
203210
}
204211
212+
const isBoolean = (item: any) => {
213+
return item.type === 'boolean'
214+
}
215+
205216
const validateForm = () => {
206217
const errors: Record<string, string> = {}
207218
@@ -631,8 +642,21 @@ const modalTitle = computed(() => {
631642
<div class="space-y-2">
632643
<Label for="config-value">{{ t('mcpInstallations.teamConfiguration.editModal.form.labels.teamValue') }}</Label>
633644

645+
<!-- Boolean select -->
646+
<div v-if="editingItem && isBoolean(editingItem)">
647+
<Select v-model="editingValue">
648+
<SelectTrigger>
649+
<SelectValue placeholder="Select value" />
650+
</SelectTrigger>
651+
<SelectContent>
652+
<SelectItem value="false">false</SelectItem>
653+
<SelectItem value="true">true</SelectItem>
654+
</SelectContent>
655+
</Select>
656+
</div>
657+
634658
<!-- Textarea for long values -->
635-
<div v-if="editingItem && isTextarea(editingItem)" class="relative">
659+
<div v-else-if="editingItem && isTextarea(editingItem)" class="relative">
636660
<Textarea
637661
id="config-value"
638662
v-model="editingValue"

‎services/frontend/src/components/mcp-server/wizard/EnvironmentVariablesStep.vue‎

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { useI18n } from 'vue-i18n'
44
import { Input } from '@/components/ui/input'
55
import { Label } from '@/components/ui/label'
66
import { Textarea } from '@/components/ui/textarea'
7+
import {
8+
Select,
9+
SelectContent,
10+
SelectItem,
11+
SelectTrigger,
12+
SelectValue,
13+
} from '@/components/ui/select'
714
import { Item } from '@/components/ui/item'
815
916
interface EnvironmentVariable {
@@ -203,15 +210,18 @@ watch(() => props.serverData, (newData) => {
203210
})
204211
205212
teamSchema.forEach((env) => {
206-
newTeamEnv[env.name] = modelValue.value.team_env?.[env.name] || ''
213+
const defaultValue = env.type === 'boolean' ? 'false' : ''
214+
newTeamEnv[env.name] = modelValue.value.team_env?.[env.name] || defaultValue
207215
})
208216
209217
teamHeadersSchema.forEach((header) => {
210-
newTeamHeaders[header.name] = modelValue.value.team_headers?.[header.name] || ''
218+
const defaultValue = header.type === 'boolean' ? 'false' : ''
219+
newTeamHeaders[header.name] = modelValue.value.team_headers?.[header.name] || defaultValue
211220
})
212221
213222
teamQueryParamsSchemaData.forEach((param) => {
214-
newTeamQueryParams[param.name] = modelValue.value.team_url_query_params?.[param.name] || ''
223+
const defaultValue = param.type === 'boolean' ? 'false' : ''
224+
newTeamQueryParams[param.name] = modelValue.value.team_url_query_params?.[param.name] || defaultValue
215225
})
216226
217227
userSchema.forEach((env) => {
@@ -248,6 +258,21 @@ const isTextarea = (envVar: EnvironmentVariable) => {
248258
(envVar.description?.toLowerCase().includes('json')) ||
249259
(envVar.placeholder && envVar.placeholder.length > 100)
250260
}
261+
262+
const isBoolean = (item: EnvironmentVariable | HeaderSchema | QueryParamSchema | ArgumentSchema) => {
263+
return item.type === 'boolean'
264+
}
265+
266+
// Update boolean values with proper reactivity
267+
const updateBooleanValue = (type: 'team_env' | 'team_headers' | 'team_url_query_params', key: string, value: string) => {
268+
if (type === 'team_env') {
269+
modelValue.value.team_env = { ...modelValue.value.team_env, [key]: value }
270+
} else if (type === 'team_headers') {
271+
modelValue.value.team_headers = { ...modelValue.value.team_headers, [key]: value }
272+
} else if (type === 'team_url_query_params') {
273+
modelValue.value.team_url_query_params = { ...modelValue.value.team_url_query_params, [key]: value }
274+
}
275+
}
251276
</script>
252277

253278
<template>
@@ -348,18 +373,35 @@ const isTextarea = (envVar: EnvironmentVariable) => {
348373
{{ envVar.description }}
349374
</div>
350375

351-
<div class="relative">
376+
<!-- Boolean select -->
377+
<Select
378+
v-if="isBoolean(envVar)"
379+
:model-value="modelValue.team_env[envVar.name]"
380+
@update:model-value="(val) => updateBooleanValue('team_env', envVar.name, String(val))"
381+
>
382+
<SelectTrigger>
383+
<SelectValue placeholder="Select value" />
384+
</SelectTrigger>
385+
<SelectContent>
386+
<SelectItem value="false">false</SelectItem>
387+
<SelectItem value="true">true</SelectItem>
388+
</SelectContent>
389+
</Select>
390+
391+
<!-- Textarea for long values -->
392+
<div v-else-if="isTextarea(envVar)" class="relative">
352393
<Textarea
353-
v-if="isTextarea(envVar)"
354394
:id="`team_${envVar.name}`"
355395
v-model="modelValue.team_env[envVar.name]"
356396
:placeholder="envVar.placeholder || t('mcpInstallations.teamConfiguration.editModal.form.placeholders.enterValue')"
357397
class="min-h-[100px]"
358398
:required="envVar.required"
359399
/>
400+
</div>
360401

402+
<!-- Regular input -->
403+
<div v-else class="relative">
361404
<Input
362-
v-else
363405
:id="`team_${envVar.name}`"
364406
:type="getInputType(envVar)"
365407
v-model="modelValue.team_env[envVar.name]"
@@ -416,7 +458,23 @@ const isTextarea = (envVar: EnvironmentVariable) => {
416458
{{ header.description }}
417459
</div>
418460

419-
<div class="relative">
461+
<!-- Boolean select -->
462+
<Select
463+
v-if="isBoolean(header)"
464+
:model-value="modelValue.team_headers[header.name]"
465+
@update:model-value="(val) => updateBooleanValue('team_headers', header.name, String(val))"
466+
>
467+
<SelectTrigger>
468+
<SelectValue placeholder="Select value" />
469+
</SelectTrigger>
470+
<SelectContent>
471+
<SelectItem value="false">false</SelectItem>
472+
<SelectItem value="true">true</SelectItem>
473+
</SelectContent>
474+
</Select>
475+
476+
<!-- Regular input -->
477+
<div v-else class="relative">
420478
<Input
421479
:id="`team_header_${header.name}`"
422480
:type="getInputType(header)"
@@ -474,7 +532,23 @@ const isTextarea = (envVar: EnvironmentVariable) => {
474532
{{ param.description }}
475533
</div>
476534

477-
<div class="relative">
535+
<!-- Boolean select -->
536+
<Select
537+
v-if="isBoolean(param)"
538+
:model-value="modelValue.team_url_query_params[param.name]"
539+
@update:model-value="(val) => updateBooleanValue('team_url_query_params', param.name, String(val))"
540+
>
541+
<SelectTrigger>
542+
<SelectValue placeholder="Select value" />
543+
</SelectTrigger>
544+
<SelectContent>
545+
<SelectItem value="false">false</SelectItem>
546+
<SelectItem value="true">true</SelectItem>
547+
</SelectContent>
548+
</Select>
549+
550+
<!-- Regular input -->
551+
<div v-else class="relative">
478552
<Input
479553
:id="`team_query_param_${param.name}`"
480554
:type="getInputType(param)"

0 commit comments

Comments
 (0)