added specs to store

added clear button to search input

3 files changed, 28 insertions, 4 deletions

diff --git a/app/assets/javascripts/ide/components/file_finder/index.vue b/app/assets/javascripts/ide/components/file_finder/index.vue
index 5049588e0a4..864c9234979 100644
--- a/app/assets/javascripts/ide/components/file_finder/index.vue
+++ b/app/assets/javascripts/ide/components/file_finder/index.vue
@@ -42,6 +42,9 @@ export default {
     listHeight() {
       return this.filteredBlobsLength ? 55 : 33;
     },
+    showClearInputButton() {
+      return this.searchText.trim() !== '';
+    },
   },
   watch: {
     fileFindVisible() {
@@ -61,6 +64,13 @@ export default {
   },
   methods: {
     ...mapActions(['toggleFileFinder']),
+    clearSearchInput() {
+      this.searchText = '';
+
+      this.$nextTick(() => {
+        this.$refs.searchInput.focus();
+      });
+    },
     onKeydown(e) {
       switch (e.keyCode) {
         case 38:
@@ -129,6 +139,18 @@ export default {
         <i
           aria-hidden="true"
           class="fa fa-search dropdown-input-search"
+          :class="{
+            hidden: showClearInputButton
+          }"
+        ></i>
+        <i
+          role="button"
+          aria-hidden="true"
+          class="fa fa-times dropdown-input-clear"
+          :class="{
+            show: showClearInputButton
+          }"
+          @click="clearSearchInput"
         ></i>
       </div>
       <div>
diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 2f72d6799b6..af4d07ef543 100644
--- a/app/assets/javascripts/ide/components/file_finder/item.vue
+++ b/app/assets/javascripts/ide/components/file_finder/item.vue
@@ -1,4 +1,5 @@
 <script>
+import { escape } from 'underscore';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '../changed_file_icon.vue';
@@ -29,10 +30,11 @@ export default {
       this.$emit('click', this.file);
     },
     highlightText(text, addEllipsis) {
+      const escapedText = escape(text);
       const maxText =
-        text.length < MAX_PATH_LENGTH || !addEllipsis
-          ? text
-          : `...${text.substr(text.length - MAX_PATH_LENGTH)}`;
+        escapedText.length < MAX_PATH_LENGTH || !addEllipsis
+          ? escapedText
+          : `...${escapedText.substr(escapedText.length - MAX_PATH_LENGTH)}`;
       const occurrences = fuzzaldrinPlus.match(maxText, this.searchText);
 
       return maxText
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index d64908ea971..742bd40f25d 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -54,4 +54,4 @@ export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
 export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
 
-export const TOGGLE_FILE_FINDER = 'SHOW_FILE_FINDER';
+export const TOGGLE_FILE_FINDER = 'TOGGLE_FILE_FINDER';