Add latest changes from gitlab-org/gitlab@master

1 files changed, 72 insertions, 88 deletions

diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js
index 157d89a3a40..5b9e3817f3a 100644
--- a/app/assets/javascripts/user_popovers.js
+++ b/app/assets/javascripts/user_popovers.js
@@ -3,108 +3,92 @@ import Vue from 'vue';
 import UsersCache from './lib/utils/users_cache';
 import UserPopover from './vue_shared/components/user_popover/user_popover.vue';
 
-let renderedPopover;
-let renderFn;
-
-const handleUserPopoverMouseOut = event => {
-  const { target } = event;
-  target.removeEventListener('mouseleave', handleUserPopoverMouseOut);
-
-  if (renderFn) {
-    clearTimeout(renderFn);
-  }
-  if (renderedPopover) {
-    renderedPopover.$destroy();
-    renderedPopover = null;
-  }
-  target.removeAttribute('aria-describedby');
+const removeTitle = el => {
+  // Removing titles so its not showing tooltips also
+
+  el.dataset.originalTitle = '';
+  el.setAttribute('title', '');
+};
+
+const getPreloadedUserInfo = dataset => {
+  const userId = dataset.user || dataset.userId;
+  const { username, name, avatarUrl } = dataset;
+
+  return {
+    userId,
+    username,
+    name,
+    avatarUrl,
+  };
 };
 
 /**
  * Adds a UserPopover component to the body, hands over as much data as the target element has in data attributes.
  * loads based on data-user-id more data about a user from the API and sets it on the popover
  */
-const handleUserPopoverMouseOver = event => {
-  const { target } = event;
-  // Add listener to actually remove it again
-  target.addEventListener('mouseleave', handleUserPopoverMouseOut);
-
-  renderFn = setTimeout(() => {
-    // Helps us to use current markdown setup without maybe breaking or duplicating for now
-    if (target.dataset.user) {
-      target.dataset.userId = target.dataset.user;
-      // Removing titles so its not showing tooltips also
-      target.dataset.originalTitle = '';
-      target.setAttribute('title', '');
-    }
-
-    const { userId, username, name, avatarUrl } = target.dataset;
+const populateUserInfo = user => {
+  const { userId } = user;
+
+  return Promise.all([UsersCache.retrieveById(userId), UsersCache.retrieveStatusById(userId)]).then(
+    ([userData, status]) => {
+      if (userData) {
+        Object.assign(user, {
+          avatarUrl: userData.avatar_url,
+          username: userData.username,
+          name: userData.name,
+          location: userData.location,
+          bio: userData.bio,
+          organization: userData.organization,
+          loaded: true,
+        });
+      }
+
+      if (status) {
+        Object.assign(user, {
+          status,
+        });
+      }
+
+      return user;
+    },
+  );
+};
+
+export default (elements = document.querySelectorAll('.js-user-link')) => {
+  const userLinks = Array.from(elements);
+
+  return userLinks.map(el => {
+    const UserPopoverComponent = Vue.extend(UserPopover);
     const user = {
-      userId,
-      username,
-      name,
-      avatarUrl,
       location: null,
       bio: null,
       organization: null,
       status: null,
       loaded: false,
     };
-    if (userId || username) {
-      const UserPopoverComponent = Vue.extend(UserPopover);
-      renderedPopover = new UserPopoverComponent({
-        propsData: {
-          target,
-          user,
-        },
-      });
-
-      renderedPopover.$mount();
-
-      UsersCache.retrieveById(userId)
-        .then(userData => {
-          if (!userData) {
-            return undefined;
-          }
-
-          Object.assign(user, {
-            avatarUrl: userData.avatar_url,
-            username: userData.username,
-            name: userData.name,
-            location: userData.location,
-            bio: userData.bio,
-            organization: userData.organization,
-            status: userData.status,
-            loaded: true,
-          });
-
-          if (userData.status) {
-            return Promise.resolve();
-          }
-
-          return UsersCache.retrieveStatusById(userId);
-        })
-        .then(status => {
-          if (!status) {
-            return;
-          }
-
-          Object.assign(user, {
-            status,
-          });
-        })
-        .catch(() => {
-          renderedPopover.$destroy();
-          renderedPopover = null;
-        });
-    }
-  }, 200); // 200ms delay so not every mouseover triggers Popover + API Call
-};
+    const renderedPopover = new UserPopoverComponent({
+      propsData: {
+        target: el,
+        user,
+      },
+    });
+
+    renderedPopover.$mount();
+
+    el.addEventListener('mouseenter', ({ target }) => {
+      removeTitle(target);
+      const preloadedUserInfo = getPreloadedUserInfo(target.dataset);
+
+      Object.assign(user, preloadedUserInfo);
 
-export default elements => {
-  const userLinks = elements || [...document.querySelectorAll('.js-user-link')];
+      if (preloadedUserInfo.userId) {
+        populateUserInfo(user);
+      }
+    });
+    el.addEventListener('mouseleave', ({ target }) => {
+      target.removeAttribute('aria-describedby');
+    });
 
-  userLinks.forEach(el => {
-    el.addEventListener('mouseenter', handleUserPopoverMouseOver);
+    return renderedPopover;
   });
 };