feat: Add bulk import UI modal for tools

Vicky · crivetimihai · commit ec66a7f8611f · 2025-08-14T23:59:00.000+01:00
Signed-off-by: Vicky &lt;vicky.kuo.contact@gmail.com&gt;
diff --git a/cookies.txt b/cookies.txt
@@ -0,0 +1,4 @@
+# Netscape HTTP Cookie File
+# https://curl.se/docs/http-cookies.html
+# This file was generated by libcurl! Edit at your own risk.
+
diff --git a/headers.txt b/headers.txt
@@ -0,0 +1,6 @@
+HTTP/1.1 307 Temporary Redirect
+date: Wed, 13 Aug 2025 05:39:40 GMT
+server: uvicorn
+content-length: 0
+location: http://localhost:4444/admin/
+
diff --git a/mcpgateway/static/admin.js b/mcpgateway/static/admin.js
@@ -6905,3 +6905,81 @@ window.updateAuthHeadersJSON = updateAuthHeadersJSON;
 window.loadAuthHeaders = loadAuthHeaders;
 
 console.log("🛡️ ContextForge MCP Gateway admin.js initialized");
+
+
+// ===================================================================
+// BULK IMPORT TOOLS — MODAL WIRING
+// ===================================================================
+
+(function initBulkImportModal() {
+  // ensure it runs after the DOM is ready
+  window.addEventListener("DOMContentLoaded", function () {
+    const openBtn  = safeGetElement("open-bulk-import", true);
+    const modalId  = "bulk-import-modal";
+    const modal    = safeGetElement(modalId, true);
+
+    if (!openBtn || !modal) {
+      console.warn("Bulk Import modal wiring skipped (missing button or modal).");
+      return;
+    }
+
+    // avoid double-binding if admin.js gets evaluated more than once
+    if (openBtn.dataset.wired === "1") return;
+    openBtn.dataset.wired = "1";
+
+    const closeBtn = safeGetElement("close-bulk-import", true);
+    const backdrop = safeGetElement("bulk-import-backdrop", true);
+    const resultEl = safeGetElement("import-result", true);
+
+    const focusTarget =
+      modal.querySelector("#tools_json") ||
+      modal.querySelector("#tools_file") ||
+      modal.querySelector("[data-autofocus]");
+
+    // helpers
+    const open = (e) => {
+      if (e) e.preventDefault();
+      // clear previous results each time we open
+      if (resultEl) resultEl.innerHTML = "";
+      openModal(modalId);
+      // prevent background scroll
+      document.documentElement.classList.add("overflow-hidden");
+      document.body.classList.add("overflow-hidden");
+      if (focusTarget) setTimeout(() => focusTarget.focus(), 0);
+      return false;
+    };
+
+    const close = () => {
+      // also clear results on close to keep things tidy
+      closeModal(modalId, "import-result");
+      document.documentElement.classList.remove("overflow-hidden");
+      document.body.classList.remove("overflow-hidden");
+    };
+
+    // wire events
+    openBtn.addEventListener("click", open);
+
+    if (closeBtn) {
+      closeBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        close();
+      });
+    }
+
+    // click on backdrop only (not the dialog content) closes the modal
+    if (backdrop) {
+      backdrop.addEventListener("click", (e) => {
+        if (e.target === backdrop) close();
+      });
+    }
+
+    // ESC to close
+    modal.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+      }
+    });
+
+  });
+})();
diff --git a/mcpgateway/templates/admin.html b/mcpgateway/templates/admin.html
@@ -1070,11 +1070,63 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
             </table>
           </div>
         </div>
-
         <div class="bg-white shadow rounded-lg p-6 dark:bg-gray-800">
