Fill default values in test tool (#644)

* default values are populated in test tool form

Signed-off-by: Keval Mahajan <[email protected]>

* linting

Signed-off-by: Keval Mahajan <[email protected]>

---------

Signed-off-by: Keval Mahajan <[email protected]>

Author: kevalmahajan

mcpgateway/admin.py

@@ -1317,8 +1317,10 @@ async def admin_ui(
         >>> root_service.list_roots = original_list_roots
     """
     logger.debug(f"User {user} accessed the admin UI")
+    tools = [
+        tool.model_dump(by_alias=True) for tool in sorted(await tool_service.list_tools(db, include_inactive=include_inactive), key=lambda t: ((t.url or "").lower(), (t.original_name or "").lower()))
+    ]
     servers = [server.model_dump(by_alias=True) for server in await server_service.list_servers(db, include_inactive=include_inactive)]
-    tools = [tool.model_dump(by_alias=True) for tool in await tool_service.list_tools(db, include_inactive=include_inactive)]
     resources = [resource.model_dump(by_alias=True) for resource in await resource_service.list_resources(db, include_inactive=include_inactive)]
     prompts = [prompt.model_dump(by_alias=True) for prompt in await prompt_service.list_prompts(db, include_inactive=include_inactive)]
     gateways = [gateway.model_dump(by_alias=True) for gateway in await gateway_service.list_gateways(db, include_inactive=include_inactive)]
@@ -1464,6 +1466,7 @@ async def admin_list_tools(
     """
     logger.debug(f"User {user} requested tool list")
     tools = await tool_service.list_tools(db, include_inactive=include_inactive)
+
     return [tool.model_dump(by_alias=True) for tool in tools]
 
 

mcpgateway/static/admin.js

@@ -3307,28 +3307,32 @@ async function testTool(toolId) {
 
                 // Field label - use textContent to avoid double escaping
                 const label = document.createElement("label");
-                label.textContent = keyValidation.value;
                 label.className =
                     "block text-sm font-medium text-gray-700 dark:text-gray-300";
+
+                // Create span for label text
+                const labelText = document.createElement("span");
+                labelText.textContent = keyValidation.value;
+                label.appendChild(labelText);
+
+                // Add red star if field is required
+                if (schema.required && schema.required.includes(key)) {
+                    const requiredMark = document.createElement("span");
+                    requiredMark.textContent = " *";
+                    requiredMark.className = "text-red-500";
+                    label.appendChild(requiredMark);
+                }
+
                 fieldDiv.appendChild(label);
 
                 // Description help text - use textContent
                 if (prop.description) {
                     const description = document.createElement("small");
-                    description.textContent = prop.description; // NO escapeHtml here
+                    description.textContent = prop.description;
                     description.className = "text-gray-500 block mb-1";
                     fieldDiv.appendChild(description);
                 }
 
-                // Input field with validation
-                const input = document.createElement("input");
-                input.name = keyValidation.value;
-                input.type = "text";
-                input.required =
-                    schema.required && schema.required.includes(key);
-                input.className =
-                    "mt-1 block w-full rounded-md border border-gray-500 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 text-gray-700 dark:text-gray-300 dark:border-gray-700 dark:focus:border-indigo-400 dark:focus:ring-indigo-400";
-
                 if (prop.type === "array") {
                     const arrayContainer = document.createElement("div");
                     arrayContainer.className = "space-y-2";
@@ -3343,18 +3347,17 @@ async function testTool(toolId) {
                             schema.required && schema.required.includes(key);
                         input.className =
                             "mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 text-gray-700 dark:text-gray-300 dark:border-gray-700 dark:focus:border-indigo-400 dark:focus:ring-indigo-400";
-                        if (prop.items && prop.items.type === "number") {
+
+                        if (prop.items?.type === "number") {
                             input.type = "number";
-                        } else if (
-                            prop.items &&
-                            prop.items.type === "boolean"
-                        ) {
+                        } else if (prop.items?.type === "boolean") {
                             input.type = "checkbox";
                             input.value = "true";
                             input.checked = value === true || value === "true";
                         } else {
                             input.type = "text";
                         }
+
                         if (
                             typeof value === "string" ||
                             typeof value === "number"
@@ -3386,7 +3389,13 @@ async function testTool(toolId) {
                         arrayContainer.appendChild(createArrayInput());
                     });
 
-                    arrayContainer.appendChild(createArrayInput());
+                    if (Array.isArray(prop.default)) {
+                        prop.default.forEach((val) => {
+                            arrayContainer.appendChild(createArrayInput(val));
+                        });
+                    } else {
+                        arrayContainer.appendChild(createArrayInput());
+                    }
 
                     fieldDiv.appendChild(arrayContainer);
                     fieldDiv.appendChild(addBtn);
@@ -3401,19 +3410,35 @@ async function testTool(toolId) {
                     // Add validation based on type
                     if (prop.type === "text") {
                         input.type = "text";
-                    } else if (prop.type === "number") {
+                    } else if (
+                        prop.type === "number" ||
+                        prop.type === "integer"
+                    ) {
                         input.type = "number";
                     } else if (prop.type === "boolean") {
                         input.type = "checkbox";
                         input.className =
                             "mt-1 h-4 w-4 text-indigo-600 dark:text-indigo-200 border border-gray-300 rounded";
+                    } else {
+                        input.type = "text";
                     }
+
+                    // Set default values here
+                    if (prop.default !== undefined) {
+                        if (input.type === "checkbox") {
+                            input.checked = prop.default === true;
+                        } else {
+                            input.value = prop.default;
+                        }
+                    }
+
                     fieldDiv.appendChild(input);
                 }
 
                 container.appendChild(fieldDiv);
             }
         }
+
         openModal("tool-test-modal");
         console.log("✓ Tool test modal loaded successfully");
     } catch (error) {