Merge branch '296547-add-drawer-content' into 'master'

Add pipeline editor drawer content

See merge request gitlab-org/gitlab!60957

app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue

+<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.',
+    ),
+    note: s__(
+      'PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}',
+    ),
+  },
+  components: {
+    GlCard,
+    GlLink,
+    GlSprintf,
+    PipelineVisualReference,
+  },
+  inject: ['ciExamplesHelpPagePath', 'runnerHelpPagePath'],
+};
+</script>
+<template>
+  <gl-card>
+    <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>
+      <p class="gl-mb-0">
+        <gl-sprintf :message="$options.i18n.note">
+          <template #link="{ content }">
+            <gl-link :href="runnerHelpPagePath" target="_blank">
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-card>
+</template>

app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue

+<script>
+import { GlCard, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|Get started with GitLab CI/CD'),
+    firstParagraph: s__(
+      'PipelineEditorTutorial|GitLab CI/CD can automatically build, test, and deploy your application.',
+    ),
+    secondParagraph: s__(
+      'PipelineEditorTutorial|The pipeline stages and jobs are defined in a %{codeStart}.gitlab-ci.yml%{codeEnd} file. You can edit, visualize and validate the syntax in this file by using the Pipeline Editor.',
+    ),
+  },
+  components: {
+    GlCard,
+    GlSprintf,
+  },
+};
+</script>
+<template>
+  <gl-card>
+    <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-0">
+        <gl-sprintf :message="$options.i18n.secondParagraph">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </p>
+    </template>
+  </gl-card>
+</template>

app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue

+<script>
+import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|⚙️ Pipeline configuration reference'),
+    firstParagraph: s__('PipelineEditorTutorial|Resources to help with your CI/CD configuration:'),
+    browseExamples: s__(
+      'PipelineEditorTutorial|Browse %{linkStart}CI/CD examples and templates%{linkEnd}',
+    ),
+    viewSyntaxRef: s__(
+      'PipelineEditorTutorial|View %{linkStart}.gitlab-ci.yml syntax reference%{linkEnd}',
+    ),
+    learnMore: s__(
+      'PipelineEditorTutorial|Learn more about %{linkStart}GitLab CI/CD concepts%{linkEnd}',
+    ),
+    needs: s__(
+      'PipelineEditorTutorial|Make your pipeline more efficient with the %{linkStart}Needs keyword%{linkEnd}',
+    ),
+  },
+  components: {
+    GlCard,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['ciExamplesHelpPagePath', 'ciHelpPagePath', 'needsHelpPagePath', 'ymlHelpPagePath'],
+};
+</script>
+<template>
+  <gl-card>
+    <template #default>
+      <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
+      <p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
+      <ul>
+        <li>
+          <gl-sprintf :message="$options.i18n.browseExamples">
+            <template #link="{ content }">
+              <gl-link :href="ciExamplesHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+        <li>
+          <gl-sprintf :message="$options.i18n.viewSyntaxRef">
+            <template #link="{ content }">
+              <gl-link :href="ymlHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+        <li>
+          <gl-sprintf :message="$options.i18n.learnMore">
+            <template #link="{ content }">
+              <gl-link :href="ciHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+        <li>
+          <gl-sprintf :message="$options.i18n.needs">
+            <template #link="{ content }">
+              <gl-link :href="needsHelpPagePath" target="_blank">
+                {{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </li>
+      </ul>
+    </template>
+  </gl-card>
+</template>

app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue

+<script>
+import { GlCard } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline'),
+    firstParagraph: s__(
+      'PipelineEditorTutorial|Use the Visualize and Lint tabs in the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes.',
+    ),
+  },
+  components: {
+    GlCard,
+  },
+};
+</script>
+<template>
+  <gl-card>
+    <template #default>
+      <h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
+      <p class="gl-mb-0">{{ $options.i18n.firstParagraph }}</p>
+    </template>
+  </gl-card>
+</template>

app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue

 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
