correctly show the dropdown with `t` keypress

added arrow key navigation in the dropdown
enter & click open the file
highlight occurrences of the searched text in the drppdown item
fixed some performance issues when rendering
limit the dropdown items to a maximum of 20 - this may change to more
depending on other performance changes

1 files changed, 45 insertions, 5 deletions

diff --git a/app/assets/javascripts/ide/components/file_finder/item.vue b/app/assets/javascripts/ide/components/file_finder/item.vue
index 482bfb96d93..4003f72f1ac 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 fuzzaldrinPlus from 'fuzzaldrin-plus';
 import FileIcon from '../../../vue_shared/components/file_icon.vue';
 
 export default {
@@ -10,14 +11,42 @@ export default {
       type: Object,
       required: true,
     },
+    focused: {
+      type: Boolean,
+      required: true,
+    },
+    searchText: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    clickRow() {
+      this.$emit('click', this.file);
+    },
+    highlightText(text) {
+      const occurrences = fuzzaldrinPlus.match(text, this.searchText);
+
+      return text
+        .split('')
+        .map(
+          (char, i) =>
+            `<span class="${occurrences.indexOf(i) >= 0 ? 'highlighted' : ''}">${char}</span>`,
+        )
+        .join('');
+    },
   },
 };
 </script>
 
 <template>
   <a
-    href=""
+    href="#"
     class="diff-changed-file"
+    :class="{
+      'is-focused': focused,
+    }"
+    @click.prevent="clickRow"
   >
     <file-icon
       :file-name="file.name"
@@ -25,12 +54,23 @@ export default {
       css-classes="diff-file-changed-icon append-right-8"
     />
     <span class="diff-changed-file-content append-right-8">
-      <strong class="diff-changed-file-name">
-        {{ file.name }}
+      <strong
+        class="diff-changed-file-name"
+        v-html="highlightText(this.file.name)"
+      >
       </strong>
-      <span class="diff-changed-file-path prepend-top-5">
-        {{ file.path }}
+      <span
+        class="diff-changed-file-path prepend-top-5"
+        v-html="highlightText(this.file.path)"
+      >
       </span>
     </span>
   </a>
 </template>
+
+<style>
+.highlighted {
+  color: #1b69b6;
+  font-weight: 600;
+}
+</style>