Fix avatar popover not appearing for delayed data

- the popover is added via the CSS class js-user-link to the user link.
  However, is only done once when the page is loaded, so user links that
  appear after the page is loaded do not get the popover
- on page update, check for avatar links and add popovers

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

@@ -9,6 +9,7 @@ import SolutionCard from 'ee/vue_shared/security_reports/components/solution_car
 import MergeRequestNote from 'ee/vue_shared/security_reports/components/merge_request_note.vue';
 import HistoryEntry from './history_entry.vue';
 import VulnerabilitiesEventBus from './vulnerabilities_event_bus';
+import initUserPopovers from '~/user_popovers';
 
 export default {
   name: 'VulnerabilityFooter',
@@ -70,6 +71,12 @@ export default {
     VulnerabilitiesEventBus.$on('VULNERABILITY_STATE_CHANGE', this.fetchDiscussions);
   },
 
+  updated() {
+    this.$nextTick(() => {
+      initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
+    });
+  },
+
   beforeDestroy() {
     if (this.poll) this.poll.stop();
   },

ee/changelogs/unreleased/214594-add-avatar-popover.yml

+---
+title: Fix avatar popover not appearing for delayed data
+merge_request: 36254
+author:
+type: fixed

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -8,9 +8,11 @@ import MergeRequestNote from 'ee/vue_shared/security_reports/components/merge_re
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
+import initUserPopovers from '~/user_popovers';
 
 const mockAxios = new MockAdapter(axios);
 jest.mock('~/flash');
+jest.mock('~/user_popovers');
 
 describe('Vulnerability Footer', () => {
   let wrapper;
@@ -130,6 +132,18 @@ describe('Vulnerability Footer', () => {
       });
     });
 
+    it('calls initUserPopovers when a new history item is retrieved', () => {
+      const historyItems = [{ id: 1, note: 'some note' }];
+      mockAxios.onGet(discussionUrl).replyOnce(200, historyItems, { date: Date.now() });
+
+      expect(initUserPopovers).not.toHaveBeenCalled();
+      createWrapper();
+
+      return axios.waitForAll().then(() => {
+        expect(initUserPopovers).toHaveBeenCalled();
+      });
+    });
+
     it('shows an error the history list could not be retrieved', () => {
       mockAxios.onGet(discussionUrl).replyOnce(500);
       createWrapper();
@@ -194,6 +208,16 @@ describe('Vulnerability Footer', () => {
         });
       });
 
+      it('calls initUserPopovers when a new note is retrieved', () => {
+        expect(initUserPopovers).not.toHaveBeenCalled();
+        const note = { id: 300, note: 'new note on a new discussion', discussion_id: 3 };
+        createNotesRequest(note);
+
+        return axios.waitForAll().then(() => {
+          expect(initUserPopovers).toHaveBeenCalled();
+        });
+      });
+
       it('shows an error if the notes poll fails', () => {
         mockAxios.onGet(minimumProps.notesUrl).replyOnce(500);