Remove initUserPopovers wherever possible

app/assets/javascripts/behaviors/markdown/render_gfm.js

 import $ from 'jquery';
 import syntaxHighlight from '~/syntax_highlight';
-import initUserPopovers from '../../user_popovers';
 import highlightCurrentUser from './highlight_current_user';
 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
@@ -20,7 +19,6 @@ $.fn.renderGFM = function renderGFM() {
     renderMermaid(this.find('.js-render-mermaid'));
   }
   highlightCurrentUser(this.find('.gfm-project_member').get());
-  initUserPopovers(this.find('.js-user-link').get());
 
   const mrPopoverElements = this.find('.gfm-merge_request').get();
   if (mrPopoverElements.length) {

app/assets/javascripts/diffs/components/commit_item.vue

@@ -7,8 +7,6 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
-import initUserPopovers from '../../user_popovers';
-
 /**
  * CommitItem
  *
@@ -82,11 +80,6 @@ export default {
       return this.commit.description_html.replace(/^
/, '');
     },
   },
-  created() {
-    this.$nextTick(() => {
-      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
-    });
-  },
   safeHtmlConfig: {
     ADD_TAGS: ['gl-emoji'],
   },

app/assets/javascripts/members/components/table/members_table.vue

@@ -4,7 +4,6 @@ import { mapState } from 'vuex';
 import MembersTableCell from 'ee_else_ce/members/components/table/members_table_cell.vue';
 import { canOverride, canRemove, canResend, canUpdate } from 'ee_else_ce/members/utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
-import initUserPopovers from '~/user_popovers';
 import UserDate from '~/vue_shared/components/user_date.vue';
 import {
   FIELD_KEY_ACTIONS,
@@ -85,9 +84,6 @@ export default {
       return this.tabQueryParamValue === TAB_QUERY_PARAM_VALUES.invite;
     },
   },
-  mounted() {
-    initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
-  },
   methods: {
     hasActionButtons(member) {
       return (

app/assets/javascripts/notes/components/notes_app.vue

@@ -3,7 +3,6 @@ import { mapGetters, mapActions } from 'vuex';
 import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import initUserPopovers from '~/user_popovers';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -169,7 +168,6 @@ export default {
   updated() {
     this.$nextTick(() => {
       highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member'));
-      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
     });
   },
   beforeDestroy() {

app/assets/javascripts/user_popovers.js

@@ -106,9 +106,13 @@ function initPopovers(userLinks, mountPopover) {
     });
 }
 
-const isUserLinkNode = (node) =>
-  node.nodeType === 1 &&
-  (node.classList.contains('js-user-link') || node.classList.contains('gfm-project_member'));
+const userLinkSelector = 'a.js-user-link, a.gfm-project_member';
+
+const getUserLinkNodes = (node) => {
+  if (!('matches' in node)) return null;
+  if (node.matches(userLinkSelector)) return [node];
+  return Array.from(node.querySelectorAll(userLinkSelector));
+};
 
 let observer;
 
@@ -122,11 +126,15 @@ export default function addPopovers(
 
   if (!observer) {
     observer = new MutationObserver((mutationsList) => {
-      mutationsList.filter((mutation) => mutation.type === 'childList' && mutation.addedNodes);
-
-      const newUserLinks = mutationsList.flatMap((mutation) =>
-        Array.from(mutation.addedNodes).filter(isUserLinkNode),
-      );
+      const newUserLinks = mutationsList
+        .filter((mutation) => mutation.type === 'childList' && mutation.addedNodes)
+        .reduce((acc, mutation) => {
+          const userLinkNodes = Array.from(mutation.addedNodes)
+            .flatMap(getUserLinkNodes)
+            .filter(Boolean);
+          acc.push(...userLinkNodes);
+          return acc;
+        }, []);
 
       if (newUserLinks.length !== 0) {
         initPopovers(newUserLinks, mountPopover);

app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue

@@ -18,7 +18,6 @@ import { toggleContainerClasses } from '~/lib/utils/dom_utils';
 import { visitUrl, joinPaths } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
-import initUserPopovers from '~/user_popovers';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { PAGE_CONFIG, SEVERITY_LEVELS } from '../constants';
@@ -175,7 +174,6 @@ export default {
   updated() {
     this.$nextTick(() => {
       highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member'));
-      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
     });
   },
   methods: {

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

@@ -10,7 +10,6 @@ import createFlash from '~/flash';
 import { TYPE_VULNERABILITY } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { s__ } from '~/locale';
-import initUserPopovers from '~/user_popovers';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { normalizeGraphQLNote } from '../helpers';
 import GenericReportSection from './generic_report/report_section.vue';
@@ -117,11 +116,6 @@ export default {
     this.stopPolling();
     this.unbindVisibilityListener();
   },
-  updated() {
-    this.$nextTick(() => {
-      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
-    });
-  },
   methods: {
     startPolling() {
       if (this.pollInterval) {

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -18,11 +18,9 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import initUserPopovers from '~/user_popovers';
 import { addTypenamesToDiscussion, generateNote } from './mock_data';
 
 jest.mock('~/flash');
-jest.mock('~/user_popovers');
 
 Vue.use(VueApollo);
 
@@ -138,13 +136,6 @@ describe('Vulnerability Footer', () => {
       });
     });
 
-    it('calls initUserPopovers when the component is updated', async () => {
-      createWrapper({ queryHandler: discussionsHandler({ discussions: [] }) });
-      expect(initUserPopovers).not.toHaveBeenCalled();
-      await waitForPromises();
-      expect(initUserPopovers).toHaveBeenCalled();
-    });
-
     it('shows an error the discussions could not be retrieved', async () => {
       await createWrapperAndFetchDiscussions({
         errors: [{ message: 'Something went wrong' }],

spec/frontend/diffs/components/commit_item_spec.js

@@ -6,8 +6,6 @@ import Component from '~/diffs/components/commit_item.vue';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 
-jest.mock('~/user_popovers');
-
 const TEST_AUTHOR_NAME = 'test';
 const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
 const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;

spec/frontend/members/components/table/members_table_spec.js

@@ -21,7 +21,6 @@ import {
   BADGE_LABELS_PENDING_OWNER_APPROVAL,
   TAB_QUERY_PARAM_VALUES,
 } from '~/members/constants';
-import * as initUserPopovers from '~/user_popovers';
 import {
   member as memberMock,
   directMember,
@@ -257,14 +256,6 @@ describe('MembersTable', () => {
     });
   });
 
-  it('initializes user popovers when mounted', () => {
-    const initUserPopoversMock = jest.spyOn(initUserPopovers, 'default');
-
-    createComponent();
-
-    expect(initUserPopoversMock).toHaveBeenCalled();
-  });
-
   it('adds QA selector to table', () => {
     createComponent();
 

spec/frontend/notes/components/notes_app_spec.js

@@ -18,8 +18,6 @@ import '~/behaviors/markdown/render_gfm';
 import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
 import * as mockData from '../mock_data';
 
-jest.mock('~/user_popovers', () => jest.fn());
-
 setTestTimeout(1000);
 
 const TYPE_COMMENT_FORM = 'comment-form';

spec/frontend/user_popovers_spec.js

 import UsersCache from '~/lib/utils/users_cache';
-import waitUsingRealTimer from 'helpers/wait_using_real_timer';
 import initUserPopovers from '~/user_popovers';
 
 describe('User Popovers', () => {
@@ -73,7 +72,7 @@ describe('User Popovers', () => {
         document.body.appendChild(link);
       });
 
-      await waitUsingRealTimer();
+      await Promise.resolve();
 
       addedLinks.forEach((link) => {
         triggerEvent('mouseenter', link);