Move RecentSearchesDropdownContent vue component

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

@@ -1,102 +0,0 @@
-import eventHub from '../event_hub';
-import FilteredSearchTokenizer from '../filtered_search_tokenizer';
-
-export default {
-  name: 'RecentSearchesDropdownContent',
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    isLocalStorageAvailable: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    allowedKeys: {
-      type: Array,
-      required: true,
-    },
-  },
-
-  computed: {
-    processedItems() {
-      return this.items.map((item) => {
-        const { tokens, searchToken }
-          = FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
-
-        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>
-      <div
-        v-if="!isLocalStorageAvailable"
-        class="dropdown-info-note">
-        This feature requires local storage to be enabled
-      </div>
-      <ul v-else-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>
-  `,
-};

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

@@ -0,0 +1,104 @@
+<script>
+import eventHub from '../event_hub';
+import FilteredSearchTokenizer from '../filtered_search_tokenizer';
+
+export default {
+  name: 'RecentSearchesDropdownContent',
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    isLocalStorageAvailable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    allowedKeys: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    processedItems() {
+      return this.items.map((item) => {
+        const { tokens, searchToken }
+          = FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
+
+        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');
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div
+      v-if="!isLocalStorageAvailable"
+      class="dropdown-info-note">
+      This feature requires local storage to be enabled
+    </div>
+    <ul v-else-if="hasItems">
+      <li
+        v-for="(item, index) in processedItems"
+        :key="`processed-items-${index}`"
+      >
+        <button
+          type="button"
+          class="filtered-search-history-dropdown-item"
+          @click="onItemActivated(item.text)">
+          <span>
+            <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">
+            {{ 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>
+</template>

app/assets/javascripts/filtered_search/recent_searches_root.js

@@ -1,5 +1,5 @@
 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

@@ -0,0 +1,5 @@
+---
+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

@@ -1,7 +1,6 @@
 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) => {