fix: remove requester fields from form, use FormElement, enforce https URL

arash77 · arash77 · commit f4db42d559cd · 2026-05-04T11:17:30.000+02:00
- Drop requester name/email inputs (now filled server-side)
- Replace bootstrap inputs with Galaxy's FormElement for consistent UI
- Validate tool URL: only https:// links accepted
- Update tests to use suppressExpectedErrorMessages helper instead of
  silencing all console errors
diff --git a/client/src/components/Tool/ToolRequestForm.test.ts b/client/src/components/Tool/ToolRequestForm.test.ts
@@ -1,4 +1,7 @@
-import { getLocalVue } from "@tests/vitest/helpers";
+import "@/composables/__mocks__/filter";
+
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue, suppressExpectedErrorMessages } from "@tests/vitest/helpers";
 import { mount, type Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -17,26 +20,27 @@ vi.mock("@/api/toolRequestForm", () => ({
 const localVue = getLocalVue(true);
 
 async function mountForm(show = true): Promise<Wrapper<Vue>> {
-    // Suppress FormBoolean null-value prop warnings — condaAvailable and testDataAvailable
-    // are intentionally null until the user interacts with them.
-    vi.spyOn(console, "error").mockImplementation(() => {});
+    // Suppress only the known BootstrapVue prop warnings for null boolean values
+    // (condaAvailable and testDataAvailable are intentionally null until the user interacts).
+    suppressExpectedErrorMessages(["Invalid prop: type check failed for prop"]);
 
+    const pinia = createTestingPinia({ createSpy: vi.fn });
     const wrapper = mount(ToolRequestForm as object, {
         localVue,
         propsData: { show },
+        pinia,
         attachTo: document.body,
     });
     await flushPromises();
     return wrapper;
 }
 
-/** Fill the three required fields: tool_name, description, requester_name. */
+/** Fill the two required fields: tool_name and description. */
 async function fillRequiredFields(wrapper: Wrapper<Vue>, overrides: Record<string, string> = {}) {
     await wrapper.find("#tool-request-name").setValue(overrides["tool_name"] ?? "FastQC");
     await wrapper
         .find("#tool-request-description")
         .setValue(overrides["description"] ?? "Quality control for sequencing data");
-    await wrapper.find("#tool-request-requester-name").setValue(overrides["requester_name"] ?? "Dr. Smith");
     await flushPromises();
 }
 
@@ -61,9 +65,11 @@ describe("ToolRequestForm", () => {
         const wrapper = await mountForm(true);
         expect(wrapper.find("#tool-request-name").exists()).toBe(true);
         expect(wrapper.find("#tool-request-description").exists()).toBe(true);
-        expect(wrapper.find("#tool-request-requester-name").exists()).toBe(true);
         expect(wrapper.find("#tool-request-url").exists()).toBe(true);
-        expect(wrapper.find("#tool-request-requester-email").exists()).toBe(true);
+        expect(wrapper.find("#tool-request-requester-affiliation").exists()).toBe(true);
+        // Name and email are filled server-side; no fields for them in the form
+        expect(wrapper.find("#tool-request-requester-name").exists()).toBe(false);
+        expect(wrapper.find("#tool-request-requester-email").exists()).toBe(false);
     });
 
     it("ok button is disabled when required fields are empty", async () => {
@@ -87,8 +93,6 @@ describe("ToolRequestForm", () => {
         await wrapper.find("#tool-request-description").setValue("Quality control for sequencing data");
         await wrapper.find("#tool-request-domain").setValue("Genomics");
         await wrapper.find("#tool-request-version").setValue("0.12.1");
-        await wrapper.find("#tool-request-requester-name").setValue("Dr. Smith");
-        await wrapper.find("#tool-request-requester-email").setValue("smith@example.com");
         await wrapper.find("#tool-request-requester-affiliation").setValue("Example University");
         await flushPromises();
 
@@ -104,10 +108,21 @@ describe("ToolRequestForm", () => {
             description: "Quality control for sequencing data",
             scientific_domain: "Genomics",
             requested_version: "0.12.1",
-            requester_name: "Dr. Smith",
-            requester_email: "smith@example.com",
             requester_affiliation: "Example University",
         });
+        // Requester name and email come from the server (authenticated user), not the form
+        expect(payload).not.toHaveProperty("requester_name");
+        expect(payload).not.toHaveProperty("requester_email");
+    });
+
+    it("rejects non-https URL and does not submit", async () => {
+        const wrapper = await mountForm(true);
+        await fillRequiredFields(wrapper);
+        await wrapper.find("#tool-request-url").setValue("http://example.com/tool");
+        wrapper.findComponent(GModal).vm.$emit("ok");
+        await flushPromises();
+        expect(mockSubmitToolRequest).not.toHaveBeenCalled();
+        expect(wrapper.text()).toContain("https://");
     });
 
     it("shows success alert after successful submission", async () => {
@@ -131,6 +146,7 @@ describe("ToolRequestForm", () => {
 
     it("does not call API when required fields are missing", async () => {
         const wrapper = await mountForm(true);
+        // Only fill tool_name, leave description empty
         await wrapper.find("#tool-request-name").setValue("Samtools");
         await flushPromises();
         wrapper.findComponent(GModal).vm.$emit("ok");
diff --git a/client/src/components/Tool/ToolRequestForm.vue b/client/src/components/Tool/ToolRequestForm.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { BAlert, BFormGroup, BFormInput, BFormSelect, BFormTextarea } from "bootstrap-vue";
+import { BAlert } from "bootstrap-vue";
 import { ref } from "vue";
 
 import { submitToolRequest } from "@/api/toolRequestForm";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import GModal from "@/components/BaseComponents/GModal.vue";
+import FormElement from "@/components/Form/FormElement.vue";
 
 const props = defineProps<{
     show: boolean;
@@ -22,15 +23,34 @@ const scientificDomain = ref("");
 const requestedVersion = ref("");
 const condaAvailable = ref<boolean | null>(null);
 const testDataAvailable = ref<boolean | null>(null);
-const requesterName = ref("");
-const requesterEmail = ref("");
 const requesterAffiliation = ref("");
 
 const submitting = ref(false);
 const successMessage = ref("");
 const errorMessage = ref("");
+const urlError = ref("");
 
-const formValid = () => !!(toolName.value.trim() && description.value.trim() && requesterName.value.trim());
+const formValid = () => !!(toolName.value.trim() && description.value.trim());
+
+function validateUrl(): boolean {
+    const url = toolUrl.value.trim();
+    if (!url) {
+        urlError.value = "";
+        return true;
+    }
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== "https:") {
+            urlError.value = "Only https:// URLs are allowed.";
+            return false;
+        }
+    } catch {
+        urlError.value = "Please enter a valid URL (e.g. https://example.com).";
+        return false;
+    }
+    urlError.value = "";
+    return true;
+}
 
 function resetForm() {
     toolName.value = "";
@@ -40,10 +60,9 @@ function resetForm() {
     requestedVersion.value = "";
     condaAvailable.value = null;
     testDataAvailable.value = null;
-    requesterName.value = "";
-    requesterEmail.value = "";
     requesterAffiliation.value = "";
     errorMessage.value = "";
+    urlError.value = "";
     successMessage.value = "";
 }
 
@@ -58,6 +77,10 @@ async function submit() {
         return;
     }
 
+    if (!validateUrl()) {
+        return;
+    }
+
     submitting.value = true;
     errorMessage.value = "";
     successMessage.value = "";
@@ -71,8 +94,6 @@ async function submit() {
             requested_version: requestedVersion.value.trim() || undefined,
             conda_available: condaAvailable.value ?? undefined,
             test_data_available: testDataAvailable.value ?? undefined,
-            requester_name: requesterName.value.trim(),
-            requester_email: requesterEmail.value.trim() || undefined,
             requester_affiliation: requesterAffiliation.value.trim() || undefined,
         });
 
@@ -115,102 +136,86 @@ async function submit() {
 
             <h6 v-localize class="font-weight-bold mb-2">Tool Information</h6>
 
-            <BFormGroup label="Tool Name *" label-for="tool-request-name">
-                <BFormInput
-                    id="tool-request-name"
-                    v-model="toolName"
-                    placeholder="e.g. FastQC"
-                    :disabled="submitting"
-                    required />
-            </BFormGroup>
-
-            <BFormGroup label="Homepage / Repository URL" label-for="tool-request-url">
-                <BFormInput
-                    id="tool-request-url"
-                    v-model="toolUrl"
-                    placeholder="e.g. https://github.com/..."
-                    :disabled="submitting" />
-            </BFormGroup>
-
-            <BFormGroup label="Description *" label-for="tool-request-description">
-                <BFormTextarea
-                    id="tool-request-description"
-                    v-model="description"
-                    placeholder="Describe the tool and its scientific use case"
-                    rows="3"
-                    :disabled="submitting"
-                    required />
-            </BFormGroup>
-
-            <BFormGroup label="Scientific Domain" label-for="tool-request-domain">
-                <BFormInput
-                    id="tool-request-domain"
-                    v-model="scientificDomain"
-                    placeholder="e.g. Genomics, Proteomics, AI/ML"
-                    :disabled="submitting" />
-            </BFormGroup>
-
-            <BFormGroup label="Requested Version" label-for="tool-request-version">
-                <BFormInput
-                    id="tool-request-version"
-                    v-model="requestedVersion"
-                    placeholder="e.g. 1.2.0"
-                    :disabled="submitting" />
-            </BFormGroup>
+            <FormElement
+                id="tool-request-name"
+                v-model="toolName"
+                type="text"
+                title="Tool Name"
+                help="e.g. FastQC"
+                :attributes="{ optional: false }" />
+
+            <FormElement
+                id="tool-request-url"
+                v-model="toolUrl"
+                type="text"
+                title="Homepage / Repository URL"
+                help="e.g. https://github.com/..."
+                :error="urlError" />
+
+            <FormElement
+                id="tool-request-description"
+                v-model="description"
+                type="text"
+                title="Description"
+                help="Describe the tool and its scientific use case"
+                :attributes="{ area: true, optional: false }" />
+
+            <FormElement
+                id="tool-request-domain"
+                v-model="scientificDomain"
+                type="text"
+                title="Scientific Domain"
+                help="e.g. Genomics, Proteomics, AI/ML" />
+
+            <FormElement
+                id="tool-request-version"
+                v-model="requestedVersion"
+                type="text"
+                title="Requested Version"
+                help="e.g. 1.2.0" />
 
             <div class="d-flex gap-3 mb-3">
-                <BFormGroup label="Conda package available?" label-for="tool-request-conda" class="flex-fill mb-0">
-                    <BFormSelect
-                        id="tool-request-conda"
-                        v-model="condaAvailable"
-                        :options="[
-                            { value: null, text: 'Not specified' },
-                            { value: true, text: 'Yes' },
-                            { value: false, text: 'No' },
-                        ]"
-                        :disabled="submitting" />
-                </BFormGroup>
-
-                <BFormGroup label="Test data available?" label-for="tool-request-test-data" class="flex-fill mb-0">
-                    <BFormSelect
-                        id="tool-request-test-data"
-                        v-model="testDataAvailable"
-                        :options="[
-                            { value: null, text: 'Not specified' },
-                            { value: true, text: 'Yes' },
-                            { value: false, text: 'No' },
-                        ]"
-                        :disabled="submitting" />
-                </BFormGroup>
+                <FormElement
+                    id="tool-request-conda"
+                    v-model="condaAvailable"
+                    type="select"
+                    title="Conda package available?"
+                    class="flex-fill"
+                    :attributes="{
+                        data: [
+                            { label: 'Not specified', value: null },
+                            { label: 'Yes', value: true },
+                            { label: 'No', value: false },
+                        ],
+                    }" />
+
+                <FormElement
+                    id="tool-request-test-data"
+                    v-model="testDataAvailable"
+                    type="select"
+                    title="Test data available?"
+                    class="flex-fill"
+                    :attributes="{
+                        data: [
+                            { label: 'Not specified', value: null },
+                            { label: 'Yes', value: true },
+                            { label: 'No', value: false },
+                        ],
+                    }" />
             </div>
 
             <h6 v-localize class="font-weight-bold mb-2 mt-3">Requester Information</h6>
 
-            <BFormGroup label="Name *" label-for="tool-request-requester-name">
-                <BFormInput
-                    id="tool-request-requester-name"
-                    v-model="requesterName"
-                    placeholder="Your name"
-                    :disabled="submitting"
-                    required />
-            </BFormGroup>
-
-            <BFormGroup label="Email (for follow-up)" label-for="tool-request-requester-email">
-                <BFormInput
-                    id="tool-request-requester-email"
-                    v-model="requesterEmail"
-                    type="email"
-                    placeholder="your@email.com"
-                    :disabled="submitting" />
-            </BFormGroup>
-
-            <BFormGroup label="Affiliation / Lab" label-for="tool-request-requester-affiliation">
-                <BFormInput
-                    id="tool-request-requester-affiliation"
-                    v-model="requesterAffiliation"
-                    placeholder="Your institution or lab"
-                    :disabled="submitting" />
-            </BFormGroup>
+            <p class="mb-2 text-muted small">
+                Your account name and email will be automatically included in the request.
+            </p>
+
+            <FormElement
+                id="tool-request-requester-affiliation"
+                v-model="requesterAffiliation"
+                type="text"
+                title="Affiliation / Lab"
+                help="Your institution or lab" />
         </div>
     </GModal>
 </template>
