Add latest changes from gitlab-org/gitlab@13-1-stable-ee

1 files changed, 35 insertions, 41 deletions

diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js
index 6263acbab8e..c074f173776 100644
--- a/app/assets/javascripts/frequent_items/index.js
+++ b/app/assets/javascripts/frequent_items/index.js
@@ -1,8 +1,7 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import eventHub from '~/frequent_items/event_hub';
-import frequentItems from './components/app.vue';
+import eventHub from './event_hub';
 
 Vue.use(Translate);
 
@@ -17,7 +16,7 @@ const frequentItemDropdowns = [
   },
 ];
 
-const initFrequentItemDropdowns = () => {
+export default function initFrequentItemDropdowns() {
   frequentItemDropdowns.forEach(dropdown => {
     const { namespace, key } = dropdown;
     const el = document.getElementById(`js-${namespace}-dropdown`);
@@ -29,45 +28,40 @@ const initFrequentItemDropdowns = () => {
       return;
     }
 
-    $(navEl).on('shown.bs.dropdown', () => {
-      eventHub.$emit(`${namespace}-dropdownOpen`);
-    });
+    $(navEl).on('shown.bs.dropdown', () =>
+      import('./components/app.vue').then(({ default: FrequentItems }) => {
+        // eslint-disable-next-line no-new
+        new Vue({
+          el,
+          data() {
+            const { dataset } = this.$options.el;
+            const item = {
+              id: Number(dataset[`${key}Id`]),
+              name: dataset[`${key}Name`],
+              namespace: dataset[`${key}Namespace`],
+              webUrl: dataset[`${key}WebUrl`],
+              avatarUrl: dataset[`${key}AvatarUrl`] || null,
+              lastAccessedOn: Date.now(),
+            };
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el,
-      components: {
-        frequentItems,
-      },
-      data() {
-        const { dataset } = this.$options.el;
-        const item = {
-          id: Number(dataset[`${key}Id`]),
-          name: dataset[`${key}Name`],
-          namespace: dataset[`${key}Namespace`],
-          webUrl: dataset[`${key}WebUrl`],
-          avatarUrl: dataset[`${key}AvatarUrl`] || null,
-          lastAccessedOn: Date.now(),
-        };
-
-        return {
-          currentUserName: dataset.userName,
-          currentItem: item,
-        };
-      },
-      render(createElement) {
-        return createElement('frequent-items', {
-          props: {
-            namespace,
-            currentUserName: this.currentUserName,
-            currentItem: this.currentItem,
+            return {
+              currentUserName: dataset.userName,
+              currentItem: item,
+            };
+          },
+          render(createElement) {
+            return createElement(FrequentItems, {
+              props: {
+                namespace,
+                currentUserName: this.currentUserName,
+                currentItem: this.currentItem,
+              },
+            });
           },
         });
-      },
-    });
-  });
-};
 
-document.addEventListener('DOMContentLoaded', () => {
-  requestIdleCallback(initFrequentItemDropdowns);
-});
+        eventHub.$emit(`${namespace}-dropdownOpen`);
+      }),
+    );
+  });
+}