From d715acda3b27b7ca9eacbd058d7cb9629638c52d Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 10 Jun 2021 18:10:05 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../drawer/cards/first_pipeline_card.vue           | 44 +++++++---------------
 .../drawer/ui/pipeline_visual_reference.vue        | 43 ---------------------
 .../javascripts/pipeline_editor/constants.js       |  2 +
 .../queries/get_starter_template.query.graphql     |  7 ++++
 .../pipeline_editor/pipeline_editor_app.vue        | 28 +++++++++++++-
 5 files changed, 49 insertions(+), 75 deletions(-)
 delete mode 100644 app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue
 create mode 100644 app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql

(limited to 'app/assets/javascripts/pipeline_editor')

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 }">
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue b/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue
deleted file mode 100644
index 1017237365b..00000000000
--- a/app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-import { s__ } from '~/locale';
-import DemoJobPill from './demo_job_pill.vue';
-
-export default {
-  i18n: {
-    stageNames: {
-      build: s__('StageName|Build'),
-      test: s__('StageName|Test'),
-      deploy: s__('StageName|Deploy'),
-    },
-    jobNames: {
-      build: s__('JobName|build-job'),
-      test_1: s__('JobName|unit-test'),
-      test_2: s__('JobName|lint-test'),
-      deploy: s__('JobName|deploy-app'),
-    },
-  },
-  stageClasses:
-    'gl-bg-blue-50 gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-4 gl-rounded-base',
-  titleClasses: 'gl-text-blue-600 gl-mb-4',
-  components: {
-    DemoJobPill,
-  },
-};
-</script>
-<template>
-  <div class="gl-display-flex gl-justify-content-center">
-    <div :class="$options.stageClasses" class="gl-mr-5">
-      <div :class="$options.titleClasses">{{ $options.i18n.stageNames.build }}</div>
-      <demo-job-pill :job-name="$options.i18n.jobNames.build" />
-    </div>
-    <div :class="$options.stageClasses" class="gl-mr-5">
-      <div :class="$options.titleClasses">{{ $options.i18n.stageNames.test }}</div>
-      <demo-job-pill class="gl-mb-3" :job-name="$options.i18n.jobNames.test_1" />
-      <demo-job-pill :job-name="$options.i18n.jobNames.test_2" />
-    </div>
-    <div :class="$options.stageClasses">
-      <div :class="$options.titleClasses">{{ $options.i18n.stageNames.deploy }}</div>
-      <demo-job-pill :job-name="$options.i18n.jobNames.deploy" />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
index f0a24e0c061..1467abd7289 100644
--- a/app/assets/javascripts/pipeline_editor/constants.js
+++ b/app/assets/javascripts/pipeline_editor/constants.js
@@ -31,3 +31,5 @@ export const DRAWER_EXPANDED_KEY = 'pipeline_editor_drawer_expanded';
 
 export const BRANCH_PAGINATION_LIMIT = 20;
 export const BRANCH_SEARCH_DEBOUNCE = '500';
+
+export const STARTER_TEMPLATE_NAME = 'Getting-Started';
diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql
new file mode 100644
index 00000000000..88825718f7b
--- /dev/null
+++ b/app/assets/javascripts/pipeline_editor/graphql/queries/get_starter_template.query.graphql
@@ -0,0 +1,7 @@
+query getTemplate($projectPath: ID!, $templateName: String!) {
+  project(fullPath: $projectPath) {
+    ciTemplate(name: $templateName) {
+      content
+    }
+  }
+}
diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
index 1ec4ee522d6..d900cfcdf2b 100644
--- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
+++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue
@@ -14,12 +14,14 @@ import {
   EDITOR_APP_STATUS_ERROR,
   EDITOR_APP_STATUS_LOADING,
   LOAD_FAILURE_UNKNOWN,
+  STARTER_TEMPLATE_NAME,
 } from './constants';
 import getBlobContent from './graphql/queries/blob_content.graphql';
 import getCiConfigData from './graphql/queries/ci_config.graphql';
 import getAppStatus from './graphql/queries/client/app_status.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from './graphql/queries/client/is_new_ci_config_file.graphql';
+import getTemplate from './graphql/queries/get_starter_template.query.graphql';
 import PipelineEditorHome from './pipeline_editor_home.vue';
 
 export default {
@@ -51,12 +53,13 @@ export default {
       showStartScreen: false,
       showSuccess: false,
       showFailure: false,
+      starterTemplate: '',
     };
   },
 
   apollo: {
     initialCiFileContent: {
-      fetchPolicy: fetchPolicies.NETWORK,
+      fetchPolicy: fetchPolicies.NETWORK_ONLY,
       query: getBlobContent,
       // If it's a brand new file, we don't want to fetch the content.
       // Then when the user commits the first time, the query would run
@@ -135,6 +138,24 @@ export default {
     isNewCiConfigFile: {
       query: getIsNewCiConfigFile,
     },
+    starterTemplate: {
+      query: getTemplate,
+      variables() {
+        return {
+          projectPath: this.projectFullPath,
+          templateName: STARTER_TEMPLATE_NAME,
+        };
+      },
+      skip({ isNewCiConfigFile }) {
+        return !isNewCiConfigFile;
+      },
+      update(data) {
+        return data.project?.ciTemplate?.content || '';
+      },
+      error() {
+        this.reportFailure(LOAD_FAILURE_UNKNOWN);
+      },
+    },
   },
   computed: {
     hasUnsavedChanges() {
@@ -149,6 +170,9 @@ export default {
     isEmpty() {
       return this.currentCiFileContent === '';
     },
+    templateOrCurrentContent() {
+      return this.isNewCiConfigFile ? this.starterTemplate : this.currentCiFileContent;
+    },
   },
   i18n: {
     tabEdit: s__('Pipelines|Edit'),
@@ -256,7 +280,7 @@ export default {
       />
       <pipeline-editor-home
         :ci-config-data="ciConfigData"
-        :ci-file-content="currentCiFileContent"
+        :ci-file-content="templateOrCurrentContent"
         :is-new-ci-config-file="isNewCiConfigFile"
         @commit="updateOnCommit"
         @resetContent="resetContent"
-- 
cgit v1.2.3