Merge branch 'mw-onboarding-welcome-page-additions' into 'master'

Conditionally display link text on welcome page

See merge request gitlab-org/gitlab-ee!14133

ee/app/assets/javascripts/onboarding/onboarding_welcome/components/welcome_page.vue

@@ -28,6 +28,10 @@ export default {
       type: String,
       required: true,
     },
+    fromHelpMenu: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -48,6 +52,11 @@ export default {
       },
     };
   },
+  computed: {
+    skipText() {
+      return this.fromHelpMenu ? __('No, not interested right now') : __('Skip this for now');
+    },
+  },
   mounted() {
     this.helpPopover.target = this.$refs.helpPopoverTrigger;
     this.actionPopover.target = this.$refs.actionPopoverTrigger;
@@ -121,7 +130,7 @@ export default {
       </gl-link>
       <p class="small mt-8">
         <gl-link class="qa-skip-tour-btn" @click="skipTour">
-          {{ __('Skip this for now') }}
+          {{ skipText }}
         </gl-link>
       </p>
       <p class="small ml-4 mr-4" v-html="helpText"></p>

ee/app/assets/javascripts/onboarding/onboarding_welcome/index.js

 import Vue from 'vue';
 import WelcomePage from './components/welcome_page.vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default function() {
   const el = document.getElementById('js-onboarding-welcome');
@@ -8,7 +9,7 @@ export default function() {
     return false;
   }
 
-  const { userAvatarUrl, projectFullPath, skipUrl } = el.dataset;
+  const { userAvatarUrl, projectFullPath, skipUrl, fromHelpMenu } = el.dataset;
 
   return new Vue({
     el,
@@ -18,6 +19,7 @@ export default function() {
           userAvatarUrl,
           projectFullPath,
           skipUrl,
+          fromHelpMenu: parseBoolean(fromHelpMenu),
         },
       });
     },

ee/app/views/explore/onboarding/index.html.haml

 .container.container-limited.limit-container-width.navless-container
-  #js-onboarding-welcome{ data: { user_avatar_url: avatar_icon_for_user(current_user), project_full_path: @project.web_url, skip_url: root_dashboard_path } }
+  #js-onboarding-welcome{ data: { user_avatar_url: avatar_icon_for_user(current_user), project_full_path: @project.web_url, skip_url: root_dashboard_path, from_help_menu: params[:from_help_menu] } }

ee/app/views/shared/_learn_gitlab_menu_item.html.haml

 - return unless user_onboarding_enabled?
 
-%li
-  %a{ href: explore_onboarding_index_path }
+%li.d-none.d-lg-block
+  %a{ href: explore_onboarding_index_path(from_help_menu: true) }
     = _("Learn GitLab")
     %span.badge.badge-success= s_("Badge|New")

ee/spec/features/onboarding/user_onboarding_spec.rb

@@ -24,7 +24,7 @@ describe 'User Onboarding' do
         find('.header-help-dropdown-toggle').click
 
         page.within('.header-help') do
-          expect(page).to have_link('Learn GitLab', href: explore_onboarding_index_path)
+          expect(page).to have_link('Learn GitLab', href: explore_onboarding_index_path(from_help_menu: true))
         end
       end
     end

ee/spec/javascripts/onboarding/onboarding_welcome/welcome_page_spec.js

@@ -12,17 +12,24 @@ describe('User onboarding welcome page', () => {
     userAvatarUrl: 'my-user.avatar.com',
     projectFullPath: 'my-dummy-project/path',
     skipUrl: 'skip.url.com',
+    fromHelpMenu: false,
   };
 
+  function createComponent(propsData) {
+    wrapper = shallowMount(component, { propsData });
+  }
+
   afterEach(() => {
     wrapper.destroy();
   });
 
   beforeEach(done => {
-    wrapper = shallowMount(component, { propsData: props });
+    createComponent(props);
     Vue.nextTick(done);
   });
 
+  const findSkipBtn = () => wrapper.find('.qa-skip-tour-btn');
+
   describe('methods', () => {
     describe('startTour', () => {
       it('resets the localStorage', done => {
@@ -147,11 +154,21 @@ describe('User onboarding welcome page', () => {
       expect(btn.text()).toContain("Ok let's go");
     });
 
-    it('displays the "Skip this for now" link', () => {
-      const btn = wrapper.find('.qa-skip-tour-btn');
+    it('displays "Skip this for now" as link text if fromHelpMenu is false', () => {
+      expect(findSkipBtn().exists()).toBe(true);
+      expect(findSkipBtn().text()).toContain('Skip this for now');
+    });
+
+    it('displays "No, not interested right now" as link text if fromHelpMenu is true', () => {
+      const propsData = {
+        ...props,
+        fromHelpMenu: true,
+      };
 
-      expect(btn.exists()).toBe(true);
-      expect(btn.text()).toContain('Skip this for now');
+      createComponent(propsData);
+
+      expect(findSkipBtn().exists()).toBe(true);
+      expect(findSkipBtn().text()).toContain('No, not interested right now');
     });
 
     it('displays a note on how users can start the tour from the help menu', () => {

locale/gitlab.pot

@@ -8868,6 +8868,9 @@ msgstr ""
 msgid "No, directly import the existing email addresses and usernames."
 msgstr ""
 
+msgid "No, not interested right now"
+msgstr ""
+
 msgid "Node was successfully created."
 msgstr ""