summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue
blob: 7b33d98bca09b0d9a1eca741c298a7e609bddce3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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>