Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

7 files changed, 92 insertions, 44 deletions

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 69f89aa3857..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();
@@ -100,15 +114,16 @@ export default {
 </script>
 
 <template>
-  <div>
-    <frequent-items-search-input :namespace="namespace" />
+  <div class="gl-display-flex gl-flex-direction-column gl-flex-align-items-stretch gl-h-full">
+    <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.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
index 6feeb5f03ad..1da0b88c9e9 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue
@@ -59,7 +59,11 @@ export default {
 <template>
   <div class="frequent-items-list-container">
     <ul ref="frequentItemsList" class="list-unstyled">
-      <li v-if="isListEmpty" :class="{ 'section-failure': isFetchFailed }" class="section-empty">
+      <li
+        v-if="isListEmpty"
+        :class="{ 'section-failure': isFetchFailed }"
+        class="section-empty gl-mb-3"
+      >
         {{ listEmptyMessage }}
       </li>
       <frequent-items-list-item
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..9e1dcf70aa5 100644
--- a/app/assets/javascripts/frequent_items/constants.js
+++ b/app/assets/javascripts/frequent_items/constants.js
@@ -36,3 +36,17 @@ export const TRANSLATION_KEYS = {
     searchInputPlaceholder: s__('GroupsDropdown|Search your groups'),
   },
 };
+
+export const FREQUENT_ITEMS_PROJECTS = {
+  namespace: 'projects',
+  key: 'project',
+  vuexModule: 'frequentProjects',
+};
+
+export const FREQUENT_ITEMS_GROUPS = {
+  namespace: 'groups',
+  key: 'group',
+  vuexModule: 'frequentGroups',
+};
+
+export const FREQUENT_ITEMS_DROPDOWNS = [FREQUENT_ITEMS_PROJECTS, FREQUENT_ITEMS_GROUPS];
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..1faacff84e5 100644
--- a/app/assets/javascripts/frequent_items/store/index.js
+++ b/app/assets/javascripts/frequent_items/store/index.js
@@ -1,17 +1,28 @@
-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 = {}) => {
-  return new Vuex.Store({
-    actions,
-    getters,
-    mutations,
-    state: state(initState),
-  });
+export const createStoreOptions = () => ({
+  modules: FREQUENT_ITEMS_DROPDOWNS.reduce(
+    (acc, { namespace, vuexModule }) =>
+      Object.assign(acc, {
+        [vuexModule]: createFrequentItemsModule({ dropdownType: namespace }),
+      }),
+    {},
+  ),
+});
+
+export const createStore = () => {
+  return new Vuex.Store(createStoreOptions());
 };