Init GlPopover instead of BS popovers in HAML files

Create a wrapper to initialize GlPopover instead of Bootstrap popovers
on elements that have the data-toggle="popover" attribute.

app/assets/javascripts/main.js

@@ -40,6 +40,7 @@ import { initUserTracking, initDefaultTrackers } from './tracking';
 import { __ } from './locale';
 
 import * as tooltips from '~/tooltips';
+import * as popovers from '~/popovers';
 
 import 'ee_else_ce/main_ee';
 
@@ -81,7 +82,7 @@ document.addEventListener('beforeunload', () => {
   // Close any open tooltips
   tooltips.dispose(document.querySelectorAll('.has-tooltip, [data-toggle="tooltip"]'));
   // Close any open popover
-  $('[data-toggle="popover"]').popover('dispose');
+  popovers.dispose();
 });
 
 window.addEventListener('hashchange', handleLocationHash);
@@ -166,13 +167,7 @@ function deferredInitialisation() {
   });
 
   // Initialize popovers
-  $body.popover({
-    selector: '[data-toggle="popover"]',
-    trigger: 'focus',
-    // set the viewport to the main content, excluding the navigation bar, so
-    // the navigation can't overlap the popover
-    viewport: '.layout-page',
-  });
+  popovers.initPopovers();
 
   // Adding a helper class to activate animations only after all is rendered
   setTimeout(() => $body.addClass('page-initialised'), 1000);

app/assets/javascripts/popovers/components/popovers.vue

+<script>
+// We can't use v-safe-html here as the popover's title or content might contains SVGs that would
+// be stripped by the directive's sanitizer. Instead, we fallback on v-html and we use GitLab's
+// dompurify config that lets SVGs be rendered properly.
+// Context: https://gitlab.com/gitlab-org/gitlab/-/issues/247207
+/* eslint-disable vue/no-v-html */
+import { GlPopover } from '@gitlab/ui';
+import { sanitize } from '~/lib/dompurify';
+
+const newPopover = element => {
+  const { content, html, placement, title, triggers = 'focus' } = element.dataset;
+
+  return {
+    target: element,
+    content,
+    html,
+    placement,
+    title,
+    triggers,
+  };
+};
+
+export default {
+  components: {
+    GlPopover,
+  },
+  data() {
+    return {
+      popovers: [],
+    };
+  },
+  created() {
+    this.observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.removedNodes.forEach(this.dispose);
+      });
+    });
+  },
+  beforeDestroy() {
+    this.observer.disconnect();
+  },
+  methods: {
+    addPopovers(elements) {
+      const newPopovers = elements.reduce((acc, element) => {
+        if (this.popoverExists(element)) {
+          return acc;
+        }
+        const popover = newPopover(element);
+        this.observe(popover);
+        return [...acc, popover];
+      }, []);
+
+      this.popovers.push(...newPopovers);
+    },
+    observe(popover) {
+      this.observer.observe(popover.target.parentElement, {
+        childList: true,
+      });
+    },
+    dispose(target) {
+      if (!target) {
+        this.popovers = [];
+      } else {
+        const index = this.popovers.findIndex(popover => popover.target === target);
+
+        if (index > -1) {
+          this.popovers.splice(index, 1);
+        }
+      }
+    },
+    popoverExists(element) {
+      return this.popovers.some(popover => popover.target === element);
+    },
+    getSafeHtml(html) {
+      return sanitize(html);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-popover v-for="(popover, index) in popovers" :key="index" v-bind="popover">
+      <template #title>
+        <span v-if="popover.html" v-html="getSafeHtml(popover.title)"></span>
+        <span v-else>{{ popover.title }}</span>
+      </template>
+      <span v-if="popover.html" v-html="getSafeHtml(popover.content)"></span>
+      <span v-else>{{ popover.content }}</span>
+    </gl-popover>
+  </div>
+</template>

app/assets/javascripts/popovers/index.js

+import Vue from 'vue';
+import { toArray } from 'lodash';
+import PopoversComponent from './components/popovers.vue';
+
+let app;
+
+const APP_ELEMENT_ID = 'gl-popovers-app';
+
+const getPopoversApp = () => {
+  if (!app) {
+    const container = document.createElement('div');
+    container.setAttribute('id', APP_ELEMENT_ID);
+    document.body.appendChild(container);
+
+    const Popovers = Vue.extend(PopoversComponent);
+    app = new Popovers();
+    app.$mount(`#${APP_ELEMENT_ID}`);
+  }
+
+  return app;
+};
+
+const isPopover = (node, selector) => node.matches && node.matches(selector);
+
+const handlePopoverEvent = (rootTarget, e, selector) => {
+  for (let { target } = e; target && target !== rootTarget; target = target.parentNode) {
+    if (isPopover(target, selector)) {
+      getPopoversApp().addPopovers([target]);
+      break;
+    }
+  }
+};
+
+export const initPopovers = () => {
+  ['mouseenter', 'focus', 'click'].forEach(event => {
+    document.addEventListener(
+      event,
+      e => handlePopoverEvent(document, e, '[data-toggle="popover"]'),
+      true,
+    );
+  });
+
+  return getPopoversApp();
+};
+
+export const dispose = elements => toArray(elements).forEach(getPopoversApp().dispose);
+
+export const destroy = () => {
+  getPopoversApp().$destroy();
+  app = null;
+};

app/views/projects/pipelines/_info.html.haml

@@ -42,7 +42,7 @@
         toggle: "popover",
         placement: "top",
         html: "true",
-        trigger: "focus",
+        triggers: "focus",
         title: "<div class='gl-font-weight-normal gl-line-height-normal'>#{popover_title_text}</div>",
         content: "<a href='#{popover_content_url}' target='_blank' rel='noopener noreferrer nofollow'>#{popover_content_text}</a>",
       } }

