Commit 4ed4f270 authored by Vitaly Slobodin's avatar Vitaly Slobodin

Merge branch '218397-follow-up-from-onboarding-experiment-new-project-step' into 'master'

Simplify progress bar steps logic

See merge request gitlab-org/gitlab!40390
parents f6c8c45d e38fe856
...@@ -14,10 +14,3 @@ export const ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS = [ ...@@ -14,10 +14,3 @@ export const ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS = [
STEPS.yourGroup, STEPS.yourGroup,
STEPS.yourProject, STEPS.yourProject,
]; ];
export const ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS = [
STEPS.yourProfile,
STEPS.checkout,
STEPS.yourGroup,
STEPS.yourProject,
];
import Vue from 'vue'; import Vue from 'vue';
import { parseBoolean } from '~/lib/utils/common_utils'; import { STEPS, ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS } from '../../constants';
import {
STEPS,
ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS,
ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
} from '../../constants';
import ProgressBar from '../../components/progress_bar.vue'; import ProgressBar from '../../components/progress_bar.vue';
export default () => { export default () => {
...@@ -12,17 +7,11 @@ export default () => { ...@@ -12,17 +7,11 @@ export default () => {
if (!el) return null; if (!el) return null;
const isInSubscriptionFlow = parseBoolean(el.dataset.isInSubscriptionFlow);
const steps = isInSubscriptionFlow
? ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS
: ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS;
return new Vue({ return new Vue({
el, el,
render(createElement) { render(createElement) {
return createElement(ProgressBar, { return createElement(ProgressBar, {
props: { steps, currentStep: STEPS.yourProject }, props: { steps: ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS, currentStep: STEPS.yourProject },
}); });
}, },
}); });
......
...@@ -4,7 +4,6 @@ import { ...@@ -4,7 +4,6 @@ import {
STEPS, STEPS,
SUBSCRIPTON_FLOW_STEPS, SUBSCRIPTON_FLOW_STEPS,
ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS, ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS,
ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
} from '../constants'; } from '../constants';
import ProgressBar from '../components/progress_bar.vue'; import ProgressBar from '../components/progress_bar.vue';
...@@ -20,9 +19,7 @@ export default () => { ...@@ -20,9 +19,7 @@ export default () => {
let steps; let steps;
if (isInSubscriptionFlow && isOnboardingIssuesExperimentEnabled) { if (isInSubscriptionFlow) {
steps = ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS;
} else if (isInSubscriptionFlow) {
steps = SUBSCRIPTON_FLOW_STEPS; steps = SUBSCRIPTON_FLOW_STEPS;
} else if (isOnboardingIssuesExperimentEnabled) { } else if (isOnboardingIssuesExperimentEnabled) {
steps = ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS; steps = ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS;
......
import Vue from 'vue'; import Vue from 'vue';
import { import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
STEPS,
SUBSCRIPTON_FLOW_STEPS,
ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
} from 'ee/registrations/constants';
import ProgressBar from 'ee/registrations/components/progress_bar.vue'; import ProgressBar from 'ee/registrations/components/progress_bar.vue';
import { parseBoolean } from '~/lib/utils/common_utils';
export default () => { export default () => {
const el = document.getElementById('progress-bar'); const el = document.getElementById('progress-bar');
if (!el) return null; if (!el) return null;
const isOnboardingIssuesExperimentEnabled = parseBoolean(
el.dataset.isOnboardingIssuesExperimentEnabled,
);
const steps = isOnboardingIssuesExperimentEnabled
? ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS
: SUBSCRIPTON_FLOW_STEPS;
return new Vue({ return new Vue({
el, el,
render(createElement) { render(createElement) {
return createElement(ProgressBar, { return createElement(ProgressBar, {
props: { steps, currentStep: STEPS.yourGroup }, props: { steps: SUBSCRIPTON_FLOW_STEPS, currentStep: STEPS.yourGroup },
}); });
}, },
}); });
......
<script> <script>
import { import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
STEPS,
SUBSCRIPTON_FLOW_STEPS,
ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
} from 'ee/registrations/constants';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import ProgressBar from 'ee/registrations/components/progress_bar.vue'; import ProgressBar from 'ee/registrations/components/progress_bar.vue';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
...@@ -15,13 +11,9 @@ import ConfirmOrder from './checkout/confirm_order.vue'; ...@@ -15,13 +11,9 @@ import ConfirmOrder from './checkout/confirm_order.vue';
export default { export default {
components: { ProgressBar, SubscriptionDetails, BillingAddress, PaymentMethod, ConfirmOrder }, components: { ProgressBar, SubscriptionDetails, BillingAddress, PaymentMethod, ConfirmOrder },
currentStep: STEPS.checkout, currentStep: STEPS.checkout,
steps: SUBSCRIPTON_FLOW_STEPS,
computed: { computed: {
...mapState(['isOnboardingIssuesExperimentEnabled', 'isNewUser']), ...mapState(['isNewUser']),
steps() {
return this.isOnboardingIssuesExperimentEnabled
? ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS
: SUBSCRIPTON_FLOW_STEPS;
},
}, },
i18n: { i18n: {
checkout: s__('Checkout|Checkout'), checkout: s__('Checkout|Checkout'),
...@@ -31,7 +23,7 @@ export default { ...@@ -31,7 +23,7 @@ export default {
<template> <template>
<div class="checkout d-flex flex-column justify-content-between w-100"> <div class="checkout d-flex flex-column justify-content-between w-100">
<div class="full-width"> <div class="full-width">
<progress-bar v-if="isNewUser" :steps="steps" :current-step="$options.currentStep" /> <progress-bar v-if="isNewUser" :steps="$options.steps" :current-step="$options.currentStep" />
<div class="flash-container"></div> <div class="flash-container"></div>
<h2 class="mt-4 mb-3 mb-lg-5">{{ $options.i18n.checkout }}</h2> <h2 class="mt-4 mb-3 mb-lg-5">{{ $options.i18n.checkout }}</h2>
<subscription-details /> <subscription-details />
......
...@@ -44,7 +44,6 @@ export default ({ ...@@ -44,7 +44,6 @@ export default ({
setupForCompany, setupForCompany,
fullName, fullName,
newUser, newUser,
onboardingIssuesExperimentEnabled,
groupData = '[]', groupData = '[]',
}) => { }) => {
const availablePlans = parsePlanData(planData); const availablePlans = parsePlanData(planData);
...@@ -58,7 +57,6 @@ export default ({ ...@@ -58,7 +57,6 @@ export default ({
availablePlans, availablePlans,
selectedPlan: determineSelectedPlan(planId, availablePlans), selectedPlan: determineSelectedPlan(planId, availablePlans),
isNewUser, isNewUser,
isOnboardingIssuesExperimentEnabled: parseBoolean(onboardingIssuesExperimentEnabled),
fullName, fullName,
groupData: groups, groupData: groups,
selectedGroup: groupId, selectedGroup: groupId,
......
...@@ -11,7 +11,6 @@ module SubscriptionsHelper ...@@ -11,7 +11,6 @@ module SubscriptionsHelper
plan_id: params[:plan_id], plan_id: params[:plan_id],
namespace_id: params[:namespace_id], namespace_id: params[:namespace_id],
new_user: new_user?.to_s, new_user: new_user?.to_s,
onboarding_issues_experiment_enabled: experiment_enabled?(:onboarding_issues).to_s,
group_data: group_data.to_json group_data: group_data.to_json
} }
end end
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.row.flex-grow-1.bg-gray-light .row.flex-grow-1.bg-gray-light
.d-flex.flex-column.align-items-center.w-100.p-3 .d-flex.flex-column.align-items-center.w-100.p-3
.new-project.d-flex.flex-column.align-items-center.pt-5 .new-project.d-flex.flex-column.align-items-center.pt-5
#progress-bar{ data: { is_in_subscription_flow: in_subscription_flow?.to_s } } #progress-bar
%h2.center= _('Create/import your first project') %h2.center= _('Create/import your first project')
%p %p
.center= html_escape(_('This project will live in your group %{strong_open}%{namespace}%{strong_close}. A project is where you house your files (repository), plan your work (issues), publish your documentation (wiki), and so much more.')) % { namespace: html_escape(@project.namespace.name), strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe } .center= html_escape(_('This project will live in your group %{strong_open}%{namespace}%{strong_close}. A project is where you house your files (repository), plan your work (issues), publish your documentation (wiki), and so much more.')) % { namespace: html_escape(@project.namespace.name), strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
%p= _('You have successfully purchased a %{plan} plan subscription for %{seats}. You’ll receive a receipt via email.') % { plan: plan_title, seats: number_of_users } %p= _('You have successfully purchased a %{plan} plan subscription for %{seats}. You’ll receive a receipt via email.') % { plan: plan_title, seats: number_of_users }
.edit-group.d-flex.flex-column.align-items-center.gl-pt-7 .edit-group.d-flex.flex-column.align-items-center.gl-pt-7
- if params[:new_user] - if params[:new_user]
#progress-bar{ data: { is_onboarding_issues_experiment_enabled: experiment_enabled?(:onboarding_issues).to_s } } #progress-bar
%h2.center= _('Create your group') %h2.center= _('Create your group')
%p %p
%div= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.') %div= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.')
......
---
title: Simplify progress bar steps logic
merge_request: 40390
author:
type: changed
...@@ -5,12 +5,10 @@ require 'spec_helper' ...@@ -5,12 +5,10 @@ require 'spec_helper'
RSpec.describe 'New project screen', :js do RSpec.describe 'New project screen', :js do
let_it_be(:user) { create(:user) } let_it_be(:user) { create(:user) }
let_it_be(:namespace) { create(:group) } let_it_be(:namespace) { create(:group) }
let(:in_subscription_flow) { false }
before do before do
gitlab_sign_in(user) gitlab_sign_in(user)
namespace.add_owner(user) namespace.add_owner(user)
allow_any_instance_of(EE::RegistrationsHelper).to receive(:in_subscription_flow?).and_return(in_subscription_flow)
stub_experiment_for_user(onboarding_issues: true) stub_experiment_for_user(onboarding_issues: true)
visit new_users_sign_up_project_path(namespace_id: namespace.id) visit new_users_sign_up_project_path(namespace_id: namespace.id)
end end
...@@ -21,10 +19,4 @@ RSpec.describe 'New project screen', :js do ...@@ -21,10 +19,4 @@ RSpec.describe 'New project screen', :js do
expect(subject).to have_content('Create/import your first project') expect(subject).to have_content('Create/import your first project')
expect(subject).to have_content('Your profile Your GitLab group Your first project') expect(subject).to have_content('Your profile Your GitLab group Your first project')
end end
context 'when in the subscription flow' do
let(:in_subscription_flow) { true }
it { is_expected.to have_content('Your profile Checkout Your GitLab group Your first project') }
end
end end
...@@ -58,14 +58,5 @@ RSpec.describe 'Welcome screen', :js do ...@@ -58,14 +58,5 @@ RSpec.describe 'Welcome screen', :js do
end end
end end
end end
context 'when in the subscription flow and part of the onboarding issues experiment' do
let(:in_subscription_flow) { true }
let(:part_of_onboarding_issues_experiment) { true }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('Your profile Checkout Your GitLab group Your first project')
end
end
end end
end end
...@@ -7,13 +7,11 @@ RSpec.describe 'Welcome screen', :js do ...@@ -7,13 +7,11 @@ RSpec.describe 'Welcome screen', :js do
let_it_be(:group) { create(:group) } let_it_be(:group) { create(:group) }
let(:params) { {} } let(:params) { {} }
let(:part_of_onboarding_issues_experiment) { false }
describe 'on GitLab.com' do describe 'on GitLab.com' do
before do before do
group.add_owner(user) group.add_owner(user)
gitlab_sign_in(user) gitlab_sign_in(user)
stub_experiment_for_user(onboarding_issues: part_of_onboarding_issues_experiment)
stub_request(:get, 'https://customers.gitlab.com/gitlab_plans?plan=free') stub_request(:get, 'https://customers.gitlab.com/gitlab_plans?plan=free')
.to_return(status: 200, body: '{}', headers: {}) .to_return(status: 200, body: '{}', headers: {})
...@@ -31,14 +29,6 @@ RSpec.describe 'Welcome screen', :js do ...@@ -31,14 +29,6 @@ RSpec.describe 'Welcome screen', :js do
it 'shows the progress bar with the correct steps' do it 'shows the progress bar with the correct steps' do
expect(page).to have_content('Your profile Checkout Your GitLab group') expect(page).to have_content('Your profile Checkout Your GitLab group')
end end
context 'when part of the onboarding issues experiment' do
let(:part_of_onboarding_issues_experiment) { true }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('Your profile Checkout Your GitLab group Your first project')
end
end
end end
end end
end end
...@@ -51,21 +51,6 @@ describe('Checkout', () => { ...@@ -51,21 +51,6 @@ describe('Checkout', () => {
]); ]);
}); });
describe('when part of the onboarding issues experiment', () => {
beforeEach(() => {
store.state.isOnboardingIssuesExperimentEnabled = true;
});
it('passes the steps', () => {
expect(findProgressBar().props('steps')).toEqual([
'Your profile',
'Checkout',
'Your GitLab group',
'Your first project',
]);
});
});
it('passes the current step', () => { it('passes the current step', () => {
expect(findProgressBar().props('currentStep')).toEqual('Checkout'); expect(findProgressBar().props('currentStep')).toEqual('Checkout');
}); });
......
...@@ -35,7 +35,6 @@ RSpec.describe SubscriptionsHelper do ...@@ -35,7 +35,6 @@ RSpec.describe SubscriptionsHelper do
before do before do
allow(helper).to receive(:params).and_return(plan_id: 'bronze_id', namespace_id: group.id.to_s) allow(helper).to receive(:params).and_return(plan_id: 'bronze_id', namespace_id: group.id.to_s)
allow(helper).to receive(:current_user).and_return(user) allow(helper).to receive(:current_user).and_return(user)
allow(helper).to receive(:experiment_enabled?).with(:onboarding_issues).and_return(false)
group.add_owner(user) group.add_owner(user)
end end
......
...@@ -11,7 +11,6 @@ RSpec.describe 'subscriptions/groups/edit' do ...@@ -11,7 +11,6 @@ RSpec.describe 'subscriptions/groups/edit' do
allow(view).to receive(:group_path).and_return('') allow(view).to receive(:group_path).and_return('')
allow(view).to receive(:subscriptions_groups_path).and_return('') allow(view).to receive(:subscriptions_groups_path).and_return('')
allow(view).to receive(:current_user).and_return(User.new) allow(view).to receive(:current_user).and_return(User.new)
allow(view).to receive(:experiment_enabled?).with(:onboarding_issues).and_return(false)
end end
let(:quantity) { '1' } let(:quantity) { '1' }
......
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