Merge branch 'master' into id-split-self-approval-restrictionsid-split-self-approval-restrictions

1 files changed, 62 insertions, 0 deletions

diff --git a/app/assets/javascripts/mr_popover/index.js b/app/assets/javascripts/mr_popover/index.js
new file mode 100644
index 00000000000..cc686b401d2
--- /dev/null
+++ b/app/assets/javascripts/mr_popover/index.js
@@ -0,0 +1,62 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import MRPopover from './components/mr_popover.vue';
+import createDefaultClient from '~/lib/graphql';
+
+let renderedPopover;
+let renderFn;
+
+const handleUserPopoverMouseOut = ({ target }) => {
+  target.removeEventListener('mouseleave', handleUserPopoverMouseOut);
+
+  if (renderFn) {
+    clearTimeout(renderFn);
+  }
+  if (renderedPopover) {
+    renderedPopover.$destroy();
+    renderedPopover = null;
+  }
+};
+
+/**
+ * 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 => ({ target }) => {
+  // Add listener to actually remove it again
+  target.addEventListener('mouseleave', handleUserPopoverMouseOut);
+
+  const { projectPath, mrTitle, iid } = target.dataset;
+  const mergeRequest = {};
+
+  renderFn = setTimeout(() => {
+    const MRPopoverComponent = Vue.extend(MRPopover);
+    renderedPopover = new MRPopoverComponent({
+      propsData: {
+        target,
+        projectPath,
+        mergeRequestIID: iid,
+        mergeRequest,
+        mergeRequestTitle: mrTitle,
+      },
+      apolloProvider,
+    });
+
+    renderedPopover.$mount();
+  }, 200); // 200ms delay so not every mouseover triggers Popover + API Call
+};
+
+export default elements => {
+  const mrLinks = elements || [...document.querySelectorAll('.gfm-merge_request')];
+  if (mrLinks.length > 0) {
+    Vue.use(VueApollo);
+
+    const apolloProvider = new VueApollo({
+      defaultClient: createDefaultClient(),
+    });
+
+    mrLinks.forEach(el => {
+      el.addEventListener('mouseenter', handleMRPopoverMount(apolloProvider));
+    });
+  }
+};