Skip to content

Commit 3e308e8

Browse files
vk-playgroundcrivetimihai
vk-playground
and
crivetimihai
authored
Fix IBM#715: align Add & Edit Tool fields & prefill MCP integration/request (IBM#731)
* Fix IBM#715: align Add & Edit Tool fields (gateway_name/original_name) and prefill MCP integration/request types Signed-off-by: Vicky <vicky.kuo.contact@gmail.com> * fix(admin): Resolve IBM#715 Signed-off-by: Vicky <vicky.kuo.contact@gmail.com> * Lint fixes Signed-off-by: Mihai Criveti <crivetimihai@gmail.com> --------- Signed-off-by: Vicky <vicky.kuo.contact@gmail.com> Signed-off-by: Mihai Criveti <crivetimihai@gmail.com> Co-authored-by: Mihai Criveti <crivetimihai@gmail.com>
1 parent 9d0dd3e commit 3e308e8

File tree

2 files changed

+112
-36
lines changed

2 files changed

+112
-36
lines changed

‎mcpgateway/static/admin.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1991,16 +1991,22 @@ async function editTool(toolId) {
19911991
window.editToolSchemaEditor.refresh();
19921992
}
19931993

1994-
// Trigger change event for integration type
1994+
// Prefill integration type from DB and set request types accordingly
19951995
if (typeField) {
1996-
const event = new Event("change");
1997-
typeField.dispatchEvent(event);
1996+
typeField.value = tool.integrationType || "REST";
1997+
updateEditToolRequestTypes(tool.requestType || null); // preselect from DB
19981998
}
19991999

2000-
// Set Request Type field
2000+
// Request Type field handling (disable for MCP)
20012001
const requestTypeField = safeGetElement("edit-tool-request-type");
20022002
if (requestTypeField) {
2003-
requestTypeField.value = tool.requestType || "SSE";
2003+
if ((tool.integrationType || "REST") === "MCP") {
2004+
requestTypeField.value = "";
2005+
requestTypeField.disabled = true; // disabled -> not submitted
2006+
} else {
2007+
requestTypeField.disabled = false;
2008+
requestTypeField.value = tool.requestType || ""; // keep DB verb or blank
2009+
}
20042010
}
20052011

