Prevent creation of popovers for group mentions

app/assets/javascripts/user_popovers.js

@@ -60,43 +60,45 @@ export default (elements = document.querySelectorAll('.js-user-link')) => {
   const userLinks = Array.from(elements);
   const UserPopoverComponent = Vue.extend(UserPopover);
 
-  return userLinks.map(el => {
-    if (initializedPopovers.has(el)) {
-      return initializedPopovers.get(el);
-    }
-
-    const user = {
-      location: null,
-      bio: null,
-      organization: null,
-      status: null,
-      loaded: false,
-    };
-    const renderedPopover = new UserPopoverComponent({
-      propsData: {
-        target: el,
-        user,
-      },
-    });
-
-    initializedPopovers.set(el, renderedPopover);
-
-    renderedPopover.$mount();
-
-    el.addEventListener('mouseenter', ({ target }) => {
-      removeTitle(target);
-      const preloadedUserInfo = getPreloadedUserInfo(target.dataset);
-
-      Object.assign(user, preloadedUserInfo);
-
-      if (preloadedUserInfo.userId) {
-        populateUserInfo(user);
+  return userLinks
+    .filter(({ dataset }) => dataset.user || dataset.userId)
+    .map(el => {
+      if (initializedPopovers.has(el)) {
+        return initializedPopovers.get(el);
       }
-    });
-    el.addEventListener('mouseleave', ({ target }) => {
-      target.removeAttribute('aria-describedby');
-    });
 
-    return renderedPopover;
-  });
+      const user = {
+        location: null,
+        bio: null,
+        organization: null,
+        status: null,
+        loaded: false,
+      };
+      const renderedPopover = new UserPopoverComponent({
+        propsData: {
+          target: el,
+          user,
+        },
+      });
+
+      initializedPopovers.set(el, renderedPopover);
+
+      renderedPopover.$mount();
+
+      el.addEventListener('mouseenter', ({ target }) => {
+        removeTitle(target);
+        const preloadedUserInfo = getPreloadedUserInfo(target.dataset);
+
+        Object.assign(user, preloadedUserInfo);
+
+        if (preloadedUserInfo.userId) {
+          populateUserInfo(user);
+        }
+      });
+      el.addEventListener('mouseleave', ({ target }) => {
+        target.removeAttribute('aria-describedby');
+      });
+
+      return renderedPopover;
+    });
 };

spec/frontend/fixtures/merge_requests.rb

@@ -10,20 +10,24 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
   let(:project) { create(:project, :repository, namespace: namespace, path: 'merge-requests-project') }
 
   # rubocop: disable Layout/TrailingWhitespace
+  let(:description) do
+    <<~MARKDOWN.strip_heredoc
+    - [ ] Task List Item
+    - [ ]   
+    - [ ] Task List Item 2
+    MARKDOWN
+  end
+  # rubocop: enable Layout/TrailingWhitespace
+
   let(:merge_request) do
     create(
       :merge_request,
       :with_diffs,
       source_project: project,
       target_project: project,
-      description: <<~MARKDOWN.strip_heredoc
-      - [ ] Task List Item
-      - [ ]   
-      - [ ] Task List Item 2
-      MARKDOWN
+      description: description
     )
   end
-  # rubocop: enable Layout/TrailingWhitespace
 
   let(:merged_merge_request) { create(:merge_request, :merged, source_project: project, target_project: project) }
   let(:pipeline) do
@@ -130,6 +134,15 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     end
   end
 
+  context 'with mentions' do
+    let(:group) { create(:group) }
+    let(:description) { "@#{group.full_path} @all @#{admin.username}" }
+
+    it 'merge_requests/merge_request_with_mentions.html' do
+      render_merge_request(merge_request)
+    end
+  end
+
   private
 
   def render_discussions_json(merge_request)

spec/javascripts/user_popovers_spec.js

@@ -2,10 +2,10 @@ import initUserPopovers from '~/user_popovers';
 import UsersCache from '~/lib/utils/users_cache';
 
 describe('User Popovers', () => {
-  const fixtureTemplate = 'merge_requests/diff_comment.html';
+  const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
   preloadFixtures(fixtureTemplate);
 
-  const selector = '.js-user-link';
+  const selector = '.js-user-link, .gfm-project_member';
 
   const dummyUser = { name: 'root' };
   const dummyUserStatus = { message: 'active' };
@@ -34,8 +34,12 @@ describe('User Popovers', () => {
     popovers = initUserPopovers(document.querySelectorAll(selector));
   });
 
-  it('initializes a popover for each js-user-link element found in the document', () => {
-    expect(document.querySelectorAll(selector).length).toBe(popovers.length);
+  it('initializes a popover for each user link with a user id', () => {
+    const linksWithUsers = Array.from(document.querySelectorAll(selector)).filter(
+      ({ dataset }) => dataset.user || dataset.userId,
+    );
+
+    expect(linksWithUsers.length).toBe(popovers.length);
   });
 
   it('does not initialize the user popovers twice for the same element', () => {