From 058d727325f4b8a9dd8b490944b7836d8ccefdeb Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 13 Oct 2023 18:39:54 -0500
Subject: [PATCH] fix selenium fails waiting on CSS selectors for tool panel

---
 client/src/components/Panels/ToolPanel.vue    | 39 ++++++++++++++-----
 .../Toolshed/RepositoryDetails/Index.test.js  |  4 ++
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 6c43bb775c79..ed166d8fc29b 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { ref, watch, watchEffect } from "vue";
+import { ref, watch } from "vue";
 
 import { useConfig } from "@/composables/config";
 import { useToolStore } from "@/stores/toolStore";
@@ -41,17 +41,36 @@ watch(
     }
 );
 
-watchEffect(async () => {
-    if (isConfigLoaded.value) {
-        panelViews.value = config.value.panel_views;
-        try {
-            await toolStore.fetchTools();
-            await toolStore.initCurrentPanelView(config.value.default_panel_view);
-        } catch (error: any) {
-            console.error("ToolPanel - Load tools error:", error);
+// as soon as config is loaded, load tools
+watch(
+    () => isConfigLoaded.value,
+    async (newVal) => {
+        if (newVal) {
+            await loadTools();
+        }
+    },
+    { immediate: true }
+);
+
+// if currentPanelView ever becomes null || "", load tools
+watch(
+    () => currentPanelView.value,
+    async (newVal) => {
+        if (!newVal && isConfigLoaded.value) {
+            await loadTools();
         }
     }
-});
+);
+
+async function loadTools() {
+    panelViews.value = panelViews.value === null ? config.value.panel_views : panelViews.value;
+    try {
+        await toolStore.fetchTools();
+        await toolStore.initCurrentPanelView(config.value.default_panel_view);
+    } catch (error: any) {
+        console.error("ToolPanel - Load tools error:", error);
+    }
+}
 
 async function updatePanelView(panelView: string) {
     await toolStore.setCurrentPanelView(panelView);
diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.test.js b/client/src/components/Toolshed/RepositoryDetails/Index.test.js
index 74a9d88f8013..dbcb10ea2741 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.test.js
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.test.js
@@ -1,4 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
 import { getAppRoot } from "onload/loadConfig";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
@@ -31,6 +33,8 @@ Services.mockImplementation(() => {
 
 describe("RepositoryDetails", () => {
     it("test repository details index", async () => {
+        const axiosMock = new MockAdapter(axios);
+        axiosMock.onGet("api/tools?in_panel=true&view=default").reply(200, {});
         mockFetcher.path("/api/configuration").method("get").mock({ data: {} });
         const localVue = getLocalVue();
         const pinia = createPinia();