Commit e5964bcf authored by Bob Van Landuyt's avatar Bob Van Landuyt

Merge branch 'pipeline-editor-waklthrough-expirement-cleanup' into 'master'

Add pipeline editor walkthrough feature permanently

See merge request gitlab-org/gitlab!82682
parents 7a5d5ed3 4efb2b11
......@@ -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');
......
......@@ -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>
<walkthrough-popover v-if="isNewCiConfigFile" v-on="$listeners" />
<ci-editor-header />
<text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" />
</editor-tab>
......
......@@ -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
---
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
......@@ -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
......@@ -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.')
......
......@@ -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
......
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);
});
it('sets the drawer to be closed by default', async () => {
createComponent();
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', () => {
......
......@@ -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,50 +244,30 @@ 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 });
describe('pipeline editor walkthrough', () => {
describe('when isNewCiConfigFile prop is true (default)', () => {
beforeEach(async () => {
createComponent({
mountFn: mount,
});
await nextTick();
expect(findWalkthroughPopover().exists()).toBe(false);
});
});
describe('when in candidate path', () => {
beforeEach(() => {
stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
});
describe('when isNewCiConfigFile prop is true (default)', () => {
beforeEach(async () => {
createComponent({
mountFn: mount,
});
await nextTick();
});
it('shows walkthrough popover', async () => {
expect(findWalkthroughPopover().exists()).toBe(true);
});
it('shows walkthrough popover', async () => {
expect(findWalkthroughPopover().exists()).toBe(true);
});
});
describe('when isNewCiConfigFile prop is false', () => {
it('does not show walkthrough popover', async () => {
createComponent({ props: { isNewCiConfigFile: false }, mountFn: mount });
await nextTick();
expect(findWalkthroughPopover().exists()).toBe(false);
});
describe('when isNewCiConfigFile prop is false', () => {
it('does not show walkthrough popover', async () => {
createComponent({ props: { isNewCiConfigFile: false }, mountFn: mount });
await nextTick();
expect(findWalkthroughPopover().exists()).toBe(false);
});
});
});
it('sets listeners on walkthrough popover', async () => {
stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
const handler = jest.fn();
createComponent({
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment