From cae3ac94cd12500af6f8557859e16425842a4d31 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 14 Mar 2023 13:09:43 +0530
Subject: [PATCH] feat: Search improvements for conversations  (#6645)

* feat: Shows search as a popover

* Reverts search from popover to page

* Fixes review comments on usability

* Fixes keyboard navigation issues
---
 .../dashboard/i18n/locale/en/search.json      |   3 +-
 .../search/components/SearchHeader.vue        |  73 +++++----
 .../modules/search/components/SearchInput.vue |  51 ++++++
 .../components/SearchResultContactItem.vue    |   2 +-
 .../SearchResultConversationItem.vue          |   2 +-
 .../search/components/SearchResultSection.vue |  13 +-
 .../modules/search/components/SearchTabs.vue  |   4 +-
 .../modules/search/components/SearchView.vue  | 148 +++++++++++-------
 .../conversation/search/PopOverSearch.vue     |   2 +-
 .../store/modules/conversationSearch.js       |   3 +
 10 files changed, 203 insertions(+), 98 deletions(-)
 create mode 100644 app/javascript/dashboard/modules/search/components/SearchInput.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/search.json b/app/javascript/dashboard/i18n/locale/en/search.json
index f3823f134..418572c0c 100644
--- a/app/javascript/dashboard/i18n/locale/en/search.json
+++ b/app/javascript/dashboard/i18n/locale/en/search.json
@@ -14,7 +14,8 @@
     "EMPTY_STATE": "No %{item} found for query '%{query}'",
     "EMPTY_STATE_FULL": "No results found for query '%{query}'",
     "PLACEHOLDER_KEYBINDING": "/ to focus",
-    "INPUT_PLACEHOLDER": "Search message content, contact name, email or phone or conversations",
+    "INPUT_PLACEHOLDER": "Search messages, contacts or conversations",
+    "EMPTY_STATE_DEFAULT": "Search by conversation id, email, phone number, messages for better search results.",
     "BOT_LABEL": "Bot",
     "READ_MORE": "Read more",
     "WROTE": "wrote:"
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index ae0d786d9..aa85eddab 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="input-container">
+  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
     <div class="icon-container">
       <fluent-icon icon="search" class="icon" aria-hidden="true" />
     </div>
@@ -8,11 +8,15 @@
       type="search"
       :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
       :value="searchQuery"
+      @focus="onFocus"
+      @blur="onBlur"
       @input="debounceSearch"
     />
-    <div class="key-binding">
-      <span>{{ $t('SEARCH.PLACEHOLDER_KEYBINDING') }}</span>
-    </div>
+    <woot-label
+      :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
+      :show-close="false"
+      small
+    />
   </div>
 </template>
 
@@ -21,6 +25,7 @@ export default {
   data() {
     return {
       searchQuery: '',
+      isInputFocused: false,
     };
   },
   mounted() {
@@ -35,6 +40,12 @@ export default {
       if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
         e.preventDefault();
         this.$refs.searchInput.focus();
+      } else if (
+        e.key === 'Escape' &&
+        document.activeElement.tagName === 'INPUT'
+      ) {
+        e.preventDefault();
+        this.$refs.searchInput.blur();
       }
     },
     debounceSearch(e) {
@@ -43,56 +54,50 @@ export default {
       this.debounce = setTimeout(async () => {
         if (this.searchQuery.length > 2 || this.searchQuery.match(/^[0-9]+$/)) {
           this.$emit('search', this.searchQuery);
+        } else {
+          this.$emit('search', '');
         }
       }, 500);
     },
+    onFocus() {
+      this.isInputFocused = true;
+    },
+    onBlur() {
+      this.isInputFocused = false;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import 'app/javascript/dashboard/assets/scss/_mixins.scss';
 .input-container {
   position: relative;
-  border-radius: var(--border-radius-normal);
+  display: flex;
+  align-items: center;
+  padding: var(--space-small) var(--space-normal);
+  border-bottom: 1px solid var(--s-100);
+  transition: border-bottom 0.2s ease-in-out;
+
   input[type='search'] {
+    @include ghost-input;
     width: 100%;
-    padding-left: calc(var(--space-large) + var(--space-small));
-    margin-bottom: 0;
-    padding-right: var(--space-mega);
-    &:focus {
-      .icon {
-        color: var(--w-500) !important;
-      }
+    margin: 0;
+  }
+
+  &.is-focused {
+    border-bottom: 1px solid var(--w-100);
+
+    .icon {
+      color: var(--w-400);
     }
   }
 }
 .icon-container {
-  padding-left: var(--space-small);
   display: flex;
   align-items: center;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
   .icon {
     color: var(--s-400);
   }
 }
-.key-binding {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  padding: var(--space-small) var(--space-small) 0 var(--space-small);
-  span {
-    color: var(--s-400);
-    font-weight: var(--font-weight-medium);
-    font-size: calc(var(--space-slab) + var(--space-micro));
-    padding: 0 var(--space-small);
-    border: 1px solid var(--s-100);
-    border-radius: var(--border-radius-normal);
-    display: inline-flex;
-    align-items: center;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
new file mode 100644
index 000000000..6dca5239b
--- /dev/null
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="search-input-box">
+    <woot-button
+      class="hollow"
+      size="small"
+      color-scheme="secondary"
+      is-expanded
+    >
+      <div class="search-input">
+        <fluent-icon icon="search" size="14px" class="search--icon" />
+        <span class="text-ellipsis search-placeholder">
+          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
+        </span>
+      </div>
+    </woot-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.search-input-box {
+  padding: var(--space-small);
+}
+.search--icon {
+  flex-shrink: 0;
+  color: var(--s-500);
+}
+.search-placeholder {
+  color: var(--s-500);
+}
+
+.search-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-smaller);
+}
+</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index c4c4d157f..c35651356 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -64,7 +64,7 @@ export default {
   }
 }
 .contact-details {
-  margin-left: var(--space-normal);
+  margin-left: var(--space-small);
 }
 .name {
   margin: 0;
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index 2c47a4989..8341f69bd 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -113,7 +113,7 @@ export default {
   margin-left: var(--space-smaller);
 }
 .conversation-details {
-  margin-left: var(--space-normal);
+  margin-left: var(--space-small);
   flex-grow: 1;
   min-width: 0;
 }
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index a3295c0d6..eab6f920c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,6 +1,6 @@
 <template>
-  <section>
-    <div class="label-container">
+  <section class="result-section">
+    <div class="header">
       <h3 class="text-block-title">{{ title }}</h3>
     </div>
     <slot />
@@ -38,17 +38,21 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.result-section {
+  margin-bottom: var(--space-normal);
+}
 .search-list {
   list-style: none;
   margin: 0;
   padding: var(--spacing-normal) 0;
 }
-.label-container {
+.header {
   position: sticky;
   top: 0;
-  padding: var(--space-small) 0;
+  padding: var(--space-small);
   z-index: 50;
   background: var(--white);
+  margin-bottom: var(--space-micro);
 }
 
 .empty {
@@ -56,6 +60,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: var(--space-medium) var(--space-normal);
+  margin: 0 var(--space-small);
   background: var(--s-25);
   border-radius: var(--border-radius-medium);
   .icon {
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index fa6944562..7d0d53063 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -34,7 +34,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .tab-container {
-  margin-left: var(--space-minus-normal);
-  margin-top: var(--space-small);
+  margin-top: var(--space-smaller);
+  border-bottom: 1px solid var(--s-50);
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 3d43cddc3..c079b46ae 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -1,46 +1,63 @@
 <template>
-  <section class="search-root">
-    <woot-button
-      color-scheme="secondary"
-      size="large"
-      icon="dismiss"
-      variant="smooth"
-      class="modal--close"
-      @click="onBack"
-    />
-    <header>
-      <search-header @search="search" />
-      <search-tabs :tabs="tabs" @tab-change="tab => (selectedTab = tab)" />
-    </header>
-    <div class="search-results">
-      <woot-loading-state v-if="uiFlags.isFetching" :message="'Searching'" />
-      <div v-else>
-        <div v-if="all.length">
-          <search-result-contacts-list
-            v-if="filterContacts"
-            :contacts="contacts"
-            :query="query"
-          />
-          <search-result-messages-list
-            v-if="filterMessages"
-            :messages="messages"
-            :query="query"
-          />
-          <search-result-conversations-list
-            v-if="filterConversations"
-            :conversations="conversations"
-            :query="query"
-          />
-        </div>
-        <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 }) }}
-          </p>
+  <div class="width-100">
+    <div class="page-header">
+      <woot-button
+        icon="chevron-left"
+        variant="smooth"
+        size="small "
+        class="back-button"
+        @click="onBack"
+      >
+        {{ $t('GENERAL_SETTINGS.BACK') }}
+      </woot-button>
+    </div>
+    <section class="search-root">
+      <header>
+        <search-header @search="onSearch" />
+        <search-tabs
+          v-if="query"
+          :tabs="tabs"
+          @tab-change="tab => (selectedTab = tab)"
+        />
+      </header>
+      <div class="search-results">
+        <woot-loading-state v-if="uiFlags.isFetching" :message="'Searching'" />
+        <div v-else>
+          <div v-if="all.length">
+            <search-result-contacts-list
+              v-if="filterContacts"
+              :contacts="contacts"
+              :query="query"
+            />
+            <search-result-messages-list
+              v-if="filterMessages"
+              :messages="messages"
+              :query="query"
+            />
+            <search-result-conversations-list
+              v-if="filterConversations"
+              :conversations="conversations"
+              :query="query"
+            />
+          </div>
+          <div v-else-if="showEmptySearchResults && !all.length" class="empty">
+            <fluent-icon icon="info" size="16px" class="icon" />
+            <p class="empty-state__text">
+              {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+            </p>
+          </div>
+          <div v-else class="empty text-center">
+            <p class="text-center">
+              <fluent-icon icon="search" size="24px" class="icon" />
+            </p>
+            <p class="empty-state__text">
+              {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>
 
 <script>
@@ -51,6 +68,7 @@ import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
 import { isEmptyObject } from 'dashboard/helper/commons.js';
 
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 export default {
@@ -61,12 +79,14 @@ export default {
     SearchResultConversationsList,
     SearchResultMessagesList,
   },
+  mixins: [clickaway],
   data() {
     return {
       selectedTab: 'all',
       query: '',
     };
   },
+
   computed: {
     ...mapGetters({
       fullSearchRecords: 'conversationSearch/getFullSearchRecords',
@@ -147,48 +167,68 @@ export default {
       );
     },
   },
+  beforeDestroy() {
+    this.query = '';
+    this.$store.dispatch('conversationSearch/clearSearchResults');
+  },
+  mounted() {
+    this.$store.dispatch('conversationSearch/clearSearchResults');
+  },
   methods: {
-    search(q) {
+    onSearch(q) {
       this.query = q;
+      if (!q) {
+        this.$store.dispatch('conversationSearch/clearSearchResults');
+        return;
+      }
       this.$track(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
       this.$store.dispatch('conversationSearch/fullSearch', { q });
     },
     onBack() {
-      this.$router.push({ name: 'home' });
+      if (window.history.length > 2) {
+        this.$router.go(-1);
+      } else {
+        this.$router.push({ name: 'home' });
+      }
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.page-header {
+  display: flex;
+  padding: var(--space-normal);
+}
 .search-root {
-  max-width: 800px;
-  width: 100%;
   margin: 0 auto;
-  height: 100%;
+  max-width: 64rem;
+  min-height: 48rem;
+  width: 100%;
+  height: fit-content;
+  box-shadow: var(--shadow);
   display: flex;
   position: relative;
-  padding: var(--space-normal);
   flex-direction: column;
+  background: white;
+  border-radius: var(--border-radius-large);
+  margin-top: var(--space-large);
+  border-top: 1px solid var(--s-25);
   .search-results {
     flex-grow: 1;
     height: 100%;
+    max-height: 80vh;
     overflow-y: auto;
-    margin-top: var(--space-normal);
+    padding: 0 var(--space-small);
   }
 }
-.modal--close {
-  position: fixed;
-  right: var(--space-small);
-  top: var(--space-small);
-}
 
 .empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: var(--space-medium) var(--space-normal);
-  background: var(--s-25);
   border-radius: var(--border-radius-medium);
   .icon {
     color: var(--s-500);
@@ -196,7 +236,7 @@ export default {
   .empty-state__text {
     text-align: center;
     color: var(--s-500);
-    margin: 0 var(--space-small);
+    margin: var(--space-small);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 1c5072dd4..9fae6d425 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -2,7 +2,7 @@
   <div class="search-wrap">
     <div class="search" :class="{ 'is-active': showSearchBox }">
       <woot-sidemenu-icon />
-      <router-link :to="searchUrl" class="search--link" replace>
+      <router-link :to="searchUrl" class="search--link">
         <div class="icon">
           <fluent-icon icon="search" class="search--icon" size="16" />
         </div>
diff --git a/app/javascript/dashboard/store/modules/conversationSearch.js b/app/javascript/dashboard/store/modules/conversationSearch.js
index 7c1e97d8c..15b15e474 100644
--- a/app/javascript/dashboard/store/modules/conversationSearch.js
+++ b/app/javascript/dashboard/store/modules/conversationSearch.js
@@ -55,6 +55,9 @@ export const actions = {
       commit(types.FULL_SEARCH_SET_UI_FLAG, { isFetching: false });
     }
   },
+  async clearSearchResults({ commit }) {
+    commit(types.FULL_SEARCH_SET, {});
+  },
 };
 
 export const mutations = {