fix(ui): exclude display name from required-field validation in tool form (#3464)

* fix(ui): exclude display name from required-field validation in tool form

The name-field validation selector used a wildcard (input[name*="name"])
that also matched displayName and display_name inputs, making the
optional display-name field effectively required.

Switch to explicit selectors for technical name fields only, and filter
out hidden inputs so edit-form hidden name fields are also skipped.

Closes #3433

Signed-off-by: NAYANA.R <[email protected]>
Signed-off-by: Mihai Criveti <[email protected]>

* test(ui): add setupFormValidation tests for display name exclusion

Cover the name-field selection logic introduced in the previous commit:
- visible name and customName inputs are validated on blur
- displayName and display_name inputs are excluded
- hidden name inputs (edit forms) are excluded
- error styling is applied/cleared correctly
- combined form scenarios (create + edit layouts)

Signed-off-by: Mihai Criveti <[email protected]>

---------

Signed-off-by: NAYANA.R <[email protected]>
Signed-off-by: Mihai Criveti <[email protected]>
Co-authored-by: Mihai Criveti <[email protected]>
Signed-off-by: Yosief Eyob <[email protected]>

Author: 2 people

mcpgateway/static/admin.js

@@ -16779,9 +16779,20 @@ function setupFormValidation() {
 
     forms.forEach((form) => {
         // Add validation to name fields
-        const nameFields = form.querySelectorAll(
-            'input[name*="name"], input[name*="Name"]',
-        );
+        // Target only the actual technical name inputs (avoid matching displayName)
+        const nameFields = Array.from(
+            form.querySelectorAll(
+                'input[name="name"], input[name="customName"], input[name="custom_name"]',
+            ),
+        ).filter((f) => {
+            // Exclude hidden inputs and any display-name-like fields so
+            // display names remain optional and aren't validated here.
+            if (!f) return false;
+            if (f.type && f.type.toLowerCase() === "hidden") return false;
+            if (/display/i.test(f.name || "")) return false;
+            return true;
+        });
+
         nameFields.forEach((field) => {
             field.addEventListener("blur", function () {
                 const parentNode = this.parentNode;

tests/js/admin-form-validation.test.js

@@ -0,0 +1,164 @@
+/**
+ * Unit tests for setupFormValidation() name-field selection logic.
+ *
+ * Verifies that only technical name inputs receive blur validation,
+ * and that displayName / hidden name fields are correctly excluded.
+ */
+
+import {
+    describe,
+    test,
+    expect,
+    beforeAll,
+    beforeEach,
+    afterAll,
+} from "vitest";
+import { loadAdminJs, cleanupAdminJs } from "./helpers/admin-env.js";
+
+let win;
+let doc;
+
+beforeAll(() => {
+    win = loadAdminJs();
+    win.MAX_NAME_LENGTH = 200;
+    doc = win.document;
+});
+
+afterAll(() => {
+    cleanupAdminJs();
+});
+
+beforeEach(() => {
+    doc.body.textContent = "";
+});
+
+/**
+ * Build a minimal form with the given input elements,
+ * call setupFormValidation(), and return the form.
+ */
+function buildForm(inputs) {
+    const form = doc.createElement("form");
+    inputs.forEach(({ name, type, value, id }) => {
+        const wrapper = doc.createElement("div");
+        const input = doc.createElement("input");
+        input.name = name;
+        if (type) input.type = type;
+        if (value !== undefined) input.value = value;
+        if (id) input.id = id;
+        wrapper.appendChild(input);
+        form.appendChild(wrapper);
+    });
+    doc.body.appendChild(form);
+    win.setupFormValidation();
+    return form;
+}
+
+/** Dispatch a blur event on the given element. */
+function blur(el) {
+    el.dispatchEvent(new win.Event("blur"));
+}
+
+// ---------------------------------------------------------------------------
+// setupFormValidation — name field selection
+// ---------------------------------------------------------------------------
+describe("setupFormValidation name-field selection", () => {
+    test("validates visible input[name='name']", () => {
+        const form = buildForm([{ name: "name", type: "text", value: "" }]);
+        const input = form.querySelector('input[name="name"]');
+        blur(input);
+        // Empty name triggers validation error
+        expect(input.validity.customError).toBe(true);
+    });
+
+    test("validates input[name='customName']", () => {
+        const form = buildForm([
+            { name: "customName", type: "text", value: "" },
+        ]);
+        const input = form.querySelector('input[name="customName"]');
+        blur(input);
+        expect(input.validity.customError).toBe(true);
+    });
+
+    test("does NOT validate input[name='displayName']", () => {
+        const form = buildForm([
+            { name: "displayName", type: "text", value: "" },
+        ]);
+        const input = form.querySelector('input[name="displayName"]');
+        blur(input);
+        // displayName is excluded — no custom validity set
+        expect(input.validity.customError).toBe(false);
+    });
+
+    test("does NOT validate input[name='display_name']", () => {
+        const form = buildForm([
+            { name: "display_name", type: "text", value: "" },
+        ]);
+        const input = form.querySelector('input[name="display_name"]');
+        blur(input);
+        expect(input.validity.customError).toBe(false);
+    });
+
+    test("does NOT validate hidden input[name='name']", () => {
+        const form = buildForm([{ name: "name", type: "hidden", value: "" }]);
+        const input = form.querySelector('input[name="name"]');
+        blur(input);
+        expect(input.validity.customError).toBe(false);
+    });
+
+    test("validates valid name and clears error styling", () => {
+        const form = buildForm([
+            {
+                name: "name",
+                type: "text",
+                value: "my-tool",
+                id: "tool-name",
+            },
+        ]);
+        const input = form.querySelector('input[name="name"]');
+        blur(input);
+        expect(input.validity.customError).toBe(false);
+        expect(input.classList.contains("border-red-500")).toBe(false);
+    });
+
+    test("shows error styling on invalid name", () => {
+        const form = buildForm([{ name: "name", type: "text", value: "" }]);
+        const input = form.querySelector('input[name="name"]');
+        blur(input);
+        expect(input.classList.contains("border-red-500")).toBe(true);
+    });
+
+    test("form with both name and displayName only validates name", () => {
+        const form = buildForm([
+            { name: "name", type: "text", value: "" },
+            { name: "displayName", type: "text", value: "" },
+        ]);
+        const nameInput = form.querySelector('input[name="name"]');
+        const displayInput = form.querySelector('input[name="displayName"]');
+
+        blur(nameInput);
+        blur(displayInput);
+
+        // Only the technical name field gets validation
+        expect(nameInput.validity.customError).toBe(true);
+        expect(displayInput.validity.customError).toBe(false);
+    });
+
+    test("edit form: hidden name excluded, customName validated", () => {
+        const form = buildForm([
+            { name: "name", type: "hidden", value: "original-name" },
+            { name: "customName", type: "text", value: "" },
+            { name: "displayName", type: "text", value: "" },
+        ]);
+        const hiddenName = form.querySelector('input[name="name"]');
+        const customName = form.querySelector('input[name="customName"]');
+        const displayName = form.querySelector('input[name="displayName"]');
+
+        blur(hiddenName);
+        blur(customName);
+        blur(displayName);
+
+        expect(hiddenName.validity.customError).toBe(false);
+        expect(customName.validity.customError).toBe(true);
+        expect(displayName.validity.customError).toBe(false);
+    });
+});