+import FirstPipelineCard from './cards/first_pipeline_card.vue';
+import GettingStartedCard from './cards/getting_started_card.vue';
+import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
+import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
 
 export default {
   width: {
@@ -11,6 +15,10 @@ export default {
     toggleTxt: __('Collapse'),
   },
   components: {
+    FirstPipelineCard,
+    GettingStartedCard,
+    PipelineConfigReferenceCard,
+    VisualizeAndLintCard,
     GlButton,
     GlIcon,
   },
@@ -55,7 +63,7 @@ export default {
 <template>
   <aside
     aria-live="polite"
-    class="gl-fixed gl-right-0 gl-h-full gl-bg-gray-10 gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100"
+    class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-9999 gl-overflow-y-auto"
     :style="rootStyle"
   >
     <gl-button
@@ -63,14 +71,19 @@ export default {
       class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex"
       :class="buttonClass"
       :title="__('Toggle sidebar')"
-      data-testid="toggleBtn"
       @click="toggleDrawer"
     >
-      <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">{{
-        __('Collapse')
-      }}</span>
+      <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">
+        {{ __('Collapse') }}
+      </span>
       <gl-icon data-testid="toggle-icon" :name="buttonIconName" />
     </gl-button>
-    <div v-if="isExpanded" class="gl-p-5" data-testid="drawer-content"></div>
+    <div v-if="isExpanded" class="gl-h-full gl-p-5" data-testid="drawer-content">
+      <getting-started-card class="gl-mb-4" />
+      <first-pipeline-card class="gl-mb-4" />
+      <visualize-and-lint-card class="gl-mb-4" />
+      <pipeline-config-reference-card />
+      <div class="gl-h-13"></div>
+    </div>
   </aside>
 </template>

app/assets/javascripts/pipeline_editor/components/drawer/ui/demo_job_pill.vue

+<script>
+export default {
+  props: {
+    jobName: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="gl-w-13 gl-h-6 gl-font-sm gl-bg-white gl-inset-border-1-blue-500 gl-text-center gl-text-truncate gl-rounded-pill gl-px-4 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
+  >
+    {{ jobName }}
+  </div>
+</template>

app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue

+<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>

app/assets/javascripts/pipeline_editor/index.js

@@ -30,13 +30,19 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     pipelineEtag,
     // Add to provide/inject API for static values
     ciConfigPath,
+    ciExamplesHelpPagePath,
+    ciHelpPagePath,
     defaultBranch,
     emptyStateIllustrationPath,
+    helpPaths,
     lintHelpPagePath,
+    needsHelpPagePath,
     newMergeRequestPath,
+    pipelinePagePath,
     projectFullPath,
     projectPath,
     projectNamespace,
+    runnerHelpPagePath,
     ymlHelpPagePath,
   } = el?.dataset;
 
@@ -80,15 +86,21 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     apolloProvider,
     provide: {
       ciConfigPath,
+      ciExamplesHelpPagePath,
+      ciHelpPagePath,
+      configurationPaths,
       defaultBranch,
       emptyStateIllustrationPath,
+      helpPaths,
       lintHelpPagePath,
+      needsHelpPagePath,
       newMergeRequestPath,
+      pipelinePagePath,
       projectFullPath,
       projectPath,
       projectNamespace,
+      runnerHelpPagePath,
       ymlHelpPagePath,
-      configurationPaths,
     },
     render(h) {
       return h(PipelineEditorApp);

app/helpers/ci/pipeline_editor_helper.rb

@@ -12,16 +12,21 @@ module Ci
       commit_sha = project.commit ? project.commit.sha : ''
       {
         "ci-config-path": project.ci_config_path_or_default,
+        "ci-examples-help-page-path" => help_page_path('ci/examples/README'),
+        "ci-help-page-path" => help_page_path('ci/README'),
         "commit-sha" => commit_sha,
         "default-branch" => project.default_branch,
         "empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
         "initial-branch-name": params[:branch_name],
         "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
+        "needs-help-page-path" => help_page_path('ci/yaml/README', anchor: 'needs'),
         "new-merge-request-path" => namespace_project_new_merge_request_path,
         "pipeline_etag" => project.commit ? graphql_etag_pipeline_sha_path(commit_sha) : '',
+        "pipeline-page-path" => project_pipelines_path(project),
         "project-path" => project.path,
         "project-full-path" => project.full_path,
         "project-namespace" => project.namespace.full_path,
+        "runner-help-page-path" => help_page_path('ci/runners/README'),
         "yml-help-page-path" => help_page_path('ci/yaml/README')
       }
     end

locale/gitlab.pot

@@ -18666,6 +18666,18 @@ msgstr ""
 msgid "Job was retried"
 msgstr ""
 
+msgid "JobName|build-job"
+msgstr ""
+
+msgid "JobName|deploy-app"
+msgstr ""
+
+msgid "JobName|lint-test"
+msgstr ""
+
+msgid "JobName|unit-test"
+msgstr ""
+
 msgid "Jobs"
 msgstr ""
 
@@ -23821,6 +23833,54 @@ msgstr ""
 msgid "PipelineCharts|Total:"
 msgstr ""
 
+msgid "PipelineEditorTutorial|A typical GitLab pipeline consists of three stages: build, test and deploy. Each stage can have one or more jobs."
+msgstr ""
+
+msgid "PipelineEditorTutorial|Browse %{linkStart}CI/CD examples and templates%{linkEnd}"
+msgstr ""
+
+msgid "PipelineEditorTutorial|Get started with GitLab CI/CD"
+msgstr ""
+
+msgid "PipelineEditorTutorial|GitLab CI/CD can automatically build, test, and deploy your application."
+msgstr ""
+
+msgid "PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}"
+msgstr ""
+
+msgid "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."
+msgstr ""
+
+msgid "PipelineEditorTutorial|Learn more about %{linkStart}GitLab CI/CD concepts%{linkEnd}"
+msgstr ""
+
+msgid "PipelineEditorTutorial|Make your pipeline more efficient with the %{linkStart}Needs keyword%{linkEnd}"
+msgstr ""
+
+msgid "PipelineEditorTutorial|Resources to help with your CI/CD configuration:"
+msgstr ""
+
+msgid "PipelineEditorTutorial|The pipeline stages and jobs are defined in a %{codeStart}.gitlab-ci.yml%{codeEnd} file. You can edit, visualize and validate the syntax in this file by using the Pipeline Editor."
+msgstr ""
+
+msgid "PipelineEditorTutorial|Use the Visualize and Lint tabs in the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes."
+msgstr ""
+
+msgid "PipelineEditorTutorial|View %{linkStart}.gitlab-ci.yml syntax reference%{linkEnd}"
+msgstr ""
+
+msgid "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."
+msgstr ""
+
+msgid "PipelineEditorTutorial|⚙️ Pipeline configuration reference"
+msgstr ""
+
+msgid "PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline"
+msgstr ""
+
+msgid "PipelineEditorTutorial|🚀 Run your first pipeline"
+msgstr ""
+
 msgid "PipelineEditor|The CI/CD configuration is continuously validated. Errors and warnings are displayed when the CI/CD configuration file is not empty."
 msgstr ""
 
@@ -30521,6 +30581,15 @@ msgstr ""
 msgid "Stage removed"
 msgstr ""
 
+msgid "StageName|Build"
+msgstr ""
+
+msgid "StageName|Deploy"
+msgstr ""
+
+msgid "StageName|Test"
+msgstr ""
+
 msgid "Standard"
 msgstr ""
 

spec/frontend/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js

+import { getByRole } from '@testing-library/dom';
+import { mount } from '@vue/test-utils';
+import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
+import PipelineVisualReference from '~/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue';
+
+describe('First pipeline card', () => {
+  let wrapper;
+
+  const defaultProvide = {
+    ciExamplesHelpPagePath: '/pipelines/examples',
+    runnerHelpPagePath: '/help/runners',
+  };
+
+  const createComponent = () => {
+    wrapper = mount(FirstPipelineCard, {
+      provide: {
+        ...defaultProvide,
+      },
+    });
+  };
+
+  const getLinkByName = (name) => getByRole(wrapper.element, 'link', { name }).href;
+  const findPipelinesLink = () => getLinkByName(/examples and templates/i);
+  const findRunnersLink = () => getLinkByName(/make sure your instance has runners available/i);
+  const findVisualReference = () => wrapper.findComponent(PipelineVisualReference);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the title', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
+  });
+
+  it('renders the content', () => {
+    expect(findVisualReference().exists()).toBe(true);
+  });
+
+  it('renders the links', () => {
+    expect(findRunnersLink()).toContain(defaultProvide.runnerHelpPagePath);
+    expect(findPipelinesLink()).toContain(defaultProvide.ciExamplesHelpPagePath);
+  });
+});

spec/frontend/pipeline_editor/components/drawer/cards/getting_started_card_spec.js

+import { shallowMount } from '@vue/test-utils';
+import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
+
+describe('Getting started card', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(GettingStartedCard);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the title', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
+  });
+
+  it('renders the content', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.firstParagraph);
+  });
+});