ee/spec/frontend/security_dashboard/components/issues_badge_spec.js

@@ -31,8 +31,8 @@ describe('Remediated badge component', () => {
     });
 
     it('links the badge and the popover', () => {
-      const { popover } = wrapper.vm.$refs;
-      expect(popover.$attrs.target()).toEqual(findIcon().element.parentNode);
+      const popover = wrapper.find({ ref: 'popover' });
+      expect(popover.props('target')()).toEqual(findIcon().element.parentNode);
     });
 
     it('displays the issues', () => {

ee/spec/frontend/vulnerabilities/remediated_badge_spec.js

@@ -27,8 +27,8 @@ describe('Remediated badge component', () => {
   });
 
   it('should link the badge and the popover', () => {
-    const { popover } = wrapper.vm.$refs;
-    expect(popover.$attrs.target()).toEqual(findBadge().element);
+    const popover = wrapper.find({ ref: 'popover' });
+    expect(popover.props('target')()).toEqual(findBadge().element);
   });
 
   it('should pass down the data to the popover', () => {

spec/frontend/__mocks__/@gitlab/ui.js

@@ -38,8 +38,16 @@ jest.mock('@gitlab/ui/dist/components/base/popover/popover.js', () => ({
       required: false,
       default: () => [],
     },
+    ...Object.fromEntries(['target', 'triggers', 'placement'].map(prop => [prop, {}])),
   },
   render(h) {
-    return h('div', this.$attrs, Object.keys(this.$slots).map(s => this.$slots[s]));
+    return h(
+      'div',
+      {
+        class: 'gl-popover',
+        ...this.$attrs,
+      },
+      Object.keys(this.$slots).map(s => this.$slots[s]),
+    );
   },
 }));

spec/frontend/popovers/components/popovers_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlPopover } from '@gitlab/ui';
+import { useMockMutationObserver } from 'helpers/mock_dom_observer';
+import Popovers from '~/popovers/components/popovers.vue';
+
+describe('popovers/components/popovers.vue', () => {
+  const { trigger: triggerMutate, observersCount } = useMockMutationObserver();
+  let wrapper;
+
+  const buildWrapper = (...targets) => {
+    wrapper = shallowMount(Popovers);
+    wrapper.vm.addPopovers(targets);
+    return wrapper.vm.$nextTick();
+  };
+
+  const createPopoverTarget = (options = {}) => {
+    const target = document.createElement('button');
+    const dataset = {
+      title: 'default title',
+      content: 'some content',
+      ...options,
+    };
+
+    Object.entries(dataset).forEach(([key, value]) => {
+      target.dataset[key] = value;
+    });
+
+    document.body.appendChild(target);
+
+    return target;
+  };
+
+  const allPopovers = () => wrapper.findAll(GlPopover);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('addPopovers', () => {
+    it('attaches popovers to the targets specified', async () => {
+      const target = createPopoverTarget();
+      await buildWrapper(target);
+      expect(wrapper.find(GlPopover).props('target')).toBe(target);
+    });
+
+    it('does not attach a popover twice to the same element', async () => {
+      const target = createPopoverTarget();
+      buildWrapper(target);
+      wrapper.vm.addPopovers([target]);
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.findAll(GlPopover)).toHaveLength(1);
+    });
+
+    it('supports HTML content', async () => {
+      const content = 'content with <b>HTML</b>';
+      await buildWrapper(
+        createPopoverTarget({
+          content,
+          html: true,
+        }),
+      );
+      const html = wrapper.find(GlPopover).html();
+
+      expect(html).toContain(content);
+    });
+
+    it.each`
+      option         | value
+      ${'placement'} | ${'bottom'}
+      ${'triggers'}  | ${'manual'}
+    `('sets $option to $value when data-$option is set in target', async ({ option, value }) => {
+      await buildWrapper(createPopoverTarget({ [option]: value }));
+
+      expect(wrapper.find(GlPopover).props(option)).toBe(value);
+    });
+  });
+
+  describe('dispose', () => {
+    it('removes all popovers when elements is nil', async () => {
+      await buildWrapper(createPopoverTarget(), createPopoverTarget());
+
+      wrapper.vm.dispose();
+      await wrapper.vm.$nextTick();
+
+      expect(allPopovers()).toHaveLength(0);
+    });
+
+    it('removes the popovers that target the elements specified', async () => {
+      const target = createPopoverTarget();
+
+      await buildWrapper(target, createPopoverTarget());
+
+      wrapper.vm.dispose(target);
+      await wrapper.vm.$nextTick();
+
+      expect(allPopovers()).toHaveLength(1);
+    });
+  });
+
+  describe('observe', () => {
+    it('removes popover when target is removed from the document', async () => {
+      const target = createPopoverTarget();
+      await buildWrapper(target);
+
+      wrapper.vm.addPopovers([target, createPopoverTarget()]);
+      await wrapper.vm.$nextTick();
+
+      triggerMutate(document.body, {
+        entry: { removedNodes: [target] },
+        options: { childList: true },
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(allPopovers()).toHaveLength(1);
+    });
+  });
+
+  it('disconnects mutation observer on beforeDestroy', async () => {
+    await buildWrapper(createPopoverTarget());
+
+    expect(observersCount()).toBe(1);
+
+    wrapper.destroy();
+    expect(observersCount()).toBe(0);
+  });
+});

spec/frontend/popovers/index_spec.js

+import { initPopovers, dispose, destroy } from '~/popovers';
+
+describe('popovers/index.js', () => {
+  let popoversApp;
+
+  const createPopoverTarget = (trigger = 'hover') => {
+    const target = document.createElement('button');
+    const dataset = {
+      title: 'default title',
+      content: 'some content',
+      toggle: 'popover',
+      trigger,
+    };
+
+    Object.entries(dataset).forEach(([key, value]) => {
+      target.dataset[key] = value;
+    });
+
+    document.body.appendChild(target);
+
+    return target;
+  };
+
+  const buildPopoversApp = () => {
+    popoversApp = initPopovers('[data-toggle="popover"]');
+  };
+
+  const triggerEvent = (target, eventName = 'mouseenter') => {
+    const event = new Event(eventName);
+
+    target.dispatchEvent(event);
+  };
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    destroy();
+  });
+
+  describe('initPopover', () => {
+    it('attaches a GlPopover for the elements specified in the selector', async () => {
+      const target = createPopoverTarget();
+
+      buildPopoversApp();
+
+      triggerEvent(target);
+
+      await popoversApp.$nextTick();
+      const html = document.querySelector('.gl-popover').innerHTML;
+
+      expect(document.querySelector('.gl-popover')).not.toBe(null);
+      expect(html).toContain('default title');
+      expect(html).toContain('some content');
+    });
+
+    it('supports triggering a popover via custom events', async () => {
+      const trigger = 'click';
+      const target = createPopoverTarget(trigger);
+
+      buildPopoversApp();
+      triggerEvent(target, trigger);
+
+      await popoversApp.$nextTick();
+
+      expect(document.querySelector('.gl-popover')).not.toBe(null);
+      expect(document.querySelector('.gl-popover').innerHTML).toContain('default title');
+    });
+
+    it('inits popovers on targets added after content load', async () => {
+      buildPopoversApp();
+
+      expect(document.querySelector('.gl-popover')).toBe(null);
+
+      const trigger = 'click';
+      const target = createPopoverTarget(trigger);
+      triggerEvent(target, trigger);
+      await popoversApp.$nextTick();
+
+      expect(document.querySelector('.gl-popover')).not.toBe(null);
+    });
+  });
+
+  describe('dispose', () => {
+    it('removes popovers that target the elements specified', async () => {
+      const fakeTarget = createPopoverTarget();
+      const target = createPopoverTarget();
+      buildPopoversApp();
+      triggerEvent(target);
+      triggerEvent(createPopoverTarget());
+      await popoversApp.$nextTick();
+
+      expect(document.querySelectorAll('.gl-popover')).toHaveLength(2);
+
+      dispose([fakeTarget]);
+      await popoversApp.$nextTick();
+
+      expect(document.querySelectorAll('.gl-popover')).toHaveLength(2);
+
+      dispose([target]);
+      await popoversApp.$nextTick();
+
+      expect(document.querySelectorAll('.gl-popover')).toHaveLength(1);
+    });
+  });
+});