Commit c4b4792e authored by Clement Ho's avatar Clement Ho

Merge branch 'refactor/move-filtered-search-vue-component' into 'master'

Move RecentSearchesDropdownContent vue component

See merge request gitlab-org/gitlab-ce!16951
parents 6047a99e 7fc090b7
<script>
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import FilteredSearchTokenizer from '../filtered_search_tokenizer'; import FilteredSearchTokenizer from '../filtered_search_tokenizer';
export default { export default {
name: 'RecentSearchesDropdownContent', name: 'RecentSearchesDropdownContent',
props: { props: {
items: { items: {
type: Array, type: Array,
...@@ -19,7 +19,6 @@ export default { ...@@ -19,7 +19,6 @@ export default {
required: true, required: true,
}, },
}, },
computed: { computed: {
processedItems() { processedItems() {
return this.items.map((item) => { return this.items.map((item) => {
...@@ -42,7 +41,6 @@ export default { ...@@ -42,7 +41,6 @@ export default {
return this.items.length > 0; return this.items.length > 0;
}, },
}, },
methods: { methods: {
onItemActivated(text) { onItemActivated(text) {
eventHub.$emit('recentSearchesItemSelected', text); eventHub.$emit('recentSearchesItemSelected', text);
...@@ -54,49 +52,53 @@ export default { ...@@ -54,49 +52,53 @@ export default {
eventHub.$emit('requestClearRecentSearches'); eventHub.$emit('requestClearRecentSearches');
}, },
}, },
};
template: ` </script>
<div> <template>
<div <div>
v-if="!isLocalStorageAvailable" <div
class="dropdown-info-note"> v-if="!isLocalStorageAvailable"
This feature requires local storage to be enabled class="dropdown-info-note">
</div> This feature requires local storage to be enabled
<ul v-else-if="hasItems"> </div>
<li <ul v-else-if="hasItems">
v-for="(item, index) in processedItems" <li
:key="index"> v-for="(item, index) in processedItems"
<button :key="`processed-items-${index}`"
type="button" >
class="filtered-search-history-dropdown-item" <button
@click="onItemActivated(item.text)"> type="button"
<span> class="filtered-search-history-dropdown-item"
<span @click="onItemActivated(item.text)">
v-for="(token, tokenIndex) in item.tokens" <span>
class="filtered-search-history-dropdown-token"> <span
<span class="name">{{ token.prefix }}</span><span class="value">{{ token.suffix }}</span> class="filtered-search-history-dropdown-token"
</span> v-for="(token, index) in item.tokens"
</span> :key="`dropdown-token-${index}`"
<span class="filtered-search-history-dropdown-search-token"> >
{{ item.searchToken }} <span class="name">{{ token.prefix }}</span>
<span class="value">{{ token.suffix }}</span>
</span> </span>
</button> </span>
</li> <span class="filtered-search-history-dropdown-search-token">
<li class="divider"></li> {{ item.searchToken }}
<li> </span>
<button </button>
type="button" </li>
class="filtered-search-history-clear-button" <li class="divider"></li>
@click="onRequestClearRecentSearches($event)"> <li>
Clear recent searches <button
</button> type="button"
</li> class="filtered-search-history-clear-button"
</ul> @click="onRequestClearRecentSearches($event)">
<div Clear recent searches
v-else </button>
class="dropdown-info-note"> </li>
You don't have any recent searches </ul>
</div> <div
v-else
class="dropdown-info-note">
You don't have any recent searches
</div> </div>
`, </div>
}; </template>
import Vue from 'vue'; 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'; import eventHub from './event_hub';
class RecentSearchesRoot { class RecentSearchesRoot {
...@@ -33,7 +33,7 @@ class RecentSearchesRoot { ...@@ -33,7 +33,7 @@ class RecentSearchesRoot {
this.vm = new Vue({ this.vm = new Vue({
el: this.wrapperElement, el: this.wrapperElement,
components: { components: {
'recent-searches-dropdown-content': RecentSearchesDropdownContent, RecentSearchesDropdownContent,
}, },
data() { return state; }, data() { return state; },
template: ` template: `
......
---
title: Move RecentSearchesDropdownContent vue component
merge_request: 16951
author: George Tsiolis
type: performance
...@@ -39,8 +39,8 @@ describe 'Recent searches', :js do ...@@ -39,8 +39,8 @@ describe 'Recent searches', :js do
items = all('.filtered-search-history-dropdown-item', visible: false, count: 2) items = all('.filtered-search-history-dropdown-item', visible: false, count: 2)
expect(items[0].text).to eq('label:~qux garply') expect(items[0].text).to eq('label: ~qux garply')
expect(items[1].text).to eq('label:~foo bar') expect(items[1].text).to eq('label: ~foo bar')
end end
it 'saved recent searches are restored last on the list' do it 'saved recent searches are restored last on the list' do
......
import Vue from 'vue'; import Vue from 'vue';
import eventHub from '~/filtered_search/event_hub'; 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'; import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
const createComponent = (propsData) => { const createComponent = (propsData) => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment