diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue | 44 |
1 files changed, 14 insertions, 30 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue index 22c1563350d..a8ad56ab6a5 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue @@ -1,20 +1,22 @@ <script> import { GlCard, GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; -import PipelineVisualReference from '../ui/pipeline_visual_reference.vue'; export default { i18n: { title: s__('PipelineEditorTutorial|🚀 Run your first pipeline'), firstParagraph: s__( - 'PipelineEditorTutorial|A typical GitLab pipeline consists of three stages: build, test and deploy. Each stage can have one or more jobs.', - ), - secondParagraph: s__( - 'PipelineEditorTutorial|In the example below, %{codeStart}build%{codeEnd} and %{codeStart}deploy%{codeEnd} each contain one job, and %{codeStart}test%{codeEnd} contains two jobs. Your scripts run in jobs like these.', - ), - thirdParagraph: s__( - 'PipelineEditorTutorial|You can use %{linkStart}CI/CD examples and templates%{linkEnd} to get your first %{codeStart}.gitlab-ci.yml%{codeEnd} configuration file started. Your first pipeline runs when you commit the changes.', + 'PipelineEditorTutorial|This template creates a simple test pipeline. To use it:', ), + listItems: [ + s__( + 'PipelineEditorTutorial|Commit the file to your repository. The pipeline then runs automatically.', + ), + s__('PipelineEditorTutorial|The pipeline status is at the top of the page.'), + s__( + 'PipelineEditorTutorial|Select the pipeline ID to view the full details about your first pipeline run.', + ), + ], note: s__( 'PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}', ), @@ -23,9 +25,8 @@ export default { GlCard, GlLink, GlSprintf, - PipelineVisualReference, }, - inject: ['ciExamplesHelpPagePath', 'runnerHelpPagePath'], + inject: ['runnerHelpPagePath'], }; </script> <template> @@ -33,26 +34,9 @@ export default { <template #default> <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4> <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p> - <p class="gl-mb-3"> - <gl-sprintf :message="$options.i18n.secondParagraph"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> - <pipeline-visual-reference /> - <p class="gl-my-3"> - <gl-sprintf :message="$options.i18n.thirdParagraph"> - <template #link="{ content }"> - <gl-link :href="ciExamplesHelpPagePath" target="_blank"> - {{ content }} - </gl-link> - </template> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - </gl-sprintf> - </p> + <ol class="gl-mb-3"> + <li v-for="(item, i) in $options.i18n.listItems" :key="`li-${i}`">{{ item }}</li> + </ol> <p class="gl-mb-0"> <gl-sprintf :message="$options.i18n.note"> <template #link="{ content }"> |