spec/frontend/pipeline_editor/components/drawer/cards/pipeline_config_reference_card_spec.js

+import { getByRole } from '@testing-library/dom';
+import { mount } from '@vue/test-utils';
+import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue';
+
+describe('Pipeline config reference card', () => {
+  let wrapper;
+
+  const defaultProvide = {
+    ciExamplesHelpPagePath: 'help/ci/examples/',
+    ciHelpPagePath: 'help/ci/introduction',
+    needsHelpPagePath: 'help/ci/yaml#needs',
+    ymlHelpPagePath: 'help/ci/yaml',
+  };
+
+  const createComponent = () => {
+    wrapper = mount(PipelineConfigReferenceCard, {
+      provide: {
+        ...defaultProvide,
+      },
+    });
+  };
+
+  const getLinkByName = (name) => getByRole(wrapper.element, 'link', { name }).href;
+  const findCiExamplesLink = () => getLinkByName(/CI\/CD examples and templates/i);
+  const findCiIntroLink = () => getLinkByName(/GitLab CI\/CD concepts/i);
+  const findNeedsLink = () => getLinkByName(/Needs keyword/i);
+  const findYmlSyntaxLink = () => getLinkByName(/.gitlab-ci.yml syntax reference/i);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the title', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
+  });
+
+  it('renders the content', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.firstParagraph);
+  });
+
+  it('renders the links', () => {
+    expect(findCiExamplesLink()).toContain(defaultProvide.ciExamplesHelpPagePath);
+    expect(findCiIntroLink()).toContain(defaultProvide.ciHelpPagePath);
+    expect(findNeedsLink()).toContain(defaultProvide.needsHelpPagePath);
+    expect(findYmlSyntaxLink()).toContain(defaultProvide.ymlHelpPagePath);
+  });
+});