20062012
// Set auth type field
@@ -3560,6 +3566,7 @@ function createParameterForm(parameterCount) {
35603566

35613567
const integrationRequestMap = {
35623568
REST: ["GET", "POST", "PUT", "PATCH", "DELETE"],
3569+
MCP: [],
35633570
};
35643571

35653572
function updateRequestTypeOptions(preselectedValue = null) {
@@ -3593,26 +3600,31 @@ function updateRequestTypeOptions(preselectedValue = null) {
35933600
function updateEditToolRequestTypes(selectedMethod = null) {
35943601
const editToolTypeSelect = safeGetElement("edit-tool-type");
35953602
const editToolRequestTypeSelect = safeGetElement("edit-tool-request-type");
3596-
35973603
if (!editToolTypeSelect || !editToolRequestTypeSelect) {
35983604
return;
35993605
}
36003606

36013607
const selectedType = editToolTypeSelect.value;
36023608
const allowedMethods = integrationRequestMap[selectedType] || [];
36033609

3604-
// Clear existing options
3605-
editToolRequestTypeSelect.innerHTML = "";
3610+
// If this integration has no HTTP verbs (MCP), clear & disable the control
3611+
if (allowedMethods.length === 0) {
3612+
editToolRequestTypeSelect.innerHTML = "";
3613+
editToolRequestTypeSelect.value = "";
3614+
editToolRequestTypeSelect.disabled = true;
3615+
return;
3616+
}
36063617

3607-
// Populate new options
3618+
// Otherwise populate and enable
3619+
editToolRequestTypeSelect.disabled = false;
3620+
editToolRequestTypeSelect.innerHTML = "";
36083621
allowedMethods.forEach((method) => {
36093622
const option = document.createElement("option");
36103623
option.value = method;
36113624
option.textContent = method;
36123625
editToolRequestTypeSelect.appendChild(option);
36133626
});
36143627

3615-
// Set the pre-selected method, if valid
36163628
if (selectedMethod && allowedMethods.includes(selectedMethod)) {
36173629
editToolRequestTypeSelect.value = selectedMethod;
36183630
}
@@ -6287,8 +6299,6 @@ function setupIntegrationTypeHandlers() {
62876299

62886300
const editToolTypeSelect = safeGetElement("edit-tool-type");
62896301
if (editToolTypeSelect) {
6290-
editToolTypeSelect.value = "REST";
6291-
updateEditToolRequestTypes("PUT");
62926302
editToolTypeSelect.addEventListener("change", () =>
62936303
updateEditToolRequestTypes(),
62946304
);

‎mcpgateway/templates/admin.html‎

Lines changed: 90 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -963,18 +963,39 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
963963
</h3>
964964
<form id="add-tool-form">
965965
<div class="grid grid-cols-1 gap-6">
966-
<div>
967-
<label
968-
class="block text-sm font-medium text-gray-700 dark:text-gray-400"
969-
>Name</label
970-
>
971-
<input
972-
type="text"
973-
name="name"
974-
required
975-
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
976-
/>
966+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
967+
<div>
968+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400">
969+
Gateway Name
970+
</label>
971+
<input
972+
type="text"
973+
name="gateway_name"
974+
id="add-tool-gateway-name"
975+
placeholder="e.g., local-gateway"
976+
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
977+
/>
978+
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
979+
Optional for REST tools; populated for MCP-imported tools.
980+
</p>
981+
</div>
982+
<div>
983+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400">
984+
Original Name
985+
</label>
986+
<input
987+
type="text"
988+
name="original_name"
989+
id="add-tool-original-name"
990+
placeholder="e.g., list-files"
991+
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
992+
/>
993+
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
994+
Tool's name as provided by the gateway.
995+
</p>
996+
</div>
977997
</div>
998+
978999
<div>
9791000
<label
9801001
class="block text-sm font-medium text-gray-700 dark:text-gray-400"
@@ -2635,19 +2656,32 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
26352656
<div class="mt-4">
26362657
<form id="edit-tool-form" method="POST">
26372658
<div class="grid grid-cols-1 gap-6">
2638-
<div>
2639-
<label
2640-
class="block text-sm font-medium text-gray-700 dark:text-gray-300"
2641-
>Name</label
2642-
>
2643-
<input
2644-
type="text"
2645-
name="name"
2646-
required
2647-
id="edit-tool-name"
2648-
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
2649-
/>
2659+
2660+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
2661+
<div>
2662+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
2663+
Gateway Name
2664+
</label>
2665+
<input
2666+
type="text"
2667+
name="gateway_name"
2668+
id="edit-tool-gateway-name"
2669+
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
2670+
/>
2671+
</div>
2672+
<div>
2673+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
2674+
Original Name
2675+
</label>
2676+
<input
2677+
type="text"
2678+
name="original_name"
2679+
id="edit-tool-original-name"
2680+
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
2681+
/>
2682+
</div>
26502683
</div>
2684+
26512685
<div>
26522686
<label
26532687
class="block text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -2681,9 +2715,11 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
26812715
name="integrationType"
26822716
id="edit-tool-type"
26832717
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
2718+
onchange="handleEditIntegrationTypeChange()"
26842719
>
26852720

26862721
<option value="REST">REST</option>
2722+
<option value="MCP">MCP</option>
26872723
</select>
26882724
</div>
26892725
<div>
@@ -2696,7 +2732,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
26962732
id="edit-tool-request-type"
26972733
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
26982734
>
2699-
<!-- Will be populated dynamically -->
2735+
27002736
</select>
27012737
</div>
27022738
<div>
@@ -3846,5 +3882,35 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
38463882
});
38473883
});
38483884
</script>
3885+
<script>
3886+
function handleEditIntegrationTypeChange() {
3887+
const typeSel = document.getElementById('edit-tool-type');
3888+
const reqSel = document.getElementById('edit-tool-request-type');
3889+
if (!typeSel || !reqSel) return;
3890+
3891+
const isREST = typeSel.value === 'REST';
3892+
// For REST tools, enable HTTP verbs; for MCP, disable & clear to avoid bad values.
3893+
reqSel.disabled = !isREST;
3894+
if (!isREST) {
3895+
reqSel.value = '';
3896+
}
3897+
}
3898+
3899+
// When the Edit modal is shown, re-evaluate enable/disable based on prefilled value.
3900+
(function () {
3901+
const modal = document.getElementById('tool-edit-modal');
3902+
if (!modal) return;
3903+
3904+
const observer = new MutationObserver(() => {
3905+
const isOpen = !modal.classList.contains('hidden');
3906+
if (isOpen) {
3907+
// Defer one tick so existing JS can prefill values first.
3908+
setTimeout(handleEditIntegrationTypeChange, 0);
3909+
}
3910+
});
3911+
observer.observe(modal, { attributes: true, attributeFilter: ['class'] });
3912+
})();
3913+
</script>
3914+
38493915
</body>
38503916
</html>

0 commit comments

Comments
 (0)