Recent search history for issues

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/27262

8 files changed, 282 insertions, 11 deletions

diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
new file mode 100644
index 00000000000..9126422b335
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
@@ -0,0 +1,87 @@
+import eventHub from '../event_hub';
+
+export default {
+  name: 'RecentSearchesDropdownContent',
+
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    processedItems() {
+      return this.items.map((item) => {
+        const { tokens, searchToken }
+          = gl.FilteredSearchTokenizer.processTokens(item);
+
+        const resultantTokens = tokens.map(token => ({
+          prefix: `${token.key}:`,
+          suffix: `${token.symbol}${token.value}`,
+        }));
+
+        return {
+          text: item,
+          tokens: resultantTokens,
+          searchToken,
+        };
+      });
+    },
+    hasItems() {
+      return this.items.length > 0;
+    },
+  },
+
+  methods: {
+    onItemActivated(text) {
+      eventHub.$emit('recentSearchesItemSelected', text);
+    },
+    onRequestClearRecentSearches(e) {
+      // Stop the dropdown from closing
+      e.stopPropagation();
+
+      eventHub.$emit('requestClearRecentSearches');
+    },
+  },
+
+  template: `
+    <div>
+      <ul v-if="hasItems">
+        <li
+          v-for="(item, index) in processedItems"
+          :key="index">
+          <button
+            type="button"
+            class="filtered-search-history-dropdown-item"
+            @click="onItemActivated(item.text)">
+            <span>
+              <span
+                v-for="(token, tokenIndex) in item.tokens"
+                class="filtered-search-history-dropdown-token">
+                <span class="name">{{ token.prefix }}</span><span class="value">{{ token.suffix }}</span>
+              </span>
+            </span>
+            <span class="filtered-search-history-dropdown-search-token">
+              {{ item.searchToken }}
+            </span>
+          </button>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <button
+            type="button"
+            class="filtered-search-history-clear-button"
+            @click="onRequestClearRecentSearches($event)">
+            Clear recent searches
+          </button>
+        </li>
+      </ul>
+      <div
+        v-else
+        class="dropdown-info-note">
+        You don't have any recent searches
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 98dcb697af9..64d7153e547 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -56,7 +56,7 @@ require('./filtered_search_dropdown');
     renderContent() {
       const dropdownData = [];
 
-      [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+      [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
         const { icon, hint, tag, type } = dropdownMenu.dataset;
         if (icon && hint && tag) {
           dropdownData.push(
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 432b0c0dfd2..6c5c20447f7 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -129,7 +129,9 @@ import FilteredSearchContainer from './container';
         }
       });
 
-      return values.join(' ');
+      return values
+        .map(value => value.trim())
+        .join(' ');
     }
 
     static getSearchInput(filteredSearchInput) {
diff --git a/app/assets/javascripts/filtered_search/event_hub.js b/app/assets/javascripts/filtered_search/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 22352950452..2a8a6b81b3f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,18 +1,56 @@
+/* global Flash */
+
 import FilteredSearchContainer from './container';
+import RecentSearchesRoot from './recent_searches_root';
+import RecentSearchesStore from './stores/recent_searches_store';
+import RecentSearchesService from './services/recent_searches_service';
+import eventHub from './event_hub';
 
 (() => {
   class FilteredSearchManager {
     constructor(page) {
       this.container = FilteredSearchContainer.container;
       this.filteredSearchInput = this.container.querySelector('.filtered-search');
+      this.filteredSearchInputForm = this.filteredSearchInput.form;
       this.clearSearchButton = this.container.querySelector('.clear-search');
       this.tokensContainer = this.container.querySelector('.tokens-container');
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
+      this.recentSearchesStore = new RecentSearchesStore();
+      let recentSearchesKey = 'issue-recent-searches';
+      if (page === 'merge_requests') {
+        recentSearchesKey = 'merge-request-recent-searches';
+      }
+      this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
+
+      // Fetch recent searches from localStorage
+      this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
+        .catch(() => {
+          // eslint-disable-next-line no-new
+          new Flash('An error occured while parsing recent searches');
+          // Gracefully fail to empty array
+          return [];
+        })
+        .then((searches) => {
+          // Put any searches that may have come in before
+          // we fetched the saved searches ahead of the already saved ones
+          const resultantSearches = this.recentSearchesStore.setRecentSearches(
+            this.recentSearchesStore.state.recentSearches.concat(searches),
+          );
+          this.recentSearchesService.save(resultantSearches);
+        });
+
       if (this.filteredSearchInput) {
         this.tokenizer = gl.FilteredSearchTokenizer;
         this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
 
+        this.recentSearchesRoot = new RecentSearchesRoot(
+          this.recentSearchesStore,
+          this.recentSearchesService,
+          document.querySelector('.js-filtered-search-history-dropdown'),
+        );
+        this.recentSearchesRoot.init();
+
         this.bindEvents();
         this.loadSearchParamsFromURL();
         this.dropdownManager.setDropdown();
@@ -25,6 +63,10 @@ import FilteredSearchContainer from './container';
     cleanup() {
       this.unbindEvents();
       document.removeEventListener('beforeunload', this.cleanupWrapper);
+
+      if (this.recentSearchesRoot) {
+        this.recentSearchesRoot.destroy();
+      }
     }
 
     bindEvents() {
@@ -34,7 +76,7 @@ import FilteredSearchContainer from './container';
       this.handleInputPlaceholderWrapper = this.handleInputPlaceholder.bind(this);
       this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
-      this.clearSearchWrapper = this.clearSearch.bind(this);
+      this.onClearSearchWrapper = this.onClearSearch.bind(this);
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
       this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
       this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
@@ -42,8 +84,8 @@ import FilteredSearchContainer from './container';
       this.tokenChange = this.tokenChange.bind(this);
       this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
       this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
+      this.onrecentSearchesItemSelectedWrapper = this.onrecentSearchesItemSelected.bind(this);
 
-      this.filteredSearchInputForm = this.filteredSearchInput.form;
       this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
@@ -56,11 +98,12 @@ import FilteredSearchContainer from './container';
       this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
       this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
       this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+      this.clearSearchButton.addEventListener('click', this.onClearSearchWrapper);
       document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.addEventListener('click', this.unselectEditTokensWrapper);
       document.addEventListener('click', this.removeInputContainerFocusWrapper);
       document.addEventListener('keydown', this.removeSelectedTokenWrapper);
+      eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
     }
 
     unbindEvents() {
@@ -76,11 +119,12 @@ import FilteredSearchContainer from './container';
       this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
       this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
       this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+      this.clearSearchButton.removeEventListener('click', this.onClearSearchWrapper);
       document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.removeEventListener('click', this.unselectEditTokensWrapper);
       document.removeEventListener('click', this.removeInputContainerFocusWrapper);
       document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
+      eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
     }
 
     checkForBackspace(e) {
@@ -131,7 +175,7 @@ import FilteredSearchContainer from './container';
     }
 
     addInputContainerFocus() {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
 
       if (inputContainer) {
         inputContainer.classList.add('focus');
@@ -139,7 +183,7 @@ import FilteredSearchContainer from './container';
     }
 
     removeInputContainerFocus(e) {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
@@ -161,7 +205,7 @@ import FilteredSearchContainer from './container';
     }
 
     unselectEditTokens(e) {
-      const inputContainer = this.container.querySelector('.filtered-search-input-container');
+      const inputContainer = this.container.querySelector('.filtered-search-box');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementTokensContainer = e.target.classList.contains('tokens-container');
@@ -215,9 +259,12 @@ import FilteredSearchContainer from './container';
       }
     }
 
-    clearSearch(e) {
+    onClearSearch(e) {
       e.preventDefault();
+      this.clearSearch();
+    }
 
+    clearSearch() {
       this.filteredSearchInput.value = '';
 
       const removeElements = [];
@@ -289,6 +336,17 @@ import FilteredSearchContainer from './container';
       this.search();
     }
 
+    saveCurrentSearchQuery() {
+      // Don't save before we have fetched the already saved searches
+      this.fetchingRecentSearchesPromise.then(() => {
+        const searchQuery = gl.DropdownUtils.getSearchQuery();
+        if (searchQuery.length > 0) {
+          const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
+          this.recentSearchesService.save(resultantSearches);
+        }
+      });
+    }
+
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
       const usernameParams = this.getUsernameParams();
@@ -343,6 +401,8 @@ import FilteredSearchContainer from './container';
         }
       });
 
+      this.saveCurrentSearchQuery();
+
       if (hasFilteredSearch) {
         this.clearSearchButton.classList.remove('hidden');
         this.handleInputPlaceholder();
@@ -351,8 +411,12 @@ import FilteredSearchContainer from './container';
 
     search() {
       const paths = [];
+      const searchQuery = gl.DropdownUtils.getSearchQuery();
+
+      this.saveCurrentSearchQuery();
+
       const { tokens, searchToken }
-        = this.tokenizer.processTokens(gl.DropdownUtils.getSearchQuery());
+        = this.tokenizer.processTokens(searchQuery);
       const currentState = gl.utils.getParameterByName('state') || 'opened';
       paths.push(`state=${currentState}`);
 
@@ -416,6 +480,13 @@ import FilteredSearchContainer from './container';
         currentDropdownRef.dispatchInputEvent();
       }
     }
+
+    onrecentSearchesItemSelected(text) {
+      this.clearSearch();
+      this.filteredSearchInput.value = text;
+      this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
+      this.search();
+    }
   }
 
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
new file mode 100644
index 00000000000..4e38409e12a
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content';
+import eventHub from './event_hub';
+
+class RecentSearchesRoot {
+  constructor(
+    recentSearchesStore,
+    recentSearchesService,
+    wrapperElement,
+  ) {
+    this.store = recentSearchesStore;
+    this.service = recentSearchesService;
+    this.wrapperElement = wrapperElement;
+  }
+
+  init() {
+    this.bindEvents();
+    this.render();
+  }
+
+  bindEvents() {
+    this.onRequestClearRecentSearchesWrapper = this.onRequestClearRecentSearches.bind(this);
+
+    eventHub.$on('requestClearRecentSearches', this.onRequestClearRecentSearchesWrapper);
+  }
+
+  unbindEvents() {
+    eventHub.$off('requestClearRecentSearches', this.onRequestClearRecentSearchesWrapper);
+  }
+
+  render() {
+    this.vm = new Vue({
+      el: this.wrapperElement,
+      data: this.store.state,
+      template: `
+        <recent-searches-dropdown-content
+          :items="recentSearches" />
+      `,
+      components: {
+        'recent-searches-dropdown-content': RecentSearchesDropdownContent,
+      },
+    });
+  }
+
+  onRequestClearRecentSearches() {
+    const resultantSearches = this.store.setRecentSearches([]);
+    this.service.save(resultantSearches);
+  }
+
+  destroy() {
+    this.unbindEvents();
+    if (this.vm) {
+      this.vm.$destroy();
+    }
+  }
+
+}
+
+export default RecentSearchesRoot;
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service.js b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
new file mode 100644
index 00000000000..3e402d5aed0
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
@@ -0,0 +1,26 @@
+class RecentSearchesService {
+  constructor(localStorageKey = 'issuable-recent-searches') {
+    this.localStorageKey = localStorageKey;
+  }
+
+  fetch() {
+    const input = window.localStorage.getItem(this.localStorageKey);
+
+    let searches = [];
+    if (input && input.length > 0) {
+      try {
+        searches = JSON.parse(input);
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }
+
+    return Promise.resolve(searches);
+  }
+
+  save(searches = []) {
+    window.localStorage.setItem(this.localStorageKey, JSON.stringify(searches));
+  }
+}
+
+export default RecentSearchesService;
diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
new file mode 100644
index 00000000000..066be69766a
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
@@ -0,0 +1,23 @@
+import _ from 'underscore';
+
+class RecentSearchesStore {
+  constructor(initialState = {}) {
+    this.state = Object.assign({
+      recentSearches: [],
+    }, initialState);
+  }
+
+  addRecentSearch(newSearch) {
+    this.setRecentSearches([newSearch].concat(this.state.recentSearches));
+
+    return this.state.recentSearches;
+  }
+
+  setRecentSearches(searches = []) {
+    const trimmedSearches = searches.map(search => search.trim());
+    this.state.recentSearches = _.uniq(trimmedSearches).slice(0, 5);
+    return this.state.recentSearches;
+  }
+}
+
+export default RecentSearchesStore;