spec/frontend/pipeline_editor/components/drawer/cards/visualize_and_lint_card_spec.js

+import { shallowMount } from '@vue/test-utils';
+import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
+
+describe('Visual and Lint card', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(VisualizeAndLintCard);
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the title', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
+  });
+
+  it('renders the content', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.firstParagraph);
+  });
+});

spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js

+import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
+import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
+import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue';
+import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue';
 import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
 
 describe('Pipeline editor drawer', () => {
@@ -8,7 +13,12 @@ describe('Pipeline editor drawer', () => {
     wrapper = shallowMount(PipelineEditorDrawer);
   };
 
-  const findToggleBtn = () => wrapper.find('[data-testid="toggleBtn"]');
+  const findFirstPipelineCard = () => wrapper.findComponent(FirstPipelineCard);
+  const findGettingStartedCard = () => wrapper.findComponent(GettingStartedCard);
+  const findPipelineConfigReferenceCard = () => wrapper.findComponent(PipelineConfigReferenceCard);
+  const findToggleBtn = () => wrapper.findComponent(GlButton);
+  const findVisualizeAndLintCard = () => wrapper.findComponent(VisualizeAndLintCard);
+
   const findArrowIcon = () => wrapper.find('[data-testid="toggle-icon"]');
   const findCollapseText = () => wrapper.find('[data-testid="collapse-text"]');
   const findDrawerContent = () => wrapper.find('[data-testid="drawer-content"]');
@@ -24,7 +34,7 @@ describe('Pipeline editor drawer', () => {
       createComponent();
     });
 
-    it('show the left facing arrow icon', () => {
+    it('shows the left facing arrow icon', () => {
       expect(findArrowIcon().props('name')).toBe('chevron-double-lg-left');
     });
 
@@ -51,7 +61,7 @@ describe('Pipeline editor drawer', () => {
       await clickToggleBtn();
     });
 
-    it('show the right facing arrow icon', () => {
+    it('shows the right facing arrow icon', () => {
       expect(findArrowIcon().props('name')).toBe('chevron-double-lg-right');
     });
 
@@ -59,10 +69,17 @@ describe('Pipeline editor drawer', () => {
       expect(findCollapseText().exists()).toBe(true);
     });
 
-    it('show the drawer content', () => {
+    it('shows the drawer content', () => {
       expect(findDrawerContent().exists()).toBe(true);
     });
 
+    it('shows all the introduction cards', () => {
+      expect(findFirstPipelineCard().exists()).toBe(true);
+      expect(findGettingStartedCard().exists()).toBe(true);
+      expect(findPipelineConfigReferenceCard().exists()).toBe(true);
+      expect(findVisualizeAndLintCard().exists()).toBe(true);
+    });
+
     it('can close the drawer by clicking on the toggle button', async () => {
       expect(findDrawerContent().exists()).toBe(true);
 

spec/frontend/pipeline_editor/components/drawer/ui/demo_job_pill_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DemoJobPill from '~/pipeline_editor/components/drawer/ui/demo_job_pill.vue';
+
+describe('Demo job pill', () => {
+  let wrapper;
+  const jobName = 'my-build-job';
+
+  const createComponent = () => {
+    wrapper = shallowMount(DemoJobPill, {
+      propsData: {
+        jobName,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the jobName', () => {
+    expect(wrapper.text()).toContain(jobName);
+  });
+});

spec/frontend/pipeline_editor/components/drawer/ui/pipeline_visual_reference_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DemoJobPill from '~/pipeline_editor/components/drawer/ui/demo_job_pill.vue';
+import PipelineVisualReference from '~/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue';
+
+describe('Demo job pill', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineVisualReference);
+  };
+
+  const findAllDemoJobPills = () => wrapper.findAllComponents(DemoJobPill);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders all stage names', () => {
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.build);
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.test);
+    expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.deploy);
+  });
+
+  it('renders all job pills', () => {
+    expect(findAllDemoJobPills()).toHaveLength(4);
+  });
+});

spec/helpers/ci/pipeline_editor_helper_spec.rb

@@ -40,16 +40,21 @@ RSpec.describe Ci::PipelineEditorHelper do
       it 'returns pipeline editor data' do
         expect(pipeline_editor_data).to eq({
           "ci-config-path": project.ci_config_path_or_default,
+          "ci-examples-help-page-path" => help_page_path('ci/examples/README'),
+          "ci-help-page-path" => help_page_path('ci/README'),
           "commit-sha" => project.commit.sha,
           "default-branch" => project.default_branch,
           "empty-state-illustration-path" => 'foo',
           "initial-branch-name": nil,
           "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
+          "needs-help-page-path" => help_page_path('ci/yaml/README', anchor: 'needs'),
           "new-merge-request-path" => '/mock/project/-/merge_requests/new',
           "pipeline_etag" => graphql_etag_pipeline_sha_path(project.commit.sha),
+          "pipeline-page-path" => project_pipelines_path(project),
           "project-path" => project.path,
           "project-full-path" => project.full_path,
           "project-namespace" => project.namespace.full_path,
+          "runner-help-page-path" => help_page_path('ci/runners/README'),
           "yml-help-page-path" => help_page_path('ci/yaml/README')
         })
       end
@@ -61,16 +66,21 @@ RSpec.describe Ci::PipelineEditorHelper do
       it 'returns pipeline editor data' do
         expect(pipeline_editor_data).to eq({
           "ci-config-path": project.ci_config_path_or_default,
+          "ci-examples-help-page-path" => help_page_path('ci/examples/README'),
+          "ci-help-page-path" => help_page_path('ci/README'),
           "commit-sha" => '',
           "default-branch" => project.default_branch,
           "empty-state-illustration-path" => 'foo',
           "initial-branch-name": nil,
           "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
+          "needs-help-page-path" => help_page_path('ci/yaml/README', anchor: 'needs'),
           "new-merge-request-path" => '/mock/project/-/merge_requests/new',
           "pipeline_etag" => '',
+          "pipeline-page-path" => project_pipelines_path(project),
           "project-path" => project.path,
           "project-full-path" => project.full_path,
           "project-namespace" => project.namespace.full_path,
+          "runner-help-page-path" => help_page_path('ci/runners/README'),
           "yml-help-page-path" => help_page_path('ci/yaml/README')
         })
       end