feat(frontend): update argument field labels and placeholders

Author: Lasim

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

@@ -513,10 +513,6 @@ const validateForm = () => {
     }
   }
 
-  if (formDataLocal.value.category === 'template' && formDataLocal.value.type === 'arg' && !formDataLocal.value.value?.trim()) {
-    errors.value = t('mcpCatalog.form.configurationSchema.modal.validation.valueRequired')
-  }
-
   formErrors.value = errors
   return Object.keys(errors).length === 0
 }
@@ -783,13 +779,15 @@ watch(localData, () => {
         </AlertDialogHeader>
 
         <form @submit.prevent="handleSubmit" class="space-y-4">
-          <!-- Name -->
+          <!-- Argument/Environment Variable Name -->
           <div class="space-y-2">
-            <Label for="item-name">{{ $t('mcpCatalog.form.configurationSchema.modal.fields.name.label') }}</Label>
+            <Label for="item-name">
+              {{ formDataLocal.type === 'arg' ? $t('mcpCatalog.form.configurationSchema.modal.fields.argument.label') : $t('mcpCatalog.form.configurationSchema.modal.fields.name.label') }}
+            </Label>
             <Input
               id="item-name"
               v-model="formDataLocal.name"
-              :placeholder="$t(`mcpCatalog.form.configurationSchema.modal.fields.name.placeholders.${formDataLocal.type === 'arg' ? 'argument' : 'environment'}`)"
+              :placeholder="formDataLocal.type === 'arg' ? $t('mcpCatalog.form.configurationSchema.modal.fields.argument.placeholder') : $t('mcpCatalog.form.configurationSchema.modal.fields.name.placeholders.environment')"
               :class="{ 'border-destructive': formErrors.name }"
               class="font-mono"
               required
@@ -799,22 +797,6 @@ watch(localData, () => {
             </div>
           </div>
 
-          <!-- Value (for template args only) -->
-          <div v-if="formDataLocal.type === 'arg' && formDataLocal.category === 'template'" class="space-y-2">
-            <Label for="item-value">{{ $t('mcpCatalog.form.configurationSchema.modal.fields.value.label') }}</Label>
-            <Input
-              id="item-value"
-              v-model="formDataLocal.value"
-              :placeholder="$t('mcpCatalog.form.configurationSchema.modal.fields.value.placeholder')"
-              :class="{ 'border-destructive': formErrors.value }"
-              class="font-mono"
-              required
-            />
-            <div v-if="formErrors.value" class="text-sm text-destructive">
-              {{ formErrors.value }}
-            </div>
-          </div>
-
           <!-- Category -->
           <div class="space-y-2">
             <Label for="item-category">{{ $t('mcpCatalog.form.configurationSchema.modal.fields.category.label') }}</Label>

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

@@ -390,10 +390,6 @@ const validateForm = () => {
     }
   }
 
-  if (formDataLocal.value.category === 'template' && formDataLocal.value.type === 'arg' && !formDataLocal.value.value?.trim()) {
-    errors.value = t('mcpCatalog.form.configurationSchema.modal.validation.valueRequired')
-  }
-
   formErrors.value = errors
   return Object.keys(errors).length === 0
 }
@@ -408,6 +404,11 @@ const handleSubmit = () => {
     id: formDataLocal.value.id || `${formDataLocal.value.type}_${Date.now()}`
   }
 
+  // For template args, set both name and value to the same argument value
+  if (newItem.type === 'arg' && newItem.category === 'template') {
+    newItem.value = newItem.name
+  }
+
   if (modalMode.value === 'add') {
     updatedData.push(newItem)
   } else {
@@ -704,13 +705,13 @@ onUnmounted(() => {
         </AlertDialogHeader>
 
         <form @submit.prevent="handleSubmit" class="space-y-4">
-          <!-- Name -->
+          <!-- Argument -->
           <div class="space-y-2">
-            <Label for="item-name">{{ $t('mcpCatalog.form.configurationSchema.modal.fields.name.label') }}</Label>
+            <Label for="item-argument">{{ formDataLocal.type === 'arg' ? 'Argument' : 'Environment Variable' }}</Label>
             <Input
-              id="item-name"
+              id="item-argument"
               v-model="formDataLocal.name"
-              :placeholder="$t(`mcpCatalog.form.configurationSchema.modal.fields.name.placeholders.${formDataLocal.type === 'arg' ? 'argument' : 'environment'}`)"
+              :placeholder="formDataLocal.type === 'arg' ? 'e.g. --api-key or -y' : 'e.g. API_KEY'"
               :class="{ 'border-destructive': formErrors.name }"
               class="font-mono"
               required
@@ -720,22 +721,6 @@ onUnmounted(() => {
             </div>
           </div>
 
-          <!-- Value (for template args only) -->
-          <div v-if="formDataLocal.type === 'arg' && formDataLocal.category === 'template'" class="space-y-2">
-            <Label for="item-value">{{ $t('mcpCatalog.form.configurationSchema.modal.fields.value.label') }}</Label>
-            <Input
-              id="item-value"
-              v-model="formDataLocal.value"
-              :placeholder="$t('mcpCatalog.form.configurationSchema.modal.fields.value.placeholder')"
-              :class="{ 'border-destructive': formErrors.value }"
-              class="font-mono"
-              required
-            />
-            <div v-if="formErrors.value" class="text-sm text-destructive">
-              {{ formErrors.value }}
-            </div>
-          </div>
-
           <!-- Category -->
           <div class="space-y-2">
             <Label for="item-category">{{ $t('mcpCatalog.form.configurationSchema.modal.fields.category.label') }}</Label>

services/frontend/src/i18n/locales/en/mcp-catalog.ts

@@ -202,6 +202,10 @@ export default {
               environment: 'ENV_VAR_NAME'
             }
           },
+          argument: {
+            label: 'Argument',
+            placeholder: 'e.g., --api-key, -y, package-name'
+          },
           value: {
             label: 'Value',
             placeholder: 'Example: --verbose or package-name'