-          <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
-            Add New Tool
-          </h3>
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-bold dark:text-gray-200">Add New Tool</h3>
+          <button 
+            id="open-bulk-import"
+            type="button"
+            class="inline-flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-700"
+          >
+            + Bulk Import Tools
+          </button>
+          <!-- Right before </body> tag -->
+<script>
+// Super simple version - no dependencies
+window.addEventListener('load', function() {
+  console.log('Setting up bulk import...');
+  
+  const button = document.getElementById('open-bulk-import');
+  const modal = document.getElementById('bulk-import-modal');
+  
+  console.log('Button found:', !!button);
+  console.log('Modal found:', !!modal);
+  
+  if (button && modal) {
+    button.onclick = function(e) {
+      e.preventDefault();
+      console.log('Button clicked!');
+      modal.style.display = 'block';
+      modal.classList.remove('hidden');
+      return false;
+    };
+    
+    // Close button
+    const closeBtn = document.getElementById('close-bulk-import');
+    if (closeBtn) {
+      closeBtn.onclick = function() {
+        modal.style.display = 'none';
+        modal.classList.add('hidden');
+      };
+    }
+    
+    // Click backdrop to close
+    const backdrop = document.getElementById('bulk-import-backdrop');
+    if (backdrop) {
+      backdrop.onclick = function() {
+        modal.style.display = 'none';
+        modal.classList.add('hidden');
+      };
+    }
+  } else {
+    console.error('Missing elements!', {button: !!button, modal: !!modal});
+  }
+});
+</script>
+
+          </div>
+
+
           <form id="add-tool-form">
             <div class="grid grid-cols-1 gap-6">
               <div>
@@ -1302,8 +1354,63 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
             </div>
           </form>
         </div>
-      </div>
+        <!-- Modal -->
+        <div id="bulk-import-modal" class="fixed inset-0 z-[60] hidden">
+          <div id="bulk-import-backdrop" class="absolute inset-0 bg-black/50"></div>
+          <div role="dialog" aria-modal="true"
+              class="relative mx-auto my-12 w-full max-w-2xl rounded-xl bg-white p-0 shadow-xl dark:bg-gray-900">
+            <div class="flex items-center justify-between border-b px-5 py-3 dark:border-gray-700">
+              <h3 class="text-base font-semibold dark:text-gray-100">Bulk Import Tools</h3>
+              <button id="close-bulk-import" data-close-bulk-import
+                      class="rounded p-1 text-gray-500 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                      aria-label="Close">✕</button>
+            </div>
+
+            <form id="bulk-import-form"
+                  hx-post="{{ root_path }}/admin/tools/import"
+                  hx-target="#bulk-import-result"
+                  hx-swap="innerHTML"
+                  hx-indicator="#bulk-import-indicator"
+                  enctype="multipart/form-data"
+                  class="space-y-4 p-5">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
+                Paste a JSON array or upload a <code>.json</code> file. Max 200 tools.
+              </p>
+
+              <label class="block text-sm font-medium dark:text-gray-300" for="tools_json">JSON Data</label>
+              <textarea id="tools_json" name="tools_json" rows="8"
+                class="mt-1 block w-full rounded-md border border-gray-300 font-mono text-sm shadow-sm
+                      focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+                placeholder='[{"name":"tool_name","url":"https://...","integration_type":"REST","request_type":"GET"}]'></textarea>
+
+              <div>
+                <label class="block text-sm font-medium dark:text-gray-300" for="tools_file">Or upload JSON file</label>
+                <input id="tools_file" name="tools_file" type="file" accept="application/json,.json"
+                      class="mt-1 block w-full text-sm dark:text-gray-300" />
+              </div>
+
+              <div class="flex items-center gap-3 pt-1">
+                <button type="submit"
+                  class="inline-flex justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white
+                        hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                  Import Tools
+                </button>
+                <span id="bulk-import-indicator" class="htmx-indicator flex items-center text-sm text-gray-500 dark:text-gray-400">
+                  <svg class="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+                    <path class="opacity-75" fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+                  </svg>
+                  Processing...
+                </span>
+              </div>
+
+              <div id="bulk-import-result" class="pt-2"></div>
+            </form>
+          </div>
+        </div>
 
+      
       <!-- Resources Panel -->
       <div id="resources-panel" class="tab-panel hidden">
         <div class="flex justify-between items-center mb-4">
diff --git a/tools.json b/tools.json
@@ -0,0 +1,19 @@
+[
+  {
+    "name": "list_users",
+    "url": "https://api.example.com/users",
+    "integration_type": "REST",
+    "request_type": "GET"
+  },
+  {
+    "name": "create_user",
+    "url": "https://api.example.com/users",
+    "integration_type": "REST",
+    "request_type": "POST",
+    "input_schema": {
+      "type": "object",
+      "properties": { "body": { "type": "object" } },
+      "required": ["body"]
+    }
+  }
+]
