Create walkthrough popover component

Create the popover component that will be used to display the
walkthrough that will guide the user to commit a new CI config file.

app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue

+<script>
+import { GlButton, GlPopover, GlSprintf, GlOutsideDirective as Outside } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  directives: { Outside },
+  i18n: {
+    title: s__('pipelineEditorWalkthrough|See how GitLab pipelines work'),
+    description: s__(
+      'pipelineEditorWalkthrough|This %{codeStart}.gitlab-ci.yml%{codeEnd} file creates a simple test pipeline.',
+    ),
+    instruction: s__(
+      'pipelineEditorWalkthrough|Use the %{boldStart}commit changes%{boldEnd} button at the bottom of the page to run the pipeline.',
+    ),
+    ctaText: s__("pipelineEditorWalkthrough|Let's do this!"),
+  },
+  components: {
+    GlButton,
+    GlPopover,
+    GlSprintf,
+  },
+  data() {
+    return {
+      show: true,
+    };
+  },
+  computed: {
+    targetElement() {
+      return document.querySelector('.js-walkthrough-popover-target');
+    },
+  },
+  methods: {
+    close() {
+      this.show = false;
+    },
+    handleClickCta() {
+      this.close();
+      eventHub.$emit('walkthroughPopoverCtaClicked');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-popover
+    :show.sync="show"
+    :title="$options.i18n.title"
+    :target="targetElement"
+    placement="right"
+    triggers="focus"
+  >
+    <div v-outside="close" class="gl-display-flex gl-flex-direction-column">
+      <p>
+        <gl-sprintf :message="$options.i18n.description">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+
+      <p>
+        <gl-sprintf :message="$options.i18n.instruction">
+          <template #bold="{ content }">
+            <strong>
+              {{ content }}
+            </strong>
+          </template>
+        </gl-sprintf>
+      </p>
+
+      <gl-button
+        class="gl-align-self-end"
+        category="tertiary"
+        data-testid="ctaBtn"
+        variant="confirm"
+        @click="handleClickCta"
+      >
+        <gl-emoji data-name="rocket" />
+        {{ this.$options.i18n.ctaText }}
+      </gl-button>
+    </div>
+  </gl-popover>
+</template>

locale/gitlab.pot

@@ -41698,6 +41698,18 @@ msgstr ""
 msgid "pipeline schedules documentation"
 msgstr ""
 
+msgid "pipelineEditorWalkthrough|Let's do this!"
+msgstr ""
+
+msgid "pipelineEditorWalkthrough|See how GitLab pipelines work"
+msgstr ""
+
+msgid "pipelineEditorWalkthrough|This %{codeStart}.gitlab-ci.yml%{codeEnd} file creates a simple test pipeline."
+msgstr ""
+
+msgid "pipelineEditorWalkthrough|Use the %{boldStart}commit changes%{boldEnd} button at the bottom of the page to run the pipeline."
+msgstr ""
+
 msgid "pod_name can contain only lowercase letters, digits, '-', and '.' and must start and end with an alphanumeric character"
 msgstr ""
 

spec/frontend/pipeline_editor/components/walkthrough_popover_spec.js

+import { mount, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import WalkthroughPopover from '~/pipeline_editor/components/walkthrough_popover.vue';
+import pipelineEditorEventHub from '~/pipeline_editor/event_hub';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+Vue.config.ignoredElements = ['gl-emoji'];
+
+describe('WalkthroughPopover component', () => {
+  let wrapper;
+
+  const createComponent = (mountFn = shallowMount) => {
+    return extendedWrapper(mountFn(WalkthroughPopover));
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('CTA button clicked', () => {
+    beforeEach(async () => {
+      jest.spyOn(pipelineEditorEventHub, '$emit');
+      wrapper = createComponent(mount);
+      await wrapper.findByTestId('ctaBtn').trigger('click');
+    });
+
+    it('emits "walkthroughPopoverCtaClicked" event on Pipeline Editor eventHub', async () => {
+      expect(pipelineEditorEventHub.$emit).toHaveBeenCalledWith('walkthroughPopoverCtaClicked');
+    });
+  });
+});