fix(ui): missing Show Inactive toggle in Virtual Servers tab (#1544) (#1558)

* fix(ui): missing Show Inactive toggle in Virtual Servers tab (#1544)

* web lint

Signed-off-by: Keval Mahajan <mahajankeval23@gmail.com>

---------

Signed-off-by: Keval Mahajan <mahajankeval23@gmail.com>
Co-authored-by: Keval Mahajan <mahajankeval23@gmail.com>

Author: Shahzaibyy

mcpgateway/admin.py

@@ -12258,13 +12258,15 @@ async def get_prompts_section(
 @require_permission("admin")
 async def get_servers_section(
     team_id: Optional[str] = None,
+    include_inactive: bool = False,
     db: Session = Depends(get_db),
     user=Depends(get_current_user_with_permissions),
 ):
     """Get servers data filtered by team.
 
     Args:
         team_id: Optional team ID to filter by
+        include_inactive: Whether to include inactive servers
         db: Database session
         user: Current authenticated user context
 
@@ -12274,10 +12276,10 @@ async def get_servers_section(
     try:
         local_server_service = ServerService()
         user_email = get_user_email(user)
-        LOGGER.debug(f"User {user_email} requesting servers section with team_id={team_id}")
+        LOGGER.debug(f"User {user_email} requesting servers section with team_id={team_id}, include_inactive={include_inactive}")
 
-        # Get all servers and filter by team
-        servers_list = await local_server_service.list_servers(db, include_inactive=True)
+        # Get servers with optional include_inactive parameter
+        servers_list = await local_server_service.list_servers(db, include_inactive=include_inactive)
 
         # Apply team filtering if specified
         if team_id:

mcpgateway/static/admin.js

@@ -8718,6 +8718,23 @@ function toggleInactiveItems(type) {
         // ignore (shouldn't happen)
     }
 
+    // For servers (catalog), use loadServers function if available, otherwise reload page
+    if (type === "servers") {
+        if (typeof window.loadServers === "function") {
+            window.loadServers();
+            return;
+        }
+        // Fallback to page reload
+        const fallbackUrl = new URL(window.location);
+        if (checkbox.checked) {
+            fallbackUrl.searchParams.set("include_inactive", "true");
+        } else {
+            fallbackUrl.searchParams.delete("include_inactive");
+        }
+        window.location = fallbackUrl;
+        return;
+    }
+
     // Try to find the HTMX container that loads this entity's partial
     // Prefer an element with hx-get containing the admin partial endpoint
     const selector = `[hx-get*="/admin/${type}/partial"]`;
@@ -14804,7 +14821,28 @@ function initializeTabState() {
 // GLOBAL EXPORTS - Make functions available to HTML onclick handlers
 // ===================================================================
 
+/**
+ * Load servers (Virtual Servers / Catalog) with optional include_inactive parameter
+ */
+async function loadServers() {
+    const checkbox = safeGetElement("show-inactive-servers");
+    const includeInactive = checkbox ? checkbox.checked : false;
+
+    // Build URL with include_inactive parameter
+    const url = new URL(window.location);
+    if (includeInactive) {
+        url.searchParams.set("include_inactive", "true");
+    } else {
+        url.searchParams.delete("include_inactive");
+    }
+
+    // Reload the page with the updated parameters
+    // Since the catalog panel is server-side rendered, we need a full page reload
+    window.location.href = url.toString();
+}
+
 window.toggleInactiveItems = toggleInactiveItems;
+window.loadServers = loadServers;
 window.handleToggleSubmit = handleToggleSubmit;
 window.handleSubmitWithConfirmation = handleSubmitWithConfirmation;
 window.viewTool = viewTool;

mcpgateway/templates/admin.html

@@ -1693,23 +1693,40 @@ <h3 class="text-lg font-medium text-gray-900 mb-4">
       <!-- Catalog Panel (Virtual Servers) -->
       <div id="catalog-panel" class="tab-panel hidden">
         <div class="flex justify-between items-center mb-4">
-          <div>
-            <h2 class="text-2xl font-bold dark:text-gray-200">
-              Virtual MCP Servers
-            </h2>
+          <div class="flex items-center space-x-10">
+            <h2 class="text-2xl font-bold dark:text-gray-200">Virtual MCP Servers</h2>
             <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
               Virtual Servers let you combine Tools, Resources, and Prompts into
               an MCP Server with its own API key (see API Tokens).
             </p>
           </div>
+          <div class="flex items-center">
+            <input
+              type="checkbox"
+              id="show-inactive-servers"
+              class="mr-2"
+              onchange="toggleInactiveItems('servers')"
+            />
+            <label
+              for="show-inactive-servers"
+              class="text-sm font-medium text-gray-700 dark:text-gray-300"
+              >Show Inactive</label
+            >
+          </div>
+        </div>
 
+        <!-- Tag Filtering for Virtual Servers -->
+        <div class="bg-white shadow rounded-lg p-4 mb-4 dark:bg-gray-800">
           <div class="flex items-center space-x-4">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300"
+              >Filter by Tags:</label
+            >
             <input
               type="text"
               id="search-servers"
               data-testid="search-input"
               placeholder="Search servers via tags..."
-              class="mt-1 px-1.5 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
+              class="flex-1 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-3 py-1 text-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:text-gray-300"
               oninput="filterServerTable(this.value)"
             />
             <button