Show "Request a Tool" button only when tool search returns no results

Previously the button was always visible below the search controls.
Now it appears contextually inside the "No results found" empty state,
grouping the call-to-action with the feedback that triggered it.

- Move button into the `queryFinished && !hasResults` block in ToolBox.vue
- Button remains hidden for anonymous users, in workflow mode, and when
  `enable_tool_request_form` config is disabled
- Fix `isConfigLoaded` in the config mock to return a `ref(true)` rather
  than a plain boolean, matching the real composable
- Add 6 tests covering button visibility: with/without results, config
  disabled, anonymous user, workflow mode, and modal open-on-click

Author: arash77

client/src/components/Panels/ToolBox.vue

@@ -477,6 +477,16 @@ function onLabelToggle(labelId: string) {
                 </div>
                 <div v-else-if="queryFinished && !hasResults" class="pb-2">
                     <BBadge class="alert-warning w-100">No results found</BBadge>
+                    <div v-if="showRequestToolButton" class="mt-2">
+                        <GButton
+                            size="small"
+                            class="w-100"
+                            data-description="request tool button"
+                            @click="openToolRequestForm">
+                            <FontAwesomeIcon :icon="faWrench" class="mr-1" />
+                            {{ localize("Request a Tool") }}
+                        </GButton>
+                    </div>
                 </div>
                 <div v-if="closestTerm" class="pb-2">
                     <BBadge class="alert-danger w-100">
@@ -489,12 +499,6 @@ function onLabelToggle(labelId: string) {
                 </div>
             </section>
         </div>
-        <div v-if="showRequestToolButton" class="px-2 pb-2">
-            <GButton size="small" class="w-100" data-description="request tool button" @click="openToolRequestForm">
-                <FontAwesomeIcon :icon="faWrench" class="mr-1" />
-                {{ localize("Request a Tool") }}
-            </GButton>
-        </div>
 
         <ToolRequestForm :show.sync="showToolRequestForm" />
 

client/src/components/Panels/ToolBoxSearch.test.ts

@@ -6,10 +6,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import toolsListUntyped from "@/components/ToolsView/testData/toolsList.json";
 import toolsListInPanelUntyped from "@/components/ToolsView/testData/toolsListInPanel.json";
-import { setMockConfig } from "@/composables/__mocks__/config";
+import { resetMockConfig, setMockConfig } from "@/composables/__mocks__/config";
 import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 
+import ToolRequestForm from "../Tool/ToolRequestForm.vue";
 import ToolBox from "./ToolBox.vue";
 
 vi.mock("@/composables/config");
@@ -328,3 +329,147 @@ describe("ToolBox search", () => {
         expect(labels).toEqual(EXPECTED_LABELS);
     });
 });
+
+/** Helper to mount a default (non-favorites) ToolBox with pre-loaded tool data.
+ * Pass `anonymous=true` to simulate an unauthenticated (anonymous) user.
+ * An anonymous user is any non-null object without an `email` property.
+ */
+async function mountDefaultToolBox(pinia: ReturnType<typeof createPinia>, anonymous = false) {
+    setActivePinia(pinia);
+
+    const toolStore = useToolStore();
+    toolStore.toolsById = toToolsById(toolsList);
+    toolStore.toolSections = { default: toolsListInPanel };
+    toolStore.defaultPanelView = "default";
+    toolStore.currentPanelView = "default";
+
+    const userStore = useUserStore();
+    // isAnonymous is a computed value driven by currentUser.
+    // null → isAnonymous=false (registered/logged-in); object without email → isAnonymous=true
+    userStore.currentUser = anonymous ? ({ id: "anon" } as any) : null;
+    userStore.currentPreferences = { favorites: { tools: [] } };
+
+    const wrapper = mount(ToolBox as object, {
+        pinia,
+        localVue,
+        router,
+        propsData: { useSearchWorker: false },
+    });
+    await flushPromises();
+    return wrapper;
+}
+
+describe("ToolBox — Request a Tool button", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        setMockConfig({ toolbox_auto_sort: true, enable_tool_request_form: true });
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+        resetMockConfig();
+        setMockConfig({ toolbox_auto_sort: true });
+    });
+
+    it("is hidden when search returns results", async () => {
+        const pinia = createPinia();
+        const wrapper = await mountDefaultToolBox(pinia);
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("Filter");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find('[data-description="request tool button"]').exists()).toBe(false);
+    });
+
+    it("is visible when search returns no results", async () => {
+        const pinia = createPinia();
+        const wrapper = await mountDefaultToolBox(pinia);
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("xyznonexistenttool123");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find(".alert-warning").exists()).toBe(true);
+        expect(wrapper.find('[data-description="request tool button"]').exists()).toBe(true);
+    });
+
+    it("is hidden when enable_tool_request_form config is false", async () => {
+        setMockConfig({ toolbox_auto_sort: true, enable_tool_request_form: false });
+        const pinia = createPinia();
+        const wrapper = await mountDefaultToolBox(pinia);
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("xyznonexistenttool123");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find(".alert-warning").exists()).toBe(true);
+        expect(wrapper.find('[data-description="request tool button"]').exists()).toBe(false);
+    });
+
+    it("is hidden for anonymous users even when search returns no results", async () => {
+        const pinia = createPinia();
+        const wrapper = await mountDefaultToolBox(pinia, /* anonymous= */ true);
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("xyznonexistenttool123");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find(".alert-warning").exists()).toBe(true);
+        expect(wrapper.find('[data-description="request tool button"]').exists()).toBe(false);
+    });
+
+    it("is hidden in workflow mode even when search returns no results", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "default";
+
+        const userStore = useUserStore();
+        userStore.currentUser = null;
+        userStore.currentPreferences = { favorites: { tools: [] } };
+
+        const wrapper = mount(ToolBox as object, {
+            pinia,
+            localVue,
+            router,
+            propsData: { workflow: true, useSearchWorker: false },
+        });
+        await flushPromises();
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("xyznonexistenttool123");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find(".alert-warning").exists()).toBe(true);
+        expect(wrapper.find('[data-description="request tool button"]').exists()).toBe(false);
+    });
+
+    it("opens the tool request form modal when clicked", async () => {
+        const pinia = createPinia();
+        const wrapper = await mountDefaultToolBox(pinia);
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("xyznonexistenttool123");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        const button = wrapper.find('[data-description="request tool button"]');
+        expect(button.exists()).toBe(true);
+
+        await button.trigger("click");
+        await flushPromises();
+
+        const requestForm = wrapper.findComponent(ToolRequestForm);
+        expect(requestForm.props("show")).toBe(true);
+    });
+});

client/src/composables/__mocks__/config.ts

@@ -1,6 +1,8 @@
 import { vi } from "vitest";
 import { ref } from "vue";
 
+const isConfigLoadedRef = ref(true);
+
 // Default mock config values
 const defaultConfig = {
     allow_local_account_creation: true,
@@ -20,7 +22,7 @@ const mockConfig = ref({ ...defaultConfig });
 
 export const useConfig = vi.fn(() => ({
     config: mockConfig,
-    isConfigLoaded: true,
+    isConfigLoaded: isConfigLoadedRef,
 }));
 
 // Helper function for tests to override config values