diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-17 11:59:07 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-17 11:59:07 +0000 |
commit | 8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca (patch) | |
tree | 544930fb309b30317ae9797a9683768705d664c4 /app/assets/javascripts/frequent_items | |
parent | 4b1de649d0168371549608993deac953eb692019 (diff) | |
download | gitlab-ce-8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca.tar.gz |
Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/frequent_items')
6 files changed, 31 insertions, 9 deletions
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue index 61080fb5487..c4f61b839e4 100644 --- a/app/assets/javascripts/frequent_items/components/app.vue +++ b/app/assets/javascripts/frequent_items/components/app.vue @@ -3,7 +3,6 @@ import { mapState, mapActions, mapGetters } from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; import AccessorUtilities from '~/lib/utils/accessor'; import eventHub from '../event_hub'; -import store from '../store'; import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants'; import { isMobile, updateExistingFrequentItem, sanitizeItem } from '../utils'; import FrequentItemsSearchInput from './frequent_items_search_input.vue'; @@ -11,7 +10,6 @@ import FrequentItemsList from './frequent_items_list.vue'; import frequentItemsMixin from './frequent_items_mixin'; export default { - store, components: { FrequentItemsSearchInput, FrequentItemsList, diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue index 1203f389931..3260d768fd9 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue @@ -1,13 +1,18 @@ <script> /* eslint-disable vue/require-default-prop, vue/no-v-html */ +import { mapState } from 'vuex'; import Identicon from '~/vue_shared/components/identicon.vue'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; +import Tracking from '~/tracking'; + +const trackingMixin = Tracking.mixin(); export default { components: { Identicon, }, + mixins: [trackingMixin], props: { matcher: { type: String, @@ -37,6 +42,7 @@ export default { }, }, computed: { + ...mapState(['dropdownType']), truncatedNamespace() { return truncateNamespace(this.namespace); }, @@ -49,7 +55,11 @@ export default { <template> <li class="frequent-items-list-item-container"> - <a :href="webUrl" class="clearfix"> + <a + :href="webUrl" + class="clearfix" + @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })" + > <div ref="frequentItemsItemAvatarContainer" class="frequent-items-item-avatar-container avatar-container rect-avatar s32" diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue index 19cb09f0dcc..8042e8c7bc9 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue @@ -1,27 +1,34 @@ <script> import { debounce } from 'lodash'; -import { mapActions } from 'vuex'; +import { mapActions, mapState } from 'vuex'; import { GlIcon } from '@gitlab/ui'; import eventHub from '../event_hub'; import frequentItemsMixin from './frequent_items_mixin'; +import Tracking from '~/tracking'; + +const trackingMixin = Tracking.mixin(); export default { components: { GlIcon, }, - mixins: [frequentItemsMixin], + mixins: [frequentItemsMixin, trackingMixin], data() { return { searchQuery: '', }; }, computed: { + ...mapState(['dropdownType']), translations() { return this.getTranslations(['searchInputPlaceholder']); }, }, watch: { searchQuery: debounce(function debounceSearchQuery() { + this.track('type_search_query', { + label: `${this.dropdownType}_dropdown_frequent_items_search_input`, + }); this.setSearchQuery(this.searchQuery); }, 500), }, diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js index 1998bf4358a..639562bf961 100644 --- a/app/assets/javascripts/frequent_items/index.js +++ b/app/assets/javascripts/frequent_items/index.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import eventHub from './event_hub'; +import { createStore } from '~/frequent_items/store'; Vue.use(Translate); @@ -28,11 +29,15 @@ export default function initFrequentItemDropdowns() { return; } + const dropdownType = namespace; + const store = createStore({ dropdownType }); + import('./components/app.vue') .then(({ default: FrequentItems }) => { // eslint-disable-next-line no-new new Vue({ el, + store, data() { const { dataset } = this.$options.el; const item = { diff --git a/app/assets/javascripts/frequent_items/store/index.js b/app/assets/javascripts/frequent_items/store/index.js index ece9e6419dd..83176d69802 100644 --- a/app/assets/javascripts/frequent_items/store/index.js +++ b/app/assets/javascripts/frequent_items/store/index.js @@ -7,10 +7,11 @@ import state from './state'; Vue.use(Vuex); -export default () => - new Vuex.Store({ +export const createStore = (initState = {}) => { + return new Vuex.Store({ actions, getters, mutations, - state: state(), + state: state(initState), }); +}; diff --git a/app/assets/javascripts/frequent_items/store/state.js b/app/assets/javascripts/frequent_items/store/state.js index 75b04febee4..c5c0b25fdf2 100644 --- a/app/assets/javascripts/frequent_items/store/state.js +++ b/app/assets/javascripts/frequent_items/store/state.js @@ -1,5 +1,6 @@ -export default () => ({ +export default ({ dropdownType = '' } = {}) => ({ namespace: '', + dropdownType, storageKey: '', searchQuery: '', isLoadingItems: false, |