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 }">