Merge branch 'onboarding-experiment-group-edit-progress-bar' into 'master'

Onboarding experiment group edit progress bar

See merge request gitlab-org/gitlab!31899

ee/app/assets/javascripts/subscriptions/groups/edit/index.js

 import Vue from 'vue';
-import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import {
+  STEPS,
+  SUBSCRIPTON_FLOW_STEPS,
+  ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
+} from 'ee/registrations/constants';
 import ProgressBar from 'ee/registrations/components/progress_bar.vue';
 
 export default () => {
@@ -7,11 +12,19 @@ export default () => {
 
   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({
     el,
     render(createElement) {
       return createElement(ProgressBar, {
-        props: { steps: SUBSCRIPTON_FLOW_STEPS, currentStep: STEPS.yourGroup },
+        props: { steps, currentStep: STEPS.yourGroup },
       });
     },
   });

ee/app/views/subscriptions/groups/edit.html.haml

@@ -11,10 +11,10 @@
         %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-5-deprecated-no-really-do-not-use-me
       - if params[:new_user]
-        #progress-bar
-      %h2.center= _('Create a group for your organization')
+        #progress-bar{ data: { is_onboarding_issues_experiment_enabled: experiment_enabled?(:onboarding_issues).to_s } }
+      %h2.center= _('Create your group')
       %p
-        %div= _('A group represents your organization in GitLab.')
+        %div= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.')
         %div= _('Your %{plan} plan will be applied to your group.' % { plan: plan_title })
 
       = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-3-deprecated-no-really-do-not-use-me' } do |f|
@@ -23,7 +23,7 @@
         .row
           .form-group.group-name-holder.col-sm-12
             = f.label :name, class: 'label-bold' do
-              = _('Group name (Your organization)')
+              = _('Group name (your organization)')
             = f.text_field :name, class: 'form-control',
               required: true,
               title: _('Please fill in a descriptive name for your group.'),

ee/spec/features/subscriptions/groups/edit_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Welcome screen', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group) }
+
+  let(:params) { {} }
+  let(:part_of_onboarding_issues_experiment) { false }
+
+  describe 'on GitLab.com' do
+    before do
+      group.add_owner(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')
+        .to_return(status: 200, body: '{}', headers: {})
+
+      visit edit_subscriptions_group_path(group.path, params)
+    end
+
+    it 'shows the group edit page without a progress bar' do
+      expect(page).to have_content('Create your group')
+      expect(page).not_to have_content('1. Your profile')
+    end
+
+    context 'when showing for a new user' do
+      let(:params) { { new_user: 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
+
+      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. Checkout 3. Your GitLab group 4. Your first project')
+        end
+      end
+    end
+  end
+end

ee/spec/views/subscriptions/groups/edit.html.haml_spec.rb

@@ -11,6 +11,7 @@ describe 'subscriptions/groups/edit' do
     allow(view).to receive(:group_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(:experiment_enabled?).with(:onboarding_issues).and_return(false)
   end
 
   let(:quantity) { '1' }

locale/gitlab.pot

@@ -877,7 +877,7 @@ msgstr ""
 msgid "A group is a collection of several projects"
 msgstr ""
 
-msgid "A group represents your organization in GitLab."
+msgid "A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects."
 msgstr ""
 
 msgid "A member of the abuse team will review your report as soon as possible."
@@ -6246,9 +6246,6 @@ msgstr ""
 msgid "Create a Mattermost team for this group"
 msgstr ""
 
-msgid "Create a group for your organization"
-msgstr ""
-
 msgid "Create a local proxy for storing frequently used upstream images. %{link_start}Learn more%{link_end} about dependency proxies."
 msgstr ""
 
@@ -6372,6 +6369,9 @@ msgstr ""
 msgid "Create your first page"
 msgstr ""
 
+msgid "Create your group"
+msgstr ""
+
 msgid "CreateGroup|You don’t have permission to create a subgroup in this group."
 msgstr ""
 
@@ -10670,7 +10670,7 @@ msgstr ""
 msgid "Group name"
 msgstr ""
 
-msgid "Group name (Your organization)"
+msgid "Group name (your organization)"
 msgstr ""
 
 msgid "Group overview"