delete fix

Signed-off-by: Rakhi Dutta <rakhibiswas@yahoo.com>

Author: rakdutta

mcpgateway/admin_ui/constants.js

@@ -34,6 +34,15 @@ export const DEFAULT_TEAMS_PER_PAGE = 10;
 
 /**
  * Clear search functionality for different entity types
+ *
+ * IMPORTANT: All entity types used with handleFormSubmitAndRefresh (formHandlers.js)
+ * must be registered here with their correct partialPath and targetSelector.
+ * Failure to register new entity types will cause UI refresh issues after
+ * delete/toggle operations (the entity will remain visible until manual page refresh).
+ *
+ * Each entity type must define:
+ * - partialPath: The backend route for fetching the partial HTML (e.g., "a2a/partial")
+ * - targetSelector: The DOM selector for the target element (e.g., "#agents-table")
  */
 export const PANEL_SEARCH_CONFIG = {
   catalog: {

mcpgateway/admin_ui/formHandlers.js

@@ -3,9 +3,11 @@ import { navigateAdmin } from "./navigation.js";
 import { getCookie, isInactiveChecked } from "./utils.js";
 
 // ===================================================================
-// INACTIVE ITEMS HANDLING
+// FORM SUBMISSION AND REFRESH HANDLING
 // ===================================================================
-export const handleToggleSubmit = async function (event, type) {
+// Handles form submission (toggle/delete operations) and refreshes the table
+// via HTMX. Used by both handleSubmitWithConfirmation and handleDeleteSubmit.
+export const handleFormSubmitAndRefresh = async function (event, type) {
   event.preventDefault();
 
   const isInactiveCheckedBool = isInactiveChecked(type);
@@ -47,8 +49,11 @@ export const handleToggleSubmit = async function (event, type) {
       params.set("team_id", teamId);
     }
 
-    // Trigger HTMX request to refresh the table
+    // Trigger HTMX request to refresh the table using PANEL_SEARCH_CONFIG
     const panelConfig = PANEL_SEARCH_CONFIG[type];
+    if (!panelConfig) {
+      console.warn(`No PANEL_SEARCH_CONFIG found for type: ${type}, using fallback pattern. Consider adding this type to PANEL_SEARCH_CONFIG in constants.js`);
+    }
     const partialPath = panelConfig?.partialPath || `${type}/partial`;
     const targetSelector = panelConfig?.targetSelector || `#${type}-table`;
     const partialUrl = `${window.ROOT_PATH}/admin/${partialPath}?${params.toString()}`;
@@ -64,7 +69,7 @@ export const handleToggleSubmit = async function (event, type) {
     }
   } catch (e) {
     // Network error — still navigate so the user sees refreshed state.
-    console.error("Toggle submit error:", e);
+    console.error("Form submit error:", e);
     const fragment = TOGGLE_FRAGMENT_MAP[type] || type;
     const params = new URLSearchParams();
     if (teamId) {
@@ -74,6 +79,9 @@ export const handleToggleSubmit = async function (event, type) {
   }
 };
 
+// Legacy alias for backward compatibility
+export const handleToggleSubmit = handleFormSubmitAndRefresh;
+
 export const handleSubmitWithConfirmation = function (event, type) {
   event.preventDefault();
 
@@ -83,7 +91,7 @@ export const handleSubmitWithConfirmation = function (event, type) {
     return false;
   }
 
-  return handleToggleSubmit(event, type);
+  return handleFormSubmitAndRefresh(event, type);
 };
 
 export const handleDeleteSubmit = function (
@@ -114,5 +122,5 @@ export const handleDeleteSubmit = function (
   }
 
   const toggleType = inactiveType || type;
-  return handleToggleSubmit(event, toggleType);
+  return handleFormSubmitAndRefresh(event, toggleType);
 };

tests/unit/js/formHandlers.test.js

@@ -278,4 +278,82 @@ describe("handleDeleteSubmit", () => {
       })
     );
   });
+
+  test("uses PANEL_SEARCH_CONFIG for catalog/servers refresh", async () => {
+    const form = document.createElement("form");
+    form.id = "test-form";
+    form.action = "/test";
+    document.body.appendChild(form);
+
+    const tableDiv = document.createElement("div");
+    tableDiv.id = "servers-table";  // Correct ID per PANEL_SEARCH_CONFIG for catalog
+    document.body.appendChild(tableDiv);
+
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true });
+    global.fetch = fetchMock;
+
+    // Mock HTMX
+    const htmxAjaxMock = vi.fn();
+    global.window.htmx = { ajax: htmxAjaxMock };
+    global.window.ROOT_PATH = "";
+
+    const event = { preventDefault: vi.fn(), target: form };
+
+    vi.spyOn(window, "confirm")
+      .mockReturnValueOnce(true)
+      .mockReturnValueOnce(false);
+
+    await handleDeleteSubmit(event, "server", "test-server", "catalog");
+
+    // Verify HTMX was called with correct partial path (servers/partial) and target selector (#servers-table)
+    expect(htmxAjaxMock).toHaveBeenCalledWith(
+      'GET',
+      expect.stringContaining('/admin/servers/partial'),
+      expect.objectContaining({
+        target: '#servers-table',  // targetSelector from PANEL_SEARCH_CONFIG for catalog
+        swap: 'outerHTML'
+      })
+    );
+  });
+
+  test("warns when PANEL_SEARCH_CONFIG is missing for a type", async () => {
+    const form = document.createElement("form");
+    form.id = "test-form";
+    form.action = "/test";
+    document.body.appendChild(form);
+
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true });
+    global.fetch = fetchMock;
+
+    // Mock HTMX
+    const htmxAjaxMock = vi.fn();
+    global.window.htmx = { ajax: htmxAjaxMock };
+    global.window.ROOT_PATH = "";
+
+    // Mock console.warn
+    const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const event = { preventDefault: vi.fn(), target: form };
+
+    vi.spyOn(window, "confirm")
+      .mockReturnValueOnce(true)
+      .mockReturnValueOnce(false);
+
+    await handleDeleteSubmit(event, "unknown", "test-unknown", "unknown-type");
+
+    // Verify console.warn was called with appropriate message
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('No PANEL_SEARCH_CONFIG found for type: unknown-type')
+    );
+
+    // Should still use fallback pattern
+    expect(htmxAjaxMock).toHaveBeenCalledWith(
+      'GET',
+      expect.stringContaining('/admin/unknown-type/partial'),
+      expect.objectContaining({
+        target: '#unknown-type-table',
+        swap: 'outerHTML'
+      })
+    );
+  });
 });