fix: Search improvements and bug fixes [CW-1604] (#6985)

* fix: Search improvements and bug fixes

* Resets tab to all on search

* Fix index bug with tabs

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/i18n/locale/en/search.json

@@ -14,7 +14,7 @@
     "EMPTY_STATE": "No %{item} found for query '%{query}'",
     "EMPTY_STATE_FULL": "No results found for query '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ to focus",
-    "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
+    "INPUT_PLACEHOLDER": "Type 3 or more characters to search",
     "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results. ",
     "BOT_LABEL": "Bot",
     "READ_MORE": "Read more",

app/javascript/dashboard/modules/search/components/SearchTabs.vue

@@ -18,12 +18,23 @@ export default {
       type: Array,
       default: () => [],
     },
+    selectedTab: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
       activeTab: 0,
     };
   },
+  watch: {
+    selectedTab(value, oldValue) {
+      if (value !== oldValue) {
+        this.activeTab = this.selectedTab;
+      }
+    },
+  },
   methods: {
     onTabChange(index) {
       this.activeTab = index;

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -17,11 +17,12 @@
         <search-tabs
           v-if="query"
           :tabs="tabs"
+          :selected-tab="activeTabIndex"
           @tab-change="tab => (selectedTab = tab)"
         />
       </header>
       <div class="search-results">
-        <div v-if="all.length">
+        <div v-if="showResultsSection">
           <search-result-contacts-list
             v-if="filterContacts"
             :is-fetching="uiFlags.contact.isFetching"
@@ -46,7 +47,7 @@
             :show-title="isSelectedTabAll"
           />
         </div>
-        <div v-else-if="showEmptySearchResults && !all.length" class="empty">
+        <div v-else-if="showEmptySearchResults" class="empty">
           <fluent-icon icon="info" size="16px" class="icon" />
           <p class="empty-state__text">
             {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
@@ -157,9 +158,23 @@ export default {
         },
       ];
     },
+    activeTabIndex() {
+      const index = this.tabs.findIndex(tab => tab.key === this.selectedTab);
+      return index >= 0 ? index : 0;
+    },
     showEmptySearchResults() {
       return (
-        this.totalSearchResultsCount === 0 && this.uiFlags.isSearchCompleted
+        this.totalSearchResultsCount === 0 &&
+        this.uiFlags.isSearchCompleted &&
+        !this.uiFlags.isFetching &&
+        this.query
+      );
+    },
+    showResultsSection() {
+      return (
+        (this.uiFlags.isSearchCompleted &&
+          this.totalSearchResultsCount !== 0) ||
+        this.uiFlags.isFetching
       );
     },
     isSelectedTabAll() {
@@ -175,6 +190,7 @@ export default {
   },
   methods: {
     onSearch(q) {
+      this.selectedTab = 'all';
       this.query = q;
       if (!q) {
         this.$store.dispatch('conversationSearch/clearSearchResults');

app/javascript/dashboard/store/modules/conversationSearch.js

@@ -61,9 +61,11 @@ export const actions = {
       isSearchCompleted: false,
     });
     try {
-      dispatch('contactSearch', { q });
+      await Promise.all([
-      dispatch('conversationSearch', { q });
+        dispatch('contactSearch', { q }),
-      dispatch('messageSearch', { q });
+        dispatch('conversationSearch', { q }),
+        dispatch('messageSearch', { q }),
+      ]);
     } catch (error) {
       // Ignore error
     } finally {