1 files changed, 72 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/popovers/validate_pipeline_popover.vue b/app/assets/javascripts/ci/pipeline_editor/components/popovers/validate_pipeline_popover.vue
new file mode 100644
index 00000000000..4730a521227
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/popovers/validate_pipeline_popover.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import { VALIDATE_TAB_FEEDBACK_URL } from '../../constants';
+
+export const i18n = {
+  feedbackLink: __('Provide Feedback'),
+  popoverContent: s__(
+    'PipelineEditor|Pipeline behavior will be simulated including the %{codeStart}rules%{codeEnd} %{codeStart}only%{codeEnd} %{codeStart}except%{codeEnd} and %{codeStart}needs%{codeEnd} job dependencies. %{linkStart}Learn more%{linkEnd}',
+  ),
+  title: s__('PipelineEditor|Validate pipeline under simulated conditions'),
+};
+
+export default {
+  name: 'ValidatePipelinePopover',
+  directives: { Outside },
+  components: {
+    GlLink,
+    GlPopover,
+    GlSprintf,
+  },
+  inject: ['simulatePipelineHelpPagePath'],
+  data() {
+    return {
+      showPopover: false,
+    };
+  },
+  methods: {
+    dismiss() {
+      this.showPopover = false;
+    },
+  },
+  i18n,
+  VALIDATE_TAB_FEEDBACK_URL,
+};
+</script>
+
+<template>
+  <gl-popover
+    :show.sync="showPopover"
+    target="validate-pipeline-help"
+    triggers="hover focus"
+    placement="top"
+  >
+    <p class="gl-my-3 gl-font-weight-bold">{{ $options.i18n.title }}</p>
+    <p>
+      <gl-sprintf :message="$options.i18n.popoverContent">
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+        <template #link="{ content }">
+          <gl-link
+            class="gl-font-sm"
+            target="_blank"
+            :href="simulatePipelineHelpPagePath"
+            data-testid="help-link"
+            >{{ content }}</gl-link
+          >
+        </template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-text-right gl-mb-3">
+      <gl-link
+        class="gl-font-sm"
+        target="_blank"
+        :href="$options.VALIDATE_TAB_FEEDBACK_URL"
+        data-testid="feedback-link"
+        >{{ $options.i18n.feedbackLink }}</gl-link
+      >
+    </p>
+  </gl-popover>
+</template>