Merge pull request #23046 from itisAliRH/feat/tool-form-latest-version-badge-empty-params

mvdbeek · web-flow · commit e83fb8888405 · 2026-07-15T15:13:10.000+02:00
Show newer available tool version badge in tool form and empty-parameter state more clearly
diff --git a/client/src/components/Form/FormCardSticky.test.js b/client/src/components/Form/FormCardSticky.test.js
@@ -66,6 +66,25 @@ describe("FormCardSticky.vue", () => {
         expect(wrapper.text()).toContain("(Galaxy Version 23.0)");
     });
 
+    it("renders clickable newer version badge with a tooltip when requested", async () => {
+        const wrapper = mountComponent({ isNotLatestVersion: true });
+        const badge = wrapper.find("[data-description='newer tool version']");
+        expect(badge.exists()).toBe(true);
+        expect(badge.text()).toBe("Newer version available");
+        expect(badge.attributes("title")).toBe("Switch to the latest available tool version");
+        expect(badge.element.tagName).toBe("BUTTON");
+        expect(badge.attributes("type")).toBe("button");
+
+        await badge.trigger("click");
+
+        expect(wrapper.emitted("newer-version-click")).toHaveLength(1);
+    });
+
+    it("does not render newer version badge by default", () => {
+        const wrapper = mountComponent();
+        expect(wrapper.find("[data-description='newer tool version']").exists()).toBe(false);
+    });
+
     it("renders slot content: buttons, default, footer", () => {
         const wrapper = mountComponent(
             {},
diff --git a/client/src/components/Form/FormCardSticky.vue b/client/src/components/Form/FormCardSticky.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { faWrench, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge } from "bootstrap-vue";
 
 import { absPath } from "@/utils/redirect";
 
@@ -17,11 +18,17 @@ withDefaults(
         logo?: string;
         name?: string;
         version?: string;
+        isNotLatestVersion?: boolean;
     }>(),
     {
+        isNotLatestVersion: false,
         isLoading: false,
     },
 );
+
+const emit = defineEmits<{
+    (e: "newer-version-click"): void;
+}>();
 </script>
 
 <template>
@@ -41,10 +48,25 @@ withDefaults(
                             v-if="version"
                             class="text-muted"
                             data-description="galaxy tool version"
-                            :data-version="version"
-                            >(Galaxy Version {{ version }})</span
-                        >
+                            :data-version="version">
+                            (Galaxy Version {{ version }})
+                        </span>
+
+                        <BBadge
+                            v-if="isNotLatestVersion"
+                            v-g-tooltip.hover.focus
+                            tag="button"
+                            type="button"
+                            class="border-0 cursor-pointer"
+                            pill
+                            variant="warning"
+                            title="Switch to the latest available tool version"
+                            data-description="newer tool version"
+                            @click="emit('newer-version-click')">
+                            Newer version available
+                        </BBadge>
                     </div>
+
                     <div class="d-flex flex-nowrap align-items-start flex-gapx-1">
                         <slot name="buttons" />
                     </div>
diff --git a/client/src/components/Tool/ToolCard.test.js b/client/src/components/Tool/ToolCard.test.js
@@ -1,4 +1,4 @@
-import { expectConfigurationRequest, getLocalVue } from "@tests/vitest/helpers";
+import { expectConfigurationRequest, getLocalVue, injectTestRouter } from "@tests/vitest/helpers";
 import { setupMockConfig } from "@tests/vitest/mockConfig";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
@@ -14,16 +14,28 @@ const { server, http } = useServerMock();
 
 vi.mock("@/api/schema");
 
+vi.mock("@/composables/userLocalStorageFromHashedId", async () => {
+    const { ref } = await import("vue");
+    return {
+        useUserLocalStorageFromHashId: (_key, initialValue) => ref(initialValue),
+    };
+});
+
 const config = { enable_tool_source_display: false };
 setupMockConfig(config);
 
 const localVue = getLocalVue();
+const router = injectTestRouter(localVue);
 
 describe("ToolCard", () => {
     let wrapper;
     let userStore;
 
     beforeEach(async () => {
+        if (router.currentRoute.fullPath !== "/") {
+            await router.push("/");
+        }
+
         // some child component must be bypassing useConfig - so we need to explicitly
         // stup the API endpoint also. If you can drop this without request problems in log,
         // this hack can be removed.
@@ -58,6 +70,7 @@ describe("ToolCard", () => {
                 disabled: false,
             },
             localVue,
+            router,
             pinia,
         });
         userStore = useUserStore();
@@ -91,4 +104,48 @@ describe("ToolCard", () => {
         expect(backdropActive.length).toBe(1);
         await flushPromises();
     });
+
+    it("shows newer version badge when latest version is not active and navigates to the latest alias", async () => {
+        await wrapper.setProps({
+            version: "1.0",
+            options: {
+                ...wrapper.props("options"),
+                version: "1.0",
+                versions: ["1.0", "2.0"],
+            },
+        });
+
+        const badge = wrapper.find("[data-description='newer tool version']");
+        expect(badge.text()).toBe("Newer version available");
+
+        await badge.trigger("click");
+
+        expect(router.currentRoute.fullPath).toBe("/?tool_id=identifier&version=latest");
+    });
+
+    it("does not show newer version badge for the latest lineage version", async () => {
+        await wrapper.setProps({
+            version: "2.0",
+            options: {
+                ...wrapper.props("options"),
+                version: "2.0",
+                versions: ["1.0", "2.0"],
+            },
+        });
+
+        expect(wrapper.find("[data-description='newer tool version']").exists()).toBe(false);
+    });
+
+    it("does not show newer version badge for single-version tools", async () => {
+        await wrapper.setProps({
+            version: "1.0",
+            options: {
+                ...wrapper.props("options"),
+                version: "1.0",
+                versions: ["1.0"],
+            },
+        });
+
+        expect(wrapper.find("[data-description='newer tool version']").exists()).toBe(false);
+    });
 });
diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
@@ -5,6 +5,7 @@ import { BAlert, BPopover } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onBeforeMount, ref, watch } from "vue";
 
+import { useToolRouting } from "@/composables/route";
 import { useStorageLocationConfiguration } from "@/composables/storageLocation";
 import { useConfigStore } from "@/stores/configurationStore";
 import { useToolsServiceCredentialsDefinitionsStore } from "@/stores/toolsServiceCredentialsDefinitionsStore";
@@ -88,6 +89,7 @@ const props = defineProps({
 const emit = defineEmits(["onChangeVersion", "updatePreferredObjectStoreId"]);
 
 const { setToolServiceCredentialsDefinitionFor } = useToolsServiceCredentialsDefinitionsStore();
+const { routeToTool } = useToolRouting();
 
 function onChangeVersion(v) {
     emit("onChangeVersion", v);
@@ -127,6 +129,12 @@ const visibleVersions = computed(() => {
     return filtered;
 });
 const showVersions = computed(() => visibleVersions.value.length > 1);
+const latestVersion = computed(() => versions.value[versions.value.length - 1]);
+const isNotLatestVersion = computed(() => Boolean(latestVersion.value && props.version !== latestVersion.value));
+
+function onNewerVersionClick() {
+    routeToTool(props.id);
+}
 
 const storageLocationModalTitle = computed(() => {
     if (isOnlyPreference.value) {
@@ -166,7 +174,9 @@ onBeforeMount(() => {
         :error-message="errorText || ''"
         :description="props.description"
         :name="props.title"
-        :version="props.version">
+        :version="props.version"
+        :is-not-latest-version="isNotLatestVersion"
+        @newer-version-click="onNewerVersionClick">
         <template v-slot:buttons>
             <GButtonGroup class="tool-card-buttons">
                 <ToolFavoriteButton v-if="hasUser" :id="props.id" />
diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
@@ -5,7 +5,7 @@ import { getLocalVue, injectTestRouter, suppressBootstrapVueWarnings } from "@te
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { HttpResponse, useServerMock } from "@/api/client/__mocks__";
 import MockCurrentHistory from "@/components/providers/MockCurrentHistory";
@@ -20,6 +20,13 @@ const localVue = getLocalVue();
 const router = injectTestRouter(localVue);
 const pinia = createPinia();
 
+vi.mock("@/composables/userLocalStorageFromHashedId", async () => {
+    const { ref } = await import("vue");
+    return {
+        useUserLocalStorageFromHashId: (_key, initialValue) => ref(initialValue),
+    };
+});
+
 describe("ToolForm", () => {
     let wrapper;
     let userStore;
@@ -95,6 +102,8 @@ describe("ToolForm", () => {
         expect(button.attributes("data-title")).toBe("Run tool: tool_name (version)");
         const dropdown = wrapper.findAll(".dropdown-item");
         expect(dropdown.length).toBe(2);
+        const noToolParametersAlert = wrapper.find("[data-description='no tool parameters']");
+        expect(noToolParametersAlert.text()).toContain("This tool requires no input parameters and can be run as is.");
         const help = wrapper.find(".form-help");
         expect(help.text()).toBe("help_text");
         const creator = wrapper.find(".creative-work-creator");
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
@@ -43,6 +43,11 @@
             @onChangeVersion="onChangeVersion">
             <div class="mt-2 mb-4">
                 <Heading v-localize h2 separator bold size="sm"> Tool Parameters </Heading>
+
+                <GAlert v-if="showNoToolParametersAlert" show variant="info" data-description="no tool parameters">
+                    This tool requires no input parameters and can be run as is.
+                </GAlert>
+
                 <FormDisplay
                     :id="toolId"
                     :inputs="formConfig.inputs"
@@ -134,6 +139,7 @@ import GModal from "../BaseComponents/GModal.vue";
 import ToolRecommendation from "../ToolRecommendation.vue";
 import ToolCard from "./ToolCard.vue";
 import ToolFormTags from "./ToolFormTags.vue";
+import GAlert from "@/components/BaseComponents/GAlert.vue";
 import ButtonSpinner from "@/components/Common/ButtonSpinner.vue";
 import Heading from "@/components/Common/Heading.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
@@ -154,6 +160,7 @@ export default {
         ToolFormTags,
         ToolRecommendation,
         Heading,
+        GAlert,
         GModal,
     },
     props: {
@@ -278,6 +285,9 @@ export default {
         initialized() {
             return this.formData !== undefined;
         },
+        showNoToolParametersAlert() {
+            return !this.loading && this.formConfig?.inputs?.length === 0;
+        },
         canMutateHistory() {
             return this.currentHistory && canMutateHistory(this.currentHistory);
         },
