Add action popover component

- Add specs for action popover
- Add changelog entry

ee/app/assets/javascripts/onboarding/onboarding_helper/components/action_popover.vue

+<script>
+import { GlPopover } from '@gitlab/ui';
+import eventHub from '../event_hub';
+
+export default {
+  name: 'ActionPopover',
+  components: {
+    GlPopover,
+  },
+  props: {
+    target: {
+      type: HTMLElement,
+      required: true,
+    },
+    content: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    showDefault: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      showPopover: this.showDefault,
+    };
+  },
+  mounted() {
+    eventHub.$on('onboardingHelper.showActionPopover', () => this.toggleShowPopover(true));
+    eventHub.$on('onboardingHelper.hideActionPopover', () => this.toggleShowPopover(false));
+    eventHub.$on('onboardingHelper.destroyActionPopover', () =>
+      this.$root.$off('bv::popover::show'),
+    );
+  },
+  beforeDestroy() {
+    eventHub.$off('onboardingHelper.showActionPopover');
+    eventHub.$off('onboardingHelper.hideActionPopover');
+    eventHub.$off('onboardingHelper.destroyActionPopover');
+  },
+  methods: {
+    toggleShowPopover(show) {
+      this.showPopover = show;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-popover
+    v-bind="$attrs"
+    :target="target"
+    boundary="viewport"
+    :placement="placement"
+    :show="showPopover"
+    :css-classes="['blue', 'onboarding-action-popover-container']"
+  >
+    <div class="onboarding-popover" v-html="content"></div>
+  </gl-popover>
+</template>

ee/app/assets/javascripts/onboarding/onboarding_helper/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

ee/changelogs/unreleased/mw-onboarding-tour-action-popover.yml

+---
+title: Add action popover component for user onboarding
+merge_request: 13346
+author:
+type: other

ee/spec/javascripts/onboarding/onboarding_helper/components/action_popover_spec.js

+import component from 'ee/onboarding/onboarding_helper/components/action_popover.vue';
+import { shallowMount } from '@vue/test-utils';
+import eventHub from 'ee/onboarding/onboarding_helper/event_hub';
+
+describe('User onboarding action popover', () => {
+  let wrapper;
+  let props;
+
+  const target = document.createElement('a');
+  const content = 'This is some test content';
+  const placement = 'top';
+  const showDefault = true;
+
+  beforeEach(() => {
+    props = {
+      target,
+      content,
+      placement,
+      showDefault,
+    };
+    wrapper = shallowMount(component, {
+      propsData: props,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('mounted', () => {
+    it("binds 'onboardingHelper.showActionPopover', 'onboardingHelper.hideActionPopover' and 'onboardingHelper.destroyActionPopover' event listener on eventHub", () => {
+      spyOn(eventHub, '$on');
+
+      const wrapperX = shallowMount(component, {
+        propsData: props,
+      });
+
+      expect(eventHub.$on).toHaveBeenCalledWith(
+        'onboardingHelper.showActionPopover',
+        jasmine.any(Function),
+      );
+
+      expect(eventHub.$on).toHaveBeenCalledWith(
+        'onboardingHelper.hideActionPopover',
+        jasmine.any(Function),
+      );
+
+      expect(eventHub.$on).toHaveBeenCalledWith(
+        'onboardingHelper.destroyActionPopover',
+        jasmine.any(Function),
+      );
+
+      wrapperX.destroy();
+    });
+  });
+
+  describe('beforeDestroy', () => {
+    it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
+      spyOn(eventHub, '$off');
+
+      wrapper.destroy();
+
+      expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.showActionPopover');
+      expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.hideActionPopover');
+      expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.destroyActionPopover');
+    });
+  });
+
+  describe('methods', () => {
+    describe('toggleShowPopover', () => {
+      it('updates the showPopover property', () => {
+        wrapper.vm.showPopover = false;
+
+        wrapper.vm.toggleShowPopover(true);
+
+        expect(wrapper.vm.showPopover).toBeTruthy();
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('shows the content passed in as prop', () => {
+      expect(wrapper.find('.onboarding-popover').text()).toEqual(content);
+    });
+  });
+});