Fix vue warnings and minor tweaks

- notify user when no search results or search string too short

client/galaxy/scripts/components/Panels/ToolBox.vue

@@ -12,9 +12,12 @@
         <div class="unified-panel-controls">
             <tool-search :query="query" placeholder="search tools" @onQuery="onQuery" @onResults="onResults" />
 
-            <div class="float-none py-2" v-if="results">
-                <button class="btn btn-secondary btn-sm" v-if="!showSections" @click="onToggle">Show Categories</button>
-                <button class="btn btn-secondary btn-sm" v-if="showSections" @click="onToggle">Hide Categories</button>
+            <div class="float-none py-2" v-if="hasResults">
+                <b-button @click="onToggle">{{ buttonText }}</b-button>
+            </div>
+            <div class="py-2" v-else-if="query">
+                <span v-if="query.length<3" class="font-weight-bold">***Search string too short***</span>
+                <span v-else class="font-weight-bold">***No Results Found***</span>
             </div>
         </div>
         <div class="unified-panel-body">
@@ -28,12 +31,12 @@
                         @onClick="onOpen"
                     />
                 </div>
-                <div class="toolSectionTitle" id="title_XXinternalXXworkflow">
+                <div class="toolSectionTitle" id="title_XXinternalXXworkflow" v-if="workflow">
                     <a>{{ workflowTitle }}</a>
                 </div>
-                <div id="internal-workflows" class="toolSectionBody">
+                <div id="internal-workflows" class="toolSectionBody" v-if="workflow">
                     <div class="toolSectionBg" />
-                    <div class="toolTitle" v-for="wf in this.workflows" :key="wf.id">
+                    <div class="toolTitle" v-for="wf in this.workflow" :key="wf.id">
                         <a :href="wf.href">{{ wf.title }}</a>
                     </div>
                 </div>
@@ -67,6 +70,7 @@ export default {
             queryFilter: null,
             workflow: null,
             showSections: false,
+            buttonText: "",
         };
     },
     props: {
@@ -96,7 +100,7 @@ export default {
             return !!(Galaxy.user && Galaxy.user.id);
         },
         workflows() {
-            return [
+            this.workflow = [
                 {
                     title: _l("All workflows"),
                     href: `${getAppRoot()}workflows/list`,
@@ -110,15 +114,20 @@ export default {
                     };
                 }),
             ];
+            return this.workflow;
+        },
+        hasResults() {
+            return this.results && (this.results.length > 0);
         },
     },
     methods: {
         onQuery(query) {
             this.query = query;
-            this.queryFilter = (query && query.length) >= 3 ? query : null;
         },
         onResults(results) {
             this.results = results;
+            this.queryFilter = this.hasResults ? this.query : null;
+            this.setButtonText();
         },
         onFavorites(term) {
             this.query = term;
@@ -138,6 +147,10 @@ export default {
         },
         onToggle() {
             this.showSections = !this.showSections;
+            this.setButtonText();
+        },
+        setButtonText() {
+            this.buttonText = this.showSections ? "Hide Sections" : "Show Sections";
         },
     },
 };

client/galaxy/scripts/components/Panels/utilities.js

@@ -45,6 +45,9 @@ export function filterToolSections(layout, results) {
 
 export function filterTools(layout, results) {
     if (results) {
+        if (results.length < 1) {
+            return [];
+        }
         var toolsResults = [results.length];
 
         //Goes through each section and adds each tools that's in results to