Merge branch 'cleanup-pipelines-empty-state-experiment' into 'master'

Convert CI/CD templates picker experiment into default state for empty pipelines page [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!64200

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { fetchPolicies } from '~/lib/graphql';
+import { queryToObject } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
@@ -41,6 +42,7 @@ export default {
   },
   data() {
     return {
+      starterTemplateName: STARTER_TEMPLATE_NAME,
       ciConfigData: {},
       failureType: null,
       failureReasons: [],
@@ -160,7 +162,7 @@ export default {
       variables() {
         return {
           projectPath: this.projectFullPath,
-          templateName: STARTER_TEMPLATE_NAME,
+          templateName: this.starterTemplateName,
         };
       },
       skip({ isNewCiConfigFile }) {
@@ -203,6 +205,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.loadTemplateFromURL();
+  },
   methods: {
     hideFailure() {
       this.showFailure = false;
@@ -258,6 +263,14 @@ export default {
       // if the user has made changes to the file that are unsaved.
       this.lastCommittedContent = this.currentCiFileContent;
     },
+    loadTemplateFromURL() {
+      const templateName = queryToObject(window.location.search)?.template;
+
+      if (templateName) {
+        this.starterTemplateName = templateName;
+        this.setNewEmptyCiConfigFile();
+      }
+    },
   },
 };
 </script>

app/assets/javascripts/pipelines/components/pipelines_list/empty_state.vue

@@ -16,7 +16,6 @@ export default {
       consuming tasks, so you can spend more time creating.`),
     aboutRunnersBtnText: s__('Pipelines|Learn about Runners'),
     installRunnersBtnText: s__('Pipelines|Install GitLab Runners'),
-    getStartedBtnText: s__('Pipelines|Get started with CI/CD'),
     codeQualityTitle: s__('Pipelines|Improve code quality with GitLab CI/CD'),
     codeQualityDescription: s__(`Pipelines|To keep your codebase simple,
       readable, and accessible to contributors, use GitLab CI/CD
@@ -55,9 +54,6 @@ export default {
     ciHelpPagePath() {
       return helpPagePath('ci/quick_start/index.md');
     },
-    isPipelineEmptyStateTemplatesExperimentActive() {
-      return this.canSetCi && Boolean(getExperimentData('pipeline_empty_state_templates'));
-    },
     isCodeQualityExperimentActive() {
       return this.canSetCi && Boolean(getExperimentData('code_quality_walkthrough'));
     },
@@ -81,37 +77,8 @@ export default {
 </script>
 <template>
   <div>
-    <gitlab-experiment
-      v-if="isPipelineEmptyStateTemplatesExperimentActive"
-      name="pipeline_empty_state_templates"
-    >
-      <template #control>
-        <gl-empty-state
-          :title="$options.i18n.title"
-          :svg-path="emptyStateSvgPath"
-          :description="$options.i18n.description"
-          :primary-button-text="$options.i18n.getStartedBtnText"
-          :primary-button-link="ciHelpPagePath"
-        />
-      </template>
-      <template #candidate>
-        <pipelines-ci-templates />
-      </template>
-    </gitlab-experiment>
-    <gitlab-experiment v-else-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
-      <template #control>
-        <gl-empty-state
-          :title="$options.i18n.title"
-          :svg-path="emptyStateSvgPath"
-          :description="$options.i18n.description"
-        >
-          <template #actions>
-            <gl-button :href="ciHelpPagePath" variant="confirm" @click="trackClick()">
-              {{ $options.i18n.getStartedBtnText }}
-            </gl-button>
-          </template>
-        </gl-empty-state>
-      </template>
+    <gitlab-experiment v-if="isCodeQualityExperimentActive" name="code_quality_walkthrough">
+      <template #control><pipelines-ci-templates /></template>
       <template #candidate>
         <gl-empty-state
           :title="$options.i18n.codeQualityTitle"
@@ -127,23 +94,7 @@ export default {
       </template>
     </gitlab-experiment>
     <gitlab-experiment v-else-if="isCiRunnerTemplatesExperimentActive" name="ci_runner_templates">
-      <template #control>
-        <gl-empty-state
-          :title="$options.i18n.title"
-          :svg-path="emptyStateSvgPath"
-          :description="$options.i18n.description"
-        >
-          <template #actions>
-            <gl-button
-              :href="ciHelpPagePath"
-              variant="confirm"
-              @click="trackCiRunnerTemplatesClick('get_started_button_clicked')"
-            >
-              {{ $options.i18n.getStartedBtnText }}
-            </gl-button>
-          </template>
-        </gl-empty-state>
-      </template>
+      <template #control><pipelines-ci-templates /></template>
       <template #candidate>
         <gl-empty-state
           :title="$options.i18n.title"
@@ -169,14 +120,7 @@ export default {
         </gl-empty-state>
       </template>
     </gitlab-experiment>
-    <gl-empty-state
-      v-else-if="canSetCi"
-      :title="$options.i18n.title"
-      :svg-path="emptyStateSvgPath"
-      :description="$options.i18n.description"
-      :primary-button-text="$options.i18n.getStartedBtnText"
-      :primary-button-link="ciHelpPagePath"
-    />
+    <pipelines-ci-templates v-else-if="canSetCi" />
     <gl-empty-state
       v-else
       title=""

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue

 <script>
 import { GlAvatar, GlButton, GlCard, GlSprintf } from '@gitlab/ui';
-import ExperimentTracking from '~/experimentation/experiment_tracking';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
-import { HELLO_WORLD_TEMPLATE_KEY } from '../../constants';
+import { STARTER_TEMPLATE_NAME } from '~/pipeline_editor/constants';
+import Tracking from '~/tracking';
 
 export default {
   components: {
@@ -12,7 +12,8 @@ export default {
     GlCard,
     GlSprintf,
   },
-  HELLO_WORLD_TEMPLATE_KEY,
+  mixins: [Tracking.mixin()],
+  STARTER_TEMPLATE_NAME,
   i18n: {
     cta: s__('Pipelines|Use template'),
     testTemplates: {
@@ -20,10 +21,10 @@ export default {
       subtitle: s__(
         'Pipelines|Use a sample %{codeStart}.gitlab-ci.yml%{codeEnd} template file to explore how CI/CD works.',
       ),
-      helloWorld: {
-        title: s__('Pipelines|“Hello world” with GitLab CI/CD'),
+      gettingStarted: {
+        title: s__('Pipelines|Get started with GitLab CI/CD'),
         description: s__(
-          'Pipelines|Get familiar with GitLab CI/CD syntax by starting with a simple pipeline that runs a “Hello world” script.',
+          'Pipelines|Get familiar with GitLab CI/CD syntax by starting with a basic 3 stage CI/CD pipeline.',
         ),
       },
     },
@@ -35,31 +36,30 @@ export default {
       description: s__('Pipelines|CI/CD template to test and deploy your %{name} project.'),
     },
   },
-  inject: ['addCiYmlPath', 'suggestedCiTemplates'],
+  inject: ['pipelineEditorPath', 'suggestedCiTemplates'],
   data() {
     const templates = this.suggestedCiTemplates.map(({ name, logo }) => {
       return {
         name,
         logo,
-        link: mergeUrlParams({ template: name }, this.addCiYmlPath),
+        link: mergeUrlParams({ template: name }, this.pipelineEditorPath),
         description: sprintf(this.$options.i18n.templates.description, { name }),
       };
     });
 
     return {
       templates,
-      helloWorldTemplateUrl: mergeUrlParams(
-        { template: HELLO_WORLD_TEMPLATE_KEY },
-        this.addCiYmlPath,
+      gettingStartedTemplateUrl: mergeUrlParams(
+        { template: STARTER_TEMPLATE_NAME },
+        this.pipelineEditorPath,
       ),
     };
   },
   methods: {
     trackEvent(template) {
-      const tracking = new ExperimentTracking('pipeline_empty_state_templates', {
+      this.track('template_clicked', {
         label: template,
       });
-      tracking.event('template_clicked');
     },
   },
 };
@@ -82,18 +82,18 @@ export default {
             <div class="gl-py-5"><gl-emoji class="gl-font-size-h2-xl" data-name="wave" /></div>
             <div class="gl-mb-3">
               <strong class="gl-text-gray-800 gl-mb-2">{{
-                $options.i18n.testTemplates.helloWorld.title
+                $options.i18n.testTemplates.gettingStarted.title
               }}</strong>
             </div>
-            <p class="gl-font-sm">{{ $options.i18n.testTemplates.helloWorld.description }}</p>
+            <p class="gl-font-sm">{{ $options.i18n.testTemplates.gettingStarted.description }}</p>
           </div>
 
           <gl-button
             category="primary"
             variant="confirm"
-            :href="helloWorldTemplateUrl"
+            :href="gettingStartedTemplateUrl"
             data-testid="test-template-link"
-            @click="trackEvent($options.HELLO_WORLD_TEMPLATE_KEY)"
+            @click="trackEvent($options.STARTER_TEMPLATE_NAME)"
           >
             {{ $options.i18n.cta }}
           </gl-button>

app/assets/javascripts/pipelines/constants.js

@@ -35,6 +35,3 @@ export const POST_FAILURE = 'post_failure';
 export const UNSUPPORTED_DATA = 'unsupported_data';
 
 export const CHILD_VIEW = 'child';
-
-// The key of the template is the same as the filename
-export const HELLO_WORLD_TEMPLATE_KEY = 'Hello-World';

app/assets/javascripts/pipelines/pipelines_index.js

@@ -29,7 +29,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
     errorStateSvgPath,
     noPipelinesSvgPath,
     newPipelinePath,
-    addCiYmlPath,
+    pipelineEditorPath,
     suggestedCiTemplates,
     canCreatePipeline,
     hasGitlabCi,
@@ -44,7 +44,7 @@ export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
   return new Vue({
     el,
     provide: {
-      addCiYmlPath,
+      pipelineEditorPath,
       artifactsEndpoint,
       artifactsEndpointPlaceholder,
       suggestedCiTemplates: JSON.parse(suggestedCiTemplates),

app/controllers/projects/pipelines_controller.rb

@@ -49,7 +49,6 @@ class Projects::PipelinesController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        enable_pipeline_empty_state_templates_experiment
         enable_code_quality_walkthrough_experiment
         enable_ci_runner_templates_experiment
       end
@@ -301,18 +300,6 @@ class Projects::PipelinesController < Projects::ApplicationController
     params.permit(:scope, :username, :ref, :status)
   end
 
-  def enable_pipeline_empty_state_templates_experiment
-    experiment(:pipeline_empty_state_templates, namespace: project.root_ancestor) do |e|
-      e.exclude! unless current_user
-      e.exclude! if @pipelines_count.to_i > 0
-      e.exclude! if helpers.has_gitlab_ci?(project)
-
-      e.control {}
-      e.candidate {}
-      e.record!
-    end
-  end
-
   def enable_code_quality_walkthrough_experiment
     experiment(:code_quality_walkthrough, namespace: project.root_ancestor) do |e|
       e.exclude! unless current_user

app/helpers/ci/pipelines_helper.rb

@@ -30,9 +30,7 @@ module Ci
       project.has_ci? && project.builds_enabled?
     end
 
-    # This list of templates is for the pipeline_empty_state_templates experiment
-    # and will be cleaned up with https://gitlab.com/gitlab-org/gitlab/-/issues/326299
-    def experiment_suggested_ci_templates
+    def suggested_ci_templates
       [
         { name: 'Android', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/android.svg') },
         { name: 'Bash', logo: image_path('illustrations/third-party-logos/ci_cd-template-logos/bash.svg') },

app/presenters/project_presenter.rb

@@ -135,10 +135,6 @@ class ProjectPresenter < Gitlab::View::Presenter::Delegated
     ide_edit_path(project, default_branch_or_main, 'README.md')
   end
 
-  def add_ci_yml_path
-    add_special_file_path(file_name: ci_config_path_or_default)
-  end
-
   def add_code_quality_ci_yml_path
     add_special_file_path(
       file_name: ci_config_path_or_default,

app/views/projects/pipelines/index.html.haml

@@ -22,7 +22,7 @@
   "ci-lint-path" => can?(current_user, :create_pipeline, @project) && project_ci_lint_path(@project),
   "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project),
   "has-gitlab-ci" => has_gitlab_ci?(@project).to_s,
-  "add-ci-yml-path" => can?(current_user, :create_pipeline, @project) && @project.present(current_user: current_user).add_ci_yml_path,
-  "suggested-ci-templates" => experiment_suggested_ci_templates.to_json,
+  "pipeline-editor-path" => can?(current_user, :create_pipeline, @project) && project_ci_pipeline_editor_path(@project),
+  "suggested-ci-templates" => suggested_ci_templates.to_json,
   "code-quality-page-path" => @project.present(current_user: current_user).add_code_quality_ci_yml_path,
   "ci-runner-settings-path" => project_settings_ci_cd_path(@project, ci_runner_templates: true, anchor: 'js-runners-settings') } }

config/feature_flags/experiment/pipeline_empty_state_templates.yml

----
-name: pipeline_empty_state_templates
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57286
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/326299
-milestone: '13.11'
-type: experiment
-group: group::activation
-default_enabled: false

lib/gitlab/ci/templates/Hello-World.gitlab-ci.yml

-# To contribute improvements to CI/CD templates, please follow the Development guide at:
-# https://docs.gitlab.com/ee/development/cicd/templates.html
-# This specific template is located at:
-# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Grails.gitlab-ci.yml
-#
-# This file is a template demonstrating the `script` keyword.
-# Learn more about this keyword here: https://docs.gitlab.com/ee/ci/yaml/README.html#script
-
-# After committing this template, visit CI/CD > Jobs to see the script output.
-
-job:
-  script:
-    # provide a shell script as argument for this keyword.
-    - echo "Hello World"

locale/gitlab.pot

@@ -23924,10 +23924,10 @@ msgstr ""
 msgid "Pipelines|Editor"
 msgstr ""
 
-msgid "Pipelines|Get familiar with GitLab CI/CD syntax by starting with a simple pipeline that runs a “Hello world” script."
+msgid "Pipelines|Get familiar with GitLab CI/CD syntax by starting with a basic 3 stage CI/CD pipeline."
 msgstr ""
 
-msgid "Pipelines|Get started with CI/CD"
+msgid "Pipelines|Get started with GitLab CI/CD"
 msgstr ""
 
 msgid "Pipelines|GitLab CI/CD can automatically build, test, and deploy your code. Let GitLab take care of time consuming tasks, so you can spend more time creating."
@@ -24068,9 +24068,6 @@ msgstr ""
 msgid "Pipelines|parent"
 msgstr ""
 
-msgid "Pipelines|“Hello world” with GitLab CI/CD"
-msgstr ""
-
 msgid "Pipeline|Actions"
 msgstr ""
 

spec/controllers/projects/pipelines_controller_spec.rb

@@ -284,10 +284,6 @@ RSpec.describe Projects::PipelinesController do
 
     subject { project.namespace }
 
-    context 'pipeline_empty_state_templates experiment' do
-      it_behaves_like 'tracks assignment and records the subject', :pipeline_empty_state_templates, :namespace
-    end
-
     context 'code_quality_walkthrough experiment' do
       it_behaves_like 'tracks assignment and records the subject', :code_quality_walkthrough, :namespace
     end

spec/features/projects/pipelines/pipelines_spec.rb

@@ -783,7 +783,7 @@ RSpec.describe 'Pipelines', :js do
       end
 
       it 'renders empty state' do
-        expect(page).to have_content 'Build with confidence'
+        expect(page).to have_content 'Use a sample CI/CD template'
       end
     end
   end

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -12,6 +12,7 @@ import PipelineEditorMessages from '~/pipeline_editor/components/ui/pipeline_edi
 import { COMMIT_SUCCESS, COMMIT_FAILURE } from '~/pipeline_editor/constants';
 import getBlobContent from '~/pipeline_editor/graphql/queries/blob_content.graphql';
 import getCiConfigData from '~/pipeline_editor/graphql/queries/ci_config.graphql';
+import getTemplate from '~/pipeline_editor/graphql/queries/get_starter_template.query.graphql';
 import PipelineEditorApp from '~/pipeline_editor/pipeline_editor_app.vue';
 import PipelineEditorHome from '~/pipeline_editor/pipeline_editor_home.vue';
 import {
@@ -47,6 +48,7 @@ describe('Pipeline editor app component', () => {
   let mockApollo;
   let mockBlobContentData;
   let mockCiConfigData;
+  let mockGetTemplate;
 
   const createComponent = ({ blobLoading = false, options = {}, provide = {} } = {}) => {
     wrapper = shallowMount(PipelineEditorApp, {
@@ -81,6 +83,7 @@ describe('Pipeline editor app component', () => {
     const handlers = [
       [getBlobContent, mockBlobContentData],
       [getCiConfigData, mockCiConfigData],
+      [getTemplate, mockGetTemplate],
     ];
 
     mockApollo = createMockApollo(handlers);
@@ -112,6 +115,7 @@ describe('Pipeline editor app component', () => {
   beforeEach(() => {
     mockBlobContentData = jest.fn();
     mockCiConfigData = jest.fn();
+    mockGetTemplate = jest.fn();
   });
 
   afterEach(() => {
@@ -318,4 +322,29 @@ describe('Pipeline editor app component', () => {
       expect(findEditorHome().exists()).toBe(true);
     });
   });
+
+  describe('when a template parameter is present in the URL', () => {
+    const { location } = window;
+
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL('https://localhost?template=Android');
+    });
+
+    afterEach(() => {
+      window.location = location;
+    });
+
+    it('renders the given template', async () => {
+      await createComponentWithApollo();
+
+      expect(mockGetTemplate).toHaveBeenCalledWith({
+        projectPath: mockProjectFullPath,
+        templateName: 'Android',
+      });
+
+      expect(findEmptyState().exists()).toBe(false);
+      expect(findTextEditor().exists()).toBe(true);
+    });
+  });
 });

spec/frontend/pipelines/empty_state_spec.js

+import '~/commons';
 import { mount } from '@vue/test-utils';
 import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
+import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
 
 describe('Pipelines Empty State', () => {
   let wrapper;
 
   const findIllustration = () => wrapper.find('img');
   const findButton = () => wrapper.find('a');
+  const pipelinesCiTemplates = () => wrapper.findComponent(PipelinesCiTemplates);
 
   const createWrapper = (props = {}) => {
     wrapper = mount(EmptyState, {
+      provide: {
+        pipelineEditorPath: '',
+        suggestedCiTemplates: [],
+      },
       propsData: {
         emptyStateSvgPath: 'foo.svg',
         canSetCi: true,
@@ -27,27 +34,8 @@ describe('Pipelines Empty State', () => {
       wrapper = null;
     });
 
-    it('should render empty state SVG', () => {
-      expect(findIllustration().attributes('src')).toBe('foo.svg');
-    });
-
-    it('should render empty state header', () => {
-      expect(wrapper.text()).toContain('Build with confidence');
-    });
-
-    it('should render empty state information', () => {
-      expect(wrapper.text()).toContain(
-        'GitLab CI/CD can automatically build, test, and deploy your code. Let GitLab take care of time',
-        'consuming tasks, so you can spend more time creating',
-      );
-    });
-
-    it('should render button with help path', () => {
-      expect(findButton().attributes('href')).toBe('/help/ci/quick_start/index.md');
-    });
-
-    it('should render button text', () => {
-      expect(findButton().text()).toBe('Get started with CI/CD');
+    it('should render the CI/CD templates', () => {
+      expect(pipelinesCiTemplates()).toExist();
     });
   });
 

spec/frontend/pipelines/pipelines_ci_templates_spec.js

+import '~/commons';
 import { shallowMount } from '@vue/test-utils';
-import ExperimentTracking from '~/experimentation/experiment_tracking';
+import { mockTracking } from 'helpers/tracking_helper';
 import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
 
-const addCiYmlPath = "/-/new/main?commit_message='Add%20.gitlab-ci.yml'";
+const pipelineEditorPath = '/-/ci/editor';
 const suggestedCiTemplates = [
   { name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
   { name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
   { name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
 ];
 
-jest.mock('~/experimentation/experiment_tracking');
-
 describe('Pipelines CI Templates', () => {
   let wrapper;
-
-  const GlEmoji = { template: '<img/>' };
+  let trackingSpy;
 
   const createWrapper = () => {
     return shallowMount(PipelinesCiTemplate, {
       provide: {
-        addCiYmlPath,
+        pipelineEditorPath,
         suggestedCiTemplates,
       },
-      stubs: {
-        GlEmoji,
-      },
     });
   };
 
@@ -44,9 +39,9 @@ describe('Pipelines CI Templates', () => {
       wrapper = createWrapper();
     });
 
-    it('links to the hello world template', () => {
+    it('links to the getting started template', () => {
       expect(findTestTemplateLinks().at(0).attributes('href')).toBe(
-        addCiYmlPath.concat('&template=Hello-World'),
+        pipelineEditorPath.concat('?template=Getting-Started'),
       );
     });
   });
@@ -68,7 +63,7 @@ describe('Pipelines CI Templates', () => {
 
     it('links to the correct template', () => {
       expect(findTemplateLinks().at(0).attributes('href')).toBe(
-        addCiYmlPath.concat('&template=Android'),
+        pipelineEditorPath.concat('?template=Android'),
       );
     });
 
@@ -88,24 +83,25 @@ describe('Pipelines CI Templates', () => {
   describe('tracking', () => {
     beforeEach(() => {
       wrapper = createWrapper();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
     it('sends an event when template is clicked', () => {
       findTemplateLinks().at(0).vm.$emit('click');
 
-      expect(ExperimentTracking).toHaveBeenCalledWith('pipeline_empty_state_templates', {
+      expect(trackingSpy).toHaveBeenCalledTimes(1);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
         label: 'Android',
       });
-      expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('template_clicked');
     });
 
-    it('sends an event when Hello-World template is clicked', () => {
+    it('sends an event when Getting-Started template is clicked', () => {
       findTestTemplateLinks().at(0).vm.$emit('click');
 
-      expect(ExperimentTracking).toHaveBeenCalledWith('pipeline_empty_state_templates', {
-        label: 'Hello-World',
+      expect(trackingSpy).toHaveBeenCalledTimes(1);
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'template_clicked', {
+        label: 'Getting-Started',
       });
-      expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('template_clicked');
     });
   });
 });

spec/frontend/pipelines/pipelines_spec.js

@@ -12,6 +12,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
+import PipelinesCiTemplates from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
 import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import { RAW_TEXT_WARNING } from '~/pipelines/constants';
 import Store from '~/pipelines/stores/pipelines_store';
@@ -82,6 +83,10 @@ describe('Pipelines', () => {
   const createComponent = (props = defaultProps) => {
     wrapper = extendedWrapper(
       mount(PipelinesComponent, {
+        provide: {
+          pipelineEditorPath: '',
+          suggestedCiTemplates: [],
+        },
         propsData: {
           store: new Store(),
           projectId: mockProjectId,
@@ -551,52 +556,74 @@ describe('Pipelines', () => {
         await waitForPromises();
       });
 
-      it('renders empty state', () => {
-        expect(findEmptyState().text()).toContain('Build with confidence');
-        expect(findEmptyState().text()).toContain(
-          'GitLab CI/CD can automatically build, test, and deploy your code.',
-        );
-
-        expect(findEmptyState().find(GlButton).text()).toBe('Get started with CI/CD');
-        expect(findEmptyState().find(GlButton).attributes('href')).toBe(
-          '/help/ci/quick_start/index.md',
-        );
+      it('renders the CI/CD templates', () => {
+        expect(wrapper.find(PipelinesCiTemplates)).toExist();
       });
 
       describe('when the code_quality_walkthrough experiment is active', () => {
         beforeAll(() => {
           getExperimentData.mockImplementation((name) => name === 'code_quality_walkthrough');
-          getExperimentVariant.mockReturnValue('candidate');
         });
 
-        it('renders another CTA button', () => {
-          expect(findEmptyState().findComponent(GlButton).text()).toBe('Add a code quality job');
-          expect(findEmptyState().findComponent(GlButton).attributes('href')).toBe(
-            paths.codeQualityPagePath,
-          );
+        describe('the control state', () => {
+          beforeAll(() => {
+            getExperimentVariant.mockReturnValue('control');
+          });
+
+          it('renders the CI/CD templates', () => {
+            expect(wrapper.find(PipelinesCiTemplates)).toExist();
+          });
+        });
+
+        describe('the candidate state', () => {
+          beforeAll(() => {
+            getExperimentVariant.mockReturnValue('candidate');
+          });
+
+          it('renders another CTA button', () => {
+            expect(findEmptyState().findComponent(GlButton).text()).toBe('Add a code quality job');
+            expect(findEmptyState().findComponent(GlButton).attributes('href')).toBe(
+              paths.codeQualityPagePath,
+            );
+          });
         });
       });
 
       describe('when the ci_runner_templates experiment is active', () => {
         beforeAll(() => {
           getExperimentData.mockImplementation((name) => name === 'ci_runner_templates');
-          getExperimentVariant.mockReturnValue('candidate');
         });
 
-        it('renders two buttons', () => {
-          expect(findEmptyState().findAllComponents(GlButton).length).toBe(2);
-          expect(findEmptyState().findAllComponents(GlButton).at(0).text()).toBe(
-            'Install GitLab Runners',
-          );
-          expect(findEmptyState().findAllComponents(GlButton).at(0).attributes('href')).toBe(
-            paths.ciRunnerSettingsPath,
-          );
-          expect(findEmptyState().findAllComponents(GlButton).at(1).text()).toBe(
-            'Learn about Runners',
-          );
-          expect(findEmptyState().findAllComponents(GlButton).at(1).attributes('href')).toBe(
-            '/help/ci/quick_start/index.md',
-          );
+        describe('the control state', () => {
+          beforeAll(() => {
+            getExperimentVariant.mockReturnValue('control');
+          });
+
+          it('renders the CI/CD templates', () => {
+            expect(wrapper.find(PipelinesCiTemplates)).toExist();
+          });
+        });
+
+        describe('the candidate state', () => {
+          beforeAll(() => {
+            getExperimentVariant.mockReturnValue('candidate');
+          });
+
+          it('renders two buttons', () => {
+            expect(findEmptyState().findAllComponents(GlButton).length).toBe(2);
+            expect(findEmptyState().findAllComponents(GlButton).at(0).text()).toBe(
+              'Install GitLab Runners',
+            );
+            expect(findEmptyState().findAllComponents(GlButton).at(0).attributes('href')).toBe(
+              paths.ciRunnerSettingsPath,
+            );
+            expect(findEmptyState().findAllComponents(GlButton).at(1).text()).toBe(
+              'Learn about Runners',
+            );
+            expect(findEmptyState().findAllComponents(GlButton).at(1).attributes('href')).toBe(
+              '/help/ci/quick_start/index.md',
+            );
+          });
         });
       });