Move RecentSearchesDropdownContent vue component

app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js → app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue

+<script>
 import eventHub from '../event_hub';
 import FilteredSearchTokenizer from '../filtered_search_tokenizer';
 
 export default {
   name: 'RecentSearchesDropdownContent',
-
   props: {
     items: {
       type: Array,
@@ -19,7 +19,6 @@ export default {
       required: true,
     },
   },
-
   computed: {
     processedItems() {
       return this.items.map((item) => {
@@ -42,7 +41,6 @@ export default {
       return this.items.length > 0;
     },
   },
-
   methods: {
     onItemActivated(text) {
       eventHub.$emit('recentSearchesItemSelected', text);
@@ -54,8 +52,9 @@ export default {
       eventHub.$emit('requestClearRecentSearches');
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <div>
     <div
       v-if="!isLocalStorageAvailable"
@@ -65,16 +64,20 @@ export default {
     <ul v-else-if="hasItems">
       <li
         v-for="(item, index) in processedItems"
-          :key="index">
+        :key="`processed-items-${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>
+              class="filtered-search-history-dropdown-token"
+              v-for="(token, index) in item.tokens"
+              :key="`dropdown-token-${index}`"
+            >
+              <span class="name">{{ token.prefix }}</span>
+              <span class="value">{{ token.suffix }}</span>
             </span>
           </span>
           <span class="filtered-search-history-dropdown-search-token">
@@ -98,5 +101,4 @@ export default {
       You don't have any recent searches
     </div>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/filtered_search/recent_searches_root.js

 import Vue from 'vue';
-import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content';
+import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content.vue';
 import eventHub from './event_hub';
 
 class RecentSearchesRoot {
@@ -33,7 +33,7 @@ class RecentSearchesRoot {
     this.vm = new Vue({
       el: this.wrapperElement,
       components: {
-        'recent-searches-dropdown-content': RecentSearchesDropdownContent,
+        RecentSearchesDropdownContent,
       },
       data() { return state; },
       template: `

changelogs/unreleased/refactor-move-filtered-search-vue-component.yml

+---
+title: Move RecentSearchesDropdownContent vue component
+merge_request: 16951
+author: George Tsiolis
+type: performance

spec/features/issues/filtered_search/recent_searches_spec.rb

@@ -39,8 +39,8 @@ describe 'Recent searches', :js do
 
     items = all('.filtered-search-history-dropdown-item', visible: false, count: 2)
 
-    expect(items[0].text).to eq('label:~qux garply')
-    expect(items[1].text).to eq('label:~foo bar')
+    expect(items[0].text).to eq('label: ~qux garply')
+    expect(items[1].text).to eq('label: ~foo bar')
   end
 
   it 'saved recent searches are restored last on the list' do

spec/javascripts/filtered_search/components/recent_searches_dropdown_content_spec.js

 import Vue from 'vue';
 import eventHub from '~/filtered_search/event_hub';
-import RecentSearchesDropdownContent from '~/filtered_search/components/recent_searches_dropdown_content';
-
+import RecentSearchesDropdownContent from '~/filtered_search/components/recent_searches_dropdown_content.vue';
 import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
 
 const createComponent = (propsData) => {