Add pipeline editor walkthrough feature permanently

The pipeline editor walkthrough experiment has been deemed a success.
Clean up the experiment code and update the feature implementation to
make the candidate path the default behavior in the application.

Changelog: changed

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

@@ -2,7 +2,6 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { experiment } from '~/experimentation/utils';
 import { DRAWER_EXPANDED_KEY } from '../../constants';
 import FirstPipelineCard from './cards/first_pipeline_card.vue';
 import GettingStartedCard from './cards/getting_started_card.vue';
@@ -50,29 +49,8 @@ export default {
   },
   mounted() {
     this.setTopPosition();
-    this.setInitialExpandState();
   },
   methods: {
-    setInitialExpandState() {
-      let isExpanded;
-
-      experiment('pipeline_editor_walkthrough', {
-        control: () => {
-          isExpanded = true;
-        },
-        candidate: () => {
-          isExpanded = false;
-        },
-      });
-
-      // We check in the local storage and if no value is defined, we want the default
-      // to be true. We want to explicitly set it to true here so that the drawer
-      // animates to open on load.
-      const localValue = localStorage.getItem(this.$options.localDrawerKey);
-      if (localValue === null) {
-        this.isExpanded = isExpanded;
-      }
-    },
     setTopPosition() {
       const navbarEl = document.querySelector('.js-navbar');
 

app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue

@@ -4,7 +4,6 @@ import { s__ } from '~/locale';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
-import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
 import {
   CREATE_TAB,
   EDITOR_APP_STATUS_EMPTY,
@@ -66,7 +65,6 @@ export default {
     GlTabs,
     PipelineGraph,
     TextEditor,
-    GitlabExperiment,
     WalkthroughPopover,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -158,11 +156,7 @@ export default {
       data-testid="editor-tab"
       @click="setCurrentTab($options.tabConstants.CREATE_TAB)"
     >
-      <gitlab-experiment name="pipeline_editor_walkthrough">
-        <template #candidate>
       <walkthrough-popover v-if="isNewCiConfigFile" v-on="$listeners" />
-        </template>
-      </gitlab-experiment>
       <ci-editor-header />
       <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" />
     </editor-tab>

app/controllers/projects/ci/pipeline_editor_controller.rb

@@ -2,7 +2,6 @@
 
 class Projects::Ci::PipelineEditorController < Projects::ApplicationController
   before_action :check_can_collaborate!
-  before_action :setup_walkthrough_experiment, only: :show
   before_action do
     push_frontend_feature_flag(:schema_linting, @project, default_enabled: :yaml)
   end
@@ -19,11 +18,4 @@ class Projects::Ci::PipelineEditorController < Projects::ApplicationController
   def check_can_collaborate!
     render_404 unless can_collaborate_with_project?(@project)
   end
-
-  def setup_walkthrough_experiment
-    experiment(:pipeline_editor_walkthrough, namespace: @project.namespace, sticky_to: current_user) do |e|
-      e.candidate {}
-      e.publish_to_database
-    end
-  end
 end

config/feature_flags/experiment/pipeline_editor_walkthrough.yml

----
-name: pipeline_editor_walkthrough
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/73050
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/345558
-milestone: '14.5'
-type: experiment
-group: group::activation
-default_enabled: false

spec/controllers/projects/ci/pipeline_editor_controller_spec.rb

@@ -36,17 +36,5 @@ RSpec.describe Projects::Ci::PipelineEditorController do
         expect(response).to have_gitlab_http_status(:not_found)
       end
     end
-
-    describe 'pipeline_editor_walkthrough experiment' do
-      before do
-        project.add_developer(user)
-      end
-
-      subject(:action) { show_request }
-
-      it_behaves_like 'tracks assignment and records the subject', :pipeline_editor_walkthrough, :namespace do
-        subject { project.namespace }
-      end
-    end
   end
 end

spec/features/merge_request/user_sees_suggest_pipeline_spec.rb

@@ -42,9 +42,6 @@ RSpec.describe 'Merge request > User sees suggest pipeline', :js do
 
     wait_for_requests
 
-    # Drawer is open
-    expect(page).to have_content('This template creates a simple test pipeline. To use it:')
-
     # Editor shows template
     expect(page).to have_content('This file is a template, and might need editing before it works on your project.')
 

spec/features/projects/ci/editor_spec.rb

@@ -81,8 +81,6 @@ RSpec.describe 'Pipeline Editor', :js do
 
     context 'when a change is made' do
       before do
-        click_button 'Collapse'
-
         page.within('#source-editor-') do
           find('textarea').send_keys '123'
           # It takes some time after sending keys for the vue
@@ -127,8 +125,6 @@ RSpec.describe 'Pipeline Editor', :js do
 
   describe 'Editor content' do
     it 'user can reset their CI configuration' do
-      click_button 'Collapse'
-
       page.within('#source-editor-') do
         find('textarea').send_keys '123'
       end
@@ -151,8 +147,6 @@ RSpec.describe 'Pipeline Editor', :js do
     end
 
     it 'user can cancel reseting their CI configuration' do
-      click_button 'Collapse'
-
       page.within('#source-editor-') do
         find('textarea').send_keys '123'
       end

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

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { stubExperiments } from 'helpers/experimentation_helper';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
 import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
@@ -38,7 +37,6 @@ describe('Pipeline editor drawer', () => {
 
   beforeEach(() => {
     originalObjects.push(window.gon, window.gl);
-    stubExperiments({ pipeline_editor_walkthrough: 'control' });
   });
 
   afterEach(() => {
@@ -48,33 +46,15 @@ describe('Pipeline editor drawer', () => {
   });
 
   describe('default expanded state', () => {
-    describe('when experiment control', () => {
-      it('sets the drawer to be opened by default', async () => {
-        createComponent();
-        expect(findDrawerContent().exists()).toBe(false);
-        await nextTick();
-        expect(findDrawerContent().exists()).toBe(true);
-      });
-    });
-
-    describe('when experiment candidate', () => {
-      beforeEach(() => {
-        stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
-      });
-
     it('sets the drawer to be closed by default', async () => {
       createComponent();
       expect(findDrawerContent().exists()).toBe(false);
-        await nextTick();
-        expect(findDrawerContent().exists()).toBe(false);
-      });
     });
   });
 
   describe('when the drawer is collapsed', () => {
     beforeEach(async () => {
       createComponent();
-      await clickToggleBtn();
     });
 
     it('shows the left facing arrow icon', () => {
@@ -101,6 +81,7 @@ describe('Pipeline editor drawer', () => {
   describe('when the drawer is expanded', () => {
     beforeEach(async () => {
       createComponent();
+      await clickToggleBtn();
     });
 
     it('shows the right facing arrow icon', () => {

spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js

@@ -7,7 +7,6 @@ import WalkthroughPopover from '~/pipeline_editor/components/walkthrough_popover
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
 import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
-import { stubExperiments } from 'helpers/experimentation_helper';
 import {
   CREATE_TAB,
   EDITOR_APP_STATUS_EMPTY,
@@ -245,24 +244,7 @@ describe('Pipeline editor tabs component', () => {
     });
   });
 
-  describe('pipeline_editor_walkthrough experiment', () => {
-    describe('when in control path', () => {
-      beforeEach(() => {
-        stubExperiments({ pipeline_editor_walkthrough: 'control' });
-      });
-
-      it('does not show walkthrough popover', async () => {
-        createComponent({ mountFn: mount });
-        await nextTick();
-        expect(findWalkthroughPopover().exists()).toBe(false);
-      });
-    });
-
-    describe('when in candidate path', () => {
-      beforeEach(() => {
-        stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
-      });
-
+  describe('pipeline editor walkthrough', () => {
     describe('when isNewCiConfigFile prop is true (default)', () => {
       beforeEach(async () => {
         createComponent({
@@ -284,11 +266,8 @@ describe('Pipeline editor tabs component', () => {
       });
     });
   });
-  });
 
   it('sets listeners on walkthrough popover', async () => {
-    stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
-
     const handler = jest.fn();
 
     createComponent({