fix(frontend): add boolean select dropdown to configuration edit modals

Lasim · Lasim · commit 15c3d45db71a · 2026-02-01T20:46:11.000+01:00
Configuration edit modals were using text input for boolean fields, allowing invalid values. Added Select dropdown that restricts input to "true" or "false" only, matching the
installation wizard behavior.

Modified ConfigurationEnv, ConfigurationArgs, ConfigurationHeaders, and ConfigurationQueryParams components to render Select for boolean types instead of text input.
diff --git a/services/frontend/src/components/mcp-server/installation/config/ConfigurationArgs.vue b/services/frontend/src/components/mcp-server/installation/config/ConfigurationArgs.vue
@@ -12,6 +12,13 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   AlertDialog,
   AlertDialogContent,
@@ -154,6 +161,10 @@ const isTextarea = (item: any) => {
          (item.placeholder && item.placeholder.length > 100)
 }
 
+const isBoolean = (item: any) => {
+  return item?.type === 'boolean'
+}
+
 const validateForm = () => {
   const errors: Record<string, string> = {}
 
@@ -447,7 +458,22 @@ const modalTitle = computed(() => {
           <div class="space-y-2">
             <Label for="config-value">{{ editingScope === 'team' ? 'Team Value' : 'User Value' }}</Label>
 
-            <div v-if="editingItem && isTextarea(editingItem)" class="relative">
+            <!-- Boolean select -->
+            <Select
+              v-if="editingItem && isBoolean(editingItem)"
+              v-model="editingValue"
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select value" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="false">false</SelectItem>
+                <SelectItem value="true">true</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <!-- Textarea for long values -->
+            <div v-else-if="editingItem && isTextarea(editingItem)" class="relative">
               <Textarea
                 id="config-value"
                 v-model="editingValue"
@@ -458,6 +484,7 @@ const modalTitle = computed(() => {
               />
             </div>
 
+            <!-- Regular input -->
             <div v-else class="relative">
               <Input
                 id="config-value"
diff --git a/services/frontend/src/components/mcp-server/installation/config/ConfigurationEnv.vue b/services/frontend/src/components/mcp-server/installation/config/ConfigurationEnv.vue
@@ -12,6 +12,13 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   AlertDialog,
   AlertDialogContent,
@@ -151,6 +158,10 @@ const isTextarea = (item: any) => {
          (item.placeholder && item.placeholder.length > 100)
 }
 
+const isBoolean = (item: any) => {
+  return item?.type === 'boolean'
+}
+
 const validateForm = () => {
   const errors: Record<string, string> = {}
 
@@ -440,7 +451,22 @@ const modalTitle = computed(() => {
           <div class="space-y-2">
             <Label for="config-value">{{ editingScope === 'team' ? 'Team Value' : 'User Value' }}</Label>
 
-            <div v-if="editingItem && isTextarea(editingItem)" class="relative">
+            <!-- Boolean select -->
+            <Select
+              v-if="editingItem && isBoolean(editingItem)"
+              v-model="editingValue"
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select value" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="false">false</SelectItem>
+                <SelectItem value="true">true</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <!-- Textarea for long values -->
+            <div v-else-if="editingItem && isTextarea(editingItem)" class="relative">
               <Textarea
                 id="config-value"
                 v-model="editingValue"
@@ -451,6 +477,7 @@ const modalTitle = computed(() => {
               />
             </div>
 
+            <!-- Regular input -->
             <div v-else class="relative">
               <Input
                 id="config-value"
diff --git a/services/frontend/src/components/mcp-server/installation/config/ConfigurationHeaders.vue b/services/frontend/src/components/mcp-server/installation/config/ConfigurationHeaders.vue
@@ -12,6 +12,13 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   AlertDialog,
   AlertDialogContent,
@@ -151,6 +158,10 @@ const isTextarea = (item: any) => {
          (item.placeholder && item.placeholder.length > 100)
 }
 
+const isBoolean = (item: any) => {
+  return item?.type === 'boolean'
+}
+
 const validateForm = () => {
   const errors: Record<string, string> = {}
 
@@ -440,7 +451,22 @@ const modalTitle = computed(() => {
           <div class="space-y-2">
             <Label for="config-value">{{ editingScope === 'team' ? 'Team Value' : 'User Value' }}</Label>
 
-            <div v-if="editingItem && isTextarea(editingItem)" class="relative">
+            <!-- Boolean select -->
+            <Select
+              v-if="editingItem && isBoolean(editingItem)"
+              v-model="editingValue"
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select value" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="false">false</SelectItem>
+                <SelectItem value="true">true</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <!-- Textarea for long values -->
+            <div v-else-if="editingItem && isTextarea(editingItem)" class="relative">
               <Textarea
                 id="config-value"
                 v-model="editingValue"
@@ -451,6 +477,7 @@ const modalTitle = computed(() => {
               />
             </div>
 
+            <!-- Regular input -->
             <div v-else class="relative">
               <Input
                 id="config-value"
diff --git a/services/frontend/src/components/mcp-server/installation/config/ConfigurationQueryParams.vue b/services/frontend/src/components/mcp-server/installation/config/ConfigurationQueryParams.vue
@@ -12,6 +12,13 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import {
   AlertDialog,
   AlertDialogContent,
@@ -151,6 +158,10 @@ const isTextarea = (item: any) => {
          (item.placeholder && item.placeholder.length > 100)
 }
 
+const isBoolean = (item: any) => {
+  return item?.type === 'boolean'
+}
+
 const validateForm = () => {
   const errors: Record<string, string> = {}
 
@@ -440,7 +451,22 @@ const modalTitle = computed(() => {
           <div class="space-y-2">
             <Label for="config-value">{{ editingScope === 'team' ? 'Team Value' : 'User Value' }}</Label>
 
-            <div v-if="editingItem && isTextarea(editingItem)" class="relative">
+            <!-- Boolean select -->
+            <Select
+              v-if="editingItem && isBoolean(editingItem)"
+              v-model="editingValue"
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select value" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="false">false</SelectItem>
+                <SelectItem value="true">true</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <!-- Textarea for long values -->
+            <div v-else-if="editingItem && isTextarea(editingItem)" class="relative">
               <Textarea
                 id="config-value"
                 v-model="editingValue"
@@ -451,6 +477,7 @@ const modalTitle = computed(() => {
               />
             </div>
 
+            <!-- Regular input -->
             <div v-else class="relative">
               <Input
                 id="config-value"
