2 files changed, 59 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue b/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue
new file mode 100644
index 00000000000..7b33d98bca0
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import { CODE_SNIPPET_SOURCES, CODE_SNIPPET_SOURCE_SETTINGS } from './constants';
+
+export default {
+  name: 'CodeSnippetAlert',
+  components: {
+    GlAlert,
+  },
+  inject: ['configurationPaths'],
+  props: {
+    source: {
+      type: String,
+      required: true,
+      validator: (source) => CODE_SNIPPET_SOURCES.includes(source),
+    },
+  },
+  computed: {
+    settings() {
+      return CODE_SNIPPET_SOURCE_SETTINGS[this.source];
+    },
+    configurationPath() {
+      return this.configurationPaths[this.source];
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    variant="tip"
+    :title="__('Code snippet copied. Insert it in the correct location in the YAML file.')"
+    :dismiss-label="__('Dismiss')"
+    :primary-button-link="settings.docsPath"
+    :primary-button-text="__('Read documentation')"
+    :secondary-button-link="configurationPath"
+    :secondary-button-text="__('Go back to configuration')"
+    v-on="$listeners"
+  >
+    {{ __('Before inserting code, be sure to read the comment that separated each code group.') }}
+  </gl-alert>
+</template>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/constants.js b/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/constants.js
new file mode 100644
index 00000000000..e4fd423249b
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/constants.js
@@ -0,0 +1,17 @@
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export const CODE_SNIPPET_SOURCE_URL_PARAM = 'code_snippet_copied_from';
+export const CODE_SNIPPET_SOURCE_API_FUZZING = 'api_fuzzing';
+export const CODE_SNIPPET_SOURCE_DAST = 'dast';
+
+export const CODE_SNIPPET_SOURCES = [CODE_SNIPPET_SOURCE_API_FUZZING, CODE_SNIPPET_SOURCE_DAST];
+export const CODE_SNIPPET_SOURCE_SETTINGS = {
+  [CODE_SNIPPET_SOURCE_API_FUZZING]: {
+    datasetKey: 'apiFuzzingConfigurationPath',
+    docsPath: helpPagePath('user/application_security/api_fuzzing/index'),
+  },
+  [CODE_SNIPPET_SOURCE_DAST]: {
+    datasetKey: 'dastConfigurationPath',
+    docsPath: helpPagePath('user/application_security/dast/index'),
+  },
+};