diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-06 03:10:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-05-06 03:10:32 +0300 |
commit | bfb0d93c767b4df4ab31a836d40cd7a1657916b5 (patch) | |
tree | c2bdf5f6362831d686c17dc9d3ab970a5a8b6c36 /app/assets/javascripts/frequent_items | |
parent | d1fd19e525135c2805ae93d3a571ffcbc2414b0e (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/frequent_items')
6 files changed, 81 insertions, 40 deletions
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue index 00d32727ad0..e103949b86a 100644 --- a/app/assets/javascripts/frequent_items/components/app.vue +++ b/app/assets/javascripts/frequent_items/components/app.vue @@ -1,7 +1,11 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; -import { mapState, mapActions, mapGetters } from 'vuex'; import AccessorUtilities from '~/lib/utils/accessor'; +import { + mapVuexModuleState, + mapVuexModuleActions, + mapVuexModuleGetters, +} from '~/lib/utils/vuex_module_mappers'; import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants'; import eventHub from '../event_hub'; import { isMobile, updateExistingFrequentItem, sanitizeItem } from '../utils'; @@ -16,6 +20,7 @@ export default { GlLoadingIcon, }, mixins: [frequentItemsMixin], + inject: ['vuexModule'], props: { currentUserName: { type: String, @@ -27,8 +32,13 @@ export default { }, }, computed: { - ...mapState(['searchQuery', 'isLoadingItems', 'isFetchFailed', 'items']), - ...mapGetters(['hasSearchQuery']), + ...mapVuexModuleState((vm) => vm.vuexModule, [ + 'searchQuery', + 'isLoadingItems', + 'isFetchFailed', + 'items', + ]), + ...mapVuexModuleGetters((vm) => vm.vuexModule, ['hasSearchQuery']), translations() { return this.getTranslations(['loadingMessage', 'header']); }, @@ -56,7 +66,11 @@ export default { eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler); }, methods: { - ...mapActions(['setNamespace', 'setStorageKey', 'fetchFrequentItems']), + ...mapVuexModuleActions((vm) => vm.vuexModule, [ + 'setNamespace', + 'setStorageKey', + 'fetchFrequentItems', + ]), dropdownOpenHandler() { if (this.searchQuery === '' || isMobile()) { this.fetchFrequentItems(); @@ -101,14 +115,15 @@ export default { <template> <div class="gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch gl-h-full"> - <frequent-items-search-input :namespace="namespace" /> + <frequent-items-search-input :namespace="namespace" data-testid="frequent-items-search-input" /> <gl-loading-icon v-if="isLoadingItems" :label="translations.loadingMessage" size="lg" class="loading-animation prepend-top-20" + data-testid="loading" /> - <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header"> + <div v-if="!isLoadingItems && !hasSearchQuery" class="section-header" data-testid="header"> {{ translations.header }} </div> <frequent-items-list 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 6f17e6a5282..c2f77cc8bc4 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,8 +1,8 @@ <script> /* eslint-disable vue/require-default-prop, vue/no-v-html */ -import { mapState } from 'vuex'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; +import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers'; import Tracking from '~/tracking'; import Identicon from '~/vue_shared/components/identicon.vue'; @@ -13,6 +13,7 @@ export default { Identicon, }, mixins: [trackingMixin], + inject: ['vuexModule'], props: { matcher: { type: String, @@ -42,7 +43,7 @@ export default { }, }, computed: { - ...mapState(['dropdownType']), + ...mapVuexModuleState((vm) => vm.vuexModule, ['dropdownType']), truncatedNamespace() { return truncateNamespace(this.namespace); }, 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 b0972246e70..fa14ee15cf3 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,7 +1,7 @@ <script> import { GlSearchBoxByType } from '@gitlab/ui'; import { debounce } from 'lodash'; -import { mapActions, mapState } from 'vuex'; +import { mapVuexModuleActions, mapVuexModuleState } from '~/lib/utils/vuex_module_mappers'; import Tracking from '~/tracking'; import frequentItemsMixin from './frequent_items_mixin'; @@ -12,13 +12,14 @@ export default { GlSearchBoxByType, }, mixins: [frequentItemsMixin, trackingMixin], + inject: ['vuexModule'], data() { return { searchQuery: '', }; }, computed: { - ...mapState(['dropdownType']), + ...mapVuexModuleState((vm) => vm.vuexModule, ['dropdownType']), translations() { return this.getTranslations(['searchInputPlaceholder']); }, @@ -32,7 +33,7 @@ export default { }, 500), }, methods: { - ...mapActions(['setSearchQuery']), + ...mapVuexModuleActions((vm) => vm.vuexModule, ['setSearchQuery']), }, }; </script> diff --git a/app/assets/javascripts/frequent_items/constants.js b/app/assets/javascripts/frequent_items/constants.js index 9bc17f5ef4f..5af107d9083 100644 --- a/app/assets/javascripts/frequent_items/constants.js +++ b/app/assets/javascripts/frequent_items/constants.js @@ -36,3 +36,16 @@ export const TRANSLATION_KEYS = { searchInputPlaceholder: s__('GroupsDropdown|Search your groups'), }, }; + +export const FREQUENT_ITEMS_DROPDOWNS = [ + { + namespace: 'projects', + key: 'project', + vuexModule: 'frequentProjects', + }, + { + namespace: 'groups', + key: 'group', + vuexModule: 'frequentGroups', + }, +]; diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js index eb8a404e8a5..f1540ffac28 100644 --- a/app/assets/javascripts/frequent_items/index.js +++ b/app/assets/javascripts/frequent_items/index.js @@ -1,25 +1,20 @@ import $ from 'jquery'; import Vue from 'vue'; +import Vuex from 'vuex'; import { createStore } from '~/frequent_items/store'; +import VuexModuleProvider from '~/vue_shared/components/vuex_module_provider.vue'; import Translate from '~/vue_shared/translate'; +import { FREQUENT_ITEMS_DROPDOWNS } from './constants'; import eventHub from './event_hub'; +Vue.use(Vuex); Vue.use(Translate); -const frequentItemDropdowns = [ - { - namespace: 'projects', - key: 'project', - }, - { - namespace: 'groups', - key: 'group', - }, -]; - export default function initFrequentItemDropdowns() { - frequentItemDropdowns.forEach((dropdown) => { - const { namespace, key } = dropdown; + const store = createStore(); + + FREQUENT_ITEMS_DROPDOWNS.forEach((dropdown) => { + const { namespace, key, vuexModule } = dropdown; const el = document.getElementById(`js-${namespace}-dropdown`); const navEl = document.getElementById(`nav-${namespace}-dropdown`); @@ -29,9 +24,6 @@ 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 @@ -55,13 +47,23 @@ export default function initFrequentItemDropdowns() { }; }, render(createElement) { - return createElement(FrequentItems, { - props: { - namespace, - currentUserName: this.currentUserName, - currentItem: this.currentItem, + return createElement( + VuexModuleProvider, + { + props: { + vuexModule, + }, }, - }); + [ + createElement(FrequentItems, { + props: { + namespace, + currentUserName: this.currentUserName, + currentItem: this.currentItem, + }, + }), + ], + ); }, }); }) diff --git a/app/assets/javascripts/frequent_items/store/index.js b/app/assets/javascripts/frequent_items/store/index.js index 83176d69802..47fad112297 100644 --- a/app/assets/javascripts/frequent_items/store/index.js +++ b/app/assets/javascripts/frequent_items/store/index.js @@ -1,17 +1,26 @@ -import Vue from 'vue'; import Vuex from 'vuex'; +import { FREQUENT_ITEMS_DROPDOWNS } from '../constants'; import * as actions from './actions'; import * as getters from './getters'; import mutations from './mutations'; import state from './state'; -Vue.use(Vuex); +export const createFrequentItemsModule = (initState = {}) => ({ + namespaced: true, + actions, + getters, + mutations, + state: state(initState), +}); -export const createStore = (initState = {}) => { +export const createStore = () => { return new Vuex.Store({ - actions, - getters, - mutations, - state: state(initState), + modules: FREQUENT_ITEMS_DROPDOWNS.reduce( + (acc, { namespace, vuexModule }) => + Object.assign(acc, { + [vuexModule]: createFrequentItemsModule({ dropdownType: namespace }), + }), + {}, + ), }); }; |