Welcome screen changes for onboarding experiment

Change submit button text and progress bar steps
for onboarding issues experiment

ee/app/assets/javascripts/registrations/constants.js

@@ -8,3 +8,16 @@ export const STEPS = {
 };
 
 export const SUBSCRIPTON_FLOW_STEPS = [STEPS.yourProfile, STEPS.checkout, STEPS.yourGroup];
+
+export const ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS = [
+  STEPS.yourProfile,
+  STEPS.yourGroup,
+  STEPS.yourProject,
+];
+
+export const ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS = [
+  STEPS.yourProfile,
+  STEPS.checkout,
+  STEPS.yourGroup,
+  STEPS.yourProject,
+];

ee/app/assets/javascripts/registrations/welcome/index.js

 import Vue from 'vue';
-import { STEPS } from '../constants';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import {
+  STEPS,
+  SUBSCRIPTON_FLOW_STEPS,
+  ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS,
+  ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
+} from '../constants';
 import ProgressBar from '../components/progress_bar.vue';
 
 export default () => {
@@ -7,7 +13,20 @@ export default () => {
 
   if (!el) return null;
 
-  const steps = [STEPS.yourProfile, STEPS.yourGroup, STEPS.yourProject];
+  const isInSubscriptionFlow = parseBoolean(el.dataset.isInSubscriptionFlow);
+  const isOnboardingIssuesExperimentEnabled = parseBoolean(
+    el.dataset.isOnboardingIssuesExperimentEnabled,
+  );
+
+  let steps;
+
+  if (isInSubscriptionFlow && isOnboardingIssuesExperimentEnabled) {
+    steps = ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS;
+  } else if (isInSubscriptionFlow) {
+    steps = SUBSCRIPTON_FLOW_STEPS;
+  } else if (isOnboardingIssuesExperimentEnabled) {
+    steps = ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS;
+  }
 
   return new Vue({
     el,

ee/app/views/registrations/welcome.html.haml

 - page_title _('Your profile')
+- onboarding_issues_experiment_enabled = experiment_enabled?(:onboarding_issues)
 
 .row.flex-grow-1.bg-gray-light
   .d-flex.flex-column.align-items-center.w-100.gl-p-3-deprecated-no-really-do-not-use-me
     .edit-profile.login-page.d-flex.flex-column.align-items-center.pt-lg-3
-      - if in_subscription_flow?
-        #progress-bar
+      - if in_subscription_flow? || onboarding_issues_experiment_enabled
+        #progress-bar{ data: { is_in_subscription_flow: in_subscription_flow?.to_s, is_onboarding_issues_experiment_enabled: onboarding_issues_experiment_enabled.to_s } }
       %h2.center= _('Welcome to GitLab.com<br>@%{name}!').html_safe % { name: html_escape(current_user.first_name) }
       %p
         .center= _('In order to personalize your experience with GitLab<br>we would like to know a bit more about you.').html_safe
@@ -30,4 +31,4 @@
         .row
           .form-group.col-sm-12.mb-0
             = button_tag class: %w[btn btn-success w-100] do
-              = in_subscription_flow? || in_trial_flow? ? _('Continue') : _('Get started!')
+              = in_subscription_flow? || in_trial_flow? || onboarding_issues_experiment_enabled ? _('Continue') : _('Get started!')

ee/changelogs/unreleased/onboarding-issues-experiment-welcome-screen.yml

+---
+title: Enable onboarding issues experiment on Welcome screen
+merge_request: 31656
+author:
+type: changed

ee/spec/features/registrations/welcome_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Welcome screen', :js do
+  let_it_be(:user) { create(:user) }
+
+  let(:in_subscription_flow) { false }
+  let(:part_of_onboarding_issues_experiment) { false }
+
+  describe 'on GitLab.com' do
+    before do
+      allow(Gitlab).to receive(:com?).and_return(true)
+      gitlab_sign_in(user)
+      allow_any_instance_of(EE::RegistrationsHelper).to receive(:in_subscription_flow?).and_return(in_subscription_flow)
+      stub_experiment_for_user(onboarding_issues: part_of_onboarding_issues_experiment)
+
+      visit users_sign_up_welcome_path
+    end
+
+    it 'shows the welcome page without a progress bar' do
+      expect(page).to have_content('Welcome to GitLab.com')
+      expect(page).not_to have_content('1. Your profile')
+    end
+
+    context 'when in the subscription flow' do
+      let(:in_subscription_flow) { true }
+
+      it 'shows the progress bar with the correct steps' do
+        expect(page).to have_content('1. Your profile 2. Checkout 3. 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('1. Your profile 2. Your GitLab group 3. Your first project')
+      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('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project')
+      end
+    end
+  end
+end

ee/spec/views/registrations/welcome.html.haml_spec.rb

@@ -9,6 +9,7 @@ describe 'registrations/welcome' do
     allow(view).to receive(:current_user).and_return(user)
     allow(view).to receive(:in_subscription_flow?).and_return(in_subscription_flow)
     allow(view).to receive(:in_trial_flow?).and_return(in_trial_flow)
+    allow(view).to receive(:experiment_enabled?).with(:onboarding_issues).and_return(onboarding_issues_experiment_enabled)
 
     render
   end
@@ -18,6 +19,7 @@ describe 'registrations/welcome' do
   context 'in subscription flow' do
     let(:in_subscription_flow) { true }
     let(:in_trial_flow) { false }
+    let(:onboarding_issues_experiment_enabled) { false }
 
     it { is_expected.to have_button('Continue') }
     it { is_expected.to have_selector('#progress-bar') }
@@ -27,15 +29,27 @@ describe 'registrations/welcome' do
   context 'in trial flow' do
     let(:in_subscription_flow) { false }
     let(:in_trial_flow) { true }
+    let(:onboarding_issues_experiment_enabled) { false }
 
     it { is_expected.to have_button('Continue') }
     it { is_expected.not_to have_selector('#progress-bar') }
     it { is_expected.to have_selector('label[for="user_setup_for_company"]', text: 'Who will be using this GitLab trial?') }
   end
 
-  context 'neither in subscription nor in trial flow' do
+  context 'when onboarding issues experiment is enabled' do
     let(:in_subscription_flow) { false }
     let(:in_trial_flow) { false }
+    let(:onboarding_issues_experiment_enabled) { true }
+
+    it { is_expected.to have_button('Continue') }
+    it { is_expected.to have_selector('#progress-bar') }
+    it { is_expected.to have_selector('label[for="user_setup_for_company"]', text: 'Who will be using GitLab?') }
+  end
+
+  context 'when neither in subscription nor in trial flow and onboarding issues experiment is disabled' do
+    let(:in_subscription_flow) { false }
+    let(:in_trial_flow) { false }
+    let(:onboarding_issues_experiment_enabled) { false }
 
     it { is_expected.to have_button('Get started!') }
     it { is_expected.not_to have_selector('#progress-bar') }

lib/gitlab/experimentation.rb

@@ -8,16 +8,22 @@
 # - tracking_category (optional, used to set the category when tracking an experiment event)
 #
 # The experiment is controlled by a Feature Flag (https://docs.gitlab.com/ee/development/feature_flags/controls.html),
-# which is named "#{key}_experiment_percentage" and *must* be set with a percentage and not be used for other purposes.
-# To enable the experiment for 10% of the users (determined by the `experimentation_subject_index` value from a cookie):
+# which is named "#{experiment_key}_experiment_percentage" and *must* be set with a percentage and not be used for other purposes.
 #
-# chatops: `/chatops run feature set key_experiment_percentage 10`
-# console: `Feature.get(:key_experiment_percentage).enable_percentage_of_time(10)`
+# To enable the experiment for 10% of the users:
+#
+# chatops: `/chatops run feature set experiment_key_experiment_percentage 10`
+# console: `Feature.get(:experiment_key_experiment_percentage).enable_percentage_of_time(10)`
 #
 # To disable the experiment:
 #
-# chatops: `/chatops run feature delete key_experiment_percentage`
-# console: `Feature.get(:key_experiment_percentage).remove`
+# chatops: `/chatops run feature delete experiment_key_experiment_percentage`
+# console: `Feature.get(:experiment_key_experiment_percentage).remove`
+#
+# To check the current rollout percentage:
+#
+# chatops: `/chatops run feature get experiment_key_experiment_percentage`
+# console: `Feature.get(:experiment_key_experiment_percentage).percentage_of_time_value`
 #
 module Gitlab
   module Experimentation
@@ -25,6 +31,9 @@ module Gitlab
       signup_flow: {
         tracking_category: 'Growth::Acquisition::Experiment::SignUpFlow'
       },
+      onboarding_issues: {
+        tracking_category: 'Growth::Conversion::Experiment::OnboardingIssues'
+      },
       suggest_pipeline: {
         tracking_category: 'Growth::Expansion::Experiment::SuggestPipeline'
       },