Improve method and variable names

Change method and variables names so that they're more generic since
these would handle other issuable popovers in the future

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

@@ -24,11 +24,11 @@ $.fn.renderGFM = function renderGFM() {
   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) {
+  const issuablePopoverElements = this.find('.gfm-merge_request').get();
+  if (issuablePopoverElements.length) {
     import(/* webpackChunkName: 'IssuablePopoverBundle' */ '~/issuable/popover')
-      .then(({ default: initMRPopovers }) => {
-        initMRPopovers(mrPopoverElements);
+      .then(({ default: initIssuablePopovers }) => {
+        initIssuablePopovers(issuablePopoverElements);
       })
       .catch(() => {});
   }

app/assets/javascripts/issuable/popover/index.js

@@ -6,8 +6,8 @@ import MRPopover from './components/mr_popover.vue';
 let renderedPopover;
 let renderFn;
-const handleUserPopoverMouseOut = ({ target }) => {
-  target.removeEventListener('mouseleave', handleUserPopoverMouseOut);
+const handleIssuablePopoverMouseOut = ({ target }) => {
+  target.removeEventListener('mouseleave', handleIssuablePopoverMouseOut);
   if (renderFn) {
     clearTimeout(renderFn);
@@ -22,9 +22,11 @@ const handleUserPopoverMouseOut = ({ target }) => {
  * Adds a MergeRequestPopover component to the body, hands over as much data as the target element has in data attributes.
  * loads based on data-project-path and data-iid more data about an MR from the API and sets it on the popover
  */
-const handleMRPopoverMount = ({ apolloProvider, projectPath, mrTitle, iid }) => ({ target }) => {
+const handleIssuablePopoverMount = ({ apolloProvider, projectPath, title, iid }) => ({
+  target,
+}) => {
   // Add listener to actually remove it again
-  target.addEventListener('mouseleave', handleUserPopoverMouseOut);
+  target.addEventListener('mouseleave', handleIssuablePopoverMouseOut);
   renderFn = setTimeout(() => {
     const MRPopoverComponent = Vue.extend(MRPopover);
@@ -33,7 +35,7 @@ const handleMRPopoverMount = ({ apolloProvider, projectPath, mrTitle, iid }) =>
         target,
         projectPath,
         mergeRequestIID: iid,
-        mergeRequestTitle: mrTitle,
+        mergeRequestTitle: title,
       },
       apolloProvider,
     });
@@ -43,22 +45,22 @@ const handleMRPopoverMount = ({ apolloProvider, projectPath, mrTitle, iid }) =>
 };
 export default (elements) => {
-  const mrLinks = elements || [...document.querySelectorAll('.gfm-merge_request')];
-  if (mrLinks.length > 0) {
+  if (elements.length > 0) {
     Vue.use(VueApollo);
     const apolloProvider = new VueApollo({
       defaultClient: createDefaultClient(),
     });
-    const listenerAddedAttr = 'data-mr-listener-added';
-    mrLinks.forEach((el) => {
-      const { projectPath, mrTitle, iid } = el.dataset;
-      if (!el.getAttribute(listenerAddedAttr) && projectPath && mrTitle && iid) {
+    const listenerAddedAttr = 'data-popover-listener-added';
+    elements.forEach((el) => {
+      const { projectPath, iid } = el.dataset;
+      const title = el.dataset.mrTitle || el.title;
+      if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid) {
         el.addEventListener(
           'mouseenter',
-          handleMRPopoverMount({ apolloProvider, projectPath, mrTitle, iid }),
+          handleIssuablePopoverMount({ apolloProvider, projectPath, title, iid }),
         );
         el.setAttribute(listenerAddedAttr, true);
       }

spec/frontend/issuable/popover/index_spec.js

 import { setHTMLFixture } from 'helpers/fixtures';
 import * as createDefaultClient from '~/lib/graphql';
-import initMRPopovers from '~/issuable/popover/index';
+import initIssuablePopovers from '~/issuable/popover/index';
 createDefaultClient.default = jest.fn();
-describe('initMRPopovers', () => {
+describe('initIssuablePopovers', () => {
   let mr1;
   let mr2;
   let mr3;
@@ -14,7 +14,7 @@ describe('initMRPopovers', () => {
       <div id="one" class="gfm-merge_request" data-mr-title="title" data-iid="1" data-project-path="group/project">
         MR1
       </div>
-      <div id="two" class="gfm-merge_request" data-mr-title="title" data-iid="1" data-project-path="group/project">
+      <div id="two" class="gfm-merge_request" title="title" data-iid="1" data-project-path="group/project">
         MR2
       </div>
       <div id="three" class="gfm-merge_request">
@@ -32,14 +32,14 @@ describe('initMRPopovers', () => {
   });
   it('does not add the same event listener twice', () => {
-    initMRPopovers([mr1, mr1, mr2]);
+    initIssuablePopovers([mr1, mr1, mr2]);
     expect(mr1.addEventListener).toHaveBeenCalledTimes(1);
     expect(mr2.addEventListener).toHaveBeenCalledTimes(1);
   });
   it('does not add listener if it does not have the necessary data attributes', () => {
-    initMRPopovers([mr1, mr2, mr3]);
+    initIssuablePopovers([mr1, mr2, mr3]);
     expect(mr3.addEventListener).not.toHaveBeenCalled();
   });

spec/frontend/issuable/popover/mr_popover_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import IssuablePopover from '~/issuable/popover/components/mr_popover.vue';
+import MRPopover from '~/issuable/popover/components/mr_popover.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 describe('MR Popover', () => {
   let wrapper;
   beforeEach(() => {
-    wrapper = shallowMount(IssuablePopover, {
+    wrapper = shallowMount(MRPopover, {
       propsData: {
         target: document.createElement('a'),
         projectPath: 'foo/bar',