Skip to content

Commit 2bb005f

Browse files
kevalmahajankevalmahajan
authored
checkbox implementation in selection in servers panel (#619)
Signed-off-by: Keval Mahajan <[email protected]>
1 parent 5ff75bf commit 2bb005f

File tree

2 files changed

+142
-50
lines changed

2 files changed

+142
-50
lines changed

‎mcpgateway/static/admin.js

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3022,50 +3022,73 @@ function updateEditToolRequestTypes(selectedMethod = null) {
30223022
// TOOL SELECT FUNCTIONALITY
30233023
// ===================================================================
30243024

3025-
function initToolSelect(selectId, pillsId, warnId, max = 6) {
3026-
const select = safeGetElement(selectId);
3027-
const pillsBox = safeGetElement(pillsId);
3028-
const warnBox = safeGetElement(warnId);
3025+
function initToolSelect(
3026+
selectId,
3027+
pillsId,
3028+
warnId,
3029+
max = 6,
3030+
selectBtnId = null,
3031+
clearBtnId = null,
3032+
) {
3033+
const container = document.getElementById(selectId);
3034+
const pillsBox = document.getElementById(pillsId);
3035+
const warnBox = document.getElementById(warnId);
3036+
const clearBtn = clearBtnId ? document.getElementById(clearBtnId) : null;
3037+
const selectBtn = selectBtnId ? document.getElementById(selectBtnId) : null;
30293038

3030-
if (!select || !pillsBox || !warnBox) {
3039+
if (!container || !pillsBox || !warnBox) {
30313040
console.warn(
30323041
`Tool select elements not found: ${selectId}, ${pillsId}, ${warnId}`,
30333042
);
30343043
return;
30353044
}
30363045

3046+
const checkboxes = container.querySelectorAll('input[type="checkbox"]');
30373047
const pillClasses =
3038-
"inline-block px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded";
3048+
"inline-block px-3 py-1 text-xs font-semibold text-indigo-700 bg-indigo-100 rounded-full shadow";
30393049

30403050
function update() {
30413051
try {
3042-
const chosen = Array.from(select.selectedOptions);
3043-
const count = chosen.length;
3052+
const checked = Array.from(checkboxes).filter((cb) => cb.checked);
3053+
const count = checked.length;
30443054

30453055
// Rebuild pills safely
30463056
pillsBox.innerHTML = "";
3047-
chosen.forEach((opt) => {
3057+
checked.forEach((cb) => {
30483058
const span = document.createElement("span");
30493059
span.className = pillClasses;
3050-
span.textContent = opt.text; // Safe text content
3060+
span.textContent =
3061+
cb.nextElementSibling?.textContent?.trim() || "Unnamed";
30513062
pillsBox.appendChild(span);
30523063
});
30533064

30543065
// Warning when > max
30553066
if (count > max) {
30563067
warnBox.textContent = `Selected ${count} tools. Selecting more than ${max} tools can degrade agent performance with the server.`;
3057-
warnBox.className = "text-yellow-600 text-sm mt-2";
30583068
} else {
30593069
warnBox.textContent = "";
3060-
warnBox.className = "";
30613070
}
30623071
} catch (error) {
30633072
console.error("Error updating tool select:", error);
30643073
}
30653074
}
30663075

3076+
if (clearBtn) {
3077+
clearBtn.addEventListener("click", () => {
3078+
checkboxes.forEach((cb) => (cb.checked = false));
3079+
update();
3080+
});
3081+
}
3082+
3083+
if (selectBtn) {
3084+
selectBtn.addEventListener("click", () => {
3085+
checkboxes.forEach((cb) => (cb.checked = true));
3086+
update();
3087+
});
3088+
}
3089+
30673090
update(); // Initial render
3068-
select.addEventListener("change", update);
3091+
checkboxes.forEach((cb) => cb.addEventListener("change", update));
30693092
}
30703093

30713094
// ===================================================================
@@ -4415,8 +4438,12 @@ async function handleEditToolFormSubmit(event) {
44154438

44164439
// // Save CodeMirror editors' contents if present
44174440

4418-
if (window.editToolHeadersEditor) window.editToolHeadersEditor.save();
4419-
if (window.editToolSchemaEditor) window.editToolSchemaEditor.save();
4441+
if (window.editToolHeadersEditor) {
4442+
window.editToolHeadersEditor.save();
4443+
}
4444+
if (window.editToolSchemaEditor) {
4445+
window.editToolSchemaEditor.save();
4446+
}
44204447

44214448
const isInactiveCheckedBool = isInactiveChecked("tools");
44224449
formData.append("is_inactive_checked", isInactiveCheckedBool);
@@ -4428,7 +4455,7 @@ async function handleEditToolFormSubmit(event) {
44284455
headers: { "X-Requested-With": "XMLHttpRequest" },
44294456
});
44304457
console.log("response:", response);
4431-
result = await response.json();
4458+
const result = await response.json();
44324459
console.log("result edit tool form:", result);
44334460
if (!result.success) {
44344461
throw new Error(result.message || "An error occurred");
@@ -4838,12 +4865,16 @@ function initializeToolSelects() {
48384865
"selectedToolsPills",
48394866
"selectedToolsWarning",
48404867
6,
4868+
"selectAllToolsBtn",
4869+
"clearAllToolsBtn",
48414870
);
48424871
initToolSelect(
48434872
"edit-server-tools",
48444873
"selectedEditToolsPills",
48454874
"selectedEditToolsWarning",
48464875
6,
4876+
"selectAllEditToolsBtn",
4877+
"clearAllEditToolsBtn",
48474878
);
48484879
}
48494880

‎mcpgateway/templates/admin.html

Lines changed: 95 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -401,31 +401,64 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
401401
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"
402402
/>
403403
</div>
404-
<div>
404+
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
405405
<label
406+
class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2"
406407
for="associatedTools"
407-
class="block text-sm font-medium text-gray-700 dark:text-gray-300"
408408
>
409409
Associated Tools
410410
</label>
411-
<select
412-
name="associatedTools"
411+
<div
413412
id="associatedTools"
414-
multiple
415-
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"
413+
class="max-h-60 overflow-y-auto rounded-md border border-gray-300 dark:border-gray-700 shadow-sm p-3 bg-gray-50 dark:bg-gray-900"
416414
>
417415
{% for tool in tools %}
418-
<option value="{{ tool.id }}">{{ tool.name }}</option>
416+
<label
417+
class="flex items-center space-x-3 text-gray-700 dark:text-gray-300 mb-2 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900 rounded-md p-1"
418+
>
419+
<input
420+
type="checkbox"
421+
name="associatedTools"
422+
value="{{ tool.id }}"
423+
class="tool-checkbox form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
424+
/>
425+
<span class="select-none">{{ tool.name }}</span>
426+
</label>
419427
{% endfor %}
420-
</select>
421-
<span
428+
</div>
429+
<div class="flex justify-end mt-3 gap-2">
430+
431+
<button
432+
type="button"
433+
id="selectAllToolsBtn"
434+
class="px-3 py-1 text-sm font-semibold text-green-600 border border-green-600 rounded-md hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-offset-1"
435+
aria-label="Select all tools"
436+
>
437+
Select All
438+
</button>
439+
440+
<button
441+
type="button"
442+
id="clearAllToolsBtn"
443+
class="px-3 py-1 text-sm font-semibold text-red-600 border border-red-600 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-1"
444+
aria-label="Clear all selected tools"
445+
>
446+
Clear All
447+
</button>
448+
</div>
449+
450+
<!-- Selected pills -->
451+
<div
422452
id="selectedToolsPills"
423-
class="inline-flex flex-wrap gap-1 mt-2"
424-
></span>
425-
<span
453+
class="mt-4 flex flex-wrap gap-2"
454+
></div>
455+
456+
<!-- Warning message -->
457+
<div
426458
id="selectedToolsWarning"
427-
class="block text-sm font-semibold text-red-600 mt-1"
428-
></span>
459+
class="mt-2 min-h-[1.25rem] text-sm font-semibold text-yellow-600"
460+
aria-live="polite"
461+
></div>
429462
</div>
430463
<div>
431464
<label
@@ -3132,38 +3165,66 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
31323165
class="mt-1 block w-full rounded-md border 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"
31333166
/>
31343167
</div>
3135-
<div>
3168+
3169+
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-600">
31363170
<label
31373171
for="edit-server-tools"
3138-
class="block text-sm font-medium text-gray-700 dark:text-gray-300"
3172+
class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2"
31393173
>
31403174
Associated Tools
31413175
</label>
3142-
<select
3176+
<div
31433177
id="edit-server-tools"
3144-
name="associatedTools"
3145-
{#
3146-
same
3147-
field
3148-
name
3149-
#}
3150-
multiple
3151-
class="mt-1 block w-full rounded-md border 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"
3178+
class="max-h-60 overflow-y-auto rounded-md border border-gray-600 shadow-sm p-3 bg-gray-50 dark:bg-gray-900"
31523179
>
31533180
{% for tool in tools %}
3154-
<option value="{{ tool.id }}">{{ tool.name }}</option>
3181+
<label
3182+
class="flex items-center space-x-3 text-gray-700 dark:text-gray-300 mb-2 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900 rounded-md p-1"
3183+
>
3184+
<input
3185+
type="checkbox"
3186+
name="associatedTools"
3187+
value="{{ tool.id }}"
3188+
class="tool-checkbox form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
3189+
/>
3190+
<span class="select-none">{{ tool.name }}</span>
3191+
</label>
31553192
{% endfor %}
3156-
</select>
3157-
<span
3193+
</div>
3194+
<div class="flex justify-end gap-3 mt-3">
3195+
<button
3196+
type="button"
3197+
id="selectAllEditToolsBtn"
3198+
class="px-3 py-1 text-sm font-semibold text-green-600 border border-green-600 rounded-md hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-offset-1"
3199+
aria-label="Select all tools"
3200+
>
3201+
Select All
3202+
</button>
3203+
3204+
<button
3205+
type="button"
3206+
id="clearAllEditToolsBtn"
3207+
class="px-3 py-1 text-sm font-semibold text-red-600 border border-red-600 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-1"
3208+
aria-label="Clear all selected tools"
3209+
>
3210+
Clear All
3211+
</button>
3212+
</div>
3213+
3214+
<!-- Selected pills -->
3215+
<div
31583216
id="selectedEditToolsPills"
3159-
class="inline-flex flex-wrap gap-1 mt-2"
3160-
></span>
3161-
<!-- container -->
3162-
<span
3217+
class="mt-4 flex flex-wrap gap-2"
3218+
></div>
3219+
3220+
<!-- Warning message -->
3221+
<div
31633222
id="selectedEditToolsWarning"
3164-
class="block text-sm font-semibold text-red-600 mt-1"
3165-
></span>
3223+
class="mt-2 min-h-[1.25rem] text-sm font-semibold text-yellow-600"
3224+
aria-live="polite"
3225+
></div>
31663226
</div>
3227+
31673228
<div>
31683229
<label
31693230
class="block text-sm font-medium text-gray-700 dark:text-gray-300"

0 commit comments

Comments
 (0)